/* css/games.css -- every per-game style rule, merged from the former one-sheet-per-game files (loaded after style.css) */

/* ---- css/birdie.css ---- */
/* Birdie Boost: open sky and a bluebird. */
body.birdie-theme {
  --neon:      #5fc8ff;
  --neon-dk:   #2f7fb8;
  --hot:       #ff8a3d;
  --hot-dk:    #b8501c;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #a8d86a;
}

#tile-birdie {
  border-color: #5fc8ff;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(95,200,255,.3);
}
#tile-birdie:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(95,200,255,.25); }

/* ---- css/bugspray.css ---- */
/* Bug Spray: a "pest control" palette -- toxic spray green as the primary
   accent, caution-yellow highlights, a warning-orange danger color (used
   at the maze exit, and anywhere --hot shows up in shared chrome), and a
   muted dirt-brown in place of violet. Same reskin-via-tokens trick as
   Castle's theme above. */
body.bugspray-theme {
  --neon:      #8bff4d;
  --neon-dk:   #4f9e22;
  --hot:       #ff6a3d;
  --hot-dk:    #b8431f;
  --sun:       #f4d93e;
  --sun-dk:    #b89b1f;
  --violet:    #6b5a3f;
}

#tile-bugspray {
  border-color: #8bff4d;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(139,255,77,.3);
}
#tile-bugspray:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(139,255,77,.25); }

/* ---- css/candy.css ---- */
/* Candy Factory: bubblegum pink and sweet-shop purple. */
body.candy-theme {
  --neon:      #ff7ec4;
  --neon-dk:   #c4447f;
  --hot:       #ff5a6e;
  --hot-dk:    #b8304a;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #b48bd6;
}

#tile-candy {
  border-color: #ff7ec4;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(255,126,196,.3);
}
#tile-candy:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(255,126,196,.25); }

/* ---- css/castle.css ---- */
/* Castle's shared chrome (buttons, HUD accents, score-list highlights --
   anything using these same variable names) reskins to a warm medieval
   palette just by redefining the tokens here; none of the shared
   component CSS needs its own Castle-specific rules. Toggled on <body>
   by JS whenever CURRENT_GAME is 'castle'. */
body.castle-theme {
  --neon:      #e0a94a;
  --neon-dk:   #a5721f;
  --hot:       #d9432e;
  --hot-dk:    #8f2416;
  --sun:       #ffcf5c;
  --sun-dk:    #c78a1f;
  --violet:    #8a5a34;
}

#tile-castle {
  border-color: #e0a94a;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(224,169,74,.3);
}
#tile-castle:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(224,169,74,.25); }

/* ---- css/chase.css ---- */
/* Forest Chase: woodland green and fox orange. */
body.chase-theme {
  --neon:      #7ee04a;
  --neon-dk:   #3f7a3a;
  --hot:       #e2742c;
  --hot-dk:    #b8541c;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #a87c50;
}

#tile-chase {
  border-color: #7ee04a;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(126,224,74,.3);
}
#tile-chase:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(126,224,74,.25); }

/* ---- css/critters.css ---- */
/* Angry Badger: spring grass and a clear sky. */
body.critters-theme {
  --neon:      #8fd14f;
  --neon-dk:   #4f8a22;
  --hot:       #ff5fa2;
  --hot-dk:    #b83a74;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #37c8f5;
}

#tile-critters {
  border-color: #8fd14f;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(143,209,79,.3);
}
#tile-critters:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(143,209,79,.25); }
#tile-critters .game-tile-icon { position: relative; font-size: 0; }

/* ---- css/deli.css ---- */
/* Deli Dash: mustard and ketchup. */
body.deli-theme {
  --neon:      #ffb84d;
  --neon-dk:   #c47f1a;
  --hot:       #e8453c;
  --hot-dk:    #9e2a22;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #7fd17f;
}

#tile-deli {
  border-color: #ffb84d;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(255,184,77,.3);
}
#tile-deli:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(255,184,77,.25); }

/* ---- Sea Gulls: bright coast, aqua and coral. ---- */
body.gulls-theme {
  --neon:      #35c9e0;   /* aqua: HUD accents, caret, correct-answer glow */
  --neon-dk:   #1c8aa5;
  --hot:       #ff6b4a;   /* coral: warnings, quit hover */
  --hot-dk:    #b8402a;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #6fa8ff;   /* pause hover: a sea blue instead of purple */
}
/* two treasures or fewer left: the count blinks coral like the clock's last ten seconds */
body.gulls-theme #hud-city.warning { color: var(--hot); animation: blink .8s steps(2) infinite; }

