docs: intro/menu polish + audio plans (this session)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

docs/superpowers/plans/2026-06-14-frame-blend-audible-music.md

@@ -0,0 +1,162 @@
+# Bigger Blended Frame + Audible Seamless Dread Music
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development or superpowers:executing-plans. Steps use checkbox (`- [ ]`).
+
+**Goal:** (1) Enlarge the cinematic frame and feather **all** edges so the image no longer looks small and no rectangular cut shows. (2) Fix the menu music: make it audible on any speaker (it was near-inaudible pure sub-bass) and kill the loop seam (a fade-dip + non-integer LFO made an audible cut every loop), keeping the deep-dread direction.
+
+**Architecture:** `styles.css` for the frame (size + mask); `sting.py` `menu_loop_wav_bytes()` rewrite + a small playback-volume bump in `app.py`'s `_HEAD_JS`. No model/state/logic.
+
+**Tech Stack:** CSS `mask-image` radial fade + `min()`/`vh` sizing; numpy audio synth (integer-cycle components for a gapless loop).
+
+**Verification note:** Visual by eye, audio **by ear** — both by the user (`.venv-tts`); headless/audio unverifiable here (CLAUDE.md). Task 3 is the checklist.
+
+**Locked (brainstorming):** music = *pure dread drone, made audible + seamless* (no melody, no wind); frame = *bigger + all edges feathered*.
+
+---
+
+### Task 1: Bigger frame, all edges feathered
+
+**Files:** Modify `styles.css` (§25 `#intro-frame`, `#intro-image`; §23 `#menu-frame`)
+
+Enlarge the frame and start the mask fade earlier / reach transparent further in, so every edge dissolves into the blurred backdrop (same scene), and the sharp area is larger.
+
+- [ ] **Step 1: Enlarge the intro frame**
+
+In §25 `#intro-frame`, change `width: min(1080px, 92vw);` to `width: min(1280px, 95vw);` and `max-height: 74vh;` to `max-height: 82vh;`.
+
+- [ ] **Step 2: Stronger, all-edge mask on the intro image**
+
+In §25 `#intro-image`, replace both mask lines with:
+
+```css
+    -webkit-mask-image: radial-gradient(ellipse 76% 78% at 50% 47%, #000 30%, transparent 86%);
+    mask-image: radial-gradient(ellipse 76% 78% at 50% 47%, #000 30%, transparent 86%);
+```
+
+- [ ] **Step 3: Match the menu frame (size + mask)**
+
+In §23 `#menu-frame`, change `width: min(1080px, 92vw);` to `width: min(1280px, 95vw);` and `max-height: 74vh;` to `max-height: 82vh;`, and replace both mask lines with:
+
+```css
+    -webkit-mask-image: radial-gradient(ellipse 76% 78% at 50% 47%, #000 30%, transparent 86%);
+    mask-image: radial-gradient(ellipse 76% 78% at 50% 47%, #000 30%, transparent 86%);
+```
+
+- [ ] **Step 4: Sanity — app suite green**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py -q`
+Expected: PASS
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add styles.css
+git commit -m "style(frames): larger frame, feather all edges into the backdrop"
+```
+
+---
+
+### Task 2: Audible, seamless dread drone
+
+**Files:**
+- Modify: `sting.py` (`menu_loop_wav_bytes()`)
+- Modify: `app.py` (`_HEAD_JS` playback volume, 2 spots)
+- Test: `tests/test_sting.py`
+
+The bed was pure sub-bass (inaudible on laptop speakers) and faded to silence at the loop ends (an audible dip). Add a low-mid hollow-fifth body that any speaker reproduces, raise the level, and make every component integer-cycle over the 16 s loop so **no fade is needed** — the waveform is continuous at the seam.
+
+- [ ] **Step 1: Rewrite `menu_loop_wav_bytes()`**
+
+In `sting.py`, replace the whole `menu_loop_wav_bytes()` function with:
+
+```python
+def menu_loop_wav_bytes() -> bytes:
+    """Deep dread menu bed, made audible: a dark hollow-fifth body in the
+    low-mids (heard on any speaker) over a felt sub, with a slow dissonant
+    swell and a distant toll. Seamless loop — every sustained component is
+    integer-cycle over the 16 s loop, so no fade-dip is needed at the seam."""
+    sr = 22050
+    dur = 16.0
+    t = np.linspace(0, dur, int(sr * dur), endpoint=False)
+
+    # slow breathing, exactly 2 cycles over the loop (continuous at the seam)
+    breath = 0.8 + 0.2 * np.sin(2 * np.pi * (2.0 / dur) * t)
+
+    # 1. sub (felt): 41 + 27.5 Hz  (41*16, 27.5*16 are integers)
+    sub = (np.sin(2 * np.pi * 41.0 * t)
+           + 0.6 * np.sin(2 * np.pi * 27.5 * t)) * 0.16 * breath
+
+    # 2. audible body: a hollow fifth in the low-mids (65.5/98/131 Hz + harmonics)
+    def tone(f):
+        return (np.sin(2 * np.pi * f * t)
+                + 0.4 * np.sin(2 * np.pi * 2 * f * t)
+                + 0.18 * np.sin(2 * np.pi * 3 * f * t))
+    body = (tone(65.5) + 0.8 * tone(98.0) + 0.5 * tone(131.0)) * 0.07 * breath
+
+    # 3. slow dissonant swell: two close tones beating (minor-second tension)
+    swell_env = np.sin(np.pi * np.clip(t / dur, 0, 1)) ** 1.5      # 0 at both ends
+    swell = (np.sin(2 * np.pi * 110.0 * t)
+             + np.sin(2 * np.pi * 116.5 * t)) * 0.05 * swell_env
+
+    # 4. distant toll ~every 5.3 s: struck tone, long decay, far and quiet
+    toll = np.zeros_like(t)
+    for c in (1.0, 6.3, 11.6):
+        env = np.where(t >= c, np.exp(-1.8 * (t - c)), 0.0)
+        strike = (np.sin(2 * np.pi * 98.0 * t)
+                  + 0.5 * np.sin(2 * np.pi * 147.0 * t)
+                  + 0.25 * np.sin(2 * np.pi * 196.0 * t))
+        toll += strike * env
+    echo = np.zeros_like(t)                                        # room tail
+    for delay, gain in ((0.28, 0.30), (0.56, 0.15)):
+        ds = int(delay * sr)
+        echo[ds:] += toll[:-ds] * gain
+    toll = (toll + echo) * 0.14
+
+    mix = sub + body + swell + toll
+    mix = np.tanh(1.5 * mix)
+    mix = mix / np.max(np.abs(mix)) * 0.5      # audible; no end-fade -> seamless
+    return _wav(mix, sr)
+```
+
+- [ ] **Step 2: Bump the playback volume so the bed is present**
+
+In `app.py` `_HEAD_JS`, there are two spots with `0.15`. In `startMenuMusic` change `menuAudio.volume = st.muted ? 0 : 0.15;` to `menuAudio.volume = st.muted ? 0 : 0.2;`. In the mute-button handler change `if (menuAudio) { menuAudio.muted = st.muted; menuAudio.volume = st.muted ? 0 : 0.15; }` to use `0.2` as well.
+
+- [ ] **Step 3: Run the sting tests**
+
+Run: `.venv/Scripts/python -m pytest tests/test_sting.py -q`
+Expected: PASS
+
+- [ ] **Step 4: Write a preview to listen (user)**
+
+Run: `.venv/Scripts/python sting.py` → writes `menu_loop_preview.wav`. The user listens: audible body, distant toll, and — playing it on loop — **no dip/click at the seam**.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add sting.py app.py
+git commit -m "feat(audio): audible seamless dread drone + louder menu bed"
+```
+
+---
+
+### Task 3: Live verification (user — eye + ear)
+
+**Files:** none (manual).
+
+- [ ] **Step 1: Launch** — `.venv-tts/Scripts/python app.py` with Ollama running.
+
+- [ ] **Step 2: Confirm (eye)** — the frame is noticeably **larger**; **all** edges dissolve into the blurred forest (no rectangle, no visible cut) on menu and intro cards.
+
+- [ ] **Step 3: Confirm (ear)** — the menu music is clearly **audible** (dark low-mid body + distant toll), slow and heavy, and the loop has **no dip/click** at the seam.
+
+- [ ] **Step 4: Tune if needed** — frame `max-height` / mask `%`, or music levels (`* 0.5`, body `0.07`), toll spacing, or JS `0.2`. Commit any tweak.
+
+---
+
+## Self-Review
+
+- **Spec coverage:** image looked small + edges cut → bigger frame + all-edge feather (Task 1) ✅; music inaudible → low-mid hollow-fifth body + level up + JS volume up (Task 2) ✅; loop seam → integer-cycle components + no end-fade, swell/toll zero at the seam (Task 2) ✅; direction kept (pure dread, no wind/melody) ✅.
+- **Placeholder scan:** none; full function + concrete values.
+- **Seam reasoning:** sustained tones (41, 27.5, 65.5/131/196, 98/294, 110, 116.5 Hz) all have `f * 16` integer → continuous value & slope at the loop point; `breath` = 2 cycles over `dur`; `swell_env` and every `toll` strike are ~0 at both ends; `tanh` is memoryless so it preserves periodicity. Hence no fade is required and none is applied.
+- **Name consistency:** `menu_loop_wav_bytes()` keeps its signature + `_wav` helper; the two `0.15`→`0.2` edits are the only `menuAudio.volume` assignments; mask/size edits target the verified `#intro-frame`/`#intro-image`/`#menu-frame` rules.

docs/superpowers/plans/2026-06-14-intro-cinematic-letterbox.md

