fix(game): base64 background + brighter scene so the silhouette reads

app.py

@@ -1062,7 +1062,8 @@ with gr.Blocks(title="Hollow") as demo:
                              elem_classes="intro-enter-btn")
 
     with gr.Column(visible=False, elem_id="game-view") as game_view:
-        gr.HTML('<div id="game-bg"></div><div id="game-vig"></div>'
+        gr.HTML(f'<div id="game-bg" style="background-image:url(\'{_BACKGROUND_URI}\')"></div>'
+                '<div id="game-vig"></div>'
                 '<div id="game-frame-edge"></div>')
         with gr.Row(elem_id="game-topbar"):
             title_panel = gr.HTML(value=_render_title(_init_state()))

styles.css

@@ -268,10 +268,14 @@ textarea:focus,
 }
 
 textarea::placeholder {
-    color: #38305a !important;
+    color: #5a5078 !important;
     font-style: italic;
 }
 
+#game-inputrow textarea::placeholder {
+    color: #6a6090 !important;
+}
+
 /* ── 9. Buttons (the → send) ──────────────────── */
 .gradio-container button {
     font-family: 'Crimson Text', Georgia, serif !important;
@@ -1333,11 +1337,10 @@ footer { display: none !important; }
 /* blurred ambient forest backdrop, same treatment as intro/menu */
 #game-bg {
     position: fixed;
-    inset: -6%;
-    background-image: url('assets/background.webp');
+    inset: -8%;
     background-size: cover;
     background-position: center 38%;
-    filter: grayscale(1) blur(44px) brightness(0.30);
+    filter: grayscale(1) blur(40px) brightness(0.46);
     transform: scale(1.08);
     z-index: 0;
 }
@@ -1349,8 +1352,8 @@ footer { display: none !important; }
     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%);
+        radial-gradient(ellipse at 50% 36%, transparent 40%, rgba(4,3,8,0.68) 100%),
+        linear-gradient(to bottom, rgba(6,4,12,0.48) 0%, transparent 13%);
 }
 
 /* a subtle inner frame edge so the scene feels contained like the intro */
@@ -1364,7 +1367,7 @@ footer { display: none !important; }
     max-height: 82vh;
     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 */
@@ -1400,34 +1403,38 @@ footer { display: none !important; }
 /* corner drawers */
 .game-drawer {
     position: fixed;
-    top: 64px;
+    top: 58px;
     z-index: 8;
-    width: min(260px, 22vw);
-    min-width: 180px;
-    max-height: calc(100vh - 90px);
+    width: min(280px, 24vw);
+    min-width: 190px;
+    max-height: calc(100vh - 80px);
     transition: max-height 0.45s ease, opacity 0.35s ease;
     overflow: hidden;
-    opacity: 0.75;
+    opacity: 0.82;
+    background: rgba(6,4,10,0.35);
+    border: 1px solid rgba(60,45,80,0.35);
+    border-radius: 4px;
+    padding: 8px 10px;
 }
 .game-drawer:hover { opacity: 1; }
-.game-drawer.open { max-height: calc(100vh - 90px); }
+.game-drawer.open { max-height: calc(100vh - 80px); }
 .game-drawer:not(.open) {
-    max-height: 42px;
+    max-height: 38px;
     cursor: pointer;
 }
-#drawer-left { left: 18px; }
-#drawer-right { right: 18px; }
+#drawer-left { left: 14px; }
+#drawer-right { right: 14px; }
 
 .drawer-head {
     cursor: pointer;
     user-select: none;
-    padding-bottom: 6px !important;
-    border-bottom: 1px solid #1e1628;
-    margin-bottom: 8px;
+    padding-bottom: 4px !important;
+    border-bottom: 1px solid rgba(80,65,105,0.45);
+    margin-bottom: 6px;
 }
 .drawer-head::after {
     content: ' ›';
-    opacity: 0.55;
+    opacity: 0.65;
     margin-left: 6px;
     display: inline-block;
     transition: transform 0.3s ease;
@@ -1482,11 +1489,11 @@ footer { display: none !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%);
+    inset: 5% -10% 0 -10%;
+    background: radial-gradient(ellipse 55% 70% at 50% 82%,
+                rgba(160,140,190,0.28) 0%, transparent 72%);
     pointer-events: none;
-    opacity: 0.6;
+    opacity: 0.85;
     mix-blend-mode: screen;
 }
 
@@ -1504,15 +1511,15 @@ footer { display: none !important; }
 }
 
 #game-dialogue .chatbot {
-    height: 210px !important;
-    background: rgba(10,8,16,0.55) !important;
+    height: 220px !important;
+    background: rgba(12,9,18,0.62) !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;
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(3px);
+    padding: 12px 16px !important;
 }
 
 #game-dialogue .bot,
@@ -1552,34 +1559,34 @@ footer { display: none !important; }
 }
 
 /* tone classes — the world blooms or rots */
-.tone-warm #game-bg { filter: grayscale(1) blur(44px) brightness(0.38); }
+.tone-warm #game-bg { filter: grayscale(1) blur(40px) brightness(0.55); }
 .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%);
+        radial-gradient(ellipse at 50% 36%, transparent 42%, rgba(4,3,8,0.50) 100%),
+        linear-gradient(to bottom, rgba(6,4,12,0.35) 0%, transparent 13%);
 }
-.tone-warm .entity-img { filter: brightness(1.05) !important; }
+.tone-warm .entity-img { filter: brightness(1.08) !important; }
 
-.tone-neutral #game-bg { filter: grayscale(1) blur(44px) brightness(0.30); }
+.tone-neutral #game-bg { filter: grayscale(1) blur(40px) brightness(0.46); }
 
-.tone-wounded #game-bg { filter: grayscale(1) blur(46px) brightness(0.22); }
+.tone-wounded #game-bg { filter: grayscale(1) blur(42px) brightness(0.34); }
 .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%);
+        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%);
 }
-.tone-wounded .entity-img { opacity: 0.78 !important; }
+.tone-wounded .entity-img { opacity: 0.82 !important; }
 
 .tone-hostile #game-bg {
-    filter: grayscale(1) blur(46px) brightness(0.20);
+    filter: grayscale(1) blur(42px) brightness(0.28);
 }
 .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%);
+        radial-gradient(ellipse at 50% 36%, transparent 28%, rgba(30,4,8,0.78) 100%),
+        linear-gradient(to bottom, rgba(40,6,12,0.48) 0%, transparent 20%);
 }
 .tone-hostile .entity-img {
-    filter: sepia(0.25) saturate(1.4) brightness(0.85) !important;
+    filter: sepia(0.22) saturate(1.35) brightness(0.88) !important;
 }
 
 /* recall migration — the claimed memory drifts toward the child */