fix: child always fills the arch — materialization is blur/opacity only

The scale ramp shrank the child inside a fixed frame at low bond (ugly
gap, looked like a bug on the Space). Size is now constant everywhere,
including the neutral dissolve.

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

render.py

@@ -62,7 +62,6 @@ def render_entity(affinity: int, mode: str = "idle", seq: int = 0) -> str:
     t = min(a, 45) / 45  # fully materialized by bond 45 — the player must SEE him early
     blur = round(10 * (1 - t), 1)
     opacity = round(0.35 + 0.65 * t, 2)
-    scale = round(0.62 + 0.38 * t, 2)
     almost_on = a >= 76
     flash_key = f"flash-{seq % 2}"
 
@@ -71,7 +70,9 @@ def render_entity(affinity: int, mode: str = "idle", seq: int = 0) -> str:
     grain_op = round(0.13 - 0.08 * t, 2)
     vig_op = round(1 - 0.6 * t, 2)
 
-    look = f"filter:blur({blur}px);opacity:{opacity};transform:scale({scale});"
+    # the child always fills the arch — materialization is fog/blur/opacity
+    # only, never size (a shrunken child inside a fixed frame reads as a bug)
+    look = f"filter:blur({blur}px);opacity:{opacity};"
 
     ghost = ""
     tint = ""
@@ -79,7 +80,7 @@ def render_entity(affinity: int, mode: str = "idle", seq: int = 0) -> str:
         figure = (
             '<div class="entity-figure">'
             f'<img class="entity-img entity-rage" src="{_src("rage")}" '
-            'style="filter:blur(0px);opacity:1.0;transform:scale(1.0);">'
+            'style="filter:blur(0px);opacity:1.0;">'
             "</div>"
         )
         flash = ""
@@ -115,7 +116,7 @@ def render_entity(affinity: int, mode: str = "idle", seq: int = 0) -> str:
         figure = (
             '<div class="entity-figure">'
             f'<img class="entity-img entity-end" src="{_src("end")}" '
-            'style="filter:blur(0px);opacity:1.0;transform:scale(1.0);">'
+            'style="filter:blur(0px);opacity:1.0;">'
             "</div>"
         )
         flash = ""
@@ -141,7 +142,7 @@ def render_entity(affinity: int, mode: str = "idle", seq: int = 0) -> str:
             f'<div class="entity-figure{sway}">'
             f'<img class="entity-img" src="{_src("base")}" style="{look}">'
             f'<img class="entity-img entity-almost" src="{_src("almost")}" '
-            f'style="filter:blur({blur}px);opacity:{almost_op};transform:scale({scale});">'
+            f'style="filter:blur({blur}px);opacity:{almost_op};">'
             "</div>"
         )
         flash = ""
@@ -149,13 +150,12 @@ def render_entity(affinity: int, mode: str = "idle", seq: int = 0) -> str:
             strong = " entity-flash-strong" if mode == "flash_strong" else ""
             # 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 {flash_key}{strong}" style="{flash_look}">'
+                f'<div class="entity-flash-wrap {flash_key}{strong}">'
                 f"{layers}</div>"
             )
         if mode == "flash_strong":

styles.css

@@ -1,14 +1,14 @@
-/* ─────────────────────────────────────────────────
-   HOLLOW — Horror CSS for Gradio 6.x
+/* ─────────────────────────────────────────────────
+   HOLLOW — Horror CSS for Gradio 6.x
    Strategy: dissolve the Gradio "form" chrome into one
    continuous void, then layer atmosphere on top.
    No JS. @keyframes only (grain, vignette breath,
    title flicker, Bond heartbeat).
-   ───────────────────────────────────────────────── */
+   ───────────────────────────────────────────────── */
 
 @import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&display=swap');
 
