/* ═══════════════════════════════════════════════════════════════
   MATH ARCADE – LIGHT MODE (LIGHT PINK BACKDROP + MATCHING HOVER)
   Background: Light Pink #FFF4F8
   Middle Calculator Screen: Neon Lime CRT #D5FA65
   Left Tiny Calculator Screen: Vibrant Orange #FF863E
   Right Tiny Calculator Screen: Warm Peach #FFAD75
   Button Hover: Dynamically matches respective screen color!
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Root variables & Light Pink canvas ───────────────────── */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#FFF4F8;--panel:#ffffff;--ink:#18200f;--muted:#6f7666;
  --green:#d5fa65;--orange:#ff863e;--blue:#4ca9e8;--red:#df5148;
  --violet:#6f57bd;--line:#f7d6e0;--launch-color:#8fd8ff;
  --font-display:'Space Grotesk',Arial,sans-serif;
  --font-code:ui-monospace,'Cascadia Code',monospace;
}
html[data-theme="light"] body{background:#FFF4F8!important;color:#18200f!important}

/* ── 2. Topbar & navigation ─────────────────────────────────── */
html[data-theme="light"] .topbar{background:#FFF4F8!important;border-color:#f7d6e0!important}
html[data-theme="light"] .brand,html[data-theme="light"] .nav-right{color:#18200f!important}
html[data-theme="light"] .brand-icon{background:#d5fa65!important;color:#18200f!important;box-shadow:0 4px 0 #8ca53f!important}
html[data-theme="light"] .version,html[data-theme="light"] .desktop-label{color:#69705f!important}
html[data-theme="light"] .icon-button{background:#ffffff!important;border-color:#f3c4d3!important;color:#28301f!important;box-shadow:0 2px 0 #f7d6e0!important}
html[data-theme="light"] .icon-button:hover{border-color:#ff863e!important;color:#d8662d!important;background:#fff8fa!important}

/* ── 3. Home page – hero copy ───────────────────────────────── */
html[data-theme="light"] .home.home-stage{background:#FFF4F8!important}
html[data-theme="light"] .home-stage .hero-copy .eyebrow{color:#d8662d!important}
html[data-theme="light"] .home-stage .hero-copy h1{color:#18200f!important}
html[data-theme="light"] .home-stage .hero-copy h1 .title-word:not(:last-child) .title-letter{color:#18200f!important}
html[data-theme="light"] .home-stage .hero-copy h1 em,
html[data-theme="light"] .home-stage .hero-copy h1 em .title-letter{
  color:#E11D48!important;
  background:none!important;
  -webkit-background-clip:initial!important;
  -webkit-text-fill-color:initial!important;
  filter:none!important;
  text-shadow:0 4px 12px rgba(225, 29, 72, 0.25)!important;
}
html[data-theme="light"] .home-stage .hero-copy h1 em .title-letter:hover{
  color:#BE123C!important;
  text-shadow:0 6px 16px rgba(225, 29, 72, 0.45)!important;
}
html[data-theme="light"] .home-stage .hero-copy p{color:#626958!important}
html[data-theme="light"] .title-letter:hover{color:#ff863e!important;text-shadow:0 8px 0 #ffd6bc!important}
html[data-theme="light"] .title-word:last-child .title-letter:hover{color:#68862d!important;text-shadow:0 8px 0 #d5fa65!important}

/* ── NO BLUR on calculator character ────────────────────────── */
html[data-theme="light"] .home-stage .character{filter:none!important}
html[data-theme="light"] .home-stage .character-scene:hover .character{filter:none!important}

/* ── 4. Home page – HERO CALCULATOR (Screen: #D5FA65 Lime) ───── */
html[data-theme="light"] .home-stage .character{
  background:#d7d9cb!important;border-color:#ffffff!important;
  filter:none!important;
  box-shadow:8px 8px 0 #858a77,17px 17px 0 #535747,25px 28px 0 #c8cec0,0 25px 45px #18200f18!important;
}
html[data-theme="light"] .home-stage .face{
  background:#d5fa65!important;border-color:#5d6651!important;
  box-shadow:inset 3px 5px 0 #a4c348!important;
}
html[data-theme="light"] .home-stage .face-spark{color:#68832f!important}
html[data-theme="light"] .home-stage .eyes i{background:#18200f!important;box-shadow:2px 0 #18200f!important}
html[data-theme="light"] .home-stage .smile{border-color:#18200f!important}

/* Hero Calculator Keys: Hover changes to screen color (#D5FA65 Lime) */
html[data-theme="light"] .home-stage .character-keys i{
  background:#ffffff!important;color:#333a2c!important;
  box-shadow:0 4px 0 #949985!important;
  transition:background .15s ease, color .15s ease, transform .15s ease!important;
}
html[data-theme="light"] .home-stage .character-keys i:hover{
  background:#d5fa65!important;color:#18200f!important;
  box-shadow:0 4px 0 #81973a!important;
}
html[data-theme="light"] .home-stage .character-keys i:nth-child(4n){
  background:#3b4133!important;color:#e6eadd!important;
  box-shadow:0 4px 0 #24291d!important;
}
html[data-theme="light"] .home-stage .character-keys i:nth-child(4n):hover{
  background:#d5fa65!important;color:#18200f!important;
  box-shadow:0 4px 0 #81973a!important;
}
html[data-theme="light"] .home-stage .character-keys i:nth-child(15){
  background:#ff863e!important;color:#39200e!important;
  box-shadow:0 4px 0 #a45121!important;
}
html[data-theme="light"] .home-stage .character-keys i:nth-child(15):hover{
  background:#d5fa65!important;color:#18200f!important;
  box-shadow:0 4px 0 #81973a!important;
}

html[data-theme="light"] .home-stage .character-foot{
  background:#d7d9cb!important;box-shadow:4px 6px 0 #858a77!important;
}
html[data-theme="light"] .home-stage .character-shadow{background:#9ca591!important;opacity:.42!important}

/* ── 5. Home page – TINY SIDE CALCULATORS ────────────────────── */

/* LEFT TINY CALCULATOR: SAME ORANGE SCREEN AS RIGHT (#FFAD75) */
html[data-theme="light"] .home-stage .tiny-calci,
html[data-theme="light"] .home-stage .tiny-calci-left,
html[data-theme="light"] .home-stage .tiny-calci-blue{
  background:#d7d9cb!important;border-color:#ffffff!important;
  box-shadow:5px 6px 0 #858a77,10px 12px 0 #c8cec0,0 20px 34px #51604525!important;
}
html[data-theme="light"] .home-stage .tiny-calci-left .tiny-calci-screen,
html[data-theme="light"] .home-stage .tiny-calci-blue .tiny-calci-screen{
  background:#ffad75!important;border-color:#9b542c!important;
  box-shadow:inset 2px 3px 0 #ffc69e!important;
}
html[data-theme="light"] .home-stage .tiny-calci-left .tiny-calci-face i,
html[data-theme="light"] .home-stage .tiny-calci-blue .tiny-calci-face i{background:#5a2a14!important}
html[data-theme="light"] .home-stage .tiny-calci-left .tiny-calci-face b,
html[data-theme="light"] .home-stage .tiny-calci-blue .tiny-calci-face b{border-color:#5a2a14!important}
html[data-theme="light"] .home-stage .tiny-calci-left .tiny-calci-face em,
html[data-theme="light"] .home-stage .tiny-calci-blue .tiny-calci-face em{color:#6b7f35!important}
html[data-theme="light"] .home-stage .tiny-calci-left .tiny-calci-keys span,
html[data-theme="light"] .home-stage .tiny-calci-blue .tiny-calci-keys span{
  background:#ffffff!important;color:#333a2c!important;
  box-shadow:0 2px 0 #c8cec0!important;
  transition:background .15s ease, color .15s ease!important;
}
/* Left tiny calculator buttons hover: change to screen color (#FFAD75) */
html[data-theme="light"] .home-stage .tiny-calci-left .tiny-calci-keys span:hover,
html[data-theme="light"] .home-stage .tiny-calci-blue .tiny-calci-keys span:hover{
  background:#ffad75!important;color:#39200e!important;
  box-shadow:0 2px 0 #9b542c!important;
}
html[data-theme="light"] .home-stage .tiny-calci-left .tiny-calci-keys span:last-child,
html[data-theme="light"] .home-stage .tiny-calci-blue .tiny-calci-keys span:last-child{
  background:#ff863e!important;color:#42210e!important;
  box-shadow:0 2px 0 #a45121!important;
}
html[data-theme="light"] .home-stage .tiny-calci-left .tiny-calci-keys span:last-child:hover,
html[data-theme="light"] .home-stage .tiny-calci-blue .tiny-calci-keys span:last-child:hover{
  background:#ffad75!important;color:#39200e!important;
  box-shadow:0 2px 0 #9b542c!important;
}

/* RIGHT TINY CALCULATOR: WARM PEACH SCREEN (#FFAD75) */
html[data-theme="light"] .home-stage .tiny-calci-right,
html[data-theme="light"] .home-stage .tiny-calci-pink{
  background:#e4e6da!important;border-color:#ffffff!important;
  box-shadow:5px 6px 0 #858a77,10px 12px 0 #c8cec0,0 20px 34px #51604525!important;
}
html[data-theme="light"] .home-stage .tiny-calci-right .tiny-calci-screen,
html[data-theme="light"] .home-stage .tiny-calci-pink .tiny-calci-screen{
  background:#ffad75!important;border-color:#9b542c!important;
  box-shadow:inset 2px 3px 0 #ffc69e!important;
}
html[data-theme="light"] .home-stage .tiny-calci-right .tiny-calci-face i,
html[data-theme="light"] .home-stage .tiny-calci-pink .tiny-calci-face i{background:#5a2a14!important}
html[data-theme="light"] .home-stage .tiny-calci-right .tiny-calci-face b,
html[data-theme="light"] .home-stage .tiny-calci-pink .tiny-calci-face b{border-color:#5a2a14!important}
html[data-theme="light"] .home-stage .tiny-calci-right .tiny-calci-face em,
html[data-theme="light"] .home-stage .tiny-calci-pink .tiny-calci-face em{color:#6b7f35!important}
html[data-theme="light"] .home-stage .tiny-calci-right .tiny-calci-keys span,
html[data-theme="light"] .home-stage .tiny-calci-pink .tiny-calci-keys span{
  background:#ffffff!important;color:#333a2c!important;
  box-shadow:0 2px 0 #c8cec0!important;
  transition:background .15s ease, color .15s ease!important;
}
/* Right tiny calculator buttons hover: change to its Peach screen color (#FFAD75) */
html[data-theme="light"] .home-stage .tiny-calci-right .tiny-calci-keys span:hover,
html[data-theme="light"] .home-stage .tiny-calci-pink .tiny-calci-keys span:hover{
  background:#ffad75!important;color:#39200e!important;
  box-shadow:0 2px 0 #9b542c!important;
}
html[data-theme="light"] .home-stage .tiny-calci-right .tiny-calci-keys span:last-child,
html[data-theme="light"] .home-stage .tiny-calci-pink .tiny-calci-keys span:last-child{
  background:#ff863e!important;color:#42210e!important;
  box-shadow:0 2px 0 #a45121!important;
}
html[data-theme="light"] .home-stage .tiny-calci-right .tiny-calci-keys span:last-child:hover,
html[data-theme="light"] .home-stage .tiny-calci-pink .tiny-calci-keys span:last-child:hover{
  background:#ffad75!important;color:#39200e!important;
  box-shadow:0 2px 0 #9b542c!important;
}

/* ── 6. Home page – symbol stream ───────────────────────────── */
html[data-theme="light"] .home-stage .symbol-stream span{
  background:#ffffff!important;border-color:#bdc8ae!important;color:#5d792f!important;
  box-shadow:0 6px 0 #d5dbcc,0 12px 24px #51604520!important;
}
html[data-theme="light"] .home-stage .stream-right span{color:#d8662d!important}
html[data-theme="light"] .home-stage .character-scene:hover .symbol-stream span{
  border-color:#75913d!important;color:#28301f!important;
}

/* ── 7. Home page – actions & buttons ────────────────────────── */
html[data-theme="light"] .primary,
html[data-theme="light"] .home-stage .hero-actions .play-button {
  background: #d5fa65 !important;
  border: 1px solid #e3ff80 !important;
  color: #18200f !important;
  box-shadow: 0 6px 0 #758c30, 0 10px 24px rgba(117, 140, 48, 0.3) !important;
}

html[data-theme="light"] .primary:hover,
html[data-theme="light"] .home-stage .hero-actions .play-button:hover {
  background: #d5fa65 !important;
  box-shadow: 0 9px 0 #758c30, 0 14px 30px rgba(117, 140, 48, 0.45) !important;
  transform: translateY(-3px) !important;
}

html[data-theme="light"] .primary:active,
html[data-theme="light"] .home-stage .hero-actions .play-button:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #758c30, 0 4px 10px rgba(117, 140, 48, 0.2) !important;
}
html[data-theme="light"] .home-stage .play-button span,
html[data-theme="light"] .home-stage .play-button .launch-label{color:#042617!important}
html[data-theme="light"] .home-stage .hero-actions .play-button .launch-key{
  background:#28351c!important;color:#d5fa65!important;
  border-color:#d5fa6544!important;box-shadow:0 3px 0 #17200f!important;
  transition:transform .22s cubic-bezier(0.34, 1.56, 0.64, 1)!important;
}
html[data-theme="light"] .home-stage .play-button:hover .launch-key{
  transform:translateY(-3px) scale(1.08) rotate(-10deg)!important;
  background:#1e2915!important;color:#efff99!important;
}
html[data-theme="light"] .home-stage .play-button span,
html[data-theme="light"] .home-stage .play-button .launch-label{color:#18200f!important}
html[data-theme="light"] .home-stage .hero-actions .play-button .launch-key{
  background:#3b4133!important;color:#e6eadd!important;
  border-color:#4c5540!important;box-shadow:0 3px 0 #24291d!important;
}
html[data-theme="light"] .scoreboard-button{
  background:#ffffff!important;border-color:#f3c4d3!important;color:#18200f!important;
  box-shadow:0 5px 0 #f7d6e0!important;
}
html[data-theme="light"] .scoreboard-button:hover{
  border-color:#ff863e!important;box-shadow:0 8px 0 #d8662d!important;
}
html[data-theme="light"] .scoreboard-button strong{color:#4c8bc0!important}
html[data-theme="light"] .scoreboard-button span,
html[data-theme="light"] .scoreboard-button i{color:#69705f!important}
html[data-theme="light"] .home-stage .how-button{color:#69705f!important}
html[data-theme="light"] .hero-meta span:nth-child(1){color:#397fac!important}
html[data-theme="light"] .hero-meta span:nth-child(2){color:#ca5c28!important}
html[data-theme="light"] .hero-meta span:nth-child(3){color:#587426!important}
html[data-theme="light"] .home-stage .orbit-label{color:#69705f!important}

/* ── 8. Home page – guide, footer, dialogs ──────────────────── */
html[data-theme="light"] .home-guide,html[data-theme="light"] footer{
  background:#FFF4F8!important;color:#18200f!important;border-color:#f7d6e0!important;
}
html[data-theme="light"] .instructions>div{border-color:#f7d6e0!important}
html[data-theme="light"] .instructions p,html[data-theme="light"] footer>span{color:#6f7666!important}
html[data-theme="light"] dialog{
  background:#ffffff!important;color:#18200f!important;border-color:#f3c4d3!important;
  box-shadow:0 12px 0 #f7d6e0,0 30px 90px #52604735!important;
}
html[data-theme="light"] dialog::backdrop{background:#fce4edcc!important}
html[data-theme="light"] .setting-row select{
  background:#FFF4F8!important;color:#18200f!important;border-color:#f3c4d3!important;
}

/* ── 9. Game page – base & layout ───────────────────────────── */
html[data-theme="light"] .game-page{
  background:#FFF4F8!important;color:#18200f!important;
  --calc-shell:#d7d9cb;--calc-edge:#858a77;--calc-rim:#ffffff;
  --screen-surface:#d5fa65;--screen-rim:#5d6651;--screen-line:#91ae48;
  --screen-copy:#243117;--screen-meta:#536c2e;--screen-accent:#ff863e;
  --module-surface:#ffffff;--module-border:#f7d6e0;--deck-surface:#fff8fa;
  --key-surface:#ffffff;--key-edge:#949985;--key-border:#ffffff;--key-copy:#333a2c;
}
html[data-theme="light"] .game-page .topbar,
html[data-theme="light"] .game-page .mobile-game-header{
  background:#FFF4F8!important;border-color:#f7d6e0!important;
}
html[data-theme="light"] .game-page .section-heading .eyebrow{color:#607830!important}
html[data-theme="light"] .game-page .section-heading h2{color:#18200f!important}
html[data-theme="light"] .game-page .section-heading h2 span{color:#6f7666!important}
html[data-theme="light"] .game-page .live-label{
  background:#ffffff!important;border-color:#f3c4d3!important;color:#5d6454!important;
}

/* ── 10. Game page – arena chrome ───────────────────────────── */
html[data-theme="light"] .game-page .arena-top,
html[data-theme="light"] .game-page .arena-bottom{color:#747c69!important;border-color:#f7d6e0!important}
html[data-theme="light"] .game-page .arena-top .tiny-cross{color:#6d8d2e!important}
html[data-theme="light"] .game-page .arena-top b{color:#397fac!important}
html[data-theme="light"] .game-page .arena-bottom kbd{
  background:#ffffff!important;border-color:#f3c4d3!important;color:#38412f!important;
}

/* ── 11. Game page – console ────────────────────────────────── */
html[data-theme="light"] .game-page .console{
  background:#d7d9cb!important;color:#333a2c!important;
  border:3px solid #ffffff!important;border-radius:24px;
  box-shadow:5px 6px 0 #858a77,10px 12px 0 #535747,15px 20px 0 #c8cec0,0 25px 45px #18200f18!important;
}
html[data-theme="light"] .game-page .character-top{color:#515748!important}
html[data-theme="light"] .game-page .character-top span:last-child{color:#607830!important}

/* ── 12. Game page – display (Neon Lime Screen #D5FA65) ──────── */
html[data-theme="light"] .game-page .display{
  background:#d5fa65!important;color:#243117!important;
  border:4px solid #5d6651!important;border-radius:11px;
  box-shadow:inset 3px 5px 0 #a4c348,0 6px 0 #858a7730,0 12px 24px #18200f15!important;
}
html[data-theme="light"] .game-page .display:before{background:#91ae48!important}
html[data-theme="light"] .game-page .display-top,
html[data-theme="light"] .game-page .display-bottom{color:#536c2e!important}
html[data-theme="light"] .game-page .question{color:#243117!important;text-shadow:none!important}
html[data-theme="light"] .game-page .question span{color:#647f37!important}
html[data-theme="light"] .game-page .answer-slot{color:#243117!important;text-shadow:none!important}
html[data-theme="light"] .game-page .input-caret{background:#243117!important;box-shadow:none!important}

/* ── 13. Game page – fuse & feedback ────────────────────────── */
html[data-theme="light"] .game-page .fuse-label{color:#596047!important}
html[data-theme="light"] .game-page .fuse-track{background:#aeb59e!important}
html[data-theme="light"] .game-page .fuse-track i{background:#526a31!important;box-shadow:none!important}
html[data-theme="light"] .game-page .question-fuse{background:transparent!important}
html[data-theme="light"] .game-page .feedback-row{background:transparent!important;color:#32451a!important}
html[data-theme="light"] .game-page #multiplier{
  background:#c9cebb!important;border-color:#a0ac89!important;color:#3e4f29!important;
}

/* ── 14. Game page – keypad (Hover changes to Lime Screen #D5FA65) ── */
html[data-theme="light"] .game-page .keypad{background:transparent!important}

/* Digit Keys (1 2 3 4 5 6 7 8 9 0 00) */
html[data-theme="light"] .game-page .keypad button[data-key="1"],
html[data-theme="light"] .game-page .keypad button[data-key="2"],
html[data-theme="light"] .game-page .keypad button[data-key="3"],
html[data-theme="light"] .game-page .keypad button[data-key="4"],
html[data-theme="light"] .game-page .keypad button[data-key="5"],
html[data-theme="light"] .game-page .keypad button[data-key="6"],
html[data-theme="light"] .game-page .keypad button[data-key="7"],
html[data-theme="light"] .game-page .keypad button[data-key="8"],
html[data-theme="light"] .game-page .keypad button[data-key="9"],
html[data-theme="light"] .game-page .keypad button[data-key="0"],
html[data-theme="light"] .game-page .keypad button[data-key="00"]{
  background:#ffffff!important;color:#333a2c!important;
  border-color:#ffffff!important;
  box-shadow:0 5px 0 #949985,0 7px 15px #666d5830,inset 0 1px 0 #fff!important;
  transition:background .15s ease, color .15s ease, border-color .15s ease!important;
}
/* Digit Button Hover -> Screen Color (#D5FA65 Lime) */
html[data-theme="light"] .game-page .keypad button[data-key="1"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="2"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="3"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="4"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="5"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="6"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="7"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="8"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="9"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="0"]:hover,
html[data-theme="light"] .game-page .keypad button[data-key="00"]:hover{
  background:#d5fa65!important;color:#18200f!important;border-color:#b9dd52!important;
  box-shadow:0 5px 0 #81973a,0 8px 16px #9cbd4840!important;
}

/* Clear key (C), Backspace (⌫), Sign (±) */
html[data-theme="light"] .game-page .keypad .clear-key,
html[data-theme="light"] .game-page .keypad button[data-key="Backspace"],
html[data-theme="light"] .game-page .keypad .utility,
html[data-theme="light"] .game-page .keypad .sign-key{
  background:#3b4133!important;color:#e6eadd!important;
  border-color:#4c5540!important;
  box-shadow:0 5px 0 #24291d,0 7px 15px #00000020!important;
  transition:background .15s ease, color .15s ease, border-color .15s ease!important;
}
/* Utility Buttons Hover -> Screen Color (#D5FA65 Lime) */
html[data-theme="light"] .game-page .keypad .clear-key:hover,
html[data-theme="light"] .game-page .keypad button[data-key="Backspace"]:hover,
html[data-theme="light"] .game-page .keypad .utility:hover,
html[data-theme="light"] .game-page .keypad .sign-key:hover{
  background:#d5fa65!important;color:#18200f!important;border-color:#b9dd52!important;
  box-shadow:0 5px 0 #81973a,0 8px 16px #9cbd4840!important;
}

/* Enter key (=): ARCADE ORANGE with Lime Hover */
html[data-theme="light"] .game-page .keypad .enter-key{
  background:#ff863e!important;color:#39200e!important;
  border-color:#ffae69!important;
  box-shadow:0 5px 0 #a45121,0 8px 18px #a4512128!important;
  transition:background .15s ease, color .15s ease, border-color .15s ease!important;
}
html[data-theme="light"] .game-page .keypad .enter-key:hover{
  background:#d5fa65!important;color:#18200f!important;border-color:#b9dd52!important;
  box-shadow:0 5px 0 #81973a,0 8px 18px #9cbd4840!important;
}

html[data-theme="light"] .game-page .keypad button:active,
html[data-theme="light"] .game-page .keypad button.pressed{
  transform:translateY(5px)!important;
  box-shadow:inset 0 3px 0 #efffc1,0 0 16px #9cbd4866!important;
  background:#d5fa65!important;color:#243117!important;
}

/* ── 15. Game page – reaction stage ─────────────────────────── */
html[data-theme="light"] .game-page .reaction-stage{color:#68862d!important}
html[data-theme="light"] .game-page .reaction-word{
  color:inherit;text-shadow:0 4px 0 #b7ca88,0 9px 20px #59604a26!important;
}
html[data-theme="light"] .game-page .reaction-detail{color:#6f7666!important}
html[data-theme="light"] .game-page .reaction-stage[data-kind=ready] .reaction-word{
  color:#7c8472!important;text-shadow:none!important;
}
html[data-theme="light"] .game-page .reaction-stage[data-kind=overdrive]{color:#d8662d!important}
html[data-theme="light"] .game-page .reaction-stage[data-kind=overdrive] .reaction-word{
  text-shadow:0 4px 0 #f0b38e,0 0 24px #ff863e45!important;
}
html[data-theme="light"] .game-page .reaction-stage[data-kind=miss]{color:#cf423a!important}

/* ── 16. Game page – meters & stats ─────────────────────────── */
html[data-theme="light"] .game-page .stat-label,
html[data-theme="light"] .game-page .stat-caption{color:#69705f!important}
html[data-theme="light"] .game-page .stat-value{color:#28301f!important;text-shadow:none!important}
html[data-theme="light"] .game-page .time-column .stat-value{color:#397fac!important}
html[data-theme="light"] .game-page .heat-column .stat-value{color:#d8662d!important}
html[data-theme="light"] .game-page .fire-icon{color:#ff863e!important}
html[data-theme="light"] .game-page .liquid-meter,
html[data-theme="light"] .game-page .mobile-meters .liquid-meter{
  background:#ffffff!important;border-color:#f3c4d3!important;
  box-shadow:inset 0 0 0 1px #f7d6e0,0 7px 16px #51604520!important;
}
html[data-theme="light"] .game-page .time-meter .liquid{background:#4ca9e8!important}
html[data-theme="light"] .game-page .heat-meter .liquid{background:#ff863e!important}
html[data-theme="light"] .game-page .wave{background:#ffffff!important}
html[data-theme="light"] .game-page .meter-number{color:#28301f!important;text-shadow:none!important}
html[data-theme="light"] .game-page .meter-footer{color:#626958!important}
html[data-theme="light"] .game-page .orange-dot{background:#ff863e!important}

/* ── 17. Game page – screen pet ─────────────────────────────── */
html[data-theme="light"] .game-page .screen-pet .pet-head,
html[data-theme="light"] .game-page .screen-pet .pet-ear,
html[data-theme="light"] .game-page .screen-pet .pet-hand{
  background:#28351c!important;border-color:#17200f!important;box-shadow:0 3px 0 #91ad4d!important;
}
html[data-theme="light"] .game-page .screen-pet .pet-eye,
html[data-theme="light"] .game-page .screen-pet .pet-mouth{
  color:#d5fa65!important;border-color:#d5fa65!important;background:#d5fa65!important;
}

/* ── 18. Game page – success / overdrive / miss states ──────── */
html[data-theme="light"] .game-page .game-layout:before,
html[data-theme="light"] .game-page .game-layout:after{background:#f7d6e0!important}
html[data-theme="light"] .game-page .success .game-layout:before,
html[data-theme="light"] .game-page .success .game-layout:after{
  background:#86a943!important;box-shadow:0 0 16px #86a94366!important;
}
html[data-theme="light"] .game-page .overdrive .game-layout:before,
html[data-theme="light"] .game-page .overdrive .game-layout:after{background:#ff863e!important}
html[data-theme="light"] .game-page .success .console{
  border-color:#9fbd55!important;
  box-shadow:5px 6px 0 #858a77,10px 12px 0 #535747,0 0 50px #a4c34845!important;
}
html[data-theme="light"] .game-page .success .display{
  border-color:#6f813e!important;
  box-shadow:inset 3px 5px 0 #a4c348,0 0 30px #a4c34838!important;
}
html[data-theme="light"] .game-page .overdrive .console{
  border-color:#ff9c60!important;
  box-shadow:5px 6px 0 #858a77,10px 12px 0 #535747,0 0 55px #ff863e42!important;
}
html[data-theme="light"] .game-page .overdrive .display{
  border-color:#8c613a!important;
  box-shadow:inset 3px 5px 0 #a4c348,0 0 34px #ff863e2e!important;
}
html[data-theme="light"] .game-page .overdrive .feedback-row{color:#9b410c!important}
html[data-theme="light"] .game-page .miss .display{
  background:#efc6ad!important;border-color:#a35542!important;
  box-shadow:inset 3px 5px 0 #d8a98c!important;
}
html[data-theme="light"] .game-page .miss .feedback-row{color:#962d22!important}
html[data-theme="light"] .game-page .urgent .fuse-track i{background:#c34b25!important}

/* ── 19. Result dialog ──────────────────────────────────────── */
html[data-theme="light"] .result-grave,
html[data-theme="light"] #resultDialog{
  background:#ffffff!important;color:#18200f!important;border-color:#f3c4d3!important;
  box-shadow:0 12px 0 #f7d6e0,0 28px 60px #52604735!important;
}
html[data-theme="light"] #resultDialog .grave-mark{
  background:#d7d9cb!important;border-color:#858a77!important;box-shadow:0 8px 0 #535747!important;
}
html[data-theme="light"] #resultDialog #replayButton,
html[data-theme="light"] #startButton{
  background:#d5fa65!important;color:#18200f!important;
  box-shadow:0 4px 0 #81973a!important;
}

/* ── 20. Theme transition wipe ──────────────────────────────── */
body.theme-to-light:after{background:#FFF4F8!important}

/* ── 21. MINIMAL LIGHT WHITE HOVERING CLOUDS (LIGHT MODE ONLY) ── */
/* ── 21. FLOATING CLOUDS: EXTREME LEFT TO EXTREME RIGHT (LIGHT MODE ONLY) ── */
html[data-theme="dark"] .light-cloud-container {
  display: none !important;
}

html[data-theme="light"] .light-cloud-container {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

html[data-theme="light"] .home.home-stage {
  background: transparent !important;
}

html[data-theme="light"] .light-cloud {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  background: #ffffff !important;
  border-radius: 50px !important;
  opacity: 0.82 !important;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.95), 0 4px 14px rgba(247, 214, 224, 0.45) !important;
  filter: drop-shadow(0 4px 10px rgba(245, 185, 205, 0.35)) !important;
  pointer-events: none !important;
  will-change: transform !important;
}

html[data-theme="light"] .light-cloud::before,
html[data-theme="light"] .light-cloud::after {
  content: "" !important;
  position: absolute !important;
  background: #ffffff !important;
  border-radius: 50% !important;
}

/* Cloud 1 - High Sky */
html[data-theme="light"] .cloud-1 {
  top: 8% !important;
  width: 135px !important;
  height: 40px !important;
  animation: cloudDriftExtreme 44s linear infinite -14s !important;
}
html[data-theme="light"] .cloud-1::before {
  width: 52px !important;
  height: 52px !important;
  top: -24px !important;
  left: 20px !important;
}
html[data-theme="light"] .cloud-1::after {
  width: 38px !important;
  height: 38px !important;
  top: -15px !important;
  left: 60px !important;
}

/* Cloud 2 - Upper Sky */
html[data-theme="light"] .cloud-2 {
  top: 22% !important;
  width: 195px !important;
  height: 52px !important;
  opacity: 0.72 !important;
  animation: cloudDriftExtreme 58s linear infinite -36s !important;
}
html[data-theme="light"] .cloud-2::before {
  width: 74px !important;
  height: 74px !important;
  top: -34px !important;
  left: 30px !important;
}
html[data-theme="light"] .cloud-2::after {
  width: 54px !important;
  height: 54px !important;
  top: -22px !important;
  left: 92px !important;
}

/* Cloud 3 - Mid-High Sky */
html[data-theme="light"] .cloud-3 {
  top: 38% !important;
  width: 110px !important;
  height: 35px !important;
  opacity: 0.85 !important;
  animation: cloudDriftExtreme 36s linear infinite -8s !important;
}
html[data-theme="light"] .cloud-3::before {
  width: 44px !important;
  height: 44px !important;
  top: -20px !important;
  left: 16px !important;
}
html[data-theme="light"] .cloud-3::after {
  width: 32px !important;
  height: 32px !important;
  top: -13px !important;
  left: 48px !important;
}

/* Cloud 4 - Mid-Low Sky */
html[data-theme="light"] .cloud-4 {
  top: 54% !important;
  width: 220px !important;
  height: 56px !important;
  opacity: 0.65 !important;
  animation: cloudDriftExtreme 68s linear infinite -52s !important;
}
html[data-theme="light"] .cloud-4::before {
  width: 82px !important;
  height: 82px !important;
  top: -38px !important;
  left: 36px !important;
}
html[data-theme="light"] .cloud-4::after {
  width: 60px !important;
  height: 60px !important;
  top: -25px !important;
  left: 105px !important;
}

/* Cloud 5 - Low Sky */
html[data-theme="light"] .cloud-5 {
  top: 70% !important;
  width: 165px !important;
  height: 46px !important;
  opacity: 0.78 !important;
  animation: cloudDriftExtreme 48s linear infinite -24s !important;
}
html[data-theme="light"] .cloud-5::before {
  width: 62px !important;
  height: 62px !important;
  top: -28px !important;
  left: 26px !important;
}
html[data-theme="light"] .cloud-5::after {
  width: 46px !important;
  height: 46px !important;
  top: -18px !important;
  left: 78px !important;
}

/* Cloud 6 - Bottom Sky */
html[data-theme="light"] .cloud-6 {
  top: 85% !important;
  width: 140px !important;
  height: 42px !important;
  opacity: 0.70 !important;
  animation: cloudDriftExtreme 52s linear infinite -40s !important;
}
html[data-theme="light"] .cloud-6::before {
  width: 54px !important;
  height: 54px !important;
  top: -25px !important;
  left: 22px !important;
}
html[data-theme="light"] .cloud-6::after {
  width: 40px !important;
  height: 40px !important;
  top: -16px !important;
  left: 66px !important;
}

/* Continuous Extreme Left to Extreme Right Drift */
@keyframes cloudDriftExtreme {
  0% {
    transform: translate3d(-280px, 0, 0);
  }
  100% {
    transform: translate3d(calc(100vw + 280px), 0, 0);
  }
}

html[data-theme="light"] .home-stage #heroScore strong { color: #b44732 !important; }

html[data-theme="light"] .game-page .game-overlay,
html[data-theme="light"] .game-page #gameOverlay {
  background: #fffaf3f5 !important;
  border-color: #d9cfc3 !important;
  color: #24211d !important;
}
html[data-theme="light"] .game-page .overlay-card h3 { color: #24211d !important; }
html[data-theme="light"] .game-page .overlay-card p { color: #696158 !important; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] .light-cloud {
    animation: none !important;
    display: none !important;
  }
}
body.reduced-motion .light-cloud {
  animation: none !important;
  display: none !important;
}

/* User-selected homepage blue pass: reference-inspired colors only. */
html[data-theme="light"] .home-stage .modern-calci-device {
  background: #d9f1ff !important;
  border-color: #ffffff !important;
  color: #07162d !important;
  box-shadow: 8px 8px 0 #8fb7d4, 17px 17px 0 #335f86, 25px 28px 0 #c8dff0, 0 25px 45px #193a6418 !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-inner-frame {
  background: #d9f1ff !important;
  border-color: #ffffff !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen {
  background: #c8edff !important;
  border-color: #1580c9 !important;
  color: #07162d !important;
  box-shadow: inset 3px 5px 0 #9bdfff, 0 4px 0 #78bde8 !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen-top,
html[data-theme="light"] .home-stage .modern-calci-device .calci-math,
html[data-theme="light"] .home-stage .modern-calci-device .calci-question-mark {
  display: none !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen::before,
html[data-theme="light"] .home-stage .modern-calci-device .calci-screen::after {
  content: "" !important;
  position: absolute !important;
  top: 48% !important;
  width: 13px !important;
  height: 20px !important;
  border-radius: 8px !important;
  background: #07162d !important;
  transform: translateY(-50%) !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen::before {
  left: 38% !important;
  box-shadow: 2px 0 0 #07162d !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen::after {
  right: 38% !important;
  box-shadow: 2px 0 0 #07162d !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen {
  position: relative !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen > * {
  position: relative !important;
  z-index: 1 !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen {
  overflow: hidden !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen .calci-face-mouth,
html[data-theme="light"] .home-stage .modern-calci-device .calci-screen .smile {
  display: none !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen {
  --face-mouth-color: #07162d;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen-top + .calci-math + .calci-question-mark + * {
  display: none !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:focus-within {
  outline: none !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen .face-only {
  display: none !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen + .calci-status-block {
  color: #173a5a !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen + .calci-status-block .calci-fuse-track {
  background: #a9d8f5 !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-fuse-fill {
  background: #1c99ed !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-multiplier {
  background: #e7f7ff !important;
  border-color: #69bcec !important;
  color: #0c4a78 !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .btn-key {
  background: #ffffff !important;
  border-color: #f8fbff !important;
  color: #07162d !important;
  box-shadow: 0 5px 0 #9bb6ca, 0 6px 1px #315a7a33 !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .key-dark,
html[data-theme="light"] .home-stage .modern-calci-device .key-pm,
html[data-theme="light"] .home-stage .modern-calci-device .key-c,
html[data-theme="light"] .home-stage .modern-calci-device .key-back {
  background: #17365f !important;
  border-color: #244c7f !important;
  color: #ffffff !important;
  box-shadow: 0 5px 0 #071e3a, 0 6px 1px #071e3a44 !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .key-accent-blue,
html[data-theme="light"] .home-stage .modern-calci-device .key-enter {
  background: #6ecaff !important;
  border-color: #b7ebff !important;
  color: #08213f !important;
  box-shadow: 0 5px 0 #2182c4, 0 6px 1px #2182c444 !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .key-enter {
  background: #43b8ff !important;
  color: #ffffff !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen::marker {
  color: transparent !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:after {
  box-shadow: 2px 0 0 #07162d, -28px 32px 0 -9px transparent !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen {
  isolation: isolate !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:before {
  z-index: 2 !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:after {
  z-index: 2 !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen .screen-smile {
  display: none !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen {
  background-image: none !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen .calci-status-row {
  color: #173a5a !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen::selection {
  background: transparent !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen > .screen-face-mouth {
  display: none !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen {
  --mouth-width: 36px;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen .calci-face {
  display: none !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:focus {
  outline: none !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen {
  clip-path: none !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen + .calci-status-block .status-name,
html[data-theme="light"] .home-stage .modern-calci-device .calci-screen + .calci-status-block .status-val {
  color: #173a5a !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen + .calci-status-block .calci-ready-row {
  color: #07162d !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen::before {
  content: "" !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen::after {
  content: "" !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen {
  border-width: 5px !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:before,
html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:after {
  pointer-events: none !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen {
  --screen-face: #07162d;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen .calci-face-mouth {
  border-color: var(--screen-face) !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen {
  box-shadow: inset 3px 5px 0 #9bdfff, 0 5px 0 #7cbddd !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen .calci-face-mouth:before {
  display: none !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen::before {
  margin-left: -28px !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen::after {
  margin-right: -28px !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen {
  display: block !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math)::before,
html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math)::after {
  top: 44% !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math)::after {
  right: calc(50% - 42px) !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math)::before {
  left: calc(50% - 42px) !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math) {
  min-height: 112px !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math)::selection {
  background: transparent !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math) {
  content-visibility: visible !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math) + .calci-status-block {
  margin-top: 14px !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math)::after {
  box-shadow: 2px 0 0 #07162d !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math)::before {
  box-shadow: 2px 0 0 #07162d !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math) {
  border-radius: 12px !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math)::selection {
  color: inherit !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math) {
  overflow: hidden !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math) .calci-screen-top,
html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math) .calci-math,
html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math) .calci-question-mark {
  visibility: hidden !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math)::before,
html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math)::after {
  visibility: visible !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math)::before {
  transform: translate(-50%, -50%) !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math)::after {
  transform: translate(50%, -50%) !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math) {
  position: relative !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math) .calci-question-mark {
  color: transparent !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-screen:has(.calci-math) .calci-question-mark::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 64% !important;
  width: 42px !important;
  height: 18px !important;
  border: 6px solid #07162d !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  transform: translateX(-50%) !important;
  visibility: visible !important;
}

html[data-theme="light"] .home-stage .tiny-calci,
html[data-theme="light"] .home-stage .tiny-calci-left,
html[data-theme="light"] .home-stage .tiny-calci-right,
html[data-theme="light"] .home-stage .tiny-calci-blue,
html[data-theme="light"] .home-stage .tiny-calci-pink {
  background: #d8f0ff !important;
  border-color: #ffffff !important;
  box-shadow: 5px 6px 0 #95bdd8, 10px 12px 0 #c7deee, 0 20px 34px #315a7a22 !important;
}

html[data-theme="light"] .home-stage .tiny-calci .tiny-calci-screen,
html[data-theme="light"] .home-stage .tiny-calci-left .tiny-calci-screen,
html[data-theme="light"] .home-stage .tiny-calci-right .tiny-calci-screen,
html[data-theme="light"] .home-stage .tiny-calci-blue .tiny-calci-screen,
html[data-theme="light"] .home-stage .tiny-calci-pink .tiny-calci-screen {
  background: #bde9ff !important;
  border-color: #2378ad !important;
  box-shadow: inset 2px 3px 0 #e5f8ff !important;
}

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

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

html[data-theme="light"] .home-stage .tiny-calci .tiny-calci-keys span,
html[data-theme="light"] .home-stage .tiny-calci-left .tiny-calci-keys span,
html[data-theme="light"] .home-stage .tiny-calci-right .tiny-calci-keys span,
html[data-theme="light"] .home-stage .tiny-calci-blue .tiny-calci-keys span,
html[data-theme="light"] .home-stage .tiny-calci-pink .tiny-calci-keys span {
  background: #ffffff !important;
  color: #0b2b4a !important;
  box-shadow: 0 2px 0 #9bb6ca !important;
}

html[data-theme="light"] .home-stage .tiny-calci .tiny-calci-keys span:last-child,
html[data-theme="light"] .home-stage .tiny-calci-left .tiny-calci-keys span:last-child,
html[data-theme="light"] .home-stage .tiny-calci-right .tiny-calci-keys span:last-child,
html[data-theme="light"] .home-stage .tiny-calci-blue .tiny-calci-keys span:last-child,
html[data-theme="light"] .home-stage .tiny-calci-pink .tiny-calci-keys span:last-child {
  background: #8fd8ff !important;
  color: #08213f !important;
  box-shadow: 0 2px 0 #2c84bd !important;
}

html[data-theme="light"] .home-stage .tiny-calci .tiny-calci-keys span:hover,
html[data-theme="light"] .home-stage .tiny-calci-left .tiny-calci-keys span:hover,
html[data-theme="light"] .home-stage .tiny-calci-right .tiny-calci-keys span:hover,
html[data-theme="light"] .home-stage .tiny-calci-blue .tiny-calci-keys span:hover,
html[data-theme="light"] .home-stage .tiny-calci-pink .tiny-calci-keys span:hover {
  background: #8fd8ff !important;
  color: #08213f !important;
  box-shadow: 0 2px 0 #2c84bd, 0 7px 14px #8fd8ff55 !important;
}

html[data-theme="light"] .home-stage .hero-actions .play-button {
  background: #e11d48 !important;
  border: 4px solid #000000 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .home-stage .hero-actions .play-button:hover {
  background: #be123c !important;
}

html[data-theme="light"] .home-stage .hero-actions .play-button .launch-label,
html[data-theme="light"] .home-stage .hero-actions .play-button .launch-arrow,
html[data-theme="light"] .home-stage .play-button span {
  color: #ffffff !important;
}

html[data-theme="light"] .arcade-nav .nav-play {
  background: #e11d48 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 0 #7f1029 !important;
}

html[data-theme="light"] .arcade-nav .nav-play:hover {
  background: #be123c !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-question-mark {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  left: 50% !important;
  top: 64% !important;
  width: 46px !important;
  height: 22px !important;
  color: transparent !important;
  transform: translateX(-50%) !important;
}

html[data-theme="light"] .home-stage .modern-calci-device .calci-question-mark::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 6px solid #07162d !important;
  border-top: 0 !important;
  border-radius: 0 0 22px 22px !important;
}

/* Reference blue palette for the current homepage center calculator only. */
html[data-theme="light"] .home-stage .character:not(.modern-calci-device) {
  background: #d9f1ff !important;
  border-color: #ffffff !important;
  box-shadow: 8px 8px 0 #8fb7d4, 17px 17px 0 #335f86, 25px 28px 0 #c8dff0, 0 25px 45px #193a6418 !important;
}

html[data-theme="light"] .home-stage .character:not(.modern-calci-device) .face {
  background: #c8edff !important;
  border-color: #1580c9 !important;
  box-shadow: inset 3px 5px 0 #9bdfff, 0 5px 0 #7cbddd !important;
}

html[data-theme="light"] .home-stage .character:not(.modern-calci-device) .eyes i {
  background: #07162d !important;
  box-shadow: 2px 0 #07162d !important;
}

html[data-theme="light"] .home-stage .character:not(.modern-calci-device) .smile {
  border-color: #07162d !important;
}

html[data-theme="light"] .home-stage .character:not(.modern-calci-device) .face-spark {
  color: #07162d !important;
  filter: grayscale(1) brightness(.32) !important;
  text-shadow: none !important;
}

html[data-theme="light"] .home-stage .character:not(.modern-calci-device) .character-keys i {
  background: #ffffff !important;
  border-color: #f8fbff !important;
  color: #07162d !important;
  box-shadow: 0 5px 0 #9bb6ca, 0 6px 1px #315a7a33 !important;
}

html[data-theme="light"] .home-stage .character:not(.modern-calci-device) .character-keys i:nth-child(4n),
html[data-theme="light"] .home-stage .character:not(.modern-calci-device) .character-keys i:nth-child(13) {
  background: #17365f !important;
  color: #ffffff !important;
  box-shadow: 0 5px 0 #071e3a, 0 6px 1px #071e3a44 !important;
}

html[data-theme="light"] .home-stage .character:not(.modern-calci-device) .character-keys i:nth-child(15) {
  background: #43b8ff !important;
  color: #ffffff !important;
  box-shadow: 0 5px 0 #2182c4, 0 6px 1px #2182c444 !important;
}

html[data-theme="light"] .home-stage .character:not(.modern-calci-device) .character-keys i:hover {
  background: #8fd8ff !important;
  border-color: #c7efff !important;
  color: #08213f !important;
  box-shadow: 0 5px 0 #2c84bd, 0 8px 16px #8fd8ff55 !important;
}

html[data-theme="light"] .home-stage .character:not(.modern-calci-device) .character-foot {
  background: #d9f1ff !important;
  box-shadow: 4px 6px 0 #8fb7d4 !important;
}

/* Full-width homepage field and faster-red floating number pads. */
html[data-theme="light"] .home.home-stage {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: clamp(18px, 4vw, 72px) !important;
  padding-right: clamp(18px, 4vw, 72px) !important;
}

html[data-theme="light"] .home-stage .character-scene {
  width: 100% !important;
  max-width: none !important;
}

html[data-theme="light"] .home-stage .symbol-stream {
  left: calc(50% - 50vw) !important;
  right: auto !important;
  width: 100% !important;
  min-width: 100vw !important;
  opacity: 1 !important;
}

html[data-theme="light"] .home-stage .symbol-stream span {
  background: #fff5f8 !important;
  border-color: #e11d48 !important;
  color: #e11d48 !important;
  box-shadow: 0 5px 0 #f7a8bb, 0 14px 26px #e11d4822 !important;
}

html[data-theme="light"] .home-stage .character-scene:hover .symbol-stream span {
  border-color: #be123c !important;
  color: #be123c !important;
  filter: saturate(1.1) !important;
}


/* Homepage footer removed. */
body:not(.game-page) > footer {
  display: none !important;
}

/* Modal actions: use brand red instead of lime. */
html[data-theme="light"] #howGotIt,
html[data-theme="light"] #navInfoDialog .primary,
html[data-theme="light"] #scoreboardDialog .primary,
html[data-theme="light"] .scoreboard-dialog .primary {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #07162d !important;
  box-shadow: 0 5px 0 #7f102b !important;
}

html[data-theme="light"] #howGotIt:hover,
html[data-theme="light"] #navInfoDialog .primary:hover,
html[data-theme="light"] #scoreboardDialog .primary:hover,
html[data-theme="light"] .scoreboard-dialog .primary:hover {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #07162d !important;
  box-shadow: 0 7px 0 #7f102b !important;
}

html[data-theme="light"] #howGotIt:active,
html[data-theme="light"] #navInfoDialog .primary:active,
html[data-theme="light"] #scoreboardDialog .primary:active,
html[data-theme="light"] .scoreboard-dialog .primary:active {
  transform: translateY(5px) !important;
  box-shadow: none !important;
}

/* Leaderboard trigger uses the same brand red as play actions. */
html[data-theme="light"] .scoreboard-button,
html[data-theme="light"] #scoreboardButton {
  background: #fff5f8 !important;
  color: #07162d !important;
  border-color: #e11d48 !important;
  box-shadow: 0 5px 0 #7f102b, 0 12px 24px #e11d4822 !important;
}

html[data-theme="light"] .scoreboard-button strong,
html[data-theme="light"] #scoreboardButton strong {
  color: #e11d48 !important;
}

html[data-theme="light"] .scoreboard-button span,
html[data-theme="light"] .scoreboard-button i,
html[data-theme="light"] #scoreboardButton span,
html[data-theme="light"] #scoreboardButton i {
  color: #07162d !important;
}

html[data-theme="light"] .scoreboard-button:hover,
html[data-theme="light"] #scoreboardButton:hover {
  background: #ffe4ec !important;
  border-color: #be123c !important;
  box-shadow: 0 7px 0 #7f102b, 0 15px 28px #e11d4828 !important;
}

html[data-theme="light"] .scoreboard-button:active,
html[data-theme="light"] #scoreboardButton:active {
  transform: translateY(5px) !important;
  box-shadow: 0 0 0 #7f102b !important;
}



/* Keep navbar Leaderboard identical to How to Play in light mode. */
html[data-theme="light"] .arcade-nav .nav-links #navBest,
html[data-theme="light"] .arcade-nav.menu-open .nav-links #navBest {
  appearance: none !important;
  background: transparent !important;
  color: var(--ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="light"] .arcade-nav .nav-links #navBest:hover,
html[data-theme="light"] .arcade-nav.menu-open .nav-links #navBest:hover,
html[data-theme="light"] .arcade-nav .nav-links #navBest:focus-visible,
html[data-theme="light"] .arcade-nav.menu-open .nav-links #navBest:focus-visible {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Home account leaderboard */
.home-leaderboard {
  width: min(92vw, 760px);
  margin: clamp(24px, 6vw, 72px) auto clamp(40px, 8vw, 90px);
}
.home-leaderboard-card {
  background: rgba(255, 255, 255, 0.78);
  border: 2px solid rgba(225, 29, 72, 0.18);
  border-radius: 28px;
  padding: clamp(18px, 4vw, 28px);
}
.home-leaderboard-card h2 {
  margin: 6px 0 18px;
  font: 900 clamp(28px, 5vw, 44px) var(--font-display, 'Outfit', sans-serif);
  color: #0f1b33;
  letter-spacing: -0.04em;
}
.home-leaderboard-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-leaderboard-list li {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(225, 29, 72, 0.16);
  border-radius: 18px;
  background: #fff8fb;
  color: #0f1b33;
  font: 800 14px var(--font-display, 'Outfit', sans-serif);
}
.home-leaderboard-list .home-lb-rank {
  color: #e11d48;
  font-family: var(--font-code, monospace);
}
.home-leaderboard-list .home-lb-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-leaderboard-list .home-lb-score {
  font-family: var(--font-code, monospace);
  font-size: 16px;
}
.home-leaderboard-list .home-lb-empty {
  grid-template-columns: 1fr;
  color: #9a6b7a;
  text-align: center;
}
@media (max-width: 759px) {
  .home-leaderboard { margin-bottom: 110px; }
  .home-leaderboard-card { border-radius: 22px; padding: 16px; }
  .home-leaderboard-list li { grid-template-columns: 34px 1fr auto; padding: 10px 12px; }
}

/* Full-width site footer below leaderboard. */
.site-footer {
  width: 100%;
  margin: clamp(22px, 5vw, 70px) 0 0;
  padding: clamp(34px, 6vw, 72px) clamp(24px, 6vw, 96px) 22px;
  background: #0f1b33;
  color: #ffffff;
  border-top: 3px solid rgba(225, 29, 72, 0.8);
}

.site-footer .footer-container {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) repeat(4, minmax(150px, 0.85fr));
  justify-content: space-between;
  gap: clamp(24px, 4vw, 76px);
  align-items: start;
}

.site-footer .footer-column {
  display: grid;
  gap: 14px;
  align-content: start;
}

.site-footer .brand {
  width: fit-content;
  color: #ffffff !important;
}

.site-footer .brand-icon.brand-logo {
  width: 42px !important;
  height: 42px !important;
}

.site-footer .brand-info p {
  max-width: 310px;
  margin: 4px 0 0;
  color: #c7d3e4;
  font: 700 15px/1.6 var(--font-display, 'Outfit', sans-serif);
}

.site-footer h4 {
  margin: 0;
  color: #7fd3f7;
  font: 900 12px var(--font-code, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a:not(.brand) {
  color: #ffffff;
  text-decoration: none;
  font: 800 15px/1.35 var(--font-display, 'Outfit', sans-serif);
  overflow-wrap: anywhere;
}

.site-footer a:not(.brand):hover {
  color: #7fd3f7;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer .footer-bottom {
  width: 100%;
  max-width: 1480px;
  margin: clamp(30px, 5vw, 58px) auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer .footer-bottom p {
  margin: 0;
  color: #9fb0c8;
  font: 800 12px var(--font-code, monospace);
  letter-spacing: 0.04em;
}

@media (max-width: 759px) {
  .site-footer {
    margin-top: 36px;
    padding: 34px 18px 24px;
  }

  .site-footer .footer-container {
    grid-template-columns: 1fr 1fr;
    justify-content: start;
    gap: 28px 22px;
  }

  .site-footer .brand-info {
    grid-column: 1 / -1;
  }

  .site-footer .footer-bottom {
    margin-top: 34px;
  }
}

@media (max-width: 430px) {
  .site-footer .footer-container {
    grid-template-columns: 1fr;
  }
}

/* Footer isolation: override old global footer rules. */
html[data-theme="light"] body:not(.game-page) > .site-footer,
body:not(.game-page) > .site-footer,
.site-footer {
  display: block !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: clamp(22px, 5vw, 70px) !important;
  margin-bottom: 0 !important;
  padding: clamp(38px, 6vw, 78px) clamp(28px, 6vw, 104px) max(46px, env(safe-area-inset-bottom)) !important;
  background: #0f1b33 !important;
  color: #ffffff !important;
  border-top: 3px solid #e11d48 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
}

.site-footer,
.site-footer * {
  font-family: var(--font-display, 'Outfit', sans-serif) !important;
}

.site-footer .footer-container,
.site-footer .footer-bottom {
  width: min(1480px, 100%) !important;
  max-width: 1480px !important;
}

.site-footer .footer-container {
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 1.45fr) repeat(4, minmax(150px, 0.85fr)) !important;
  justify-content: space-between !important;
  align-items: start !important;
}

.site-footer .brand,
.site-footer .brand span,
.site-footer h4,
.site-footer p,
.site-footer a,
.site-footer li,
.site-footer .footer-bottom p {
  color: inherit !important;
}

.site-footer h4 {
  color: #7fd3f7 !important;
  font-family: var(--font-code, monospace) !important;
}

.site-footer .brand-info p,
.site-footer .footer-bottom p {
  color: #c7d3e4 !important;
}

.site-footer a:not(.brand):hover {
  color: #7fd3f7 !important;
}

@media (max-width: 759px) {
  html[data-theme="light"] body:not(.game-page) > .site-footer,
  body:not(.game-page) > .site-footer,
  .site-footer {
    padding: 34px 18px max(42px, env(safe-area-inset-bottom)) !important;
  }

  .site-footer .footer-container {
    grid-template-columns: 1fr 1fr !important;
    justify-content: start !important;
    gap: 28px 22px !important;
  }
}

@media (max-width: 430px) {
  .site-footer .footer-container {
    grid-template-columns: 1fr !important;
  }
}

/* Compact mobile footer only. */
@media (max-width: 759px) {
  .site-footer .footer-container {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px 12px !important;
    align-items: start !important;
  }

  .site-footer .brand-info {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 10px 14px !important;
  }

  .site-footer .brand-info .brand {
    grid-column: 1 / -1 !important;
  }

  .site-footer .brand-info p {
    grid-column: 1 / -1 !important;
    max-width: none !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  .site-footer .footer-column:not(.brand-info) {
    gap: 7px !important;
  }

  .site-footer .footer-column:nth-child(2),
  .site-footer .footer-column:nth-child(3),
  .site-footer .footer-column:nth-child(4),
  .site-footer .footer-column:nth-child(5) {
    grid-column: span 2 !important;
  }

  .site-footer h4 {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }

  .site-footer ul {
    gap: 5px !important;
  }

  .site-footer a:not(.brand) {
    font-size: 12px !important;
    line-height: 1.18 !important;
  }

  .site-footer .footer-bottom {
    margin-top: 20px !important;
    padding-top: 12px !important;
  }

  .site-footer .footer-bottom p {
    font-size: 9px !important;
  }
}

@media (max-width: 430px) {
  .site-footer .footer-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .site-footer .footer-column:nth-child(2),
  .site-footer .footer-column:nth-child(3),
  .site-footer .footer-column:nth-child(4),
  .site-footer .footer-column:nth-child(5) {
    grid-column: span 1 !important;
  }

  .site-footer .footer-contact-column {
    grid-column: 1 / -1 !important;
  }
}