feat: screamer flicker + gothic Fear & Hunger framing

Verified against the running app via headless screenshots.

Flashes:
- the capture flash now hard-cuts through ALL four faces (terror/almost/end/
base) in a ~0.55s steps() flicker — too fast to read, the portrait seems to
convulse through what it could become
- the full-screen echo is now a real screamer: face stabs the whole screen for
a few frames at 0.5 opacity, gone in ~0.5s

Gothic framing (medieval, F&H):
- the child sits behind a pointed lancet arch (cathedral window): the scene is
SVG-masked to the arch, a stone frame with bronze keystone + base blocks
traces it
- reusable --goth-frame border-image (double stone line, thickened corner
brackets, bone studs) applied to the treasure reliquary, the visitor bubble
and the send rune
- treasure restructured: frame on the panel, fade mask moved to an inner
scroller so the mask no longer eats the border-image
- bone/bronze palette for visibility against the void

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.gitignore

@@ -225,3 +225,4 @@ assets/*.png
 
 # Visual check harness output
 tools/_visual/
+tools/_visual/

render.py

@@ -92,15 +92,16 @@ def render_entity(affinity: int, mode: str = "idle", seq: int = 0) -> str:
         flash = ""
         if mode in ("flash", "flash_strong"):
             strong = " entity-flash-strong" if mode == "flash_strong" else ""
-            # the terror cuts through the fog: much sharper than the portrait
-            flash_look = (
-                f"filter:blur({round(blur * 0.35, 1)}px);"
-                f"opacity:{max(opacity, 0.85)};transform:scale({scale});"
+            # a fast subliminal flicker through every face — too quick to read,
+            # the portrait seems to convulse through what it could become
+            flash_look = f"transform:scale({scale});"
+            layers = "".join(
+                f'<img class="entity-flick flick-{i}" src="{_src(n)}">'
+                for i, n in enumerate(("terror", "almost", "end", "base"))
             )
             flash = (
-                f'<div class="entity-flash-wrap" style="{flash_look}">'
-                f'<img class="entity-flash {flash_key}{strong}" src="{_src("terror")}">'
-                "</div>"
+                f'<div class="entity-flash-wrap {flash_key}{strong}" style="{flash_look}">'
+                f"{layers}</div>"
             )
         if mode == "flash_strong":
             ghost = (
@@ -109,12 +110,15 @@ def render_entity(affinity: int, mode: str = "idle", seq: int = 0) -> str:
             )
 
     return (
+        '<div class="entity-portal">'
         '<div class="entity-stage">'
         f"{figure}{flash}"
         f'<div class="entity-fog" style="opacity:{fog_op}"></div>'
         f'<div class="entity-grain" style="opacity:{grain_op}"></div>'
         f'<div class="entity-vig" style="opacity:{vig_op}"></div>'
         "</div>"
+        '<div class="entity-frame"></div>'
+        "</div>"
         f"{ghost}"
     )
 
@@ -143,4 +147,9 @@ def render_treasure(treasure: list[str], struck: set[str] | None = None,
                 f'<div style="{style}">{html.escape(m, quote=True)}</div>'
             )
         body = "".join(parts)
-    return f'<div class="treasure-panel" style="{_PANEL}">{header}{body}</div>'
+    return (
+        f'<div class="treasure-panel" style="{_PANEL}">'
+        f"{header}"
+        f'<div class="treasure-scroll">{body}</div>'
+        "</div>"
+    )

styles.css

@@ -381,14 +381,28 @@ footer { display: none !important; }
     }
 }
 
-/* ── 15. Entity panel — the child in the fog ──── */
-.entity-stage {
+/* ── 15. Entity panel — the child behind a gothic arch ── */
+.entity-portal {
     position: relative;
     aspect-ratio: 5 / 6;
+}
+
+/* the scene is masked to a pointed (lancet) arch — a cathedral window */
+.entity-stage {
+    position: absolute;
+    inset: 0;
     overflow: hidden;
-    border-radius: 6px;
     background: #0b0a10;
-    border: 1px solid #1c1528;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,52 A58,58 0 0 1 50,4 A58,58 0 0 1 100,52 L100,120 Z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,52 A58,58 0 0 1 50,4 A58,58 0 0 1 100,52 L100,120 Z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
+}
+
+/* stone arch frame: double stroke, keystone at the apex, base blocks */
+.entity-frame {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M2,120 L2,52 A56,56 0 0 1 50,6 A56,56 0 0 1 98,52 L98,120' fill='none' stroke='%23322a44' stroke-width='4.5'/%3E%3Cpath d='M4,120 L4,53 A54,54 0 0 1 50,7 A54,54 0 0 1 96,53 L96,120' fill='none' stroke='%239c8a5e' stroke-width='1.7'/%3E%3Cpath d='M50,0 L59,9 L50,19 L41,9 Z' fill='%233a3120' stroke='%23d2be8a' stroke-width='1'/%3E%3Crect x='0' y='107' width='18' height='13' fill='%23231d14' stroke='%239c8a5e' stroke-width='1'/%3E%3Crect x='82' y='107' width='18' height='13' fill='%23231d14' stroke='%239c8a5e' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
 }
 
 .entity-figure {
@@ -414,60 +428,53 @@ footer { display: none !important; }
     object-fit: cover;
 }
 
-/* terror flash: one-shot; animation-name alternates per turn (flash-0/flash-1)
-   so the animation restarts even when Gradio morphs the DOM in place */
+/* terror flicker: a fast subliminal convulsion through every face. Hard
+   steps() cuts, ~0.55s total, too quick to read. The DOM is replaced each
+   turn so the one-shot animations always restart. */
 .entity-flash-wrap {
     position: absolute;
     inset: 0;
 }
 
-.entity-flash {
+.entity-flick {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0;
-    animation-duration: 2.5s;
-    animation-timing-function: ease-out;
+    animation-duration: 0.55s;
+    animation-timing-function: steps(1, end);
     animation-fill-mode: forwards;
 }
 
-.entity-flash.flash-0 { animation-name: entity-flash-a; }
-.entity-flash.flash-1 { animation-name: entity-flash-b; }
+.entity-flash-wrap.entity-flash-strong .entity-flick { animation-duration: 0.7s; }
 
-.entity-flash.entity-flash-strong { animation-duration: 3s; }
-.entity-flash.entity-flash-strong.flash-0 { animation-name: entity-flash-a, entity-glitch-a; }
-.entity-flash.entity-flash-strong.flash-1 { animation-name: entity-flash-b, entity-glitch-b; }
+/* each face blinks in its own scattered windows — they overlap into chaos */
+.flick-0 { animation-name: flick-terror; }   /* terror — appears most */
+.flick-1 { animation-name: flick-almost; }
+.flick-2 { animation-name: flick-end; }
+.flick-3 { animation-name: flick-base; }      /* settles back to the portrait */
 
-@keyframes entity-flash-a {
-    0%   { opacity: 0; }
-    10%  { opacity: 1; }
-    80%  { opacity: 1; }
-    100% { opacity: 0; }
+@keyframes flick-terror {
+    0%, 100% { opacity: 0; }
+    4%  { opacity: 1; } 11% { opacity: 0; }
+    34% { opacity: 1; } 42% { opacity: 0; }
+    62% { opacity: 1; } 70% { opacity: 0; }
 }
-
-@keyframes entity-flash-b {
-    0%   { opacity: 0; }
-    10%  { opacity: 1; }
-    80%  { opacity: 1; }
-    100% { opacity: 0; }
+@keyframes flick-almost {
+    0%, 100% { opacity: 0; }
+    14% { opacity: 1; } 22% { opacity: 0; }
+    50% { opacity: 1; } 57% { opacity: 0; }
 }
-
-@keyframes entity-glitch-a {
-    0%, 100% { transform: translate(0, 0); }
-    20% { transform: translate(-3px, 1px); }
-    40% { transform: translate(2px, -2px); }
-    60% { transform: translate(-2px, 2px); }
-    80% { transform: translate(3px, -1px); }
+@keyframes flick-end {
+    0%, 100% { opacity: 0; }
+    24% { opacity: 1; } 31% { opacity: 0; }
+    76% { opacity: 1; } 82% { opacity: 0; }
 }
-
-@keyframes entity-glitch-b {
-    0%, 100% { transform: translate(0, 0); }
-    20% { transform: translate(-3px, 1px); }
-    40% { transform: translate(2px, -2px); }
-    60% { transform: translate(-2px, 2px); }
-    80% { transform: translate(3px, -1px); }
+@keyframes flick-base {
+    0%, 86% { opacity: 0; }
+    90%, 100% { opacity: 1; }
 }
 
 /* subliminal full-screen echo — recall turns and the finale only */
@@ -479,26 +486,31 @@ footer { display: none !important; }
     background-size: cover;
     background-position: center 25%;
     opacity: 0;
-    filter: grayscale(1) blur(2px);
-    animation-duration: 2.4s;
-    animation-timing-function: ease-out;
+    filter: grayscale(1) blur(1px);
+    animation-duration: 0.5s;
+    animation-timing-function: steps(1, end);
     animation-fill-mode: forwards;
 }
 
+/* a real screamer: the face stabs the whole screen for a few frames, gone */
 .entity-ghost.flash-0 { animation-name: entity-ghost-a; }
 .entity-ghost.flash-1 { animation-name: entity-ghost-b; }
 
 @keyframes entity-ghost-a {
     0%   { opacity: 0; }
-    15%  { opacity: 0.18; }
-    60%  { opacity: 0.12; }
+    8%   { opacity: 0.55; }
+    18%  { opacity: 0; }
+    26%  { opacity: 0.4; }
+    34%  { opacity: 0; }
     100% { opacity: 0; }
 }
 
 @keyframes entity-ghost-b {
     0%   { opacity: 0; }
-    15%  { opacity: 0.18; }
-    60%  { opacity: 0.12; }
+    8%   { opacity: 0.55; }
+    18%  { opacity: 0; }
+    26%  { opacity: 0.4; }
+    34%  { opacity: 0; }
     100% { opacity: 0; }
 }
 
@@ -534,22 +546,84 @@ footer { display: none !important; }
     background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(5,4,9,0.82) 100%);
 }
 
-/* ── 16. Treasure — fixed-height case with inner scroll ── */
-/* items sink into the dark at both edges instead of clipping */
+/* ── 16. Treasure — stone reliquary with inner scroll ── */
+/* the frame lives on the panel; the fade mask lives on the inner scroller,
+   so the mask can't eat the border-image */
 .treasure-panel {
     height: 500px;
+    display: flex;
+    flex-direction: column;
+}
+
+.treasure-scroll {
+    flex: 1;
     overflow-y: auto;
+    min-height: 0;
+    margin-top: 6px;
     -webkit-mask-image: linear-gradient(
-        to bottom, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%);
+        to bottom, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
     mask-image: linear-gradient(
-        to bottom, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%);
+        to bottom, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
 }
 
 /* reduced motion: kill real MOTION (drift, sway, glitch translate) but keep
    the terror flash and echo — they are opacity fades, not movement, and they
    are the core horror beat. Strip only the glitch from the strong variant. */
 @media (prefers-reduced-motion: reduce) {
+    /* kill ambient drift only — the flicker and screamer are opacity, the core
+       horror beat, and must always play */
     .entity-sway, .entity-fog { animation: none !important; }
-    .entity-flash.entity-flash-strong.flash-0 { animation-name: entity-flash-a !important; }
-    .entity-flash.entity-flash-strong.flash-1 { animation-name: entity-flash-b !important; }
+}
+
+/* ── 17. Gothic stone frames — Fear & Hunger panels ── */
+/* a reusable 9-slice border: double stone line, thickened corner brackets,
+   small studs. Applied to every box so the whole UI reads medieval. */
+:root {
+    --goth-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='3' y='3' width='94' height='94' fill='none' stroke='%23322a44' stroke-width='3'/%3E%3Crect x='6.5' y='6.5' width='87' height='87' fill='none' stroke='%239c8a5e' stroke-width='1.8'/%3E%3Cg fill='%23534526'%3E%3Cpath d='M1,1 h24 v4.5 h-19.5 v19.5 h-4.5 Z'/%3E%3Cpath d='M99,1 h-24 v4.5 h19.5 v19.5 h4.5 Z'/%3E%3Cpath d='M1,99 h24 v-4.5 h-19.5 v-19.5 h-4.5 Z'/%3E%3Cpath d='M99,99 h-24 v-4.5 h19.5 v-19.5 h4.5 Z'/%3E%3C/g%3E%3Cg fill='%23d2be8a'%3E%3Ccircle cx='9' cy='9' r='3.2'/%3E%3Ccircle cx='91' cy='9' r='3.2'/%3E%3Ccircle cx='9' cy='91' r='3.2'/%3E%3Ccircle cx='91' cy='91' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.goth-frame {
+    border: 11px solid transparent !important;
+    border-image-source: var(--goth-frame) !important;
+    border-image-slice: 30 !important;
+    border-image-width: 11px !important;
+    border-image-repeat: stretch !important;
+    border-radius: 0 !important;
+}
+
+/* Treasure: stone reliquary. Keep the inner scroll + edge fade. */
+.treasure-panel {
+    border: 11px solid transparent !important;
+    border-image-source: var(--goth-frame) !important;
+    border-image-slice: 30 !important;
+    border-image-width: 11px !important;
+    border-image-repeat: stretch !important;
+    border-radius: 0 !important;
+    background: #0b0912 !important;
+}
+
+/* Visitor's words: a carved confession box */
+.user {
+    border: 10px solid transparent !important;
+    border-image-source: var(--goth-frame) !important;
+    border-image-slice: 30 !important;
+    border-image-width: 10px !important;
+    border-image-repeat: stretch !important;
+    border-radius: 0 !important;
+    background: #110c1a !important;
+}
+
+/* Send rune: an iron stud */
+.gradio-container button {
+    border: 10px solid transparent !important;
+    border-image-source: var(--goth-frame) !important;
+    border-image-slice: 30 !important;
+    border-image-width: 10px !important;
+    border-image-repeat: stretch !important;
+    border-radius: 0 !important;
+}
+
+/* Title as carved stone */
+.gradio-container h2 {
+    border-bottom: none !important;
 }

tests/test_render.py

@@ -72,11 +72,11 @@ class TestRenderEntity:
         assert "entity-flash-strong" in render_entity(40, "flash_strong")
         assert "entity-flash-strong" not in render_entity(40, "flash")
 
-    def test_flash_overlay_cuts_through_the_fog(self):
-        # the terror face is much sharper and brighter than the portrait
+    def test_flash_flickers_through_every_face(self):
+        # the flash stacks all four portraits to convulse between them
         out = render_entity(0, "flash")
-        assert "blur(3.5px)" in out   # 0.35 * 10 — flash wrap
-        assert "opacity:0.85" in out  # floor, even when the figure is faint
+        assert "flick-0" in out and "flick-3" in out
+        assert out.count("entity-flick") == 4
 
     def test_end_mode_shows_end_image_only(self):
         out = render_entity(100, "end")

tools/visual_check.py

@@ -55,4 +55,24 @@ page("flash_reduced_motion",
      "<p class='subtitle'>prefers-reduced-motion forced — flash must still be visible</p>"
      + _FORCE_RM + render_entity(40, "flash", seq=1))
 
+# gothic frames: portrait arch + treasure + mock bubble/button
+_goth = (
+    "<div style='display:flex;gap:30px;align-items:flex-start'>"
+    "<div style='width:240px'>" + render_entity(60) + "</div>"
+    "<div style='width:280px'>"
+    + render_treasure(["had a grandmother who kept bees",
+                       "grew up where the yard smelled like honey",
+                       "never learned the words", "had a red bicycle"],
+                      claimed={"never learned the words"})
+    + "</div>"
+    "<div style='display:flex;flex-direction:column;gap:20px;width:320px'>"
+    "<div class='user' style='padding:14px;color:#cec6dc'>"
+    "I still talk to people who are gone.</div>"
+    "<button class='gr-button' style='padding:12px 20px;color:#9a7caa;"
+    "background:rgba(30,20,46,0.45)'>&rarr;</button>"
+    "<div class='goth-frame' style='padding:16px;color:#9a8d6a'>goth-frame sample</div>"
+    "</div></div>"
+)
+page("goth", _goth, width=1000)
+
 print(f"pages written to {OUT}")