#tile-gulls {
  border-color: #35c9e0;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(53,201,224,.3);
}
#tile-gulls:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(53,201,224,.25); }

/* ---- Tower Defense: dark board, cyan and hot pink. ---- */
body.td-theme {
  --neon:      #46c8ff;   /* cyan: HUD accents, caret, correct-answer glow */
  --neon-dk:   #1b82b3;
  --hot:       #ff4d6d;   /* pink-red: warnings, quit hover */
  --hot-dk:    #a02a40;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #c08bff;
}
/* one life left: the count blinks like the clock's last ten seconds */
body.td-theme #hud-city.warning { color: var(--hot); animation: blink .8s steps(2) infinite; }

#tile-td {
  border-color: #46c8ff;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(70,200,255,.3);
}
#tile-td:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(70,200,255,.25); }

/* ---- css/den.css ---- */
/* Den Rescue: warm earth and lantern gold. */
body.den-theme {
  --neon:      #e0a560;
  --neon-dk:   #8a5a2b;
  --hot:       #ff6a4d;
  --hot-dk:    #b8402a;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #c9a0ff;
}

#tile-den {
  border-color: #e0a560;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(224,165,96,.3);
}
#tile-den:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(224,165,96,.25); }

/* ---- css/digger.css ---- */
/* Digger: machine yellow against packed earth. Placeholder palette --
   it'll want revisiting once the game has a concept. */
body.digger-theme {
  --neon:      #f0b429;
  --neon-dk:   #9c6f08;
  --hot:       #c05621;
  --hot-dk:    #7b3b14;
  --sun:       #ffe08a;
  --sun-dk:    #c9a94a;
  --violet:    #8d6e4f;
}

#tile-digger {
  border-color: #f0b429;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(240,180,41,.3);
}
#tile-digger:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(240,180,41,.25); }

/* ---- css/drive.css ---- */
/* Driving Test: highway-sign green and Brainy's red convertible. */
body.drive-theme {
  --neon:      #5fd068;
  --neon-dk:   #2f8a3c;
  --hot:       #ff5a3c;
  --hot-dk:    #b8401c;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #8fb3c9;
}

#tile-drive {
  border-color: #5fd068;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(95,208,104,.3);
}
#tile-drive:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(95,208,104,.25); }

/* ---- css/fire.css ---- */
/* Fire Copters: flame orange over forest green. */
body.fire-theme {
  --neon:      #ff8a3d;
  --neon-dk:   #b8501c;
  --hot:       #e8402a;
  --hot-dk:    #9e2418;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #5fb4ff;
}

#tile-fire {
  border-color: #ff8a3d;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(255,138,61,.3);
}
#tile-fire:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(255,138,61,.25); }

/* ---- css/goodbye67.css ---- */
/* Goodbye 67: sandstone monument against a clear sky. */
body.goodbye67-theme {
  --neon:      #ffc94d;
  --neon-dk:   #b5841c;
  --hot:       #ff7043;
  --hot-dk:    #b8401c;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #7cc7ff;
}

#tile-goodbye67 {
  border-color: #ffc94d;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(255,201,77,.3);
}
#tile-goodbye67:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(255,201,77,.25); }

/* The tile wears the monument itself: a chunky, extruded sandstone 67. */
#tile-goodbye67 .game-tile-icon { position: relative; }
.tile-67 {
  display: block;
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
  color: #e3b46c;
  text-shadow: 1px 1px 0 #b98a48, 2px 2px 0 #a8793a, 3px 3px 0 #976a2e, 4px 4px 0 #7d5622, 5px 6px 6px rgba(0,0,0,.5);
}

/* ---- css/surf.css ---- */
/* Surf the Waves: tropical aqua and coral. */
body.surf-theme {
  --neon:      #2fd6e8;
  --neon-dk:   #138fa6;
  --hot:       #ff6f4e;
  --hot-dk:    #c24527;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #7f9bff;
}

#tile-surf {
  border-color: #2fd6e8;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(47,214,232,.3);
}
#tile-surf:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(47,214,232,.25); }

