feat(game): letterboxed scene shell + recovered drawer + tone wiring

app.py

@@ -21,7 +21,7 @@ from character import (FRAGMENT_TONES, INTRO_CARDS, INTRO_SEQUENCES,
 from engine import run_turn, run_turn_stream
 from finale import finale_steps, finale_steps_bad, finale_steps_good
 from memory import apply_update, get_tier, decide_ending, pick_aware_memory, should_recall, style_signal
-from render import render_entity, render_treasure
+from render import render_entity, render_treasure, render_recovered, _tone_class
 from sting import chime_wav_bytes, menu_loop_wav_bytes, type_tick_wav_bytes
 from voice import speak
 
@@ -74,7 +74,8 @@ def _pristine_state():
 
 def _reset():
     """Wipe the board for a fresh game without a page reload. Order matches
-    [msg_input, send_btn, chatbot, state, bond_panel, treasure_panel, entity_panel, voice_panel]."""
+    [msg_input, send_btn, chatbot, state, bond_panel, treasure_panel,
+     entity_panel, voice_panel, recovered_panel]."""
     fresh = _pristine_state()
     return (
         gr.update(value="", interactive=True,
@@ -86,6 +87,7 @@ def _reset():
         render_treasure([]),
         render_entity(20),
         _voice_html(None),
+        render_recovered(0),
     )
 
 
@@ -399,9 +401,15 @@ _HEAD_JS = """
     }, 130);
   }
 
-  // mute button + restart + mode buttons, wired once rendered
+    // mute button + restart + mode buttons, wired once rendered
   function icon() { return st.muted ? '\\uD83D\\uDD07' : '\\uD83D\\uDD0A'; }
   function wire() {
+    // corner drawers: header chip toggles expand
+    document.querySelectorAll('.game-drawer .drawer-head').forEach(function (h) {
+      if (h.dataset.hollowWired) return;
+      h.dataset.hollowWired = '1';
+      h.addEventListener('click', function () { h.closest('.game-drawer').classList.toggle('open'); });
+    });
     var btn = document.querySelector('.voice-btn');
     var rb = document.querySelector('.restart-btn');
     if (btn && !btn.dataset.hollowWired) {
@@ -530,7 +538,8 @@ def _enter_game(mode: str, tone_seed: int = 0):
         _render_bond(state["affinity"], get_tier(state["affinity"])),
         render_treasure(state["treasure"], claimed=set(state["claimed"]),
                         wounds=state.get("wounds", [])),
-        render_entity(state["affinity"]),
+        render_entity(state["affinity"], tone=state["tone"]),
+        render_recovered(state.get("fragments_told", 0)),
     )
 
 
@@ -639,11 +648,13 @@ def _play_finale(state: dict, history: list):
     bond = _render_bond(state["affinity"], tier)
     treasure_html = render_treasure(state["treasure"], struck=struck,
                                     claimed=set(claimed))
-    entity = render_entity(state["affinity"], "build", seq=state["turn"])
+    entity = render_entity(state["affinity"], "build", seq=state["turn"],
+                           tone=state.get("tone", 0))
     locked = gr.update(interactive=False)
     input_locked = gr.update(interactive=False)
     mutated = False
     convulsed = False
+    recovered = render_recovered(state.get("fragments_told", 0))
 
     for step in finale_steps(claimed):
         role = "assistant" if step["speaker"] == "hollow" else "user"
@@ -657,7 +668,7 @@ def _play_finale(state: dict, history: list):
         if step["stage"] == "frenzy":
             convulsed = True
             entity = render_entity(state["affinity"], "convulse_loop",
-                                   seq=state["turn"])
+                                   seq=state["turn"], tone=state.get("tone", 0))
 
         if step["stage"] == "turn" and not mutated:
             mutated = True
@@ -665,18 +676,21 @@ def _play_finale(state: dict, history: list):
             treasure_html = render_treasure(state["treasure"], mine=True)
             # the `end` face lands and the heartbeat flatlines, exactly now
             # (seamless — the convulsion already settled on this face)
