/* ═══════════════════════════════════════════════════════════════
   MATH ARCADE – DESIGNER EDITION: CYBER MIDNIGHT ARCADE
   Designed by Antigravity Senior UI/UX Design System
   
   Palette System:
   - Deep Canvas: Pitch Obsidian #06080d with Nebula Depth #0c1222
   - Console Shell: Dark Royal Midnight #0f172a with 3D Bevels #161e33
   - Display CRT Screen: Cyber Neon Mint #00f5a0 & Electric Cyan #00d2ff
   - Digit Keycaps: Dark Gunmetal Slate #1e293b with Pure White Ink #ffffff
   - Utility / Clear: Crimson Coral #ff3366
   - Action CTA: Electric Cyber Mint #00f5a0 with Deep Jade 3D Edge
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Root variables & deep space canvas ───────────────────── */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#06080d;--panel:#0d1322;--ink:#f8fafc;--muted:#64748b;
  --green:#00f5a0;--orange:#ff007f;--blue:#00d2ff;--red:#ff3366;
  --violet:#9d4edd;--line:#1e293b;--launch-color:#00f5a0;
  --font-display:'Space Grotesk',Arial,sans-serif;
  --font-code:ui-monospace,'Cascadia Code',monospace;
}
html[data-theme="dark"] body{
  background-color:#06080d!important;
  background-image:
    radial-gradient(ellipse at 50% 15%, #0e1b38 0%, transparent 65%),
    radial-gradient(1.5px 1.5px at 30px 45px, #ffffff 100%, transparent),
    radial-gradient(1px 1px at 90px 140px, #ffffffcc 100%, transparent),
    radial-gradient(2px 2px at 170px 60px, #ffffff 100%, transparent),
    radial-gradient(1px 1px at 240px 200px, #ffffffaa 100%, transparent),
    radial-gradient(1.5px 1.5px at 320px 110px, #ffffff 100%, transparent),
    radial-gradient(2px 2px at 410px 260px, #ffffffcc 100%, transparent),
    radial-gradient(1px 1px at 490px 80px, #ffffffaa 100%, transparent),
    radial-gradient(1.5px 1.5px at 570px 230px, #ffffff 100%, transparent),
    radial-gradient(2px 2px at 640px 50px, #ffffffcc 100%, transparent),
    radial-gradient(1px 1px at 720px 290px, #ffffffaa 100%, transparent),
    radial-gradient(1.5px 1.5px at 800px 170px, #ffffff 100%, transparent),
    radial-gradient(2px 2px at 890px 90px, #ffffffcc 100%, transparent),
    radial-gradient(1px 1px at 970px 240px, #ffffffaa 100%, transparent),
    radial-gradient(1.5px 1.5px at 1050px 70px, #ffffff 100%, transparent),
    radial-gradient(2px 2px at 1130px 210px, #ffffffcc 100%, transparent),
    radial-gradient(1px 1px at 1210px 130px, #ffffffaa 100%, transparent)!important;
  background-repeat:no-repeat, repeat!important;
  background-size:100% 600px, 420px 340px!important;
  color:#f8fafc;
}
html[data-theme="dark"] body:not(.game-page),
html[data-theme="dark"] .home.home-stage{background-color:transparent!important}

/* Twinkling Star Field */
html[data-theme="dark"] .space-field i{
  background:#ffffff!important;
  box-shadow:0 0 5px #ffffff,0 0 10px #00d2ffaa!important;
  animation:starPulse 3s ease-in-out infinite alternate!important;
}
html[data-theme="dark"] .space-field i:nth-child(2n){
  animation-duration:2.1s!important;
  animation-delay:.3s!important;
}
html[data-theme="dark"] .space-field i:nth-child(3n){
  animation-duration:3.8s!important;
  animation-delay:1s!important;
  width:3px!important;
  height:3px!important;
  background:#00f5a0!important;
}
@keyframes starPulse{
  0%{opacity:.2;transform:scale(.75)}
  50%{opacity:1;transform:scale(1.4);box-shadow:0 0 8px #ffffff,0 0 14px #00f5a0aa}
  100%{opacity:.3;transform:scale(1)}
}

/* ── 2. Topbar & navigation ─────────────────────────────────── */
html[data-theme="dark"] .topbar{
  background:#0b101de6!important;border-color:#1e293b!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 24px #00000088,0 1px 0 #00f5a025;
}
html[data-theme="dark"] .brand,html[data-theme="dark"] .nav-right{color:#f8fafc}
html[data-theme="dark"] .brand-icon{
  background:#00f5a0!important;color:#042617!important;
  box-shadow:0 0 16px #00f5a066,0 3px 0 #00b375!important;
}
html[data-theme="dark"] .version,html[data-theme="dark"] .desktop-label{color:#64748b}
html[data-theme="dark"] .icon-button{
  background:#141c2e!important;color:#f8fafc!important;
  border-color:#23314d!important;box-shadow:0 3px 0 #090e18!important;
}
html[data-theme="dark"] .icon-button:hover{
  border-color:#00f5a0!important;color:#00f5a0!important;
  box-shadow:0 4px 14px #00f5a040!important;
}

/* ── 3. Home page – hero copy ───────────────────────────────── */
html[data-theme="dark"] .home-stage .hero-copy .eyebrow{color:#00f5a0!important}
html[data-theme="dark"] .home-stage .hero-copy h1{color:#ffffff!important}
html[data-theme="dark"] .home-stage .hero-copy h1 .title-word:not(:last-child) .title-letter{color:#ffffff!important}
html[data-theme="dark"] .home-stage .hero-copy h1 em,
html[data-theme="dark"] .home-stage .hero-copy h1 em .title-letter{
  color:#00f5a0!important;
  background:none!important;
  -webkit-background-clip:initial!important;
  -webkit-text-fill-color:initial!important;
  filter:none!important;
  text-shadow:0 0 16px rgba(0, 245, 160, 0.65)!important;
}
html[data-theme="dark"] .home-stage .hero-copy p{color:#94a3b8!important}
html[data-theme="dark"] .title-letter:hover{color:#00f5a0;text-shadow:0 0 22px #00f5a0aa}
html[data-theme="dark"] .title-word:last-child .title-letter:hover{color:#00d2ff;text-shadow:0 0 22px #00d2ffaa}

/* ── 4. Home page – sharp calculator character (ELEVATED HERO DEEP NAVY #182238) ── */
html[data-theme="dark"] .home-stage .character{
  background:#182238!important;border-color:#38bdf8!important;
  filter:none!important;
  box-shadow:8px 9px 0 #090e1a,16px 18px 0 #000000,0 25px 45px #000000e0,0 0 35px #38bdf835!important;
}
html[data-theme="dark"] .home-stage .character-scene:hover .character{filter:none!important}
html[data-theme="dark"] .home-stage .face{
  background:#38bdf8!important;border-color:#0284c7!important;
  box-shadow:inset 0 3px 0 #7dd3fc,0 0 25px #38bdf850!important;
}
html[data-theme="dark"] .home-stage .eyes i{background:#03182e!important;box-shadow:none!important}
html[data-theme="dark"] .home-stage .smile{border-color:#03182e!important}
html[data-theme="dark"] .home-stage .character-keys i{
  background:#1e293b!important;color:#f8fafc!important;
  box-shadow:0 4px 0 #0f172a!important;
}
html[data-theme="dark"] .home-stage .character-keys i:hover{
  background:#38bdf8!important;color:#03182e!important;
  box-shadow:0 4px 0 #0284c7!important;
}
html[data-theme="dark"] .home-stage .character-keys i:nth-child(4n){
  background:#ff3366!important;color:#ffffff!important;
  box-shadow:0 4px 0 #b3143b!important;
}
html[data-theme="dark"] .home-stage .character-keys i:nth-child(15){
  background:#38bdf8!important;color:#03182e!important;
  box-shadow:0 4px 0 #0284c7!important;
}
html[data-theme="dark"] .home-stage .character-foot{
  background:#182238!important;box-shadow:4px 6px 0 #090e1a!important;
}
html[data-theme="dark"] .home-stage .character-shadow{background:#000000;opacity:.8}

/* ── 5. Home page – tiny calculators (MUTED SECONDARY DARK SLATE #0F172A) ── */
html[data-theme="dark"] .tiny-calci,
html[data-theme="dark"] .tiny-calci-left,
html[data-theme="dark"] .tiny-calci-right,
html[data-theme="dark"] .tiny-calci-blue,
html[data-theme="dark"] .tiny-calci-pink,
html[data-theme="dark"] .home-stage .tiny-calci,
html[data-theme="dark"] .home-stage .tiny-calci-left,
html[data-theme="dark"] .home-stage .tiny-calci-right,
html[data-theme="dark"] .home-stage .tiny-calci-blue,
html[data-theme="dark"] .home-stage .tiny-calci-pink{
  background:#0f172a!important;border-color:#1e293b!important;filter:none!important;
  box-shadow:5px 6px 0 #090e1a,10px 12px 0 #000000,0 20px 34px #000000c0!important;
}

/* BOTH LEFT & RIGHT TINY CALCULATOR SCREENS: UNIFIED ELECTRIC CYBER CYAN (#00D2FF) */
html[data-theme="dark"] .tiny-calci-screen,
html[data-theme="dark"] .tiny-calci-left .tiny-calci-screen,
html[data-theme="dark"] .tiny-calci-right .tiny-calci-screen,
html[data-theme="dark"] .tiny-calci-blue .tiny-calci-screen,
html[data-theme="dark"] .tiny-calci-pink .tiny-calci-screen,
html[data-theme="dark"] .home-stage .tiny-calci-screen,
html[data-theme="dark"] .home-stage .tiny-calci-left .tiny-calci-screen,
html[data-theme="dark"] .home-stage .tiny-calci-right .tiny-calci-screen,
html[data-theme="dark"] .home-stage .tiny-calci-blue .tiny-calci-screen,
html[data-theme="dark"] .home-stage .tiny-calci-pink .tiny-calci-screen{
  background:#00d2ff!important;border-color:#0284c7!important;
  box-shadow:inset 2px 3px 0 #7dd3fc!important;
}

html[data-theme="dark"] .tiny-calci-face i,
html[data-theme="dark"] .tiny-calci-left .tiny-calci-face i,
html[data-theme="dark"] .tiny-calci-right .tiny-calci-face i,
html[data-theme="dark"] .tiny-calci-blue .tiny-calci-face i,
html[data-theme="dark"] .tiny-calci-pink .tiny-calci-face i,
html[data-theme="dark"] .home-stage .tiny-calci-face i{background:#03182e!important;box-shadow:2px 0 #03182e!important}

html[data-theme="dark"] .tiny-calci-face b,
html[data-theme="dark"] .tiny-calci-left .tiny-calci-face b,
html[data-theme="dark"] .tiny-calci-right .tiny-calci-face b,
html[data-theme="dark"] .tiny-calci-blue .tiny-calci-face b,
html[data-theme="dark"] .tiny-calci-pink .tiny-calci-face b,
html[data-theme="dark"] .home-stage .tiny-calci-face b{border-color:#03182e!important}

html[data-theme="dark"] .tiny-calci-face em,
html[data-theme="dark"] .tiny-calci-left .tiny-calci-face em,
html[data-theme="dark"] .tiny-calci-right .tiny-calci-face em,
html[data-theme="dark"] .tiny-calci-blue .tiny-calci-face em,
html[data-theme="dark"] .tiny-calci-pink .tiny-calci-face em,
html[data-theme="dark"] .home-stage .tiny-calci-face em{color:#facc15!important}

html[data-theme="dark"] .tiny-calci-keys span,
html[data-theme="dark"] .tiny-calci-left .tiny-calci-keys span,
html[data-theme="dark"] .tiny-calci-right .tiny-calci-keys span,
html[data-theme="dark"] .tiny-calci-blue .tiny-calci-keys span,
html[data-theme="dark"] .tiny-calci-pink .tiny-calci-keys span,
html[data-theme="dark"] .home-stage .tiny-calci-keys span{
  background:#1e293b!important;color:#f8fafc!important;
  box-shadow:0 2px 0 #0f172a!important;
  transition:transform 0.15s cubic-bezier(0.2, 0.9, 0.25, 1), background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease!important;
}

html[data-theme="dark"] .tiny-calci-keys span:hover,
html[data-theme="dark"] .tiny-calci-left .tiny-calci-keys span:hover,
html[data-theme="dark"] .tiny-calci-right .tiny-calci-keys span:hover,
html[data-theme="dark"] .tiny-calci-blue .tiny-calci-keys span:hover,
html[data-theme="dark"] .tiny-calci-pink .tiny-calci-keys span:hover,
html[data-theme="dark"] .home-stage .tiny-calci-keys span:hover{
  background:#00d2ff!important;color:#03182e!important;
  box-shadow:0 2px 0 #0284c7!important;
  transform:translateY(-1px)!important;
}

html[data-theme="dark"] .tiny-calci-keys span:last-child,
html[data-theme="dark"] .tiny-calci-left .tiny-calci-keys span:last-child,
html[data-theme="dark"] .tiny-calci-right .tiny-calci-keys span:last-child,
html[data-theme="dark"] .tiny-calci-blue .tiny-calci-keys span:last-child,
html[data-theme="dark"] .tiny-calci-pink .tiny-calci-keys span:last-child,
html[data-theme="dark"] .home-stage .tiny-calci-keys span:last-child{
  background:#00d2ff!important;color:#03182e!important;
  box-shadow:0 2px 0 #0284c7!important;
}

/* ── 6. Home page – symbol stream ───────────────────────────── */
html[data-theme="dark"] .home-stage .symbol-stream span{
  background:#141c2e!important;color:#00f5a0!important;
  border-color:#23314d!important;
  box-shadow:0 4px 0 #090e1a,inset 0 2px 0 #00f5a030!important;
}
html[data-theme="dark"] .home-stage .symbol-stream span:hover{
  color:#ff007f!important;border-color:#ff007f!important;
  box-shadow:0 4px 0 #a30052,inset 0 2px 0 #ff007f50!important;
}
html[data-theme="dark"] .home-stage .symbol-stream span:nth-child(3n){
  background:#0f2038!important;color:#00d2ff!important;
  border-color:#1e40af!important;
  box-shadow:0 4px 0 #090e1a!important;
}

/* ── 7. Home page – actions, buttons ────────────────────────── */
html[data-theme="dark"] .home-stage .hero-actions .play-button {
  background: #00f5a0 !important;
  border: 1px solid #66ffcc !important;
  color: #042617 !important;
  box-shadow: 0 6px 0 #00b375, 0 10px 24px rgba(0, 245, 160, 0.35) !important;
}

html[data-theme="dark"] .home-stage .hero-actions .play-button:hover {
  background: #00f5a0 !important;
  box-shadow: 0 9px 0 #00b375, 0 14px 30px rgba(0, 245, 160, 0.55) !important;
  transform: translateY(-3px) !important;
}

html[data-theme="dark"] .home-stage .hero-actions .play-button:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #00b375, 0 4px 10px rgba(0, 245, 160, 0.2) !important;
}
html[data-theme="dark"] .home-stage .play-button span,
html[data-theme="dark"] .home-stage .play-button .launch-label{color:#042617!important}
html[data-theme="dark"] .home-stage .hero-actions .play-button .launch-key{
  background:#0b132b!important;color:#00f5a0!important;
  border-color:#00f5a044!important;box-shadow:0 3px 0 #040914!important;
  transition:transform .22s cubic-bezier(0.34, 1.56, 0.64, 1)!important;
}
html[data-theme="dark"] .home-stage .play-button:hover .launch-key{
  transform:translateY(-3px) scale(1.08) rotate(-10deg)!important;
  background:#060d1f!important;color:#66ffcc!important;
}
html[data-theme="dark"] .home-stage .play-button span,
html[data-theme="dark"] .home-stage .play-button .launch-label{color:#042617!important}
html[data-theme="dark"] .home-stage .hero-actions .play-button .launch-key{
  background:#0f172a!important;color:#ffffff!important;
  border-color:#2a3a5c!important;box-shadow:0 3px 0 #090e1a!important;
}
html[data-theme="dark"] .primary{
  background:#00f5a0;border-color:#66ffcc;color:#042617;
  box-shadow:0 5px 0 #00b375;
}
html[data-theme="dark"] .primary:hover{
  background:#00d2ff;border-color:#80e5ff;color:#032238;
  box-shadow:0 8px 0 #0088cc,0 0 30px #00d2ff60;
}
html[data-theme="dark"] .scoreboard-button{
  background:#141c2e;border-color:#23314d;color:#f8fafc;
  box-shadow:0 5px 0 #090e18;
}
html[data-theme="dark"] .scoreboard-button:hover{
  border-color:#00f5a0;box-shadow:0 8px 0 #00b375,0 0 20px #00f5a040;
}
html[data-theme="dark"] .scoreboard-button strong{color:#00f5a0}
html[data-theme="dark"] .scoreboard-button span,
html[data-theme="dark"] .scoreboard-button i{color:#64748b}

/* ── 8. Home page – guide, footer, dialogs ──────────────────── */
html[data-theme="dark"] .home-guide,html[data-theme="dark"] footer{
  background:#0b101d!important;color:#f8fafc!important;border-color:#1e293b!important;
}
html[data-theme="dark"] .instructions>div{border-color:#1e293b!important}
html[data-theme="dark"] .instructions p,html[data-theme="dark"] footer>span{color:#64748b!important}
html[data-theme="dark"] dialog{
  background:#0b101d!important;color:#f8fafc!important;border-color:#23314d!important;
  box-shadow:0 12px 0 #060912,0 30px 90px #000000f0!important;
}
html[data-theme="dark"] dialog::backdrop{background:#06080ddd!important}
html[data-theme="dark"] .setting-row select{
  background:#141c2e!important;color:#f8fafc!important;border-color:#23314d!important;
}

/* ── 9. Game page – base ────────────────────────────────────── */
html[data-theme="dark"] .game-page{
  background:#06080d!important;color:#f8fafc!important;
  --calc-shell:#0f172a;--calc-edge:#090e1a;--calc-rim:#2a3a5c;
  --screen-surface:#072118;--screen-rim:#00f5a0;--screen-line:#00d98c;
  --screen-copy:#f8fafc;--screen-meta:#00f5a0;--screen-accent:#ff007f;
  --module-surface:#141c2e;--module-border:#23314d;--deck-surface:#0a0f1a;
  --key-surface:#1e293b;--key-edge:#0f172a;--key-border:#334155;--key-copy:#f8fafc;
}
html[data-theme="dark"] .game-page .topbar,
html[data-theme="dark"] .game-page .mobile-game-header{
  background:#0b101de6!important;border-color:#1e293b!important;
}

/* ── 10. Game page – arena chrome ───────────────────────────── */
html[data-theme="dark"] .game-page .arena{background:#0b101d!important;border-color:#1e293b!important}
html[data-theme="dark"] .game-page .arena-top,
html[data-theme="dark"] .game-page .arena-bottom{color:#64748b!important;border-color:#1e293b!important}
html[data-theme="dark"] .game-page .arena-top .tiny-cross{color:#00f5a0!important}
html[data-theme="dark"] .game-page .arena-top b{color:#00d2ff!important}
html[data-theme="dark"] .game-page .arena-bottom kbd{
  background:#141c2e!important;border-color:#23314d!important;color:#f8fafc!important;
}

/* ── 11. Game page – console (calculator shell) ─────────────── */
html[data-theme="dark"] .game-page .console{
  background:#0f172a!important;color:#f8fafc!important;
  border:3px solid #2a3a5c!important;border-radius:24px;
  box-shadow:7px 8px 0 #090e1a,14px 16px 0 #000000,0 25px 45px #000000e0,0 0 35px #00f5a015!important;
  filter:none!important;
}
html[data-theme="dark"] .game-page .console:before{
  background:#090e1a;border-color:#000000;box-shadow:10px 12px 22px #00000080;
}
html[data-theme="dark"] .game-page .character-top{color:#64748b}
html[data-theme="dark"] .game-page .character-top span:last-child{color:#00f5a0}

/* ── 12. Game page – display (VIBRANT CYAN CRT SCREEN) ─────────── */
html[data-theme="dark"] .game-page .display{
  background:#38bdf8!important;color:#03182e!important;
  border:4px solid #0284c7!important;border-radius:11px;
  box-shadow:inset 0 2px 0 #7dd3fc,inset 0 -8px 18px #0284c735,
  0 6px 0 #00000060,0 12px 24px #00000080,0 0 22px #38bdf840!important;
}
html[data-theme="dark"] .game-page .display:before{background:#0284c7}
html[data-theme="dark"] .game-page .display-top,
html[data-theme="dark"] .game-page .display-bottom{color:#025a87!important}
html[data-theme="dark"] .game-page .question{color:#03182e!important;text-shadow:none!important}
html[data-theme="dark"] .game-page .question span{color:#ff007f!important;text-shadow:none!important}
html[data-theme="dark"] .game-page .answer-slot{color:#03182e!important;text-shadow:none!important}
html[data-theme="dark"] .game-page .input-caret{background:#ff007f;box-shadow:0 0 10px #ff007faa}

/* ── 13. Game page – fuse & feedback ────────────────────────── */
html[data-theme="dark"] .game-page .fuse-label{color:#64748b!important}
html[data-theme="dark"] .game-page .fuse-track{background:#141c2e!important}
html[data-theme="dark"] .game-page .fuse-track i{background:#00f5a0!important;box-shadow:0 0 10px #00f5a0aa!important}
html[data-theme="dark"] .game-page .question-fuse{background:transparent!important}
html[data-theme="dark"] .game-page .feedback-row{background:transparent!important;color:#f8fafc!important}
html[data-theme="dark"] .game-page #multiplier{
  background:#141c2e;border-color:#23314d;color:#00f5a0!important;
}

/* ── 14. Game page – keypad (GUNMETAL SLATE, CRIMSON C & MINT ENTER) ── */
html[data-theme="dark"] .game-page .keypad{background:transparent!important}

/* Digit Keys (1 2 3 4 5 6 7 8 9 0 00): DARK GUNMETAL SLATE */
html[data-theme="dark"] .game-page .keypad button[data-key="1"],
html[data-theme="dark"] .game-page .keypad button[data-key="2"],
html[data-theme="dark"] .game-page .keypad button[data-key="3"],
html[data-theme="dark"] .game-page .keypad button[data-key="4"],
html[data-theme="dark"] .game-page .keypad button[data-key="5"],
html[data-theme="dark"] .game-page .keypad button[data-key="6"],
html[data-theme="dark"] .game-page .keypad button[data-key="7"],
html[data-theme="dark"] .game-page .keypad button[data-key="8"],
html[data-theme="dark"] .game-page .keypad button[data-key="9"],
html[data-theme="dark"] .game-page .keypad button[data-key="0"],
html[data-theme="dark"] .game-page .keypad button[data-key="00"]{
  background:#1e293b!important;color:#ffffff!important;
  border-color:#334155!important;
  box-shadow:0 5px 0 #0f172a,0 8px 14px #00000080,inset 0 1px 0 #ffffff1a!important;
}
html[data-theme="dark"] .game-page .keypad button[data-key="1"]:hover,
html[data-theme="dark"] .game-page .keypad button[data-key="2"]:hover,
html[data-theme="dark"] .game-page .keypad button[data-key="3"]:hover,
html[data-theme="dark"] .game-page .keypad button[data-key="4"]:hover,
html[data-theme="dark"] .game-page .keypad button[data-key="5"]:hover,
html[data-theme="dark"] .game-page .keypad button[data-key="6"]:hover,
html[data-theme="dark"] .game-page .keypad button[data-key="7"]:hover,
html[data-theme="dark"] .game-page .keypad button[data-key="8"]:hover,
html[data-theme="dark"] .game-page .keypad button[data-key="9"]:hover,
html[data-theme="dark"] .game-page .keypad button[data-key="0"]:hover,
html[data-theme="dark"] .game-page .keypad button[data-key="00"]:hover{
  background:#334155!important;color:#00f5a0!important;border-color:#00f5a0!important;
  box-shadow:0 5px 0 #0f172a,0 8px 16px #00f5a040!important;
}

/* Clear key (C) & Backspace (⌫): CRIMSON CORAL */
html[data-theme="dark"] .game-page .keypad .clear-key,
html[data-theme="dark"] .game-page .keypad button[data-key="Backspace"],
html[data-theme="dark"] .game-page .keypad .utility,
html[data-theme="dark"] .game-page .keypad .sign-key{
  background:#ff3366!important;color:#ffffff!important;
  border-color:#ff668c!important;
  box-shadow:0 5px 0 #b3143b,0 8px 14px #00000050,inset 0 1px 0 #ffffff33!important;
}
html[data-theme="dark"] .game-page .keypad .clear-key:hover,
html[data-theme="dark"] .game-page .keypad button[data-key="Backspace"]:hover,
html[data-theme="dark"] .game-page .keypad .utility:hover,
html[data-theme="dark"] .game-page .keypad .sign-key:hover{
  background:#e6003b!important;color:#ffffff!important;
}

/* Enter key (=): ELECTRIC CYBER MINT */
html[data-theme="dark"] .game-page .keypad .enter-key{
  background:#00f5a0!important;color:#042617!important;
  border-color:#66ffcc!important;
  box-shadow:0 5px 0 #00b375,0 8px 14px #00000050,inset 0 1px 0 #ffffff55!important;
}
html[data-theme="dark"] .game-page .keypad .enter-key:hover{
  background:#00d2ff!important;color:#032238!important;border-color:#80e5ff!important;
  box-shadow:0 5px 0 #0088cc,0 8px 16px #00d2ff60!important;
}
html[data-theme="dark"] .game-page .keypad button:active,
html[data-theme="dark"] .game-page .keypad button.pressed{
  transform:translateY(5px)!important;
  box-shadow:0 0 0 transparent!important;
  background:#00f5a0!important;color:#042617!important;
}

/* ── 15. Game page – reaction text effects ──────────────────── */
html[data-theme="dark"] .game-page .reaction-stage{color:#00d2ff}
html[data-theme="dark"] .game-page .reaction-word{
  color:inherit;text-shadow:0 0 15px #00d2ff88}
html[data-theme="dark"] .game-page .reaction-detail{color:#64748b}
html[data-theme="dark"] .game-page .reaction-stage[data-kind=ready]{color:#64748b}
html[data-theme="dark"] .game-page .reaction-stage[data-kind=ready] .reaction-word{
  color:#64748b;text-shadow:none}
html[data-theme="dark"] .game-page .reaction-stage[data-kind=perfect]{color:#00f5a0}
html[data-theme="dark"] .game-page .reaction-stage[data-kind=perfect] .reaction-word{
  text-shadow:0 2px 0 #00b375,0 5px 0 #006643,0 0 30px #00f5a0aa;
  filter:none}
html[data-theme="dark"] .game-page .reaction-stage[data-kind=overdrive]{color:#ff007f}
html[data-theme="dark"] .game-page .reaction-stage[data-kind=overdrive] .reaction-word{
  text-shadow:0 2px 0 #b30059,0 5px 0 #660033,0 0 35px #ff007fcc;
  filter:none}
html[data-theme="dark"] .game-page .reaction-stage[data-kind=miss]{color:#ff3366}
html[data-theme="dark"] .game-page .reaction-stage[data-kind=miss] .reaction-word{
  color:#ff3366;text-shadow:0 0 15px #ff336688}

/* ── 16. Game page – meters & stats ─────────────────────────── */
html[data-theme="dark"] .game-page .stat-label,
html[data-theme="dark"] .game-page .stat-caption{color:#64748b}
html[data-theme="dark"] .game-page .stat-value{color:#f8fafc!important;text-shadow:none}
html[data-theme="dark"] .game-page .time-column .stat-value{color:#00d2ff}
html[data-theme="dark"] .game-page .heat-column .stat-value{color:#ff007f}
html[data-theme="dark"] .game-page .fire-icon{color:#ff007f}
html[data-theme="dark"] .game-page .liquid-meter,
html[data-theme="dark"] .game-page .mobile-meters .liquid-meter{
  background:#141c2e!important;border-color:#23314d!important;
  box-shadow:inset 3px 3px 0 #090e1a,3px 4px 0 #00000080!important;
}
html[data-theme="dark"] .game-page .time-meter .liquid{background:#00d2ff}
html[data-theme="dark"] .game-page .heat-meter .liquid{background:#ff007f}
html[data-theme="dark"] .game-page .wave{background:#141c2e}
html[data-theme="dark"] .game-page .meter-number{color:#f8fafc;text-shadow:0 1px 3px #000000}
html[data-theme="dark"] .game-page .meter-footer{color:#64748b}

/* ── 17. Result dialog ──────────────────────────────────────── */
html[data-theme="dark"] .result-grave,
html[data-theme="dark"] #resultDialog{
  background:#0b101d!important;color:#f8fafc!important;border-color:#23314d!important;
  box-shadow:0 12px 0 #060912,0 28px 60px #000000f0!important;
}
html[data-theme="dark"] #resultDialog .grave-mark{
  background:#0f172a!important;border-color:#2a3a5c!important;box-shadow:0 8px 0 #090e1a!important;
}
html[data-theme="dark"] #resultDialog #replayButton,
html[data-theme="dark"] #startButton{
  background:#00f5a0!important;color:#042617!important;
  box-shadow:0 4px 0 #00b375!important;
}
html[data-theme="dark"] #resultDialog #replayButton:hover,
html[data-theme="dark"] #startButton:hover{
  background:#00d2ff!important;border-color:#80e5ff!important;color:#032238!important;
  box-shadow:0 4px 0 #0088cc,0 0 20px #00d2ff50!important;
}

/* ── 18. Theme transition wipe ──────────────────────────────── */
body.theme-to-dark:after{background:#06080d!important}
html[data-theme="dark"] .home-stage #heroScore strong{color:#61dbf5!important}


/* Final dark mode: black/white base with purposeful flat accents, no gradients. */
html[data-theme="dark"] {
  --bg: #000000;
  --panel: #090909;
  --ink: #ffffff;
  --muted: #9ca3af;
  --line: #2a2a2a;
  --green: #ffffff;
  --blue: #38bdf8;
  --orange: #f59e0b;
  --red: #e11d48;
  --launch-color: #38bdf8;
}

html[data-theme="dark"] body {
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after,
html[data-theme="dark"] .home.home-stage::before,
html[data-theme="dark"] .home.home-stage::after,
html[data-theme="dark"] .game-page::before,
html[data-theme="dark"] .game-page::after {
  background-image: none !important;
}

html[data-theme="dark"] .topbar {
  background: #000000 !important;
  border-color: #202020 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="dark"] .brand,
html[data-theme="dark"] .nav-links button,
html[data-theme="dark"] .nav-right,
html[data-theme="dark"] .home-stage .hero-copy h1,
html[data-theme="dark"] .game-page .stat-label,
html[data-theme="dark"] .game-page .meter-footer {
  color: #ffffff !important;
}

html[data-theme="dark"] .brand-icon,
html[data-theme="dark"] .home-stage .play-button,
html[data-theme="dark"] .nav-play {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 5px 0 #7f102b !important;
}

html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .theme-button {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #333333 !important;
  box-shadow: 0 3px 0 #000000 !important;
}

html[data-theme="dark"] .home-stage .hero-copy .eyebrow,
html[data-theme="dark"] .home-stage .hero-copy p,
html[data-theme="dark"] .hero-score-label,
html[data-theme="dark"] .home-stage .hero-meta span,
html[data-theme="dark"] .orbit-label {
  color: #bdbdbd !important;
}

html[data-theme="dark"] .home-stage .hero-copy h1 em,
html[data-theme="dark"] .home-stage .hero-copy h1 em .title-letter {
  color: #e11d48 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .home-stage .character,
html[data-theme="dark"] .home-stage .tiny-calci {
  background: #111111 !important;
  border-color: #ffffff !important;
  box-shadow: 8px 9px 0 #000000, 0 18px 34px #000000 !important;
}

html[data-theme="dark"] .home-stage .face,
html[data-theme="dark"] .home-stage .tiny-calci-screen {
  background: #f5f5f5 !important;
  border-color: #ffffff !important;
  box-shadow: inset 0 3px 0 #d4d4d4 !important;
}

html[data-theme="dark"] .home-stage .eyes i,
html[data-theme="dark"] .home-stage .tiny-calci-face i {
  background: #000000 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .home-stage .smile,
html[data-theme="dark"] .home-stage .tiny-calci-face b {
  border-color: #000000 !important;
}

html[data-theme="dark"] .home-stage .character-keys i,
html[data-theme="dark"] .home-stage .tiny-calci-keys span,
html[data-theme="dark"] .symbol-stream span {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: 0 4px 0 #7a7a7a !important;
}

html[data-theme="dark"] .home-stage .character-keys i:nth-child(4n),
html[data-theme="dark"] .home-stage .tiny-calci-keys span:last-child {
  background: #e11d48 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 0 #7f102b !important;
}

html[data-theme="dark"] .home-stage .character-keys i:nth-child(15) {
  background: #38bdf8 !important;
  color: #000000 !important;
  box-shadow: 0 4px 0 #075985 !important;
}

html[data-theme="dark"] .game-page {
  background: #000000 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .game-page .arena,
html[data-theme="dark"] .game-page .game-layout {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .game-page .console {
  background: #f5f5f5 !important;
  border-color: #ffffff !important;
  box-shadow: 8px 9px 0 #202020, 14px 16px 0 #000000 !important;
}

html[data-theme="dark"] .game-page .display {
  background: #f8fbff !important;
  border-color: #38bdf8 !important;
  box-shadow: inset 0 4px 0 #d7ebfb !important;
}

html[data-theme="dark"] .game-page .display-top,
html[data-theme="dark"] .game-page .display-bottom,
html[data-theme="dark"] .game-page .fuse-label,
html[data-theme="dark"] .game-page .feedback-row,
html[data-theme="dark"] .game-page .console-bottom {
  color: #111111 !important;
}

html[data-theme="dark"] .game-page .question,
html[data-theme="dark"] .game-page .answer-slot,
html[data-theme="dark"] .game-page #answerText {
  color: #000000 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .game-page .question span {
  color: #f59e0b !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .game-page .question-fuse,
html[data-theme="dark"] .game-page .feedback-row,
html[data-theme="dark"] .game-page .keypad {
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
}

html[data-theme="dark"] .game-page .fuse-track {
  background: #cbd5e1 !important;
}

html[data-theme="dark"] .game-page .fuse-track i,
html[data-theme="dark"] .game-page #timeLiquid {
  background: #38bdf8 !important;
}

html[data-theme="dark"] .game-page #heatLiquid {
  background: #f59e0b !important;
}

html[data-theme="dark"] .game-page .keypad button {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: 0 5px 0 #9ca3af !important;
}

html[data-theme="dark"] .game-page .keypad .utility,
html[data-theme="dark"] .game-page .keypad .clear-key,
html[data-theme="dark"] .game-page .keypad .sign-key,
html[data-theme="dark"] .game-page .keypad button[data-key="Backspace"] {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
  box-shadow: 0 5px 0 #000000 !important;
}

html[data-theme="dark"] .game-page .keypad .enter-key {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #e11d48 !important;
  box-shadow: 0 5px 0 #7f102b !important;
}

html[data-theme="dark"] .game-page .stat-value,
html[data-theme="dark"] .game-page #score {
  color: #ffffff !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .game-page .fire-icon,
html[data-theme="dark"] .game-page #heatValue {
  color: #f59e0b !important;
}

html[data-theme="dark"] .game-page #timeValue {
  color: #38bdf8 !important;
}

html[data-theme="dark"] .game-page .liquid-meter {
  background: #101010 !important;
  border-color: #ffffff !important;
  box-shadow: inset 3px 3px 0 #000000, 3px 4px 0 #2a2a2a !important;
}

html[data-theme="dark"] .game-page .reaction-word {
  color: #ffffff !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .game-page .reaction-stage[data-kind="miss"] .reaction-word,
html[data-theme="dark"] .game-page .miss .feedback-row {
  color: #e11d48 !important;
}

html[data-theme="dark"] .game-page .reaction-stage[data-kind="overdrive"] .reaction-word,
html[data-theme="dark"] .game-page .overdrive .feedback-row {
  color: #f59e0b !important;
}

html[data-theme="dark"] .game-page .success .display {
  background: #ffffff !important;
  border-color: #38bdf8 !important;
}

html[data-theme="dark"] .game-page .miss .display {
  background: #fff1f2 !important;
  border-color: #e11d48 !important;
}

html[data-theme="dark"] #resultDialog.result-grave {
  background: #ffffff !important;
  box-shadow: 0 12px 0 #e11d48, 0 28px 78px #000000 !important;
}

html[data-theme="dark"] #resultDialog .death-card {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* Strict pitch-black and white dark mode. */
html[data-theme="dark"] {
  --bg: #000000;
  --panel: #000000;
  --ink: #ffffff;
  --muted: #ffffff;
  --line: #ffffff;
  --green: #ffffff;
  --blue: #ffffff;
  --orange: #ffffff;
  --red: #ffffff;
  --launch-color: #ffffff;
}

html[data-theme="dark"] body,
html[data-theme="dark"] body:not(.game-page),
html[data-theme="dark"] .home.home-stage,
html[data-theme="dark"] .game-page {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
}

html[data-theme="dark"] *,
html[data-theme="dark"] *::before,
html[data-theme="dark"] *::after {
  text-shadow: none !important;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .theme-button,
html[data-theme="dark"] .home-stage .character,
html[data-theme="dark"] .home-stage .tiny-calci,
html[data-theme="dark"] .home-stage .play-button,
html[data-theme="dark"] .nav-play,
html[data-theme="dark"] .symbol-stream span {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .brand-icon {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .home-stage .face,
html[data-theme="dark"] .home-stage .tiny-calci-screen,
html[data-theme="dark"] .home-stage .character-keys i,
html[data-theme="dark"] .home-stage .tiny-calci-keys span {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .home-stage .eyes i,
html[data-theme="dark"] .home-stage .tiny-calci-face i {
  background: #000000 !important;
}

html[data-theme="dark"] .home-stage .smile,
html[data-theme="dark"] .home-stage .tiny-calci-face b {
  border-color: #000000 !important;
}

html[data-theme="dark"] .home-stage .hero-copy h1,
html[data-theme="dark"] .home-stage .hero-copy h1 em,
html[data-theme="dark"] .home-stage .hero-copy h1 em .title-letter,
html[data-theme="dark"] .home-stage .hero-copy p,
html[data-theme="dark"] .home-stage .hero-copy .eyebrow,
html[data-theme="dark"] .hero-score-label,
html[data-theme="dark"] .hero-meta span,
html[data-theme="dark"] .orbit-label,
html[data-theme="dark"] .nav-links button {
  color: #ffffff !important;
}

/* Absolute two-color dark mode: only black and white. */
html[data-theme="dark"] {
  --bg: #000000 !important;
  --panel: #000000 !important;
  --ink: #ffffff !important;
  --muted: #ffffff !important;
  --line: #ffffff !important;
  --green: #ffffff !important;
  --blue: #ffffff !important;
  --orange: #ffffff !important;
  --red: #ffffff !important;
  --violet: #ffffff !important;
  --launch-color: #ffffff !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] body *:not(svg):not(path) {
  background-image: none !important;
  text-shadow: none !important;
  filter: none !important;
}

html[data-theme="dark"] body {
  background: #000000 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] a,
html[data-theme="dark"] button,
html[data-theme="dark"] span,
html[data-theme="dark"] p,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong,
html[data-theme="dark"] small,
html[data-theme="dark"] em,
html[data-theme="dark"] label,
html[data-theme="dark"] div {
  color: inherit;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .home.home-stage,
html[data-theme="dark"] .home-guide,
html[data-theme="dark"] footer,
html[data-theme="dark"] dialog,
html[data-theme="dark"] .arena,
html[data-theme="dark"] .game-layout,
html[data-theme="dark"] .symbol-stream span,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .theme-button,
html[data-theme="dark"] .nav-play,
html[data-theme="dark"] .play-button,
html[data-theme="dark"] .scoreboard-button,
html[data-theme="dark"] .how-button,
html[data-theme="dark"] .tiny-calci,
html[data-theme="dark"] .character {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .brand-icon,
html[data-theme="dark"] .face,
html[data-theme="dark"] .tiny-calci-screen,
html[data-theme="dark"] .character-keys i,
html[data-theme="dark"] .tiny-calci-keys span {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .eyes i,
html[data-theme="dark"] .tiny-calci-face i {
  background: #000000 !important;
  color: #000000 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .smile,
html[data-theme="dark"] .tiny-calci-face b {
  border-color: #000000 !important;
}

html[data-theme="dark"] svg,
html[data-theme="dark"] path {
  stroke: currentColor !important;
}