/* ---- css/jetpack.css ---- */
/* Jet Pack: open sky and jet pack red. */
body.jetpack-theme {
  --neon:      #5fd0ff;
  --neon-dk:   #2f86c4;
  --hot:       #ff5a3d;
  --hot-dk:    #c23a22;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #a8c8ff;
}

#tile-jetpack {
  border-color: #5fd0ff;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(95,208,255,.3);
}
#tile-jetpack:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(95,208,255,.25); }

/* ---- css/snorkel.css ---- */
/* Snorkeling: a sunny reef, seen from just under the waves. */
body.snorkel-theme {
  --neon:      #2fe3d6;
  --neon-dk:   #12958f;
  --hot:       #ff6b57;
  --hot-dk:    #b83a2c;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #ff9ad5;
  --bg-deep:   #031a30;
  --bg-mid:    #06395f;
}

#tile-snorkel {
  border-color: #2fe3d6;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(47,227,214,.3);
}
#tile-snorkel:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(47,227,214,.25); }

/* ---- css/kitty.css ---- */
/* Kitty Castle: soft, warm and pastel -- deliberately the gentlest of the
   palettes, since it's a kitten rather than aliens/attackers/pests. */
body.kitty-theme {
  --neon:      #ff9ec4;
  --neon-dk:   #c4567f;
  --hot:       #ff7f6b;
  --hot-dk:    #c44c3b;
  --sun:       #ffd98a;
  --sun-dk:    #d2a33f;
  --violet:    #b093ff;
}

#tile-kitty {
  border-color: #ff9ec4;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(255,158,196,.3);
}
#tile-kitty:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(255,158,196,.25); }

/* The Kitty Castle tile wears the game's own cat instead of an emoji, so
   the picker matches the art you get when you click it. */
#tile-kitty .game-tile-icon { font-size: 0; }
#tile-kitty-face { display: block; width: 70px; height: 70px; margin: -6px 0; }

/* ---------- Kitty Castle preview screen ---------- */
.kitty-screen {
  max-width: none;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 10px 14px 16px;
  gap: 6px;
}
.kitty-screen > * { width: 100%; max-width: 100%; min-width: 0; }
.kitty-screen .logo { font-size: clamp(30px, 6vw, 52px); margin: 0; }
.kitty-screen .subtagline { margin: 0 0 6px; text-align: center; }
.kitty-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kitty-topbar .back-link { margin: 0 0 6px; }
.kitty-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
#kitty-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 4px solid var(--panel-lt);
  border-radius: 16px;
  background: #2a2036;
  box-shadow: 0 8px 0 rgba(0,0,0,.35);
}

/* ---- css/lava.css ---- */
/* Lava Escape: molten -- everything reads as heat coming up the shaft. */
body.lava-theme {
  --neon:      #ffb347;
  --neon-dk:   #c47a16;
  --hot:       #ff5e14;
  --hot-dk:    #b33505;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #ff8a3d;
}

#tile-lava {
  border-color: #ff8a3d;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(255,94,20,.32);
}
#tile-lava:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(255,94,20,.26); }

/* ---- css/maze.css ---- */
/* Maze Muncher: hedge green and raspberry red. */
body.maze-theme {
  --neon:      #5cd65c;
  --neon-dk:   #2f7a3a;
  --hot:       #ff4d6d;
  --hot-dk:    #b8304a;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #6b8cff;
}

#tile-maze {
  border-color: #5cd65c;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(92,214,92,.3);
}
#tile-maze:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(92,214,92,.25); }

/* ---- css/pies.css ---- */
/* Brainy Eats Pies!: cherry filling and golden crust. */
body.pies-theme {
  --neon:      #ff8a65;
  --neon-dk:   #c4502e;
  --hot:       #e0383e;
  --hot-dk:    #9e1f26;
  --sun:       #ffd27a;
  --sun-dk:    #c99a3a;
  --violet:    #d9779a;
}

/* Brainy Eats Pies!: an answer is banked, so input is read-only until he
   starts the next pie. Grey, no caret, keypad dimmed and unclickable. */
body.answer-locked .answer-box {
  border-color: #5c6078;
  background: rgba(70,74,92,.6);
  color: #9a9eb3;
  box-shadow: none;
}

body.answer-locked .caret { visibility: hidden; }

body.answer-locked .keypad button { opacity: .4; pointer-events: none; }

#tile-pies {
  border-color: #ff8a65;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(255,138,101,.3);
}
#tile-pies:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(255,138,101,.25); }

