fix: dark theme

src/god_simulator/ui/card_check.html

@@ -1,4 +1,4 @@
-<div class="gs-card-head dark">
-  <div class="gs-tile dark">🔍</div>
+<div class="gs-card-head hud">
+  <div class="gs-tile hud">🔍</div>
   <h2>Check your character</h2>
 </div>

src/god_simulator/ui/lobby.css

@@ -41,6 +41,130 @@ body::before {
     background-size: 32px 32px;
 }
 
+/* Gradio's <gradio-app> host paints --body-background-fill (white in light,
+   near-black in dark) over our body gradient — keep it transparent so the
+   sky→grass gradient shows through. */
+gradio-app {
+    background: transparent !important;
+}
+
+/* Gradio's .styler / .form wrappers carry their own surface fill that sits on
+   top of our .gs-card — keep them transparent so the card shows through. */
+.gs-card .styler,
+.gs-card .form {
+    background: transparent !important;
+    border: none !important;
+}
+
+/* ===================== DARK THEME (nighttime world) =====================
+   Gradio adds `body.dark` based on the visitor's system preference. Map it to
+   the design's nighttime voxel palette (mirrors the design's [data-theme="dark"]).
+   Most rules below just redefine the palette vars; the explicit overrides cover
+   spots in this file that hard-code light hex, plus Gradio's own theme vars. */
+body.dark {
+    --grass:      #6fb841;
+    --grass-mid:  #4f9a2c;
+    --grass-dark: #356615;
+    --brick:      #c25f3c;
+    --brick-dark: #7e3219;
+    --ink:        #e8eef5;
+    --ink-soft:   #9fb0c2;
+    --paper:      #1a2230;
+    --paper-2:    #131a26;
+    --cyan:       #5fd3f2;
+
+    /* Gradio component variables → dark surfaces matching the palette */
+    --body-text-color: #e8eef5;
+    --body-text-color-subdued: #9fb0c2;
+    --background-fill-primary: #1a2230;
+    --background-fill-secondary: #131a26;
+    --block-background-fill: #1a2230;
+    --block-label-background-fill: #1a2230;
+    --input-background-fill: #0f1623;
+    --input-background-fill-focus: #101a26;
+    --border-color-primary: #33415a;
+    --block-border-color: #33415a;
+}
+body.dark {
+    background:
+        radial-gradient(120% 80% at 50% -10%, #1e3346 0%, transparent 55%),
+        linear-gradient(180deg, #0c131e 0%, #0f1826 40%, #101d22 74%, #14201a 100%) !important;
+}
+body.dark::before {
+    background-image:
+        linear-gradient(rgba(120,170,210,.05) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(120,170,210,.05) 1px, transparent 1px);
+}
+
+/* NB: for descendant rules use the bare `.dark` ancestor (Gradio's dark-mode
+   class on <body>), NOT `body.dark X`. Gradio's CSS scoper rewrites the latter
+   to `.dark .gradio-container ... .contain body X`, placing `body` as a
+   descendant of `.contain`, which never matches. `.dark X` scopes correctly. */
+
+/* Cards: the base rule borders with var(--ink), which is light text in dark
+   mode — pin the border/shadow to the design's near-black instead. */
+.dark .gs-card {
+    border-color: #0a0f17 !important;
+    box-shadow: 0 8px 0 #0a0f17, 0 22px 40px -22px rgba(0,0,0,.7) !important;
+}
+.dark .gs-card-head { border-bottom-color: #0a0f17; }
+.dark .gs-card-head.sky   { background: #1c2c3a; }
+.dark .gs-card-head.brick { background: #33231c; }
+.dark .gs-card-head.hud   { background: #222d3d; }
+
+/* Inputs (textbox + dropdown). NB: give each `.dark` selector its own rule — do
+   NOT comma-group them. Gradio's scoper inserts a stray second `.dark` into the
+   2nd+ members of a comma group (e.g. `.contain .dark .gs-card ...`), so only the
+   first member ever matches. */
+.dark .gs-card input {
+    background: #0f1623 !important;
+    border-color: #33415a !important;
+    color: var(--ink) !important;
+}
+.dark .gs-card textarea {
+    background: #0f1623 !important;
+    border-color: #33415a !important;
+    color: var(--ink) !important;
+}
+.dark .gs-card .svelte-1xfsv4t input[role="listbox"] {
+    background: #0f1623 !important;
+    border-color: #33415a !important;
+    color: var(--ink) !important;
+}
+.dark .gs-card input::placeholder { color: #6b7d92 !important; }
+.dark .gs-card input:focus {
+    border-color: var(--grass-mid) !important;
+    background: #101a26 !important;
+    box-shadow: 0 0 0 4px rgba(111,184,65,.25) !important;
+}
+.dark .gs-card textarea:focus {
+    border-color: var(--grass-mid) !important;
+    background: #101a26 !important;
+    box-shadow: 0 0 0 4px rgba(111,184,65,.25) !important;
+}
+.dark .gs-card .svelte-1xfsv4t input[role="listbox"]:focus {
+    border-color: var(--grass-mid) !important;
+    background: #101a26 !important;
+    box-shadow: 0 0 0 4px rgba(111,184,65,.25) !important;
+}
+
+/* Voxel tiles: deepen the inner bevel for the night palette */
+.dark .gs-tile {
+    box-shadow: inset -4px -4px 0 rgba(0,0,0,.3), inset 4px 4px 0 rgba(255,255,255,.18), 0 4px 0 rgba(0,0,0,.4);
+}
+
+/* "Check status" (hud) button */
+.dark #gs-btn-status {
+    background: #2a3a52 !important;
+    border-color: #0a0f17 !important;
+    box-shadow: 0 6px 0 #0a0f17 !important;
+}
+.dark #gs-btn-status:active { box-shadow: 0 0 0 #0a0f17 !important; }
+
+/* Dim the ground + footer at night */
+.dark .gs-ground { box-shadow: inset 0 5px 0 rgba(255,255,255,.08); filter: brightness(.82); }
+.dark .gs-footer { filter: brightness(.82); }
+
 .gradio-container {
     max-width: 1180px !important;
     margin: 0 auto !important;
@@ -49,8 +173,10 @@ body::before {
     box-shadow: none !important;
 }
 
-/* Hide Gradio's default footer */
-footer.svelte-1ax1toq, .svelte-1ax1toq > footer, div.footer {
+/* Hide Gradio's default footer. The svelte hash changes between versions, so
+   target the semantic <footer> element — our custom footer is .gs-footer (a div). */
+gradio-app footer,
+.gradio-container footer {
     display: none !important;
 }
 
@@ -187,7 +313,9 @@ footer.svelte-1ax1toq, .svelte-1ax1toq > footer, div.footer {
 }
 .gs-card-head.sky   { background: #e2f3fb; }
 .gs-card-head.brick { background: #fbeae2; }
-.gs-card-head.dark  { background: #eef3f7; }
+/* NB: avoid the class name `dark` here — Gradio's CSS scoper treats `.dark` as
+   its reserved dark-mode class and hoists it to an ancestor selector. */
+.gs-card-head.hud   { background: #eef3f7; }
 .gs-card-head h2 {
     margin: 0;
     font-family: 'Baloo 2', cursive !important;
@@ -208,7 +336,7 @@ footer.svelte-1ax1toq, .svelte-1ax1toq > footer, div.footer {
 }
 .gs-tile.sky   { background: var(--sky); }
 .gs-tile.brick { background: var(--brick); }
-.gs-tile.dark  { background: var(--hud-2); border-color: #0c121c; }
+.gs-tile.hud   { background: var(--hud-2); border-color: #0c121c; }
 
 /* Card body content injected via gr.HTML */
 .gs-card-body {
@@ -351,6 +479,14 @@ footer.svelte-1ax1toq, .svelte-1ax1toq > footer, div.footer {
     padding: 13px 14px !important;
     margin: 0 !important;
 }
+/* Dropdown focus — the base listbox rule above is highly specific, so it needs
+   its own :focus variant to pick up the grass-green focus ring like text inputs. */
+.gs-card .svelte-1xfsv4t input[role="listbox"]:focus {
+    border-color: var(--grass-mid) !important;
+    background: #fff !important;
+    box-shadow: 0 0 0 4px rgba(116,192,67,.22) !important;
+    outline: none !important;
+}
 
 /* ── Voxel buttons ── */
 /* Gradio places elem_id directly on the <button> or <a> element */