-            entity = render_entity(state["affinity"], "end_settle", seq=state["turn"])
+            entity = render_entity(state["affinity"], "end_settle",
+                                   seq=state["turn"], tone=state.get("tone", 0))
             input_locked = gr.update(interactive=False, placeholder="stay.")
 
         speak_it = step["speaker"] == "hollow"
         voice, pause = _voice_and_pause(step["text"], speak_it, step["pause"])
-        yield (input_locked, locked, chat_hist, state, bond, treasure_html, entity, voice)
+        yield (input_locked, locked, chat_hist, state, bond, treasure_html,
+               entity, voice, recovered)
         if pause > 0:
             time.sleep(pause)
 
     yield (
         gr.update(interactive=False, placeholder=_DEAD_PLACEHOLDER),
-        locked, chat_hist, state, bond, treasure_html, entity, _voice_html(None),
+        locked, chat_hist, state, bond, treasure_html, entity,
+        _voice_html(None), recovered,
     )
 
 
@@ -690,11 +704,13 @@ def _play_finale_bad(state: dict, history: list):
     revealed = 0
     treasure_html = render_treasure(state["treasure"], claimed=set(state["claimed"]),
                                     wounds=wounds, revealed=0)
-    entity = render_entity(state["affinity"], "build", seq=state["turn"])
+    entity = render_entity(state["affinity"], "build", seq=state["turn"],
+                           tone=state.get("tone", 0))
     locked = gr.update(interactive=False)
     input_locked = gr.update(interactive=False)
     mutated = False
     frenzied = False
+    recovered = render_recovered(state.get("fragments_told", 0))
 
     for step in finale_steps_bad(wounds):
         role = "assistant" if step["speaker"] == "hollow" else "user"
@@ -715,23 +731,27 @@ def _play_finale_bad(state: dict, history: list):
                                             yours=True)
             input_locked = gr.update(interactive=False, placeholder="get out.")
 
-        # the child stays a blurred smudge through the whole recital; the rage
-        # face is revealed only AFTER the convulsion, with the threat
+        # the child stays a smudge through the whole recital; the rage face is
+        # revealed only AFTER the convulsion, with the threat
         if step["stage"] == "frenzy":
             frenzied = True
-            entity = render_entity(state["affinity"], "frenzy", seq=state["turn"])
+            entity = render_entity(state["affinity"], "frenzy",
+                                   seq=state["turn"], tone=state.get("tone", 0))
         elif frenzied:
-            entity = render_entity(state["affinity"], "rage", seq=state["turn"])
+            entity = render_entity(state["affinity"], "rage",
+                                   seq=state["turn"], tone=state.get("tone", 0))
 
         speak_it = step["speaker"] == "hollow"
         voice, pause = _voice_and_pause(step["text"], speak_it, step["pause"])
-        yield (input_locked, locked, chat_hist, state, bond, treasure_html, entity, voice)
+        yield (input_locked, locked, chat_hist, state, bond, treasure_html,
+               entity, voice, recovered)
         if pause > 0:
             time.sleep(pause)
 
     yield (
         gr.update(interactive=False, placeholder="see you soon."),
-        locked, chat_hist, state, bond, treasure_html, entity, _voice_html(None),
+        locked, chat_hist, state, bond, treasure_html, entity,
+        _voice_html(None), recovered,
     )
 
 
@@ -744,12 +764,14 @@ def _play_finale_good(state: dict, history: list):
     bond = _render_bond(state["affinity"], tier)
     treasure_html = render_treasure(state["treasure"],
                                     claimed=set(state["claimed"]))
-    entity = render_entity(state["affinity"], "build", seq=state["turn"])
+    entity = render_entity(state["affinity"], "build", seq=state["turn"],
+                           tone=state.get("tone", 0))
     locked = gr.update(interactive=False)
     input_locked = gr.update(interactive=False)
     mutated = False
     convulsed = False
     settled = False