-/* ── 1. Theme variable overrides ──────────────── */
+/* ── 1. Theme variable overrides ──────────────── */
 :root {
     /* Backgrounds */
     --body-background-fill:       #0a0810;
@@ -19,7 +19,7 @@
     --color-accent:               #7a4f8a;
     --color-accent-soft:          #15101f;       /* visitor bubble bg */
 
-    /* Borders — kept near-invisible; the void is continuous */
+    /* Borders — kept near-invisible; the void is continuous */
     --border-color-primary:        #14101f;
     --border-color-accent:         #2e2142;
     --border-color-accent-subdued: #14101f;
@@ -28,7 +28,7 @@
     --body-text-color:          #c0b8ce;
     --body-text-color-subdued:  #5a5070;
 
-    /* Labels — almost gone, like worn engraving */
+    /* Labels — almost gone, like worn engraving */
     --block-label-text-color:        #352f4a;
     --block-title-text-color:        #352f4a;
     --block-label-background-fill:   transparent;
@@ -51,7 +51,7 @@
     --button-shadow-active: none;
     --button-shadow-hover:  none;
 
-    /* Blocks / panels — chrome dissolved */
+    /* Blocks / panels — chrome dissolved */
     --block-background-fill: transparent;
     --block-border-color:    transparent;
     --block-border-width:    0px;
@@ -65,13 +65,13 @@
     --font:      'Crimson Text', Georgia, 'Times New Roman', serif;
     --font-mono: 'Special Elite', 'Courier New', monospace;
 
-    /* Shadows off — depth comes from atmosphere, not cards */
+    /* Shadows off — depth comes from atmosphere, not cards */
     --shadow-drop:    none;
     --shadow-drop-lg: none;
     --shadow-spread:  0;
 }
 