/* ---- css/rocket.css ---- */
/* Space Voyage: deep space, rocket red. */
body.rocket-theme {
  --neon:      #7cc7ff;
  --neon-dk:   #3a7fb8;
  --hot:       #ff6a3d;
  --hot-dk:    #b8401c;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #b48bff;
}

#tile-rocket {
  border-color: #7cc7ff;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(124,199,255,.3);
}
#tile-rocket:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(124,199,255,.25); }
#tile-rocket .tile-art-wrap { background: radial-gradient(circle at 70% 30%, #2a2f6a, #070820 70%); border-radius: 12px; }

/* ---- css/sandcastles.css ---- */
/* Sand Castles: sea turquoise, sun-gold and coral over warm sand. */
body.sandcastles-theme {
  --neon:      #35d6c9;
  --neon-dk:   #16948e;
  --hot:       #ff6b57;
  --hot-dk:    #b83a2a;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #ff8fb8;   /* shell pink: combo readout */
}

#tile-sandcastles {
  border-color: #35d6c9;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(53,214,201,.3);
}
#tile-sandcastles:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(53,214,201,.25); }

/* ---- css/sneak.css ---- */
/* Sneaky Badger: green light, red light, and a sunny meadow. */
body.sneak-theme {
  --neon:      #5fd068;
  --neon-dk:   #2f8a3c;
  --hot:       #e8453c;
  --hot-dk:    #9e2a22;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #7ec8f2;
}

#tile-sneak {
  border-color: #5fd068;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(95,208,104,.3);
}
#tile-sneak:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(95,208,104,.25); }

/* ---- css/tower.css ---- */
/* Sky Tower: crane yellow against a city sky. */
body.tower-theme {
  --neon:      #ffc94d;
  --neon-dk:   #c49112;
  --hot:       #e8453c;
  --hot-dk:    #9e2a22;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #7ec8f2;
}

#tile-tower {
  border-color: #e8b423;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(232,180,35,.3);
}
#tile-tower:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(232,180,35,.25); }

/* ---- Ristra Rush: New Mexico market, chile red and turquoise. ---- */
body.ristra-theme {
  --neon:      #2fb5b0;   /* turquoise: HUD accents, caret, correct-answer glow */
  --neon-dk:   #1f8f8c;
  --hot:       #b3201f;   /* chile red: warnings, quit hover */
  --hot-dk:    #7d1413;
  --sun:       #ffd23f;
  --sun-dk:    #c99400;
  --violet:    #d8b48a;   /* pause hover: adobe tan instead of purple */
}
/* the last strike in Endless: the count blinks like the clock's last ten seconds */
body.ristra-theme #hud-city.warning { color: #ff6a55; animation: blink .8s steps(2) infinite; }

#tile-ristra {
  border-color: #2fb5b0;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(47,181,176,.3);
}
#tile-ristra:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(47,181,176,.25); }

/* ---- Butterfly Haven: a sunlit glass conservatory, teal and marigold. ---- */
body.butterfly-theme {
  --neon:      #3fd0b0;   /* teal: HUD accents, caret, correct-answer glow */
  --neon-dk:   #1f9e8a;
  --hot:       #ff4d7d;   /* warnings, quit hover */
  --hot-dk:    #c41f4d;
  --sun:       #ffd23f;
  --sun-dk:    #d79b00;
  --violet:    #f08a1c;   /* pause hover: monarch orange instead of purple */
}
/* the 1-Minute chip while Butterfly Haven is open: Endless only (js/start.js syncModeRowForGame) */
#mode-row .chip.locked, #mode-row .chip.locked:hover { opacity: .35; cursor: not-allowed; transform: none; background: #303680; }

#tile-butterfly {
  border-color: #3fd0b0;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(63,208,176,.3);
}
#tile-butterfly:active { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(63,208,176,.25); }

/* Butterfly Haven: a soft fill behind the answer, filling left to right until the equations change (empty = just changed). Hidden in every other game. */
.answer-timer { display: none; }
body.butterfly-theme .answer-box { position: relative; isolation: isolate; }
body.butterfly-theme .answer-timer {
  display: block; position: absolute; inset: 0; z-index: -1;
  border-radius: 10px; overflow: hidden; pointer-events: none;
}
body.butterfly-theme .answer-timer i {
  display: block; width: 100%; height: 100%; background: rgba(63,208,176,.2);
  transform-origin: left center; transform: scaleX(0);
}