+    recovered = render_recovered(state.get("fragments_told", 0))
 
     for step in finale_steps_good(OWN_FRAGMENTS):
         chat_hist = chat_hist + [{"role": "assistant", "content": step["text"]}]
@@ -765,30 +787,32 @@ def _play_finale_good(state: dict, history: list):
         if step["stage"] == "frenzy":
             convulsed = True
             entity = render_entity(state["affinity"], "convulse_good",
-                                   seq=state["turn"])
+                                   seq=state["turn"], tone=state.get("tone", 0))
         elif convulsed and step["stage"] != "loop":
             # the smile lands + the relief sigh plays, exactly now (seamless —
             # the convulsion already settled on this face); sigh only once
             if not settled:
                 settled = True
                 entity = render_entity(state["affinity"], "peace_settle",
-                                       seq=state["turn"])
+                                       seq=state["turn"], tone=state.get("tone", 0))
             else:
                 entity = render_entity(state["affinity"], "peace",
-                                       seq=state["turn"])
+                                       seq=state["turn"], tone=state.get("tone", 0))
 
         if step["stage"] == "loop":
             entity = render_entity(state["affinity"], "peace_dissolve",
-                                   seq=state["turn"])
+                                   seq=state["turn"], tone=state.get("tone", 0))
 
         voice, pause = _voice_and_pause(step["text"], True, step["pause"])
-        yield (input_locked, locked, chat_hist, state, bond, treasure_html, entity, voice)
+        yield (input_locked, locked, chat_hist, state, bond, treasure_html,
+               entity, voice, recovered)
         if pause > 0:
             time.sleep(pause)
 
     yield (
         gr.update(interactive=False, placeholder="it's quiet now."),
-        locked, chat_hist, state, bond, treasure_html, entity, _voice_html(None),
+        locked, chat_hist, state, bond, treasure_html, entity,
+        _voice_html(None), recovered,
     )
 
 
@@ -797,10 +821,10 @@ def chat(user_msg: str, state: dict, history: list):
     # logic is unchanged (match on the sentinel class, robust to re-serializing)
     if history and "hollow-typing" in str(history[-1].get("content", "")):
         history = history[:-1]
+    ending = state.get("ending")
+    if state.get("ended") and ending is None:
+        ending = "loop"  # sessions ended before `ending` existed
     if not user_msg.strip() or state.get("ended"):
-        ending = state.get("ending")
-        if state.get("ended") and ending is None:
-            ending = "loop"  # sessions ended before `ending` existed
         tier = get_tier(state["affinity"])
         wounds = state.get("wounds", [])
         entity_mode = {"good": "peace", "bad": "rage", "loop": "end"}.get(
@@ -816,8 +840,10 @@ def chat(user_msg: str, state: dict, history: list):
                             else set(state["claimed"]),
                             wounds=wounds, revealed=len(wounds),
                             yours=(ending == "bad")),
-            render_entity(state["affinity"], entity_mode, seq=state["turn"]),
+            render_entity(state["affinity"], entity_mode, seq=state["turn"],
+                          tone=state.get("tone", 0)),
             _voice_html(None),
+            render_recovered(state.get("fragments_told", 0)),
         )
         return
 
@@ -832,8 +858,10 @@ def chat(user_msg: str, state: dict, history: list):
             _render_bond(state["affinity"], tier),
             render_treasure(state["treasure"], claimed=set(state["claimed"]),
                             wounds=state.get("wounds", [])),
-            render_entity(state["affinity"], "idle", seq=state["turn"]),
+            render_entity(state["affinity"], "idle", seq=state["turn"],
+                          tone=state.get("tone", 0)),
             _voice_html(None),
+            render_recovered(state.get("fragments_told", 0)),
         )
         return
 
@@ -899,8 +927,10 @@ def chat(user_msg: str, state: dict, history: list):
                 _render_bond(state["affinity"], tier_now),
                 render_treasure(state["treasure"], claimed=set(state["claimed"]),
                                 wounds=state.get("wounds", [])),
