fix(game): give stage real height, center dialogue, brighten scene

app.py

@@ -1089,7 +1089,8 @@ with gr.Blocks(title="Hollow") as demo:
                     label="", show_label=False, height=210, buttons=[],
                     autoscroll=True,
                 )
-                bond_panel = gr.HTML(value=_render_bond(20, "Hollow"))
+                bond_panel = gr.HTML(value=_render_bond(20, "Hollow"),
+                                 elem_classes="bond-panel")
                 with gr.Row(elem_id="game-inputrow"):
                     msg_input = gr.Textbox(
                         placeholder="tell it something you remember...",

render.py

@@ -91,17 +91,17 @@ def render_entity(affinity: int, mode: str = "idle", seq: int = 0,
     t = min(a, 45) / 45  # fully materialized by bond 45
     # veil the SHARP child in shadow instead of blurring it (blur reads as
     # a broken/loading image): dark and fog-shrouded at low bond, emerging
-    brightness = round(0.62 + 0.38 * t, 2)
-    opacity = round(0.78 + 0.22 * t, 2)
+    brightness = round(0.72 + 0.28 * t, 2)
+    opacity = round(0.82 + 0.18 * t, 2)
     almost_on = a >= 76
     flash_key = f"flash-{seq % 2}"
     tone_class = _tone_class(tone)
 
-    # a faint inner/outer glow so the silhouette separates from the fog
+    # a stronger inner/outer glow so the silhouette reads against the fog
     look = (
         f"filter:brightness({brightness}) "
-        f"drop-shadow(0 0 18px rgba(130,110,160,{round(0.18 + 0.22*t,2)})) "
-        f"drop-shadow(0 0 42px rgba(90,70,120,{round(0.10 + 0.15*t,2)}));"
+        f"drop-shadow(0 0 20px rgba(140,120,170,{round(0.25 + 0.25*t,2)})) "
+        f"drop-shadow(0 0 50px rgba(100,80,140,{round(0.15 + 0.20*t,2)}));"
         f"opacity:{opacity};"
     )
 

styles.css

@@ -1331,19 +1331,25 @@ footer { display: none !important; }
     overflow: hidden;
     background: #04040a;
     z-index: 50;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 #game-view.hide, #game-view.hidden { display: none !important; }
 
-/* the letterboxed stage — every game element is positioned inside this */
+/* the letterboxed stage — absolute, centered, real height so children work */
 #game-stage {
-    position: relative;
-    width: min(1280px, 95vw);
-    aspect-ratio: 16 / 10;
-    max-height: 82vh;
-    overflow: visible;
+    position: absolute !important;
+    left: 50% !important;
+    top: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    width: min(1280px, 95vw) !important;
+    height: min(calc(95vw * 0.625), 82vh) !important;
+    max-height: 82vh !important;
+    overflow: visible !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    gap: 0 !important;
 }
 
 /* Gradio wrappers inside the stage must not create their own boxes */
@@ -1367,7 +1373,7 @@ footer { display: none !important; }
     inset: -10%;
     background-size: cover;
     background-position: center 38%;
-    filter: grayscale(1) blur(42px) brightness(0.36);
+    filter: grayscale(1) blur(38px) brightness(0.52);
     transform: scale(1.08);
     z-index: 0;
 }
@@ -1379,8 +1385,8 @@ footer { display: none !important; }
     pointer-events: none;
     z-index: 1;
     background:
-        radial-gradient(ellipse at 50% 40%, transparent 42%, rgba(4,3,8,0.72) 100%),
-        linear-gradient(to bottom, rgba(6,4,12,0.55) 0%, transparent 15%);
+        radial-gradient(ellipse at 50% 42%, transparent 46%, rgba(4,3,8,0.62) 100%),
+        linear-gradient(to bottom, rgba(6,4,12,0.45) 0%, transparent 13%);
 }
 
 /* a subtle inner frame edge so the scene feels contained like the intro */
@@ -1389,13 +1395,13 @@ footer { display: none !important; }
     inset: 0;
     pointer-events: none;
     z-index: 2;
-    box-shadow: inset 0 0 90px rgba(0,0,0,0.55);
+    box-shadow: inset 0 0 70px rgba(0,0,0,0.42);
 }
 
 /* top bar: title + controls — sits just above the stage */
 #game-topbar {
     position: absolute;
