@onnie81/murdoku-spor 1.1.0 → 1.2.1

package/README.md

@@ -30,8 +30,17 @@ victim** is the killer.
   long-press to mark X, keyboard shortcuts (1-9, N, X, U, R, E).
 - **Multilingual** — English and Spanish shipped; clues are structured data
   rendered through per-language templates, so adding a language is one file.
-- **Original art** — 12 hand-drawn SVG suspect portraits, 16 furniture icons,
-  8 scene themes, logo — no external assets, no fonts to load.
+- **Furniture that matters** — blockers, seats you can be *seated on*
+  (armchairs, two-square sofas), beds you can be *lying in*, and wall-mounted
+  windows/paintings/mirrors that live on the walls themselves (windows count
+  from both sides). Clues use all of it: "was seated on the sofa", "was not
+  lying in any bed", "was beside a window".
+- **Original art & sound** — 12 hand-drawn SVG suspect portraits, colorful
+  furniture sprites, 8 scene themes; synthesized noir soundtrack and sound
+  effects (WebAudio, zero assets, all original).
+- **Phone-first play screen** — fullscreen mode, an always-visible lateral
+  suspect overlay that turns translucent while you place, floating controls,
+  and a clue bottom-sheet.
 
 ## Quick start (Docker)
 

package/client/src/art/objects.jsx

@@ -1,158 +1,219 @@
-// Original furniture / object icons, drawn to sit inside a board cell.
+// Colorful original furniture art.
+//  FloorIcon  — single-cell pieces, viewBox 0 0 100 100
+//  WideIcon   — sofa & bed spanning two cells, viewBox 0 0 200 100
+//  WallIcon   — wall-mounted pieces (window/painting/mirror), viewBox 0 0 100 36
 import React from 'react';
 
-const S = { fill: 'none', stroke: 'currentColor', strokeWidth: 5, strokeLinecap: 'round', strokeLinejoin: 'round' };
-const F = { fill: 'currentColor', stroke: 'none' };
+const INK = '#241e33';
+const O = { stroke: INK, strokeWidth: 2.5, strokeLinejoin: 'round', strokeLinecap: 'round' };
+const WOOD = '#8a5a33', WOOD_D = '#6d4426', BRASS = '#c9a227', CREAM = '#f4efe2';
 