-                render_entity(state["affinity"], "idle", seq=state["turn"]),
+                render_entity(state["affinity"], "idle", seq=state["turn"],
+                              tone=state.get("tone", 0)),
                 voice,
+                render_recovered(state.get("fragments_told", 0)),
             )
     except Exception as e:
         print(f"[chat] run_turn_stream failed: {e!r}")
@@ -939,6 +969,7 @@ def chat(user_msg: str, state: dict, history: list):
     _plea = _memory_plea_level(state, bool(do_recall and recall_memory))
     _ph = ("a memory: a person, a place, a moment you lived..."
            if _plea >= 2 else "tell it something you remember...")
+    just_claimed = recall_memory if (do_recall and recall_memory) else None
     yield (
         gr.update(value="", interactive=True, placeholder=_ph),
         gr.update(interactive=True),
@@ -946,9 +977,12 @@ def chat(user_msg: str, state: dict, history: list):
         state,
         _render_bond(state["affinity"], tier),
         render_treasure(state["treasure"], claimed=set(state["claimed"]),
-                        wounds=state.get("wounds", [])),
-        render_entity(state["affinity"], mode, seq=state["turn"]),
+                        wounds=state.get("wounds", []),
+                        just_claimed=just_claimed),
+        render_entity(state["affinity"], mode, seq=state["turn"],
+                      tone=state.get("tone", 0)),
         voice,
+        render_recovered(state.get("fragments_told", 0)),
     )
 
 
@@ -996,47 +1030,38 @@ with gr.Blocks(title="Hollow") as demo:
                              elem_classes="intro-enter-btn")
 
     with gr.Column(visible=False, elem_id="game-view") as game_view:
-        with gr.Row():
-            gr.Markdown(
-                "## Hollow\n*something is here, at the edge of the wood.<br>"
-                "it remembers what you give it — and how you give it.*"
-            )
+        gr.HTML('<div id="game-bg"></div><div id="game-vig"></div>'
+                '<div id="game-frame-edge"></div>')
+        with gr.Row(elem_id="game-topbar"):
+            gr.HTML('<div id="game-title">Hollow</div>')
             restart_btn = gr.Button("↺ begin again", elem_classes="restart-btn",
                                     scale=0)
             voice_btn = gr.Button("🔊", elem_classes="voice-btn", scale=0)
 
-        with gr.Row():
-            with gr.Column(scale=1, min_width=220):
-                entity_panel = gr.HTML(value=render_entity(20))
-
-            with gr.Column(scale=2):
-                chatbot = gr.Chatbot(
-                    value=[{"role": "assistant", "content": OPENING_LINE}],
-                    label="",
-                    show_label=False,
-                    height=500,
-                    buttons=[],
-                    autoscroll=True,
-                )
-
-                bond_panel = gr.HTML(value=_render_bond(20, "Hollow"))
-
-                with gr.Row():
-                    msg_input = gr.Textbox(
-                        placeholder="tell it something you remember...",
-                        show_label=False,
-                        scale=9,
-                        autofocus=True,
-                    )
-                    send_btn = gr.Button("→", scale=1)
-
-            with gr.Column(scale=1):
-                treasure_panel = gr.HTML(value=render_treasure([]))
-                # carries Hollow's voice <audio>; kept MOUNTED (not visible=False,
-                # which can unmount it so the audio never plays) and collapsed to
-                # zero size via CSS so it has no visual footprint
-                voice_panel = gr.HTML(value="",
-                                      elem_classes="voice-channel")
+        # left drawer — your memories
+        with gr.Column(elem_id="drawer-left", elem_classes="game-drawer"):
+            treasure_panel = gr.HTML(value=render_treasure([]))
+        # right drawer — its own recovered memories
+        with gr.Column(elem_id="drawer-right", elem_classes="game-drawer"):
+            recovered_panel = gr.HTML(value=render_recovered(0))
+
+        # center: the child silhouette in the fog
+        entity_panel = gr.HTML(value=render_entity(20), elem_id="game-entity")
+
+        # bottom: the conversation as subtitle/dialogue + input
+        with gr.Column(elem_id="game-dialogue"):
+            chatbot = gr.Chatbot(
+                value=[{"role": "assistant", "content": OPENING_LINE}],
+                label="", show_label=False, height=210, buttons=[],
+                autoscroll=True,
+            )
+            bond_panel = gr.HTML(value=_render_bond(20, "Hollow"))
+            with gr.Row(elem_id="game-inputrow"):
+                msg_input = gr.Textbox(
+                    placeholder="tell it something you remember...",
+                    show_label=False, scale=9, autofocus=True)
+                send_btn = gr.Button("→", scale=1)
+            voice_panel = gr.HTML(value="", elem_classes="voice-channel")
 
         # show_progress="hidden" kills Gradio's per-component "processing" overlay;
         # we show our own "..." pending bubble instead (set in _start_turn)