-    top: -46px;
+    top: -44px;
     left: 0;
     right: 0;
     z-index: 10;
@@ -1429,7 +1435,7 @@ footer { display: none !important; }
     z-index: 8;
     width: min(260px, 22vw);
     min-width: 180px;
-    max-height: 70%;
+    max-height: 55vh;
     transition: max-height 0.45s ease, opacity 0.35s ease;
     overflow: hidden;
     opacity: 0.88;
@@ -1439,7 +1445,7 @@ footer { display: none !important; }
     padding: 8px 10px;
 }
 .game-drawer:hover { opacity: 1; }
-.game-drawer.open { max-height: 70%; }
+.game-drawer.open { max-height: 55vh; }
 .game-drawer:not(.open) {
     max-height: 38px;
     cursor: pointer;
@@ -1474,7 +1480,7 @@ footer { display: none !important; }
     z-index: 4;
     width: min(360px, 26vw);
     min-width: 220px;
-    height: min(520px, 62%);
+    height: min(520px, 55vh);
     pointer-events: none;
     display: flex;
     align-items: flex-end;
@@ -1513,27 +1519,30 @@ footer { display: none !important; }
     position: absolute;
     inset: 5% -10% 0 -10%;
     background: radial-gradient(ellipse 55% 70% at 50% 82%,
-                rgba(170,150,200,0.32) 0%, transparent 72%);
+                rgba(170,150,200,0.35) 0%, transparent 72%);
     pointer-events: none;
-    opacity: 0.9;
+    opacity: 0.95;
     mix-blend-mode: screen;
 }
 
 /* bottom subtitle / dialogue panel */
 #game-dialogue {
     position: absolute;
-    left: 50%;
+    left: 0;
+    right: 0;
     bottom: 10px;
-    transform: translateX(-50%);
     z-index: 9;
-    width: min(780px, 74vw);
+    width: 100%;
     display: flex;
     flex-direction: column;
+    align-items: center;
     gap: 6px;
 }
 
 #game-dialogue .chatbot {
-    height: 210px !important;
+    width: min(780px, 74vw) !important;
+    height: 200px !important;
+    margin: 0 auto !important;
     background: rgba(12,9,18,0.62) !important;
     border: 10px solid transparent !important;
     border-image: var(--stone-frame) 30 !important;
@@ -1542,6 +1551,7 @@ footer { display: none !important; }
     backdrop-filter: blur(3px);
     -webkit-backdrop-filter: blur(3px);
     padding: 12px 16px !important;
+    box-sizing: border-box !important;
 }
 
 #game-dialogue .bot,
@@ -1549,7 +1559,7 @@ footer { display: none !important; }
 #game-dialogue .bot .message,
 #game-dialogue .bot p {
     font-style: italic !important;
-    font-size: 1.14rem !important;
+    font-size: 1.12rem !important;
     color: #d8d2e6 !important;
     text-shadow: 0 0 16px rgba(120,70,160,0.22);
 }
@@ -1559,7 +1569,7 @@ footer { display: none !important; }
 #game-dialogue .user .message,
 #game-dialogue .user p {
     font-style: normal !important;
-    font-size: 1.02rem !important;
+    font-size: 1.0rem !important;
     color: #e6e0f0 !important;
 }
 
@@ -1571,6 +1581,8 @@ footer { display: none !important; }
     display: flex;
     gap: 8px;
     align-items: flex-end;
+    width: min(780px, 74vw);
+    margin: 0 auto;
 }
 
 #game-inputrow textarea,
@@ -1580,35 +1592,50 @@ footer { display: none !important; }
     padding: 8px 10px !important;
 }
 
+#game-dialogue .bond-panel {
+    width: min(780px, 74vw) !important;
+    margin: 0 auto !important;
+}
+
+#game-dialogue .voice-channel,
+#game-dialogue .voice-channel * {
+    height: 0 !important;
+    min-height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border: none !important;
+    overflow: hidden !important;
+}
+
 /* tone classes — the world blooms or rots */
-.tone-warm #game-bg { filter: grayscale(1) blur(42px) brightness(0.46); }
+.tone-warm #game-bg { filter: grayscale(1) blur(38px) brightness(0.62); }
 .tone-warm #game-vig {
     background:
