UI overhaul: mobile corkboard, Connect the Dots, nav and overflow fixes

COMPLIANCE.md

@@ -1,105 +1,108 @@
-# Case Zero - Hackathon Compliance
-
-Built for the **Build Small Hackathon** ("Small models, big adventure").
-
-Case Zero is a **Gradio application**: the whole app is one `gradio.Server` (Gradio 6
-"Server mode" - a FastAPI subclass launched through Gradio, with Gradio API endpoints
-registered via `@server.api`). It is deployed as a **Hugging Face Space** on **CPU** (no
-GPU). It ships via the Docker SDK purely so llama.cpp compiles on a stable base image - the
-app itself is Gradio, served end to end by `gradio.Server`.
-
-## Core requirements
-
-| Requirement | Status |
-|---|---|
-| Total model params <= 32B | ✓ ~1.6B (see budget below) |
-| Built in Gradio | ✓ one `gradio.Server`, with `@server.api` endpoints (`new_case`, `interrogate`) |
-| Hosted as a Hugging Face Space | ✓ `build-small-hackathon/case0` (Docker SDK, `app_port: 7860`) |
-| Demo video | ☐ to record (warmup -> interrogate -> present evidence -> alibi cracks -> accuse -> verdict) |
-| Social-media post | ☐ to post |
-
-## Parameter budget (<= 32B total)
-
-Every model is open-weights and self-run. **No third-party AI service is ever called.**
-
-| Component | Model | Open? | Params | Runs |
-|---|---|---|---|---|
-| Reasoning + dialogue (the whole game) | Qwen2.5-1.5B-Instruct (Q4_K_M GGUF) | Apache-2.0 | **1.5B** | in-process llama.cpp on CPU |
-| Suspect voices | Supertonic (ONNX) | open | ~0.1B | local ONNX Runtime (CPU) |
-| Portraits / scenes / props | Procedural canvas - no model | n/a | 0B | client-side |
-| Music + SFX | Pre-made / procedural audio - no model | n/a | 0B | playback only |
-| Embeddings / vector RAG | none | n/a | 0B | - |
-
-**Total runtime parameters: ~1.6B** - far under 32B (and under 4B, eligible for the
-**Tiny Titan** special award).
-
-## Merit badges
-
-### Earned by the build (verifiable on the Space)
-
-- **Off the Grid** - *"No cloud APIs. The whole thing runs on the model in front of you."*
-  The LLM is in-process llama.cpp; the voices are a local ONNX model; the pixel art is
-  rendered client-side on canvas; the music is a bundled CC-BY track. The open weights are
-  baked into the Docker image at build time, so the running container makes **no AI network
-  calls at all**. Proof: `python scripts/net_audit.py` runs a full playthrough under a
-  socket guard and asserts **zero non-loopback connections**. ✓
-- **Llama Champion** - *"Your model runs through the llama.cpp runtime."* The LLM runs
-  through `llama-cpp-python` (in-process, on the CPU) - no server, no GPU, no remote
-  endpoint. ✓
-- **Off-Brand** - *"A custom frontend that pushes past the default Gradio look."* The front
-  end is **not** stock Gradio. It is a hand-built **pixel-art noir SPA (Preact + Vite,
-  TypeScript)** - 12 screens, a custom pixel design system (self-hosted Silkscreen /
-  Pixelify Sans fonts, beveled 9-slice panels, inventory-slot evidence cards, a ruled-paper
-  dossier with page-flips), a draggable corkboard, a live interrogation stage with a
-  voiced suspect, procedural canvas art and rain FX, and a full client audio layer. The
-  built bundle is served as static files by the same `gradio.Server` that exposes the
-  `/api` routes - one process, no separate frontend host. ✓
-
-### Targeted / in progress
-
-- **Field Notes** - *"Write a blog post or report about your project."*
-  [`docs/FIELD_NOTES.md`](docs/FIELD_NOTES.md), shipped with the Space.
-- **Sharing is Caring** - *"You shared your agent trace on the Hub for everyone to learn
-  from."* Real traces (the exact prompts + raw completions of a full case generation, and
-  a live interrogation playthrough with server-authoritative suspicion) are produced by
-  `scripts/export_traces.py` and published as a Hub dataset (linked from the README).
-- **Well-Tuned** - *"Your app uses a fine-tuned model you've published on Hugging Face."*
-  Not claimed - the game runs on stock Qwen2.5-1.5B. Would require fine-tuning and
-  publishing a model; out of scope for this submission.
-
-## Content scope
-
-Cases span **homicide, theft, fraud, blackmail, arson, and missing-person** mysteries.
-Generation is structurally constrained (case-file language, physical evidence, no graphic
-description) and a deterministic scrubber sanitizes model output. Sexual violence is
-deliberately **not** a case type, keeping the Space comfortably inside the
-[HF Content Guidelines](https://huggingface.co/content-guidelines) with no NFAA gating.
-
-## Zero cloud AI APIs
-
-- **No OpenAI, Anthropic, Google, ElevenLabs, Higgsfield, Midjourney, or any other hosted
-  AI API is ever called** - not for text, not for voice, not for images.
-- The LLM is the in-process llama.cpp runtime. The voices are a local ONNX model. The pixel
-  art is procedural canvas. The music is a bundled CC-BY track.
-- The open Qwen GGUF and Supertonic ONNX are **baked into the Docker image at build time**,
-  so the running container makes no AI network calls. `scripts/net_audit.py` proves zero
-  non-loopback connections during a full playthrough.
-
-## Anti-cheat / fairness (why the game is solvable and the win is earned)
-
-- The sealed solution (killer, true motive, key evidence) is **never sent to the client**
-  pre-verdict; it is read only inside `/api/run/{runId}/accuse`. Verified by anti-leak tests.
-- Suspicion, evidence reactions, and the verdict are **server-authoritative** - the client
-  only displays them.
-- Suspects **never confess**: the win is registered only when the player accuses correctly,
-  so the outcome is immune to prose (a jailbroken "just tell me who did it" earns nothing).
-
-## Submission checklist
-
-- [x] Gradio app on a Hugging Face Space (CPU)
-- [x] <= 32B total params (~1.6B)
-- [x] Open-weights, self-run models only - zero cloud AI APIs
-- [x] Custom (non-default) UI - pixel-art Preact SPA via `gradio.Server`
-- [x] Off the Grid proof (`scripts/net_audit.py`)
-- [ ] Short demo video
-- [ ] Social-media post
+# Case Zero - Hackathon Compliance
+
+Built for the **Build Small Hackathon** ("Small models, big adventure").
+
+Case Zero is a **Gradio application**: the whole app is one `gradio.Server` (Gradio 6
+"Server mode" - a FastAPI subclass launched through Gradio, with Gradio API endpoints
+registered via `@server.api`). It is deployed as a **Hugging Face Space** on **CPU** (no
+GPU). It ships via the Docker SDK purely so llama.cpp compiles on a stable base image - the
+app itself is Gradio, served end to end by `gradio.Server`.
+
+## Core requirements
+
+| Requirement | Status |
+|---|---|
+| Total model params <= 32B | ✓ ~1.6B (see budget below) |
+| Built in Gradio | ✓ one `gradio.Server`, with `@server.api` endpoints (`new_case`, `interrogate`) |
+| Hosted as a Hugging Face Space | ✓ `build-small-hackathon/case0` (Docker SDK, `app_port: 7860`) |
+| Demo video | ☐ to record (warmup -> interrogate -> present evidence -> alibi cracks -> accuse -> verdict) |
+| Social-media post | ☐ to post |
+
+## Parameter budget (<= 32B total)
+
+Every model is open-weights and self-run. **No third-party AI service is ever called.**
+
+| Component | Model | Open? | Params | Runs |
+|---|---|---|---|---|
+| Reasoning + dialogue (the whole game) | Qwen2.5-1.5B-Instruct (Q4_K_M GGUF) | Apache-2.0 | **1.5B** | in-process llama.cpp on CPU |
+| Suspect voices | Supertonic (ONNX) | open | ~0.1B | local ONNX Runtime (CPU) |
+| Portraits / scenes / props | Procedural canvas - no model | n/a | 0B | client-side |
+| Music + SFX | Pre-made / procedural audio - no model | n/a | 0B | playback only |
+| Embeddings / vector RAG | none | n/a | 0B | - |
+
+**Total runtime parameters: ~1.6B** - far under 32B (and under 4B, eligible for the
+**Tiny Titan** special award).
+
+## Merit badges
+
+### Earned by the build (verifiable on the Space)
+
+- **Off the Grid** - *"No cloud APIs. The whole thing runs on the model in front of you."*
+  The LLM is in-process llama.cpp; the voices are a local ONNX model; the pixel art is
+  rendered client-side on canvas; the music is a bundled CC-BY track. The open weights are
+  baked into the Docker image at build time, so the running container makes **no AI network
+  calls at all**. Proof: `python scripts/net_audit.py` runs a full playthrough under a
+  socket guard and asserts **zero non-loopback connections**. ✓
+- **Llama Champion** - *"Your model runs through the llama.cpp runtime."* The LLM runs
+  through `llama-cpp-python` (in-process, on the CPU) - no server, no GPU, no remote
+  endpoint. ✓
+- **Off-Brand** - *"A custom frontend that pushes past the default Gradio look."* The front
+  end is **not** stock Gradio. It is a hand-built **pixel-art noir SPA (Preact + Vite,
+  TypeScript)** - 13 screens, a custom pixel design system (self-hosted Silkscreen /
+  Pixelify Sans fonts, beveled 9-slice panels, inventory-slot evidence cards with 23
+  procedural pixel icons keyword-matched to each exhibit, a ruled-paper dossier with
+  page-flips), a draggable corkboard with a red-yarn **"Connect the Dots"** mode (tie
+  evidence together with sagging SVG threads, on desktop and on the scrollable mobile
+  wall), a live interrogation stage with a voiced suspect, procedural canvas art and rain
+  FX, and a full client audio layer. The built bundle is served as static files by the
+  same `gradio.Server` that exposes the `/api` routes - one process, no separate frontend
+  host. ✓
+
+### Targeted / in progress
+
+- **Field Notes** - *"Write a blog post or report about your project."*
+  [`docs/FIELD_NOTES.md`](docs/FIELD_NOTES.md), shipped with the Space.
+- **Sharing is Caring** - *"You shared your agent trace on the Hub for everyone to learn
+  from."* Real traces (the exact prompts + raw completions of a full case generation, and
+  a live interrogation playthrough with server-authoritative suspicion) are produced by
+  `scripts/export_traces.py` and published as a Hub dataset (linked from the README).
+- **Well-Tuned** - *"Your app uses a fine-tuned model you've published on Hugging Face."*
+  Not claimed - the game runs on stock Qwen2.5-1.5B. Would require fine-tuning and
+  publishing a model; out of scope for this submission.
+
+## Content scope
+
+Cases span **homicide, theft, fraud, blackmail, arson, and missing-person** mysteries.
+Generation is structurally constrained (case-file language, physical evidence, no graphic
+description) and a deterministic scrubber sanitizes model output. Sexual violence is
+deliberately **not** a case type, keeping the Space comfortably inside the
+[HF Content Guidelines](https://huggingface.co/content-guidelines) with no NFAA gating.
+
+## Zero cloud AI APIs
+
+- **No OpenAI, Anthropic, Google, ElevenLabs, Higgsfield, Midjourney, or any other hosted
+  AI API is ever called** - not for text, not for voice, not for images.
+- The LLM is the in-process llama.cpp runtime. The voices are a local ONNX model. The pixel
+  art is procedural canvas. The music is a bundled CC-BY track.
+- The open Qwen GGUF and Supertonic ONNX are **baked into the Docker image at build time**,
+  so the running container makes no AI network calls. `scripts/net_audit.py` proves zero
+  non-loopback connections during a full playthrough.
+
+## Anti-cheat / fairness (why the game is solvable and the win is earned)
+
+- The sealed solution (killer, true motive, key evidence) is **never sent to the client**
+  pre-verdict; it is read only inside `/api/run/{runId}/accuse`. Verified by anti-leak tests.
+- Suspicion, evidence reactions, and the verdict are **server-authoritative** - the client
+  only displays them.
+- Suspects **never confess**: the win is registered only when the player accuses correctly,
+  so the outcome is immune to prose (a jailbroken "just tell me who did it" earns nothing).
+
+## Submission checklist
+
+- [x] Gradio app on a Hugging Face Space (CPU)
+- [x] <= 32B total params (~1.6B)
+- [x] Open-weights, self-run models only - zero cloud AI APIs
+- [x] Custom (non-default) UI - pixel-art Preact SPA via `gradio.Server`
+- [x] Off the Grid proof (`scripts/net_audit.py`)
+- [ ] Short demo video
+- [ ] Social-media post

src/case_zero/api/case_adapter.py

@@ -1,264 +1,297 @@
-"""Project a generated ``CaseFile`` into the PUBLIC wire view (the same contract the
-golden case uses). Deterministic: it synthesizes the display surface from the case's
-own fields. Nothing from the sealed solution (culprit, true motive id, breaker chain)
-is exposed; the true motive's *text* appears only as one option among the decoys.
-
-Generated evidence renders as paper exhibits (reveal_text); richer per-type payloads
-(threads, keycard tables, voicemail) and authored tags/quotes are a later enhancement.
-"""
-
-from __future__ import annotations
-
-import re
-
-from ..generator.crime_profiles import CrimeProfile, profile_for
-from ..schemas.case import CaseFile
-from ..schemas.clue import Clue
-from .public_view import (
-    FlashbackAccount,
-    PublicCase,
-    PublicEvidence,
-    PublicFlashback,
-    PublicMotive,
-    PublicSuspect,
-    PublicVictim,
-    StoryBeat,
-    SuggestedQuestion,
-    TimelineBeat,
-)
-from .questions import FIXED_QUESTIONS
-
-_SCENES = ("skyline", "atrium", "interro", "seawall", "mezzanine", "desk")
-_WEATHER = (
-    "Rain, and a wind off the water.", "Fog thick enough to lean on.",
-    "A dry cold that gets into the joints.", "Sleet against every window.",
-)
-_GREETS = (
-    "Detective. Let's get this over with.",
-    "I already told the others everything I know.",
-    "Ask what you came to ask.",
-    "I have nothing to hide, if that's what you think.",
-)
-_APPARENT = (
-    "Was close enough to the victim to have a reason - and a chance.",
-    "Had more to lose tonight than they're letting on.",
-    "Their story has a seam in it, if you pull the right thread.",
-    "Stood to gain from a death no one saw coming.",
-)
-_DECOY_MOTIVES = (
-    "To bury a debt that was about to surface.",
-    "Jealousy that had festered for years.",
-    "To keep a buried secret buried.",
-    "To settle an old score, finally.",
-    "Fear of being exposed and ruined.",
-)
-# Keyword-matched icons so a letter looks like paper and a keycard like a key -
-# never a phone icon on a bloodied letter. First match wins; unmatched rotate.
-_ICON_RULES: tuple[tuple[re.Pattern[str], str], ...] = (
-    (re.compile(r"photo|polaroid|snapshot|portrait|negative|film", re.I), "photoEv"),
-    (re.compile(r"cctv|camera|footage|surveillance|still\b", re.I), "cctv"),
-    (re.compile(r"voicemail|recording|tape|audio|cylinder|dictaphone", re.I), "voicemail"),
-    (re.compile(r"phone|telephone|telegram|message|wire\b", re.I), "phone"),
-    (re.compile(r"key\b|keys\b|keycard|access|badge|pass\b|lock\b", re.I), "keycard"),
-    (re.compile(r"receipt|ticket|ledger|letter|note\b|paper|document|contract|deed|cheque|"
-                r"check\b|bill\b|pawn|invoice|book\b|journal|diary|stub", re.I), "receipt"),
-    (re.compile(r"map\b|compass|route|itinerary|timetable|schedule", re.I), "compass"),
-)
-_ICONS = ("photoEv", "receipt", "compass")
-
-
-def _icon_for(name: str, reveal: str, idx: int) -> str:
-    hay = f"{name} {reveal}"
-    for rule, icon in _ICON_RULES:
-        if rule.search(hay):
-            return icon
-    return _ICONS[idx % len(_ICONS)]
-# Noir city names so CITY reads as an actual city, not the venue (the venue goes in SCENE).
-_CITIES = (
-    "Graymoor", "Blackport", "Ashmoor", "Harrowgate", "Duskwater", "Coldhaven",
-    "Ravenreach", "Mortlake", "Greyharbor", "Thornehaven", "Mistport", "Hollowmere",
-    "Saltmarsh", "Ironhaven", "Blackwater", "Fellgate",
-)
-
-
-def _hash(s: str) -> int:
-    h = 0
-    for ch in s:
-        h = (h * 31 + ord(ch)) & 0x7FFFFFFF
-    return h
-
-
-def _clock(minute: int) -> str:
-    h = (minute // 60) % 24
-    m = minute % 60
-    suffix = "AM" if h < 12 else "PM"
-    h12 = h % 12 or 12
-    return f"{h12}:{m:02d} {suffix}"
-
-
-def _loc_name(case: CaseFile, loc_id: str) -> str:
-    for loc in case.setting.locations:
-        if loc.loc_id == loc_id:
-            return loc.name
-    return loc_id
-
-
-def _suspect_public(case: CaseFile, idx: int) -> PublicSuspect:
-    s = case.suspects[idx]
-    seed = _hash(s.sus_id)
-    role_word = (s.role.split()[-1] if s.role else "").strip(".,").upper()
-    tag = f"THE {role_word}" if role_word else "PERSON OF INTEREST"
-    quote = (s.persona_summary.split(".")[0] + ".") if s.persona_summary else "I've nothing to hide."
-    gender = "female" if ((s.visual.gender if s.visual else "") or "").lower().startswith("f") else "male"
-    return PublicSuspect(
-        id=s.sus_id,
-        name=s.name,
-        role=s.role,
-        age=30 + (seed % 35),
-        sprite=s.sus_id,
-        gender=gender,
-        tag=tag[:22],
-        baseline_suspicion=25 + (seed % 16),
-        motive=_APPARENT[idx % len(_APPARENT)],
-        alibi=s.stated_alibi.claim_text,
-        quote=quote,
-        greet=_GREETS[idx % len(_GREETS)],
-        suggested_questions=tuple(SuggestedQuestion(id=q, q=text) for q, text in FIXED_QUESTIONS),
-    )
-
-
-def _evidence_public(case: CaseFile, clue: Clue, idx: int) -> PublicEvidence:
-    at = next((f.at_min for f in case.facts if f.fact_id == clue.supports_fact_id and f.at_min is not None), None)
-    time = _clock(at) if at is not None else _clock(case.setting.murder_window.start_min + 7 * (idx + 1))
-    return PublicEvidence(
-        id=clue.clue_id,
-        name=clue.name.upper(),
-        type=clue.discovery_method.value.upper(),
-        icon=_icon_for(clue.name, clue.reveal_text, idx),
-        time=time,
-        found=f"Recovered from {_loc_name(case, clue.discoverable_at_loc_id)}.",
-        summary=clue.reveal_text,
-        detail=clue.reveal_text,
-    )
-
-
-def _timeline(case: CaseFile, profile: CrimeProfile) -> tuple[TimelineBeat, ...]:
-    beats: list[TimelineBeat] = []
-    w = case.setting.murder_window
-    beats.append(TimelineBeat(time=_clock(w.start_min), label="The evening is under way; everyone is in the house.", locked=True))
-    culprit = case.culprit.sus_id
-    for i, clue in enumerate(case.clues):
-        at = next((f.at_min for f in case.facts if f.fact_id == clue.supports_fact_id and f.at_min is not None), None)
-        t = at if at is not None else w.start_min + 7 * (i + 1)
-        conflict = clue.contradicts_alibi_of == culprit
-        beats.append(TimelineBeat(time=_clock(t), label=clue.reveal_text[:80], ev=clue.clue_id, conflict=conflict))
-    incident = profile.timeline_line.format(
-        name=case.victim.name, instrument=case.weapon.name,
-        room=_loc_name(case, case.victim.found_at_loc_id),
-    )
-    beats.append(TimelineBeat(time=_clock(case.victim.time_of_death.start_min), label=incident, locked=True))
-    beats.sort(key=lambda b: b.time)
-    return tuple(beats)
-
-
-def _flashback(case: CaseFile) -> PublicFlashback:
-    culprit = next((s for s in case.suspects if s.sus_id == case.culprit.sus_id), case.suspects[0])
-    claimed = _loc_name(case, case.culprit.alibi_lie.claimed_loc_id)
-    crime = _loc_name(case, case.victim.found_at_loc_id)
-    breakers = [c for c in case.clues if c.contradicts_alibi_of == culprit.sus_id][:3]
-    return PublicFlashback(
-        title="TWO ACCOUNTS",
-        a=FlashbackAccount(
-            who=f"{culprit.name} SAYS",
-            scene=claimed,
-            lines=(culprit.stated_alibi.claim_text, f"I was in {claimed} the whole time.", "I never went near it."),
-            flags=(),
-        ),
-        b=FlashbackAccount(
-            who="THE EVIDENCE SAYS",
-            scene=crime,
-            lines=tuple(c.reveal_text[:90] for c in breakers) or ("The evidence places someone at the scene.",),
-            flags=tuple(range(len(breakers))),
-        ),
-    )
-
-
-def _motives(case: CaseFile, seed: int) -> tuple[PublicMotive, ...]:
-    true_text = case.culprit.true_motive.summary
-    decoys = [d for d in _DECOY_MOTIVES if d.lower() != true_text.lower()]
-    chosen = [PublicMotive(id="M1", text=true_text)]
-    for i in range(3):
-        chosen.append(PublicMotive(id=f"MD{i + 1}", text=decoys[(seed + i) % len(decoys)]))
-    # stable shuffle by seed so the true option isn't always first
-    rot = seed % len(chosen)
-    return tuple(chosen[rot:] + chosen[:rot])
-
-
-def _story_beats(case: CaseFile, profile: CrimeProfile, scene: str) -> tuple[StoryBeat, ...]:
-    """Each beat's backdrop is the place its text describes: the city for the call, the
-    REAL crime scene for the incident, another room of the same building for the cast,
-    and the detective's desk for the hand-off."""
-    v = case.victim
-    crime_loc = case.victim.found_at_loc_id
-    building = case.setting.name
-    other_room = next(
-        (loc.name for loc in case.setting.locations if loc.loc_id != crime_loc),
-        _loc_name(case, crime_loc),
-    )
-    return (
-        StoryBeat(scene="skyline", kicker=case.setting.name.upper(), title="The call", text=case.briefing),
-        StoryBeat(scene=scene, kicker="THE VICTIM", title=v.name, text=f"{v.name}, {v.role}. {v.cause_of_death}"),
-        StoryBeat(scene=f"{building} — {other_room}", kicker="THOSE WHO STAYED", title="Persons of interest",
-                  text="Each of them had a reason to be here tonight, and a story you'll need to take apart."),
-        StoryBeat(scene="desk", kicker="YOUR CASE NOW", title="Detective",
-                  text="One of them is lying to your face. Find the crack in the account and follow it down."),
-    )
-
-
-def casefile_to_public(case: CaseFile) -> PublicCase:
-    seed = case.seed
-    profile = profile_for(case.crime_kind)
-    tod = case.victim.time_of_death.start_min
-    building = case.setting.name
-    room = _loc_name(case, case.victim.found_at_loc_id)
-    scene = f"{building} — {room}"  # building + room; the painter keys off the room
-    city = _CITIES[seed % len(_CITIES)]
-    return PublicCase(
-        id=case.case_id,
-        city=city,
-        district=building,
-        title=case.title,
-        tagline="Detective, your presence is required.",
-        weather=_WEATHER[seed % len(_WEATHER)],
-        victim=PublicVictim(name=case.victim.name, role=case.victim.role, age=40 + (seed % 30), sprite="victim", bio=case.briefing),
-        scene=scene,
-        tod=_clock(tod),
-        found=f"{profile.found_verb} {scene} at {_clock(case.victim.found_at_min)}.",
-        cause=case.victim.cause_of_death,
-        kind=profile.kind.value,
-        kind_label=profile.kind_label,
-        division=profile.division,
-        victim_status=profile.victim_status,
-        tod_label=profile.tod_label,
-        verdict=profile.verdict,
-        facts=(
-            ("CITY", city),
-            ("VICTIM", f"{case.victim.name}"),
-            ("SCENE", scene),
-            (profile.tod_label, _clock(tod)),
-            ("WHAT HAPPENED", case.victim.cause_of_death),
-            ("VERDICT", profile.verdict),
-        ),
-        boot_lines=(
-            "The phone drags you up out of half a sleep.",
-            f"{case.setting.name}. {profile.boot_line}",
-            f"{case.victim.name} - {case.victim.role}.",
-            "They're holding the scene. It's yours now, detective.",
-        ),
-        story_beats=_story_beats(case, profile, scene),
-        suspects=tuple(_suspect_public(case, i) for i in range(len(case.suspects))),
-        evidence=tuple(_evidence_public(case, c, i) for i, c in enumerate(case.clues)),
-        timeline=_timeline(case, profile),
-        flashback=_flashback(case),
-        motives=_motives(case, seed),
-    )
+"""Project a generated ``CaseFile`` into the PUBLIC wire view (the same contract the
+golden case uses). Deterministic: it synthesizes the display surface from the case's
+own fields. Nothing from the sealed solution (culprit, true motive id, breaker chain)
+is exposed; the true motive's *text* appears only as one option among the decoys.
+
+Generated evidence renders as paper exhibits (reveal_text); richer per-type payloads
+(threads, keycard tables, voicemail) and authored tags/quotes are a later enhancement.
+"""
+
+from __future__ import annotations
+
+import re
+
+from ..generator.crime_profiles import CrimeProfile, profile_for
+from ..schemas.case import CaseFile
+from ..schemas.clue import Clue
+from .public_view import (
+    FlashbackAccount,
+    PublicCase,
+    PublicEvidence,
+    PublicFlashback,
+    PublicMotive,
+    PublicSuspect,
+    PublicVictim,
+    StoryBeat,
+    SuggestedQuestion,
+    TimelineBeat,
+)
+from .questions import FIXED_QUESTIONS
+
+_SCENES = ("skyline", "atrium", "interro", "seawall", "mezzanine", "desk")
+_WEATHER = (
+    "Rain, and a wind off the water.", "Fog thick enough to lean on.",
+    "A dry cold that gets into the joints.", "Sleet against every window.",
+)
+_GREETS = (
+    "Detective. Let's get this over with.",
+    "I already told the others everything I know.",
+    "Ask what you came to ask.",
+    "I have nothing to hide, if that's what you think.",
+)
+_APPARENT = (
+    "Was close enough to the victim to have a reason - and a chance.",
+    "Had more to lose tonight than they're letting on.",
+    "Their story has a seam in it, if you pull the right thread.",
+    "Stood to gain from a death no one saw coming.",
+)
+_DECOY_MOTIVES = (
+    "To bury a debt that was about to surface.",
+    "Jealousy that had festered for years.",
+    "To keep a buried secret buried.",
+    "To settle an old score, finally.",
+    "Fear of being exposed and ruined.",
+)
+# Keyword-matched icons so a letter looks like an envelope, a tumbler like a glass and a
+# bloodied letter opener like a blade - never a phone icon on a fingerprint. First match
+# wins, so the order is deliberate: specific objects (knife before "letter", footprints
+# before "prints", keycard before "key") come before the generic paper/photo buckets.
+_ICON_RULES: tuple[tuple[re.Pattern[str], str], ...] = (
+    (re.compile(r"cctv|camera|footage|surveillance|still\b", re.I), "cctv"),
+    (re.compile(r"photo|polaroid|snapshot|portrait|negative|film\b", re.I), "photoEv"),
+    (re.compile(r"knife|blade|dagger|razor|scissors?|shears|opener|stilett?o", re.I), "knife"),
+    (re.compile(r"voicemail|recording|tape\b|audio|cylinder|dictaphone|phonograph", re.I), "voicemail"),
+    (re.compile(r"phone|telephone|message|\bwire\b|\bcall\b|\btext\b", re.I), "phone"),
+    (re.compile(r"keycard|key card|access|badge|\bpass\b|swipe", re.I), "keycard"),
+    (re.compile(r"\bkey\b|\bkeys\b|keychain|keyring|latchkey|\block\b|padlock", re.I), "key"),
+    (re.compile(r"footprint|bootprint|\bboot\b|shoe|\bsole\b|tread|scuff|heel", re.I), "bootprint"),
+    (re.compile(r"fingerprint|thumbprint|handprint|prints?\b", re.I), "fingerprint"),
+    (re.compile(r"tumbler|glass\b|goblet|wine|whisky|whiskey|brandy|champagne|cocktail", re.I), "tumbler"),
+    (re.compile(r"bottle|vial|flask|perfume|poison|decanter|tonic|arsenic|cyanide|sedative", re.I), "bottle"),
+    (re.compile(r"match(es|box|book)?\b|lighter|accelerant|gasoline|petrol|kerosene|"
+                r"\bfuel\b|scorch|charred|\bburn(t|ed)?\b|ember|\bash\b|flame", re.I), "flame"),
+    (re.compile(r"cigar|cigarette|tobacco|ashtray", re.I), "cigarette"),
+    (re.compile(r"clock|\bwatch\b|timepiece|hourglass|pendulum", re.I), "clock"),
+    (re.compile(r"cufflink|jewell?|diamond|brooch|necklace|pendant|earring|locket|"
+                r"bracelet|\bgem\b|\bring\b|tiara|pearl|sapphire|ruby|emerald", re.I), "jewel"),
+    (re.compile(r"thread|fib(er|re)|cloth\b|fabric|handkerchief|scarf|glove|wool|silk|"
+                r"snag|button\b|lace\b", re.I), "thread"),
+    (re.compile(r"\bpen\b|\bnib\b|quill|fountain pen|inkwell|\bink\b", re.I), "pen"),
+    (re.compile(r"letter\b|envelope|telegram|postcard|\bnote\b|correspondence|\bmemo\b", re.I), "envelope"),
+    (re.compile(r"\bbook\b|journal|diary|ledger|notebook|manuscript|novel", re.I), "book"),
+    (re.compile(r"\bcash\b|banknote|money|wallet|billfold|currency|\bcoins?\b|bribe|payout", re.I), "cash"),
+    (re.compile(r"magnif|\blens\b|loupe", re.I), "magnifier"),
+    (re.compile(r"receipt|ticket|\bstub\b|paper|document|contract|deed|cheque|\bcheck\b|"
+                r"\bbill\b|pawn|invoice|agreement|statement|certificate|affidavit|\bwill\b|"
+                r"\bfile\b|\bform\b|register", re.I), "receipt"),
+    (re.compile(r"\bmap\b|compass|route|itinerary|timetable|schedule", re.I), "compass"),
+)
+# No keyword hit: fall back to how the clue is FOUND, which is always known - forensics
+# read as a print, documents as paper, searches as a scene photo, testimony as a voice.
+_METHOD_ICONS = {
+    "forensic": "fingerprint",
+    "document": "receipt",
+    "search": "photoEv",
+    "interrogation": "voicemail",
+}
+_ICONS = ("photoEv", "receipt", "compass", "envelope", "fingerprint")
+
+
+def _icon_for(name: str, reveal: str, idx: int, method: str = "") -> str:
+    # The NAME names the object itself, so it decides first; the reveal text only breaks
+    # a tie when the name says nothing (it describes context and loves false positives -
+    # a fingerprint whose reveal mentions "the blade" is still a fingerprint).
+    for hay in (name, reveal):
+        for rule, icon in _ICON_RULES:
+            if rule.search(hay):
+                return icon
+    return _METHOD_ICONS.get(method, _ICONS[idx % len(_ICONS)])
+# Noir city names so CITY reads as an actual city, not the venue (the venue goes in SCENE).
+_CITIES = (
+    "Graymoor", "Blackport", "Ashmoor", "Harrowgate", "Duskwater", "Coldhaven",
+    "Ravenreach", "Mortlake", "Greyharbor", "Thornehaven", "Mistport", "Hollowmere",
+    "Saltmarsh", "Ironhaven", "Blackwater", "Fellgate",
+)
+
+
+def _hash(s: str) -> int:
+    h = 0
+    for ch in s:
+        h = (h * 31 + ord(ch)) & 0x7FFFFFFF
+    return h
+
+
+def _clock(minute: int) -> str:
+    h = (minute // 60) % 24
+    m = minute % 60
+    suffix = "AM" if h < 12 else "PM"
+    h12 = h % 12 or 12
+    return f"{h12}:{m:02d} {suffix}"
+
+
+def _loc_name(case: CaseFile, loc_id: str) -> str:
+    for loc in case.setting.locations:
+        if loc.loc_id == loc_id:
+            return loc.name
+    return loc_id
+
+
+def _suspect_public(case: CaseFile, idx: int) -> PublicSuspect:
+    s = case.suspects[idx]
+    seed = _hash(s.sus_id)
+    role_word = (s.role.split()[-1] if s.role else "").strip(".,").upper()
+    tag = f"THE {role_word}" if role_word else "PERSON OF INTEREST"
+    quote = (s.persona_summary.split(".")[0] + ".") if s.persona_summary else "I've nothing to hide."
+    gender = "female" if ((s.visual.gender if s.visual else "") or "").lower().startswith("f") else "male"
+    return PublicSuspect(
+        id=s.sus_id,
+        name=s.name,
+        role=s.role,
+        age=30 + (seed % 35),
+        sprite=s.sus_id,
+        gender=gender,
+        tag=tag[:22],
+        baseline_suspicion=25 + (seed % 16),
+        motive=_APPARENT[idx % len(_APPARENT)],
+        alibi=s.stated_alibi.claim_text,
+        quote=quote,
+        greet=_GREETS[idx % len(_GREETS)],
+        suggested_questions=tuple(SuggestedQuestion(id=q, q=text) for q, text in FIXED_QUESTIONS),
+    )
+
+
+def _evidence_public(case: CaseFile, clue: Clue, idx: int) -> PublicEvidence:
+    at = next((f.at_min for f in case.facts if f.fact_id == clue.supports_fact_id and f.at_min is not None), None)
+    time = _clock(at) if at is not None else _clock(case.setting.murder_window.start_min + 7 * (idx + 1))
+    return PublicEvidence(
+        id=clue.clue_id,
+        name=clue.name.upper(),
+        type=clue.discovery_method.value.upper(),
+        icon=_icon_for(clue.name, clue.reveal_text, idx, clue.discovery_method.value),
+        time=time,
+        found=f"Recovered from {_loc_name(case, clue.discoverable_at_loc_id)}.",
+        summary=clue.reveal_text,
+        detail=clue.reveal_text,
+    )
+
+
+def _timeline(case: CaseFile, profile: CrimeProfile) -> tuple[TimelineBeat, ...]:
+    beats: list[TimelineBeat] = []
+    w = case.setting.murder_window
+    beats.append(TimelineBeat(time=_clock(w.start_min), label="The evening is under way; everyone is in the house.", locked=True))
+    culprit = case.culprit.sus_id
+    for i, clue in enumerate(case.clues):
+        at = next((f.at_min for f in case.facts if f.fact_id == clue.supports_fact_id and f.at_min is not None), None)
+        t = at if at is not None else w.start_min + 7 * (i + 1)
+        conflict = clue.contradicts_alibi_of == culprit
+        beats.append(TimelineBeat(time=_clock(t), label=clue.reveal_text[:80], ev=clue.clue_id, conflict=conflict))
+    incident = profile.timeline_line.format(
+        name=case.victim.name, instrument=case.weapon.name,
+        room=_loc_name(case, case.victim.found_at_loc_id),
+    )
+    beats.append(TimelineBeat(time=_clock(case.victim.time_of_death.start_min), label=incident, locked=True))
+    beats.sort(key=lambda b: b.time)
+    return tuple(beats)
+
+
+def _flashback(case: CaseFile) -> PublicFlashback:
+    culprit = next((s for s in case.suspects if s.sus_id == case.culprit.sus_id), case.suspects[0])
+    claimed = _loc_name(case, case.culprit.alibi_lie.claimed_loc_id)
+    crime = _loc_name(case, case.victim.found_at_loc_id)
+    breakers = [c for c in case.clues if c.contradicts_alibi_of == culprit.sus_id][:3]
+    return PublicFlashback(
+        title="TWO ACCOUNTS",
+        a=FlashbackAccount(
+            who=f"{culprit.name} SAYS",
+            scene=claimed,
+            lines=(culprit.stated_alibi.claim_text, f"I was in {claimed} the whole time.", "I never went near it."),
+            flags=(),
+        ),
+        b=FlashbackAccount(
+            who="THE EVIDENCE SAYS",
+            scene=crime,
+            lines=tuple(c.reveal_text[:90] for c in breakers) or ("The evidence places someone at the scene.",),
+            flags=tuple(range(len(breakers))),
+        ),
+    )
+
+
+def _motives(case: CaseFile, seed: int) -> tuple[PublicMotive, ...]:
+    true_text = case.culprit.true_motive.summary
+    decoys = [d for d in _DECOY_MOTIVES if d.lower() != true_text.lower()]
+    chosen = [PublicMotive(id="M1", text=true_text)]
+    for i in range(3):
+        chosen.append(PublicMotive(id=f"MD{i + 1}", text=decoys[(seed + i) % len(decoys)]))
+    # stable shuffle by seed so the true option isn't always first
+    rot = seed % len(chosen)
+    return tuple(chosen[rot:] + chosen[:rot])
+
+
+def _story_beats(case: CaseFile, profile: CrimeProfile, scene: str) -> tuple[StoryBeat, ...]:
+    """Each beat's backdrop is the place its text describes: the city for the call, the
+    REAL crime scene for the incident, another room of the same building for the cast,
+    and the detective's desk for the hand-off."""
+    v = case.victim
+    crime_loc = case.victim.found_at_loc_id
+    building = case.setting.name
+    other_room = next(
+        (loc.name for loc in case.setting.locations if loc.loc_id != crime_loc),
+        _loc_name(case, crime_loc),
+    )
+    return (
+        StoryBeat(scene="skyline", kicker=case.setting.name.upper(), title="The call", text=case.briefing),
+        StoryBeat(scene=scene, kicker="THE VICTIM", title=v.name, text=f"{v.name}, {v.role}. {v.cause_of_death}"),
+        StoryBeat(scene=f"{building} — {other_room}", kicker="THOSE WHO STAYED", title="Persons of interest",
+                  text="Each of them had a reason to be here tonight, and a story you'll need to take apart."),
+        StoryBeat(scene="desk", kicker="YOUR CASE NOW", title="Detective",
+                  text="One of them is lying to your face. Find the crack in the account and follow it down."),
+    )
+
+
+def casefile_to_public(case: CaseFile) -> PublicCase:
+    seed = case.seed
+    profile = profile_for(case.crime_kind)
+    tod = case.victim.time_of_death.start_min
+    building = case.setting.name
+    room = _loc_name(case, case.victim.found_at_loc_id)
+    scene = f"{building} — {room}"  # building + room; the painter keys off the room
+    city = _CITIES[seed % len(_CITIES)]
+    return PublicCase(
+        id=case.case_id,
+        city=city,
+        district=building,
+        title=case.title,
+        tagline="Detective, your presence is required.",
+        weather=_WEATHER[seed % len(_WEATHER)],
+        victim=PublicVictim(name=case.victim.name, role=case.victim.role, age=40 + (seed % 30), sprite="victim", bio=case.briefing),
+        scene=scene,
+        tod=_clock(tod),
+        found=f"{profile.found_verb} {scene} at {_clock(case.victim.found_at_min)}.",
+        cause=case.victim.cause_of_death,
+        kind=profile.kind.value,
+        kind_label=profile.kind_label,
+        division=profile.division,
+        victim_status=profile.victim_status,
+        tod_label=profile.tod_label,
+        verdict=profile.verdict,
+        facts=(
+            ("CITY", city),
+            ("VICTIM", f"{case.victim.name}"),
+            ("SCENE", scene),
+            (profile.tod_label, _clock(tod)),
+            ("WHAT HAPPENED", case.victim.cause_of_death),
+            ("VERDICT", profile.verdict),
+        ),
+        boot_lines=(
+            "The phone drags you up out of half a sleep.",
+            f"{case.setting.name}. {profile.boot_line}",
+            f"{case.victim.name} - {case.victim.role}.",
+            "They're holding the scene. It's yours now, detective.",
+        ),
+        story_beats=_story_beats(case, profile, scene),
+        suspects=tuple(_suspect_public(case, i) for i in range(len(case.suspects))),
+        evidence=tuple(_evidence_public(case, c, i) for i, c in enumerate(case.clues)),
+        timeline=_timeline(case, profile),
+        flashback=_flashback(case),
+        motives=_motives(case, seed),
+    )

web/src/engine/draw.ts

@@ -1,72 +1,77 @@
-// Low-level pixel drawing helpers, shared by the canvas components and the procedural
-// art. Ported verbatim from the prototype's pixel.jsx so rendering stays pixel-accurate.
-
-export type Pal = Record<string, string> | null | undefined
-
-/** Draw a string-grid map: rows of chars, each char a key in `pal`. */
-export function drawMap(
-  ctx: CanvasRenderingContext2D,
-  map: string[],
-  pal: Pal,
-  px: number,
-): void {
-  for (let y = 0; y < map.length; y++) {
-    const row = map[y]
-    for (let x = 0; x < row.length; x++) {
-      const c = row[x]
-      if (c === '.' || c === ' ' || c == null) continue
-      const col = pal ? pal[c] || c : c
-      if (!col || col === '.') continue
-      ctx.fillStyle = col
-      ctx.fillRect(x * px, y * px, px, px)
-    }
-  }
-}
-
-/** Ordered 4x4 Bayer matrix for dithering. */
-export const BAYER4 = [
-  [0, 8, 2, 10],
-  [12, 4, 14, 6],
-  [3, 11, 1, 9],
-  [15, 7, 13, 5],
-]
-
-/** Dither between two colors over a region; `t` in 0..1 is the `near` coverage. */
-export function dither(
-  ctx: CanvasRenderingContext2D,
-  x0: number,
-  y0: number,
-  w: number,
-  h: number,
-  near: string,
-  far: string,
-  t: number,
-): void {
-  for (let y = 0; y < h; y++) {
-    for (let x = 0; x < w; x++) {
-      const thr = (BAYER4[y & 3][x & 3] + 0.5) / 16
-      ctx.fillStyle = thr < t ? near : far
-      ctx.fillRect(x0 + x, y0 + y, 1, 1)
-    }
-  }
-}
-
-/** Vertical dither gradient from colTop to colBottom across height h. */
-export function ditherGrad(
-  ctx: CanvasRenderingContext2D,
-  x0: number,
-  y0: number,
-  w: number,
-  h: number,
-  colTop: string,
-  colBottom: string,
-): void {
-  for (let y = 0; y < h; y++) {
-    const t = 1 - y / h
-    for (let x = 0; x < w; x++) {
-      const thr = (BAYER4[y & 3][x & 3] + 0.5) / 16
-      ctx.fillStyle = thr < t ? colTop : colBottom
-      ctx.fillRect(x0 + x, y0 + y, 1, 1)
-    }
-  }
-}
+// Low-level pixel drawing helpers, shared by the canvas components and the procedural
+// art. Ported verbatim from the prototype's pixel.jsx so rendering stays pixel-accurate.
+
+export type Pal = Record<string, string> | null | undefined
+
+/** One sprite row: a string of single-char palette keys, or an array of cell values
+ *  (full hex colors / multi-char keys). Indexing works the same on both. */
+export type PixelRow = string | string[]
+export type PixelMap = PixelRow[]
+
+/** Draw a pixel map: rows of cells, each cell a key in `pal` or a literal color. */
+export function drawMap(
+  ctx: CanvasRenderingContext2D,
+  map: PixelMap,
+  pal: Pal,
+  px: number,
+): void {
+  for (let y = 0; y < map.length; y++) {
+    const row = map[y]
+    for (let x = 0; x < row.length; x++) {
+      const c = row[x]
+      if (c === '.' || c === ' ' || c == null) continue
+      const col = pal ? pal[c] || c : c
+      if (!col || col === '.') continue
+      ctx.fillStyle = col
+      ctx.fillRect(x * px, y * px, px, px)
+    }
+  }
+}
+
+/** Ordered 4x4 Bayer matrix for dithering. */
+export const BAYER4 = [
+  [0, 8, 2, 10],
+  [12, 4, 14, 6],
+  [3, 11, 1, 9],
+  [15, 7, 13, 5],
+]
+
+/** Dither between two colors over a region; `t` in 0..1 is the `near` coverage. */
+export function dither(
+  ctx: CanvasRenderingContext2D,
+  x0: number,
+  y0: number,
+  w: number,
+  h: number,
+  near: string,
+  far: string,
+  t: number,
+): void {
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      const thr = (BAYER4[y & 3][x & 3] + 0.5) / 16
+      ctx.fillStyle = thr < t ? near : far
+      ctx.fillRect(x0 + x, y0 + y, 1, 1)
+    }
+  }
+}
+
+/** Vertical dither gradient from colTop to colBottom across height h. */
+export function ditherGrad(
+  ctx: CanvasRenderingContext2D,
+  x0: number,
+  y0: number,
+  w: number,
+  h: number,
+  colTop: string,
+  colBottom: string,
+): void {
+  for (let y = 0; y < h; y++) {
+    const t = 1 - y / h
+    for (let x = 0; x < w; x++) {
+      const thr = (BAYER4[y & 3][x & 3] + 0.5) / 16
+      ctx.fillStyle = thr < t ? colTop : colBottom
+      ctx.fillRect(x0 + x, y0 + y, 1, 1)
+    }
+  }
+}

web/src/engine/pixel.tsx

@@ -1,253 +1,253 @@
-// Pixel engine — crisp nearest-neighbor canvas rendering. Ported from prototype/js/pixel.jsx.
-import { useEffect, useRef, useState } from 'preact/hooks'
-import type { JSX } from 'preact'
-
-import { type Pal, drawMap } from './draw'
-
-export type ScenePainter = (
-  ctx: CanvasRenderingContext2D,
-  w: number,
-  h: number,
-  t: number,
-) => void
-
-interface PixelCanvasProps {
-  frames?: string[][]
-  map?: string[]
-  pal?: Pal
-  px?: number
-  fps?: number
-  className?: string
-  style?: JSX.CSSProperties
-  playing?: boolean
-  onClick?: (e: MouseEvent) => void
-}
-
-/** A sprite, optionally animated across frames. */
-export function PixelCanvas({
-  frames,
-  map,
-  pal,
-  px = 4,
-  fps = 4,
-  className,
-  style,
-  playing = true,
-  onClick,
-}: PixelCanvasProps) {
-  const ref = useRef<HTMLCanvasElement>(null)
-  const allFrames = frames || [map as string[]]
-  const cols = allFrames[0][0].length
-  const rows = allFrames[0].length
-  const [f, setF] = useState(0)
-
-  useEffect(() => {
-    if (!playing || allFrames.length < 2) return
-    const id = setInterval(() => setF((v) => (v + 1) % allFrames.length), 1000 / fps)
-    return () => clearInterval(id)
-  }, [playing, allFrames.length, fps])
-
-  useEffect(() => {
-    const cv = ref.current
-    if (!cv) return
-    const ctx = cv.getContext('2d')!
-    ctx.imageSmoothingEnabled = false
-    ctx.clearRect(0, 0, cv.width, cv.height)
-    drawMap(ctx, allFrames[f], pal, px)
-  }, [f, px, pal, allFrames])
-
-  return (
-    <canvas
-      ref={ref}
-      width={cols * px}
-      height={rows * px}
-      onClick={onClick}
-      class={className}
-      style={{ imageRendering: 'pixelated', display: 'block', ...style }}
-    />
-  )
-}
-
-interface SceneCanvasProps {
-  paint: ScenePainter
-  w?: number
-  h?: number
-  className?: string
-  style?: JSX.CSSProperties
-  deps?: unknown[]
-  anim?: boolean
-  full?: boolean
-  rain?: boolean
-}
-
-/** Procedural painter at low internal res. Static scenes paint once to an offscreen
- *  buffer; anim scenes blit the buffer + a cheap rain overlay so we never re-dither
- *  the whole canvas every frame. `full` forces a true per-frame repaint. */
-export function SceneCanvas({
-  paint,
-  w = 240,
-  h = 135,
-  className,
-  style,
-  deps = [],
-  anim = false,
-  full = false,
-  rain = true,
-}: SceneCanvasProps) {
-  const ref = useRef<HTMLCanvasElement>(null)
-  const bufRef = useRef<HTMLCanvasElement | null>(null)
-  const tRef = useRef(0)
-  useEffect(() => {
-    const cv = ref.current
-    if (!cv) return
-    const ctx = cv.getContext('2d')!
-    ctx.imageSmoothingEnabled = false
-
-    const buf = document.createElement('canvas')
-    buf.width = w
-    buf.height = h
-    const bctx = buf.getContext('2d')!
-    bctx.imageSmoothingEnabled = false
-    paint(bctx, w, h, 0)
-    bufRef.current = buf
-
-    let raf = 0
-    // always paint a first frame synchronously (rAF is paused in background iframes)
-    ctx.clearRect(0, 0, w, h)
-    ctx.drawImage(buf, 0, 0)
-    if (full) {
-      let last = 0
-      const loop = (ts: number) => {
-        if (ts - last > 110) {
-          last = ts
-          tRef.current += 1
-          ctx.clearRect(0, 0, w, h)
-          paint(ctx, w, h, tRef.current)
-        }
-        raf = requestAnimationFrame(loop)
-      }
-      raf = requestAnimationFrame(loop)
-    } else if (anim && rain) {
-      let last = 0
-      const loop = (ts: number) => {
-        if (ts - last > 70) {
-          last = ts
-          tRef.current += 1
-          ctx.clearRect(0, 0, w, h)
-          ctx.drawImage(buf, 0, 0)
-          ctx.fillStyle = 'rgba(176,196,206,0.26)'
-          const t = tRef.current
-          for (let i = 0; i < 36; i++) {
-            const x = (i * 41 + t * 5) % w
-            const y = (i * 57 + t * 9) % h
-            ctx.fillRect(Math.floor(x), Math.floor(y), 1, 3)
-          }
-        }
-        raf = requestAnimationFrame(loop)
-      }
-      raf = requestAnimationFrame(loop)
-    } else {
-      ctx.clearRect(0, 0, w, h)
-      ctx.drawImage(buf, 0, 0)
-    }
-    return () => cancelAnimationFrame(raf)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps)
-  return (
-    <canvas
-      ref={ref}
-      width={w}
-      height={h}
-      class={className}
-      style={{ imageRendering: 'pixelated', display: 'block', width: '100%', height: '100%', ...style }}
-    />
-  )
-}
-
-/** Full-screen pixel rain on a canvas. */
-export function RainFX({ density = 90 }: { density?: number }) {
-  const ref = useRef<HTMLCanvasElement>(null)
-  useEffect(() => {
-    const cv = ref.current
-    if (!cv) return
-    const ctx = cv.getContext('2d')!
-    let W = 0
-    let H = 0
-    let drops: { x: number; y: number; v: number; len: number }[] = []
-    let raf = 0
-    const resize = () => {
-      W = cv.width = Math.ceil(window.innerWidth / 3)
-      H = cv.height = Math.ceil(window.innerHeight / 3)
-      cv.style.width = window.innerWidth + 'px'
-      cv.style.height = window.innerHeight + 'px'
-      drops = Array.from({ length: density }, () => ({
-        x: Math.random() * W,
-        y: Math.random() * H,
-        v: 2 + Math.random() * 3,
-        len: 3 + Math.random() * 5,
-      }))
-    }
-    resize()
-    window.addEventListener('resize', resize)
-    let last = 0
-    const loop = (ts: number) => {
-      if (ts - last > 33) {
-        last = ts
-        ctx.clearRect(0, 0, W, H)
-        ctx.fillStyle = 'rgba(180,200,210,0.30)'
-        for (const d of drops) {
-          ctx.fillRect(Math.floor(d.x), Math.floor(d.y), 1, Math.floor(d.len))
-          d.y += d.v
-          d.x += 0.4
-          if (d.y > H) {
-            d.y = -d.len
-            d.x = Math.random() * W
-          }
-        }
-      }
-      raf = requestAnimationFrame(loop)
-    }
-    raf = requestAnimationFrame(loop)
-    return () => {
-      cancelAnimationFrame(raf)
-      window.removeEventListener('resize', resize)
-    }
-  }, [density])
-  return <canvas ref={ref} class="fx-rain" style={{ position: 'fixed', inset: 0, imageRendering: 'pixelated' }} />
-}
-
-/** True if the user asked the OS to reduce motion. */
-export function prefersReducedMotion(): boolean {
-  return typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
-}
-
-/** Typewriter hook: returns [visibleText, done]. Honors prefers-reduced-motion (instant). */
-export function useTypewriter(text: string, speed = 28, on = true): [string, boolean] {
-  if (prefersReducedMotion()) on = false
-  const [out, setOut] = useState(on ? '' : text)
-  const [done, setDone] = useState(!on)
-  useEffect(() => {
-    if (!on) {
-      setOut(text)
-      setDone(true)
-      return
-    }
-    setOut('')
-    setDone(false)
-    if (!text) {
-      setDone(true)
-      return
-    }
-    let i = 0
-    const id = setInterval(() => {
-      i++
-      setOut(text.slice(0, i))
-      if (i >= text.length) {
-        clearInterval(id)
-        setDone(true)
-      }
-    }, speed)
-    return () => clearInterval(id)
-  }, [text, speed, on])
-  return [out, done]
-}
+// Pixel engine — crisp nearest-neighbor canvas rendering. Ported from prototype/js/pixel.jsx.
+import { useEffect, useRef, useState } from 'preact/hooks'
+import type { JSX } from 'preact'
+
+import { type Pal, type PixelMap, drawMap } from './draw'
+
+export type ScenePainter = (
+  ctx: CanvasRenderingContext2D,
+  w: number,
+  h: number,
+  t: number,
+) => void
+
+interface PixelCanvasProps {
+  frames?: PixelMap[]
+  map?: PixelMap
+  pal?: Pal
+  px?: number
+  fps?: number
+  className?: string
+  style?: JSX.CSSProperties
+  playing?: boolean
+  onClick?: (e: MouseEvent) => void
+}
+
+/** A sprite, optionally animated across frames. */
+export function PixelCanvas({
+  frames,
+  map,
+  pal,
+  px = 4,
+  fps = 4,
+  className,
+  style,
+  playing = true,
+  onClick,
+}: PixelCanvasProps) {
+  const ref = useRef<HTMLCanvasElement>(null)
+  const allFrames = frames || [map as PixelMap]
+  const cols = allFrames[0][0].length
+  const rows = allFrames[0].length
+  const [f, setF] = useState(0)
+
+  useEffect(() => {
+    if (!playing || allFrames.length < 2) return
+    const id = setInterval(() => setF((v) => (v + 1) % allFrames.length), 1000 / fps)
+    return () => clearInterval(id)
+  }, [playing, allFrames.length, fps])
+
+  useEffect(() => {
+    const cv = ref.current
+    if (!cv) return
+    const ctx = cv.getContext('2d')!
+    ctx.imageSmoothingEnabled = false
+    ctx.clearRect(0, 0, cv.width, cv.height)
+    drawMap(ctx, allFrames[f], pal, px)
+  }, [f, px, pal, allFrames])
+
+  return (
+    <canvas
+      ref={ref}
+      width={cols * px}
+      height={rows * px}
+      onClick={onClick}
+      class={className}
+      style={{ imageRendering: 'pixelated', display: 'block', ...style }}
+    />
+  )
+}
+
+interface SceneCanvasProps {
+  paint: ScenePainter
+  w?: number
+  h?: number
+  className?: string
+  style?: JSX.CSSProperties
+  deps?: unknown[]
+  anim?: boolean
+  full?: boolean
+  rain?: boolean
+}
+
+/** Procedural painter at low internal res. Static scenes paint once to an offscreen
+ *  buffer; anim scenes blit the buffer + a cheap rain overlay so we never re-dither
+ *  the whole canvas every frame. `full` forces a true per-frame repaint. */
+export function SceneCanvas({
+  paint,
+  w = 240,
+  h = 135,
+  className,
+  style,
+  deps = [],
+  anim = false,
+  full = false,
+  rain = true,
+}: SceneCanvasProps) {
+  const ref = useRef<HTMLCanvasElement>(null)
+  const bufRef = useRef<HTMLCanvasElement | null>(null)
+  const tRef = useRef(0)
+  useEffect(() => {
+    const cv = ref.current
+    if (!cv) return
+    const ctx = cv.getContext('2d')!
+    ctx.imageSmoothingEnabled = false
+
+    const buf = document.createElement('canvas')
+    buf.width = w
+    buf.height = h
+    const bctx = buf.getContext('2d')!
+    bctx.imageSmoothingEnabled = false
+    paint(bctx, w, h, 0)
+    bufRef.current = buf
+
+    let raf = 0
+    // always paint a first frame synchronously (rAF is paused in background iframes)
+    ctx.clearRect(0, 0, w, h)
+    ctx.drawImage(buf, 0, 0)
+    if (full) {
+      let last = 0
+      const loop = (ts: number) => {
+        if (ts - last > 110) {
+          last = ts
+          tRef.current += 1
+          ctx.clearRect(0, 0, w, h)
+          paint(ctx, w, h, tRef.current)
+        }
+        raf = requestAnimationFrame(loop)
+      }
+      raf = requestAnimationFrame(loop)
+    } else if (anim && rain) {
+      let last = 0
+      const loop = (ts: number) => {
+        if (ts - last > 70) {
+          last = ts
+          tRef.current += 1
+          ctx.clearRect(0, 0, w, h)
+          ctx.drawImage(buf, 0, 0)
+          ctx.fillStyle = 'rgba(176,196,206,0.26)'
+          const t = tRef.current
+          for (let i = 0; i < 36; i++) {
+            const x = (i * 41 + t * 5) % w
+            const y = (i * 57 + t * 9) % h
+            ctx.fillRect(Math.floor(x), Math.floor(y), 1, 3)
+          }
+        }
+        raf = requestAnimationFrame(loop)
+      }
+      raf = requestAnimationFrame(loop)
+    } else {
+      ctx.clearRect(0, 0, w, h)
+      ctx.drawImage(buf, 0, 0)
+    }
+    return () => cancelAnimationFrame(raf)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps)
+  return (
+    <canvas
+      ref={ref}
+      width={w}
+      height={h}
+      class={className}
+      style={{ imageRendering: 'pixelated', display: 'block', width: '100%', height: '100%', ...style }}
+    />
+  )
+}
+
+/** Full-screen pixel rain on a canvas. */
+export function RainFX({ density = 90 }: { density?: number }) {
+  const ref = useRef<HTMLCanvasElement>(null)
+  useEffect(() => {
+    const cv = ref.current
+    if (!cv) return
+    const ctx = cv.getContext('2d')!
+    let W = 0
+    let H = 0
+    let drops: { x: number; y: number; v: number; len: number }[] = []
+    let raf = 0
+    const resize = () => {
+      W = cv.width = Math.ceil(window.innerWidth / 3)
+      H = cv.height = Math.ceil(window.innerHeight / 3)
+      cv.style.width = window.innerWidth + 'px'
+      cv.style.height = window.innerHeight + 'px'
+      drops = Array.from({ length: density }, () => ({
+        x: Math.random() * W,
+        y: Math.random() * H,
+        v: 2 + Math.random() * 3,
+        len: 3 + Math.random() * 5,
+      }))
+    }
+    resize()
+    window.addEventListener('resize', resize)
+    let last = 0
+    const loop = (ts: number) => {
+      if (ts - last > 33) {
+        last = ts
+        ctx.clearRect(0, 0, W, H)
+        ctx.fillStyle = 'rgba(180,200,210,0.30)'
+        for (const d of drops) {
+          ctx.fillRect(Math.floor(d.x), Math.floor(d.y), 1, Math.floor(d.len))
+          d.y += d.v
+          d.x += 0.4
+          if (d.y > H) {
+            d.y = -d.len
+            d.x = Math.random() * W
+          }
+        }
+      }
+      raf = requestAnimationFrame(loop)
+    }
+    raf = requestAnimationFrame(loop)
+    return () => {
+      cancelAnimationFrame(raf)
+      window.removeEventListener('resize', resize)
+    }
+  }, [density])
+  return <canvas ref={ref} class="fx-rain" style={{ position: 'fixed', inset: 0, imageRendering: 'pixelated' }} />
+}
+
+/** True if the user asked the OS to reduce motion. */
+export function prefersReducedMotion(): boolean {
+  return typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+}
+
+/** Typewriter hook: returns [visibleText, done]. Honors prefers-reduced-motion (instant). */
+export function useTypewriter(text: string, speed = 28, on = true): [string, boolean] {
+  if (prefersReducedMotion()) on = false
+  const [out, setOut] = useState(on ? '' : text)
+  const [done, setDone] = useState(!on)
+  useEffect(() => {
+    if (!on) {
+      setOut(text)
+      setDone(true)
+      return
+    }
+    setOut('')
+    setDone(false)
+    if (!text) {
+      setDone(true)
+      return
+    }
+    let i = 0
+    const id = setInterval(() => {
+      i++
+      setOut(text.slice(0, i))
+      if (i >= text.length) {
+        clearInterval(id)
+        setDone(true)
+      }
+    }, speed)
+    return () => clearInterval(id)
+  }, [text, speed, on])
+  return [out, done]
+}

web/src/screens/board-threads.tsx

@@ -0,0 +1,125 @@
+// Red-yarn threads for the investigation board's "Connect the Dots" mode: pair state
+// persisted per case in localStorage, plus the SVG layer that draws the yarn. (Named
+// ThreadPair, not Thread — Evidence.thread already means phone messages in types.ts.)
+import { useState } from 'preact/hooks'
+
+export type ThreadPair = [string, string]
+
+const keyFor = (caseId: string) => `cz-threads-${caseId}`
+export const pairKey = (a: string, b: string): string => (a < b ? `${a}|${b}` : `${b}|${a}`)
+const canon = (a: string, b: string): ThreadPair => (a < b ? [a, b] : [b, a])
+
+function loadPairs(caseId: string, valid: Set<string>): ThreadPair[] {
+  try {
+    const raw = localStorage.getItem(keyFor(caseId))
+    if (!raw) return []
+    const data = JSON.parse(raw) as { v?: number; pairs?: unknown }
+    if (data?.v !== 1 || !Array.isArray(data.pairs)) return []
+    const seen = new Set<string>()
+    const out: ThreadPair[] = []
+    for (const p of data.pairs) {
+      if (!Array.isArray(p) || typeof p[0] !== 'string' || typeof p[1] !== 'string') continue
+      const [a, b] = canon(p[0], p[1])
+      if (a === b || !valid.has(a) || !valid.has(b) || seen.has(pairKey(a, b))) continue
+      seen.add(pairKey(a, b))
+      out.push([a, b])
+    }
+    return out
+  } catch {
+    return []
+  }
+}
+
+function savePairs(caseId: string, pairs: ThreadPair[]): void {
+  try {
+    localStorage.setItem(keyFor(caseId), JSON.stringify({ v: 1, pairs }))
+  } catch {
+    /* ignore */
+  }
+}
+
+export interface Threads {
+  pairs: ThreadPair[]
+  /** Add the pair — or remove it if it already exists. */
+  toggle: (a: string, b: string) => 'added' | 'removed'
+  remove: (a: string, b: string) => void
+  clear: () => void
+}
+
+/** Thread pairs for one case, restored from and written through to localStorage so the
+ *  yarn survives screen switches (the board unmounts on nav) and full reloads. */
+export function useThreads(caseId: string, validIds: string[]): Threads {
+  const [pairs, setPairs] = useState<ThreadPair[]>(() => loadPairs(caseId, new Set(validIds)))
+  const commit = (next: ThreadPair[]) => {
+    savePairs(caseId, next)
+    setPairs(next)
+  }
+  return {
+    pairs,
+    toggle: (a, b) => {
+      const k = pairKey(a, b)
+      const without = pairs.filter(([x, y]) => pairKey(x, y) !== k)
+      const removed = without.length < pairs.length
+      commit(removed ? without : [...pairs, canon(a, b)])
+      return removed ? 'removed' : 'added'
+    },
+    remove: (a, b) => {
+      const k = pairKey(a, b)
+      commit(pairs.filter(([x, y]) => pairKey(x, y) !== k))
+    },
+    clear: () => commit([]),
+  }
+}
+
+/** Yarn path between two pushpins: a quadratic curve with a little gravity sag. */
+export function threadD(x1: number, y1: number, x2: number, y2: number): string {
+  const dist = Math.hypot(x2 - x1, y2 - y1)
+  const sag = Math.min(48, 12 + dist * 0.14)
+  return `M ${x1} ${y1} Q ${(x1 + x2) / 2} ${(y1 + y2) / 2 + sag} ${x2} ${y2}`
+}
+
+interface ThreadLayerProps {
+  pairs: ThreadPair[]
+  /** Pushpin position for a card id, in board coordinates (null until laid out). */
+  anchor: (id: string) => { x: number; y: number } | null
+  w: number
+  h: number
+  /** Connect mode: threads grow an invisible fat hit-stroke so a tap can cut them. */
+  connect: boolean
+  /** Live dashed thread from the armed pin to the pointer (desktop juice). */
+  ghost?: { from: { x: number; y: number }; to: { x: number; y: number } } | null
+  onRemove: (a: string, b: string) => void
+}
+
+export function ThreadLayer({ pairs, anchor, w, h, connect, ghost, onRemove }: ThreadLayerProps) {
+  return (
+    <svg class="thread-layer" viewBox={`0 0 ${w} ${h}`} width={w} height={h} aria-hidden="true">
+      {pairs.map(([a, b]) => {
+        const pa = anchor(a)
+        const pb = anchor(b)
+        if (!pa || !pb) return null
+        const d = threadD(pa.x, pa.y, pb.x, pb.y)
+        return (
+          // Keyed by pair so the draw-in animation runs once on creation, not on drags.
+          <g key={pairKey(a, b)}>
+            <path class="thread thread--under" d={d} pathLength={1} />
+            <path class="thread thread--draw" d={d} pathLength={1} />
+            {connect && (
+              <path
+                class="thread-hit"
+                d={d}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onRemove(a, b)
+                }}
+              />
+            )}
+            <circle class="thread-knot" cx={pa.x} cy={pa.y} r={2.5} />
+            <circle class="thread-knot" cx={pb.x} cy={pb.y} r={2.5} />
+          </g>
+        )
+      })}
+      {ghost && <path class="thread thread--ghost" d={threadD(ghost.from.x, ghost.from.y, ghost.to.x, ghost.to.y)} />}
+    </svg>
+  )
+}

web/src/screens/board.tsx

@@ -1,19 +1,26 @@
-// Investigation board — corkboard with draggable evidence cards + suspect rail. Mobile
-// collapses to stacked lists. Node positions are derived from the case so any evidence
-// count lays out cleanly.
+// Investigation board — corkboard with draggable evidence cards, a red-yarn "Connect
+// the Dots" mode, and a suspect rail on desktop. Mobile gets the same corkboard on a
+// tall scrollable wall (suspects live in their own bottom-nav tab there). Node positions
+// are derived from the case so any evidence count lays out cleanly.
 import { useEffect, useRef, useState } from 'preact/hooks'
 
 import { useGame } from '../store'
-import type { PublicCase, Suspect } from '../types'
-import {
-  BottomNav, Btn, EvIcon, EvidenceCard, Hud, Panel, Portrait, Scene, SuspectCard, SuspicionBar,
-} from '../ui/components'
+import type { PublicCase } from '../types'
+import { playSfx } from '../ui/audio'
+import { BottomNav, Btn, EvIcon, Hud, Panel, Portrait, Scene, SuspicionBar } from '../ui/components'
+import { ThreadLayer, useThreads } from './board-threads'
 
-const CARD_W = 150
 const CARD_H = 92
+const CARD_W = 150 // desktop
+const CARD_W_M = 132 // mobile — two loose columns at 390px
 const SPOTS: [number, number][] = [
   [0.1, 0.3], [0.7, 0.16], [0.42, 0.44], [0.74, 0.52], [0.12, 0.72], [0.52, 0.78], [0.3, 0.28], [0.85, 0.36],
 ]
+// Mobile wall: alternate two columns down a tall scrolling board.
+const SPOTS_M: [number, number][] = [
+  [0.06, 0.1], [0.62, 0.17], [0.1, 0.27], [0.6, 0.35],
+  [0.08, 0.45], [0.58, 0.53], [0.12, 0.63], [0.6, 0.71],
+]
 
 interface Node {
   id: string
@@ -21,10 +28,11 @@ interface Node {
   x: number
   y: number
 }
-function boardNodes(c: PublicCase): Node[] {
-  const nodes: Node[] = [{ id: 'victim', kind: 'victim', x: 0.44, y: 0.05 }]
+function boardNodes(c: PublicCase, compact: boolean): Node[] {
+  const nodes: Node[] = [{ id: 'victim', kind: 'victim', x: compact ? 0.3 : 0.44, y: compact ? 0.025 : 0.05 }]
+  const spots = compact ? SPOTS_M : SPOTS
   c.evidence.forEach((e, i) => {
-    const [x, y] = SPOTS[i % SPOTS.length]
+    const [x, y] = spots[i % spots.length]
     nodes.push({ id: e.id, kind: 'evidence', x, y })
   })
   return nodes
@@ -32,16 +40,67 @@ function boardNodes(c: PublicCase): Node[] {
 
 export function Board() {
   const g = useGame()
-  if (g.mode === 'mobile') return <BoardMobile />
   const c = g.case
-  const NODES = boardNodes(c)
+  const compact = g.mode === 'mobile'
+  const [connect, setConnect] = useState(false)
+  return (
+    <div class="app__view">
+      <Hud
+        title={compact ? 'THE BOARD' : 'INVESTIGATION BOARD'}
+        sub={connect ? 'CONNECT THE DOTS · TAP TWO PINS TO TIE A THREAD' : compact ? c.id : 'THE EVIDENCE WALL · DRAG TO ARRANGE'}
+        right={
+          compact ? (
+            <Btn sm variant="ghost" onClick={() => g.nav('accuse')}>Accuse</Btn>
+          ) : (
+            <>
+              <Btn sm variant="ghost" onClick={() => g.nav('notes')}>Notes</Btn>
+              <Btn sm variant="ghost" onClick={() => g.nav('timeline')}>Timeline</Btn>
+              <Btn sm variant="ghost" onClick={() => g.nav('accuse')}>Accuse ▸</Btn>
+            </>
+          )
+        }
+      />
+      {compact ? (
+        <Corkboard compact connect={connect} setConnect={setConnect} />
+      ) : (
+        <div class="board-layout">
+          <Corkboard compact={false} connect={connect} setConnect={setConnect} />
+          <SuspectRail />
+        </div>
+      )}
+      <BottomNav />
+    </div>
+  )
+}
+
+function Corkboard({ compact, connect, setConnect }: { compact: boolean; connect: boolean; setConnect: (v: boolean) => void }) {
+  const g = useGame()
+  const c = g.case
+  const NODES = boardNodes(c, compact)
+  const cardW = compact ? CARD_W_M : CARD_W
   const ref = useRef<HTMLDivElement>(null)
-  const [size, setSize] = useState({ w: 1100, h: 640 })
+  const [size, setSize] = useState({ w: 0, h: 0 })
   const [pos, setPos] = useState<Record<string, { x: number; y: number }>>({})
   const [selEv, setSelEv] = useState<string | null>(null)
+  const [armed, setArmed] = useState<string | null>(null)
+  const [ghost, setGhost] = useState<{ x: number; y: number } | null>(null)
+  const [confirmClear, setConfirmClear] = useState(false)
   const drag = useRef<{ id: string; dx: number; dy: number } | null>(null)
   const dragCleanup = useRef<(() => void) | null>(null)
+  const threads = useThreads(c.id, ['victim', ...c.evidence.map((e) => e.id)])
+
+  // Tall virtual wall on mobile so eight cards breathe at ~400px width.
+  const mobileBoardH = Math.max(900, 200 + c.evidence.length * 115)
 
+  // Mode flip: wipe layout (and the measurement that produced it) so cards re-seat
+  // on the new wall instead of stranding off-board.
+  useEffect(() => {
+    setPos({})
+    setSize({ w: 0, h: 0 })
+    setSelEv(null)
+    setArmed(null)
+    setGhost(null)
+  }, [compact])
   useEffect(() => {
     const m = () => {
       if (ref.current) {
@@ -52,32 +111,40 @@ export function Board() {
     m()
     window.addEventListener('resize', m)
     return () => window.removeEventListener('resize', m)
-  }, [])
+  }, [compact])
+  // Seat the cards once a real measurement exists (size starts at 0×0 so the default
+  // never leaks into the layout); manual arrangement survives later resizes.
   useEffect(() => {
     if (size.w < 40) return
     setPos((p) => {
       if (Object.keys(p).length) return p
       const np: Record<string, { x: number; y: number }> = {}
       NODES.forEach((n) => {
-        np[n.id] = { x: n.x * (size.w - CARD_W), y: n.y * (size.h - CARD_H) }
+        np[n.id] = { x: n.x * (size.w - cardW), y: n.y * (size.h - CARD_H) }
       })
       return np
     })
-  }, [size])
+  }, [size, compact])
   useEffect(() => () => dragCleanup.current?.(), [])
 
   const onDown = (id: string, e: MouseEvent | TouchEvent) => {
+    if (connect) return // cards are pinned while connecting; let the tap become a click
     e.preventDefault()
-    if (drag.current) return
+    if (drag.current || !ref.current || !pos[id]) return
     const pt = 'touches' in e ? e.touches[0] : e
-    drag.current = { id, dx: pt.clientX - pos[id].x, dy: pt.clientY - pos[id].y }
+    // Board-local coordinates: the rect tracks container scroll, so dragging works
+    // anywhere down the mobile wall (clientX alone assumed an unscrolled board).
+    const r = ref.current.getBoundingClientRect()
+    drag.current = { id, dx: pt.clientX - r.left - pos[id].x, dy: pt.clientY - r.top - pos[id].y }
     const move = (ev: MouseEvent | TouchEvent) => {
       const d = drag.current
-      if (!d) return
+      if (!d || !ref.current) return
+      if ('touches' in ev) ev.preventDefault() // block scroll only while a drag is live
       window.__justDragged = true
+      const rr = ref.current.getBoundingClientRect()
       const p = 'touches' in ev ? ev.touches[0] : ev
-      const nx = Math.max(0, Math.min(size.w - CARD_W, p.clientX - d.dx))
-      const ny = Math.max(0, Math.min(size.h - CARD_H, p.clientY - d.dy))
+      const nx = Math.max(0, Math.min(size.w - cardW, p.clientX - rr.left - d.dx))
+      const ny = Math.max(0, Math.min(size.h - CARD_H, p.clientY - rr.top - d.dy))
       setPos((o) => ({ ...o, [d.id]: { x: nx, y: ny } }))
     }
     const up = () => {
@@ -97,57 +164,153 @@ export function Board() {
     window.addEventListener('touchend', up)
   }
 
-  return (
-    <div class="app__view">
-      <Hud
-        title="INVESTIGATION BOARD"
-        sub="THE EVIDENCE WALL · DRAG TO ARRANGE"
-        right={
-          <>
-            <Btn sm variant="ghost" onClick={() => g.nav('notes')}>Notes</Btn>
-            <Btn sm variant="ghost" onClick={() => g.nav('timeline')}>Timeline</Btn>
-            <Btn sm variant="ghost" onClick={() => g.nav('accuse')}>Accuse ▸</Btn>
-          </>
-        }
+  // Pushpin position for a card — where threads tie off.
+  const anchor = (id: string) => {
+    const p = pos[id]
+    return p ? { x: p.x + cardW / 2, y: p.y - 3 } : null
+  }
+
+  const tapCard = (id: string) => {
+    if (!connect) return
+    if (armed === null) {
+      setArmed(id)
+      return
+    }
+    if (armed === id) {
+      setArmed(null)
+      setGhost(null)
+      return
+    }
+    threads.toggle(armed, id)
+    playSfx('click')
+    setArmed(null)
+    setGhost(null)
+  }
+  const toggleConnect = () => {
+    setConnect(!connect)
+    setArmed(null)
+    setGhost(null)
+    setSelEv(null)
+    setConfirmClear(false)
+  }
+  const onBoardMove = (e: MouseEvent) => {
+    if (!connect || !armed || compact || !ref.current) return
+    const r = ref.current.getBoundingClientRect()
+    setGhost({ x: e.clientX - r.left, y: e.clientY - r.top })
+  }
+  const onBoardClick = (e: MouseEvent) => {
+    if (!connect || !armed) return
+    if ((e.target as HTMLElement).closest('.pin-card')) return // card taps handle themselves
+    setArmed(null)
+    setGhost(null)
+  }
+  const onClear = () => {
+    if (confirmClear) {
+      threads.clear()
+      setConfirmClear(false)
+    } else {
+      setConfirmClear(true)
+      setTimeout(() => setConfirmClear(false), 2500)
+    }
+  }
+
+  const armedAnchor = armed ? anchor(armed) : null
+  const board = (
+    <div
+      class={'board' + (compact ? ' board--mobile' : '') + (connect ? ' board--connect' : '')}
+      ref={ref}
+      style={compact ? { height: mobileBoardH } : undefined}
+      onMouseMove={onBoardMove}
+      onClick={onBoardClick}
+    >
+      <div class="board__felt" />
+      <BoardDecor c={c} compact={compact} />
+      <div class="board__frame" />
+      <ThreadLayer
+        pairs={threads.pairs}
+        anchor={anchor}
+        w={size.w}
+        h={size.h}
+        connect={connect}
+        ghost={connect && armedAnchor && ghost ? { from: armedAnchor, to: ghost } : null}
+        onRemove={(a, b) => {
+          threads.remove(a, b)
+          playSfx('click')
+        }}
       />
-      <div class="board-layout">
-        <div class="board" ref={ref}>
-          <div class="board__felt" />
-          <BoardDecor c={c} />
-          <div class="board__frame" />
-          <div class="board__filters">
-            <span class="chip chip--amber">EVIDENCE WALL · {c.evidence.length}</span>
-          </div>
-          {NODES.map((n) => {
-            if (!pos[n.id]) return null
-            const p = pos[n.id]
-            const isEv = n.kind === 'evidence'
-            const open = selEv === n.id
-            return (
-              <div key={n.id} class={'pin-card' + (open ? ' pin-card--sel' : '')} style={{ left: p.x, top: p.y, width: CARD_W, zIndex: open ? 7 : 4 }}>
-                <span class="pin" onMouseDown={(e) => onDown(n.id, e)} onTouchStart={(e) => onDown(n.id, e)} title="Drag to move" />
-                <div class="card-grip" onMouseDown={(e) => onDown(n.id, e)} onTouchStart={(e) => onDown(n.id, e)} title="Drag to move">
-                  <span class="card-grip__dots">⠿⠿⠿</span>
-                  <span class="card-grip__lbl">MOVE</span>
-                </div>
-                <BoardNode node={n} selected={open} onSelect={() => { if (!window.__justDragged && isEv) setSelEv(open ? null : n.id) }} />
-                {isEv && open && (
-                  <div class="card-actions">
-                    <Btn variant="amber" sm onClick={() => g.nav('evidence', { focus: n.id })}>Examine ▸</Btn>
-                  </div>
-                )}
+      {NODES.map((n) => {
+        if (!pos[n.id]) return null
+        const p = pos[n.id]
+        const isEv = n.kind === 'evidence'
+        const open = selEv === n.id
+        const isArmed = armed === n.id
+        return (
+          <div
+            key={n.id}
+            class={'pin-card' + (open ? ' pin-card--sel' : '') + (isArmed ? ' pin-card--armed' : '')}
+            style={{ left: p.x, top: p.y, width: cardW, zIndex: open || isArmed ? 7 : 4 }}
+          >
+            <span
+              class="pin"
+              onMouseDown={(e) => onDown(n.id, e)}
+              onTouchStart={(e) => onDown(n.id, e)}
+              onClick={() => tapCard(n.id)}
+              title={connect ? 'Tie a thread' : 'Drag to move'}
+            />
+            <div
+              class={'card-grip' + (connect ? ' card-grip--locked' : '')}
+              onMouseDown={(e) => onDown(n.id, e)}
+              onTouchStart={(e) => onDown(n.id, e)}
+              onClick={() => tapCard(n.id)}
+              title={connect ? 'Cards are pinned while connecting' : 'Drag to move'}
+            >
+              <span class="card-grip__dots">⠿⠿⠿</span>
+              <span class="card-grip__lbl">{connect ? 'PINNED' : 'MOVE'}</span>
+            </div>
+            <BoardNode
+              node={n}
+              cardW={cardW}
+              selected={open}
+              onSelect={() => {
+                if (connect) {
+                  tapCard(n.id)
+                  return
+                }
+                if (!window.__justDragged && isEv) setSelEv(open ? null : n.id)
+              }}
+            />
+            {isEv && open && !connect && (
+              <div class="card-actions">
+                <Btn variant="amber" sm onClick={() => g.nav('evidence', { focus: n.id })}>Examine ▸</Btn>
               </div>
-            )
-          })}
-        </div>
-        <SuspectRail />
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+
+  // Toolbar first in the DOM: a static bar above the scrolling wall on mobile,
+  // a floating overlay (absolute, top-left) on desktop.
+  return (
+    <div class="board-wrap">
+      <div class="board__filters">
+        <span class="chip chip--amber">EVIDENCE WALL · {c.evidence.length}</span>
+        {threads.pairs.length > 0 && <span class="chip chip--ox">THREADS · {threads.pairs.length}</span>}
+        <Btn sm variant={connect ? 'ox' : 'ghost'} onClick={toggleConnect}>
+          {connect ? '▣ CONNECT: ON' : '◈ CONNECT THE DOTS'}
+        </Btn>
+        {connect && threads.pairs.length > 0 && (
+          <Btn sm variant="ghost" onClick={onClear}>{confirmClear ? 'SURE?' : 'CLEAR'}</Btn>
+        )}
+        {connect && <span class="chip">{armed ? 'PICK A SECOND CARD' : 'TAP TWO CARDS TO LINK'}</span>}
       </div>
-      <BottomNav />
+      {compact ? <div class="board-scroll">{board}</div> : board}
     </div>
   )
 }
 
-function WallItem({ x, y, rot, pin = 'amber', children, w }: { x: string; y: string; rot: number; pin?: string; children: preact.ComponentChildren; w?: number }) {
+function WallItem({ x, y, rot, pin = 'amber', children, w }: { x: string; y: string; rot: number; pin?: string; children: preact.ComponentChildren; w?: number | string }) {
   return (
     <div class="wall-item" style={{ left: x, top: y, transform: `rotate(${rot}deg)`, width: w }}>
       <span class={'pushpin pushpin--' + pin} />
@@ -156,11 +319,11 @@ function WallItem({ x, y, rot, pin = 'amber', children, w }: { x: string; y: str
   )
 }
 
-function BoardDecor({ c }: { c: PublicCase }) {
+function BoardDecor({ c, compact }: { c: PublicCase; compact?: boolean }) {
   const tod = c.facts.find(([k]) => k === 'TIME OF DEATH')?.[1] || c.tod
   return (
     <div style={{ position: 'absolute', inset: 0, zIndex: 2, pointerEvents: 'none' }}>
-      <WallItem x="0.5%" y="3%" rot={-3} pin="bone" w={186}>
+      <WallItem x={compact ? '2%' : '0.5%'} y={compact ? '0.5%' : '3%'} rot={-3} pin="bone" w={compact ? 150 : 186}>
         <div class="wall-clip">
           <div style={{ fontFamily: 'var(--f-display)', fontSize: 9, lineHeight: 1.25, color: '#231f16' }}>{c.city} UNVEILS<br />ITS NEW CROWN</div>
           <div style={{ height: 2, background: '#231f1633', margin: '5px 0' }} />
@@ -168,48 +331,56 @@ function BoardDecor({ c }: { c: PublicCase }) {
           <div class="t-mono" style={{ fontSize: 'calc(11px*var(--mono-scale))', color: '#4a4234', lineHeight: 1.2 }}>{c.victim.name} found dead the night the city came to celebrate.</div>
         </div>
       </WallItem>
-      <WallItem x="63%" y="1%" rot={3} pin="ox" w={160}>
-        <div class="wall-photo">
-          <div style={{ background: '#0d1117', height: 96 }}><Scene name="map" w={148} h={96} full style={{ width: '100%', height: '100%' }} /></div>
-          <div class="t-mono" style={{ fontSize: 'calc(12px*var(--mono-scale))', color: '#6a6150', textAlign: 'center', marginTop: 4 }}>{c.district.split('·')[0]}</div>
-        </div>
-      </WallItem>
-      <WallItem x="29%" y="11%" rot={4} pin="ox" w={120}>
+      {!compact && (
+        <WallItem x="63%" y="1%" rot={3} pin="ox" w={160}>
+          <div class="wall-photo">
+            <div style={{ background: '#0d1117', height: 96 }}><Scene name="map" w={148} h={96} full style={{ width: '100%', height: '100%' }} /></div>
+            <div class="t-mono" style={{ fontSize: 'calc(12px*var(--mono-scale))', color: '#6a6150', textAlign: 'center', marginTop: 4 }}>{c.district.split('·')[0]}</div>
+          </div>
+        </WallItem>
+      )}
+      <WallItem x={compact ? '58%' : '29%'} y={compact ? '8%' : '11%'} rot={4} pin="ox" w={compact ? 110 : 120}>
         <div class="wall-note scrawl" style={{ fontSize: 15 }}>{tod} —<br /><b>pushed?</b></div>
       </WallItem>
-      <WallItem x="2%" y="52%" rot={-5} pin="amber" w={130}>
-        <div class="wall-note wall-note--bone scrawl" style={{ fontSize: 15 }}>WHO HELD<br />A KEY?</div>
-      </WallItem>
-      <WallItem x="56%" y="82%" rot={-3} pin="amber" w={120}>
+      {!compact && (
+        <WallItem x="2%" y="52%" rot={-5} pin="amber" w={130}>
+          <div class="wall-note wall-note--bone scrawl" style={{ fontSize: 15 }}>WHO HELD<br />A KEY?</div>
+        </WallItem>
+      )}
+      <WallItem x={compact ? '8%' : '56%'} y={compact ? '78%' : '82%'} rot={-3} pin="amber" w={120}>
         <div class="wall-note scrawl" style={{ fontSize: 15 }}>MOTIVE = ?</div>
       </WallItem>
-      <WallItem x="29%" y="60%" rot={2} pin="bone" w={150}>
-        <div class="wall-redact">
-          <div class="t-mono" style={{ fontSize: 'calc(11px*var(--mono-scale))', color: '#6a6150' }}>FORENSIC — SEALED</div>
-          <div class="bar-blk" style={{ width: '90%' }} />
-          <div class="bar-blk" style={{ width: '70%' }} />
-          <div class="bar-blk" style={{ width: '85%' }} />
-        </div>
-      </WallItem>
-      <WallItem x="83%" y="30%" rot={-4} pin="amber" w={150}>
-        <div class="wall-clip">
-          <div style={{ fontFamily: 'var(--f-display)', fontSize: 8, color: '#231f16', marginBottom: 5 }}>GUEST LIST</div>
-          {c.suspects.map((s) => (
-            <div key={s.id} class="t-mono" style={{ fontSize: 'calc(12px*var(--mono-scale))', color: '#4a4234', display: 'flex', justifyContent: 'space-between' }}>
-              <span>{s.name.split(' ').slice(-1)[0]}, {s.name[0]}.</span>
-              <span style={{ color: '#8a3a2c' }}>✓</span>
-            </div>
-          ))}
-        </div>
-      </WallItem>
-      <WallItem x="84%" y="55%" rot={3} pin="ox" w={138}>
+      {!compact && (
+        <WallItem x="29%" y="60%" rot={2} pin="bone" w={150}>
+          <div class="wall-redact">
+            <div class="t-mono" style={{ fontSize: 'calc(11px*var(--mono-scale))', color: '#6a6150' }}>FORENSIC — SEALED</div>
+            <div class="bar-blk" style={{ width: '90%' }} />
+            <div class="bar-blk" style={{ width: '70%' }} />
+            <div class="bar-blk" style={{ width: '85%' }} />
+          </div>
+        </WallItem>
+      )}
+      {!compact && (
+        <WallItem x="83%" y="30%" rot={-4} pin="amber" w={150}>
+          <div class="wall-clip">
+            <div style={{ fontFamily: 'var(--f-display)', fontSize: 8, color: '#231f16', marginBottom: 5 }}>GUEST LIST</div>
+            {c.suspects.map((s) => (
+              <div key={s.id} class="t-mono" style={{ fontSize: 'calc(12px*var(--mono-scale))', color: '#4a4234', display: 'flex', justifyContent: 'space-between' }}>
+                <span>{s.name.split(' ').slice(-1)[0]}, {s.name[0]}.</span>
+                <span style={{ color: '#8a3a2c' }}>✓</span>
+              </div>
+            ))}
+          </div>
+        </WallItem>
+      )}
+      <WallItem x={compact ? '52%' : '84%'} y={compact ? '82%' : '55%'} rot={3} pin="ox" w={compact ? 130 : 138}>
         <div class="wall-photo">
           <div style={{ background: '#0d1117', height: 72 }}><Scene name="mezzanine" w={126} h={72} style={{ width: '100%', height: '100%' }} /></div>
           <div class="t-mono" style={{ fontSize: 'calc(11px*var(--mono-scale))', color: '#6a6150', textAlign: 'center', marginTop: 3 }}>SCENE — RAIL</div>
         </div>
       </WallItem>
-      <div class="wall-item" style={{ left: '44%', top: '70%', width: 64, height: 64, border: '5px solid rgba(60,40,20,.35)', borderRadius: '50%', boxShadow: 'inset 0 0 8px rgba(60,40,20,.25)' }} />
-      <div class="wall-item" style={{ left: '-6%', top: '88%', width: '46%', transform: 'rotate(-7deg)', zIndex: 8 }}>
+      {!compact && <div class="wall-item" style={{ left: '44%', top: '70%', width: 64, height: 64, border: '5px solid rgba(60,40,20,.35)', borderRadius: '50%', boxShadow: 'inset 0 0 8px rgba(60,40,20,.25)' }} />}
+      <div class="wall-item" style={{ left: compact ? '2%' : '-6%', top: compact ? '94%' : '88%', width: compact ? '80%' : '46%', transform: 'rotate(-7deg)', zIndex: 8 }}>
         <div style={{ background: 'var(--amber-2)', color: 'var(--ink-0)', padding: '5px 0', boxShadow: '0 3px 0 rgba(0,0,0,.4)', fontFamily: 'var(--f-display)', fontSize: 10, letterSpacing: '.3em', textAlign: 'center', whiteSpace: 'nowrap', overflow: 'hidden' }}>
           ▪ POLICE LINE ▪ DO NOT CROSS ▪ POLICE LINE ▪
         </div>
@@ -243,8 +414,8 @@ function SuspectRail() {
                   </div>
                   <div class="col grow" style={{ gap: 4, minWidth: 0 }}>
                     <div class="between" style={{ gap: 6 }}>
-                      <span class="t-display nowrap" style={{ fontSize: 10, color: 'var(--bone-3)' }}>{s.name}</span>
-                      <span class="t-mono" style={{ fontSize: 'calc(12px*var(--mono-scale))', color: susp >= 65 ? 'var(--ox-3)' : 'var(--bone-1)' }}>{susp}%</span>
+                      <span class="t-display nowrap" style={{ fontSize: 10, color: 'var(--bone-3)', flex: '1 1 auto', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.name}</span>
+                      <span class="t-mono" style={{ flexShrink: 0, fontSize: 'calc(12px*var(--mono-scale))', color: susp >= 65 ? 'var(--ox-3)' : 'var(--bone-1)' }}>{susp}%</span>
                     </div>
                     <div class="t-label">{s.tag}</div>
                     <SuspicionBar value={susp} compact label={null} />
@@ -266,13 +437,13 @@ function SuspectRail() {
   )
 }
 
-function BoardNode({ node, selected, onSelect }: { node: Node; selected: boolean; onSelect: () => void }) {
+function BoardNode({ node, cardW, selected, onSelect }: { node: Node; cardW: number; selected: boolean; onSelect: () => void }) {
   const g = useGame()
   const c = g.case
   if (node.kind === 'evidence') {
     const e = c.evidence.find((x) => x.id === node.id)!
     return (
-      <div class="pin-note" style={{ width: CARD_W, cursor: 'pointer', boxShadow: selected ? '0 0 0 3px var(--amber-2), 3px 4px 0 rgba(0,0,0,.4)' : undefined }} onClick={onSelect}>
+      <div class="pin-note" style={{ width: cardW, cursor: 'pointer', boxShadow: selected ? '0 0 0 3px var(--amber-2), 3px 4px 0 rgba(0,0,0,.4)' : undefined }} onClick={onSelect}>
         <div class="row" style={{ gap: 8, alignItems: 'center' }}>
           <div style={{ background: 'var(--ink-1)', padding: 3 }}><EvIcon icon={e.icon} px={2} /></div>
           <div class="col" style={{ gap: 2, minWidth: 0 }}>
@@ -284,7 +455,7 @@ function BoardNode({ node, selected, onSelect }: { node: Node; selected: boolean
     )
   }
   return (
-    <Panel variant="ox" style={{ padding: 7, width: CARD_W }}>
+    <Panel variant="ox" style={{ padding: 7, width: cardW, cursor: 'pointer' }} onClick={onSelect}>
       <div class="row" style={{ gap: 8, alignItems: 'center' }}>
         <div style={{ background: 'var(--ink-1)', boxShadow: 'inset 0 0 0 2px var(--ink-0)', padding: 2, flexShrink: 0 }}>
           <Portrait id={c.victim.sprite} px={3} />
@@ -297,46 +468,3 @@ function BoardNode({ node, selected, onSelect }: { node: Node; selected: boolean
     </Panel>
   )
 }
-
-function BoardMobile() {
-  const g = useGame()
-  const c = g.case
-  const [sel, setSel] = useState<string | null>(null)
-  return (
-    <div class="app__view">
-      <Hud title="THE BOARD" sub={c.id} right={<Btn sm variant="ghost" onClick={() => g.nav('accuse')}>Accuse</Btn>} />
-      <div class="screen-pad">
-        <div class="row between" style={{ marginBottom: 8 }}>
-          <span class="t-label" style={{ color: 'var(--amber-2)' }}>PERSONS OF INTEREST</span>
-          <span class="t-label dim">tap, then interrogate</span>
-        </div>
-        <div class="col" style={{ gap: 10 }}>
-          {c.suspects.map((s: Suspect) => {
-            const open = sel === s.id
-            return (
-              <div key={s.id} onClick={() => setSel(open ? null : s.id)}>
-                <SuspectCard s={s} active={open} />
-                {open && (
-                  <div style={{ marginTop: -2 }}>
-                    <Panel variant="amber" style={{ padding: 10, marginTop: 4 }}>
-                      <div class="t-body" style={{ fontSize: 13, lineHeight: 1.4, marginBottom: 8 }}>{s.alibi}</div>
-                      <Btn variant="ox" className="grow" style={{ width: '100%' }} onClick={(e) => { e.stopPropagation(); g.nav('interro', { suspect: s.id }) }}>▸ Interrogate {s.name.split(' ')[0]}</Btn>
-                    </Panel>
-                  </div>
-                )}
-              </div>
-            )
-          })}
-        </div>
-        <div class="row between" style={{ margin: '18px 0 8px' }}>
-          <span class="t-label">THE EVIDENCE WALL</span>
-          <span class="t-label dim">{c.evidence.length}</span>
-        </div>
-        <div class="col" style={{ gap: 8 }}>
-          {c.evidence.map((e) => <EvidenceCard key={e.id} e={e} onClick={() => g.nav('evidence', { focus: e.id })} />)}
-        </div>
-      </div>
-      <BottomNav />
-    </div>
-  )
-}

web/src/screens/cold.tsx

@@ -1,363 +1,368 @@
-// Title · Story · Briefing (dossier) · Boot — the "cold" pre-investigation screens.
-import { useEffect, useRef, useState } from 'preact/hooks'
-import type { ComponentChildren } from 'preact'
-
-import { useTypewriter } from '../engine/pixel'
-import { useGame } from '../store'
-import type { PublicCase } from '../types'
-import { playSfx } from '../ui/audio'
-import { BottomNav, Btn, Controls, ExhibitArt, HintButton, Hud, Panel, Portrait, Scene, Stamp } from '../ui/components'
-
-export function TitleScreen() {
-  const g = useGame()
-  const c = g.case
-  const [enterId, setEnterId] = useState(false)
-  const [idVal, setIdVal] = useState(c.id)
-  const pull = () => {
-    const id = idVal.trim()
-    if (id) g.loadCase(id) // load that exact case (fresh run) and jump straight into it
-  }
-  return (
-    <div class="app__view" style={{ position: 'relative' }}>
-      <Scene name="skyline" w={320} h={200} anim cover style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />
-      <div style={{ position: 'absolute', top: 12, right: 14, zIndex: 5 }}><Controls /></div>
-      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(90% 75% at 50% 42%, transparent 45%, rgba(8,11,16,.45) 95%)' }} />
-      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(34% 56% at 50% 46%, rgba(8,11,16,.82) 30%, rgba(8,11,16,.5) 60%, transparent 80%)' }} />
-      <div style={{ position: 'relative', zIndex: 2, flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 26, padding: 24, textAlign: 'center' }}>
-        <div class="t-label" style={{ letterSpacing: '.34em', color: 'var(--amber-2)' }}>A PROCEDURAL {c.kindLabel || 'HOMICIDE'}</div>
-        <h1 class="t-display" style={{ fontSize: 'clamp(34px,9vw,82px)', color: 'var(--bone-3)', lineHeight: 0.95, textShadow: '4px 4px 0 var(--ink-0)' }}>CASE<br />ZERO</h1>
-        <p class="t-body" style={{ maxWidth: 440, color: 'var(--bone-2)', fontSize: 16 }}>
-          Every case is generated. The city, the body, the lies. Solve one no one has ever seen.
-        </p>
-        <div class="t-mono amber" style={{ fontSize: 'calc(17px*var(--mono-scale))' }}>“{c.tagline}”</div>
-        {!enterId ? (
-          <div class="col" style={{ gap: 10, width: 'min(320px,80vw)', marginTop: 6 }}>
-            <Btn variant="amber" onClick={() => g.newCase()}>▸ Begin New Case</Btn>
-            <Btn variant="ghost" onClick={() => setEnterId(true)}>Enter Case ID</Btn>
-            <Btn variant="ghost" onClick={() => g.nav('board')}>Continue · {c.id}</Btn>
-          </div>
-        ) : (
-          <Panel className="col" style={{ gap: 10, width: 'min(340px,86vw)', padding: 16 }}>
-            <span class="t-label">ENTER A CASE FILE NUMBER</span>
-            <input
-              class="pinput t-mono"
-              value={idVal}
-              onInput={(e) => setIdVal((e.target as HTMLInputElement).value)}
-              style={{ textAlign: 'center', fontSize: 'calc(17px*var(--mono-scale))' }}
-            />
-            <div class="row" style={{ gap: 8 }}>
-              <Btn variant="ghost" sm onClick={() => setEnterId(false)}>Back</Btn>
-              <Btn variant="amber" className="grow" onClick={pull}>Pull File ▸</Btn>
-            </div>
-          </Panel>
-        )}
-      </div>
-      <div style={{ position: 'absolute', bottom: 12, left: 0, right: 0, textAlign: 'center', zIndex: 2 }}>
-        <span class="t-label">{c.city} · {c.weather}</span>
-      </div>
-    </div>
-  )
-}
-
-export function StoryScreen() {
-  const g = useGame()
-  const beats = g.case.storyBeats
-  const [i, setI] = useState(0)
-  const beat = beats[i]
-  const last = i === beats.length - 1
-  const [body, done] = useTypewriter(beat.text, (g.state.tweaks.typeSpeed || 18) + 2, true)
-  return (
-    <div class="app__view" style={{ position: 'relative', background: 'var(--ink-0)' }}>
-      <Scene name={beat.scene} w={320} h={200} cover deps={[i]} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.5 }} />
-      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(8,11,16,.7) 0%, rgba(8,11,16,.35) 38%, rgba(8,11,16,.82) 100%)' }} />
-      <div style={{ position: 'relative', zIndex: 2, flex: 1, display: 'flex', flexDirection: 'column' }}>
-        <div class="between" style={{ padding: '14px 18px' }}>
-          <span class="t-label" style={{ letterSpacing: '.2em', color: 'var(--amber-2)' }}>{beat.kicker}</span>
-          <div class="row" style={{ gap: 8 }}>
-            <HintButton />
-            <Btn sm variant="ghost" onClick={() => g.nav('briefing')}>Skip ▸</Btn>
-          </div>
-        </div>
-        <div class="grow center" style={{ padding: '12px 22px' }}>
-          <div style={{ maxWidth: 680, width: '100%' }}>
-            <h1 class="t-display" style={{ fontSize: 'clamp(22px,4vw,34px)', color: 'var(--bone-3)', marginBottom: 18, lineHeight: 1.1, textShadow: '3px 3px 0 var(--ink-0)' }}>{beat.title}</h1>
-            <p class="t-body" style={{ fontSize: 'clamp(16px,2.2vw,20px)', lineHeight: 1.65, color: 'var(--bone-2)', minHeight: 130 }}>
-              {body}
-              {!done && <span class="cursor" />}
-            </p>
-          </div>
-        </div>
-        <div class="between" style={{ padding: '16px 22px 22px', gap: 14 }}>
-          <div class="row" style={{ gap: 6 }}>
-            {beats.map((_, k) => (
-              <span key={k} onClick={() => setI(k)} style={{ width: 26, height: 6, cursor: 'pointer', background: k === i ? 'var(--amber-2)' : k < i ? 'var(--slate-2)' : 'var(--ink-3)', boxShadow: 'inset 0 0 0 1px var(--ink-0)' }} />
-            ))}
-          </div>
-          <div class="row" style={{ gap: 10 }}>
-            {i > 0 && <Btn variant="ghost" onClick={() => setI(i - 1)}>◂ Back</Btn>}
-            {!last ? (
-              <Btn variant="amber" onClick={() => setI(i + 1)}>Next ▸</Btn>
-            ) : (
-              <Btn variant="amber" style={{ padding: '13px 24px' }} onClick={() => g.nav('briefing')}>Open the Case File ▸▸</Btn>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export function BootScreen() {
-  const g = useGame()
-  const boot = g.case.bootLines
-  const [lines, setLines] = useState<string[]>([])
-  const [cur, setCur] = useState('')
-  const [stamped, setStamped] = useState(false)
-  const [done, setDone] = useState(false)
-  const idx = useRef(0)
-  const ch = useRef(0)
-
-  useEffect(() => {
-    const speed = g.state.tweaks.typeSpeed || 16
-    let timer: ReturnType<typeof setTimeout>
-    const tick = () => {
-      const i = idx.current
-      if (i >= boot.length) {
-        setStamped(true)
-        setTimeout(() => setDone(true), 900)
-        return
-      }
-      const line = boot[i]
-      ch.current++
-      setCur(line.slice(0, ch.current))
-      if (ch.current >= line.length) {
-        setLines((l) => [...l, line])
-        setCur('')
-        ch.current = 0
-        idx.current++
-        timer = setTimeout(tick, 240)
-      } else {
-        timer = setTimeout(tick, speed)
-      }
-    }
-    timer = setTimeout(tick, 300)
-    return () => clearTimeout(timer)
-  }, [])
-
-  return (
-    <div class="app__view" style={{ position: 'relative', background: 'var(--ink-0)' }}>
-      <Scene name="seawall" w={320} h={200} cover style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.28 }} />
-      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(90% 80% at 30% 40%, transparent 40%, rgba(8,11,16,.7) 100%)' }} />
-      <div class="screen-center" style={{ position: 'relative', zIndex: 2 }}>
-        <div class="maxw" style={{ maxWidth: 760, display: 'flex', flexDirection: 'column', gap: 22, alignItems: g.mode === 'mobile' ? 'stretch' : 'flex-start' }}>
-          <div class="row" style={{ gap: 10, alignItems: 'center' }}>
-            <span style={{ width: 9, height: 9, background: 'var(--ox-3)', boxShadow: '0 0 10px var(--ox-3)', animation: 'blink 1.4s steps(1) infinite' }} />
-            <span class="t-label" style={{ letterSpacing: '.22em', color: 'var(--amber-2)' }}>{g.case.city} · {g.case.district}</span>
-          </div>
-          <div class="t-mono" style={{ fontSize: 'calc(17px*var(--mono-scale))', lineHeight: 1.85, color: 'var(--bone-2)', minHeight: g.mode === 'mobile' ? 220 : 200 }}>
-            {lines.map((l, i) => (
-              <div key={i} style={{ opacity: i === lines.length - 1 && !cur ? 1 : 0.82 }}>{l}</div>
-            ))}
-            {cur && <div class="bone">{cur}<span class="cursor" /></div>}
-            {lines.length === 0 && !cur && <span class="cursor" />}
-          </div>
-          <div class="col" style={{ gap: 18, alignItems: g.mode === 'mobile' ? 'stretch' : 'flex-start' }}>
-            <div style={{ position: 'relative', paddingTop: 16 }}>
-              <span class="t-label" style={{ position: 'absolute', top: 0, left: 0 }}>CASE FILE No.</span>
-              {stamped ? (
-                <Stamp slam style={{ fontSize: 'clamp(15px,3.5vw,22px)' }}>{g.case.id}</Stamp>
-              ) : (
-                <span class="t-display dim" style={{ fontSize: 'clamp(15px,3.5vw,22px)', opacity: 0.25, letterSpacing: '.08em' }}>— — — — —</span>
-              )}
-            </div>
-            {done && <Btn variant="amber" style={{ fontSize: 12, padding: '15px 24px' }} onClick={() => g.nav('briefing')}>Take the Case ▸</Btn>}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// ---- dossier ----
-function PageHead({ tab, idx, c }: { tab: string; idx: string; c: PublicCase }) {
-  return (
-    <div class="between" style={{ borderBottom: '2px solid #211d1533', paddingBottom: 10, marginBottom: 16 }}>
-      <div class="col" style={{ gap: 4 }}>
-        <span class="dlabel">{c.city} CO. · {c.division || 'HOMICIDE DIVISION'}</span>
-        <span class="dh" style={{ fontSize: 13 }}>{tab}</span>
-      </div>
-      <span class="dtype" style={{ fontSize: 'calc(13px*var(--mono-scale))', color: '#6a6150' }}>FILE {c.id} · pg.{idx}</span>
-    </div>
-  )
-}
-
-function dossierPages(c: PublicCase): { tab: string; render: () => ComponentChildren }[] {
-  return [
-    {
-      tab: 'COVER',
-      render: () => (
-        <div class="center" style={{ flexDirection: 'column', height: '100%', gap: 18, textAlign: 'center', position: 'relative' }}>
-          <span class="paperclip" />
-          <span class="dlabel" style={{ fontSize: 9, letterSpacing: '.3em' }}>{c.district}</span>
-          <div class="dlabel" style={{ color: '#6a6150', letterSpacing: '.2em' }}>{c.kindLabel || 'HOMICIDE'} — CASE FILE</div>
-          <h1 class="dh" style={{ fontSize: 'clamp(26px,5vw,44px)', lineHeight: 1.05 }}>{c.title}</h1>
-          <div style={{ margin: '6px 0' }}><span class="dstamp" style={{ fontSize: 'clamp(14px,3vw,20px)' }}>{c.id}</span></div>
-          <div class="dtype" style={{ color: '#4a4234' }}>{c.district}</div>
-          <div style={{ position: 'absolute', bottom: 6, right: 8 }}><span class="dstamp" style={{ fontSize: 11, borderColor: '#1a1610', color: '#1a1610', transform: 'rotate(4deg)' }}>CONFIDENTIAL</span></div>
-          <div class="dtype" style={{ color: '#6a6150', fontSize: 'calc(14px*var(--mono-scale))', marginTop: 8 }}>▸ flip the page →</div>
-        </div>
-      ),
-    },
-    {
-      tab: 'THE VICTIM',
-      render: () => (
-        <div>
-          <PageHead tab="THE VICTIM" idx="01" c={c} />
-          <div class="row" style={{ gap: 20, alignItems: 'flex-start', flexWrap: 'wrap' }}>
-            <div class="photo-paper" style={{ flexShrink: 0 }}>
-              <div style={{ background: '#0d1117', padding: 4 }}><Portrait id={c.victim.sprite} px={6} /></div>
-              <div class="dtype" style={{ fontSize: 'calc(12px*var(--mono-scale))', color: '#6a6150', textAlign: 'center', marginTop: 4 }}>{c.victim.name.split(' ').slice(-1)[0]}</div>
-            </div>
-            <div class="col" style={{ gap: 8, flex: 1, minWidth: 200 }}>
-              <h2 class="dh" style={{ fontSize: 20 }}>{c.victim.name}</h2>
-              <div class="dtype" style={{ color: '#4a4234' }}>{c.victim.role}</div>
-              <div class="row" style={{ gap: 10, flexWrap: 'wrap' }}>
-                <span class="dstamp" style={{ fontSize: 11 }}>{c.victimStatus || 'DECEASED'}</span>
-                <span class="dtype" style={{ alignSelf: 'center' }}>{c.todLabel || 'T.O.D.'} {c.tod} · AGE {c.victim.age}</span>
-              </div>
-            </div>
-          </div>
-          <hr style={{ border: 0, borderTop: '2px dashed #211d1533', margin: '16px 0' }} />
-          <p class="dtype">{c.victim.bio}</p>
-        </div>
-      ),
-    },
-    {
-      tab: 'THE SCENE',
-      render: () => (
-        <div>
-          <PageHead tab="THE SCENE" idx="02" c={c} />
-          <div class="photo-paper" style={{ marginBottom: 16, transform: 'rotate(-1deg)' }}>
-            <div style={{ aspectRatio: '16/9', background: '#0d1117' }}>
-              <Scene name={c.scene} w={288} h={162} style={{ width: '100%', height: '100%' }} />
-            </div>
-            <div class="dtype" style={{ fontSize: 'calc(12px*var(--mono-scale))', color: '#6a6150', marginTop: 4 }}>EXHIBIT A — {c.scene}</div>
-          </div>
-          <p class="dtype" style={{ marginBottom: 10 }}><b style={{ color: '#8a3a2c' }}>FOUND — </b>{c.found}</p>
-          <p class="dtype"><b style={{ color: '#8a3a2c' }}>CAUSE — </b>{c.cause}</p>
-        </div>
-      ),
-    },
-    {
-      tab: 'THE EXHIBITS',
-      render: () => (
-        <div>
-          <PageHead tab="THE EXHIBITS" idx="03" c={c} />
-          <p class="dtype" style={{ marginBottom: 12, color: '#4a4234' }}>Photographed and logged at the scene. Examine each on the wall.</p>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
-            {c.evidence.slice(0, 6).map((e, i) => (
-              <div key={e.id} class="photo-paper" style={{ transform: `rotate(${(i % 3) - 1}deg)` }}>
-                <div style={{ background: '#0d1117' }}>
-                  <ExhibitArt e={e} style={{ width: '100%', height: 'auto' }} />
-                </div>
-                <div class="between" style={{ marginTop: 4, gap: 6 }}>
-                  <span class="dtype" style={{ fontSize: 'calc(11px*var(--mono-scale))', color: '#6a6150', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.name}</span>
-                  <span class="dtype" style={{ fontSize: 'calc(11px*var(--mono-scale))', color: '#8a3a2c', flexShrink: 0 }}>{e.time}</span>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      ),
-    },
-    {
-      tab: 'KEY FACTS',
-      render: () => (
-        <div style={{ position: 'relative' }}>
-          <PageHead tab="KEY FACTS" idx="04" c={c} />
-          <div style={{ position: 'absolute', top: 60, right: 0 }}><span class="dstamp" style={{ fontSize: 13 }}>{c.kindLabel || 'HOMICIDE'}</span></div>
-          <div class="col" style={{ gap: 0 }}>
-            {c.facts.map(([k, v], i) => (
-              <div key={i} class="row" style={{ gap: 14, padding: '11px 0', borderBottom: '1px dotted #211d1540', alignItems: 'baseline' }}>
-                <span class="dlabel" style={{ color: '#6a6150', width: 116, flexShrink: 0 }}>{k}</span>
-                <span class="dtype" style={{ color: k === 'VERDICT' ? '#8a2a2a' : '#211d15' }}>{v}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      ),
-    },
-    {
-      tab: 'PERSONS OF INTEREST',
-      render: () => (
-        <div>
-          <PageHead tab="PERSONS OF INTEREST" idx="05" c={c} />
-          <p class="dtype" style={{ marginBottom: 14, color: '#4a4234' }}>Those who stayed when the others fled the sirens. Each had reason to be near.</p>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
-            {c.suspects.map((s) => (
-              <div key={s.id} class="row" style={{ gap: 10, alignItems: 'center', background: '#00000010', padding: 8, boxShadow: 'inset 0 0 0 1px #211d1522' }}>
-                <div style={{ background: '#0d1117', padding: 3, flexShrink: 0 }}><Portrait id={s.sprite} px={3} gender={s.gender} /></div>
-                <div class="col" style={{ gap: 2, minWidth: 0 }}>
-                  <span class="dh" style={{ fontSize: 10 }}>{s.name}</span>
-                  <span class="dlabel" style={{ color: '#8a3a2c' }}>{s.tag}</span>
-                </div>
-              </div>
-            ))}
-          </div>
-          <p class="dtype" style={{ marginTop: 16, color: '#8a3a2c', textAlign: 'center' }}>One of them is lying. Find the crack.</p>
-        </div>
-      ),
-    },
-  ]
-}
-
-export function BriefingScreen() {
-  const g = useGame()
-  const c = g.case
-  const PAGES = dossierPages(c)
-  const [page, setPage] = useState(0)
-  const [flip, setFlip] = useState<string | null>(null)
-  const go = (dir: number) => {
-    const next = page + dir
-    if (next < 0 || next >= PAGES.length) return
-    playSfx('page')
-    setFlip(dir > 0 ? 'fwd' : 'back')
-    setPage(next)
-    setTimeout(() => setFlip(null), 470)
-  }
-  const P = PAGES[page]
-  return (
-    <div class="app__view">
-      <Hud title={c.title} sub="CASE DOSSIER" right={<Btn sm variant="ghost" onClick={() => g.nav('title')}>Menu</Btn>} />
-      <div class="dossier-stage">
-        <div class="dossier">
-          <div class="dossier__folder">
-            <div class="page-wrap">
-              <div class={'page ' + (page % 2 ? 'page--paper2 ' : '') + (flip ? 'page--flip-' + flip : '')} key={page}>
-                {P.render()}
-                <div class="page__curl" />
-                {page > 0 && <div class="page__edge page__edge--l" onClick={() => go(-1)} title="Previous page" />}
-                {page < PAGES.length - 1 && <div class="page__edge page__edge--r" onClick={() => go(1)} title="Next page" />}
-              </div>
-            </div>
-          </div>
-          <div class="dossier__nav">
-            <Btn sm variant="ghost" sfx={null} disabled={page === 0} onClick={() => go(-1)}>◂ Prev</Btn>
-            <div class="page-dots">
-              {PAGES.map((pg, i) => (
-                <span key={i} class={'page-dot' + (i === page ? ' page-dot--on' : '')} title={pg.tab}
-                  onClick={() => { setFlip(i > page ? 'fwd' : 'back'); setPage(i); setTimeout(() => setFlip(null), 470) }} />
-              ))}
-            </div>
-            {page < PAGES.length - 1 ? (
-              <Btn sm variant="amber" sfx={null} onClick={() => go(1)}>Next page ▸</Btn>
-            ) : (
-              <Btn variant="amber" onClick={() => g.nav('board')}>Open the Wall ▸▸</Btn>
-            )}
-          </div>
-        </div>
-      </div>
-      <BottomNav />
-    </div>
-  )
-}
+// Title · Story · Briefing (dossier) · Boot — the "cold" pre-investigation screens.
+import { useEffect, useRef, useState } from 'preact/hooks'
+import type { ComponentChildren } from 'preact'
+
+import { useTypewriter } from '../engine/pixel'
+import { useGame } from '../store'
+import type { PublicCase } from '../types'
+import { playSfx } from '../ui/audio'
+import { BottomNav, Btn, Controls, ExhibitArt, HintButton, Hud, Panel, Portrait, Scene, Stamp } from '../ui/components'
+
+export function TitleScreen() {
+  const g = useGame()
+  const c = g.case
+  const [enterId, setEnterId] = useState(false)
+  const [idVal, setIdVal] = useState(c.id)
+  const pull = () => {
+    const id = idVal.trim()
+    if (id) g.loadCase(id) // load that exact case (fresh run) and jump straight into it
+  }
+  return (
+    <div class="app__view" style={{ position: 'relative' }}>
+      <Scene name="skyline" w={320} h={200} anim cover style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />
+      <div style={{ position: 'absolute', top: 12, right: 14, zIndex: 5 }}><Controls /></div>
+      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(90% 75% at 50% 42%, transparent 45%, rgba(8,11,16,.45) 95%)' }} />
+      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(34% 56% at 50% 46%, rgba(8,11,16,.82) 30%, rgba(8,11,16,.5) 60%, transparent 80%)' }} />
+      <div style={{ position: 'relative', zIndex: 2, flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 26, padding: 24, textAlign: 'center' }}>
+        <div class="t-label" style={{ letterSpacing: '.34em', color: 'var(--amber-2)' }}>A PROCEDURAL DETECTIVE MYSTERY</div>
+        <h1 class="t-display" style={{ fontSize: 'clamp(34px,9vw,82px)', color: 'var(--bone-3)', lineHeight: 0.95, textShadow: '4px 4px 0 var(--ink-0)' }}>CASE<br />ZERO</h1>
+        <p class="t-body" style={{ maxWidth: 440, color: 'var(--bone-2)', fontSize: 16 }}>
+          Every case is generated. The city, the body, the lies. Solve one no one has ever seen.
+        </p>
+        <div class="t-mono amber" style={{ fontSize: 'calc(17px*var(--mono-scale))' }}>“{c.tagline}”</div>
+        {!enterId ? (
+          <div class="col" style={{ gap: 10, width: 'min(320px,80vw)', marginTop: 6 }}>
+            <Btn variant="amber" onClick={() => g.newCase()}>▸ Begin New Case</Btn>
+            <Btn variant="ghost" onClick={() => setEnterId(true)}>Enter Case ID</Btn>
+            <Btn variant="ghost" onClick={() => g.nav('board')}>Continue · {c.id}</Btn>
+          </div>
+        ) : (
+          <Panel className="col" style={{ gap: 10, width: 'min(340px,86vw)', padding: 16 }}>
+            <span class="t-label">ENTER A CASE FILE NUMBER</span>
+            <input
+              class="pinput t-mono"
+              value={idVal}
+              onInput={(e) => setIdVal((e.target as HTMLInputElement).value)}
+              style={{ textAlign: 'center', fontSize: 'calc(17px*var(--mono-scale))' }}
+            />
+            <div class="row" style={{ gap: 8 }}>
+              <Btn variant="ghost" sm onClick={() => setEnterId(false)}>Back</Btn>
+              <Btn variant="amber" className="grow" onClick={pull}>Pull File ▸</Btn>
+            </div>
+          </Panel>
+        )}
+      </div>
+      <div style={{ position: 'absolute', bottom: 12, left: 12, right: 12, display: 'flex', justifyContent: 'center', zIndex: 2 }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', columnGap: 8, rowGap: 3, alignItems: 'baseline', textAlign: 'center', maxWidth: 480, padding: '5px 12px', background: 'rgba(8,11,16,.6)', boxShadow: '0 0 0 2px var(--ink-3), 4px 4px 0 rgba(0,0,0,.35)' }}>
+          <span class="t-label nowrap" style={{ color: 'var(--amber-2)', letterSpacing: '.2em' }}>TONIGHT'S WIRE</span>
+          <span class="t-label nowrap">{c.city}</span>
+          <span class="t-label dim">·</span>
+          <span class="t-label">{c.weather}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function StoryScreen() {
+  const g = useGame()
+  const beats = g.case.storyBeats
+  const [i, setI] = useState(0)
+  const beat = beats[i]
+  const last = i === beats.length - 1
+  const [body, done] = useTypewriter(beat.text, (g.state.tweaks.typeSpeed || 18) + 2, true)
+  return (
+    <div class="app__view" style={{ position: 'relative', background: 'var(--ink-0)' }}>
+      <Scene name={beat.scene} w={320} h={200} cover deps={[i]} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.5 }} />
+      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(8,11,16,.7) 0%, rgba(8,11,16,.35) 38%, rgba(8,11,16,.82) 100%)' }} />
+      <div style={{ position: 'relative', zIndex: 2, flex: 1, display: 'flex', flexDirection: 'column' }}>
+        <div class="between" style={{ padding: '14px 18px' }}>
+          <span class="t-label" style={{ letterSpacing: '.2em', color: 'var(--amber-2)' }}>{beat.kicker}</span>
+          <div class="row" style={{ gap: 8 }}>
+            <HintButton />
+            <Btn sm variant="ghost" onClick={() => g.nav('briefing')}>Skip ▸</Btn>
+          </div>
+        </div>
+        <div class="grow center" style={{ padding: '12px 22px' }}>
+          <div style={{ maxWidth: 680, width: '100%' }}>
+            <h1 class="t-display" style={{ fontSize: 'clamp(22px,4vw,34px)', color: 'var(--bone-3)', marginBottom: 18, lineHeight: 1.1, textShadow: '3px 3px 0 var(--ink-0)' }}>{beat.title}</h1>
+            <p class="t-body" style={{ fontSize: 'clamp(16px,2.2vw,20px)', lineHeight: 1.65, color: 'var(--bone-2)', minHeight: 130 }}>
+              {body}
+              {!done && <span class="cursor" />}
+            </p>
+          </div>
+        </div>
+        <div class="between" style={{ padding: '16px 22px 22px', gap: 14 }}>
+          <div class="row" style={{ gap: 6 }}>
+            {beats.map((_, k) => (
+              <span key={k} onClick={() => setI(k)} style={{ width: 26, height: 6, cursor: 'pointer', background: k === i ? 'var(--amber-2)' : k < i ? 'var(--slate-2)' : 'var(--ink-3)', boxShadow: 'inset 0 0 0 1px var(--ink-0)' }} />
+            ))}
+          </div>
+          <div class="row" style={{ gap: 10 }}>
+            {i > 0 && <Btn variant="ghost" onClick={() => setI(i - 1)}>◂ Back</Btn>}
+            {!last ? (
+              <Btn variant="amber" onClick={() => setI(i + 1)}>Next ▸</Btn>
+            ) : (
+              <Btn variant="amber" style={{ padding: '13px 24px' }} onClick={() => g.nav('briefing')}>Open the Case File ▸▸</Btn>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function BootScreen() {
+  const g = useGame()
+  const boot = g.case.bootLines
+  const [lines, setLines] = useState<string[]>([])
+  const [cur, setCur] = useState('')
+  const [stamped, setStamped] = useState(false)
+  const [done, setDone] = useState(false)
+  const idx = useRef(0)
+  const ch = useRef(0)
+
+  useEffect(() => {
+    const speed = g.state.tweaks.typeSpeed || 16
+    let timer: ReturnType<typeof setTimeout>
+    const tick = () => {
+      const i = idx.current
+      if (i >= boot.length) {
+        setStamped(true)
+        setTimeout(() => setDone(true), 900)
+        return
+      }
+      const line = boot[i]
+      ch.current++
+      setCur(line.slice(0, ch.current))
+      if (ch.current >= line.length) {
+        setLines((l) => [...l, line])
+        setCur('')
+        ch.current = 0
+        idx.current++
+        timer = setTimeout(tick, 240)
+      } else {
+        timer = setTimeout(tick, speed)
+      }
+    }
+    timer = setTimeout(tick, 300)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return (
+    <div class="app__view" style={{ position: 'relative', background: 'var(--ink-0)' }}>
+      <Scene name="seawall" w={320} h={200} cover style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.28 }} />
+      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(90% 80% at 30% 40%, transparent 40%, rgba(8,11,16,.7) 100%)' }} />
+      <div class="screen-center" style={{ position: 'relative', zIndex: 2 }}>
+        <div class="maxw" style={{ maxWidth: 760, display: 'flex', flexDirection: 'column', gap: 22, alignItems: g.mode === 'mobile' ? 'stretch' : 'flex-start' }}>
+          <div class="row" style={{ gap: 10, alignItems: 'center' }}>
+            <span style={{ width: 9, height: 9, background: 'var(--ox-3)', boxShadow: '0 0 10px var(--ox-3)', animation: 'blink 1.4s steps(1) infinite' }} />
+            <span class="t-label" style={{ letterSpacing: '.22em', color: 'var(--amber-2)' }}>{g.case.city} · {g.case.district}</span>
+          </div>
+          <div class="t-mono" style={{ fontSize: 'calc(17px*var(--mono-scale))', lineHeight: 1.85, color: 'var(--bone-2)', minHeight: g.mode === 'mobile' ? 220 : 200 }}>
+            {lines.map((l, i) => (
+              <div key={i} style={{ opacity: i === lines.length - 1 && !cur ? 1 : 0.82 }}>{l}</div>
+            ))}
+            {cur && <div class="bone">{cur}<span class="cursor" /></div>}
+            {lines.length === 0 && !cur && <span class="cursor" />}
+          </div>
+          <div class="col" style={{ gap: 18, alignItems: g.mode === 'mobile' ? 'stretch' : 'flex-start' }}>
+            <div style={{ position: 'relative', paddingTop: 16 }}>
+              <span class="t-label" style={{ position: 'absolute', top: 0, left: 0 }}>CASE FILE No.</span>
+              {stamped ? (
+                <Stamp slam style={{ fontSize: 'clamp(15px,3.5vw,22px)' }}>{g.case.id}</Stamp>
+              ) : (
+                <span class="t-display dim" style={{ fontSize: 'clamp(15px,3.5vw,22px)', opacity: 0.25, letterSpacing: '.08em' }}>— — — — —</span>
+              )}
+            </div>
+            {done && <Btn variant="amber" style={{ fontSize: 12, padding: '15px 24px' }} onClick={() => g.nav('briefing')}>Take the Case ▸</Btn>}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ---- dossier ----
+function PageHead({ tab, idx, c }: { tab: string; idx: string; c: PublicCase }) {
+  return (
+    <div class="between" style={{ borderBottom: '2px solid #211d1533', paddingBottom: 10, marginBottom: 16 }}>
+      <div class="col" style={{ gap: 4 }}>
+        <span class="dlabel">{c.city} CO. · {c.division || 'HOMICIDE DIVISION'}</span>
+        <span class="dh" style={{ fontSize: 13 }}>{tab}</span>
+      </div>
+      <span class="dtype" style={{ fontSize: 'calc(13px*var(--mono-scale))', color: '#6a6150' }}>FILE {c.id} · pg.{idx}</span>
+    </div>
+  )
+}
+
+function dossierPages(c: PublicCase): { tab: string; render: () => ComponentChildren }[] {
+  return [
+    {
+      tab: 'COVER',
+      render: () => (
+        <div class="center" style={{ flexDirection: 'column', height: '100%', gap: 18, textAlign: 'center', position: 'relative' }}>
+          <span class="paperclip" />
+          <span class="dlabel" style={{ fontSize: 9, letterSpacing: '.3em' }}>{c.district}</span>
+          <div class="dlabel" style={{ color: '#6a6150', letterSpacing: '.2em' }}>{c.kindLabel || 'HOMICIDE'} — CASE FILE</div>
+          <h1 class="dh" style={{ fontSize: 'clamp(26px,5vw,44px)', lineHeight: 1.05 }}>{c.title}</h1>
+          <div style={{ margin: '6px 0' }}><span class="dstamp" style={{ fontSize: 'clamp(14px,3vw,20px)' }}>{c.id}</span></div>
+          <div class="dtype" style={{ color: '#4a4234' }}>{c.district}</div>
+          <div style={{ position: 'absolute', bottom: 6, right: 8 }}><span class="dstamp" style={{ fontSize: 11, borderColor: '#1a1610', color: '#1a1610', transform: 'rotate(4deg)' }}>CONFIDENTIAL</span></div>
+          <div class="dtype" style={{ color: '#6a6150', fontSize: 'calc(14px*var(--mono-scale))', marginTop: 8 }}>▸ flip the page →</div>
+        </div>
+      ),
+    },
+    {
+      tab: 'THE VICTIM',
+      render: () => (
+        <div>
+          <PageHead tab="THE VICTIM" idx="01" c={c} />
+          <div class="row" style={{ gap: 20, alignItems: 'flex-start', flexWrap: 'wrap' }}>
+            <div class="photo-paper" style={{ flexShrink: 0 }}>
+              <div style={{ background: '#0d1117', padding: 4 }}><Portrait id={c.victim.sprite} px={6} /></div>
+              <div class="dtype" style={{ fontSize: 'calc(12px*var(--mono-scale))', color: '#6a6150', textAlign: 'center', marginTop: 4 }}>{c.victim.name.split(' ').slice(-1)[0]}</div>
+            </div>
+            <div class="col" style={{ gap: 8, flex: 1, minWidth: 200 }}>
+              <h2 class="dh" style={{ fontSize: 20 }}>{c.victim.name}</h2>
+              <div class="dtype" style={{ color: '#4a4234' }}>{c.victim.role}</div>
+              <div class="row" style={{ gap: 10, flexWrap: 'wrap' }}>
+                <span class="dstamp" style={{ fontSize: 11 }}>{c.victimStatus || 'DECEASED'}</span>
+                <span class="dtype" style={{ alignSelf: 'center' }}>{c.todLabel || 'T.O.D.'} {c.tod} · AGE {c.victim.age}</span>
+              </div>
+            </div>
+          </div>
+          <hr style={{ border: 0, borderTop: '2px dashed #211d1533', margin: '16px 0' }} />
+          <p class="dtype">{c.victim.bio}</p>
+        </div>
+      ),
+    },
+    {
+      tab: 'THE SCENE',
+      render: () => (
+        <div>
+          <PageHead tab="THE SCENE" idx="02" c={c} />
+          <div class="photo-paper" style={{ marginBottom: 16, transform: 'rotate(-1deg)' }}>
+            <div style={{ aspectRatio: '16/9', background: '#0d1117' }}>
+              <Scene name={c.scene} w={288} h={162} style={{ width: '100%', height: '100%' }} />
+            </div>
+            <div class="dtype" style={{ fontSize: 'calc(12px*var(--mono-scale))', color: '#6a6150', marginTop: 4 }}>EXHIBIT A — {c.scene}</div>
+          </div>
+          <p class="dtype" style={{ marginBottom: 10 }}><b style={{ color: '#8a3a2c' }}>FOUND — </b>{c.found}</p>
+          <p class="dtype"><b style={{ color: '#8a3a2c' }}>CAUSE — </b>{c.cause}</p>
+        </div>
+      ),
+    },
+    {
+      tab: 'THE EXHIBITS',
+      render: () => (
+        <div>
+          <PageHead tab="THE EXHIBITS" idx="03" c={c} />
+          <p class="dtype" style={{ marginBottom: 12, color: '#4a4234' }}>Photographed and logged at the scene. Examine each on the wall.</p>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+            {c.evidence.slice(0, 6).map((e, i) => (
+              <div key={e.id} class="photo-paper" style={{ transform: `rotate(${(i % 3) - 1}deg)` }}>
+                <div style={{ background: '#0d1117' }}>
+                  <ExhibitArt e={e} style={{ width: '100%', height: 'auto' }} />
+                </div>
+                <div class="between" style={{ marginTop: 4, gap: 6 }}>
+                  <span class="dtype" style={{ fontSize: 'calc(11px*var(--mono-scale))', color: '#6a6150', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.name}</span>
+                  <span class="dtype" style={{ fontSize: 'calc(11px*var(--mono-scale))', color: '#8a3a2c', flexShrink: 0 }}>{e.time}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ),
+    },
+    {
+      tab: 'KEY FACTS',
+      render: () => (
+        <div style={{ position: 'relative' }}>
+          <PageHead tab="KEY FACTS" idx="04" c={c} />
+          <div style={{ position: 'absolute', top: 60, right: 0 }}><span class="dstamp" style={{ fontSize: 13 }}>{c.kindLabel || 'HOMICIDE'}</span></div>
+          <div class="col" style={{ gap: 0 }}>
+            {c.facts.map(([k, v], i) => (
+              <div key={i} class="row" style={{ gap: 14, padding: '11px 0', borderBottom: '1px dotted #211d1540', alignItems: 'baseline' }}>
+                <span class="dlabel" style={{ color: '#6a6150', width: 116, flexShrink: 0 }}>{k}</span>
+                <span class="dtype" style={{ color: k === 'VERDICT' ? '#8a2a2a' : '#211d15' }}>{v}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      ),
+    },
+    {
+      tab: 'PERSONS OF INTEREST',
+      render: () => (
+        <div>
+          <PageHead tab="PERSONS OF INTEREST" idx="05" c={c} />
+          <p class="dtype" style={{ marginBottom: 14, color: '#4a4234' }}>Those who stayed when the others fled the sirens. Each had reason to be near.</p>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+            {c.suspects.map((s) => (
+              <div key={s.id} class="row" style={{ gap: 10, alignItems: 'center', background: '#00000010', padding: 8, boxShadow: 'inset 0 0 0 1px #211d1522' }}>
+                <div style={{ background: '#0d1117', padding: 3, flexShrink: 0 }}><Portrait id={s.sprite} px={3} gender={s.gender} /></div>
+                <div class="col" style={{ gap: 2, minWidth: 0 }}>
+                  <span class="dh" style={{ fontSize: 10 }}>{s.name}</span>
+                  <span class="dlabel" style={{ color: '#8a3a2c' }}>{s.tag}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+          <p class="dtype" style={{ marginTop: 16, color: '#8a3a2c', textAlign: 'center' }}>One of them is lying. Find the crack.</p>
+        </div>
+      ),
+    },
+  ]
+}
+
+export function BriefingScreen() {
+  const g = useGame()
+  const c = g.case
+  const PAGES = dossierPages(c)
+  const [page, setPage] = useState(0)
+  const [flip, setFlip] = useState<string | null>(null)
+  const go = (dir: number) => {
+    const next = page + dir
+    if (next < 0 || next >= PAGES.length) return
+    playSfx('page')
+    setFlip(dir > 0 ? 'fwd' : 'back')
+    setPage(next)
+    setTimeout(() => setFlip(null), 470)
+  }
+  const P = PAGES[page]
+  return (
+    <div class="app__view">
+      <Hud title={c.title} sub="CASE DOSSIER" />
+      <div class="dossier-stage">
+        <div class="dossier">
+          <div class="dossier__folder">
+            <div class="page-wrap">
+              <div class={'page ' + (page % 2 ? 'page--paper2 ' : '') + (flip ? 'page--flip-' + flip : '')} key={page}>
+                {P.render()}
+                <div class="page__curl" />
+                {page > 0 && <div class="page__edge page__edge--l" onClick={() => go(-1)} title="Previous page" />}
+                {page < PAGES.length - 1 && <div class="page__edge page__edge--r" onClick={() => go(1)} title="Next page" />}
+              </div>
+            </div>
+          </div>
+          <div class="dossier__nav">
+            <Btn sm variant="ghost" sfx={null} disabled={page === 0} onClick={() => go(-1)}>◂ Prev</Btn>
+            <div class="page-dots">
+              {PAGES.map((pg, i) => (
+                <span key={i} class={'page-dot' + (i === page ? ' page-dot--on' : '')} title={pg.tab}
+                  onClick={() => { setFlip(i > page ? 'fwd' : 'back'); setPage(i); setTimeout(() => setFlip(null), 470) }} />
+              ))}
+            </div>
+            {page < PAGES.length - 1 ? (
+              <Btn sm variant="amber" sfx={null} onClick={() => go(1)}>Next page ▸</Btn>
+            ) : (
+              <Btn variant="amber" onClick={() => g.nav('board')}>Open the Wall ▸▸</Btn>
+            )}
+          </div>
+        </div>
+      </div>
+      <BottomNav />
+    </div>
+  )
+}

web/src/screens/index.ts

@@ -1,25 +1,27 @@
-import type { FunctionComponent } from 'preact'
-
-import type { Screen } from '../store'
-import { Board } from './board'
-import { BootScreen, BriefingScreen, StoryScreen, TitleScreen } from './cold'
-import { FlashbackScreen, NotesScreen, TimelineScreen } from './deduce'
-import { AccusationScreen, ShareScreen, VerdictScreen } from './endgame'
-import { EvidenceScreen } from './evidence'
-import { Interrogation } from './interro'
-
-export const SCREENS: Record<Screen, FunctionComponent> = {
-  title: TitleScreen,
-  story: StoryScreen,
-  briefing: BriefingScreen,
-  boot: BootScreen,
-  board: Board,
-  interro: Interrogation,
-  evidence: EvidenceScreen,
-  flashback: FlashbackScreen,
-  timeline: TimelineScreen,
-  notes: NotesScreen,
-  accuse: AccusationScreen,
-  verdict: VerdictScreen,
-  share: ShareScreen,
-}
+import type { FunctionComponent } from 'preact'
+
+import type { Screen } from '../store'
+import { Board } from './board'
+import { BootScreen, BriefingScreen, StoryScreen, TitleScreen } from './cold'
+import { FlashbackScreen, NotesScreen, TimelineScreen } from './deduce'
+import { AccusationScreen, ShareScreen, VerdictScreen } from './endgame'
+import { EvidenceScreen } from './evidence'
+import { Interrogation } from './interro'
+import { SuspectsScreen } from './suspects'
+
+export const SCREENS: Record<Screen, FunctionComponent> = {
+  title: TitleScreen,
+  story: StoryScreen,
+  briefing: BriefingScreen,
+  boot: BootScreen,
+  board: Board,
+  suspects: SuspectsScreen,
+  interro: Interrogation,
+  evidence: EvidenceScreen,
+  flashback: FlashbackScreen,
+  timeline: TimelineScreen,
+  notes: NotesScreen,
+  accuse: AccusationScreen,
+  verdict: VerdictScreen,
+  share: ShareScreen,
+}

web/src/screens/interro.tsx

@@ -1,194 +1,194 @@
-// Interrogation room — questions, free-text, and present-evidence all go to the server,
-// which returns the suspect's reply + the authoritative suspicion. The client only displays.
-import { useEffect, useRef, useState } from 'preact/hooks'
-
-import { interrogate } from '../api'
-import { useGame } from '../store'
-import type { Evidence, SuggestedQuestion } from '../types'
-import { playSfx, prepareSpeak, stopSpeak } from '../ui/audio'
-import { Btn, EvIcon, EvidenceCard, Hud, Panel, Portrait, Scene, SuspicionBar, TypeOnce } from '../ui/components'
-
-interface Pending {
-  text: string
-  tag?: string | null
-  suspicion: number
-  speed?: number // typewriter ms/char, paced to the voice when one is available
-}
-
-export function Interrogation() {
-  const g = useGame()
-  const c = g.case
-  const sid = (g.state.payload.suspect as string) || c.suspects[0].id
-  const s = c.suspects.find((x) => x.id === sid)!
-  const transcript = g.state.interrogations[sid] || []
-  const susp = g.state.suspicion[sid]
-  const usedQ = g.state.usedQ[sid] || []
-  const usedEv = g.state.usedEv[sid] || []
-  const [pending, setPending] = useState<Pending | null>(null)
-  const [thinking, setThinking] = useState(false)
-  const [talking, setTalking] = useState(false)
-  const [tray, setTray] = useState(false)
-  const [input, setInput] = useState('')
-  const scroller = useRef<HTMLDivElement>(null)
-  const busy = thinking || !!pending
-
-  useEffect(() => () => stopSpeak(), []) // stop any voice when leaving the room
-
-  useEffect(() => {
-    if (!transcript.length) setPending({ text: s.greet, suspicion: susp })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sid])
-  useEffect(() => {
-    if (scroller.current) scroller.current.scrollTop = scroller.current.scrollHeight
-  }, [transcript, pending, thinking])
-
-  const commit = () => {
-    if (!pending) return
-    g.dispatch({ type: 'ADD_LINE', sid, line: { role: 'sus', text: pending.text } })
-    g.dispatch({ type: 'SUSP_SET', sid, value: pending.suspicion })
-    setPending(null)
-  }
-
-  const run = async (body: Parameters<typeof interrogate>[2], detLine: { text: string; ev?: string }) => {
-    if (busy) return
-    stopSpeak()
-    setTalking(false)
-    g.dispatch({ type: 'ADD_LINE', sid, line: { role: 'det', text: detLine.text, ev: detLine.ev } })
-    setThinking(true)
-    const fallback = g.state.tweaks.typeSpeed || 22
-    try {
-      const r = await interrogate(g.runId, sid, body)
-      const tag = r.flags?.rattled ? 'RATTLED' : r.flags?.cornered ? 'CRACKING' : null
-      // Synthesize the voice during the "thinking" beat so text + speech start together.
-      const voice = await prepareSpeak(g.runId, sid, r.reply, () => setTalking(false))
-      // Pace the typewriter to the audio so words land in step with the spoken line.
-      const speed = voice ? Math.max(14, Math.min(90, Math.round(voice.durationMs / Math.max(1, r.reply.length)))) : fallback
-      setThinking(false)
-      setPending({ text: r.reply, suspicion: r.suspicion, tag, speed })
-      if (voice) {
-        setTalking(true)
-        voice.play()
-      }
-    } catch {
-      setThinking(false)
-      setPending({ text: '…I have nothing more to say to that.', suspicion: susp, speed: fallback })
-    }
-  }
-
-  const ask = (q: SuggestedQuestion) => {
-    if (busy) return
-    playSfx('select')
-    g.dispatch({ type: 'USEQ', sid, qid: q.id })
-    run({ questionId: q.id }, { text: q.q })
-  }
-  const present = (e: Evidence) => {
-    setTray(false)
-    if (busy) return
-    playSfx('present')
-    g.dispatch({ type: 'USEEV', sid, ev: e.id })
-    run({ presentEvidenceId: e.id }, { text: `Look at this. ${e.name}.`, ev: e.icon })
-  }
-  const sendFree = () => {
-    const txt = input.trim()
-    if (!txt || busy) return
-    setInput('')
-    run({ freeText: txt }, { text: txt })
-  }
-
-  const px = g.mode === 'mobile' ? 8 : 13
-  return (
-    <div class="app__view">
-      <Hud
-        title={s.name}
-        sub={s.role}
-        right={
-          <>
-            <div style={{ width: g.mode === 'mobile' ? 110 : 180 }}><SuspicionBar value={susp} /></div>
-            <Btn sm variant="ghost" onClick={() => g.nav('board')}>Board</Btn>
-          </>
-        }
-      />
-      <div class="interro" style={{ position: 'relative' }}>
-        <div class="interro__stage">
-          <Scene name="interro" w={220} h={380} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />
-          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(55% 45% at 50% 58%, rgba(224,164,76,.12), transparent 72%)' }} />
-          <div class="interro__sprite" style={{ bottom: '7%' }}><Portrait id={sid} px={px} gender={s.gender} talking={talking} /></div>
-          <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 4 }}>
-            <Panel style={{ padding: 8 }}>
-              <span class="t-label">{s.tag}</span>
-              <div class="t-mono dim" style={{ fontSize: 'calc(13px*var(--mono-scale))' }}>ALIBI · {s.alibi}</div>
-            </Panel>
-          </div>
-        </div>
-
-        <div class="interro__right">
-          <div class="transcript" ref={scroller}>
-            {transcript.map((l, i) => (
-              <div key={i} class={'tline tline--' + (l.role === 'det' ? 'det' : 'sus')}>
-                <div class="tline__who">{l.role === 'det' ? 'YOU' : s.name}</div>
-                <div class="tline__b">
-                  {l.ev && (
-                    <span style={{ display: 'inline-block', verticalAlign: 'middle', marginRight: 6, background: 'var(--ink-1)', padding: 2 }}>
-                      <EvIcon icon={l.ev} px={2} />
-                    </span>
-                  )}
-                  {l.text}
-                </div>
-              </div>
-            ))}
-            {thinking && (
-              <div class="tline tline--sus">
-                <div class="tline__who">{s.name}</div>
-                <div class="tline__b"><span class="cursor" /></div>
-              </div>
-            )}
-            {pending && (
-              <div class="tline tline--sus">
-                <div class="tline__who">{s.name}{pending.tag && <span class="ox"> · {pending.tag}</span>}</div>
-                <div class="tline__b"><TypeOnce text={pending.text} speed={pending.speed ?? (g.state.tweaks.typeSpeed || 22)} onDone={commit} /></div>
-              </div>
-            )}
-          </div>
-
-          <div class="composer">
-            <div class="qsuggest">
-              {s.suggestedQuestions.map((q) => (
-                <button key={q.id} class="qchip" disabled={usedQ.includes(q.id) || busy} onClick={() => ask(q)}>
-                  {usedQ.includes(q.id) ? '✓ ' : '? '}
-                  {q.q}
-                </button>
-              ))}
-            </div>
-            <div class="composer__input">
-              <input
-                class="pinput"
-                placeholder="Type your question…"
-                value={input}
-                onInput={(e) => setInput((e.target as HTMLInputElement).value)}
-                onKeyDown={(e) => e.key === 'Enter' && sendFree()}
-              />
-              <Btn variant="amber" sm onClick={sendFree} disabled={busy}>Ask</Btn>
-              <Btn variant="ox" sm onClick={() => setTray(true)} disabled={busy}>Evidence ▴</Btn>
-            </div>
-          </div>
-        </div>
-
-        {tray && (
-          <div class="tray" onClick={() => setTray(false)}>
-            <div class="tray__sheet" onClick={(e) => e.stopPropagation()}>
-              <div class="between" style={{ marginBottom: 12 }}>
-                <span class="t-display amber" style={{ fontSize: 12 }}>PRESENT EVIDENCE</span>
-                <Btn sm variant="ghost" onClick={() => setTray(false)}>✕ Close</Btn>
-              </div>
-              <div class="tray__grid">
-                {c.evidence.map((e) => (
-                  <EvidenceCard key={e.id} e={e} active={usedEv.includes(e.id)} onClick={() => present(e)} />
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
+// Interrogation room — questions, free-text, and present-evidence all go to the server,
+// which returns the suspect's reply + the authoritative suspicion. The client only displays.
+import { useEffect, useRef, useState } from 'preact/hooks'
+
+import { interrogate } from '../api'
+import { useGame } from '../store'
+import type { Evidence, SuggestedQuestion } from '../types'
+import { playSfx, prepareSpeak, stopSpeak } from '../ui/audio'
+import { Btn, EvIcon, EvidenceCard, Hud, Panel, Portrait, Scene, SuspicionBar, TypeOnce } from '../ui/components'
+
+interface Pending {
+  text: string
+  tag?: string | null
+  suspicion: number
+  speed?: number // typewriter ms/char, paced to the voice when one is available
+}
+
+export function Interrogation() {
+  const g = useGame()
+  const c = g.case
+  const sid = (g.state.payload.suspect as string) || c.suspects[0].id
+  const s = c.suspects.find((x) => x.id === sid)!
+  const transcript = g.state.interrogations[sid] || []
+  const susp = g.state.suspicion[sid]
+  const usedQ = g.state.usedQ[sid] || []
+  const usedEv = g.state.usedEv[sid] || []
+  const [pending, setPending] = useState<Pending | null>(null)
+  const [thinking, setThinking] = useState(false)
+  const [talking, setTalking] = useState(false)
+  const [tray, setTray] = useState(false)
+  const [input, setInput] = useState('')
+  const scroller = useRef<HTMLDivElement>(null)
+  const busy = thinking || !!pending
+
+  useEffect(() => () => stopSpeak(), []) // stop any voice when leaving the room
+
+  useEffect(() => {
+    if (!transcript.length) setPending({ text: s.greet, suspicion: susp })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sid])
+  useEffect(() => {
+    if (scroller.current) scroller.current.scrollTop = scroller.current.scrollHeight
+  }, [transcript, pending, thinking])
+
+  const commit = () => {
+    if (!pending) return
+    g.dispatch({ type: 'ADD_LINE', sid, line: { role: 'sus', text: pending.text } })
+    g.dispatch({ type: 'SUSP_SET', sid, value: pending.suspicion })
+    setPending(null)
+  }
+
+  const run = async (body: Parameters<typeof interrogate>[2], detLine: { text: string; ev?: string }) => {
+    if (busy) return
+    stopSpeak()
+    setTalking(false)
+    g.dispatch({ type: 'ADD_LINE', sid, line: { role: 'det', text: detLine.text, ev: detLine.ev } })
+    setThinking(true)
+    const fallback = g.state.tweaks.typeSpeed || 22
+    try {
+      const r = await interrogate(g.runId, sid, body)
+      const tag = r.flags?.rattled ? 'RATTLED' : r.flags?.cornered ? 'CRACKING' : null
+      // Synthesize the voice during the "thinking" beat so text + speech start together.
+      const voice = await prepareSpeak(g.runId, sid, r.reply, () => setTalking(false))
+      // Pace the typewriter to the audio so words land in step with the spoken line.
+      const speed = voice ? Math.max(14, Math.min(90, Math.round(voice.durationMs / Math.max(1, r.reply.length)))) : fallback
+      setThinking(false)
+      setPending({ text: r.reply, suspicion: r.suspicion, tag, speed })
+      if (voice) {
+        setTalking(true)
+        voice.play()
+      }
+    } catch {
+      setThinking(false)
+      setPending({ text: '…I have nothing more to say to that.', suspicion: susp, speed: fallback })
+    }
+  }
+
+  const ask = (q: SuggestedQuestion) => {
+    if (busy) return
+    playSfx('select')
+    g.dispatch({ type: 'USEQ', sid, qid: q.id })
+    run({ questionId: q.id }, { text: q.q })
+  }
+  const present = (e: Evidence) => {
+    setTray(false)
+    if (busy) return
+    playSfx('present')
+    g.dispatch({ type: 'USEEV', sid, ev: e.id })
+    run({ presentEvidenceId: e.id }, { text: `Look at this. ${e.name}.`, ev: e.icon })
+  }
+  const sendFree = () => {
+    const txt = input.trim()
+    if (!txt || busy) return
+    setInput('')
+    run({ freeText: txt }, { text: txt })
+  }
+
+  const px = g.mode === 'mobile' ? 8 : 13
+  return (
+    <div class="app__view">
+      <Hud
+        title={s.name}
+        sub={s.role}
+        right={
+          <>
+            <div style={{ width: g.mode === 'mobile' ? 96 : 180 }}><SuspicionBar value={susp} /></div>
+            <Btn sm variant="ghost" onClick={() => g.nav('board')}>Board</Btn>
+          </>
+        }
+      />
+      <div class="interro" style={{ position: 'relative' }}>
+        <div class="interro__stage">
+          <Scene name="interro" w={220} h={380} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />
+          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(55% 45% at 50% 58%, rgba(224,164,76,.12), transparent 72%)' }} />
+          <div class="interro__sprite" style={{ bottom: '7%' }}><Portrait id={sid} px={px} gender={s.gender} talking={talking} /></div>
+          <div style={{ position: 'absolute', top: 12, left: 12, right: 12, zIndex: 4 }}>
+            <Panel style={{ padding: 8, width: 'fit-content', maxWidth: '100%' }}>
+              <span class="t-label">{s.tag}</span>
+              <div class="t-mono dim" style={{ fontSize: 'calc(13px*var(--mono-scale))' }}>ALIBI · {s.alibi}</div>
+            </Panel>
+          </div>
+        </div>
+
+        <div class="interro__right">
+          <div class="transcript" ref={scroller}>
+            {transcript.map((l, i) => (
+              <div key={i} class={'tline tline--' + (l.role === 'det' ? 'det' : 'sus')}>
+                <div class="tline__who">{l.role === 'det' ? 'YOU' : s.name}</div>
+                <div class="tline__b">
+                  {l.ev && (
+                    <span style={{ display: 'inline-block', verticalAlign: 'middle', marginRight: 6, background: 'var(--ink-1)', padding: 2 }}>
+                      <EvIcon icon={l.ev} px={2} />
+                    </span>
+                  )}
+                  {l.text}
+                </div>
+              </div>
+            ))}
+            {thinking && (
+              <div class="tline tline--sus">
+                <div class="tline__who">{s.name}</div>
+                <div class="tline__b"><span class="cursor" /></div>
+              </div>
+            )}
+            {pending && (
+              <div class="tline tline--sus">
+                <div class="tline__who">{s.name}{pending.tag && <span class="ox"> · {pending.tag}</span>}</div>
+                <div class="tline__b"><TypeOnce text={pending.text} speed={pending.speed ?? (g.state.tweaks.typeSpeed || 22)} onDone={commit} /></div>
+              </div>
+            )}
+          </div>
+
+          <div class="composer">
+            <div class="qsuggest">
+              {s.suggestedQuestions.map((q) => (
+                <button key={q.id} class="qchip" disabled={usedQ.includes(q.id) || busy} onClick={() => ask(q)}>
+                  {usedQ.includes(q.id) ? '✓ ' : '? '}
+                  {q.q}
+                </button>
+              ))}
+            </div>
+            <div class="composer__input">
+              <input
+                class="pinput"
+                placeholder="Type your question…"
+                value={input}
+                onInput={(e) => setInput((e.target as HTMLInputElement).value)}
+                onKeyDown={(e) => e.key === 'Enter' && sendFree()}
+              />
+              <Btn variant="amber" sm onClick={sendFree} disabled={busy}>Ask</Btn>
+              <Btn variant="ox" sm onClick={() => setTray(true)} disabled={busy}>Evidence ▴</Btn>
+            </div>
+          </div>
+        </div>
+
+        {tray && (
+          <div class="tray" onClick={() => setTray(false)}>
+            <div class="tray__sheet" onClick={(e) => e.stopPropagation()}>
+              <div class="between" style={{ marginBottom: 12 }}>
+                <span class="t-display amber" style={{ fontSize: 12 }}>PRESENT EVIDENCE</span>
+                <Btn sm variant="ghost" onClick={() => setTray(false)}>✕ Close</Btn>
+              </div>
+              <div class="tray__grid">
+                {c.evidence.map((e) => (
+                  <EvidenceCard key={e.id} e={e} active={usedEv.includes(e.id)} onClick={() => present(e)} />
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

web/src/screens/suspects.tsx

@@ -0,0 +1,47 @@
+// Persons of interest — the mobile suspects list (own bottom-nav tab). Desktop shows
+// the suspect rail on the board instead, so this screen falls through to the Board there.
+import { useState } from 'preact/hooks'
+
+import { useGame } from '../store'
+import type { Suspect } from '../types'
+import { BottomNav, Btn, Hud, Panel, SuspectCard } from '../ui/components'
+import { Board } from './board'
+
+export function SuspectsScreen() {
+  const g = useGame()
+  const [sel, setSel] = useState<string | null>(null) // before the early return: hook order survives a live resize
+  if (g.mode === 'desktop') return <Board />
+  const c = g.case
+  return (
+    <div class="app__view">
+      <Hud
+        title="PERSONS OF INTEREST"
+        sub={`${c.suspects.length} SUSPECTS · TAP, THEN INTERROGATE`}
+        right={<Btn sm variant="ghost" onClick={() => g.nav('accuse')}>Accuse</Btn>}
+      />
+      <div class="screen-pad">
+        <div class="col" style={{ gap: 10 }}>
+          {c.suspects.map((s: Suspect) => {
+            const open = sel === s.id
+            return (
+              <div key={s.id} onClick={() => setSel(open ? null : s.id)}>
+                <SuspectCard s={s} active={open} />
+                {open && (
+                  <div style={{ marginTop: -2 }}>
+                    <Panel variant="amber" style={{ padding: 10, marginTop: 4 }}>
+                      <div class="t-body" style={{ fontSize: 13, lineHeight: 1.4, marginBottom: 8 }}>{s.alibi}</div>
+                      <Btn variant="ox" className="grow" style={{ width: '100%' }} onClick={(e) => { e.stopPropagation(); g.nav('interro', { suspect: s.id }) }}>
+                        ▸ Interrogate {s.name.split(' ')[0]}
+                      </Btn>
+                    </Panel>
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+      <BottomNav />
+    </div>
+  )
+}

web/src/store.tsx

@@ -1,206 +1,191 @@
-// Game store: reducer, context, responsive mode, and localStorage-backed tweaks.
-// Mirrors the prototype's app.jsx store, but the case comes from the server and
-// suspicion/verdict are server-authoritative (the client only displays them).
-import { createContext } from 'preact'
-import type { ComponentChildren } from 'preact'
-import { useCallback, useContext, useEffect, useReducer, useState } from 'preact/hooks'
-
-import type { PublicCase } from './types'
-
-export type Screen =
-  | 'title' | 'story' | 'briefing' | 'board' | 'interro' | 'evidence'
-  | 'flashback' | 'timeline' | 'notes' | 'accuse' | 'verdict' | 'share' | 'boot'
-
-export interface Line {
-  role: 'det' | 'sus'
-  text: string
-  ev?: string
-}
-
-export interface AccuseState {
-  suspect: string | null
-  motive: string | null
-  evidence: string[]
-}
-
-export interface GameState {
-  screen: Screen
-  payload: Record<string, unknown>
-  suspicion: Record<string, number>
-  interrogations: Record<string, Line[]>
-  usedQ: Record<string, string[]>
-  usedEv: Record<string, string[]>
-  pinned: string[]
-  accuse: AccuseState
-  startedAt: number
-}
-
-type Action =
-  | { type: 'NAV'; screen: Screen; payload?: Record<string, unknown> }
-  | { type: 'SUSP_SET'; sid: string; value: number }
-  | { type: 'ADD_LINE'; sid: string; line: Line }
-  | { type: 'USEQ'; sid: string; qid: string }
-  | { type: 'USEEV'; sid: string; ev: string }
-  | { type: 'PIN'; ev: string }
-  | { type: 'ACCUSE'; field: keyof AccuseState; value: unknown }
-
-function reducer(s: GameState, a: Action): GameState {
-  switch (a.type) {
-    case 'NAV':
-      return { ...s, screen: a.screen, payload: a.payload || {} }
-    case 'SUSP_SET':
-      return { ...s, suspicion: { ...s.suspicion, [a.sid]: Math.max(0, Math.min(100, Math.round(a.value))) } }
-    case 'ADD_LINE':
-      return { ...s, interrogations: { ...s.interrogations, [a.sid]: [...(s.interrogations[a.sid] || []), a.line] } }
-    case 'USEQ':
-      return { ...s, usedQ: { ...s.usedQ, [a.sid]: [...(s.usedQ[a.sid] || []), a.qid] } }
-    case 'USEEV':
-      return { ...s, usedEv: { ...s.usedEv, [a.sid]: [...(s.usedEv[a.sid] || []), a.ev] } }
-    case 'PIN':
-      return { ...s, pinned: s.pinned.includes(a.ev) ? s.pinned : [...s.pinned, a.ev] }
-    case 'ACCUSE':
-      return { ...s, accuse: { ...s.accuse, [a.field]: a.value } }
-    default:
-      return s
-  }
-}
-
-function initialState(c: PublicCase, screen: Screen = 'title'): GameState {
-  const suspicion: Record<string, number> = {}
-  c.suspects.forEach((s) => {
-    suspicion[s.id] = s.baselineSuspicion
-  })
-  return {
-    screen,
-    payload: {},
-    suspicion,
-    interrogations: {},
-    usedQ: {},
-    usedEv: {},
-    pinned: [],
-    accuse: { suspect: null, motive: null, evidence: [] },
-    startedAt: Date.now(),
-  }
-}
-
-// ---- tweaks ----
-export interface Tweaks {
-  palette: 'sodium' | 'harbor' | 'violet'
-  fonts: 'crisp' | 'terminal' | 'stamp'
-  fx: 'low' | 'med' | 'high'
-  mood: 'night' | 'day'
-  pixelScale: number
-  typeSpeed: number
-  rain: boolean
-}
-
-export const TWEAK_DEFAULTS: Tweaks = {
-  palette: 'sodium', fonts: 'crisp', fx: 'med', mood: 'night',
-  pixelScale: 1, typeSpeed: 18, rain: true,
-}
-
-const TWEAK_KEY = 'cz-tweaks'
-
-export function useTweaks(): [Tweaks, <K extends keyof Tweaks>(k: K, v: Tweaks[K]) => void] {
-  const [t, setT] = useState<Tweaks>(() => {
-    try {
-      const raw = localStorage.getItem(TWEAK_KEY)
-      return raw ? { ...TWEAK_DEFAULTS, ...JSON.parse(raw) } : TWEAK_DEFAULTS
-    } catch {
-      return TWEAK_DEFAULTS
-    }
-  })
-  const setTweak = useCallback(<K extends keyof Tweaks>(k: K, v: Tweaks[K]) => {
-    setT((prev) => {
-      const next = { ...prev, [k]: v }
-      try {
-        localStorage.setItem(TWEAK_KEY, JSON.stringify(next))
-      } catch {
-        /* ignore */
-      }
-      return next
-    })
-  }, [])
-  return [t, setTweak]
-}
-
-// ---- responsive mode ----
-export type Device = 'auto' | 'desktop' | 'mobile'
-export function useMode(device: Device): 'desktop' | 'mobile' {
-  const [w, setW] = useState(typeof window !== 'undefined' ? window.innerWidth : 1200)
-  useEffect(() => {
-    const f = () => setW(window.innerWidth)
-    window.addEventListener('resize', f)
-    return () => window.removeEventListener('resize', f)
-  }, [])
-  if (device === 'desktop') return 'desktop'
-  if (device === 'mobile') return 'mobile'
-  return w < 820 ? 'mobile' : 'desktop'
-}
-
-// ---- context ----
-export interface Game {
-  state: GameState & { tweaks: Tweaks }
-  dispatch: (a: Action) => void
-  nav: (screen: Screen, payload?: Record<string, unknown>) => void
-  mode: 'desktop' | 'mobile'
-  runStats: () => [string, string][]
-  case: PublicCase
-  runId: string
-  setTweak: <K extends keyof Tweaks>(k: K, v: Tweaks[K]) => void
-  newCase: () => void // fetch a fresh case from the server and start playing it
-  loadCase: (id: string) => void // load a specific case by ID and jump straight into it
-}
-
-const GameCtx = createContext<Game | null>(null)
-export const useGame = (): Game => useContext(GameCtx)!
-
-interface ProviderProps {
-  case: PublicCase
-  runId: string
-  mode: 'desktop' | 'mobile'
-  tweaks: Tweaks
-  setTweak: <K extends keyof Tweaks>(k: K, v: Tweaks[K]) => void
-  initialScreen?: Screen
-  newCase: () => void
-  loadCase: (id: string) => void
-  children: ComponentChildren
-}
-
-export function GameProvider({ case: c, runId, mode, tweaks, setTweak, initialScreen = 'title', newCase, loadCase, children }: ProviderProps) {
-  const [state, dispatch] = useReducer(reducer, c, (cc) => initialState(cc, initialScreen))
-
-  const nav = useCallback((screen: Screen, payload?: Record<string, unknown>) => {
-    dispatch({ type: 'NAV', screen, payload })
-    const stage = document.querySelector('.app__view')
-    if (stage) stage.scrollTop = 0
-  }, [])
-
-  const runStats = useCallback((): [string, string][] => {
-    const ms = Date.now() - state.startedAt
-    const mm = String(Math.floor(ms / 60000)).padStart(2, '0')
-    const ss = String(Math.floor((ms % 60000) / 1000)).padStart(2, '0')
-    const grilled = Object.values(state.interrogations).filter((x) => x.length > 1).length
-    return [
-      ['TIME', `${mm}:${ss}`],
-      ['GRILLED', `${grilled}/${c.suspects.length}`],
-      ['EXHIBITS', `${state.pinned.length}/${c.evidence.length}`],
-    ]
-  }, [state, c])
-
-  const game: Game = {
-    state: { ...state, tweaks },
-    dispatch,
-    nav,
-    mode,
-    runStats,
-    case: c,
-    runId,
-    setTweak,
-    newCase,
-    loadCase,
-  }
-  window.__game = game
-
-  return <GameCtx.Provider value={game}>{children}</GameCtx.Provider>
-}
+// Game store: reducer, context, responsive mode, and localStorage-backed tweaks.
+// Mirrors the prototype's app.jsx store, but the case comes from the server and
+// suspicion/verdict are server-authoritative (the client only displays them).
+import { createContext } from 'preact'
+import type { ComponentChildren } from 'preact'
+import { useCallback, useContext, useEffect, useReducer, useState } from 'preact/hooks'
+
+import type { PublicCase } from './types'
+
+export type Screen =
+  | 'title' | 'story' | 'briefing' | 'board' | 'suspects' | 'interro' | 'evidence'
+  | 'flashback' | 'timeline' | 'notes' | 'accuse' | 'verdict' | 'share' | 'boot'
+
+export interface Line {
+  role: 'det' | 'sus'
+  text: string
+  ev?: string
+}
+
+export interface AccuseState {
+  suspect: string | null
+  motive: string | null
+  evidence: string[]
+}
+
+export interface GameState {
+  screen: Screen
+  payload: Record<string, unknown>
+  suspicion: Record<string, number>
+  interrogations: Record<string, Line[]>
+  usedQ: Record<string, string[]>
+  usedEv: Record<string, string[]>
+  pinned: string[]
+  accuse: AccuseState
+  startedAt: number
+}
+
+type Action =
+  | { type: 'NAV'; screen: Screen; payload?: Record<string, unknown> }
+  | { type: 'SUSP_SET'; sid: string; value: number }
+  | { type: 'ADD_LINE'; sid: string; line: Line }
+  | { type: 'USEQ'; sid: string; qid: string }
+  | { type: 'USEEV'; sid: string; ev: string }
+  | { type: 'PIN'; ev: string }
+  | { type: 'ACCUSE'; field: keyof AccuseState; value: unknown }
+
+function reducer(s: GameState, a: Action): GameState {
+  switch (a.type) {
+    case 'NAV':
+      return { ...s, screen: a.screen, payload: a.payload || {} }
+    case 'SUSP_SET':
+      return { ...s, suspicion: { ...s.suspicion, [a.sid]: Math.max(0, Math.min(100, Math.round(a.value))) } }
+    case 'ADD_LINE':
+      return { ...s, interrogations: { ...s.interrogations, [a.sid]: [...(s.interrogations[a.sid] || []), a.line] } }
+    case 'USEQ':
+      return { ...s, usedQ: { ...s.usedQ, [a.sid]: [...(s.usedQ[a.sid] || []), a.qid] } }
+    case 'USEEV':
+      return { ...s, usedEv: { ...s.usedEv, [a.sid]: [...(s.usedEv[a.sid] || []), a.ev] } }
+    case 'PIN':
+      return { ...s, pinned: s.pinned.includes(a.ev) ? s.pinned : [...s.pinned, a.ev] }
+    case 'ACCUSE':
+      return { ...s, accuse: { ...s.accuse, [a.field]: a.value } }
+    default:
+      return s
+  }
+}
+
+function initialState(c: PublicCase, screen: Screen = 'title'): GameState {
+  const suspicion: Record<string, number> = {}
+  c.suspects.forEach((s) => {
+    suspicion[s.id] = s.baselineSuspicion
+  })
+  return {
+    screen,
+    payload: {},
+    suspicion,
+    interrogations: {},
+    usedQ: {},
+    usedEv: {},
+    pinned: [],
+    accuse: { suspect: null, motive: null, evidence: [] },
+    startedAt: Date.now(),
+  }
+}
+
+// ---- tweaks ----
+export interface Tweaks {
+  palette: 'sodium' | 'harbor' | 'violet'
+  fonts: 'crisp' | 'terminal' | 'stamp'
+  fx: 'low' | 'med' | 'high'
+  mood: 'night' | 'day'
+  pixelScale: number
+  typeSpeed: number
+  rain: boolean
+}
+
+export const TWEAK_DEFAULTS: Tweaks = {
+  palette: 'sodium', fonts: 'crisp', fx: 'med', mood: 'night',
+  pixelScale: 1, typeSpeed: 18, rain: true,
+}
+
+// In-memory only: the tweaks sheet UI is gone, so persisted values would be
+// unrevertable. Defaults are deterministic; setTweak stays as a debug hook.
+export function useTweaks(): [Tweaks, <K extends keyof Tweaks>(k: K, v: Tweaks[K]) => void] {
+  const [t, setT] = useState<Tweaks>(TWEAK_DEFAULTS)
+  const setTweak = useCallback(<K extends keyof Tweaks>(k: K, v: Tweaks[K]) => {
+    setT((prev) => ({ ...prev, [k]: v }))
+  }, [])
+  return [t, setTweak]
+}
+
+// ---- responsive mode ----
+export type Device = 'auto' | 'desktop' | 'mobile'
+export function useMode(device: Device): 'desktop' | 'mobile' {
+  const [w, setW] = useState(typeof window !== 'undefined' ? window.innerWidth : 1200)
+  useEffect(() => {
+    const f = () => setW(window.innerWidth)
+    window.addEventListener('resize', f)
+    return () => window.removeEventListener('resize', f)
+  }, [])
+  if (device === 'desktop') return 'desktop'
+  if (device === 'mobile') return 'mobile'
+  return w < 820 ? 'mobile' : 'desktop'
+}
+
+// ---- context ----
+export interface Game {
+  state: GameState & { tweaks: Tweaks }
+  dispatch: (a: Action) => void
+  nav: (screen: Screen, payload?: Record<string, unknown>) => void
+  mode: 'desktop' | 'mobile'
+  runStats: () => [string, string][]
+  case: PublicCase
+  runId: string
+  setTweak: <K extends keyof Tweaks>(k: K, v: Tweaks[K]) => void
+  newCase: () => void // fetch a fresh case from the server and start playing it
+  loadCase: (id: string) => void // load a specific case by ID and jump straight into it
+}
+
+const GameCtx = createContext<Game | null>(null)
+export const useGame = (): Game => useContext(GameCtx)!
+
+interface ProviderProps {
+  case: PublicCase
+  runId: string
+  mode: 'desktop' | 'mobile'
+  tweaks: Tweaks
+  setTweak: <K extends keyof Tweaks>(k: K, v: Tweaks[K]) => void
+  initialScreen?: Screen
+  newCase: () => void
+  loadCase: (id: string) => void
+  children: ComponentChildren
+}
+
+export function GameProvider({ case: c, runId, mode, tweaks, setTweak, initialScreen = 'title', newCase, loadCase, children }: ProviderProps) {
+  const [state, dispatch] = useReducer(reducer, c, (cc) => initialState(cc, initialScreen))
+
+  const nav = useCallback((screen: Screen, payload?: Record<string, unknown>) => {
+    dispatch({ type: 'NAV', screen, payload })
+    const stage = document.querySelector('.app__view')
+    if (stage) stage.scrollTop = 0
+  }, [])
+
+  const runStats = useCallback((): [string, string][] => {
+    const ms = Date.now() - state.startedAt
+    const mm = String(Math.floor(ms / 60000)).padStart(2, '0')
+    const ss = String(Math.floor((ms % 60000) / 1000)).padStart(2, '0')
+    const grilled = Object.values(state.interrogations).filter((x) => x.length > 1).length
+    return [
+      ['TIME', `${mm}:${ss}`],
+      ['GRILLED', `${grilled}/${c.suspects.length}`],
+      ['EXHIBITS', `${state.pinned.length}/${c.evidence.length}`],
+    ]
+  }, [state, c])
+
+  const game: Game = {
+    state: { ...state, tweaks },
+    dispatch,
+    nav,
+    mode,
+    runStats,
+    case: c,
+    runId,
+    setTweak,
+    newCase,
+    loadCase,
+  }
+  window.__game = game
+
+  return <GameCtx.Provider value={game}>{children}</GameCtx.Provider>
+}

web/src/styles/layout.css

@@ -1,307 +1,358 @@
-/* ============================================================
-   LAYOUT & SCREEN CHROME  (ported from prototype/css/layout.css)
-   ============================================================ */
-
-.app{ position:fixed; inset:0; display:flex; flex-direction:column; background:var(--ink-0); }
-.app__view{ position:absolute; inset:0; display:flex; flex-direction:column; flex:1; min-height:0; }
-
-/* device simulation: mobile = centered phone column */
-.app[data-mode="mobile"] .app__frame{
-  width:min(430px,100vw); height:min(932px,100vh); margin:auto;
-  position:relative; box-shadow:0 0 0 6px var(--ink-2), 0 0 0 9px var(--ink-0), 0 0 60px -10px #000;
-  overflow:hidden; display:flex; flex-direction:column;
-}
-.app[data-mode="mobile"] .app__stage{ background:var(--ink-1); }
-.app[data-mode="desktop"] .app__frame{ position:absolute; inset:0; display:flex; flex-direction:column; }
-.app__stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
-
-/* ---------- view toggle (top, outside content) ---------- */
-.viewbar{
-  position:fixed; top:10px; right:14px; z-index:80;
-  display:flex; gap:6px; align-items:center;
-}
-.viewbar .seg{ display:flex; box-shadow:0 0 0 3px var(--ink-0); }
-.viewbar .seg button{
-  font-family:var(--f-display); font-size:8px; letter-spacing:.08em;
-  padding:6px 9px; background:var(--ink-2); color:var(--bone-1); border:0;
-}
-.viewbar .seg button.on{ background:var(--amber-2); color:var(--ink-0); }
-
-/* ============================================================
-   HUD (top chrome of in-game screens)
-   ============================================================ */
-.hud{
-  display:flex; align-items:center; justify-content:space-between; gap:12px;
-  padding:10px 14px; background:var(--ink-2);
-  box-shadow:inset 0 -3px 0 var(--ink-0), 0 3px 0 var(--ink-0);
-  z-index:20; flex-shrink:0;
-}
-.hud-badge{
-  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
-  background:var(--amber-2); border:0; padding:5px 9px; line-height:1.1; flex-shrink:0;
-  box-shadow:2px 2px 0 var(--ink-0), inset -2px -2px 0 rgba(0,0,0,.25);
-}
-.hud-badge span{ white-space:nowrap; }
-.hud-badge:hover{ background:var(--amber-3); }
-/* Title clamps to one line with an ellipsis on desktop (plenty of width there). */
-.hud__title{
-  font-size:12px; color:var(--bone-3); line-height:1.15;
-  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
-}
-/* On narrow screens, wrap to two lines at a smaller size instead of cropping mid-word. */
-[data-mode="mobile"] .hud__title{
-  font-size:10px; white-space:normal; overflow:hidden;
-  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
-}
-
-/* ============================================================
-   BOTTOM NAV (mobile)
-   ============================================================ */
-.bottom-nav{ display:none; }
-[data-mode="mobile"] .bottom-nav{
-  display:flex; justify-content:space-around; align-items:center;
-  background:var(--ink-2); box-shadow:inset 0 3px 0 var(--ink-0);
-  padding:7px 4px 9px; flex-shrink:0; z-index:20;
-}
-.nav-btn{
-  display:flex; flex-direction:column; align-items:center; gap:4px;
-  background:transparent; border:0; color:var(--bone-1); padding:4px 8px; min-width:56px; min-height:44px;
-  position:relative;
-}
-.nav-btn--on{ color:var(--ink-0); }
-.nav-btn--on::before{
-  content:''; position:absolute; margin-top:-9px; width:34px; height:34px;
-  background:var(--amber-2); z-index:-1; box-shadow:0 0 0 2px var(--ink-0);
-}
-
-/* ============================================================
-   "DEVELOPS IN" reveal — scanline/dither wipe
-   ============================================================ */
-.develop-veil{ position:absolute; inset:0; background:var(--ink-1); z-index:3;
-  background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 2px, transparent 2px 4px); }
-.develop-veil--anim{ animation:develop .7s steps(10) forwards; }
-@keyframes develop{
-  0%{ clip-path:inset(0 0 0 0); opacity:1; }
-  99%{ clip-path:inset(0 0 100% 0); opacity:1; }
-  100%{ clip-path:inset(0 0 100% 0); opacity:0; }
-}
-
-/* ============================================================
-   DOSSIER — physical case file you flip through
-   ============================================================ */
-.dossier-stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:20px; perspective:2200px; overflow:hidden; }
-.dossier{ width:min(820px,96vw); max-height:100%; display:flex; flex-direction:column; gap:14px; }
-.dossier__folder{
-  position:relative; background:linear-gradient(160deg,#2a2417,#1c1810);
-  box-shadow:0 0 0 3px var(--ink-0), 0 18px 40px -12px #000, inset 0 2px 0 rgba(224,164,76,.12);
-  padding:14px;
-}
-.dossier__folder::before{
-  content:''; position:absolute; top:-14px; left:30px; width:120px; height:16px;
-  background:linear-gradient(160deg,#2a2417,#1c1810); box-shadow:0 0 0 3px var(--ink-0);
-  clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
-}
-.page-wrap{ position:relative; height:min(560px,68vh); transform-style:preserve-3d; }
-.page{
-  position:absolute; inset:0; background:#e7e0cc; color:#211d15;
-  padding:26px 30px; overflow:auto;
-  box-shadow:inset 0 0 0 1px #b9b09433, 0 4px 0 rgba(0,0,0,.35), 6px 8px 18px -6px rgba(0,0,0,.5);
-  background-image:repeating-linear-gradient(0deg, transparent 0 27px, rgba(33,29,21,.06) 27px 28px);
-  font-family:var(--f-mono);
-}
-.page--paper2{ background:#ece6d4; }
-.page--flip-fwd{ animation:flipFwd .46s cubic-bezier(.2,.6,.2,1) both; transform-origin:left center; }
-.page--flip-back{ animation:flipBack .46s cubic-bezier(.2,.6,.2,1) both; transform-origin:right center; }
-@keyframes flipFwd{ from{ transform:rotateY(82deg); opacity:.2; } to{ transform:rotateY(0); opacity:1; } }
-@keyframes flipBack{ from{ transform:rotateY(-82deg); opacity:.2; } to{ transform:rotateY(0); opacity:1; } }
-.page__edge{ position:absolute; top:0; bottom:0; width:34px; cursor:pointer; z-index:5; }
-.page__edge--r{ right:0; background:linear-gradient(270deg, rgba(0,0,0,.14), transparent); }
-.page__edge--l{ left:0; background:linear-gradient(90deg, rgba(0,0,0,.14), transparent); }
-.page__edge:hover{ filter:brightness(1.1); }
-.page__curl{ position:absolute; bottom:0; right:0; width:0; height:0;
-  border-style:solid; border-width:0 0 26px 26px; border-color:transparent transparent #cfc6ad transparent;
-  box-shadow:-2px -2px 4px rgba(0,0,0,.2); pointer-events:none; }
-.dh{ font-family:var(--f-display); text-transform:uppercase; color:#1a1610; letter-spacing:.02em; }
-.dlabel{ font-family:var(--f-display); font-size:8px; letter-spacing:.18em; color:#8a3a2c; text-transform:uppercase; }
-.dtype{ font-family:var(--f-mono); font-size:calc(17px*var(--mono-scale)); line-height:1.55; color:#2a251b; }
-.dstamp{ font-family:var(--f-display); text-transform:uppercase; color:#8a2a2a;
-  border:3px solid #8a2a2a; padding:5px 10px; letter-spacing:.05em; transform:rotate(-7deg);
-  opacity:.82; box-shadow:0 0 0 1px #8a2a2a33; display:inline-block; }
-.paperclip{ position:absolute; top:-8px; left:18px; width:14px; height:34px;
-  border:3px solid #9aa0a6; border-radius:8px; border-bottom-color:transparent; transform:rotate(8deg); }
-.photo-paper{ background:#fff; padding:6px 6px 22px; box-shadow:3px 5px 0 rgba(0,0,0,.3); transform:rotate(-2deg); position:relative; }
-.dossier__nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
-.page-dots{ display:flex; gap:6px; }
-.page-dot{ width:24px; height:6px; background:#3a3324; box-shadow:inset 0 0 0 1px var(--ink-0); cursor:pointer; }
-.page-dot--on{ background:var(--amber-2); }
-[data-mode="mobile"] .page{ padding:20px 18px; }
-[data-mode="mobile"] .page-wrap{ height:62vh; }
-/* let the dossier nav wrap so long labels ("Open the Wall") never crop on narrow phones */
-[data-mode="mobile"] .dossier__nav{ flex-wrap:wrap; row-gap:8px; justify-content:center; }
-[data-mode="mobile"] .dossier__nav .pbtn{ flex-shrink:0; }
-
-/* ============================================================
-   ASSISTANT — partner-on-the-wire hint dock
-   ============================================================ */
-.assistant{ position:fixed; left:14px; bottom:14px; z-index:70; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
-[data-mode="mobile"] .assistant{ bottom:78px; left:10px; right:10px; }
-.assistant__panel{
-  width:min(330px,92vw); background:var(--ink-2); padding:12px;
-  box-shadow:0 0 0 3px var(--ink-0), inset 0 0 0 2px var(--amber-1), 0 0 26px -8px var(--glow);
-  animation:slideup .2s steps(5);
-}
-.assistant__x{ background:transparent; border:0; color:var(--bone-1); font-family:var(--f-mono); font-size:16px; line-height:1; padding:2px 4px; }
-.assistant__x:hover{ color:var(--ox-3); }
-
-.hint-btn{
-  display:inline-flex; align-items:center; gap:6px;
-  font-family:var(--f-display); font-size:9px; letter-spacing:.1em;
-  color:var(--ink-0); background:var(--amber-2); border:0; padding:8px 11px;
-  box-shadow:2px 2px 0 var(--ink-0), inset -2px -2px 0 rgba(0,0,0,.25);
-}
-.hint-btn:hover{ background:var(--amber-3); }
-.hint-btn__dot{ width:6px; height:6px; background:var(--ink-0); animation:blink 1.3s steps(1) infinite; }
-
-/* ============================================================
-   INVESTIGATION BOARD — corkboard
-   ============================================================ */
-.board{ position:relative; flex:1; overflow:hidden;
-  background:
-    radial-gradient(rgba(0,0,0,.22) 1px, transparent 1px),
-    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
-    repeating-linear-gradient(26deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px),
-    linear-gradient(160deg, #5a4326, #3a2c18 55%, #2a2012);
-  background-size:5px 5px, 7px 7px, 9px 9px, 100% 100%;
-  background-position:0 0, 3px 4px, 0 0, 0 0;
-}
-.board__felt{ position:absolute; inset:0; pointer-events:none;
-  background:
-    radial-gradient(70% 50% at 50% 0%, rgba(245,208,138,.16), transparent 60%),
-    radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0,0,0,.5) 100%);
-}
-.board__frame{ position:absolute; inset:6px; pointer-events:none; z-index:9;
-  box-shadow:inset 0 0 0 5px #241a0e, inset 0 0 0 8px #120d07, inset 0 0 40px 6px rgba(0,0,0,.5); }
-
-.wall-item{ position:absolute; z-index:2; }
-.pushpin{ position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:11px; height:11px; z-index:3;
-  background:var(--amber-2); box-shadow:0 0 0 2px var(--ink-0), inset -2px -2px 0 var(--amber-1); }
-.pushpin--ox{ background:var(--ox-3); box-shadow:0 0 0 2px var(--ink-0), inset -2px -2px 0 var(--ox-1); }
-.pushpin--bone{ background:var(--bone-2); box-shadow:0 0 0 2px var(--ink-0), inset -2px -2px 0 var(--bone-1); }
-.wall-photo{ background:#efe9d6; padding:6px 6px 16px; box-shadow:4px 6px 0 rgba(0,0,0,.45); }
-.wall-clip{ background:#e3ddc8; color:#231f16; padding:9px 11px; box-shadow:4px 6px 0 rgba(0,0,0,.45);
-  background-image:repeating-linear-gradient(0deg, transparent 0 9px, rgba(0,0,0,.05) 9px 10px); }
-.wall-note{ background:var(--amber-2); color:#2a1f0c; padding:11px 12px; box-shadow:4px 6px 0 rgba(0,0,0,.4);
-  font-family:var(--f-body); }
-.wall-note--bone{ background:#e7e0cc; color:#231f16; }
-.wall-redact{ background:#1a1610; padding:10px; box-shadow:4px 6px 0 rgba(0,0,0,.45); }
-.wall-redact .bar-blk{ height:7px; background:#0a0805; margin:4px 0; }
-.scrawl{ font-family:var(--f-body); line-height:1.2; }
-.pin-card{ position:absolute; cursor:default; user-select:none; z-index:4; transition:transform .05s; }
-.pin-card .pin{
-  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
-  width:12px; height:12px; background:var(--ox-3); z-index:6; cursor:grab;
-  box-shadow:0 0 0 2px var(--ink-0), inset -2px -2px 0 var(--ox-1);
-}
-.pin-card .pin:active{ cursor:grabbing; }
-.card-grip{ display:flex; align-items:center; justify-content:space-between; gap:6px;
-  background:var(--ink-3); color:var(--bone-1); padding:2px 6px; cursor:grab;
-  box-shadow:inset 0 0 0 2px var(--ink-0); }
-.card-grip:active{ cursor:grabbing; background:var(--slate-1); }
-.card-grip__dots{ font-size:11px; line-height:1; letter-spacing:-1px; color:var(--amber-2); }
-.card-grip__lbl{ font-family:var(--f-display); font-size:7px; letter-spacing:.12em; }
-.card-actions{ margin-top:6px; display:flex; justify-content:center; }
-.pin-card--sel{ filter:drop-shadow(0 0 14px rgba(224,164,76,.35)); }
-.pin-note{ background:var(--bone-2); color:var(--ink-1); padding:8px 10px;
-  box-shadow:3px 4px 0 rgba(0,0,0,.4); font-family:var(--f-body); }
-.board__filters{ position:absolute; top:12px; left:12px; z-index:8; display:flex; gap:6px; flex-wrap:wrap; }
-
-.board-layout{ flex:1; display:flex; min-height:0; }
-.board-layout .board{ flex:1; }
-.suspect-rail{ width:316px; flex-shrink:0; background:var(--ink-2); box-shadow:inset 4px 0 0 var(--ink-0);
-  display:flex; flex-direction:column; min-height:0; }
-.suspect-rail__head{ padding:14px 14px 10px; box-shadow:inset 0 -3px 0 var(--ink-0); }
-.suspect-rail__list{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
-.rail-card{ cursor:pointer; }
-.rail-card__reveal{ overflow:hidden; max-height:0; transition:max-height .25s steps(6); }
-.rail-card__reveal--open{ max-height:200px; }
-
-/* ============================================================
-   INTERROGATION
-   ============================================================ */
-.interro{ flex:1; display:grid; grid-template-columns:minmax(300px,440px) 1fr; gap:0; overflow:hidden; }
-.interro__stage{ position:relative; overflow:hidden; background:var(--ink-0); display:flex; flex-direction:column; }
-.interro__sprite{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); z-index:2; }
-.interro__right{ display:flex; flex-direction:column; min-width:0; background:var(--ink-1);
-  box-shadow:inset 4px 0 0 var(--ink-0); }
-.transcript{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
-.tline{ max-width:88%; }
-.tline--det{ align-self:flex-end; }
-.tline--det .tline__b{ background:var(--slate-1); color:var(--bone-3); box-shadow:inset -2px -2px 0 rgba(0,0,0,.4); }
-.tline--sus .tline__b{ background:var(--ink-3); color:var(--bone-2); box-shadow:inset 0 0 0 2px var(--ink-0); }
-.tline__b{ padding:10px 12px; font-family:var(--f-body); font-size:15px; line-height:1.45; }
-.tline__who{ font-family:var(--f-display); font-size:8px; letter-spacing:.1em; color:var(--bone-1); margin-bottom:4px; }
-.tline--det .tline__who{ text-align:right; color:var(--amber-2); }
-.composer{ flex-shrink:0; padding:12px; background:var(--ink-2); box-shadow:inset 0 3px 0 var(--ink-0); }
-.qsuggest{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
-.qchip{ font-family:var(--f-body); font-size:13px; line-height:1.25; padding:7px 10px; background:var(--ink-1);
-  color:var(--bone-2); border:0; box-shadow:inset 0 0 0 2px var(--slate-1); text-align:left; flex:1 1 auto; min-width:0; }
-.qchip:hover{ box-shadow:inset 0 0 0 2px var(--amber-2); color:var(--bone-3); }
-.qchip:disabled{ opacity:.35; }
-.composer__input{ display:flex; gap:8px; }
-.pinput{ flex:1; background:var(--ink-1); border:0; color:var(--bone-3); padding:11px 12px;
-  font-size:15px; box-shadow:inset 0 0 0 2px var(--ink-0), inset 2px 2px 0 rgba(0,0,0,.4); outline:none; }
-.pinput::placeholder{ color:var(--bone-1); }
-.pinput:focus{ box-shadow:inset 0 0 0 2px var(--amber-1); }
-
-.tray{ position:absolute; inset:0; z-index:30; background:rgba(8,11,16,.82);
-  display:flex; flex-direction:column; justify-content:flex-end; }
-.tray__sheet{ background:var(--ink-2); box-shadow:0 -4px 0 var(--ink-0), inset 0 4px 0 var(--amber-1);
-  padding:16px; max-height:70%; overflow-y:auto; animation:slideup .25s steps(6); }
-@keyframes slideup{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
-.tray__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
-
-/* ============================================================
-   GENERIC SCREEN SCAFFOLD
-   ============================================================ */
-.screen-pad{ flex:1; overflow-y:auto; padding:22px; }
-.screen-center{ flex:1; display:flex; align-items:center; justify-content:center; padding:22px; overflow-y:auto; }
-.maxw{ width:100%; max-width:1180px; margin:0 auto; }
-.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
-.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
-.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
-
-/* ============================================================
-   TIMELINE
-   ============================================================ */
-.tl-track{ position:relative; padding:30px 10px; }
-.tl-line{ position:absolute; left:0; right:0; top:50%; height:4px;
-  background:repeating-linear-gradient(90deg,var(--slate-1) 0 6px, transparent 6px 12px); }
-.tl-stop{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; }
-.tl-node{ width:14px; height:14px; background:var(--slate-2); box-shadow:0 0 0 3px var(--ink-0); }
-.tl-node--lock{ background:var(--amber-2); }
-.tl-node--conflict{ background:var(--ox-3); }
-.tl-slot{ min-height:62px; }
-
-/* ============================================================
-   FLASHBACK compare
-   ============================================================ */
-.flash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
-.flash-flag{ box-shadow:inset 0 0 0 2px var(--ox-2); }
-
-/* ============================================================
-   RESPONSIVE
-   ============================================================ */
-[data-mode="mobile"] .interro{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
-[data-mode="mobile"] .interro__stage{ height:32vh; min-height:200px; }
-[data-mode="mobile"] .grid-2,[data-mode="mobile"] .grid-3,[data-mode="mobile"] .grid-4,[data-mode="mobile"] .flash-grid{ grid-template-columns:1fr; }
-[data-mode="mobile"] .screen-pad{ padding:14px; }
-[data-mode="mobile"] .hud{ padding:9px 11px; }
-
-@media (max-width:760px){
-  .app[data-mode="auto"] .interro{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
-  .app[data-mode="auto"] .grid-2,.app[data-mode="auto"] .grid-3,.app[data-mode="auto"] .grid-4{ grid-template-columns:1fr; }
-  .app[data-mode="auto"] .hud__title{
-    font-size:10px; white-space:normal; overflow:hidden;
-    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
-  }
-}
+/* ============================================================
+   LAYOUT & SCREEN CHROME  (ported from prototype/css/layout.css)
+   ============================================================ */
+
+.app{ position:fixed; inset:0; display:flex; flex-direction:column; background:var(--ink-0); }
+.app__view{ position:absolute; inset:0; display:flex; flex-direction:column; flex:1; min-height:0; }
+
+/* device simulation: mobile = centered phone column */
+.app[data-mode="mobile"] .app__frame{
+  width:min(430px,100vw); height:min(932px,100vh); margin:auto;
+  position:relative; box-shadow:0 0 0 6px var(--ink-2), 0 0 0 9px var(--ink-0), 0 0 60px -10px #000;
+  overflow:hidden; display:flex; flex-direction:column;
+}
+.app[data-mode="mobile"] .app__stage{ background:var(--ink-1); }
+.app[data-mode="desktop"] .app__frame{ position:absolute; inset:0; display:flex; flex-direction:column; }
+.app__stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
+
+/* ---------- view toggle (top, outside content) ---------- */
+.viewbar{
+  position:fixed; top:10px; right:14px; z-index:80;
+  display:flex; gap:6px; align-items:center;
+}
+.viewbar .seg{ display:flex; box-shadow:0 0 0 3px var(--ink-0); }
+.viewbar .seg button{
+  font-family:var(--f-display); font-size:8px; letter-spacing:.08em;
+  padding:6px 9px; background:var(--ink-2); color:var(--bone-1); border:0;
+}
+.viewbar .seg button.on{ background:var(--amber-2); color:var(--ink-0); }
+
+/* ============================================================
+   HUD (top chrome of in-game screens)
+   ============================================================ */
+.hud{
+  display:flex; align-items:center; justify-content:space-between; gap:12px;
+  padding:10px 14px; background:var(--ink-2);
+  box-shadow:inset 0 -3px 0 var(--ink-0), 0 3px 0 var(--ink-0);
+  z-index:20; flex-shrink:0;
+}
+/* Left cluster shrinks (title ellipsizes / clamps); right cluster never shrinks, so
+   buttons can't slide over the badge or title. On phones the right cluster wraps to
+   its own row instead of overlapping. */
+.hud__left{ display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; }
+.hud__right{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
+.hud__sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+[data-mode="mobile"] .hud{ flex-wrap:wrap; row-gap:7px; padding:8px 10px; }
+[data-mode="mobile"] .hud__right{
+  margin-left:auto; max-width:100%; flex-wrap:wrap; justify-content:flex-end; row-gap:6px;
+}
+.hud-badge{
+  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
+  background:var(--amber-2); border:0; padding:5px 9px; line-height:1.1; flex-shrink:0;
+  box-shadow:2px 2px 0 var(--ink-0), inset -2px -2px 0 rgba(0,0,0,.25);
+}
+.hud-badge span{ white-space:nowrap; }
+.hud-badge:hover{ background:var(--amber-3); }
+/* Title clamps to one line with an ellipsis on desktop (plenty of width there). */
+.hud__title{
+  font-size:12px; color:var(--bone-3); line-height:1.15;
+  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
+}
+/* On narrow screens, wrap to two lines at a smaller size instead of cropping mid-word. */
+[data-mode="mobile"] .hud__title{
+  font-size:10px; white-space:normal; overflow:hidden;
+  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
+}
+
+/* ============================================================
+   BOTTOM NAV (mobile)
+   ============================================================ */
+.bottom-nav{ display:none; }
+[data-mode="mobile"] .bottom-nav{
+  display:flex; align-items:stretch;
+  background:var(--ink-2); box-shadow:inset 0 3px 0 var(--ink-0);
+  padding:6px 4px 8px; flex-shrink:0; z-index:20;
+}
+.nav-btn{
+  flex:1 1 0; min-width:0; min-height:48px;
+  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
+  background:transparent; border:0; color:var(--bone-1); padding:3px 2px; position:relative;
+}
+.nav-btn__glyph{ width:30px; height:24px; display:flex; align-items:center; justify-content:center; }
+.nav-btn--on .nav-btn__glyph{
+  background:var(--amber-2);
+  box-shadow:0 0 0 2px var(--ink-0), 2px 2px 0 var(--ink-0);
+}
+.nav-btn__lbl{ font-size:9px; letter-spacing:.04em; white-space:nowrap; }
+.nav-btn--on .nav-btn__lbl{ color:var(--amber-2); }
+@media (max-width:359px){ .nav-btn__lbl{ font-size:8px; letter-spacing:.02em; } }
+
+/* ============================================================
+   "DEVELOPS IN" reveal — scanline/dither wipe
+   ============================================================ */
+.develop-veil{ position:absolute; inset:0; background:var(--ink-1); z-index:3;
+  background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 2px, transparent 2px 4px); }
+.develop-veil--anim{ animation:develop .7s steps(10) forwards; }
+@keyframes develop{
+  0%{ clip-path:inset(0 0 0 0); opacity:1; }
+  99%{ clip-path:inset(0 0 100% 0); opacity:1; }
+  100%{ clip-path:inset(0 0 100% 0); opacity:0; }
+}
+
+/* ============================================================
+   DOSSIER — physical case file you flip through
+   ============================================================ */
+.dossier-stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:20px; perspective:2200px; overflow:hidden; }
+.dossier{ width:min(820px,96vw); max-height:100%; display:flex; flex-direction:column; gap:14px; }
+.dossier__folder{
+  position:relative; background:linear-gradient(160deg,#2a2417,#1c1810);
+  box-shadow:0 0 0 3px var(--ink-0), 0 18px 40px -12px #000, inset 0 2px 0 rgba(224,164,76,.12);
+  padding:14px;
+}
+.dossier__folder::before{
+  content:''; position:absolute; top:-14px; left:30px; width:120px; height:16px;
+  background:linear-gradient(160deg,#2a2417,#1c1810); box-shadow:0 0 0 3px var(--ink-0);
+  clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
+}
+.page-wrap{ position:relative; height:min(560px,68vh); transform-style:preserve-3d; }
+.page{
+  position:absolute; inset:0; background:#e7e0cc; color:#211d15;
+  padding:26px 30px; overflow:auto;
+  box-shadow:inset 0 0 0 1px #b9b09433, 0 4px 0 rgba(0,0,0,.35), 6px 8px 18px -6px rgba(0,0,0,.5);
+  background-image:repeating-linear-gradient(0deg, transparent 0 27px, rgba(33,29,21,.06) 27px 28px);
+  font-family:var(--f-mono);
+}
+.page--paper2{ background:#ece6d4; }
+.page--flip-fwd{ animation:flipFwd .46s cubic-bezier(.2,.6,.2,1) both; transform-origin:left center; }
+.page--flip-back{ animation:flipBack .46s cubic-bezier(.2,.6,.2,1) both; transform-origin:right center; }
+@keyframes flipFwd{ from{ transform:rotateY(82deg); opacity:.2; } to{ transform:rotateY(0); opacity:1; } }
+@keyframes flipBack{ from{ transform:rotateY(-82deg); opacity:.2; } to{ transform:rotateY(0); opacity:1; } }
+.page__edge{ position:absolute; top:0; bottom:0; width:34px; cursor:pointer; z-index:5; }
+.page__edge--r{ right:0; background:linear-gradient(270deg, rgba(0,0,0,.14), transparent); }
+.page__edge--l{ left:0; background:linear-gradient(90deg, rgba(0,0,0,.14), transparent); }
+.page__edge:hover{ filter:brightness(1.1); }
+.page__curl{ position:absolute; bottom:0; right:0; width:0; height:0;
+  border-style:solid; border-width:0 0 26px 26px; border-color:transparent transparent #cfc6ad transparent;
+  box-shadow:-2px -2px 4px rgba(0,0,0,.2); pointer-events:none; }
+.dh{ font-family:var(--f-display); text-transform:uppercase; color:#1a1610; letter-spacing:.02em; }
+.dlabel{ font-family:var(--f-display); font-size:8px; letter-spacing:.18em; color:#8a3a2c; text-transform:uppercase; }
+.dtype{ font-family:var(--f-mono); font-size:calc(17px*var(--mono-scale)); line-height:1.55; color:#2a251b; }
+.dstamp{ font-family:var(--f-display); text-transform:uppercase; color:#8a2a2a;
+  border:3px solid #8a2a2a; padding:5px 10px; letter-spacing:.05em; transform:rotate(-7deg);
+  opacity:.82; box-shadow:0 0 0 1px #8a2a2a33; display:inline-block; }
+.paperclip{ position:absolute; top:-8px; left:18px; width:14px; height:34px;
+  border:3px solid #9aa0a6; border-radius:8px; border-bottom-color:transparent; transform:rotate(8deg); }
+.photo-paper{ background:#fff; padding:6px 6px 22px; box-shadow:3px 5px 0 rgba(0,0,0,.3); transform:rotate(-2deg); position:relative; }
+.dossier__nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
+.page-dots{ display:flex; gap:6px; }
+.page-dot{ width:24px; height:6px; background:#3a3324; box-shadow:inset 0 0 0 1px var(--ink-0); cursor:pointer; }
+.page-dot--on{ background:var(--amber-2); }
+[data-mode="mobile"] .page{ padding:20px 18px; }
+[data-mode="mobile"] .page-wrap{ height:62vh; }
+/* let the dossier nav wrap so long labels ("Open the Wall") never crop on narrow phones */
+[data-mode="mobile"] .dossier__nav{ flex-wrap:wrap; row-gap:8px; justify-content:center; }
+[data-mode="mobile"] .dossier__nav .pbtn{ flex-shrink:0; }
+
+/* ============================================================
+   ASSISTANT — partner-on-the-wire hint dock
+   ============================================================ */
+.assistant{ position:fixed; left:14px; bottom:14px; z-index:70; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
+[data-mode="mobile"] .assistant{ bottom:78px; left:10px; right:10px; }
+.assistant__panel{
+  width:min(330px,92vw); background:var(--ink-2); padding:12px;
+  box-shadow:0 0 0 3px var(--ink-0), inset 0 0 0 2px var(--amber-1), 0 0 26px -8px var(--glow);
+  animation:slideup .2s steps(5);
+}
+.assistant__x{ background:transparent; border:0; color:var(--bone-1); font-family:var(--f-mono); font-size:16px; line-height:1; padding:2px 4px; }
+.assistant__x:hover{ color:var(--ox-3); }
+
+.hint-btn{
+  display:inline-flex; align-items:center; gap:6px;
+  font-family:var(--f-display); font-size:9px; letter-spacing:.1em;
+  color:var(--ink-0); background:var(--amber-2); border:0; padding:8px 11px;
+  box-shadow:2px 2px 0 var(--ink-0), inset -2px -2px 0 rgba(0,0,0,.25);
+}
+.hint-btn:hover{ background:var(--amber-3); }
+.hint-btn__dot{ width:6px; height:6px; background:var(--ink-0); animation:blink 1.3s steps(1) infinite; }
+
+/* ============================================================
+   INVESTIGATION BOARD — corkboard
+   ============================================================ */
+.board{ position:relative; flex:1; overflow:hidden;
+  background:
+    radial-gradient(rgba(0,0,0,.22) 1px, transparent 1px),
+    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
+    repeating-linear-gradient(26deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px),
+    linear-gradient(160deg, #5a4326, #3a2c18 55%, #2a2012);
+  background-size:5px 5px, 7px 7px, 9px 9px, 100% 100%;
+  background-position:0 0, 3px 4px, 0 0, 0 0;
+}
+.board__felt{ position:absolute; inset:0; pointer-events:none;
+  background:
+    radial-gradient(70% 50% at 50% 0%, rgba(245,208,138,.16), transparent 60%),
+    radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0,0,0,.5) 100%);
+}
+.board__frame{ position:absolute; inset:6px; pointer-events:none; z-index:9;
+  box-shadow:inset 0 0 0 5px #241a0e, inset 0 0 0 8px #120d07, inset 0 0 40px 6px rgba(0,0,0,.5); }
+
+.wall-item{ position:absolute; z-index:2; }
+.pushpin{ position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:11px; height:11px; z-index:3;
+  background:var(--amber-2); box-shadow:0 0 0 2px var(--ink-0), inset -2px -2px 0 var(--amber-1); }
+.pushpin--ox{ background:var(--ox-3); box-shadow:0 0 0 2px var(--ink-0), inset -2px -2px 0 var(--ox-1); }
+.pushpin--bone{ background:var(--bone-2); box-shadow:0 0 0 2px var(--ink-0), inset -2px -2px 0 var(--bone-1); }
+.wall-photo{ background:#efe9d6; padding:6px 6px 16px; box-shadow:4px 6px 0 rgba(0,0,0,.45); }
+.wall-clip{ background:#e3ddc8; color:#231f16; padding:9px 11px; box-shadow:4px 6px 0 rgba(0,0,0,.45);
+  background-image:repeating-linear-gradient(0deg, transparent 0 9px, rgba(0,0,0,.05) 9px 10px); }
+.wall-note{ background:var(--amber-2); color:#2a1f0c; padding:11px 12px; box-shadow:4px 6px 0 rgba(0,0,0,.4);
+  font-family:var(--f-body); }
+.wall-note--bone{ background:#e7e0cc; color:#231f16; }
+.wall-redact{ background:#1a1610; padding:10px; box-shadow:4px 6px 0 rgba(0,0,0,.45); }
+.wall-redact .bar-blk{ height:7px; background:#0a0805; margin:4px 0; }
+.scrawl{ font-family:var(--f-body); line-height:1.2; }
+.pin-card{ position:absolute; cursor:default; user-select:none; z-index:4; transition:transform .05s; }
+.pin-card .pin{
+  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
+  width:12px; height:12px; background:var(--ox-3); z-index:6; cursor:grab;
+  box-shadow:0 0 0 2px var(--ink-0), inset -2px -2px 0 var(--ox-1);
+}
+.pin-card .pin:active{ cursor:grabbing; }
+.card-grip{ display:flex; align-items:center; justify-content:space-between; gap:6px;
+  background:var(--ink-3); color:var(--bone-1); padding:2px 6px; cursor:grab;
+  box-shadow:inset 0 0 0 2px var(--ink-0); }
+.card-grip:active{ cursor:grabbing; background:var(--slate-1); }
+.card-grip__dots{ font-size:11px; line-height:1; letter-spacing:-1px; color:var(--amber-2); }
+.card-grip__lbl{ font-family:var(--f-display); font-size:7px; letter-spacing:.12em; }
+.card-actions{ margin-top:6px; display:flex; justify-content:center; }
+.pin-card--sel{ filter:drop-shadow(0 0 14px rgba(224,164,76,.35)); }
+.pin-note{ background:var(--bone-2); color:var(--ink-1); padding:8px 10px;
+  box-shadow:3px 4px 0 rgba(0,0,0,.4); font-family:var(--f-body); }
+.board__filters{
+  position:absolute; top:12px; left:12px; right:12px; z-index:8;
+  display:flex; gap:6px; flex-wrap:wrap; align-items:center; pointer-events:none;
+}
+.board__filters > *{ pointer-events:auto; }
+
+.board-layout{ flex:1; display:flex; min-height:0; }
+.board-layout .board{ flex:1; }
+
+/* board-wrap anchors the floating toolbar; board-scroll is the mobile pan viewport
+   over a tall virtual wall. Drags start only on the pin/grip handles, so touches on
+   the felt fall through to native scroll. */
+.board-wrap{ position:relative; flex:1; display:flex; min-height:0; }
+.board-scroll{ flex:1; overflow-y:auto; overflow-x:hidden;
+  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
+.board--mobile{ flex:none; width:100%; }
+/* mobile: toolbar becomes a static bar above the scrolling wall (an overlay would
+   cover the topmost cards), so the wrap stacks vertically */
+[data-mode="mobile"] .board-wrap{ flex-direction:column; }
+[data-mode="mobile"] .board__filters{
+  position:static; padding:8px 10px; background:var(--ink-2);
+  box-shadow:inset 0 -3px 0 var(--ink-0); flex-shrink:0;
+}
+.pin-card .pin, .card-grip{ touch-action:none; }
+
+/* ---------- connect-the-dots red yarn ---------- */
+.thread-layer{ position:absolute; inset:0; z-index:5; pointer-events:none; }
+.thread{ fill:none; stroke:var(--thread); stroke-width:2.5; stroke-linecap:round; }
+.thread--under{ stroke:var(--thread-dk); stroke-width:4.5; opacity:.55; transform:translateY(2px); }
+.thread--draw{ stroke-dasharray:1; stroke-dashoffset:1; animation:threadDraw .25s steps(8) forwards; }
+@keyframes threadDraw{ to{ stroke-dashoffset:0; } }
+.thread--ghost{ stroke-dasharray:5 4; opacity:.75; }
+.thread-hit{ fill:none; stroke:#000; stroke-opacity:0; stroke-width:14; pointer-events:stroke; cursor:pointer; }
+.thread-knot{ fill:var(--thread-dk); stroke:var(--ink-0); stroke-width:1.5; }
+.pin-card--armed{ outline:3px solid var(--thread); outline-offset:2px;
+  filter:drop-shadow(0 0 12px rgba(194,59,59,.5)); }
+.pin-card--armed .pin{ animation:pinPulse .7s steps(2) infinite; }
+@keyframes pinPulse{ 50%{ transform:translateX(-50%) scale(1.6); } }
+.board--connect .pin{ cursor:pointer; }
+.board--connect .pin-note{ cursor:pointer; }
+.card-grip--locked{ cursor:pointer; opacity:.55; }
+.card-grip--locked:active{ background:var(--ink-3); }
+.suspect-rail{ width:316px; flex-shrink:0; background:var(--ink-2); box-shadow:inset 4px 0 0 var(--ink-0);
+  display:flex; flex-direction:column; min-height:0; }
+.suspect-rail__head{ padding:14px 14px 10px; box-shadow:inset 0 -3px 0 var(--ink-0); }
+.suspect-rail__list{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
+.rail-card{ cursor:pointer; }
+.rail-card__reveal{ overflow:hidden; max-height:0; transition:max-height .25s steps(6); }
+.rail-card__reveal--open{ max-height:200px; }
+
+/* ============================================================
+   INTERROGATION
+   ============================================================ */
+.interro{ flex:1; display:grid; grid-template-columns:minmax(300px,440px) 1fr; gap:0; overflow:hidden; }
+.interro__stage{ position:relative; overflow:hidden; background:var(--ink-0); display:flex; flex-direction:column; }
+.interro__sprite{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); z-index:2; }
+.interro__right{ display:flex; flex-direction:column; min-width:0; background:var(--ink-1);
+  box-shadow:inset 4px 0 0 var(--ink-0); }
+.transcript{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
+.tline{ max-width:88%; }
+.tline--det{ align-self:flex-end; }
+.tline--det .tline__b{ background:var(--slate-1); color:var(--bone-3); box-shadow:inset -2px -2px 0 rgba(0,0,0,.4); }
+.tline--sus .tline__b{ background:var(--ink-3); color:var(--bone-2); box-shadow:inset 0 0 0 2px var(--ink-0); }
+.tline__b{ padding:10px 12px; font-family:var(--f-body); font-size:15px; line-height:1.45; }
+.tline__who{ font-family:var(--f-display); font-size:8px; letter-spacing:.1em; color:var(--bone-1); margin-bottom:4px; }
+.tline--det .tline__who{ text-align:right; color:var(--amber-2); }
+.composer{ flex-shrink:0; padding:12px; background:var(--ink-2); box-shadow:inset 0 3px 0 var(--ink-0); }
+.qsuggest{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
+.qchip{ font-family:var(--f-body); font-size:13px; line-height:1.25; padding:7px 10px; background:var(--ink-1);
+  color:var(--bone-2); border:0; box-shadow:inset 0 0 0 2px var(--slate-1); text-align:left; flex:1 1 auto; min-width:0; }
+.qchip:hover{ box-shadow:inset 0 0 0 2px var(--amber-2); color:var(--bone-3); }
+.qchip:disabled{ opacity:.35; }
+.composer__input{ display:flex; gap:8px; }
+.pinput{ flex:1; background:var(--ink-1); border:0; color:var(--bone-3); padding:11px 12px;
+  font-size:15px; box-shadow:inset 0 0 0 2px var(--ink-0), inset 2px 2px 0 rgba(0,0,0,.4); outline:none; }
+.pinput::placeholder{ color:var(--bone-1); }
+.pinput:focus{ box-shadow:inset 0 0 0 2px var(--amber-1); }
+
+.tray{ position:absolute; inset:0; z-index:30; background:rgba(8,11,16,.82);
+  display:flex; flex-direction:column; justify-content:flex-end; }
+.tray__sheet{ background:var(--ink-2); box-shadow:0 -4px 0 var(--ink-0), inset 0 4px 0 var(--amber-1);
+  padding:16px; max-height:70%; overflow-y:auto; animation:slideup .25s steps(6); }
+@keyframes slideup{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
+.tray__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
+
+/* ============================================================
+   GENERIC SCREEN SCAFFOLD
+   ============================================================ */
+.screen-pad{ flex:1; overflow-y:auto; padding:22px; }
+.screen-center{ flex:1; display:flex; align-items:center; justify-content:center; padding:22px; overflow-y:auto; }
+.maxw{ width:100%; max-width:1180px; margin:0 auto; }
+.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
+.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
+.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
+
+/* ============================================================
+   TIMELINE
+   ============================================================ */
+.tl-track{ position:relative; padding:30px 10px; }
+.tl-line{ position:absolute; left:0; right:0; top:50%; height:4px;
+  background:repeating-linear-gradient(90deg,var(--slate-1) 0 6px, transparent 6px 12px); }
+.tl-stop{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; }
+.tl-node{ width:14px; height:14px; background:var(--slate-2); box-shadow:0 0 0 3px var(--ink-0); }
+.tl-node--lock{ background:var(--amber-2); }
+.tl-node--conflict{ background:var(--ox-3); }
+.tl-slot{ min-height:62px; }
+
+/* ============================================================
+   FLASHBACK compare
+   ============================================================ */
+.flash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
+.flash-flag{ box-shadow:inset 0 0 0 2px var(--ox-2); }
+
+/* ============================================================
+   RESPONSIVE
+   ============================================================ */
+[data-mode="mobile"] .interro{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
+[data-mode="mobile"] .interro__stage{ height:32vh; min-height:200px; }
+[data-mode="mobile"] .grid-2,[data-mode="mobile"] .grid-3,[data-mode="mobile"] .grid-4,[data-mode="mobile"] .flash-grid{ grid-template-columns:1fr; }
+[data-mode="mobile"] .screen-pad{ padding:14px; }
+[data-mode="mobile"] .hud{ padding:9px 11px; }
+
+@media (max-width:760px){
+  .app[data-mode="auto"] .interro{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
+  .app[data-mode="auto"] .grid-2,.app[data-mode="auto"] .grid-3,.app[data-mode="auto"] .grid-4{ grid-template-columns:1fr; }
+  .app[data-mode="auto"] .hud__title{
+    font-size:10px; white-space:normal; overflow:hidden;
+    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
+  }
+}

web/src/styles/pixel.css

@@ -1,273 +1,276 @@
-/* ============================================================
-   CASE ZERO — pixel-art noir design system
-   Palette: blue-black shadows · desaturated teal/slate mids ·
-   warm sodium-amber (single light source) · oxblood (danger) ·
-   bone-white (key text)
-   Fonts are self-hosted via @fontsource (imported in main.tsx) — no network at runtime.
-   ============================================================ */
-
-/* ---------- palette variants ---------- */
-:root,
-[data-palette="sodium"]{
-  --ink-0:#080b10; --ink-1:#0d1117; --ink-2:#11202a; --ink-3:#1b2d38;
-  --slate-1:#2d4a52; --slate-2:#3a6b6b; --slate-3:#5d8a8a;
-  --amber-1:#b9772f; --amber-2:#e0a44c; --amber-3:#f5d08a;
-  --ox-1:#5e1c1c; --ox-2:#8a2a2a; --ox-3:#c23b3b;
-  --bone-1:#9a937e; --bone-2:#e0d9c4; --bone-3:#f5f1e6;
-  --glow:#e0a44c;
-}
-[data-palette="harbor"]{
-  --ink-0:#060a0f; --ink-1:#0a0e14; --ink-2:#0f1d26; --ink-3:#16242e;
-  --slate-1:#2c5151; --slate-2:#3a6b6b; --slate-3:#62989a;
-  --amber-1:#c2842f; --amber-2:#f0b860; --amber-3:#ffd98f;
-  --ox-1:#661f1f; --ox-2:#a33636; --ox-3:#d24a4a;
-  --bone-1:#a39d88; --bone-2:#eae3cf; --bone-3:#f7f3e8;
-  --glow:#f0b860;
-}
-[data-palette="violet"]{
-  --ink-0:#08060e; --ink-1:#0e0c14; --ink-2:#171425; --ink-3:#221d33;
-  --slate-1:#33344e; --slate-2:#46506b; --slate-3:#6b7396;
-  --amber-1:#b4802f; --amber-2:#d99a3c; --amber-3:#f0c071;
-  --ox-1:#5e1d2a; --ox-2:#922d3a; --ox-3:#c4485a;
-  --bone-1:#9690a0; --bone-2:#e6e0d4; --bone-3:#f4f0ea;
-  --glow:#d99a3c;
-}
-
-/* ---------- light precinct mood (daytime / bright bullpen) ---------- */
-[data-mood="day"]{
-  --ink-0:#cdc6b2; --ink-1:#d8d2bf; --ink-2:#c6c0ac; --ink-3:#b8b29c;
-  --slate-1:#8a9a96; --slate-2:#6f8a88; --slate-3:#577070;
-  --bone-1:#5a5544; --bone-2:#2a2820; --bone-3:#15140f;
-  --glow:#b9772f;
-}
-
-/* ---------- font pairing variants ---------- */
-:root,
-[data-fonts="crisp"]{
-  --f-display:'Silkscreen', monospace;
-  --f-mono:'VT323', monospace;
-  --f-body:'Pixelify Sans', monospace;
-  --mono-scale:1.25;
-}
-[data-fonts="terminal"]{
-  --f-display:'VT323', monospace;
-  --f-mono:'VT323', monospace;
-  --f-body:'VT323', monospace;
-  --mono-scale:1.35;
-}
-[data-fonts="stamp"]{
-  --f-display:'Silkscreen', monospace;
-  --f-mono:'Silkscreen', monospace;
-  --f-body:'Pixelify Sans', monospace;
-  --mono-scale:1.0;
-}
-
-/* ---------- reset ---------- */
-*{ box-sizing:border-box; margin:0; padding:0; }
-html,body{ height:100%; }
-body{
-  background:var(--ink-0);
-  color:var(--bone-2);
-  font-family:var(--f-body);
-  -webkit-font-smoothing:none;
-  font-smooth:never;
-  overflow:hidden;
-}
-img,canvas{ image-rendering:pixelated; image-rendering:crisp-edges; }
-button{ font-family:inherit; color:inherit; cursor:pointer; }
-input,textarea{ font-family:var(--f-body); }
-::selection{ background:var(--amber-2); color:var(--ink-0); }
-
-/* ---------- type scale ---------- */
-.t-display{ font-family:var(--f-display); letter-spacing:.04em; line-height:1.05; text-transform:uppercase; }
-.t-mono{ font-family:var(--f-mono); letter-spacing:.02em; }
-.t-mono-lg{ font-family:var(--f-mono); font-size:calc(1.5rem * var(--mono-scale)); letter-spacing:.04em; }
-.t-label{ font-family:var(--f-display); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-1); }
-.t-body{ font-family:var(--f-body); font-size:17px; line-height:1.5; }
-
-.amber{ color:var(--amber-2); }
-.ox{ color:var(--ox-3); }
-.bone{ color:var(--bone-3); }
-.dim{ color:var(--bone-1); }
-
-/* ============================================================
-   9-SLICE PIXEL PANELS — beveled, no border-radius ever
-   ============================================================ */
-.panel{
-  position:relative;
-  background:var(--ink-2);
-  border:3px solid var(--ink-0);
-  box-shadow:
-    inset 0 0 0 3px var(--ink-3),
-    inset 3px 3px 0 3px rgba(93,138,138,.12),
-    inset -3px -3px 0 3px rgba(0,0,0,.45),
-    0 0 0 1px var(--ink-0);
-  padding:18px;
-}
-.panel--raised{ background:var(--ink-3); }
-.panel--inset{
-  background:var(--ink-1);
-  box-shadow:
-    inset 0 0 0 3px var(--ink-0),
-    inset 3px 3px 0 3px rgba(0,0,0,.5),
-    inset -3px -3px 0 3px rgba(93,138,138,.06);
-}
-.panel--amber{ border-color:var(--amber-1);
-  box-shadow:inset 0 0 0 2px var(--amber-1), 0 0 24px -6px var(--glow); }
-.panel--ox{ border-color:var(--ox-1);
-  box-shadow:inset 0 0 0 2px var(--ox-1), 0 0 22px -8px var(--ox-3); }
-
-.panel__tab{
-  position:absolute; top:-11px; left:14px;
-  background:var(--amber-2); color:var(--ink-0);
-  font-family:var(--f-display); font-size:9px; letter-spacing:.12em;
-  padding:4px 8px; text-transform:uppercase;
-  box-shadow:2px 2px 0 var(--ink-0);
-}
-
-/* ---------- pixel buttons ---------- */
-.pbtn{
-  font-family:var(--f-display); font-size:11px; letter-spacing:.08em;
-  text-transform:uppercase; white-space:nowrap;
-  color:var(--bone-3); background:var(--slate-1);
-  border:0; padding:13px 18px;
-  box-shadow:
-    inset -3px -3px 0 0 rgba(0,0,0,.45),
-    inset 3px 3px 0 0 rgba(255,255,255,.12),
-    0 0 0 3px var(--ink-0);
-  transition:transform .04s steps(1);
-  position:relative;
-}
-.pbtn:hover{ background:var(--slate-2); color:var(--ink-0); }
-.pbtn:active{
-  transform:translate(2px,2px);
-  box-shadow:
-    inset 3px 3px 0 0 rgba(0,0,0,.4),
-    0 0 0 3px var(--ink-0);
-}
-.pbtn--amber{ background:var(--amber-2); color:var(--ink-0); }
-.pbtn--amber:hover{ background:var(--amber-3); }
-.pbtn--ox{ background:var(--ox-2); color:var(--bone-3); }
-.pbtn--ox:hover{ background:var(--ox-3); }
-.pbtn--ghost{ background:rgba(13,17,23,.66); color:var(--bone-1);
-  box-shadow:inset 0 0 0 2px var(--slate-1); }
-.pbtn--ghost:hover{ color:var(--bone-3); background:rgba(13,17,23,.85); box-shadow:inset 0 0 0 2px var(--slate-3); }
-.pbtn:disabled{ opacity:.4; cursor:not-allowed; }
-.pbtn--sm{ font-size:9px; padding:8px 11px; }
-
-/* ---------- chips / tags ---------- */
-.chip{
-  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
-  font-family:var(--f-mono); font-size:calc(15px * var(--mono-scale));
-  line-height:1; padding:4px 8px;
-  background:var(--ink-1); color:var(--bone-1);
-  box-shadow:inset 0 0 0 2px var(--slate-1);
-}
-.chip--amber{ color:var(--amber-2); box-shadow:inset 0 0 0 2px var(--amber-1); }
-.chip--ox{ color:var(--ox-3); box-shadow:inset 0 0 0 2px var(--ox-1); }
-
-/* ============================================================
-   SUSPICION / COMPOSURE BAR
-   ============================================================ */
-.bar{
-  height:16px; background:var(--ink-1);
-  box-shadow:inset 0 0 0 2px var(--ink-0), inset 2px 2px 0 2px rgba(0,0,0,.5);
-  position:relative; overflow:hidden;
-}
-.bar__fill{
-  height:100%;
-  background:
-    repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.18) 6px 8px),
-    linear-gradient(var(--ox-3), var(--ox-2));
-  transition:width .5s steps(12);
-  box-shadow:inset 0 2px 0 rgba(255,255,255,.18);
-}
-.bar__fill--calm{ background:
-    repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.18) 6px 8px),
-    linear-gradient(var(--slate-3), var(--slate-1)); }
-
-/* ============================================================
-   ATMOSPHERE — scanlines, vignette, lamp glow, rain
-   ============================================================ */
-.fx-layer{ position:fixed; inset:0; pointer-events:none; z-index:60; }
-
-.fx-scanlines{
-  background:repeating-linear-gradient(
-    to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px,
-    rgba(0,0,0,.16) 3px, rgba(0,0,0,.16) 3px);
-  mix-blend-mode:multiply;
-  opacity:var(--fx-scan, .6);
-}
-.fx-vignette{
-  background:radial-gradient(120% 90% at 50% 38%,
-    transparent 40%, rgba(0,0,0,.4) 78%, rgba(0,0,0,.72) 100%);
-  opacity:var(--fx-vig, 1);
-}
-.fx-flicker{ animation:flicker 6s steps(1) infinite; background:var(--glow); opacity:0; mix-blend-mode:overlay; }
-@keyframes flicker{
-  0%,97%,100%{ opacity:0; } 97.5%{ opacity:.05; } 98%{ opacity:.02; } 98.5%{ opacity:.06; }
-}
-[data-fx="low"]{ --fx-scan:.25; --fx-vig:.6; }
-[data-fx="med"]{ --fx-scan:.55; --fx-vig:1; }
-[data-fx="high"]{ --fx-scan:.85; --fx-vig:1.25; }
-[data-fx="low"] .fx-rain, [data-fx="low"] .fx-flicker{ display:none; }
-
-.fx-rain{ opacity:var(--fx-rain,.5); }
-
-@media (prefers-reduced-motion: reduce){
-  .fx-flicker{ animation:none; }
-}
-
-/* ---------- blinking cursor ---------- */
-.cursor::after{
-  content:'▮'; color:var(--amber-2);
-  animation:blink 1s steps(1) infinite; margin-left:2px;
-}
-@keyframes blink{ 50%{ opacity:0; } }
-
-/* ---------- scrollbars ---------- */
-*::-webkit-scrollbar{ width:10px; height:10px; }
-*::-webkit-scrollbar-track{ background:var(--ink-1); }
-*::-webkit-scrollbar-thumb{ background:var(--slate-1); border:2px solid var(--ink-1); }
-*::-webkit-scrollbar-thumb:hover{ background:var(--slate-2); }
-
-/* ---------- pixel divider ---------- */
-.hr-pixel{
-  height:3px; background:repeating-linear-gradient(90deg,
-    var(--slate-1) 0 4px, transparent 4px 8px);
-  border:0;
-}
-
-/* ---------- dithered fill helper ---------- */
-.dither-amber{
-  background-image:
-    radial-gradient(rgba(224,164,76,.5) 1px, transparent 1px);
-  background-size:4px 4px;
-}
-
-/* ---------- stamp ---------- */
-.stamp{
-  font-family:var(--f-display); text-transform:uppercase;
-  color:var(--ox-3);
-  border:4px solid var(--ox-3);
-  padding:8px 14px; letter-spacing:.06em;
-  box-shadow:0 0 0 2px var(--ink-0);
-  transform:rotate(-6deg);
-  mix-blend-mode:screen;
-}
-.stamp--slam{ animation:slam .45s cubic-bezier(.2,1.4,.3,1) both; }
-@keyframes slam{
-  0%{ transform:rotate(-6deg) scale(3); opacity:0; }
-  60%{ transform:rotate(-6deg) scale(.92); opacity:1; }
-  100%{ transform:rotate(-6deg) scale(1); opacity:1; }
-}
-
-/* utility */
-.row{ display:flex; gap:12px; }
-.col{ display:flex; flex-direction:column; gap:12px; }
-.center{ display:flex; align-items:center; justify-content:center; }
-.between{ display:flex; align-items:center; justify-content:space-between; }
-.wrap{ flex-wrap:wrap; }
-.grow{ flex:1; }
-.scroll-y{ overflow-y:auto; }
-.nowrap{ white-space:nowrap; }
+/* ============================================================
+   CASE ZERO — pixel-art noir design system
+   Palette: blue-black shadows · desaturated teal/slate mids ·
+   warm sodium-amber (single light source) · oxblood (danger) ·
+   bone-white (key text)
+   Fonts are self-hosted via @fontsource (imported in main.tsx) — no network at runtime.
+   ============================================================ */
+
+/* ---------- palette variants ---------- */
+:root,
+[data-palette="sodium"]{
+  --ink-0:#080b10; --ink-1:#0d1117; --ink-2:#11202a; --ink-3:#1b2d38;
+  --slate-1:#2d4a52; --slate-2:#3a6b6b; --slate-3:#5d8a8a;
+  --amber-1:#b9772f; --amber-2:#e0a44c; --amber-3:#f5d08a;
+  --ox-1:#5e1c1c; --ox-2:#8a2a2a; --ox-3:#c23b3b;
+  --bone-1:#9a937e; --bone-2:#e0d9c4; --bone-3:#f5f1e6;
+  --glow:#e0a44c;
+  --thread:#d24034; --thread-dk:#5e1c1c;
+}
+[data-palette="harbor"]{
+  --ink-0:#060a0f; --ink-1:#0a0e14; --ink-2:#0f1d26; --ink-3:#16242e;
+  --slate-1:#2c5151; --slate-2:#3a6b6b; --slate-3:#62989a;
+  --amber-1:#c2842f; --amber-2:#f0b860; --amber-3:#ffd98f;
+  --ox-1:#661f1f; --ox-2:#a33636; --ox-3:#d24a4a;
+  --bone-1:#a39d88; --bone-2:#eae3cf; --bone-3:#f7f3e8;
+  --glow:#f0b860;
+  --thread:#e04a3c; --thread-dk:#661f1f;
+}
+[data-palette="violet"]{
+  --ink-0:#08060e; --ink-1:#0e0c14; --ink-2:#171425; --ink-3:#221d33;
+  --slate-1:#33344e; --slate-2:#46506b; --slate-3:#6b7396;
+  --amber-1:#b4802f; --amber-2:#d99a3c; --amber-3:#f0c071;
+  --ox-1:#5e1d2a; --ox-2:#922d3a; --ox-3:#c4485a;
+  --bone-1:#9690a0; --bone-2:#e6e0d4; --bone-3:#f4f0ea;
+  --glow:#d99a3c;
+  --thread:#d24458; --thread-dk:#5e1d2a;
+}
+
+/* ---------- light precinct mood (daytime / bright bullpen) ---------- */
+[data-mood="day"]{
+  --ink-0:#cdc6b2; --ink-1:#d8d2bf; --ink-2:#c6c0ac; --ink-3:#b8b29c;
+  --slate-1:#8a9a96; --slate-2:#6f8a88; --slate-3:#577070;
+  --bone-1:#5a5544; --bone-2:#2a2820; --bone-3:#15140f;
+  --glow:#b9772f;
+}
+
+/* ---------- font pairing variants ---------- */
+:root,
+[data-fonts="crisp"]{
+  --f-display:'Silkscreen', monospace;
+  --f-mono:'VT323', monospace;
+  --f-body:'Pixelify Sans', monospace;
+  --mono-scale:1.25;
+}
+[data-fonts="terminal"]{
+  --f-display:'VT323', monospace;
+  --f-mono:'VT323', monospace;
+  --f-body:'VT323', monospace;
+  --mono-scale:1.35;
+}
+[data-fonts="stamp"]{
+  --f-display:'Silkscreen', monospace;
+  --f-mono:'Silkscreen', monospace;
+  --f-body:'Pixelify Sans', monospace;
+  --mono-scale:1.0;
+}
+
+/* ---------- reset ---------- */
+*{ box-sizing:border-box; margin:0; padding:0; }
+html,body{ height:100%; }
+body{
+  background:var(--ink-0);
+  color:var(--bone-2);
+  font-family:var(--f-body);
+  -webkit-font-smoothing:none;
+  font-smooth:never;
+  overflow:hidden;
+}
+img,canvas{ image-rendering:pixelated; image-rendering:crisp-edges; }
+button{ font-family:inherit; color:inherit; cursor:pointer; }
+input,textarea{ font-family:var(--f-body); }
+::selection{ background:var(--amber-2); color:var(--ink-0); }
+
+/* ---------- type scale ---------- */
+.t-display{ font-family:var(--f-display); letter-spacing:.04em; line-height:1.05; text-transform:uppercase; }
+.t-mono{ font-family:var(--f-mono); letter-spacing:.02em; }
+.t-mono-lg{ font-family:var(--f-mono); font-size:calc(1.5rem * var(--mono-scale)); letter-spacing:.04em; }
+.t-label{ font-family:var(--f-display); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-1); }
+.t-body{ font-family:var(--f-body); font-size:17px; line-height:1.5; }
+
+.amber{ color:var(--amber-2); }
+.ox{ color:var(--ox-3); }
+.bone{ color:var(--bone-3); }
+.dim{ color:var(--bone-1); }
+
+/* ============================================================
+   9-SLICE PIXEL PANELS — beveled, no border-radius ever
+   ============================================================ */
+.panel{
+  position:relative;
+  background:var(--ink-2);
+  border:3px solid var(--ink-0);
+  box-shadow:
+    inset 0 0 0 3px var(--ink-3),
+    inset 3px 3px 0 3px rgba(93,138,138,.12),
+    inset -3px -3px 0 3px rgba(0,0,0,.45),
+    0 0 0 1px var(--ink-0);
+  padding:18px;
+}
+.panel--raised{ background:var(--ink-3); }
+.panel--inset{
+  background:var(--ink-1);
+  box-shadow:
+    inset 0 0 0 3px var(--ink-0),
+    inset 3px 3px 0 3px rgba(0,0,0,.5),
+    inset -3px -3px 0 3px rgba(93,138,138,.06);
+}
+.panel--amber{ border-color:var(--amber-1);
+  box-shadow:inset 0 0 0 2px var(--amber-1), 0 0 24px -6px var(--glow); }
+.panel--ox{ border-color:var(--ox-1);
+  box-shadow:inset 0 0 0 2px var(--ox-1), 0 0 22px -8px var(--ox-3); }
+
+.panel__tab{
+  position:absolute; top:-11px; left:14px;
+  background:var(--amber-2); color:var(--ink-0);
+  font-family:var(--f-display); font-size:9px; letter-spacing:.12em;
+  padding:4px 8px; text-transform:uppercase;
+  box-shadow:2px 2px 0 var(--ink-0);
+}
+
+/* ---------- pixel buttons ---------- */
+.pbtn{
+  font-family:var(--f-display); font-size:11px; letter-spacing:.08em;
+  text-transform:uppercase; white-space:nowrap;
+  color:var(--bone-3); background:var(--slate-1);
+  border:0; padding:13px 18px;
+  box-shadow:
+    inset -3px -3px 0 0 rgba(0,0,0,.45),
+    inset 3px 3px 0 0 rgba(255,255,255,.12),
+    0 0 0 3px var(--ink-0);
+  transition:transform .04s steps(1);
+  position:relative;
+}
+.pbtn:hover{ background:var(--slate-2); color:var(--ink-0); }
+.pbtn:active{
+  transform:translate(2px,2px);
+  box-shadow:
+    inset 3px 3px 0 0 rgba(0,0,0,.4),
+    0 0 0 3px var(--ink-0);
+}
+.pbtn--amber{ background:var(--amber-2); color:var(--ink-0); }
+.pbtn--amber:hover{ background:var(--amber-3); }
+.pbtn--ox{ background:var(--ox-2); color:var(--bone-3); }
+.pbtn--ox:hover{ background:var(--ox-3); }
+.pbtn--ghost{ background:rgba(13,17,23,.66); color:var(--bone-1);
+  box-shadow:inset 0 0 0 2px var(--slate-1); }
+.pbtn--ghost:hover{ color:var(--bone-3); background:rgba(13,17,23,.85); box-shadow:inset 0 0 0 2px var(--slate-3); }
+.pbtn:disabled{ opacity:.4; cursor:not-allowed; }
+.pbtn--sm{ font-size:9px; padding:8px 11px; }
+
+/* ---------- chips / tags ---------- */
+.chip{
+  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
+  font-family:var(--f-mono); font-size:calc(15px * var(--mono-scale));
+  line-height:1; padding:4px 8px;
+  background:var(--ink-1); color:var(--bone-1);
+  box-shadow:inset 0 0 0 2px var(--slate-1);
+}
+.chip--amber{ color:var(--amber-2); box-shadow:inset 0 0 0 2px var(--amber-1); }
+.chip--ox{ color:var(--ox-3); box-shadow:inset 0 0 0 2px var(--ox-1); }
+
+/* ============================================================
+   SUSPICION / COMPOSURE BAR
+   ============================================================ */
+.bar{
+  height:16px; background:var(--ink-1);
+  box-shadow:inset 0 0 0 2px var(--ink-0), inset 2px 2px 0 2px rgba(0,0,0,.5);
+  position:relative; overflow:hidden;
+}
+.bar__fill{
+  height:100%;
+  background:
+    repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.18) 6px 8px),
+    linear-gradient(var(--ox-3), var(--ox-2));
+  transition:width .5s steps(12);
+  box-shadow:inset 0 2px 0 rgba(255,255,255,.18);
+}
+.bar__fill--calm{ background:
+    repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.18) 6px 8px),
+    linear-gradient(var(--slate-3), var(--slate-1)); }
+
+/* ============================================================
+   ATMOSPHERE — scanlines, vignette, lamp glow, rain
+   ============================================================ */
+.fx-layer{ position:fixed; inset:0; pointer-events:none; z-index:60; }
+
+.fx-scanlines{
+  background:repeating-linear-gradient(
+    to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px,
+    rgba(0,0,0,.16) 3px, rgba(0,0,0,.16) 3px);
+  mix-blend-mode:multiply;
+  opacity:var(--fx-scan, .6);
+}
+.fx-vignette{
+  background:radial-gradient(120% 90% at 50% 38%,
+    transparent 40%, rgba(0,0,0,.4) 78%, rgba(0,0,0,.72) 100%);
+  opacity:var(--fx-vig, 1);
+}
+.fx-flicker{ animation:flicker 6s steps(1) infinite; background:var(--glow); opacity:0; mix-blend-mode:overlay; }
+@keyframes flicker{
+  0%,97%,100%{ opacity:0; } 97.5%{ opacity:.05; } 98%{ opacity:.02; } 98.5%{ opacity:.06; }
+}
+[data-fx="low"]{ --fx-scan:.25; --fx-vig:.6; }
+[data-fx="med"]{ --fx-scan:.55; --fx-vig:1; }
+[data-fx="high"]{ --fx-scan:.85; --fx-vig:1.25; }
+[data-fx="low"] .fx-rain, [data-fx="low"] .fx-flicker{ display:none; }
+
+.fx-rain{ opacity:var(--fx-rain,.5); }
+
+@media (prefers-reduced-motion: reduce){
+  .fx-flicker{ animation:none; }
+}
+
+/* ---------- blinking cursor ---------- */
+.cursor::after{
+  content:'▮'; color:var(--amber-2);
+  animation:blink 1s steps(1) infinite; margin-left:2px;
+}
+@keyframes blink{ 50%{ opacity:0; } }
+
+/* ---------- scrollbars ---------- */
+*::-webkit-scrollbar{ width:10px; height:10px; }
+*::-webkit-scrollbar-track{ background:var(--ink-1); }
+*::-webkit-scrollbar-thumb{ background:var(--slate-1); border:2px solid var(--ink-1); }
+*::-webkit-scrollbar-thumb:hover{ background:var(--slate-2); }
+
+/* ---------- pixel divider ---------- */
+.hr-pixel{
+  height:3px; background:repeating-linear-gradient(90deg,
+    var(--slate-1) 0 4px, transparent 4px 8px);
+  border:0;
+}
+
+/* ---------- dithered fill helper ---------- */
+.dither-amber{
+  background-image:
+    radial-gradient(rgba(224,164,76,.5) 1px, transparent 1px);
+  background-size:4px 4px;
+}
+
+/* ---------- stamp ---------- */
+.stamp{
+  font-family:var(--f-display); text-transform:uppercase;
+  color:var(--ox-3);
+  border:4px solid var(--ox-3);
+  padding:8px 14px; letter-spacing:.06em;
+  box-shadow:0 0 0 2px var(--ink-0);
+  transform:rotate(-6deg);
+  mix-blend-mode:screen;
+}
+.stamp--slam{ animation:slam .45s cubic-bezier(.2,1.4,.3,1) both; }
+@keyframes slam{
+  0%{ transform:rotate(-6deg) scale(3); opacity:0; }
+  60%{ transform:rotate(-6deg) scale(.92); opacity:1; }
+  100%{ transform:rotate(-6deg) scale(1); opacity:1; }
+}
+
+/* utility */
+.row{ display:flex; gap:12px; }
+.col{ display:flex; flex-direction:column; gap:12px; }
+.center{ display:flex; align-items:center; justify-content:center; }
+.between{ display:flex; align-items:center; justify-content:space-between; }
+.wrap{ flex-wrap:wrap; }
+.grow{ flex:1; }
+.scroll-y{ overflow-y:auto; }
+.nowrap{ white-space:nowrap; }

web/src/ui/components.tsx

@@ -1,409 +1,407 @@
-// UI kit — reusable pixel components. Ported from prototype/js/ui.jsx, wired to the
-// store + procedural art modules instead of globals.
-import type { ComponentChildren, JSX } from 'preact'
-import { useEffect, useState } from 'preact/hooks'
-
-import { EV_ICONS, IPAL, bodyFor, exhibitPainter, portraitFor, sceneFor } from '../engine/art'
-import { PixelCanvas, SceneCanvas, useTypewriter } from '../engine/pixel'
-import { useGame } from '../store'
-import type { Evidence, Suspect } from '../types'
-import { type Sfx, musicIsPlaying, playSfx, toggleMusic } from './audio'
-import { TweaksSheet } from './tweaks'
-
-const pxScaled = (px: number, floor = 2) =>
-  Math.max(floor, Math.round(px * (window.__pxScale || 1)))
-
-// What the culprit is called in this kind of case ("name the killer / thief / arsonist").
-const PERP: Record<string, string> = {
-  homicide: 'killer', theft: 'thief', fraud: 'fraudster',
-  blackmail: 'blackmailer', arson: 'arsonist', missing_person: 'abductor',
-}
-export const perpNoun = (kind?: string): string => PERP[kind || 'homicide'] || 'culprit'
-
-// ---- sprite wrappers ----
-export function useBlink(): boolean {
-  const [b, setB] = useState(false)
-  useEffect(() => {
-    let t1: ReturnType<typeof setTimeout>
-    let t2: ReturnType<typeof setTimeout>
-    let alive = true
-    const loop = () => {
-      const wait = 2400 + Math.random() * 3200
-      t1 = setTimeout(() => {
-        if (!alive) return
-        setB(true)
-        t2 = setTimeout(() => {
-          if (alive) {
-            setB(false)
-            loop()
-          }
-        }, 120)
-      }, wait)
-    }
-    loop()
-    return () => {
-      alive = false
-      clearTimeout(t1)
-      clearTimeout(t2)
-    }
-  }, [])
-  return b
-}
-
-interface SpriteProps {
-  id: string
-  px?: number
-  style?: JSX.CSSProperties
-  className?: string
-}
-// Toggle the mouth open/closed at a speech-like cadence while the suspect's voice plays.
-function useMouth(active: boolean): boolean {
-  const [open, setOpen] = useState(false)
-  useEffect(() => {
-    if (!active) {
-      setOpen(false)
-      return
-    }
-    const id = setInterval(() => setOpen((o) => !o), 135)
-    return () => clearInterval(id)
-  }, [active])
-  return open
-}
-export function Portrait({ id, px = 6, blink = true, talking = false, style, className, gender }: SpriteProps & { blink?: boolean; talking?: boolean; gender?: string }) {
-  const p = portraitFor(id, gender)
-  const b = useBlink()
-  const mouth = useMouth(talking)
-  let frame = p.frames[0]
-  if (talking && p.frames[2]) frame = mouth ? p.frames[2] : p.frames[0]
-  else if (blink && b) frame = p.frames[1]
-  return <PixelCanvas map={frame} pal={p.pal} px={pxScaled(px)} style={style} className={className} />
-}
-export function Body({ id, px = 6, playing = true, style, className, gender }: SpriteProps & { playing?: boolean; gender?: string }) {
-  const p = bodyFor(id, gender)
-  return <PixelCanvas frames={p.frames} pal={p.pal} px={pxScaled(px)} fps={1.1} playing={playing} style={style} className={className} />
-}
-export function EvIcon({ icon, px = 4, style }: { icon: string; px?: number; style?: JSX.CSSProperties }) {
-  const m = EV_ICONS[icon] || EV_ICONS.photoEv
-  return <PixelCanvas map={m} pal={IPAL} px={pxScaled(px, 1)} style={style} />
-}
-interface SceneProps {
-  name: string
-  w?: number
-  h?: number
-  anim?: boolean
-  full?: boolean
-  cover?: boolean
-  style?: JSX.CSSProperties
-  className?: string
-  deps?: unknown[]
-}
-export function Scene({ name, w = 240, h = 135, anim = false, full = false, cover = false, style, className, deps = [] }: SceneProps) {
-  const st = cover ? { objectFit: 'cover' as const, ...style } : style
-  return (
-    <SceneCanvas
-      paint={sceneFor(name)}
-      w={w}
-      h={h}
-      anim={anim}
-      full={full}
-      style={st}
-      className={className}
-      deps={[name, anim, full, ...deps]}
-    />
-  )
-}
-
-interface ExhibitArtProps {
-  e: Pick<Evidence, 'id' | 'name' | 'summary'>
-  w?: number
-  h?: number
-  style?: JSX.CSSProperties
-  className?: string
-}
-/** Procedural "evidence photo" of one exhibit - the object itself, on the forensic
- *  table, classified from the exhibit's own words and seeded by its id. */
-export function ExhibitArt({ e, w = 96, h = 72, style, className }: ExhibitArtProps) {
-  return (
-    <SceneCanvas
-      paint={exhibitPainter(e.name, e.summary || '', e.id)}
-      w={w}
-      h={h}
-      style={style}
-      className={className}
-      deps={[e.id, e.name]}
-    />
-  )
-}
-
-// ---- primitives ----
-interface PanelProps {
-  tab?: string
-  variant?: 'amber' | 'ox' | 'raised' | 'inset'
-  className?: string
-  style?: JSX.CSSProperties
-  children?: ComponentChildren
-  onClick?: (e: MouseEvent) => void
-}
-export function Panel({ tab, variant, className = '', style, children, onClick }: PanelProps) {
-  const v = variant ? ` panel--${variant}` : ''
-  return (
-    <div class={`panel${v} ${className}`} style={style} onClick={onClick}>
-      {tab && <span class="panel__tab">{tab}</span>}
-      {children}
-    </div>
-  )
-}
-
-type BtnProps = {
-  variant?: 'amber' | 'ox' | 'ghost'
-  sm?: boolean
-  className?: string
-  children?: ComponentChildren
-  /** SFX on click: a specific cue, or null to silence. Defaults to "click". */
-  sfx?: Sfx | null
-} & JSX.HTMLAttributes<HTMLButtonElement>
-export function Btn({ variant, sm, className = '', children, sfx, onClick, ...rest }: BtnProps) {
-  const v = variant ? ` pbtn--${variant}` : ''
-  const handle = (e: MouseEvent) => {
-    if (sfx !== null) playSfx(sfx || 'click')
-    ;(onClick as ((ev: MouseEvent) => void) | undefined)?.(e)
-  }
-  return (
-    <button class={`pbtn${v}${sm ? ' pbtn--sm' : ''} ${className}`} onClick={handle} {...rest}>
-      {children}
-    </button>
-  )
-}
-
-export function Chip({ variant, children, style }: { variant?: 'amber' | 'ox'; children?: ComponentChildren; style?: JSX.CSSProperties }) {
-  const v = variant ? ` chip--${variant}` : ''
-  return <span class={`chip${v}`} style={style}>{children}</span>
-}
-
-export function Stamp({ children, slam, style }: { children?: ComponentChildren; slam?: boolean; style?: JSX.CSSProperties }) {
-  return <span class={`stamp${slam ? ' stamp--slam' : ''}`} style={style}>{children}</span>
-}
-
-// ---- suspicion / composure bar ----
-export function SuspicionBar({ value, label = 'SUSPICION', compact }: { value: number; label?: string | null; compact?: boolean }) {
-  const v = Math.max(0, Math.min(100, Math.round(value)))
-  const calm = v < 42
-  return (
-    <div class="col" style={{ gap: compact ? 3 : 5 }}>
-      {!compact && label && (
-        <div class="between">
-          <span class="t-label">{label}</span>
-          <span class="t-mono" style={{ color: calm ? 'var(--slate-3)' : 'var(--ox-3)', fontSize: 'calc(14px*var(--mono-scale))' }}>{v}%</span>
-        </div>
-      )}
-      <div class="bar" style={compact ? { height: 10 } : undefined}>
-        <div class={'bar__fill' + (calm ? ' bar__fill--calm' : '')} style={{ width: v + '%' }} />
-      </div>
-    </div>
-  )
-}
-
-// ---- suspect card ----
-export function SuspectCard({ s, onClick, active, mini }: { s: Suspect; onClick?: (e: MouseEvent) => void; active?: boolean; mini?: boolean }) {
-  const g = useGame()
-  const susp = g.state.suspicion[s.id]
-  return (
-    <Panel
-      className="suspect-card"
-      variant={active ? 'amber' : undefined}
-      style={{ padding: mini ? 8 : 12, cursor: onClick ? 'pointer' : 'default', minWidth: mini ? 0 : 168 }}
-      onClick={onClick}
-    >
-      <div class="row" style={{ gap: 10, alignItems: 'flex-start' }}>
-        <div style={{ background: 'var(--ink-1)', boxShadow: 'inset 0 0 0 2px var(--ink-0)', padding: 3, flexShrink: 0 }}>
-          <Portrait id={s.sprite} px={mini ? 3 : 4} gender={s.gender} />
-        </div>
-        <div class="col grow" style={{ gap: 5, minWidth: 0 }}>
-          <div>
-            <div class="t-display" style={{ fontSize: mini ? 9 : 11, color: 'var(--bone-3)' }}>{s.name}</div>
-            <div class="t-label" style={{ marginTop: 3 }}>{s.tag}</div>
-          </div>
-          {!mini && <div class="t-body dim" style={{ fontSize: 12, lineHeight: 1.35 }}>{s.role}</div>}
-          <SuspicionBar value={susp} compact />
-        </div>
-      </div>
-    </Panel>
-  )
-}
-
-// ---- evidence card with "develops in" reveal ----
-export function EvidenceCard({ e, onClick, active, develop, small }: { e: Evidence; onClick?: (ev: MouseEvent) => void; active?: boolean; develop?: boolean; small?: boolean }) {
-  const [revealed, setRevealed] = useState(!develop)
-  useEffect(() => {
-    if (develop) {
-      const t = setTimeout(() => setRevealed(true), 60)
-      return () => clearTimeout(t)
-    }
-  }, [develop])
-  return (
-    <Panel
-      variant={active ? 'amber' : undefined}
-      className="ev-card"
-      style={{ padding: small ? 8 : 11, cursor: onClick ? 'pointer' : 'default', position: 'relative', overflow: 'hidden' }}
-      onClick={onClick}
-    >
-      <div class="row" style={{ gap: 10, alignItems: 'center' }}>
-        <div style={{ background: 'var(--ink-1)', boxShadow: 'inset 0 0 0 2px var(--ink-0)', padding: 4, flexShrink: 0 }}>
-          <EvIcon icon={e.icon} px={small ? 2 : 3} />
-        </div>
-        <div class="col grow" style={{ gap: 4, minWidth: 0 }}>
-          <div class="t-display" style={{ fontSize: small ? 8 : 10, color: 'var(--bone-3)' }}>{e.name}</div>
-          <div class="row" style={{ gap: 6, alignItems: 'center' }}>
-            <Chip variant="amber" style={{ fontSize: 'calc(12px*var(--mono-scale))', padding: '2px 5px' }}>{e.type}</Chip>
-            <span class="t-mono dim nowrap" style={{ fontSize: 'calc(13px*var(--mono-scale))' }}>{e.time}</span>
-          </div>
-        </div>
-      </div>
-      {develop && !revealed && <span class="develop-veil" />}
-      {develop && <span class="develop-veil develop-veil--anim" />}
-    </Panel>
-  )
-}
-
-// ---- dialogue / speech panel with typewriter ----
-export function DialoguePanel({ who, text, speed = 26, onDone, instant, tag }: { who: string; text: string; speed?: number; onDone?: () => void; instant?: boolean; tag?: string | null }) {
-  const [out, done] = useTypewriter(text, speed, !instant)
-  useEffect(() => {
-    if (done && onDone) onDone()
-  }, [done])
-  return (
-    <Panel className="dialogue" style={{ padding: 16 }}>
-      <div class="between" style={{ marginBottom: 8 }}>
-        <span class="t-display amber" style={{ fontSize: 11 }}>{who}</span>
-        {tag && <Chip variant="ox">{tag}</Chip>}
-      </div>
-      <div class="t-body" style={{ minHeight: 56, color: 'var(--bone-2)' }}>
-        {out}
-        {!done && <span class="cursor" />}
-      </div>
-    </Panel>
-  )
-}
-
-// ---- type a string once, fire onDone ----
-export function TypeOnce({ text, speed, onDone }: { text: string; speed: number; onDone?: () => void }) {
-  const [out, done] = useTypewriter(text, speed, true)
-  const [fired, setFired] = useState(false)
-  useEffect(() => {
-    if (done && !fired) {
-      setFired(true)
-      onDone?.()
-    }
-  }, [done])
-  return (
-    <>
-      {out}
-      {!done && <span class="cursor" />}
-    </>
-  )
-}
-
-// ---- HINT trigger button ----
-export function HintButton() {
-  return (
-    <button class="hint-btn" onClick={() => window.dispatchEvent(new Event('toggle-hint'))} title="Ask your partner">
-      <span class="hint-btn__dot" /> HINT
-    </button>
-  )
-}
-
-// ---- top HUD bar ----
-// Navbar controls: optional Main-menu, Music toggle, Settings sheet. Compact icon buttons so
-// they sit gracefully in the HUD bar (and on mobile) instead of floating mid-screen.
-export function Controls({ menu = false }: { menu?: boolean }) {
-  const g = useGame()
-  const [musicOn, setMusicOn] = useState(musicIsPlaying())
-  const [settings, setSettings] = useState(false)
-  const icon = (label: string, title: string, on: boolean, onClick: () => void) => (
-    <button
-      class="hint-btn"
-      title={title}
-      aria-label={title}
-      onClick={onClick}
-      style={{ width: 30, height: 28, padding: 0, justifyContent: 'center', fontSize: '0.95rem', opacity: on ? 1 : 0.5 }}
-    >
-      {label}
-    </button>
-  )
-  return (
-    <div class="row" style={{ gap: 5, alignItems: 'center' }}>
-      {menu && <Btn sm variant="ghost" onClick={() => g.nav('title')}>Menu</Btn>}
-      {icon('♪', musicOn ? 'Music: on' : 'Music: off', musicOn, () => setMusicOn(toggleMusic()))}
-      {icon('⚙', 'Settings', true, () => setSettings(true))}
-      {settings && <TweaksSheet onClose={() => setSettings(false)} />}
-    </div>
-  )
-}
-
-export function Hud({ title, sub, right }: { title: string; sub?: string; right?: ComponentChildren }) {
-  const g = useGame()
-  return (
-    <div class="hud">
-      <div class="row" style={{ gap: 12, alignItems: 'center', minWidth: 0 }}>
-        <button class="hud-badge" onClick={() => g.nav('board')} title="Investigation Board">
-          <span class="t-display" style={{ fontSize: 9, color: 'var(--ink-0)' }}>CASE</span>
-          <span class="t-mono" style={{ fontSize: 'calc(13px*var(--mono-scale))', color: 'var(--ink-0)' }}>{g.case.id}</span>
-        </button>
-        <div class="col" style={{ gap: 2, minWidth: 0 }}>
-          <div class="t-display hud__title">{title}</div>
-          {sub && <div class="t-label nowrap">{sub}</div>}
-        </div>
-      </div>
-      <div class="row" style={{ gap: 6, alignItems: 'center' }}>
-        {right}
-        <Controls menu />
-        <HintButton />
-      </div>
-    </div>
-  )
-}
-
-// ---- bottom nav (mobile) ----
-const NAV_ITEMS = [
-  { id: 'briefing', label: 'CASE', icon: 'file' },
-  { id: 'board', label: 'BOARD', icon: 'board' },
-  { id: 'suspects', label: 'SUSPECTS', icon: 'people' },
-  { id: 'evidence', label: 'EVIDENCE', icon: 'box' },
-  { id: 'timeline', label: 'TIME', icon: 'clock' },
-] as const
-
-function NavGlyph({ icon, on }: { icon: string; on: boolean }) {
-  const c = on ? 'var(--ink-0)' : 'var(--bone-1)'
-  const P = (d: JSX.CSSProperties) => <span style={{ position: 'absolute', ...d }} />
-  return (
-    <span style={{ position: 'relative', width: 18, height: 18, display: 'inline-block' }}>
-      {icon === 'file' && (<>{P({ left: 4, top: 2, width: 10, height: 14, background: 'transparent', boxShadow: `inset 0 0 0 2px ${c}` })}{P({ left: 6, top: 6, width: 6, height: 2, background: c })}{P({ left: 6, top: 10, width: 6, height: 2, background: c })}</>)}
-      {icon === 'board' && (<>{P({ left: 2, top: 3, width: 14, height: 12, background: 'transparent', boxShadow: `inset 0 0 0 2px ${c}` })}{P({ left: 6, top: 7, width: 3, height: 3, background: c })}{P({ left: 11, top: 9, width: 3, height: 3, background: c })}</>)}
-      {icon === 'people' && (<>{P({ left: 3, top: 3, width: 5, height: 5, background: c })}{P({ left: 3, top: 9, width: 7, height: 6, background: c })}{P({ left: 11, top: 4, width: 4, height: 4, background: c })}{P({ left: 10, top: 9, width: 6, height: 6, background: c })}</>)}
-      {icon === 'box' && (<>{P({ left: 3, top: 4, width: 12, height: 11, background: 'transparent', boxShadow: `inset 0 0 0 2px ${c}` })}{P({ left: 3, top: 4, width: 12, height: 2, background: c })}{P({ left: 8, top: 8, width: 2, height: 4, background: c })}</>)}
-      {icon === 'clock' && (<>{P({ left: 3, top: 3, width: 12, height: 12, background: 'transparent', boxShadow: `inset 0 0 0 2px ${c}` })}{P({ left: 8, top: 6, width: 2, height: 4, background: c })}{P({ left: 8, top: 9, width: 4, height: 2, background: c })}</>)}
-    </span>
-  )
-}
-
-export function BottomNav() {
-  const g = useGame()
-  const cur = g.state.screen
-  return (
-    <nav class="bottom-nav">
-      {NAV_ITEMS.map((it) => {
-        const on = cur === it.id || (it.id === 'suspects' && cur === 'interro')
-        return (
-          <button
-            key={it.id}
-            class={'nav-btn' + (on ? ' nav-btn--on' : '')}
-            onClick={() => g.nav((it.id === 'suspects' ? 'board' : it.id) as Parameters<typeof g.nav>[0])}
-          >
-            <NavGlyph icon={it.icon} on={on} />
-            <span class="t-display" style={{ fontSize: 7, letterSpacing: '.06em' }}>{it.label}</span>
-          </button>
-        )
-      })}
-    </nav>
-  )
-}
+// UI kit — reusable pixel components. Ported from prototype/js/ui.jsx, wired to the
+// store + procedural art modules instead of globals.
+import type { ComponentChildren, JSX } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+
+import { EV_ICONS, IPAL, bodyFor, exhibitPainter, portraitFor, sceneFor } from '../engine/art'
+import { PixelCanvas, SceneCanvas, useTypewriter } from '../engine/pixel'
+import { useGame } from '../store'
+import type { Evidence, Suspect } from '../types'
+import { type Sfx, musicIsPlaying, playSfx, toggleMusic } from './audio'
+
+const pxScaled = (px: number, floor = 2) =>
+  Math.max(floor, Math.round(px * (window.__pxScale || 1)))
+
+// What the culprit is called in this kind of case ("name the killer / thief / arsonist").
+const PERP: Record<string, string> = {
+  homicide: 'killer', theft: 'thief', fraud: 'fraudster',
+  blackmail: 'blackmailer', arson: 'arsonist', missing_person: 'abductor',
+}
+export const perpNoun = (kind?: string): string => PERP[kind || 'homicide'] || 'culprit'
+
+// ---- sprite wrappers ----
+export function useBlink(): boolean {
+  const [b, setB] = useState(false)
+  useEffect(() => {
+    let t1: ReturnType<typeof setTimeout>
+    let t2: ReturnType<typeof setTimeout>
+    let alive = true
+    const loop = () => {
+      const wait = 2400 + Math.random() * 3200
+      t1 = setTimeout(() => {
+        if (!alive) return
+        setB(true)
+        t2 = setTimeout(() => {
+          if (alive) {
+            setB(false)
+            loop()
+          }
+        }, 120)
+      }, wait)
+    }
+    loop()
+    return () => {
+      alive = false
+      clearTimeout(t1)
+      clearTimeout(t2)
+    }
+  }, [])
+  return b
+}
+
+interface SpriteProps {
+  id: string
+  px?: number
+  style?: JSX.CSSProperties
+  className?: string
+}
+// Toggle the mouth open/closed at a speech-like cadence while the suspect's voice plays.
+function useMouth(active: boolean): boolean {
+  const [open, setOpen] = useState(false)
+  useEffect(() => {
+    if (!active) {
+      setOpen(false)
+      return
+    }
+    const id = setInterval(() => setOpen((o) => !o), 135)
+    return () => clearInterval(id)
+  }, [active])
+  return open
+}
+export function Portrait({ id, px = 6, blink = true, talking = false, style, className, gender }: SpriteProps & { blink?: boolean; talking?: boolean; gender?: string }) {
+  const p = portraitFor(id, gender)
+  const b = useBlink()
+  const mouth = useMouth(talking)
+  let frame = p.frames[0]
+  if (talking && p.frames[2]) frame = mouth ? p.frames[2] : p.frames[0]
+  else if (blink && b) frame = p.frames[1]
+  return <PixelCanvas map={frame} pal={p.pal} px={pxScaled(px)} style={style} className={className} />
+}
+export function Body({ id, px = 6, playing = true, style, className, gender }: SpriteProps & { playing?: boolean; gender?: string }) {
+  const p = bodyFor(id, gender)
+  return <PixelCanvas frames={p.frames} pal={p.pal} px={pxScaled(px)} fps={1.1} playing={playing} style={style} className={className} />
+}
+export function EvIcon({ icon, px = 4, style }: { icon: string; px?: number; style?: JSX.CSSProperties }) {
+  const m = EV_ICONS[icon] || EV_ICONS.photoEv
+  return <PixelCanvas map={m} pal={IPAL} px={pxScaled(px, 1)} style={style} />
+}
+interface SceneProps {
+  name: string
+  w?: number
+  h?: number
+  anim?: boolean
+  full?: boolean
+  cover?: boolean
+  style?: JSX.CSSProperties
+  className?: string
+  deps?: unknown[]
+}
+export function Scene({ name, w = 240, h = 135, anim = false, full = false, cover = false, style, className, deps = [] }: SceneProps) {
+  const st = cover ? { objectFit: 'cover' as const, ...style } : style
+  return (
+    <SceneCanvas
+      paint={sceneFor(name)}
+      w={w}
+      h={h}
+      anim={anim}
+      full={full}
+      style={st}
+      className={className}
+      deps={[name, anim, full, ...deps]}
+    />
+  )
+}
+
+interface ExhibitArtProps {
+  e: Pick<Evidence, 'id' | 'name' | 'summary'>
+  w?: number
+  h?: number
+  style?: JSX.CSSProperties
+  className?: string
+}
+/** Procedural "evidence photo" of one exhibit - the object itself, on the forensic
+ *  table, classified from the exhibit's own words and seeded by its id. */
+export function ExhibitArt({ e, w = 96, h = 72, style, className }: ExhibitArtProps) {
+  return (
+    <SceneCanvas
+      paint={exhibitPainter(e.name, e.summary || '', e.id)}
+      w={w}
+      h={h}
+      style={style}
+      className={className}
+      deps={[e.id, e.name]}
+    />
+  )
+}
+
+// ---- primitives ----
+interface PanelProps {
+  tab?: string
+  variant?: 'amber' | 'ox' | 'raised' | 'inset'
+  className?: string
+  style?: JSX.CSSProperties
+  children?: ComponentChildren
+  onClick?: (e: MouseEvent) => void
+}
+export function Panel({ tab, variant, className = '', style, children, onClick }: PanelProps) {
+  const v = variant ? ` panel--${variant}` : ''
+  return (
+    <div class={`panel${v} ${className}`} style={style} onClick={onClick}>
+      {tab && <span class="panel__tab">{tab}</span>}
+      {children}
+    </div>
+  )
+}
+
+type BtnProps = {
+  variant?: 'amber' | 'ox' | 'ghost'
+  sm?: boolean
+  className?: string
+  children?: ComponentChildren
+  /** SFX on click: a specific cue, or null to silence. Defaults to "click". */
+  sfx?: Sfx | null
+} & JSX.ButtonHTMLAttributes<HTMLButtonElement>
+export function Btn({ variant, sm, className = '', children, sfx, onClick, ...rest }: BtnProps) {
+  const v = variant ? ` pbtn--${variant}` : ''
+  const handle = (e: MouseEvent) => {
+    if (sfx !== null) playSfx(sfx || 'click')
+    ;(onClick as ((ev: MouseEvent) => void) | undefined)?.(e)
+  }
+  return (
+    <button class={`pbtn${v}${sm ? ' pbtn--sm' : ''} ${className}`} onClick={handle} {...rest}>
+      {children}
+    </button>
+  )
+}
+
+export function Chip({ variant, children, style }: { variant?: 'amber' | 'ox'; children?: ComponentChildren; style?: JSX.CSSProperties }) {
+  const v = variant ? ` chip--${variant}` : ''
+  return <span class={`chip${v}`} style={style}>{children}</span>
+}
+
+export function Stamp({ children, slam, style }: { children?: ComponentChildren; slam?: boolean; style?: JSX.CSSProperties }) {
+  return <span class={`stamp${slam ? ' stamp--slam' : ''}`} style={style}>{children}</span>
+}
+
+// ---- suspicion / composure bar ----
+export function SuspicionBar({ value, label = 'SUSPICION', compact }: { value: number; label?: string | null; compact?: boolean }) {
+  const v = Math.max(0, Math.min(100, Math.round(value)))
+  const calm = v < 42
+  return (
+    <div class="col" style={{ gap: compact ? 3 : 5 }}>
+      {!compact && label && (
+        <div class="between" style={{ gap: 6 }}>
+          <span class="t-label" style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
+          <span class="t-mono" style={{ flexShrink: 0, color: calm ? 'var(--slate-3)' : 'var(--ox-3)', fontSize: 'calc(14px*var(--mono-scale))' }}>{v}%</span>
+        </div>
+      )}
+      <div class="bar" style={compact ? { height: 10 } : undefined}>
+        <div class={'bar__fill' + (calm ? ' bar__fill--calm' : '')} style={{ width: v + '%' }} />
+      </div>
+    </div>
+  )
+}
+
+// ---- suspect card ----
+export function SuspectCard({ s, onClick, active, mini }: { s: Suspect; onClick?: (e: MouseEvent) => void; active?: boolean; mini?: boolean }) {
+  const g = useGame()
+  const susp = g.state.suspicion[s.id]
+  return (
+    <Panel
+      className="suspect-card"
+      variant={active ? 'amber' : undefined}
+      style={{ padding: mini ? 8 : 12, cursor: onClick ? 'pointer' : 'default', minWidth: mini ? 0 : 168 }}
+      onClick={onClick}
+    >
+      <div class="row" style={{ gap: 10, alignItems: 'flex-start' }}>
+        <div style={{ background: 'var(--ink-1)', boxShadow: 'inset 0 0 0 2px var(--ink-0)', padding: 3, flexShrink: 0 }}>
+          <Portrait id={s.sprite} px={mini ? 3 : 4} gender={s.gender} />
+        </div>
+        <div class="col grow" style={{ gap: 5, minWidth: 0 }}>
+          <div>
+            <div class="t-display" style={{ fontSize: mini ? 9 : 11, color: 'var(--bone-3)' }}>{s.name}</div>
+            <div class="t-label" style={{ marginTop: 3 }}>{s.tag}</div>
+          </div>
+          {!mini && <div class="t-body dim" style={{ fontSize: 12, lineHeight: 1.35 }}>{s.role}</div>}
+          <SuspicionBar value={susp} compact />
+        </div>
+      </div>
+    </Panel>
+  )
+}
+
+// ---- evidence card with "develops in" reveal ----
+export function EvidenceCard({ e, onClick, active, develop, small }: { e: Evidence; onClick?: (ev: MouseEvent) => void; active?: boolean; develop?: boolean; small?: boolean }) {
+  const [revealed, setRevealed] = useState(!develop)
+  useEffect(() => {
+    if (develop) {
+      const t = setTimeout(() => setRevealed(true), 60)
+      return () => clearTimeout(t)
+    }
+  }, [develop])
+  return (
+    <Panel
+      variant={active ? 'amber' : undefined}
+      className="ev-card"
+      style={{ padding: small ? 8 : 11, cursor: onClick ? 'pointer' : 'default', position: 'relative', overflow: 'hidden' }}
+      onClick={onClick}
+    >
+      <div class="row" style={{ gap: 10, alignItems: 'center' }}>
+        <div style={{ background: 'var(--ink-1)', boxShadow: 'inset 0 0 0 2px var(--ink-0)', padding: 4, flexShrink: 0 }}>
+          <EvIcon icon={e.icon} px={small ? 2 : 3} />
+        </div>
+        <div class="col grow" style={{ gap: 4, minWidth: 0 }}>
+          <div class="t-display" style={{ fontSize: small ? 8 : 10, color: 'var(--bone-3)' }}>{e.name}</div>
+          <div class="row" style={{ gap: 6, alignItems: 'center' }}>
+            <Chip variant="amber" style={{ fontSize: 'calc(12px*var(--mono-scale))', padding: '2px 5px' }}>{e.type}</Chip>
+            <span class="t-mono dim nowrap" style={{ fontSize: 'calc(13px*var(--mono-scale))' }}>{e.time}</span>
+          </div>
+        </div>
+      </div>
+      {develop && !revealed && <span class="develop-veil" />}
+      {develop && <span class="develop-veil develop-veil--anim" />}
+    </Panel>
+  )
+}
+
+// ---- dialogue / speech panel with typewriter ----
+export function DialoguePanel({ who, text, speed = 26, onDone, instant, tag }: { who: string; text: string; speed?: number; onDone?: () => void; instant?: boolean; tag?: string | null }) {
+  const [out, done] = useTypewriter(text, speed, !instant)
+  useEffect(() => {
+    if (done && onDone) onDone()
+  }, [done])
+  return (
+    <Panel className="dialogue" style={{ padding: 16 }}>
+      <div class="between" style={{ marginBottom: 8 }}>
+        <span class="t-display amber" style={{ fontSize: 11 }}>{who}</span>
+        {tag && <Chip variant="ox">{tag}</Chip>}
+      </div>
+      <div class="t-body" style={{ minHeight: 56, color: 'var(--bone-2)' }}>
+        {out}
+        {!done && <span class="cursor" />}
+      </div>
+    </Panel>
+  )
+}
+
+// ---- type a string once, fire onDone ----
+export function TypeOnce({ text, speed, onDone }: { text: string; speed: number; onDone?: () => void }) {
+  const [out, done] = useTypewriter(text, speed, true)
+  const [fired, setFired] = useState(false)
+  useEffect(() => {
+    if (done && !fired) {
+      setFired(true)
+      onDone?.()
+    }
+  }, [done])
+  return (
+    <>
+      {out}
+      {!done && <span class="cursor" />}
+    </>
+  )
+}
+
+// ---- HINT trigger button ----
+export function HintButton() {
+  return (
+    <button class="hint-btn" onClick={() => window.dispatchEvent(new Event('toggle-hint'))} title="Ask your partner">
+      <span class="hint-btn__dot" /> HINT
+    </button>
+  )
+}
+
+// ---- top HUD bar ----
+// Navbar controls: optional Main-menu and Music toggle. Compact icon buttons so
+// they sit gracefully in the HUD bar (and on mobile) instead of floating mid-screen.
+export function Controls({ menu = false }: { menu?: boolean }) {
+  const g = useGame()
+  const [musicOn, setMusicOn] = useState(musicIsPlaying())
+  const icon = (label: string, title: string, on: boolean, onClick: () => void) => (
+    <button
+      class="hint-btn"
+      title={title}
+      aria-label={title}
+      onClick={onClick}
+      style={{ width: 30, height: 28, padding: 0, justifyContent: 'center', fontSize: '0.95rem', opacity: on ? 1 : 0.5 }}
+    >
+      {label}
+    </button>
+  )
+  return (
+    <div class="row" style={{ gap: 5, alignItems: 'center' }}>
+      {menu && (g.mode === 'mobile'
+        ? icon('≡', 'Main menu', true, () => g.nav('title'))
+        : <Btn sm variant="ghost" onClick={() => g.nav('title')}>Menu</Btn>)}
+      {icon('♪', musicOn ? 'Music: on' : 'Music: off', musicOn, () => setMusicOn(toggleMusic()))}
+    </div>
+  )
+}
+
+export function Hud({ title, sub, right }: { title: string; sub?: string; right?: ComponentChildren }) {
+  const g = useGame()
+  return (
+    <div class="hud">
+      <div class="hud__left">
+        <button class="hud-badge" onClick={() => g.nav('board')} title="Investigation Board">
+          <span class="t-display" style={{ fontSize: 9, color: 'var(--ink-0)' }}>CASE</span>
+          <span class="t-mono" style={{ fontSize: 'calc(13px*var(--mono-scale))', color: 'var(--ink-0)' }}>{g.case.id}</span>
+        </button>
+        <div class="col" style={{ gap: 2, minWidth: 0 }}>
+          <div class="t-display hud__title">{title}</div>
+          {sub && <div class="t-label hud__sub">{sub}</div>}
+        </div>
+      </div>
+      <div class="hud__right">
+        {right}
+        <Controls menu />
+        <HintButton />
+      </div>
+    </div>
+  )
+}
+
+// ---- bottom nav (mobile) ----
+const NAV_ITEMS = [
+  { id: 'briefing', label: 'CASE', icon: 'file' },
+  { id: 'board', label: 'BOARD', icon: 'board' },
+  { id: 'suspects', label: 'SUSPECTS', icon: 'people' },
+  { id: 'evidence', label: 'EVIDENCE', icon: 'box' },
+  { id: 'timeline', label: 'TIME', icon: 'clock' },
+] as const
+
+function NavGlyph({ icon, on }: { icon: string; on: boolean }) {
+  const c = on ? 'var(--ink-0)' : 'var(--bone-1)'
+  const P = (d: JSX.CSSProperties) => <span style={{ position: 'absolute', ...d }} />
+  return (
+    <span style={{ position: 'relative', width: 18, height: 18, display: 'inline-block' }}>
+      {icon === 'file' && (<>{P({ left: 4, top: 2, width: 10, height: 14, background: 'transparent', boxShadow: `inset 0 0 0 2px ${c}` })}{P({ left: 6, top: 6, width: 6, height: 2, background: c })}{P({ left: 6, top: 10, width: 6, height: 2, background: c })}</>)}
+      {icon === 'board' && (<>{P({ left: 2, top: 3, width: 14, height: 12, background: 'transparent', boxShadow: `inset 0 0 0 2px ${c}` })}{P({ left: 6, top: 7, width: 3, height: 3, background: c })}{P({ left: 11, top: 9, width: 3, height: 3, background: c })}</>)}
+      {icon === 'people' && (<>{P({ left: 3, top: 3, width: 5, height: 5, background: c })}{P({ left: 3, top: 9, width: 7, height: 6, background: c })}{P({ left: 11, top: 4, width: 4, height: 4, background: c })}{P({ left: 10, top: 9, width: 6, height: 6, background: c })}</>)}
+      {icon === 'box' && (<>{P({ left: 3, top: 4, width: 12, height: 11, background: 'transparent', boxShadow: `inset 0 0 0 2px ${c}` })}{P({ left: 3, top: 4, width: 12, height: 2, background: c })}{P({ left: 8, top: 8, width: 2, height: 4, background: c })}</>)}
+      {icon === 'clock' && (<>{P({ left: 3, top: 3, width: 12, height: 12, background: 'transparent', boxShadow: `inset 0 0 0 2px ${c}` })}{P({ left: 8, top: 6, width: 2, height: 4, background: c })}{P({ left: 8, top: 9, width: 4, height: 2, background: c })}</>)}
+    </span>
+  )
+}
+
+export function BottomNav() {
+  const g = useGame()
+  const cur = g.state.screen
+  return (
+    <nav class="bottom-nav">
+      {NAV_ITEMS.map((it) => {
+        const on = cur === it.id || (it.id === 'suspects' && cur === 'interro')
+        return (
+          <button
+            key={it.id}
+            class={'nav-btn' + (on ? ' nav-btn--on' : '')}
+            onClick={() => g.nav(it.id)}
+          >
+            <span class="nav-btn__glyph"><NavGlyph icon={it.icon} on={on} /></span>
+            <span class="t-display nav-btn__lbl">{it.label}</span>
+          </button>
+        )
+      })}
+    </nav>
+  )
+}

web/src/ui/tweaks.tsx

@@ -1,76 +0,0 @@
-// Slim in-app tweaks sheet (palette / FX / pixel scale / mood / fonts / typewriter / rain),
-// styled in the noir system and persisted to localStorage via the store. Opened from the
-// navbar gear (Controls). No host/sandbox protocol — production-local only.
-import { useGame } from '../store'
-import type { Tweaks } from '../store'
-
-const PALETTES: [Tweaks['palette'], string[]][] = [
-  ['sodium', ['#0d1117', '#2d4a52', '#e0a44c', '#8a2a2a']],
-  ['harbor', ['#0a0e14', '#3a6b6b', '#f0b860', '#a33636']],
-  ['violet', ['#0e0c14', '#46506b', '#d99a3c', '#922d3a']],
-]
-
-function Seg<T extends string>({ value, options, onChange }: { value: T; options: T[]; onChange: (v: T) => void }) {
-  return (
-    <div class="viewbar" style={{ position: 'static' }}>
-      <div class="seg">
-        {options.map((o) => (
-          <button key={o} class={value === o ? 'on' : ''} onClick={() => onChange(o)}>{o}</button>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function Row({ label, children }: { label: string; children: preact.ComponentChildren }) {
-  return (
-    <div class="col" style={{ gap: 6 }}>
-      <span class="t-label">{label}</span>
-      {children}
-    </div>
-  )
-}
-
-// The settings sheet, opened from the navbar gear (Controls). Caller owns the open state.
-export function TweaksSheet({ onClose }: { onClose: () => void }) {
-  const g = useGame()
-  const t = g.state.tweaks
-
-  return (
-    <div
-      class="panel panel--amber"
-      style={{ position: 'fixed', right: 14, top: 56, zIndex: 90, width: 248, maxHeight: '80vh', overflowY: 'auto' }}
-    >
-      <div class="between" style={{ marginBottom: 12 }}>
-        <span class="t-display amber" style={{ fontSize: 11 }}>TWEAKS</span>
-        <button class="assistant__x" onClick={onClose}>✕</button>
-      </div>
-      <div class="col" style={{ gap: 14 }}>
-        <Row label="Palette">
-          <div style={{ display: 'flex', gap: 8 }}>
-            {PALETTES.map(([id, cols]) => (
-              <button key={id} onClick={() => g.setTweak('palette', id)} style={{ flex: 1, border: 0, padding: 0, cursor: 'pointer', background: 'transparent' }} title={id}>
-                <div style={{ display: 'flex', height: 24, boxShadow: t.palette === id ? '0 0 0 2px var(--amber-2)' : '0 0 0 2px var(--ink-0)' }}>
-                  {cols.map((c, i) => <span key={i} style={{ flex: 1, background: c }} />)}
-                </div>
-              </button>
-            ))}
-          </div>
-        </Row>
-        <Row label="Precinct mood"><Seg value={t.mood} options={['night', 'day']} onChange={(v) => g.setTweak('mood', v)} /></Row>
-        <Row label="FX intensity"><Seg value={t.fx} options={['low', 'med', 'high']} onChange={(v) => g.setTweak('fx', v)} /></Row>
-        <Row label="Bitmap fonts"><Seg value={t.fonts} options={['crisp', 'terminal', 'stamp']} onChange={(v) => g.setTweak('fonts', v)} /></Row>
-        <Row label={`Pixel scale · ${t.pixelScale}x`}>
-          <input type="range" min={0.75} max={1.5} step={0.25} value={t.pixelScale} onInput={(e) => g.setTweak('pixelScale', Number((e.target as HTMLInputElement).value))} style={{ width: '100%' }} />
-        </Row>
-        <Row label={`Typewriter · ${t.typeSpeed}ms`}>
-          <input type="range" min={6} max={44} step={2} value={t.typeSpeed} onInput={(e) => g.setTweak('typeSpeed', Number((e.target as HTMLInputElement).value))} style={{ width: '100%' }} />
-        </Row>
-        <div class="between">
-          <span class="t-label">Pixel rain</span>
-          <button class={t.rain ? 'pbtn pbtn--amber pbtn--sm' : 'pbtn pbtn--ghost pbtn--sm'} onClick={() => g.setTweak('rain', !t.rain)}>{t.rain ? 'ON' : 'OFF'}</button>
-        </div>
-      </div>
-    </div>
-  )
-}