@@ -1048,7 +1073,8 @@ with gr.Blocks(title="Hollow") as demo:
         ).then(
             fn=chat,
             inputs=[msg_input, state, chatbot],
-            outputs=[msg_input, send_btn, chatbot, state, bond_panel, treasure_panel, entity_panel, voice_panel],
+            outputs=[msg_input, send_btn, chatbot, state, bond_panel,
+                     treasure_panel, entity_panel, voice_panel, recovered_panel],
             show_progress="hidden",
         )
 
@@ -1060,7 +1086,8 @@ with gr.Blocks(title="Hollow") as demo:
         ).then(
             fn=chat,
             inputs=[msg_input, state, chatbot],
-            outputs=[msg_input, send_btn, chatbot, state, bond_panel, treasure_panel, entity_panel, voice_panel],
+            outputs=[msg_input, send_btn, chatbot, state, bond_panel,
+                     treasure_panel, entity_panel, voice_panel, recovered_panel],
             show_progress="hidden",
         )
 
@@ -1068,7 +1095,7 @@ with gr.Blocks(title="Hollow") as demo:
             fn=_reset,
             inputs=None,
             outputs=[msg_input, send_btn, chatbot, state, bond_panel,
-                     treasure_panel, entity_panel, voice_panel],
+                     treasure_panel, entity_panel, voice_panel, recovered_panel],
             show_progress="hidden",
         )
 
@@ -1082,7 +1109,7 @@ with gr.Blocks(title="Hollow") as demo:
                            show_progress="hidden")
 
     _enter_outputs = [intro_view, game_view, state, chatbot, bond_panel,
-                      treasure_panel, entity_panel]
+                      treasure_panel, entity_panel, recovered_panel]
     _intro_outputs = [menu_view, intro_view, pending_mode]
     tester_btn.click(lambda: _show_intro("tester"), None, _intro_outputs,
                      show_progress="hidden")

render.py

@@ -2,6 +2,7 @@ import base64
 import html
 from pathlib import Path
 
+from character import OWN_FRAGMENTS
 from sting import (flatline_wav_bytes, heartbeat_wav_bytes,
                    sigh_wav_bytes, sting_wav_bytes)
 
@@ -305,15 +306,31 @@ def _wound_entries(wounds: list[str], revealed: int) -> list[str]:
     return parts
 
 
+def render_recovered(fragments_told: int) -> str:
+    """The child's own recovered memories — the right-hand drawer."""
+    n = max(0, min(int(fragments_told), len(OWN_FRAGMENTS)))
+    head = f'<div class="drawer-head" style="{_HEADER}">✦ What it remembers</div>'
+    if n == 0:
+        body = f'<div style="{_EMPTY}">it remembers nothing of itself.</div>'
+    else:
+        rows = "".join(
+            f'<div class="recovered-item" style="{_ITEM}{_CLAIMED}font-style:italic;">'
+            f'{html.escape(OWN_FRAGMENTS[i], quote=True)}</div>'
+            for i in range(n)
+        )
+        body = rows
+    return f'<div class="recovered-panel" style="{_PANEL}">{head}{body}</div>'
+
+
 def render_treasure(treasure: list[str], struck: set[str] | None = None,
                     mine: bool = False, claimed: set[str] | None = None,
                     wounds: list[str] | None = None, revealed: int = 0,
-                    yours: bool = False) -> str:
+                    yours: bool = False, just_claimed: str | None = None) -> str:
     struck = struck or set()
     claimed = claimed or set()
     wounds = wounds or []
     title = "✦ Your Words" if yours else "✦ Treasure"