-        radial-gradient(ellipse at 50% 40%, transparent 46%, rgba(4,3,8,0.55) 100%),
-        linear-gradient(to bottom, rgba(6,4,12,0.32) 0%, transparent 15%);
+        radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(4,3,8,0.45) 100%),
+        linear-gradient(to bottom, rgba(6,4,12,0.28) 0%, transparent 13%);
 }
-.tone-warm .entity-img { filter: brightness(1.10) drop-shadow(0 0 16px rgba(180,160,210,0.25)) !important; }
+.tone-warm .entity-img { filter: brightness(1.12) drop-shadow(0 0 18px rgba(190,170,220,0.30)) !important; }
 
-.tone-neutral #game-bg { filter: grayscale(1) blur(42px) brightness(0.36); }
+.tone-neutral #game-bg { filter: grayscale(1) blur(38px) brightness(0.52); }
 
-.tone-wounded #game-bg { filter: grayscale(1) blur(42px) brightness(0.28); }
+.tone-wounded #game-bg { filter: grayscale(1) blur(38px) brightness(0.38); }
 .tone-wounded #game-vig {
     background:
-        radial-gradient(ellipse at 50% 40%, transparent 36%, rgba(4,3,8,0.82) 100%),
-        linear-gradient(to bottom, rgba(6,4,12,0.68) 0%, transparent 15%);
+        radial-gradient(ellipse at 50% 42%, transparent 38%, rgba(4,3,8,0.78) 100%),
+        linear-gradient(to bottom, rgba(6,4,12,0.65) 0%, transparent 13%);
 }
-.tone-wounded .entity-img { opacity: 0.82 !important; }
+.tone-wounded .entity-img { opacity: 0.85 !important; }
 
 .tone-hostile #game-bg {
-    filter: grayscale(1) blur(42px) brightness(0.22);
+    filter: grayscale(1) blur(38px) brightness(0.30);
 }
 .tone-hostile #game-vig {
     background:
-        radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(30,4,8,0.82) 100%),
-        linear-gradient(to bottom, rgba(40,6,12,0.55) 0%, transparent 20%);
+        radial-gradient(ellipse at 50% 42%, transparent 32%, rgba(30,4,8,0.80) 100%),
+        linear-gradient(to bottom, rgba(40,6,12,0.52) 0%, transparent 20%);
 }
 .tone-hostile .entity-img {
-    filter: sepia(0.22) saturate(1.35) brightness(0.90) drop-shadow(0 0 18px rgba(120,40,40,0.35)) !important;
+    filter: sepia(0.22) saturate(1.35) brightness(0.95) drop-shadow(0 0 18px rgba(120,40,40,0.35)) !important;
 }
 
 /* recall migration — the claimed memory drifts toward the child */

tests/test_render.py

@@ -69,8 +69,8 @@ class TestRenderEntity:
 
     def test_low_affinity_is_dark_and_faint(self):
         out = render_entity(0)
-        assert "brightness(0.62)" in out
-        assert "opacity:0.78" in out
+        assert "brightness(0.72)" in out
+        assert "opacity:0.82" in out
         assert "scale(" not in out  # size never changes — frame always fits
 
     def test_full_affinity_is_bright_full(self):
@@ -137,10 +137,10 @@ class TestRenderEntityUX:
     def test_recognizable_silhouette_at_start(self):
         # bond 20 (session start) must already read as a child, not a smudge
         out = render_entity(20)
-        # t = 20/45 ≈ 0.444; brightness = 0.62 + 0.38*0.444 ≈ 0.79
-        assert "brightness(0.79)" in out
-        # opacity = 0.78 + 0.22*0.444 ≈ 0.88
-        assert "opacity:0.88" in out
+        # t = 20/45 ≈ 0.444; brightness = 0.72 + 0.28*0.444 ≈ 0.84
+        assert "brightness(0.84)" in out
+        # opacity = 0.82 + 0.18*0.444 ≈ 0.90
+        assert "opacity:0.9" in out
 
     def test_scene_tone_class_present(self):
         assert 'class="entity-scene tone-warm"' in render_entity(50, tone=20)