@@ -0,0 +1,376 @@
+# Intro Cinematic Letterbox — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Reframe the opening intro cards as a centered cinematic window with black letterbox bands, a blurred "ghost of the card" backdrop filling those bands, and a repositioned subtitle/choice layout — so the images stop bleeding full-screen, the card-1 traveler is visible, and the whole sequence reads as a polished cutscene.
+
+**Architecture:** Presentation-only change across three coupled surfaces that must land together: (1) the `gr.HTML` markup string in `app.py` gains two wrapper divs (`#intro-bg` ambient backdrop + `#intro-frame` centered window); (2) the `<head>` JS `showIntroCard` sets the same image on the backdrop and applies a per-card focal `background-position`; (3) `styles.css` §25 is rewritten for the letterbox frame, blurred backdrop, softer image gradient, and frame-anchored subtitle/choice. No model, state, or pacing logic changes. Decisions are locked from brainstorming: **blurred ambient backdrop** + **~16:10 wide cinematic frame**.
+
+**Tech Stack:** Gradio 6.x `gr.HTML` + `gr.Column`; vanilla `<head>` JS injected via `launch(head=...)`; pure CSS (`aspect-ratio`, `filter: blur`, `object`/`background` cover); pytest for the one guard test.
+
+**Verification note:** Per CLAUDE.md, CSS/JS rendering and audio are verified **live by the user** (`.venv-tts` + Ollama) — headless screenshots are unreliable here. Only Task 1 has an automated test (a structural guard); Tasks 2–4 are confirmed in the Task 5 live playthrough.
+
+---
+
+### Task 1: Per-card focal positions + card data
+
+**Files:**
+- Modify: `app.py` (near `_INTRO_IMAGES`, ~line 214; and the cards-JSON build, ~line 446-448)
+- Test: `tests/test_app.py`
+
+Each source image has a different subject placement, and a 16:10 cover-crop of a 4:3 / 1:1 source will clip the wrong part unless we steer it. Card 0 (*threshold*) has the hooded traveler at the bottom; card 3 (*meeting*) is a 1:1 face whose eyes sit in the upper-middle. A per-card `background-position` keeps each subject in frame.
+
+- [ ] **Step 1: Write the failing test**
+
+In `tests/test_app.py`, add:
+
+```python
+def test_intro_pos_aligns_with_cards():
+    import app
+    # one focal position per card, all non-empty strings
+    assert len(app._INTRO_POS) == len(app.INTRO_CARDS)
+    assert all(isinstance(p, str) and p for p in app._INTRO_POS)
+    # the card payload carries img, text, and pos for every card
+    import json
+    cards = json.loads(app._INTRO_CARDS_JSON)
+    assert len(cards) == len(app.INTRO_CARDS)
+    assert all({"img", "text", "pos"} <= set(c) for c in cards)
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py::test_intro_pos_aligns_with_cards -v`
+Expected: FAIL with `AttributeError: module 'app' has no attribute '_INTRO_POS'`
+
+- [ ] **Step 3: Add `_INTRO_POS` next to `_INTRO_IMAGES`**
+
+In `app.py`, immediately after the `_INTRO_IMAGES = [ ... ]` list (ends ~line 219), add:
+
+```python
+# Per-card focal point for the 16:10 cover-crop (CSS background-position).
+# Card order matches INTRO_CARDS: threshold, keeps, waiting, meeting.
+_INTRO_POS = ["center 80%", "center", "center", "center 32%"]
+```
+
+- [ ] **Step 4: Thread `pos` into the cards JSON**
+
+In `app.py`, change the cards-JSON build (~line 446-448) from:
+
+```python
+_INTRO_CARDS_JSON = json.dumps(
+    [{"img": _INTRO_IMAGES[i], "text": INTRO_CARDS[i]} for i in range(len(INTRO_CARDS))]
+)
+```
+
+to:
+
+```python
+_INTRO_CARDS_JSON = json.dumps(
+    [{"img": _INTRO_IMAGES[i], "text": INTRO_CARDS[i], "pos": _INTRO_POS[i]}
+     for i in range(len(INTRO_CARDS))]
+)
+```
+
+- [ ] **Step 5: Run test to verify it passes**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py::test_intro_pos_aligns_with_cards -v`
+Expected: PASS
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add app.py tests/test_app.py
+git commit -m "feat(intro): per-card focal positions for cinematic crop"
+```
+
+---
+
+### Task 2: Restructure the intro markup (backdrop + frame)
+
+**Files:**
+- Modify: `app.py` (the `intro_view` `gr.HTML`, ~line 937-942)
+
+The current markup is `#intro-stage > #intro-image + #intro-panel`. We wrap the image in a centered `#intro-frame` and add a sibling `#intro-bg` for the blurred backdrop. The subtitle panel moves *inside* the frame so it anchors to the frame's bottom edge (not the viewport).
+
+- [ ] **Step 1: Replace the intro HTML string**
+
+In `app.py`, change:
+
+```python
+        gr.HTML(
+            '<div id="intro-stage">'
+            '  <div id="intro-image"></div>'
+            '  <div id="intro-panel"><p id="intro-text"></p></div>'
+            '</div>'
+        )
+```
+
+to:
+
+```python
+        gr.HTML(
+            '<div id="intro-stage">'
+            '  <div id="intro-bg"></div>'
+            '  <div id="intro-frame">'
+            '    <div id="intro-image"></div>'
+            '    <div id="intro-panel"><p id="intro-text"></p></div>'
+            '  </div>'
+            '</div>'
+        )
+```
+
+The `#intro-choice` and `#intro-skip` Gradio buttons (below the `gr.HTML`) are **unchanged** — they stay absolute-positioned within `#intro-stage` via CSS.
+
+- [ ] **Step 2: Verify the app still imports**
+
+Run: `.venv/Scripts/python -c "import app; print('intro-bg' in app.__dict__ or 'ok')"`
+Expected: prints `ok` (no import error; the string change can't break import, this just confirms the module loads)
+
+- [ ] **Step 3: Run the full suite to confirm nothing regressed**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py -q`
+Expected: PASS (all existing app tests green)
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add app.py
+git commit -m "feat(intro): wrap card in centered frame + ambient backdrop div"
+```
+
+---
+
+### Task 3: JS — drive the backdrop image + per-card focal position
+
+**Files:**
+- Modify: `app.py` (the `showIntroCard` function inside `_HEAD_JS`, ~line 342-350)
+
+`showIntroCard` currently sets only `#intro-image`'s background. It must now also set `#intro-bg`'s background to the same URL (so the blurred backdrop matches the card) and apply the card's focal `pos` to `#intro-image`.
+
+- [ ] **Step 1: Replace `showIntroCard`**
+
+In `app.py`, inside the `_HEAD_JS` string, change:
+
+```javascript
+  function showIntroCard(cardIndex, isLast) {
+    var card = INTRO[cardIndex];
+    var img = document.getElementById('intro-image');
+    var txt = document.getElementById('intro-text');
+    var choice = document.getElementById('intro-choice');
+    if (choice) choice.classList.remove('intro-choice-show');
+    if (img) img.style.backgroundImage = card.img ? "url('" + card.img + "')" : '';
+    if (txt) typeLine(txt, card.text, function () { if (isLast) revealChoice(); });
+  }
+```
+
+to:
+
+```javascript
+  function showIntroCard(cardIndex, isLast) {
+    var card = INTRO[cardIndex];
+    var img = document.getElementById('intro-image');
+    var bg = document.getElementById('intro-bg');
+    var txt = document.getElementById('intro-text');
+    var choice = document.getElementById('intro-choice');
+    if (choice) choice.classList.remove('intro-choice-show');
+    var url = card.img ? "url('" + card.img + "')" : '';
+    if (img) {
+      img.style.backgroundImage = url;
+      img.style.backgroundPosition = card.pos || 'center';
+    }
+    if (bg) bg.style.backgroundImage = url;
+    if (txt) typeLine(txt, card.text, function () { if (isLast) revealChoice(); });
+  }
+```
+
+- [ ] **Step 2: Confirm the shipped JS contains the new lines**
+
+Run: `.venv/Scripts/python -c "import app; assert 'intro-bg' in app._HEAD_JS and 'backgroundPosition' in app._HEAD_JS; print('js ok')"`
+Expected: prints `js ok`
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add app.py
+git commit -m "feat(intro): JS sets ambient backdrop + per-card focal position"
+```
+
+---
+
+### Task 4: CSS — rewrite §25 for the cinematic letterbox
+
+**Files:**
+- Modify: `styles.css` (§25, the block from `#intro-view` through `#intro-choice.intro-choice-show`)
+
+Rewrite the **layout** portion of §25. Keep the existing `.intro-tablet`, `.intro-tablet:hover`, `#intro-skip`, and `#intro-skip:hover` rules **as-is** (they style the buttons, not the layout).
+
+- [ ] **Step 1: Replace the §25 layout block**
+
+In `styles.css`, replace everything from `#intro-view {` down to the end of `#intro-choice.intro-choice-show { ... }` with:
+
+```css
+/* ── 25. Opening intro sequence (cinematic letterbox) ── */
+#intro-view {
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: #000;
+}
+#intro-view.hide, #intro-view.hidden { display: none !important; }
+
+#intro-stage {
+    position: relative;
+    flex: 1;
+    min-height: 100vh;
+    cursor: pointer;            /* click anywhere to advance */
+    overflow: hidden;
+    display: flex;
+    align-items: center;        /* center the frame -> letterbox bands */
+    justify-content: center;
+    background: #000;
+}
+
+/* blurred ambient backdrop: a ghost of the same card, fills the bands */
+#intro-bg {
+    position: absolute;
+    inset: -6%;                 /* overscan so blur edges never show a gap */
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    filter: grayscale(1) blur(42px) brightness(0.32);
+    transform: scale(1.08);
+    z-index: 0;
+}
+#intro-bg::after {              /* darken so the framed card pops */
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse at center,
+                rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.80) 100%);
+}
+
+/* centered cinematic window (~16:10) */
+#intro-frame {
+    position: relative;
+    z-index: 1;
+    width: min(1080px, 92vw);
+    aspect-ratio: 16 / 10;
+    max-height: 74vh;
+    overflow: hidden;
+    border-radius: 3px;
+    box-shadow: 0 0 60px 12px rgba(0,0,0,0.7),
+                0 0 0 1px rgba(120,110,140,0.12);
+}
+
+#intro-image {
+    position: absolute;
+    inset: 0;
+    background-position: center;   /* JS overrides with the card focal point */
+    background-size: cover;
+    background-repeat: no-repeat;
+    /* fallback when a card image is missing/empty: */
+    background-color: #04040a;
+    background-image: radial-gradient(ellipse at 50% 35%, #16131c 0%, #04040a 80%);
+    filter: grayscale(1) brightness(0.9);
+}
+#intro-image::after {           /* soft bottom darkening so the subtitle reads */
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(transparent 55%, rgba(4,4,10,0.85) 96%);
+}
+
+/* subtitle panel: anchored to the bottom of the frame */
+#intro-panel {
+    position: absolute;
+    left: 50%;
+    bottom: 16px;
+    transform: translateX(-50%);
+    width: min(680px, 88%);
+    z-index: 2;
+    border: 10px solid transparent;
+    border-image: var(--stone-frame) 30;
+    background: var(--stone-base);
+    padding: 15px 22px;
+}
+#intro-text {
+    font-family: Georgia, serif;
+    font-size: 1.05rem;
+    line-height: 1.6;
+    color: #d6d0e0;
+    margin: 0;
+    min-height: 3.2em;          /* reserve height so the panel doesn't grow while typing */
+}
+
+/* choice tablets: in the lower letterbox band, below the frame */
+#intro-choice {
+    position: absolute;
+    left: 50%;
+    bottom: 3.5%;
+    transform: translateX(-50%);
+    z-index: 3;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    opacity: 0;                 /* hidden until the last card finishes typing */
+    pointer-events: none;
+    transition: opacity 0.6s ease;
+}
+#intro-choice.intro-choice-show {
+    opacity: 1;
+    pointer-events: auto;
+}
+```
+
+- [ ] **Step 2: Confirm the `.intro-tablet` / `#intro-skip` rules survived**
+
+Run: `grep -n "intro-tablet\|#intro-skip" styles.css`
+Expected: the `.intro-tablet`, `.intro-tablet:hover`, `#intro-skip`, `#intro-skip:hover` rules still present below the replaced block.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add styles.css
+git commit -m "feat(intro): cinematic letterbox frame + blurred backdrop CSS"
+```
+
+---
+
+### Task 5: Live verification (user)
+
+**Files:** none (manual)
+
+Headless verification is unreliable here (CLAUDE.md). The user runs the app and confirms by eye. This task is a checklist for the live playthrough, not an automated step.
+
+- [ ] **Step 1: Launch with voice + a real model**
+
+Run (user): `.venv-tts/Scripts/python app.py` with Ollama running (`qwen3:8b`).
+
+- [ ] **Step 2: Confirm the letterbox layout**
+
+- The card sits in a **centered window** with black bands above and below (not full-bleed).
+- The bands show a **blurred, darkened ghost** of the same card (not dead black).
+- **Card 1 (threshold):** the hooded traveler is visible (focal `center 80%` keeps him in frame).
+- **Card 4 (meeting):** the child's face is framed, not overwhelming; eyes + reaching hand visible (`center 32%`).
+- The stone-framed **subtitle panel** sits at the bottom of the frame; the **choice tablets** appear in the lower band, below the frame, not over the child.
+- **skip** still works (top band); click-to-advance / click-to-complete still works.
+- Tester run shows only Threshold + Meeting; Full shows all four.
+
+- [ ] **Step 3: Tune focal points if needed**
+
+If a subject is still clipped, adjust the matching entry in `_INTRO_POS` (Task 1) — e.g. nudge `"center 32%"` → `"center 28%"`. Re-run. Commit any tweak:
+
+```bash
+git add app.py
+git commit -m "tune(intro): adjust card focal positions after live check"
+```
+
+---
+
+## Self-Review
+
+- **Spec coverage:** images smaller (centered 16:10 frame, Task 4) ✅; black bands top/bottom (letterbox via flex-center, Task 4) ✅; background treatment (blurred ambient backdrop, Tasks 2-4) ✅; better arranged (panel anchored to frame, choices in lower band, Task 4) ✅; card-1 character visible (focal `center 80%` + softer gradient + more visible frame, Tasks 1+4) ✅.
+- **Placeholder scan:** no TBD/TODO; every code step shows full code.
+- **Type/name consistency:** `_INTRO_POS` (Task 1) is read by the cards-JSON (Task 1) and consumed as `card.pos` in JS (Task 3); `#intro-bg` / `#intro-frame` created in markup (Task 2), referenced in JS (Task 3) and CSS (Task 4) with identical ids.

docs/superpowers/plans/2026-06-14-intro-menu-blend-music.md

@@ -0,0 +1,244 @@
+# Focus-Pull Blend, Button Bands, Menu Legibility & Dread Music
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development or superpowers:executing-plans. Steps use checkbox (`- [ ]`).
+
+**Goal:** Four polish items from the live review: (1) kill the full-width hover band on `skip` and `close`; (2) make the faint menu lines (`AN ADVENTURE…`, `A LOST CHILD WAITS…`, `How to Play`) legible over the bright fog; (3) blend the sharp central frame into the blurred backdrop (focus-pull, no floating rectangle); (4) replace the windy menu music with a deep, slow, oppressive dread drone.
+
+**Architecture:** Presentation + one audio rewrite. `styles.css` for (1)(2)(3); `sting.py` `menu_loop_wav_bytes()` rewrite for (4). No model/state/logic.
+
+**Tech Stack:** CSS (`mask-image` radial fade, `width:fit-content` to defeat Gradio's full-width buttons, text-shadow halos); numpy audio synth.
+
+**Verification note:** Visuals by eye, audio **by ear** — both by the user (`.venv-tts`); headless/audio can't be verified here (CLAUDE.md). Task 5 is the checklist.
+
+**Locked decisions (brainstorming):** frame↔backdrop = *focus-pull, no border*; music = *deep dread drone (no wind)*. Skip/close fix = CSS width (no markup churn).
+
+---
+
+### Task 1: Kill the full-width hover band on `skip` and `close`
+
+**Files:** Modify `styles.css` (§25 `#intro-skip`; §23/24 add `#btn-howto-close`)
+
+Gradio buttons default to full width, so their hover/pill background spans the screen. Constraining the button to `fit-content` makes the background hug the text. (`How to Play` is already an HTML `.menu-opt` row, so only `skip` and `close` remain real buttons.)
+
+- [ ] **Step 1: Constrain the skip pill**
+
+In `styles.css` §25 `#intro-skip`, add these two lines inside the rule:
+
+```css
+    width: fit-content !important;
+    min-width: 0 !important;
+```
+
+(It stays `position:absolute; top:18px; right:22px`, so it hugs its text at the top-right.)
+
+- [ ] **Step 2: Constrain the close button**
+
+In `styles.css`, near the other `#btn-howto*` rules, add:
+
+```css
+#btn-howto-close {
+    display: block !important;
+    width: fit-content !important;
+    min-width: 0 !important;
+    margin: 6px auto 0 !important;
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add styles.css
+git commit -m "style: skip/close hug their text, no full-width hover band"
+```
+
+---
+
+### Task 2: Menu line legibility (halos + stronger scrim)
+
+**Files:** Modify `styles.css` (§23: `#menu-card::before`, `.menu-eyebrow`, `.menu-tag`, `.menu-opt-muted`, `.menu-credit`)
+
+These lines wash out because they're light-on-bright-fog. Add dark halos (so they read on any value) and deepen the card scrim.
+
+- [ ] **Step 1: Deepen + widen the scrim**
+
+In `#menu-card::before`, change `inset: -48px -72px;` to `inset: -56px -90px;` and the gradient to:
+
+```css
+    background: radial-gradient(ellipse at center,
+                rgba(4,4,10,0.82) 0%, rgba(4,4,10,0.0) 70%);
+```
+
+- [ ] **Step 2: Halo the eyebrow and tagline**
+
+- `.menu-eyebrow`: change its `text-shadow` to `text-shadow: 0 0 12px rgba(0,0,0,0.95), 0 1px 4px #000;`
+- `.menu-tag`: change its `text-shadow` to `text-shadow: 0 0 14px rgba(0,0,0,0.9), 0 1px 6px #000;`
+
+- [ ] **Step 3: Brighten + halo "How to Play" and the credit**
+
+- `.menu-opt-muted`: change `color: #7a7290;` to `color: #b8b0cc;` and add `text-shadow: 0 0 10px #000, 0 1px 3px #000;`
+- `.menu-opt-muted:hover`: change `color: #b0a8c8;` to `color: #e0d9ee;`
+- `.menu-credit`: change `color: #5a5070;` to `color: #8c84a4;` and add `text-shadow: 0 1px 6px #000;`
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add styles.css
+git commit -m "style(menu): dark halos + deeper scrim so faint lines read"
+```
+
+---
+
+### Task 3: Focus-pull blend (dissolve the frame into the backdrop)
+
+**Files:** Modify `styles.css` (§25 `#intro-image`, `#intro-frame`, remove `#intro-frame::after`; §23 `#menu-frame`, remove `#menu-frame::after`)
+
+The sharp frame reads as a rectangle on a separate dark blur. Masking the sharp image's edges to transparent reveals the **same** blurred scene behind it, so the sharp center dissolves into its own blur — one continuous forest, no border, no seam. Remove the card border/shadow and the previous fog `::after` (the mask replaces it).
+
+- [ ] **Step 1: Mask the intro image and strip the frame chrome**
+
+In §25 `#intro-image`, add:
+
+```css
+    -webkit-mask-image: radial-gradient(ellipse 72% 74% at 50% 46%, #000 50%, transparent 88%);
+    mask-image: radial-gradient(ellipse 72% 74% at 50% 46%, #000 50%, transparent 88%);
+```
+
+In §25 `#intro-frame`, change `border-radius: 3px;` to `border-radius: 0;` and `box-shadow: 0 0 60px 12px rgba(0,0,0,0.7), 0 0 0 1px rgba(120,110,140,0.12);` to `box-shadow: none;`.
+
+Delete the entire `#intro-frame::after { ... }` rule (added last round).
+
+- [ ] **Step 2: Mask the menu frame and strip its chrome**
+
+In §23 `#menu-frame`, add:
+
+```css
+    -webkit-mask-image: radial-gradient(ellipse 72% 74% at 50% 46%, #000 50%, transparent 88%);
+    mask-image: radial-gradient(ellipse 72% 74% at 50% 46%, #000 50%, transparent 88%);
+```
+
+In §23 `#menu-frame`, change `border-radius: 3px;` to `border-radius: 0;` and its `box-shadow: ...;` to `box-shadow: none;`.
+
+Delete the entire `#menu-frame::after { ... }` rule (added last round).
+
+- [ ] **Step 3: Sanity — app suite green**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py -q`
+Expected: PASS
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add styles.css
+git commit -m "style(frames): focus-pull mask blends sharp center into backdrop"
+```
+
+---
+
+### Task 4: Deep dread menu music (no wind)
+
+**Files:** Modify `sting.py` (`menu_loop_wav_bytes()`)
+- Test: `tests/test_sting.py`
+
+Replace the windy bed with a heavy sub drone, a slow dissonant swell, and a distant low toll every few seconds — slow and oppressive, no noise texture.
+
+- [ ] **Step 1: Confirm the existing validity test covers the function**
+
+Run: `.venv/Scripts/python -m pytest tests/test_sting.py -q`
+Expected: PASS (there is already a WAV-validity test for `menu_loop_wav_bytes`; if not, add one mirroring the other sting tests asserting it returns non-empty bytes starting with `b"RIFF"`).
+
+- [ ] **Step 2: Rewrite `menu_loop_wav_bytes()`**
+
+In `sting.py`, replace the whole `menu_loop_wav_bytes()` function with:
+
+```python
+def menu_loop_wav_bytes() -> bytes:
+    """Deep dread menu bed: a heavy sub drone with a slow dissonant swell and a
+    distant low toll every few seconds. No wind/noise — slow and oppressive,
+    built to loop seamlessly."""
+    sr = 22050
+    dur = 16.0
+    t = np.linspace(0, dur, int(sr * dur), endpoint=False)
+
+    # 1. heavy sub drone: 41 Hz + 27.5 Hz sub + soft octave, slow breathing
+    breath = 0.82 + 0.18 * np.sin(2 * np.pi * 0.05 * t)      # ~20 s breath
+    drone = (np.sin(2 * np.pi * 41.0 * t)
+             + 0.6 * np.sin(2 * np.pi * 27.5 * t)
+             + 0.3 * np.sin(2 * np.pi * 82.0 * t)) * 0.18 * breath
+
+    # 2. slow dissonant swell: two close low tones beating (minor-second dread)
+    swell_env = np.sin(np.pi * np.clip(t / dur, 0, 1)) ** 1.5
+    swell = (np.sin(2 * np.pi * 110.0 * t)
+             + np.sin(2 * np.pi * 116.5 * t)) * 0.05 * swell_env
+
+    # 3. distant low toll every ~5.3 s: struck tone, long decay, far and quiet
+    toll = np.zeros_like(t)
+    for c in (1.0, 6.3, 11.6):
+        env = np.where(t >= c, np.exp(-1.8 * (t - c)), 0.0)
+        strike = (np.sin(2 * np.pi * 98.0 * t)
+                  + 0.5 * np.sin(2 * np.pi * 146.8 * t)
+                  + 0.25 * np.sin(2 * np.pi * 196.0 * t))
+        toll += strike * env
+    echo = np.zeros_like(t)                                   # room tail
+    for delay, gain in ((0.28, 0.30), (0.56, 0.15)):
+        ds = int(delay * sr)
+        echo[ds:] += toll[:-ds] * gain
+    toll = (toll + echo) * 0.12
+
+    mix = drone + swell + toll
+    fade = int(0.9 * sr)                                      # seamless loop
+    mix[:fade] *= np.linspace(0, 1, fade)
+    mix[-fade:] *= np.linspace(1, 0, fade)
+    mix = np.tanh(1.8 * mix)
+    mix = mix / np.max(np.abs(mix)) * 0.22
+    return _wav(mix, sr)
+```
+
+- [ ] **Step 3: Run the sting tests**
+
+Run: `.venv/Scripts/python -m pytest tests/test_sting.py -q`
+Expected: PASS
+
+- [ ] **Step 4: (Optional) write a preview to listen**
+
+Run: `.venv/Scripts/python sting.py` → writes `menu_loop_preview.wav`. The user listens (this file is git-ignored / not committed).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add sting.py
+git commit -m "feat(audio): deep dread menu drone (sub + dissonant swell + distant toll)"
+```
+
+---
+
+### Task 5: Live verification (user — eye + ear)
+
+**Files:** none (manual).
+
+- [ ] **Step 1: Launch** — `.venv-tts/Scripts/python app.py` with Ollama running.
+
+- [ ] **Step 2: Confirm (eye)**
+
+- `skip` and `close` hover/background hug the text — **no screen-wide band**.
+- Menu lines `AN ADVENTURE…`, the tagline, `How to Play`, and `A LOST CHILD WAITS…` all read clearly over the fog.
+- Intro cards + menu: the sharp center **dissolves into the blurred forest** — no floating rectangle, no hard border.
+
+- [ ] **Step 3: Confirm (ear)**
+
+- Menu music is a **slow, heavy, oppressive drone** with a distant toll — **no windy hiss**. Tune in `sting.py` if needed (toll spacing `(1.0, 6.3, 11.6)`, levels, `dur`).
+
+- [ ] **Step 4: Commit any tweak**
+
+```bash
+git add styles.css sting.py
+git commit -m "tune: live polish (blend / music)"
+```
+
+---
+
+## Self-Review
+
+- **Spec coverage:** full-width band on skip+close (Task 1, `fit-content`) ✅; faint menu lines (Task 2, halos + scrim) ✅; frame↔backdrop disconnect (Task 3, focus-pull mask, no border) ✅; windy music → dread drone (Task 4) ✅.
+- **Placeholder scan:** none; concrete values / full function body given.
+- **Name consistency:** edits target verified selectors — `#intro-skip` (§25), `#btn-howto-close` (new, matches `elem_id="btn-howto-close"`), `.menu-opt-muted` / `.menu-credit` / `#menu-card::before` / `.menu-eyebrow` / `.menu-tag` (§23), `#intro-image` / `#intro-frame` / `#menu-frame` and the two `::after` rules added last round (removed here). `menu_loop_wav_bytes()` keeps its signature and `_wav` helper.
+- **Mask behavior:** masking `#intro-image` reveals `#intro-bg` (z0, behind the frame); masking `#menu-frame` reveals `.menu-bg` (z0) — both the same scene blurred, so the fade is seamless. The dialogue panel/title sit above and are unaffected (mask is on the image/frame only).

docs/superpowers/plans/2026-06-14-intro-menu-game-aesthetic.md

@@ -0,0 +1,275 @@
+# Aesthetic Pass — Menu Legibility, Intro Framing, Game Grayscale
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development or superpowers:executing-plans. Steps use checkbox (`- [ ]`).
+
+**Goal:** A cohesion + legibility pass: (1) menu text reads clearly over the bright fog; (2) the intro skip button is visible; (3) frame edges melt into fog instead of a hard rectangular crop; (4) the intro dialogue box becomes translucent with the subject focal raised, so it stops covering the child; (5) the game-view sheds its purple/magenta accents for a cold grayscale palette that matches the menu/intro.
+
+**Architecture:** Pure presentation. Mostly `styles.css`; one `app.py` change (raise intro focal points in `_INTRO_POS`). No model/state/pacing/logic changes.
+
+**Tech Stack:** Gradio 6.x; CSS (radial-gradient fog masks, translucent panels, `backdrop-filter`); the existing `_INTRO_POS` array (already guarded by a test).
+
+**Verification note:** Visuals verified **live by the user** (`.venv-tts` + Ollama); headless unreliable (CLAUDE.md). Task 6 is the by-eye checklist.
+
+**Locked decisions (brainstorming):** dialogue = *translucent box + raised focal* (keep the overlapping look, mitigate coverage); game = *desaturate to gray (tone-match)*. Intro options + stone border stay. Deadline is tomorrow (15 Jun) → scope is deliberately the lighter tone-match, not a full reskin.
+
+---
+
+### Task 1: Menu text legibility (brighten + local scrim)
+
+**Files:** Modify `styles.css` (§23: `.menu-eyebrow`, `.menu-tag`, `.menu-opt`, new `#menu-card::before`)
+
+The menu ink is purple-gray over a bright fog, so it washes out. Brighten the text and drop a soft radial scrim behind the card so light text separates from the fog.
+
+- [ ] **Step 1: Add a scrim behind the card**
+
+In `styles.css` §23, immediately after the `#menu-card { ... }` rule, add:
+
+```css
+#menu-card::before {
+    content: '';
+    position: absolute;
+    inset: -48px -72px;
+    z-index: -1;
+    pointer-events: none;
+    background: radial-gradient(ellipse at center,
+                rgba(4,4,10,0.74) 0%, rgba(4,4,10,0.0) 72%);
+}
+```
+
+- [ ] **Step 2: Brighten the eyebrow, tagline, and option rows**
+
+In §23, change these three colors:
+
+- `.menu-eyebrow`'s `color: #7a6a92;` → `color: #c6bcda;` and add `text-shadow: 0 1px 6px #000;`
+- `.menu-tag`'s `color: #a098b8;` → `color: #dad3e8;` and add `text-shadow: 0 1px 8px rgba(0,0,0,0.85);`
+- `.menu-opt`'s `color: #c4bede;` → `color: #ded8ec;` and add `text-shadow: 0 1px 6px #000;`
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add styles.css
+git commit -m "style(menu): brighten ink + scrim behind card for legibility"
+```
+
+---
+
+### Task 2: Visible skip button
+
+**Files:** Modify `styles.css` (§25: `#intro-skip`, `#intro-skip:hover`)
+
+`#intro-skip` is near-invisible dark gray on a dark band. Give it a subtle pill (translucent bg + hairline border + brighter text).
+
+- [ ] **Step 1: Restyle `#intro-skip`**
+
+In §25, replace the `#intro-skip { ... }` rule (keep `position/top/right/z-index/font-family/letter-spacing/font-size`) so the visual props become:
+
+```css
+#intro-skip {
+    position: absolute;
+    top: 18px;
+    right: 22px;
+    z-index: 4;
+    font-family: Georgia, serif !important;
+    letter-spacing: 0.14em !important;
+    font-size: 0.82rem !important;
+    color: #cdc7da !important;
+    background: rgba(8,6,14,0.55) !important;
+    border: 1px solid rgba(150,142,170,0.35) !important;
+    box-shadow: none !important;
+    border-radius: 14px !important;
+    padding: 5px 16px !important;
+    text-shadow: 0 1px 4px #000 !important;
+}
+```
+
+And replace `#intro-skip:hover { ... }` with:
+
+```css
+#intro-skip:hover {
+    color: #f2eefa !important;
+    background: rgba(30,24,42,0.82) !important;
+    border-color: rgba(190,178,210,0.6) !important;
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add styles.css
+git commit -m "style(intro): visible skip pill"
+```
+
+---
+
+### Task 3: Frame edges melt into fog (no hard crop)
+
+**Files:** Modify `styles.css` (§23 `#menu-frame`, §25 `#intro-frame`)
+
+The sharp rectangular frame edge reads as a cut. A radial fog overlay inside each frame fades the edges into the dark blurred backdrop, so the scene dissolves into mist instead of being clipped.
+
+- [ ] **Step 1: Add a fog overlay to the intro frame**
+
+In §25, immediately after the `#intro-frame { ... }` rule, add:
+
+```css
+#intro-frame::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;                 /* above the image, below the panel (z2) */
+    pointer-events: none;
+    background: radial-gradient(ellipse 80% 78% at 50% 44%,
+                transparent 50%, rgba(10,10,16,0.5) 78%, rgba(8,8,14,0.94) 100%);
+}
+```
+
+- [ ] **Step 2: Add the same fog to the menu frame**
+
+In §23, immediately after the `#menu-frame { ... }` rule, add:
+
+```css
+#menu-frame::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;                 /* above the forest, below the card (z5) */
+    pointer-events: none;
+    background: radial-gradient(ellipse 80% 78% at 50% 44%,
+                transparent 50%, rgba(10,10,16,0.5) 78%, rgba(8,8,14,0.94) 100%);
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add styles.css
+git commit -m "style(frames): fog-feather edges so images melt into mist"
+```
+
+---
+
+### Task 4: Translucent intro dialogue + raised focal points
+
+**Files:**
+- Modify: `styles.css` (§25 `#intro-panel`, `#intro-image::after`)
+- Modify: `app.py` (`_INTRO_POS`, ~line 220)
+
+Make the panel translucent (image shows through) and raise each subject so the box sits over the lower, emptier part of the frame instead of the child's face.
+
+- [ ] **Step 1: Make the panel translucent with a blur backing**
+
+In §25, in `#intro-panel`, change `background: var(--stone-base);` to:
+
+```css
+    background: rgba(16,14,24,0.62);
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(3px);
+```
+
+and soften its size: change `padding: 15px 22px;` to `padding: 13px 20px;` and `bottom: 16px;` to `bottom: 14px;`.
+
+- [ ] **Step 2: Lighten the image's bottom gradient (the panel now provides contrast)**
+
+In §25, in `#intro-image::after`, change the gradient to end softer:
+
+```css
+    background: linear-gradient(transparent 60%, rgba(4,4,10,0.55) 98%);
+```
+
+- [ ] **Step 3: Raise the focal points so subjects sit higher**
+
+In `app.py`, change `_INTRO_POS` to:
+
+```python
+# Per-card focal point for the 16:10 cover-crop (CSS background-position).
+# Raised so each subject sits high and the dialogue box covers emptier area.
+# Card order matches INTRO_CARDS: threshold, keeps, waiting, meeting.
+_INTRO_POS = ["center 72%", "center 38%", "center 38%", "center 20%"]
+```
+
+- [ ] **Step 4: Guard test still passes**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py::test_intro_pos_aligns_with_cards -v`
+Expected: PASS
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add styles.css app.py
+git commit -m "style(intro): translucent dialogue + raised focal so art stays visible"
+```
+
+---
+
+### Task 5: Game-view to cold grayscale (drop the purple)
+
+**Files:** Modify `styles.css` (§11 bond: `.bond-tier`, `.bond-fill`, `.bond-beat`, `@keyframes heartbeat`; § button `:active`)
+
+The bond bar and a couple of hovers are the only purple-tinted elements (the treasure already uses the gray stone frame). Recolor them to bone/cold-gray so the game matches the menu/intro.
+
+- [ ] **Step 1: Recolor the bond tier label**
+
+In `styles.css`, change `.bond-tier`'s `color: #9a6faa;` to `color: #bcb4c8;` and its `text-shadow: 0 0 12px rgba(120,60,160,0.4);` to `text-shadow: 0 0 12px rgba(150,145,170,0.35);`.
+
+- [ ] **Step 2: Recolor the bond fill**
+
+In `.bond-fill`, change:
+- `background: linear-gradient(to right, #3a2152, #9a6faa);` → `background: linear-gradient(to right, #2b2832, #bcb4c8);`
+- `box-shadow: 0 0 10px rgba(120,60,160,0.5);` → `box-shadow: 0 0 10px rgba(180,174,196,0.35);`
+
+- [ ] **Step 3: Recolor the bond beat**
+
+In `.bond-beat`, change:
+- `background: #b07fc0;` → `background: #cdc6d8;`
+- `box-shadow: 0 0 8px rgba(150,80,190,0.7);` → `box-shadow: 0 0 8px rgba(190,184,206,0.6);`
+
+- [ ] **Step 4: Recolor the heartbeat keyframes glow**
+
+Replace the `@keyframes heartbeat { ... }` block with:
+
+```css
+@keyframes heartbeat {
+    0%,  100% { transform: scaleY(1.0);  box-shadow: 0 0 4px  rgba(180,174,196,0.40); }
+    8%         { transform: scaleY(1.5);  box-shadow: 0 0 14px rgba(205,198,216,0.85); }
+    18%        { transform: scaleY(1.0);  box-shadow: 0 0 4px  rgba(180,174,196,0.40); }
+    30%        { transform: scaleY(1.25); box-shadow: 0 0 9px  rgba(195,188,208,0.62); }
+    45%        { transform: scaleY(1.0);  box-shadow: 0 0 4px  rgba(180,174,196,0.35); }
+}
+```
+
+- [ ] **Step 5: Neutralize the button :active accent**
+
+In `.gradio-container button:active`, change `color: #efe2fb !important;` → `color: #ece9f2 !important;` and `border-color: #8a5cb0 !important;` → `border-color: #6f6a80 !important;`.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add styles.css
+git commit -m "style(game): cold grayscale bond bar + neutral accents (match intro)"
+```
+
+---
+
+### Task 6: Live verification (user)
+
+**Files:** none (manual).
+
+- [ ] **Step 1: Launch** — `.venv-tts/Scripts/python app.py` with Ollama running.
+
+- [ ] **Step 2: Confirm**
+
+- **Menu:** eyebrow / tagline / mode rows read clearly over the fog (scrim + brighter ink).
+- **Skip:** visible as a small pill, top-right.
+- **Frames:** edges fade into fog — no hard rectangular crop on menu or intro cards.
+- **Intro cards:** the dialogue box is translucent (art shows through); subjects sit high so the box no longer buries the child — including the last card with options.
+- **Game:** the Bond bar + accents are cold gray/bone, not purple; menu → intro → game feel like one art direction.
+
+- [ ] **Step 3: Tune live** — adjust focal `%`, panel opacity, fog strength, or bond grays as needed; commit any tweak.
+
+---
+
+## Self-Review
+
+- **Spec coverage:** menu colors (Task 1) ✅; skip visibility (Task 2) ✅; cropped-edge fog (Task 3) ✅; dialogue covering art → translucent + raised focal (Task 4) ✅; game purple → grayscale (Task 5) ✅. Full reskin deliberately out of scope (deadline) ✅.
+- **Placeholder scan:** none; every step shows concrete values.
+- **Name consistency:** `#menu-card::before` / `#menu-frame::after` match the ids built in `_menu_html`; `#intro-frame::after` / `#intro-panel` / `#intro-image::after` match the intro markup; `_INTRO_POS` length unchanged (4) so the existing guard test holds; all recolored selectors (`.bond-tier`, `.bond-fill`, `.bond-beat`, `@keyframes heartbeat`, `button:active`) verified present at the cited lines.

docs/superpowers/plans/2026-06-14-intro-menu-polish-2.md

@@ -0,0 +1,256 @@
+# Intro + Menu Polish, Round 2 — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development or superpowers:executing-plans. Steps use checkbox (`- [ ]`) syntax.
+
+**Goal:** Fix the regressions from the last round: (1) the intro frame is no longer vertically centered (huge dead black band below it); (2) the menu's title/tagline/credit overlap and its mode buttons render full-width with a screen-wide hover band. Rebuild the menu as a single cohesive panel — title + tagline + **selectable option rows** (`Tester Run` / `The Full Stay`) in the same style as the intro options the user approved — using the hidden-button proxy pattern.
+
+**Architecture:** Pure presentation. (1) Restore `#intro-stage` height so the frame re-centers. (2) `_menu_html()` becomes a `#menu-card` block (eyebrow, title, tagline, `.menu-opt` rows); the real `Tester Run` / `The Full Stay` buttons stay in the DOM but hidden in a `#menu-proxy` column, and each `.menu-opt` clicks its matching hidden button (same `#idle-trigger` / `.intro-opt` proxy trick already shipped). The credit line pins to the viewport (`position:fixed`) so it stops floating into the title. No model/state/pacing logic; the mode buttons keep their `_show_intro` handlers and `.menu-mode-btn` JS listener, both fired by the programmatic click.
+
+**Tech Stack:** Gradio 6.x `gr.HTML` + `gr.Button`; `<head>` JS via `launch(head=...)`; pure CSS; pytest for one structural guard.
+
+**Verification note:** Layout/visuals verified **live by the user** (`.venv-tts` + Ollama); headless is unreliable (CLAUDE.md). Task 3 is the by-eye checklist.
+
+**Locked:** menu = cohesive panel like the intro; intro options + panel border stay as-is (approved).
+
+---
+
+### Task 1: Re-center the intro frame (kill the bottom black band)
+
+**Files:**
+- Modify: `styles.css` (§25 `#intro-stage`)
+
+Last round set `#intro-stage { min-height: 0 }`. The `gr.HTML` wrapper isn't a full-height flex child, so the stage collapsed and the centered frame floated to the top, leaving a large black band below. Restoring the stage to fill the viewport re-centers the frame (symmetric letterbox). `#intro-view` is `position:fixed; height:100vh; overflow:hidden`, so a 100vh stage fits exactly with no scroll.
+
+- [ ] **Step 1: Restore the stage height**
+
+In `styles.css` §25, change `#intro-stage`'s `min-height: 0;` back to `min-height: 100vh;`:
+
+```css
+#intro-stage {
+    position: relative;
+    flex: 1;
+    min-height: 100vh;
+    cursor: pointer;            /* click anywhere to advance */
+    overflow: hidden;
+    display: flex;
+    align-items: center;        /* center the frame -> symmetric letterbox bands */
+    justify-content: center;
+    background: #000;
+}
+```
+
+- [ ] **Step 2: Sanity — app suite still green**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py -q`
+Expected: PASS
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add styles.css
+git commit -m "fix(intro): re-center frame, remove dead bottom band"
+```
+
+---
+
+### Task 2: Menu cohesive panel with selectable option rows
+
+**Files:**
+- Modify: `app.py` (`_menu_html()` ~line 455; the menu button block ~line 925-930; JS `wire()` ~line 401)
+- Modify: `styles.css` (§23: rename `.menu-content` → `#menu-card`, add `.menu-opts`/`.menu-opt`, pin `.menu-credit`)
+- Test: `tests/test_app.py`
+
+The title screen becomes one centered card: eyebrow, title, tagline, then the two modes as selectable rows (`›` marker, hover glow) mirroring the intro options. `Tester Run` / `The Full Stay` stay as hidden Gradio buttons (`#menu-proxy`, `display:none`); each `.menu-opt` row clicks its target button, so both the Gradio `_show_intro` handler and the existing `.menu-mode-btn` JS listener (which calls `startIntro`) still fire. The credit pins to the viewport bottom.
+
+- [ ] **Step 1: Write the failing test**
+
+In `tests/test_app.py`, add:
+
+```python
+def test_menu_card_has_option_rows():
+    import app
+    html = app._menu_html()
+    assert 'id="menu-card"' in html
+    assert 'data-target="btn-tester"' in html
+    assert 'data-target="btn-full"' in html
+    assert 'class="menu-opt"' in html
+    # the JS wires the rows
+    assert 'menu-opt' in app._HEAD_JS
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py::test_menu_card_has_option_rows -v`
+Expected: FAIL (`id="menu-card"` not found)
+
+- [ ] **Step 3: Rebuild `_menu_html()`**
+
+In `app.py`, replace `_menu_html()` with:
+
+```python
+def _menu_html() -> str:
+    return (
+        f'<div class="menu-bg" style="background-image:url(\'{_BACKGROUND_URI}\')"></div>'
+        f'<div id="menu-frame" style="background-image:url(\'{_BACKGROUND_URI}\')"></div>'
+        '<div class="menu-scrim"></div>'
+        '<div class="menu-grain"></div>'
+        '<div class="menu-vig"></div>'
+        '<div id="menu-card">'
+        '  <div class="menu-eyebrow">AN ADVENTURE IN THOUSAND TOKEN WOOD</div>'
+        '  <div class="menu-title">Hollow</div>'
+        '  <div class="menu-tag">something is here, at the edge of the wood '
+        '&mdash; it remembers what you give it.</div>'
+        '  <div class="menu-opts">'
+        '    <div class="menu-opt" data-target="btn-tester">Tester Run</div>'
+        '    <div class="menu-opt" data-target="btn-full">The Full Stay</div>'
+        '  </div>'
+        '</div>'
+        '<div class="menu-credit">A LOST CHILD WAITS &middot; TURN YOUR SOUND ON</div>'
+    )
+```
+
+- [ ] **Step 4: Hide the real mode buttons in a proxy column**
+
+In `app.py`, change the menu button block from:
+
+```python
+        tester_btn = gr.Button("Tester Run", elem_id="btn-tester",
+                               elem_classes="menu-btn menu-mode-btn")
+        full_btn = gr.Button("The Full Stay", elem_id="btn-full",
+                             elem_classes="menu-btn menu-mode-btn")
+        howto_btn = gr.Button("How to Play", elem_id="btn-howto",
+                              elem_classes="menu-btn")
+```
+
+to:
+
+```python
+        with gr.Column(elem_id="menu-proxy"):   # hidden; .menu-opt rows click these
+            tester_btn = gr.Button("Tester Run", elem_id="btn-tester",
+                                   elem_classes="menu-mode-btn")
+            full_btn = gr.Button("The Full Stay", elem_id="btn-full",
+                                 elem_classes="menu-mode-btn")
+        howto_btn = gr.Button("How to Play", elem_id="btn-howto",
+                              elem_classes="menu-btn")
+```
+
+- [ ] **Step 5: Wire the option rows in the JS `wire()`**
+
+In `app.py` `_HEAD_JS`, inside `wire()`, after the existing `.menu-mode-btn` block (the `document.querySelectorAll('.menu-mode-btn')...` loop, ~line 425-432), add:
+
+```javascript
+    document.querySelectorAll('.menu-opt').forEach(function (mo) {
+      if (mo.dataset.hollowWired) return;
+      mo.dataset.hollowWired = '1';
+      mo.addEventListener('click', function () {
+        var t = document.getElementById(mo.dataset.target);
+        if (t) t.click();          // fire the hidden mode button (startIntro + _show_intro)
+      });
+    });
+```
+
+- [ ] **Step 6: Run test to verify it passes**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py::test_menu_card_has_option_rows -v`
+Expected: PASS
+
+- [ ] **Step 7: CSS — rename `.menu-content`, add rows, pin credit**
+
+In `styles.css` §23:
+
+(a) Rename the `.menu-content` selector to `#menu-card` and give it a max-width so the tagline wraps tightly:
+
+```css
+#menu-card {
+    position: relative;
+    z-index: 5;
+    text-align: center;
+    font-family: Georgia, serif;
+    max-width: 560px;
+}
+```
+
+(b) Immediately after the `.menu-tag { ... }` rule, add the option rows:
+
+```css
+.menu-opts {
+    margin-top: 34px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;        /* rows shrink to content -> no full-width band */
+    gap: 6px;
+}
+.menu-opt {
+    font-family: Georgia, serif;
+    font-size: 1.15rem;
+    letter-spacing: 0.14em;
+    color: #c4bede;
+    padding: 8px 26px;
+    cursor: pointer;
+    border-radius: 2px;
+    transition: color 0.3s, letter-spacing 0.3s, text-shadow 0.3s, background 0.3s;
+}
+.menu-opt::before {
+    content: '\203A\00a0\00a0';   /* "›  " */
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+.menu-opt:hover {
+    color: #f0ecfa;
+    letter-spacing: 0.2em;
+    text-shadow: 0 0 16px rgba(180,160,210,0.5);
+    background: rgba(255,255,255,0.04);
+}
+.menu-opt:hover::before { opacity: 1; }
+
+#menu-proxy { display: none !important; }
+```
+
+(c) Pin the credit to the viewport so it stops floating into the title — in `.menu-credit`, change `position: absolute;` to `position: fixed;`.
+
+- [ ] **Step 8: Full app suite**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py -q`
+Expected: PASS
+
+- [ ] **Step 9: Commit**
+
+```bash
+git add app.py styles.css tests/test_app.py
+git commit -m "feat(menu): cohesive card with selectable mode rows (proxy), pinned credit"
+```
+
+---
+
+### Task 3: Live verification (user)
+
+**Files:** none (manual).
+
+- [ ] **Step 1: Launch**
+
+Run (user): `.venv-tts/Scripts/python app.py` with Ollama running.
+
+- [ ] **Step 2: Confirm**
+
+- **Menu:** eyebrow / `HOLLOW` / tagline stack cleanly inside the framed card — **no overlap**; credit sits in the bottom band, not over the title.
+- **Menu modes:** `Tester Run` / `The Full Stay` are centered selectable rows with a `›` + glow on hover; the hover highlight hugs the text — **no screen-wide band**. Clicking one starts the chosen run (music keeps playing low, intro begins).
+- **Intro:** the framed card is **vertically centered** (symmetric bands) — **no dead black band** below; skip + click-to-advance work; options inside the panel still look right.
+- No page scroll anywhere in menu/intro.
+
+- [ ] **Step 3: Tune if needed**
+
+Adjust `.menu-opts` `margin-top`, `#menu-card` `max-width`, or frame `max-height` live; commit any tweak:
+
+```bash
+git add styles.css app.py
+git commit -m "tune(menu/intro): live polish"
+```
+
+---
+
+## Self-Review
+
+- **Spec coverage:** intro bottom band (Task 1, restore stage height) ✅; menu text overlap (Task 2, `#menu-card` clean stack + credit `position:fixed`) ✅; menu buttons full-width band (Task 2, `.menu-opt` content-width rows, real buttons hidden) ✅; menu modes as approved-style rows (Task 2) ✅. Intro options/border untouched ✅.
+- **Placeholder scan:** none; full code in every step.
+- **Name consistency:** `#menu-card` (markup Task 2 step 3, CSS step 7); `.menu-opt[data-target="btn-tester"|"btn-full"]` (markup) → JS `wire()` clicks `document.getElementById(mo.dataset.target)` (step 5) → ids match the hidden `tester_btn`/`full_btn` (`elem_id="btn-tester"/"btn-full"`, step 4) whose `_show_intro` handlers and `.menu-mode-btn` listener are unchanged; `#menu-proxy` column id (step 4) matches `#menu-proxy { display:none }` (step 7).
+- **Proxy validity:** `display:none` Gradio buttons fire on JS `.click()` (shipped `#idle-trigger` proves it); the user's real click on `.menu-opt` is a `pointerdown`, so `firstGesture` still unlocks the menu music.

docs/superpowers/plans/2026-06-14-intro-menu-polish.md

@@ -0,0 +1,465 @@
+# Intro + Menu Polish — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax.
+
+**Goal:** Three presentation fixes from the live review: (1) the menu and intro never scroll (fixed full-viewport); (2) the menu gets the same cinematic letterbox + blurred backdrop as the intro cards; (3) the intro choice replaces the full-width, bottom-glued buttons with selectable rows **inside** the stone dialogue panel (visual-novel style).
+
+**Architecture:** Pure presentation. (1) `#menu-view` / `#intro-view` become `position:fixed; inset:0` so they take over the viewport and contribute no page height. (2) `_menu_html()` gains a sharp centered `#menu-frame`; `.menu-bg` becomes the blurred ambient backdrop; §23 CSS reworked. (3) The choice options render as HTML rows (`.intro-opt`) inside `#intro-panel`; the real Gradio buttons stay in the DOM but hidden (`display:none`), and each row clicks its matching hidden button — the exact `#idle-trigger` proxy pattern already used in this codebase. No model/state/pacing logic changes; tone seeds (+12 / −8) stay on the hidden buttons' existing handlers.
+
+**Tech Stack:** Gradio 6.x `gr.HTML` + `gr.Button`; `<head>` JS injected via `launch(head=...)`; pure CSS; pytest for two small structural guards.
+
+**Verification note:** Per CLAUDE.md, layout/visuals are verified **live by the user** (`.venv-tts` + Ollama) — headless is unreliable. Tasks carry structural guards only; the look is confirmed in Task 4.
+
+**Locked decisions (from brainstorming):** choice = *inside the dialogue box*; menu = *letterbox like the intro*; scroll = *fixed, no scroll*.
+
+---
+
+### Task 1: Menu + intro never scroll (fixed full-viewport)
+
+**Files:**
+- Modify: `styles.css` (§23 `#menu-view`, ~line 865; §25 `#intro-view` + `#intro-stage`)
+
+`#menu-view` and `#intro-view` are `min-height:100vh` inside the Gradio container's vertical padding, so the page is a little taller than the viewport and scrolls. Pinning them `position:fixed; inset:0` removes them from flow (no page height) and locks them to the viewport. Gradio's `.hide` (`display:none !important`) still collapses them when switched away.
+
+- [ ] **Step 1: Pin `#menu-view`**
+
+In `styles.css` §23, change the `#menu-view` rule from:
+
+```css
+#menu-view {
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;   /* center title+buttons as one vertical group */
+    overflow: hidden;
+    border: none !important;
+    background: #04040a;
+}
+```
+
+to:
+
+```css
+#menu-view {
+    position: fixed;
+    inset: 0;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;   /* center title+buttons as one vertical group */
+    overflow: hidden;
+    border: none !important;
+    background: #04040a;
+    z-index: 50;
+}
+```
+
+- [ ] **Step 2: Pin `#intro-view` and make the stage fill it**
+
+In `styles.css` §25, change `#intro-view` from `position: relative; min-height: 100vh;` to:
+
+```css
+#intro-view {
+    position: fixed;
+    inset: 0;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: #000;
+    overflow: hidden;
+    z-index: 50;
+}
+```
+
+and change `#intro-stage`'s `min-height: 100vh;` to `min-height: 0;` (it already has `flex: 1`, so it fills the fixed parent):
+
+```css
+#intro-stage {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    cursor: pointer;            /* click anywhere to advance */
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #000;
+}
+```
+
+- [ ] **Step 3: Confirm the suite still passes (no Python touched, sanity only)**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py -q`
+Expected: PASS
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add styles.css
+git commit -m "fix(intro/menu): fixed full-viewport views, no page scroll"
+```
+
+---
+
+### Task 2: Menu cinematic letterbox
+
+**Files:**
+- Modify: `app.py` (`_menu_html()`, ~line 455)
+- Modify: `styles.css` (§23: `.menu-bg`, new `#menu-frame`, `.menu-scrim` z-index, `.menu-tag`)
+- Test: `tests/test_app.py`
+
+The menu forest currently bleeds full-screen. Give it the intro treatment: a blurred ambient backdrop (`.menu-bg`) plus a sharp, centered `#menu-frame` (~16:10). Title/buttons keep their existing flex-centering and overlay the frame. Also center the tagline (it's a `max-width` block with no auto margins, so it currently hugs the left).
+
+- [ ] **Step 1: Write the failing test**
+
+In `tests/test_app.py`, add:
+
+```python
+def test_menu_html_has_letterbox_frame():
+    import app
+    html = app._menu_html()
+    # the sharp centered frame and the (now blurred) backdrop both exist
+    assert 'id="menu-frame"' in html
+    assert 'class="menu-bg"' in html
+    # both reference the forest art
+    assert html.count(app._BACKGROUND_URI) >= 2
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py::test_menu_html_has_letterbox_frame -v`
+Expected: FAIL (`id="menu-frame"` not found)
+
+- [ ] **Step 3: Add `#menu-frame` to `_menu_html()`**
+
+In `app.py`, change `_menu_html()` so the line after `.menu-bg` adds the frame:
+
+```python
+def _menu_html() -> str:
+    return (
+        f'<div class="menu-bg" style="background-image:url(\'{_BACKGROUND_URI}\')"></div>'
+        f'<div id="menu-frame" style="background-image:url(\'{_BACKGROUND_URI}\')"></div>'
+        '<div class="menu-scrim"></div>'
+        '<div class="menu-grain"></div>'
+        '<div class="menu-vig"></div>'
+        '<div class="menu-content">'
+        '  <div class="menu-eyebrow">AN ADVENTURE IN THOUSAND TOKEN WOOD</div>'
+        '  <div class="menu-title">Hollow</div>'
+        '  <div class="menu-tag">something is here, at the edge of the wood '
+        '&mdash; it remembers what you give it.</div>'
+        '</div>'
+        '<div class="menu-credit">A LOST CHILD WAITS &middot; TURN YOUR SOUND ON</div>'
+    )
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py::test_menu_html_has_letterbox_frame -v`
+Expected: PASS
+
+- [ ] **Step 5: Rework the §23 CSS — backdrop, frame, z-index, tagline**
+
+In `styles.css` §23, replace the `.menu-bg` rule with (blurred ambient backdrop):
+
+```css
+.menu-bg {
+    position: fixed;
+    inset: -6%;                /* overscan so blur edges never reveal a gap */
+    background-size: cover;
+    background-position: center 38%;
+    filter: grayscale(1) blur(46px) brightness(0.34);
+    transform: scale(1.08);
+    z-index: 0;
+}
+```
+
+Immediately after `.menu-bg`, add the sharp centered frame:
+
+```css
+/* sharp cinematic frame: the forest, contained like the intro cards */
+#menu-frame {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: min(1080px, 92vw);
+    aspect-ratio: 16 / 10;
+    max-height: 74vh;
+    background-size: cover;
+    background-position: center 38%;
+    background-repeat: no-repeat;
+    filter: grayscale(1) brightness(0.92);
+    border-radius: 3px;
+    box-shadow: 0 0 60px 12px rgba(0,0,0,0.7),
+                0 0 0 1px rgba(120,110,140,0.12);
+    z-index: 1;
+}
+```
+
+Change `.menu-scrim`'s `z-index: 1;` to `z-index: 2;` (so the atmosphere layers sit above the frame; `.menu-grain` and `.menu-vig` are already `z-index: 2`). Change `.menu-content`'s `z-index: 3;` to `z-index: 5;` so the title group stays above everything.
+
+Finally, center the tagline — change `.menu-tag`'s `margin-top: 14px;` to:
+
+```css
+    margin: 14px auto 0;
+```
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add app.py styles.css tests/test_app.py
+git commit -m "feat(menu): cinematic letterbox frame + blurred backdrop, centered tagline"
+```
+
+---
+
+### Task 3: Choice options inside the dialogue panel
+
+**Files:**
+- Modify: `app.py` (intro `gr.HTML` markup ~line 938; intro button column ~line 943-947; JS `showIntroCard` + `revealChoice` + `startIntro` ~line 338-377)
+- Modify: `styles.css` (§25: replace `#intro-choice` block with `#intro-opts` / `.intro-opt`; hide proxy column)
+- Test: `tests/test_app.py`
+
+The two choices move **inside** the stone panel as selectable rows. The real Gradio buttons (which carry the +12 / −8 tone-seed handlers) stay in the DOM but hidden; each HTML row clicks its matching hidden button — the same proxy trick as `#idle-trigger`.
+
+- [ ] **Step 1: Write the failing test**
+
+In `tests/test_app.py`, add:
+
+```python
+def test_intro_opts_proxy_to_hidden_buttons():
+    import app
+    # the panel hosts the option rows, each targeting a hidden Gradio button id
+    src = app._HEAD_JS
+    assert 'intro-opts' in src               # reveal logic references the opts
+    # the intro markup is built inline in the Blocks; check the module source
+    import inspect
+    mod = inspect.getsource(app)
+    assert 'id="intro-opts"' in mod
+    assert 'data-target="btn-offer"' in mod
+    assert 'data-target="btn-keep"' in mod
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py::test_intro_opts_proxy_to_hidden_buttons -v`
+Expected: FAIL (`intro-opts` not present)
+
+- [ ] **Step 3: Add the option rows inside the panel**
+
+In `app.py`, change the intro `gr.HTML` markup from:
+
+```python
+        gr.HTML(
+            '<div id="intro-stage">'
+            '  <div id="intro-bg"></div>'
+            '  <div id="intro-frame">'
+            '    <div id="intro-image"></div>'
+            '    <div id="intro-panel"><p id="intro-text"></p></div>'
+            '  </div>'
+            '</div>'
+        )
+```
+
+to:
+
+```python
+        gr.HTML(
+            '<div id="intro-stage">'
+            '  <div id="intro-bg"></div>'
+            '  <div id="intro-frame">'
+            '    <div id="intro-image"></div>'
+            '    <div id="intro-panel">'
+            '      <p id="intro-text"></p>'
+            '      <div id="intro-opts">'
+            '        <div class="intro-opt" data-target="btn-offer">Offer your hand</div>'
+            '        <div class="intro-opt" data-target="btn-keep">Keep your distance</div>'
+            '      </div>'
+            '    </div>'
+            '  </div>'
+            '</div>'
+        )
+```
+
+- [ ] **Step 4: Hide the real buttons (proxy), keep skip visible**
+
+In `app.py`, change the choice column from:
+
+```python
+        with gr.Column(elem_id="intro-choice"):
+            offer_btn = gr.Button("Offer your hand", elem_id="btn-offer",
+                                  elem_classes="intro-tablet intro-enter-btn")
+            keep_btn = gr.Button("Keep your distance", elem_id="btn-keep",
+                                 elem_classes="intro-tablet intro-enter-btn")
+        skip_btn = gr.Button("skip ▸", elem_id="intro-skip",
+                             elem_classes="intro-enter-btn")
+```
+
+to:
+
+```python
+        with gr.Column(elem_id="intro-proxy"):   # hidden; HTML rows click these
+            offer_btn = gr.Button("Offer your hand", elem_id="btn-offer",
+                                  elem_classes="intro-enter-btn")
+            keep_btn = gr.Button("Keep your distance", elem_id="btn-keep",
+                                 elem_classes="intro-enter-btn")
+        skip_btn = gr.Button("skip ▸", elem_id="intro-skip",
+                             elem_classes="intro-enter-btn")
+```
+
+(The `offer_btn.click(...)` / `keep_btn.click(...)` wiring further down is unchanged — clicking the hidden button still fires `_enter_game`.)
+
+- [ ] **Step 5: Update the JS — reveal opts, hide on each card, wire row clicks**
+
+In `app.py` `_HEAD_JS`, change `showIntroCard` so it hides the opts at the start of each card:
+
+```javascript
+  function showIntroCard(cardIndex, isLast) {
+    var card = INTRO[cardIndex];
+    var img = document.getElementById('intro-image');
+    var bg = document.getElementById('intro-bg');
+    var txt = document.getElementById('intro-text');
+    var opts = document.getElementById('intro-opts');
+    if (opts) opts.classList.remove('intro-opts-show');
+    var url = card.img ? "url('" + card.img + "')" : '';
+    if (img) {
+      img.style.backgroundImage = url;
+      img.style.backgroundPosition = card.pos || 'center';
+    }
+    if (bg) bg.style.backgroundImage = url;
+    if (txt) typeLine(txt, card.text, function () { if (isLast) revealChoice(); });
+  }
+```
+
+Change `revealChoice` to reveal the opts:
+
+```javascript
+  function revealChoice() {
+    var opts = document.getElementById('intro-opts');
+    if (opts) opts.classList.add('intro-opts-show');
+  }
+```
+
+In `startIntro`, inside the `setTimeout`, after the stage click is wired, also wire the option rows once:
+
+```javascript
+  function startIntro(mode) {
+    introSeq = INTRO_SEQ[mode] || INTRO_SEQ['tester'];   // single source of truth
+    introIdx = 0;
+    window.scrollTo(0, 0);
+    setTimeout(function () {
+      showIntroCard(introSeq[0], introSeq.length <= 1);
+      var stage = document.getElementById('intro-stage');
+      if (stage && !stage.dataset.hollowWired) {
+        stage.dataset.hollowWired = '1';
+        stage.addEventListener('click', advanceIntro);
+      }
+      var opts = document.querySelectorAll('#intro-opts .intro-opt');
+      opts.forEach(function (el) {
+        if (el.dataset.hollowWired) return;
+        el.dataset.hollowWired = '1';
+        el.addEventListener('click', function (e) {
+          e.stopPropagation();                 // don't let the stage advance
+          var t = document.getElementById(el.dataset.target);
+          if (t) t.click();                    // fire the hidden Gradio button
+        });
+      });
+    }, 130);
+  }
+```
+
+- [ ] **Step 6: Replace the §25 choice CSS**
+
+In `styles.css` §25, replace the whole `#intro-choice { ... }` and `#intro-choice.intro-choice-show { ... }` block with the opts styling, and drop the now-unused `.intro-tablet` rules (the proxy buttons are hidden). Replace from `/* choice tablets: ... */` down to the end of the `.intro-tablet:hover { ... }` rule with:
+
+```css
+/* option rows, revealed inside the stone panel on the final card */
+#intro-opts {
+    margin-top: 14px;
+    padding-top: 12px;
+    border-top: 1px solid rgba(120,110,140,0.18);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 0.5s ease, max-height 0.5s ease;
+}
+#intro-opts.intro-opts-show {
+    max-height: 220px;
+    opacity: 1;
+}
+.intro-opt {
+    font-family: Georgia, serif;
+    font-size: 1.02rem;
+    color: #b9b2cc;
+    letter-spacing: 0.04em;
+    padding: 7px 10px;
+    cursor: pointer;
+    border-radius: 2px;
+    transition: color 0.2s, background 0.2s, padding-left 0.2s;
+}
+.intro-opt::before {
+    content: '\203A\00a0\00a0';   /* "›  " */
+    color: #6a5a86;
+}
+.intro-opt:hover {
+    color: #f0ecfa;
+    background: rgba(120,90,140,0.12);
+    padding-left: 16px;
+}
+
+/* the real choice buttons live hidden in the DOM; HTML rows proxy their clicks */
+#intro-proxy { display: none !important; }
+```
+
+- [ ] **Step 7: Run the guard test + full app suite**
+
+Run: `.venv/Scripts/python -m pytest tests/test_app.py -q`
+Expected: PASS (including `test_intro_opts_proxy_to_hidden_buttons`)
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add app.py styles.css tests/test_app.py
+git commit -m "feat(intro): selectable choice rows inside the dialogue panel"
+```
+
+---
+
+### Task 4: Live verification (user)
+
+**Files:** none (manual). Headless is unreliable here.
+
+- [ ] **Step 1: Launch with voice + model**
+
+Run (user): `.venv-tts/Scripts/python app.py` with Ollama (`qwen3:8b`) running.
+
+- [ ] **Step 2: Confirm**
+
+- **Menu:** the forest sits in a centered 16:10 frame with letterbox bands + blurred backdrop (matches the intro). Title/buttons centered over the frame. Tagline centered (not hugging the left). **No scroll.**
+- **Intro:** still letterboxed; **no scroll**; skip + click-to-advance work.
+- **Last card:** the two choices appear as selectable rows **inside** the stone panel (below the narration, under a thin divider), with a `›` marker and hover highlight. Clicking a row enters the game with the right tone seed (Offer → warmer first turn; Keep → cooler). The stage click behind the rows does **not** also advance.
+- Tester shows Threshold + Meeting; Full shows all four.
+
+- [ ] **Step 3: Tune if needed**
+
+Adjust frame `max-height`, opt spacing, or backdrop `brightness` live; commit any tweak:
+
+```bash
+git add styles.css app.py
+git commit -m "tune(intro/menu): live polish after review"
+```
+
+---
+
+## Self-Review
+
+- **Spec coverage:** no scroll (Task 1, fixed views) ✅; menu image shrunk/letterboxed like intro (Task 2) ✅; choices inside the dialogue box (Task 3, proxy rows) ✅; tagline left-hug fixed (Task 2, `margin:auto`) ✅.
+- **Placeholder scan:** none; every code step shows full code.
+- **Name consistency:** `#menu-frame` created in `_menu_html` (Task 2) + styled in §23 (Task 2); `#intro-opts` / `.intro-opt[data-target]` created in markup (Task 3), revealed/wired in JS (Task 3), styled in §25 (Task 3); `#intro-proxy` column id (Task 3 markup) matches the `#intro-proxy { display:none }` rule (Task 3 CSS); hidden button ids `btn-offer` / `btn-keep` match the `data-target`s and the existing `offer_btn`/`keep_btn` handlers.
+- **Proxy pattern validity:** `display:none` Gradio buttons still fire on JS `.click()` — same mechanism as the shipped `#idle-trigger`.