-    header = f'<div style="{_HEADER}">{title}</div>'
+    header = f'<div class="drawer-head" style="{_HEADER}">{title}</div>'
     if mine:
         body = f'<div style="{_MINE}">...mine now.</div>'
     elif yours:
@@ -328,13 +345,19 @@ def render_treasure(treasure: list[str], struck: set[str] | None = None,
         for i, m in enumerate(treasure):
             # older memories sink into the dark; newest stays fully lit
             age_op = max(0.45, round(1 - 0.07 * (n - 1 - i), 2))
+            classes = ["treasure-item"]
+            if m == just_claimed:
+                classes.append("claiming")
+            if m in claimed:
+                classes.append("claimed")
             style = f"{_ITEM}opacity:{age_op};"
             if m in claimed:
                 style += _CLAIMED
             if m in struck:
                 style += _STRUCK
+            cls = " ".join(classes)
             parts.append(
-                f'<div style="{style}">{html.escape(m, quote=True)}</div>'
+                f'<div class="{cls}" style="{style}">{html.escape(m, quote=True)}</div>'
             )
         parts.extend(_wound_entries(wounds, revealed))
         body = "".join(parts)

styles.css

@@ -1319,3 +1319,303 @@ footer { display: none !important; }
     background: rgba(30,24,42,0.82) !important;
     border-color: rgba(190,178,210,0.6) !important;
 }