-/* ── 2. The void + breathing fog ──────────────── */
+/* ── 2. The void + breathing fog ──────────────── */
 body {
     background-color: #0a0810 !important;
     background-image:
@@ -81,7 +81,7 @@ body {
     min-height: 100vh;
 }
 
-/* Dried-blood stains — own fixed layer ABOVE the vignette so the corner
+/* Dried-blood stains — own fixed layer ABOVE the vignette so the corner
    darkening can't eat them. Painted over the scene like stains on glass.
    Kept off the deep edges; the breathing pulse comes from being in this
    layer's neighbourhood, not the vignette. */
@@ -117,7 +117,7 @@ body::before {
     50%      { opacity: 1.00; }
 }
 
-/* Film grain — fixed, jittering, very faint */
+/* Film grain — fixed, jittering, very faint */
 body::after {
     content: '';
     position: fixed;
@@ -139,7 +139,7 @@ body::after {
     100% { transform: translate(0, 0); }
 }
 
-/* ── 3. Container ─────────────────────────────── */
+/* ── 3. Container ─────────────────────────────── */
 .gradio-container {
     background: transparent !important;
     font-family: 'Crimson Text', Georgia, serif !important;
@@ -157,7 +157,7 @@ body::after {
     box-shadow: none !important;
 }
 
-/* ── 4. Title ─────────────────────��───────────── */
+/* ── 4. Title ─────────────────────────────────── */
 .gradio-container h2 {
     font-family: 'Special Elite', 'Courier New', monospace !important;
     color: #8a6a9a !important;
@@ -186,7 +186,7 @@ body::after {
     letter-spacing: 0.05em;
 }
 
-/* ── 5. Kill Gradio chatbot chrome ────────────── */
+/* ── 5. Kill Gradio chatbot chrome ────────────── */
 /* Toolbar (share / copy / fullscreen) breaks the fiction.
    Best killed via app.py flags too; this is the backstop. */
 .icon-button-wrapper,
@@ -199,7 +199,7 @@ button[aria-label="Clear"] {
     display: none !important;
 }
 
-/* The message scroll area — let it bleed into the void */
+/* The message scroll area — let it bleed into the void */
 .chatbot,
 .bubble-wrap,
 .message-wrap {
@@ -207,7 +207,7 @@ button[aria-label="Clear"] {
     border: none !important;
 }
 
-/* ── 6. Hollow's words (bot) — formless, haunted ── */
+/* ── 6. Hollow's words (bot) — formless, haunted ── */
 .bot {
     background: transparent !important;
     border: none !important;
@@ -227,7 +227,7 @@ button[aria-label="Clear"] {
     text-shadow: 0 0 18px rgba(120,70,160,0.18);
 }
 
-/* ── 7. Visitor's words (user) — contained, human ── */
+/* ── 7. Visitor's words (user) — contained, human ── */
 .user {
     background: var(--color-accent-soft) !important;
     border: 1px solid #211a32 !important;
@@ -245,7 +245,7 @@ button[aria-label="Clear"] {
     line-height: 1.6 !important;
 }
 
-/* ── 8. Input — a line of confession, not a box ── */
+/* ── 8. Input — a line of confession, not a box ── */
 textarea,
 .gradio-container input[type="text"] {
     background: transparent !important;
@@ -272,7 +272,7 @@ textarea::placeholder {
     font-style: italic;
 }
 
-/* ── 9. Buttons (the → send) ──────────────────── */
+/* ── 9. Buttons (the → send) ──────────────────── */
 .gradio-container button {
     font-family: 'Crimson Text', Georgia, serif !important;
     font-size: 1.25rem !important;
@@ -292,7 +292,7 @@ textarea::placeholder {
     box-shadow: 0 0 16px rgba(120,60,160,0.38) !important;
 }
 
-/* ── 10. Bond meter — custom HTML, a pulsing thread ── */
+/* ── 10. Bond meter — custom HTML, a pulsing thread ── */
 /* Rendered by _render_bond() in app.py. Full control:
    no Gradio orange, no track, no number box, no reset. */
 .bond-meter {
@@ -362,16 +362,16 @@ textarea::placeholder {
     45%        { transform: scaleY(1.0);  box-shadow: 0 0 4px  rgba(120,60,160,0.35); }
 }
 
-/* ── 12. Scrollbar ────────────────────────────── */
+/* ── 12. Scrollbar ────────────────────────────── */
 ::-webkit-scrollbar { width: 5px; height: 5px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: #2a1f40; border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: #3d2f58; }
 
-/* ── 13. Hide Gradio footer ───────────────────── */
+/* ── 13. Hide Gradio footer ───────────────────── */
 footer { display: none !important; }
 
-/* ── 14. Respect reduced motion ───────────────── */
+/* ── 14. Respect reduced motion ───────────────── */
 @media (prefers-reduced-motion: reduce) {
     body::before,
     body::after,
@@ -381,13 +381,13 @@ footer { display: none !important; }
     }
 }
 
-/* ── 15. Entity panel — the child behind a gothic arch ── */
+/* ── 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 */
+/* the scene is masked to a pointed (lancet) arch — a cathedral window */
 .entity-stage {
     position: absolute;
     inset: 0;
@@ -398,7 +398,7 @@ footer { display: none !important; }
 }
 
 /* carved-stone lancet arch: gradient bevel (light top-left, recessed bottom-
-   right), dark inner groove, faint highlight. No keystone, no corner blocks —
+   right), dark inner groove, faint highlight. No keystone, no corner blocks —
    just worn stone tracing the masked edge so the child sits flush inside it. */
 .entity-stage::after {
     content: '';
@@ -466,8 +466,8 @@ footer { display: none !important; }
 
 .entity-flash-wrap.entity-flash-strong .entity-flick { animation-duration: 0.7s; }
 
-/* each face blinks in its own scattered windows — they overlap into chaos */
-.flick-0 { animation-name: flick-terror; }   /* terror — appears most */
+/* 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 */
@@ -493,7 +493,7 @@ footer { display: none !important; }
     90%, 100% { opacity: 1; }
 }
 
-/* subliminal full-screen echo — recall turns and the finale only */
+/* subliminal full-screen echo — recall turns and the finale only */
 .entity-ghost {
     position: fixed;
     inset: 0;
@@ -562,7 +562,7 @@ footer { display: none !important; }
     background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(5,4,9,0.82) 100%);
 }
 
-/* ── 16. Treasure — stone reliquary with inner scroll ── */
+/* ── 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 {
@@ -583,15 +583,15 @@ footer { display: none !important; }
 }
 
 /* reduced motion: kill real MOTION (drift, sway, glitch translate) but keep
-   the terror flash and echo — they are opacity fades, not movement, and they
+   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
+    /* 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; }
 }
 
-/* ── 17. Carved-stone frames — weathered tablet (Worn Tablet) ── */
+/* ── 17. Carved-stone frames — weathered tablet (Worn Tablet) ── */
 /* One reusable 9-slice border-image: directional bevel baked into an SVG
    gradient (light top-left, recessed bottom-right), a dark inner groove, a
    faint highlight, and rounded chipped corner blocks. Paired with an inset
@@ -649,12 +649,12 @@ footer { display: none !important; }
     border-image-width: 9px !important;
 }
 
-/* Title — no underline rule */
+/* Title — no underline rule */
 .gradio-container h2 { border-bottom: none !important; }
 
-/* ── 18. Three endings — rage portrait & fog dissolve ── */
+/* ── 18. Three endings — rage portrait & fog dissolve ── */
 
-/* bad ending: a low red breath pulsing over the rage portrait — the only
+/* bad ending: a low red breath pulsing over the rage portrait — the only
    color in the entire game, reserved for this moment */
 .entity-rage-tint {
     position: absolute;
@@ -670,22 +670,22 @@ footer { display: none !important; }
     50%      { opacity: 1; }
 }
 
-/* neutral ending: materialization in reverse — the child sinks back into
+/* neutral ending: materialization in reverse — the child sinks back into
    the fog. One-shot on mount; the animation overrides the inline idle style
-   and `forwards` holds the dissolved frame. Opacity/blur are the beat itself —
+   and `forwards` holds the dissolved frame. Opacity/blur are the beat itself —
    do NOT add these to the prefers-reduced-motion kill lists. */
 .entity-dissolve {
     animation: entity-dissolve 9s ease-in forwards;
 }
 
 @keyframes entity-dissolve {
-    0%   { filter: blur(0px);  opacity: 1;    transform: scale(1); }
-    100% { filter: blur(10px); opacity: 0.18; transform: scale(0.62); }
+    0%   { filter: blur(0px);  opacity: 1; }
+    100% { filter: blur(10px); opacity: 0.18; }
 }
 
-/* bad finale frenzy: the capture-flash flicker but sustained — every face
+/* bad finale frenzy: the capture-flash flicker but sustained — every face
    cycles over the body ~4 times (3.2s), then the animations die and the
-   rage face beneath stays. Opacity only — must survive reduced-motion. */
+   rage face beneath stays. Opacity only — must survive reduced-motion. */
 .entity-frenzy-wrap {
     position: absolute;
     inset: 0;
@@ -698,7 +698,7 @@ footer { display: none !important; }
 
 /* frenzy ghost: the terror face stabs the FULL screen three times across the
    convulsion (vs the single half-second stab of capture flashes). No flash-0/1
-   class here — fresh element on mount, plays once. Opacity only. */
+   class here — fresh element on mount, plays once. Opacity only. */
 .entity-ghost-frenzy {
     animation: ghost-frenzy 3.2s steps(1, end) forwards;
 }

tests/test_render.py

@@ -40,17 +40,17 @@ class TestRenderEntity:
         assert "entity-stage" in out
         assert "data:image/webp;base64," in out
 
-    def test_low_affinity_is_blurred_faint_far(self):
+    def test_low_affinity_is_blurred_faint(self):
         out = render_entity(0)
         assert "blur(10" in out
         assert "opacity:0.35" in out
-        assert "scale(0.62)" in out
+        assert "scale(" not in out  # size never changes — frame always fits
 
-    def test_full_affinity_is_sharp_full_close(self):
+    def test_full_affinity_is_sharp_full(self):
         out = render_entity(100)
         assert "blur(0" in out
         assert "opacity:1.0" in out
-        assert "scale(1.0)" in out
+        assert "scale(" not in out
 
     def test_affinity_is_clamped(self):
         assert render_entity(-10) == render_entity(0)