-const ICONS = {
+const FLOOR = {
   piano: (
     <>
-      <path {...F} d="M18,30 L66,30 Q84,34 84,52 Q84,70 62,70 L18,70 Z" opacity="0.85" />
-      <rect {...F} x="18" y="30" width="10" height="40" opacity="0.5" />
-      <path {...S} strokeWidth="3" d="M28,36 L28,64" opacity="0.6" />
-      <path {...F} d="M18,74 L60,74 L60,80 L18,80 Z" opacity="0.5" />
+      <path {...O} d="M20,28 L70,28 Q86,32 86,52 Q86,72 62,72 L20,72 Z" fill="#2b2436" />
+      <path d="M24,32 L66,32 Q80,35 80,50 Q80,66 60,66 L24,66 Z" fill="#3a3350" opacity="0.8" />
+      <rect {...O} x="14" y="60" width="46" height="14" rx="3" fill={CREAM} />
+      {[20, 27, 34, 41, 48, 55].map(x => <rect key={x} x={x} y="60" width="3" height="8" fill={INK} />)}
+      <rect x="20" y="74" width="6" height="12" fill={WOOD_D} />
+      <rect x="52" y="74" width="6" height="12" fill={WOOD_D} />
+      <circle cx="74" cy="30" r="3" fill={BRASS} />
     </>
   ),
   armchair: (
     <>
-      <path {...F} d="M26,34 Q50,24 74,34 L74,58 L26,58 Z" opacity="0.75" />
-      <rect {...F} x="16" y="46" width="14" height="26" rx="6" opacity="0.9" />
-      <rect {...F} x="70" y="46" width="14" height="26" rx="6" opacity="0.9" />
-      <rect {...F} x="26" y="58" width="48" height="14" rx="4" opacity="0.6" />
+      <path {...O} d="M24,30 Q50,18 76,30 L76,60 L24,60 Z" fill="#2e7d6e" />
+      <rect {...O} x="28" y="52" width="44" height="16" rx="6" fill="#3f9683" />
+      <rect {...O} x="14" y="42" width="14" height="30" rx="7" fill="#256a5d" />
+      <rect {...O} x="72" y="42" width="14" height="30" rx="7" fill="#256a5d" />
+      <rect x="30" y="72" width="7" height="12" fill={WOOD} />
+      <rect x="62" y="72" width="7" height="12" fill={WOOD} />
     </>
   ),
   bookshelf: (
     <>
-      <rect {...S} x="24" y="18" width="52" height="64" />
-      <line {...S} strokeWidth="4" x1="24" y1="40" x2="76" y2="40" />
-      <line {...S} strokeWidth="4" x1="24" y1="60" x2="76" y2="60" />
-      {[30, 37, 44, 52, 59, 66].map((x, i) => (
-        <rect key={i} {...F} x={x} y={i % 2 ? 24 : 26} width="5" height={i % 2 ? 13 : 11} opacity="0.7" />
+      <rect {...O} x="22" y="14" width="56" height="72" rx="3" fill={WOOD} />
+      <rect x="27" y="20" width="46" height="26" fill="#513a20" />
+      <rect x="27" y="52" width="46" height="26" fill="#513a20" />
+      {[['#e5484d', 29], ['#0090ff', 37], ['#ffc53d', 45], ['#46a758', 52], ['#6e56cf', 60]].map(([f, x], i) => (
+        <rect key={i} x={x} y={i % 2 ? 26 : 24} width="7" height={i % 2 ? 20 : 22} fill={f} stroke={INK} strokeWidth="1.5" />
       ))}
-      {[32, 41, 50, 59, 66].map((x, i) => (
-        <rect key={i} {...F} x={x} y={i % 2 ? 45 : 47} width="5" height={i % 2 ? 12 : 10} opacity="0.55" />
+      {[['#12a594', 30], ['#e93d82', 38], ['#c9a227', 46], ['#ad7f58', 54], ['#0090ff', 62]].map(([f, x], i) => (
+        <rect key={i} x={x} y={i % 2 ? 58 : 56} width="7" height={i % 2 ? 20 : 22} fill={f} stroke={INK} strokeWidth="1.5" />
       ))}
     </>
   ),
   plant: (
     <>
-      <path {...F} d="M34,62 L66,62 L60,84 L40,84 Z" opacity="0.8" />
-      <path {...S} strokeWidth="4" d="M50,62 L50,42" />
-      <path {...F} d="M50,44 Q34,42 30,26 Q48,28 50,44 Z" opacity="0.7" />
-      <path {...F} d="M50,44 Q66,42 70,26 Q52,28 50,44 Z" opacity="0.7" />
-      <path {...F} d="M50,38 Q50,20 50,16 Q58,26 50,40 Z" opacity="0.7" />
+      <path {...O} d="M50,52 Q30,48 26,26 Q46,30 50,52 Z" fill="#46a758" />
+      <path {...O} d="M50,52 Q70,48 74,26 Q54,30 50,52 Z" fill="#5a9e66" />
+      <path {...O} d="M50,50 Q48,26 50,14 Q58,28 50,50 Z" fill="#3f8d50" />
+      <path {...O} d="M34,58 L66,58 L60,84 L40,84 Z" fill="#b5623a" />
+      <rect {...O} x="31" y="54" width="38" height="8" rx="3" fill="#c9744a" />
     </>
   ),
   clock: (
     <>
-      <rect {...S} x="34" y="14" width="32" height="72" rx="4" />
-      <circle {...S} strokeWidth="4" cx="50" cy="32" r="11" />
-      <path {...S} strokeWidth="3" d="M50,32 L50,25 M50,32 L55,34" />
-      <line {...S} strokeWidth="3" x1="50" y1="48" x2="50" y2="70" opacity="0.7" />
-      <circle {...F} cx="50" cy="72" r="5" opacity="0.8" />
+      <rect {...O} x="34" y="12" width="32" height="76" rx="5" fill={WOOD_D} />
+      <rect x="38" y="46" width="24" height="34" rx="3" fill="#513a20" />
+      <circle {...O} cx="50" cy="29" r="12" fill={CREAM} />
+      <path d="M50,29 L50,21 M50,29 L56,32" stroke={INK} strokeWidth="2.5" strokeLinecap="round" />
+      <line x1="50" y1="48" x2="50" y2="70" stroke={BRASS} strokeWidth="3" />
+      <circle cx="50" cy="72" r="6" fill={BRASS} stroke={INK} strokeWidth="2" />
     </>
   ),
   chest: (
     <>
-      <path {...F} d="M22,42 Q22,26 50,26 Q78,26 78,42 L78,50 L22,50 Z" opacity="0.75" />
-      <rect {...F} x="22" y="50" width="56" height="26" rx="3" opacity="0.9" />
-      <rect {...F} x="45" y="44" width="10" height="14" rx="2" opacity="0.5" />
-      <line {...S} strokeWidth="4" x1="32" y1="28" x2="32" y2="76" opacity="0.45" />
-      <line {...S} strokeWidth="4" x1="68" y1="28" x2="68" y2="76" opacity="0.45" />
+      <path {...O} d="M20,44 Q20,26 50,26 Q80,26 80,44 L80,52 L20,52 Z" fill="#9a6537" />
+      <rect {...O} x="20" y="52" width="60" height="26" rx="3" fill={WOOD} />
+      <rect x="30" y="28" width="6" height="49" fill={BRASS} stroke={INK} strokeWidth="1.5" />
+      <rect x="64" y="28" width="6" height="49" fill={BRASS} stroke={INK} strokeWidth="1.5" />
+      <rect {...O} x="44" y="46" width="12" height="14" rx="2" fill={BRASS} />
+      <circle cx="50" cy="53" r="2" fill={INK} />
     </>
   ),
   stove: (
     <>
-      <rect {...F} x="24" y="38" width="52" height="42" rx="4" opacity="0.85" />
-      <rect {...S} strokeWidth="4" x="32" y="48" width="24" height="22" opacity="0.7" />
-      <circle {...F} cx="68" cy="46" r="3.5" opacity="0.6" />
-      <circle {...F} cx="68" cy="56" r="3.5" opacity="0.6" />
-      <path {...S} strokeWidth="5" d="M62,38 L62,22 Q62,16 68,16" opacity="0.8" />
-    </>
-  ),
-  bed: (
-    <>
-      <path {...S} d="M20,32 L20,76 M80,44 L80,76" />
-      <path {...F} d="M20,52 L80,52 L80,66 L20,66 Z" opacity="0.7" />
-      <rect {...F} x="24" y="44" width="18" height="9" rx="4" opacity="0.9" />
-      <path {...F} d="M20,32 Q26,26 32,32 L32,44 L20,44 Z" opacity="0.5" />
+      <rect {...O} x="24" y="36" width="52" height="44" rx="5" fill="#3a3644" />
+      <rect {...O} x="32" y="46" width="24" height="22" rx="3" fill="#f76b15" />
+      <path d="M36,64 Q40,52 44,64 Q48,52 52,64 Z" fill="#ffc53d" />
+      <circle cx="66" cy="46" r="3.5" fill={BRASS} />
+      <circle cx="66" cy="56" r="3.5" fill={BRASS} />
+      <path {...O} d="M62,36 L62,20 Q62,14 70,14" fill="none" strokeWidth="5" stroke="#3a3644" />
+      <rect x="28" y="80" width="8" height="7" fill={INK} />
+      <rect x="64" y="80" width="8" height="7" fill={INK} />
     </>
   ),
   desk: (
     <>
-      <rect {...F} x="18" y="36" width="64" height="8" rx="2" opacity="0.9" />
-      <rect {...S} strokeWidth="4" x="24" y="44" width="22" height="18" opacity="0.8" />
-      <circle {...F} cx="35" cy="53" r="2.5" opacity="0.8" />
-      <path {...S} d="M76,44 L76,78 M24,62 L24,78" />
-      <rect {...F} x="52" y="26" width="20" height="10" rx="1" opacity="0.5" transform="rotate(-6 62 31)" />
+      <rect {...O} x="16" y="34" width="68" height="9" rx="2" fill={WOOD} />
+      <rect {...O} x="22" y="43" width="26" height="24" fill={WOOD_D} />
+      <rect x="26" y="47" width="18" height="7" fill={WOOD} stroke={INK} strokeWidth="1.5" />
+      <circle cx="35" cy="50.5" r="1.8" fill={BRASS} />
+      <rect x="26" y="57" width="18" height="7" fill={WOOD} stroke={INK} strokeWidth="1.5" />
+      <circle cx="35" cy="60.5" r="1.8" fill={BRASS} />
+      <path d="M76,43 L76,78 M22,67 L22,78" stroke={INK} strokeWidth="4" strokeLinecap="round" />
+      <rect x="50" y="27" width="22" height="8" rx="1" fill={CREAM} stroke={INK} strokeWidth="1.5" transform="rotate(-5 61 31)" />
+      <rect x="52" y="35" width="26" height="4" fill="#3f5c57" />
     </>
   ),
   statue: (
     <>
-      <rect {...F} x="32" y="70" width="36" height="12" opacity="0.85" />
-      <rect {...F} x="38" y="62" width="24" height="8" opacity="0.6" />
-      <path {...F} d="M44,62 Q40,48 46,40 Q42,34 47,28 Q44,20 50,18 Q56,20 53,28 Q58,34 54,40 Q60,48 56,62 Z" opacity="0.8" />
+      <rect {...O} x="30" y="72" width="40" height="12" fill="#7d7691" />
+      <rect {...O} x="36" y="62" width="28" height="10" fill="#9a93b0" />
+      <path {...O} d="M44,62 Q40,48 46,40 Q42,34 47,28 Q44,20 50,18 Q56,20 53,28 Q58,34 54,40 Q60,48 56,62 Z" fill="#b8b2c4" />
+      <circle cx="50" cy="22" r="1.5" fill="#8d87a0" />
     </>
   ),
   telescope: (
     <>
-      <path {...F} d="M28,58 L64,26 L72,36 L36,68 Z" opacity="0.85" />
-      <path {...F} d="M62,20 L78,34 L74,39 L58,25 Z" opacity="0.6" />
-      <path {...S} d="M46,60 L36,84 M46,60 L58,84" />
-      <circle {...F} cx="47" cy="59" r="6" opacity="0.9" />
+      <path {...O} d="M28,58 L62,28 L72,40 L38,68 Z" fill={BRASS} />
+      <path {...O} d="M60,22 L78,36 L73,42 L56,28 Z" fill="#a3821a" />
+      <rect x="40" y="48" width="14" height="6" fill="#a3821a" transform="rotate(-41 47 51)" />
+      <path d="M46,62 L34,86 M46,62 L60,86" stroke={INK} strokeWidth="5" strokeLinecap="round" />
+      <circle {...O} cx="47" cy="60" r="7" fill="#3a3644" />
+      <circle cx="76" cy="33" r="2.5" fill="#e6f4ff" />
     </>
   ),
   lamp: (
     <>
-      <path {...F} d="M34,18 L66,18 L58,42 L42,42 Z" opacity="0.8" />
-      <line {...S} x1="50" y1="42" x2="50" y2="78" />
-      <path {...S} d="M36,84 Q50,76 64,84" />
+      <ellipse cx="50" cy="34" rx="26" ry="10" fill="#ffd76a" opacity="0.35" />
+      <path {...O} d="M32,16 L68,16 L59,40 L41,40 Z" fill="#ffc53d" />
+      <line x1="50" y1="40" x2="50" y2="78" stroke={BRASS} strokeWidth="4" />
+      <path {...O} d="M34,84 Q50,76 66,84 Z" fill={WOOD_D} />
     </>
   ),
-  mirror: (
+  crate: (
     <>
-      <ellipse {...S} cx="50" cy="42" rx="20" ry="26" />
-      <ellipse {...F} cx="50" cy="42" rx="14" ry="20" opacity="0.25" />
-      <path {...S} strokeWidth="3" d="M42,36 Q46,28 54,28" opacity="0.7" />
-      <path {...S} d="M40,70 L36,84 M60,70 L64,84 M38,80 L62,80" />
+      <rect {...O} x="22" y="28" width="56" height="50" fill="#c9a06a" />
+      <line x1="22" y1="45" x2="78" y2="45" stroke={WOOD_D} strokeWidth="3" />
+      <line x1="22" y1="62" x2="78" y2="62" stroke={WOOD_D} strokeWidth="3" />
+      <rect x="38" y="32" width="24" height="9" rx="1.5" fill={CREAM} stroke={INK} strokeWidth="1.5" />
+      {[27, 73].map(x => [52, 69].map(y => <circle key={x + ':' + y} cx={x} cy={y} r="1.8" fill={WOOD_D} />))}
     </>
   ),
-  painting: (
+  harp: (
     <>
-      <rect {...S} x="22" y="24" width="56" height="46" />
-      <rect {...S} strokeWidth="2.5" x="29" y="31" width="42" height="32" opacity="0.6" />
-      <path {...S} strokeWidth="3" d="M32,56 L44,42 L52,50 L60,38 L68,50" opacity="0.8" />
-      <circle {...F} cx="62" cy="38" r="3" opacity="0.6" />
+      <path {...O} d="M30,82 L30,30 Q30,12 50,14 Q72,16 74,44 L74,82 Z" fill="none" stroke={BRASS} strokeWidth="7" />
+      <path {...O} d="M24,80 L80,80 L76,88 L28,88 Z" fill={BRASS} />
+      {[40, 48, 56, 64].map((x, i) => (
+        <line key={x} x1={x} y1={24 + i * 4} x2={x} y2="80" stroke={CREAM} strokeWidth="2" />
+      ))}
+    </>
+  )
+};
+
+const WIDE = {
+  sofa: (
+    <>
+      <path {...O} d="M28,26 Q100,12 172,26 L172,56 L28,56 Z" fill="#a04848" />
+      <rect {...O} x="34" y="46" width="64" height="20" rx="7" fill="#b85c5c" />
+      <rect {...O} x="102" y="46" width="64" height="20" rx="7" fill="#b85c5c" />
+      <rect {...O} x="14" y="34" width="18" height="36" rx="9" fill="#8d3d3d" />
+      <rect {...O} x="168" y="34" width="18" height="36" rx="9" fill="#8d3d3d" />
+      <rect x="36" y="70" width="8" height="12" fill={WOOD_D} />
+      <rect x="156" y="70" width="8" height="12" fill={WOOD_D} />
+      <path d="M60,32 Q66,38 60,44 M136,32 Q142,38 136,44" stroke="#7d3535" strokeWidth="2.5" fill="none" />
     </>
   ),
-  crate: (
+  bed: (
     <>
-      <rect {...S} x="24" y="28" width="52" height="48" />
-      <line {...S} strokeWidth="4" x1="24" y1="44" x2="76" y2="44" opacity="0.8" />
-      <line {...S} strokeWidth="4" x1="24" y1="60" x2="76" y2="60" opacity="0.8" />
-      <rect {...F} x="40" y="32" width="20" height="7" rx="2" opacity="0.6" />
-      <circle {...F} cx="31" cy="52" r="2.5" opacity="0.7" />
-      <circle {...F} cx="69" cy="52" r="2.5" opacity="0.7" />
-      <circle {...F} cx="31" cy="68" r="2.5" opacity="0.7" />
-      <circle {...F} cx="69" cy="68" r="2.5" opacity="0.7" />
+      <rect {...O} x="14" y="18" width="16" height="58" rx="4" fill={WOOD} />
+      <rect {...O} x="176" y="30" width="12" height="46" rx="3" fill={WOOD} />
+      <rect {...O} x="28" y="40" width="150" height="30" rx="6" fill={CREAM} />
+      <path {...O} d="M74,40 L178,40 L178,70 L74,70 Q66,55 74,40 Z" fill="#41609e" />
+      <path d="M84,48 L170,48 M80,56 L170,56" stroke="#33518b" strokeWidth="2.5" />
+      <rect {...O} x="36" y="44" width="30" height="16" rx="7" fill="#ffffff" />
+      <rect x="32" y="70" width="8" height="10" fill={WOOD_D} />
+      <rect x="168" y="70" width="8" height="10" fill={WOOD_D} />
+    </>
+  )
+};
+
+const WALL = {
+  window: (
+    <>
+      <rect x="6" y="2" width="88" height="32" rx="4" fill={CREAM} stroke={INK} strokeWidth="3" />
+      <rect x="12" y="7" width="36" height="22" fill="#2b3a5c" stroke={INK} strokeWidth="2" />
+      <rect x="52" y="7" width="36" height="22" fill="#33456b" stroke={INK} strokeWidth="2" />
+      <circle cx="72" cy="13" r="4" fill="#f4efe2" opacity="0.9" />
+      <circle cx="22" cy="12" r="1.3" fill="#cfe0ff" />
+      <circle cx="36" cy="22" r="1" fill="#cfe0ff" />
+      <path d="M52,26 L64,10" stroke="#8fa8d8" strokeWidth="1.5" opacity="0.7" />
     </>
   ),
-  harp: (
+  painting: (
     <>
-      <path {...S} d="M30,80 L30,30 Q30,14 48,16 Q68,18 70,44 L70,80" />
-      <path {...F} d="M26,78 L74,78 L70,86 L30,86 Z" opacity="0.85" />
-      {[38, 46, 54, 62].map((x, i) => (
-        <line key={i} {...S} strokeWidth="2.5" x1={x} y1={26 + i * 3} x2={x} y2="78" opacity="0.7" />
-      ))}
+      <rect x="8" y="2" width="84" height="32" rx="3" fill={BRASS} stroke={INK} strokeWidth="3" />
+      <rect x="15" y="8" width="70" height="20" fill="#8fb8d8" />
+      <path d="M15,24 L34,13 L46,22 L60,10 L85,24 L85,28 L15,28 Z" fill="#46a758" stroke={INK} strokeWidth="1" />
+      <circle cx="70" cy="13" r="3" fill="#ffd76a" />
+    </>
+  ),
+  mirror: (
+    <>
+      <ellipse cx="50" cy="18" rx="42" ry="16" fill={BRASS} stroke={INK} strokeWidth="3" />
+      <ellipse cx="50" cy="18" rx="34" ry="11" fill="#cfd8e8" stroke={INK} strokeWidth="1.5" />
+      <path d="M30,22 L44,11 M40,24 L52,14" stroke="#f2f6ff" strokeWidth="2.5" opacity="0.8" />
     </>
   )
 };
 
-export function ObjectIcon({ type, size = 40, className = '', title }) {
+export function FloorIcon({ type, size = 40, className = '' }) {
   return (
-    <svg viewBox="0 0 100 100" width={size} height={size} className={`obj-icon ${className}`}
-      role="img" aria-label={title || type}>
-      {ICONS[type] || <circle {...S} cx="50" cy="50" r="26" />}
+    <svg viewBox="0 0 100 100" width={size} height={size} className={`obj-icon ${className}`} role="img" aria-label={type}>
+      {FLOOR[type] || FLOOR.crate}
     </svg>
   );
 }
+
+export const hasWide = (type) => !!WIDE[type];
+export const hasWall = (type) => !!WALL[type];
+export const wideArt = (type) => WIDE[type] || WIDE.sofa;
+export const wallArt = (type) => WALL[type] || WALL.window;
+export const floorArt = (type) => FLOOR[type] || FLOOR.crate;
+
+// kept for any legacy callers
+export function ObjectIcon(props) {
+  return <FloorIcon {...props} />;
+}

package/client/src/audio.js

@@ -0,0 +1,287 @@
+// Original audio: synthesized SFX + a generative noir music loop.
+// Everything is produced with WebAudio oscillators/noise — no assets, no
+// copyright entanglements. Autoplay-safe: the context starts on first gesture.
+
+let ctx = null;
+let master, sfxBus, musicBus, analyser;
+let enabled = { sfx: true, music: true };
+let musicOn = false;
+let schedTimer = null;
+
+function ensureCtx() {
+  if (ctx) return ctx;
+  const AC = window.AudioContext || window.webkitAudioContext;
+  if (!AC) return null;
+  ctx = new AC();
+  master = ctx.createGain();
+  master.gain.value = 0.9;
+  master.connect(ctx.destination);
+  analyser = ctx.createAnalyser();
+  analyser.fftSize = 2048;
+  master.connect(analyser);
+  sfxBus = ctx.createGain();
+  sfxBus.gain.value = 0.5;
+  sfxBus.connect(master);
+  musicBus = ctx.createGain();
+  musicBus.gain.value = 0.0;
+  // gentle echo on the music bus
+  const delay = ctx.createDelay(1.0);
+  delay.delayTime.value = 0.31;
+  const fb = ctx.createGain();
+  fb.gain.value = 0.25;
+  const wet = ctx.createGain();
+  wet.gain.value = 0.22;
+  musicBus.connect(master);
+  musicBus.connect(delay);
+  delay.connect(fb);
+  fb.connect(delay);
+  delay.connect(wet);
+  wet.connect(master);
+  return ctx;
+}
+
+export function initAudioOnGesture() {
+  const kick = () => {
+    const c = ensureCtx();
+    if (!c) return;
+    const go = () => { if (enabled.music) startMusic(); };
+    if (c.state === 'suspended') c.resume().then(go).catch(() => {});
+    else go();
+    window.removeEventListener('pointerdown', kick);
+    window.removeEventListener('keydown', kick);
+  };
+  window.addEventListener('pointerdown', kick);
+  window.addEventListener('keydown', kick);
+}
+
+export function setAudioPrefs({ sfx, music }) {
+  if (typeof sfx === 'boolean') enabled.sfx = sfx;
+  if (typeof music === 'boolean') {
+    enabled.music = music;
+    if (ctx) {
+      if (music) startMusic();
+      else stopMusic();
+    }
+  }
+}
+
+function env(node, t0, a, peak, d, sustain = 0.0001) {
+  node.gain.cancelScheduledValues(t0);
+  node.gain.setValueAtTime(0.0001, t0);
+  node.gain.exponentialRampToValueAtTime(Math.max(peak, 0.0002), t0 + a);
+  node.gain.exponentialRampToValueAtTime(sustain, t0 + a + d);
+}
+
+function tone(freq, { type = 'sine', a = 0.005, d = 0.2, peak = 0.5, bus = null, glide = null, at = 0 } = {}) {
+  const c = ensureCtx();
+  if (!c) return;
+  const t0 = c.currentTime + at;
+  const o = c.createOscillator();
+  const g = c.createGain();
+  o.type = type;
+  o.frequency.setValueAtTime(freq, t0);
+  if (glide) o.frequency.exponentialRampToValueAtTime(glide, t0 + a + d);
+  env(g, t0, a, peak, d);
+  o.connect(g);
+  g.connect(bus || sfxBus);
+  o.start(t0);
+  o.stop(t0 + a + d + 0.1);
+}
+
+function noise({ a = 0.001, d = 0.08, peak = 0.3, freq = 2200, q = 1, at = 0, type = 'bandpass' } = {}) {
+  const c = ensureCtx();
+  if (!c) return;
+  const t0 = c.currentTime + at;
+  const len = Math.ceil(c.sampleRate * (a + d + 0.05));
+  const buf = c.createBuffer(1, len, c.sampleRate);
+  const data = buf.getChannelData(0);
+  for (let i = 0; i < len; i++) data[i] = Math.random() * 2 - 1;
+  const src = c.createBufferSource();
+  src.buffer = buf;
+  const f = c.createBiquadFilter();
+  f.type = type;
+  f.frequency.value = freq;
+  f.Q.value = q;
+  const g = c.createGain();
+  env(g, t0, a, peak, d);
+  src.connect(f);
+  f.connect(g);
+  g.connect(sfxBus);
+  src.start(t0);
+  src.stop(t0 + a + d + 0.05);
+}
+
+export function sfx(name) {
+  if (!enabled.sfx) return;
+  const c = ensureCtx();
+  if (!c) return;
+  if (c.state === 'suspended') c.resume();
+  switch (name) {
+    case 'place': // soft wooden tap + warm blip
+      noise({ d: 0.05, peak: 0.25, freq: 900, q: 0.8, type: 'lowpass' });
+      tone(392, { type: 'triangle', d: 0.14, peak: 0.22 });
+      tone(587.3, { type: 'sine', d: 0.18, peak: 0.12, at: 0.02 });
+      break;
+    case 'pickup':
+      tone(523, { type: 'triangle', d: 0.09, peak: 0.15, glide: 740 });
+      break;
+    case 'thud': // illegal square
+      tone(110, { type: 'sine', d: 0.16, peak: 0.3, glide: 70 });
+      noise({ d: 0.06, peak: 0.12, freq: 300, type: 'lowpass' });
+      break;
+    case 'x':
+      noise({ d: 0.07, peak: 0.2, freq: 1800, q: 2 });
+      noise({ d: 0.07, peak: 0.16, freq: 1400, q: 2, at: 0.07 });
+      break;
+    case 'tick': // pencil mark
+      noise({ d: 0.03, peak: 0.18, freq: 3200, q: 3 });
+      break;
+    case 'paper': // clue strike
+      noise({ d: 0.12, peak: 0.16, freq: 2400, q: 0.7 });
+      break;
+    case 'click':
+      tone(880, { type: 'square', d: 0.03, peak: 0.05 });
+      break;
+    case 'chime': // hint / board complete
+      tone(659.3, { type: 'sine', d: 0.3, peak: 0.18 });
+      tone(987.8, { type: 'sine', d: 0.4, peak: 0.14, at: 0.09 });
+      break;
+    case 'wrong':
+      tone(196, { type: 'sawtooth', d: 0.25, peak: 0.14, glide: 155 });
+      tone(185, { type: 'sawtooth', d: 0.3, peak: 0.12, at: 0.05, glide: 147 });
+      break;
+    case 'reveal': // accusation moment
+      [220, 261.6, 311.1].forEach((f, i) => tone(f, { type: 'triangle', d: 0.5, peak: 0.12, at: i * 0.05 }));
+      break;
+    case 'win': { // noir sting: Dm(add9) arpeggio up + sparkle
+      [146.8, 220, 293.7, 349.2, 440, 587.3].forEach((f, i) =>
+        tone(f, { type: 'triangle', d: 0.55, peak: 0.16, at: i * 0.09 }));
+      tone(1174.7, { type: 'sine', d: 0.8, peak: 0.1, at: 0.6 });
+      noise({ d: 0.5, peak: 0.05, freq: 6000, q: 0.5, at: 0.55, type: 'highpass' });
+      break;
+    }
+    default:
+      break;
+  }
+}
+
+// ---------- generative noir loop ----------
+// D natural-minor palette. A slow bass walk, sparse vibraphone phrases,
+// an occasional brushed-cymbal breath. Nothing repeats exactly.
+
+const BASS = [73.42, 87.31, 98.0, 110.0, 65.41, 87.31];           // D2 F2 G2 A2 C2 F2
+const VIBES = [293.66, 349.23, 392.0, 440.0, 523.25, 587.33, 698.46]; // D4 F4 G4 A4 C5 D5 F5
+let step = 0;
+
+function playBass(t, f) {
+  const c = ctx;
+  const o = c.createOscillator();
+  const g = c.createGain();
+  const flt = c.createBiquadFilter();
+  o.type = 'triangle';
+  o.frequency.value = f;
+  flt.type = 'lowpass';
+  flt.frequency.value = 260;
+  g.gain.setValueAtTime(0.0001, t);
+  g.gain.exponentialRampToValueAtTime(0.34, t + 0.04);
+  g.gain.exponentialRampToValueAtTime(0.0001, t + 1.55);
+  o.connect(flt); flt.connect(g); g.connect(musicBus);
+  o.start(t); o.stop(t + 1.7);
+}
+
+function playVibe(t, f, vel = 0.12) {
+  const c = ctx;
+  const o = c.createOscillator();
+  const o2 = c.createOscillator();
+  const g = c.createGain();
+  o.type = 'sine'; o.frequency.value = f;
+  o2.type = 'sine'; o2.frequency.value = f * 2.01;
+  const g2 = c.createGain(); g2.gain.value = 0.25;
+  g.gain.setValueAtTime(0.0001, t);
+  g.gain.exponentialRampToValueAtTime(vel, t + 0.015);
+  g.gain.exponentialRampToValueAtTime(0.0001, t + 1.9);
+  o.connect(g); o2.connect(g2); g2.connect(g); g.connect(musicBus);
+  o.start(t); o.stop(t + 2); o2.start(t); o2.stop(t + 2);
+}
+
+function playBrush(t) {
+  const c = ctx;
+  const len = Math.ceil(c.sampleRate * 0.5);
+  const buf = c.createBuffer(1, len, c.sampleRate);
+  const d = buf.getChannelData(0);
+  for (let i = 0; i < len; i++) d[i] = (Math.random() * 2 - 1) * (1 - i / len);
+  const src = c.createBufferSource();
+  src.buffer = buf;
+  const f = c.createBiquadFilter();
+  f.type = 'highpass'; f.frequency.value = 5000;
+  const g = c.createGain();
+  g.gain.setValueAtTime(0.0001, t);
+  g.gain.exponentialRampToValueAtTime(0.045, t + 0.05);
+  g.gain.exponentialRampToValueAtTime(0.0001, t + 0.45);
+  src.connect(f); f.connect(g); g.connect(musicBus);
+  src.start(t); src.stop(t + 0.5);
+}
+
+let nextBeat = 0;
+const BEAT = 0.86; // ~70bpm
+
+function scheduler() {
+  const c = ctx;
+  if (!c || !musicOn) return;
+  const horizon = c.currentTime + 1.6;
+  while (nextBeat < horizon) {
+    const t = nextBeat;
+    const bar = Math.floor(step / 4) % BASS.length;
+    if (step % 2 === 0) playBass(t, BASS[bar]);
+    if (Math.random() < 0.55) {
+      const n = VIBES[Math.floor(Math.random() * VIBES.length)];
+      playVibe(t + (Math.random() < 0.4 ? BEAT / 2 : 0) + Math.random() * 0.03, n, 0.07 + Math.random() * 0.07);
+      if (Math.random() < 0.25) playVibe(t + BEAT * 0.75, n * 1.335, 0.05); // fourth up
+    }
+    if (step % 8 === 6 && Math.random() < 0.7) playBrush(t + BEAT / 2);
+    step++;
+    nextBeat += BEAT;
+  }
+}
+
+export function startMusic() {
+  const c = ensureCtx();
+  if (!c) return;
+  musicOn = true;
+  if (c.state === 'suspended') return; // the gesture handler calls again after resume
+  nextBeat = c.currentTime + 0.1;
+  step = 0;
+  musicBus.gain.cancelScheduledValues(c.currentTime);
+  musicBus.gain.setValueAtTime(0.0001, c.currentTime);
+  musicBus.gain.exponentialRampToValueAtTime(0.5, c.currentTime + 2.5);
+  clearInterval(schedTimer);
+  schedTimer = setInterval(scheduler, 400);
+}
+
+export function stopMusic() {
+  musicOn = false;
+  clearInterval(schedTimer);
+  if (ctx && musicBus) {
+    musicBus.gain.cancelScheduledValues(ctx.currentTime);
+    musicBus.gain.setValueAtTime(musicBus.gain.value, ctx.currentTime);
+    musicBus.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.8);
+  }
+}
+
+// diagnostics hook (used by the e2e test and handy in devtools)
+if (typeof window !== 'undefined') {
+  window.__mdkAudio = {
+    state: () => (ctx ? ctx.state : 'none'),
+    musicOn: () => musicOn,
+    enabled: () => ({ ...enabled }),
+    rms() {
+      if (!analyser) return 0;
+      const a = new Float32Array(analyser.fftSize);
+      analyser.getFloatTimeDomainData(a);
+      let s = 0;
+      for (let i = 0; i < a.length; i++) s += a[i] * a[i];
+      return Math.sqrt(s / a.length);
+    },
+    ping: () => sfx('chime')
+  };
+}