+
+/* ── 26. Game scene — letterboxed foggy wood (Direction 3b) ── */
+#game-view {
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+    background: #04040a;
+    z-index: 50;
+}
+#game-view.hide, #game-view.hidden { display: none !important; }
+
+/* blurred ambient forest backdrop, same treatment as intro/menu */
+#game-bg {
+    position: fixed;
+    inset: -6%;
+    background-image: url('assets/background.webp');
+    background-size: cover;
+    background-position: center 38%;
+    filter: grayscale(1) blur(44px) brightness(0.30);
+    transform: scale(1.08);
+    z-index: 0;
+}
+
+/* radial vignette — the scene breathes through this */
+#game-vig {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1;
+    background:
+        radial-gradient(ellipse at 50% 36%, transparent 34%, rgba(4,3,8,0.78) 100%),
+        linear-gradient(to bottom, rgba(6,4,12,0.62) 0%, transparent 13%);
+}
+
+/* a subtle inner frame edge so the scene feels contained like the intro */
+#game-frame-edge {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: min(1280px, 95vw);
+    aspect-ratio: 16 / 10;
+    max-height: 82vh;
+    pointer-events: none;
+    z-index: 2;
+    box-shadow: inset 0 0 90px rgba(0,0,0,0.55);
+}
+
+/* top bar: title + controls */
+#game-topbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 22px;
+    pointer-events: none;
+}
+#game-topbar > * { pointer-events: auto; }
+
+#game-title {
+    font-family: 'Special Elite', monospace;
+    font-size: 1.05rem;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: #c4bcd8;
+    text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 12px rgba(120,90,160,0.35);
+}
+#game-title .named {
+    font-style: italic;
+    text-transform: none;
+    letter-spacing: 0.08em;
+    color: #e2dcf0;
+}
+
+/* corner drawers */
+.game-drawer {
+    position: fixed;
+    top: 64px;
+    z-index: 8;
+    width: min(260px, 22vw);
+    min-width: 180px;
+    max-height: calc(100vh - 90px);
+    transition: max-height 0.45s ease, opacity 0.35s ease;
+    overflow: hidden;
+    opacity: 0.75;
+}
+.game-drawer:hover { opacity: 1; }
+.game-drawer.open { max-height: calc(100vh - 90px); }
+.game-drawer:not(.open) {
+    max-height: 42px;
+    cursor: pointer;
+}
+#drawer-left { left: 18px; }
+#drawer-right { right: 18px; }
+
+.drawer-head {
+    cursor: pointer;
+    user-select: none;
+    padding-bottom: 6px !important;
+    border-bottom: 1px solid #1e1628;
+    margin-bottom: 8px;
+}
+.drawer-head::after {
+    content: ' ›';
+    opacity: 0.55;
+    margin-left: 6px;
+    display: inline-block;
+    transition: transform 0.3s ease;
+}
+.game-drawer.open .drawer-head::after {
+    transform: rotate(90deg);
+}
+
+/* the child silhouette zone — center, bottom-weighted */
+#game-entity {
+    position: fixed;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+    z-index: 4;
+    width: min(360px, 26vw);
+    min-width: 220px;
+    height: min(520px, 58vh);
+    pointer-events: none;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+}
+
+.entity-scene {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+}
+
+.entity-silhouette {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+}
+
+.entity-silhouette img {
+    position: absolute;
+    bottom: 0;
+    width: 100% !important;
+    height: auto !important;
+    max-height: 100%;
+    object-fit: contain !important;
+    object-position: bottom center !important;
+}
+
+.entity-glow {
+    position: absolute;
+    inset: 10% 0 0 0;
+    background: radial-gradient(ellipse 50% 60% at 50% 80%,
+                rgba(140,120,170,0.18) 0%, transparent 70%);
+    pointer-events: none;
+    opacity: 0.6;
+    mix-blend-mode: screen;
+}
+
+/* bottom subtitle / dialogue panel */
+#game-dialogue {
+    position: fixed;
+    left: 50%;
+    bottom: 22px;
+    transform: translateX(-50%);
+    z-index: 9;
+    width: min(820px, 80vw);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+#game-dialogue .chatbot {
+    height: 210px !important;
+    background: rgba(10,8,16,0.55) !important;
+    border: 10px solid transparent !important;
+    border-image: var(--stone-frame) 30 !important;
+    box-shadow: var(--stone-bevel),
+                0 -20px 60px rgba(0,0,0,0.55) !important;
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    padding: 10px 14px !important;
+}
+
+#game-dialogue .bot,
+#game-dialogue .bot .prose,
+#game-dialogue .bot .message,
+#game-dialogue .bot p {
+    font-style: italic !important;
+    font-size: 1.14rem !important;
+    color: #d8d2e6 !important;
+    text-shadow: 0 0 16px rgba(120,70,160,0.22);
+}
+
+#game-dialogue .user,
+#game-dialogue .user .prose,
+#game-dialogue .user .message,
+#game-dialogue .user p {
+    font-style: normal !important;
+    font-size: 1.02rem !important;
+    color: #e6e0f0 !important;
+}
+
+#game-dialogue .user {
+    background: rgba(18,14,28,0.72) !important;
+}
+
+#game-inputrow {
+    display: flex;
+    gap: 8px;
+    align-items: flex-end;
+}
+
+#game-inputrow textarea,
+#game-inputrow input[type="text"] {
+    background: rgba(8,6,14,0.55) !important;
+    border-bottom: 1px solid #3a2a50 !important;
+    padding: 8px 10px !important;
+}
+
+/* tone classes — the world blooms or rots */
+.tone-warm #game-bg { filter: grayscale(1) blur(44px) brightness(0.38); }
+.tone-warm #game-vig {
+    background:
+        radial-gradient(ellipse at 50% 36%, transparent 38%, rgba(4,3,8,0.62) 100%),
+        linear-gradient(to bottom, rgba(6,4,12,0.45) 0%, transparent 13%);
+}
+.tone-warm .entity-img { filter: brightness(1.05) !important; }
+
+.tone-neutral #game-bg { filter: grayscale(1) blur(44px) brightness(0.30); }
+
+.tone-wounded #game-bg { filter: grayscale(1) blur(46px) brightness(0.22); }
+.tone-wounded #game-vig {
+    background:
+        radial-gradient(ellipse at 50% 36%, transparent 30%, rgba(4,3,8,0.86) 100%),
+        linear-gradient(to bottom, rgba(6,4,12,0.75) 0%, transparent 13%);
+}
+.tone-wounded .entity-img { opacity: 0.78 !important; }
+
+.tone-hostile #game-bg {
+    filter: grayscale(1) blur(46px) brightness(0.20);
+}
+.tone-hostile #game-vig {
+    background:
+        radial-gradient(ellipse at 50% 36%, transparent 26%, rgba(30,4,8,0.82) 100%),
+        linear-gradient(to bottom, rgba(40,6,12,0.55) 0%, transparent 20%);
+}
+.tone-hostile .entity-img {
+    filter: sepia(0.25) saturate(1.4) brightness(0.85) !important;
+}
+
+/* recall migration — the claimed memory drifts toward the child */
+.treasure-item { transition: opacity 0.6s ease; }
+.treasure-item.claiming {
+    animation: claim-migrate 1.4s ease-out forwards;
+}
+
+@keyframes claim-migrate {
+    0%   { transform: translateX(0); opacity: 1; }
+    45%  { transform: translateX(60%); opacity: 0.6; }
+    100% { transform: translateX(120%); opacity: 0.25; }
+}
+
+/* keep existing entity animations working inside the new scene */
+.entity-flash-wrap,
+.entity-frenzy-wrap,
+.entity-convulse-soft {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+/* ensure the global body stains intensify under hostile tone */
+.tone-hostile ~ .gradio-container::after,
+.tone-hostile + .gradio-container::after {
+    opacity: 1.35;
+}
+
+@media (max-width: 900px) {
+    .game-drawer { width: 150px; min-width: 140px; }
+    #game-entity { width: 42vw; min-width: 160px; }
+    #game-dialogue { width: 92vw; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .entity-sway { animation: none !important; }
+    .treasure-item.claiming { animation: none !important; opacity: 0.4; }
+}

tests/test_render.py

@@ -1,4 +1,4 @@
-from render import render_entity, render_treasure
+from render import render_entity, render_treasure, render_recovered
 
 
 def test_entity_renders_silhouette_scene():
@@ -8,6 +8,25 @@ def test_entity_renders_silhouette_scene():
     assert 'entity-portal' not in html        # the gothic arch is gone
 
 
+class TestRenderRecovered:
+    def test_empty_shows_nothing(self):
+        out = render_recovered(0)
+        assert "remembers nothing of itself" in out.lower()
+        assert "drawer-head" in out
+
+    def test_reveals_fragments_in_order(self):
+        from character import OWN_FRAGMENTS
+        out = render_recovered(2)
+        assert OWN_FRAGMENTS[0] in out
+        assert OWN_FRAGMENTS[1] in out
+        assert OWN_FRAGMENTS[2] not in out
+
+    def test_capped_at_total_fragments(self):
+        from character import OWN_FRAGMENTS
+        out = render_recovered(99)
+        assert out.count('class="recovered-item') == len(OWN_FRAGMENTS)
+
+
 class TestRenderTreasure:
     def test_empty_shows_placeholder(self):
         out = render_treasure([])
@@ -161,6 +180,13 @@ class TestRenderTreasureUX:
         out = render_treasure(["mine still"])
         assert "border-left-color:#3a2a50" not in out
 
+    def test_just_claimed_item_gets_claiming_class(self):
+        out = render_treasure(["mine still", "taken one"],
+                              claimed={"taken one"},
+                              just_claimed="taken one")
+        assert "claiming" in out
+        assert "class=\"treasure-item claiming" in out
+
 
 class TestTreasureWounds:
     def test_redacted_entry_per_wound(self):