From a57e516f16f4162c57b80e9e910b3ee7784accd4 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Thu, 10 Sep 2026 12:52:56 -0400
Subject: [PATCH] =?UTF-8?q?Who's=20that=20Pok=C3=A9mon=3F:=20bright=20stag?=
 =?UTF-8?q?e=20so=20the=20silhouette=20shows=20in=20dark=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The stage used var(--surface), so a brightness(0) silhouette was
near-invisible on a dark theme. Make it a fixed light "TV screen"
(blue→white gradient) in every theme; move the caption/hint out onto the
page background so they stay readable; add a drop-shadow to the revealed
artwork.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Ve7HLspzeG2xDPtJQ8vmu
---
 src/styles/layout.css     | 27 ++++++++++++---------------
 src/views/WhosThatView.js |  4 +++-
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/styles/layout.css b/src/styles/layout.css
index c2d518a..30bb3cd 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -3760,21 +3760,17 @@
   color: var(--text-dim);
   font-weight: 600;
 }
+/* A bright "TV screen" so the black silhouette reads in any theme. */
 .wtp__stage {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  padding: 22px 16px;
+  display: grid;
+  place-items: center;
+  padding: 20px;
   border-radius: var(--radius-lg);
   background:
-    radial-gradient(
-      60% 55% at 50% 42%,
-      color-mix(in srgb, var(--accent) 22%, transparent),
-      transparent 70%
-    ),
-    var(--surface);
-  border: 1px solid var(--border);
+    radial-gradient(70% 60% at 50% 38%, #ffffff, transparent 75%),
+    linear-gradient(165deg, #cfe7ff 0%, #eaf4ff 55%, #f6fbff 100%);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.5);
 }
 .wtp__art {
   width: 260px;
@@ -3787,13 +3783,14 @@
   width: 100%;
   height: 100%;
   object-fit: contain;
-  filter: brightness(0);
-  transition: filter 0.5s ease;
+  filter: brightness(0) contrast(1);
+  transition: filter 0.45s ease;
 }
 .wtp__art.is-revealed img {
-  filter: none;
+  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
 }
 .wtp__caption {
+  margin-top: 12px;
   font-weight: 800;
   font-size: 1.05rem;
   text-align: center;
diff --git a/src/views/WhosThatView.js b/src/views/WhosThatView.js
index 9816e88..302fcfd 100644
--- a/src/views/WhosThatView.js
+++ b/src/views/WhosThatView.js
@@ -141,7 +141,9 @@ export async function WhosThatView() {
       el('p', {}, 'Name it from the silhouette. Three misses and it’s revealed.'),
     ),
     scoreEl,
-    el('div', { class: 'wtp__stage' }, art, caption, hint),
+    el('div', { class: 'wtp__stage' }, art),
+    caption,
+    hint,
     el('div', { class: 'wtp__controls' }, input, guessBtn, revealBtn, nextBtn),
     feedback,
   );