/* Shared themes for every page. theme.js sets data-theme (a palette), data-mode (light|dark, resolved)
   and data-holiday (a seasonal accent) on <html>. With no data-theme the page follows the OS setting,
   so it also works without JavaScript. Pages keep only layout and fonts; all colors come from here.
   `.sw[data-t=...]` lets the picker's swatches borrow each palette's variables. */

/* ---- base palettes ---- */
:root,.sw[data-t="light"]{
  --bg:#eef0ec; --surface:#f8f9f6; --ink:#1e2522; --muted:#5c6862; --line:#cfd5cf;
  --stone1:#9aa49e; --stone2:#7d8882; --stone3:#b6bdb6; --accent:#c9861a; --accent-ink:#7a4d05;
  --print:#fdfdfb; --print-edge:#d9ddd7; --note:#f6dc6b; --note-ink:#3d3407;
  --warn:#8a3b12; --live:#2f7a4a; color-scheme:light;
  --focus:var(--accent-ink)}   /* focus ring: --accent is under 3:1 on the light background, --accent-ink is not */
:root[data-theme="dark"],.sw[data-t="dark"]{
  --bg:#151a18; --surface:#1d2321; --ink:#e7ebe7; --muted:#9ba69f; --line:#2f3733;
  --stone1:#5d6862; --stone2:#47514c; --stone3:#77827b; --accent:#e9a43c; --accent-ink:#f2c47a;
  --print:#e9ebe6; --print-edge:#3a433e; --note:#e8cc55; --note-ink:#2e2704;
  --warn:#f0a27a; --live:#7fcf9a; color-scheme:dark; --focus:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:#151a18; --surface:#1d2321; --ink:#e7ebe7; --muted:#9ba69f; --line:#2f3733;
  --stone1:#5d6862; --stone2:#47514c; --stone3:#77827b; --accent:#e9a43c; --accent-ink:#f2c47a;
  --print:#e9ebe6; --print-edge:#3a433e; --note:#e8cc55; --note-ink:#2e2704;
  --warn:#f0a27a; --live:#7fcf9a; color-scheme:dark; --focus:var(--accent)}}

/* ---- fun themes ---- */
:root[data-theme="sunset"],.sw[data-t="sunset"]{
  --bg:#2a1620; --surface:#381d2a; --ink:#fbe9dc; --muted:#d1a9a0; --line:#5a3040;
  --stone1:#7a4458; --stone2:#5e3347; --stone3:#a0687a; --accent:#ff8a5b; --accent-ink:#ffb48a;
  --print:#fdeee0; --print-edge:#5a3040; --note:#ffc46b; --note-ink:#3a1d05;
  --warn:#ffab8a; --live:#8be0a8; color-scheme:dark}
:root[data-theme="terminal"],.sw[data-t="terminal"]{
  --bg:#050a05; --surface:#0b140b; --ink:#6cf27a; --muted:#43b356; --line:#1d3a1f;
  --stone1:#1f6b2c; --stone2:#14451d; --stone3:#2f9a41; --accent:#ffb000; --accent-ink:#ffc640;
  --print:#cfe9d0; --print-edge:#1d3a1f; --note:#ffe46b; --note-ink:#2b2400;
  --warn:#ff9a6b; --live:#6cf27a;
  --display:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --body:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; color-scheme:dark}
:root[data-theme="synthwave"],.sw[data-t="synthwave"]{
  --bg:#140a2e; --surface:#1e1145; --ink:#f4e9ff; --muted:#b9a6e0; --line:#3d2a7a;
  --stone1:#4a2f8f; --stone2:#3a2575; --stone3:#7a56d6; --accent:#ff3ea5; --accent-ink:#ff7ac6;
  --print:#f1e6ff; --print-edge:#3d2a7a; --note:#2de2e6; --note-ink:#06242a;
  --warn:#ff9e7a; --live:#5cffb1; color-scheme:dark}
:root[data-theme="blueprint"],.sw[data-t="blueprint"]{
  --bg:#1b4f9c; --surface:#174487; --ink:#eaf3ff; --muted:#c4dbfa; --line:#6f9bd8;
  --stone1:#4f7fc4; --stone2:#3a67a8; --stone3:#7da4e0; --accent:#ffe066; --accent-ink:#ffe680;
  --print:#f3f8ff; --print-edge:#6f9bd8; --note:#ffe066; --note-ink:#2a2400;
  --warn:#ffc2ad; --live:#9cf2c0;
  --display:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; color-scheme:dark}
:root[data-theme="gameboy"],.sw[data-t="gameboy"]{
  --bg:#9bbc0f; --surface:#8bac0f; --ink:#0f380f; --muted:#14381a; --line:#306230;
  --stone1:#6f9a14; --stone2:#306230; --stone3:#7da413; --accent:#2a5a2a; --accent-ink:#0f380f;
  --print:#c4d86a; --print-edge:#306230; --note:#0f380f; --note-ink:#9bbc0f;
  --warn:#5c2d0c; --live:#0f380f;
  --display:"Pixelify Sans","JetBrains Mono",ui-monospace,monospace; color-scheme:light}
:root[data-theme="bubblegum"],.sw[data-t="bubblegum"]{
  --bg:#fff0f6; --surface:#ffffff; --ink:#3b1f3a; --muted:#7a4f78; --line:#f5bfd9;
  --stone1:#f4a6c8; --stone2:#e58bb5; --stone3:#fbc5dd; --accent:#e0307a; --accent-ink:#b0185f;
  --print:#ffffff; --print-edge:#f5bfd9; --note:#9be7ff; --note-ink:#05303d;
  --warn:#b0381f; --live:#14804a; color-scheme:light}
:root[data-theme="ocean"],.sw[data-t="ocean"]{
  --bg:#07222b; --surface:#0c3039; --ink:#e3f6f8; --muted:#8fc4cc; --line:#17505c;
  --stone1:#1d6a78; --stone2:#145262; --stone3:#2f8e9e; --accent:#f6c85f; --accent-ink:#f9d98a;
  --print:#e8f6f7; --print-edge:#17505c; --note:#ff9f8a; --note-ink:#3a0f05;
  --warn:#ffab8f; --live:#6fe3b2; color-scheme:dark}
:root[data-theme="sepia"],.sw[data-t="sepia"]{
  --bg:#f4ecd8; --surface:#fbf5e6; --ink:#3b2f22; --muted:#6e5d49; --line:#d9cbaa;
  --stone1:#b9a683; --stone2:#9c8860; --stone3:#cdbd9b; --accent:#b5532a; --accent-ink:#8a3b17;
  --print:#fffdf6; --print-edge:#d9cbaa; --note:#f6dc6b; --note-ink:#3d3407;
  --warn:#8a3b12; --live:#2f7a4a;
  --body:Georgia,"Iowan Old Style","Palatino Linotype",serif; color-scheme:light}
:root[data-theme="contrast"],.sw[data-t="contrast"]{
  --bg:#000000; --surface:#0a0a0a; --ink:#ffffff; --muted:#e0e0e0; --line:#ffffff;
  --stone1:#888888; --stone2:#666666; --stone3:#aaaaaa; --accent:#ffd400; --accent-ink:#ffd400;
  --print:#ffffff; --print-edge:#ffffff; --note:#ffd400; --note-ink:#000000;
  --warn:#ff9a6b; --live:#5cff8a; color-scheme:dark}

/* hidden: unlocked with the Konami code */
/* Quest: deep indigo and parchment, gold trim, stars overhead (id stays "arcade") */
:root[data-theme="arcade"],.sw[data-t="arcade"]{
  --bg:#120d1f; --surface:#1d1530; --ink:#f4e8d0; --muted:#c9b8e8; --line:#5a4478;
  --stone1:#6b5aa8; --stone2:#7a4b24; --stone3:#b08a4a; --accent:#f0b429; --accent-ink:#f6c85f;
  --print:#f4e8d0; --print-edge:#5a4478; --note:#f0b429; --note-ink:#1c1410;
  --warn:#ffab8a; --live:#6fe3b2;
  --display:"Pixelify Sans","JetBrains Mono",ui-monospace,monospace; color-scheme:dark}

/* ---- theme extras ---- */
:root[data-theme="terminal"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px)}
:root[data-theme="terminal"] h1,:root[data-theme="terminal"] h2{text-shadow:0 0 12px color-mix(in srgb,var(--ink) 45%,transparent)}
:root[data-theme="terminal"] h1 em{text-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent)}
:root[data-theme="synthwave"] h1 em{text-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent)}
:root[data-theme="synthwave"] header{background:linear-gradient(to bottom,transparent 35%,color-mix(in srgb,var(--accent) 14%,transparent) 85%,transparent)}
:root[data-theme="blueprint"] body{background-image:
  linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:24px 24px;background-attachment:fixed}
:root[data-theme="gameboy"] :is(.btn,.link,.card,.visual,.card-visual,.tags li,.chip,.prompt,.print){border-radius:2px}
:root[data-theme="gameboy"] h1,:root[data-theme="gameboy"] h2{letter-spacing:.01em}
:root[data-theme="arcade"] body{background-image:radial-gradient(circle,rgba(244,232,208,.34) 1px,transparent 1.6px),radial-gradient(circle,rgba(244,232,208,.2) 1px,transparent 1.5px);background-size:97px 97px,61px 61px;background-position:0 0,31px 17px;background-attachment:fixed}
:root[data-theme="arcade"] h1 em{text-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%,transparent)}
:root[data-theme="arcade"] :is(.card,.visual,.card-visual,.prompt,.print){border-color:var(--line)}
:root[data-theme="arcade"] :is(.btn,.link,.card,.visual,.card-visual,.tags li,.chip,.prompt,.print){border-radius:2px}
/* wide fonts: keep the long name on one line without overflowing small screens */
:root:is([data-theme="arcade"],[data-theme="gameboy"],[data-theme="blueprint"],[data-theme="terminal"]) h1{font-size:clamp(24px,6.2vw,64px);overflow-wrap:anywhere}
:root[data-theme="contrast"] :is(a,button):focus-visible{outline-width:3px}
:root[data-theme="contrast"] .card,:root[data-theme="contrast"] .visual{border-color:var(--ink)}

/* ---- holidays: tint the accent on top of Auto / Light / Dark ---- */
:root[data-holiday]{--accent:var(--hl);--accent-ink:var(--hl-ink)}
:root[data-holiday][data-mode="dark"]{--accent:var(--hl-d);--accent-ink:var(--hl-ink-d)}
:root[data-holiday="newyear"]{--hl:#a37400;--hl-ink:#7a5a00;--hl-d:#f5c542;--hl-ink-d:#ffe08a;--hl2:#9aa3ad}
:root[data-holiday="lunar"]{--hl:#c4161c;--hl-ink:#8f0f13;--hl-d:#ff5a4f;--hl-ink-d:#ff9a92;--hl2:#f5c542}
:root[data-holiday="valentine"]{--hl:#d6336c;--hl-ink:#a01848;--hl-d:#ff6b9d;--hl-ink-d:#ff9fc0;--hl2:#ff9fc0}
:root[data-holiday="pi"]{--hl:#6c4ccf;--hl-ink:#4a2fa8;--hl-d:#a58bff;--hl-ink-d:#c6b6ff;--hl2:#f5c542}
:root[data-holiday="stpatrick"]{--hl:#1f8a43;--hl-ink:#14602d;--hl-d:#4ade80;--hl-ink-d:#86efac;--hl2:#f5c542}
:root[data-holiday="easter"]{--hl:#7e57c2;--hl-ink:#5a3a9a;--hl-d:#b39ddb;--hl-ink-d:#d1c4e9;--hl2:#f6b8d0}
:root[data-holiday="earth"]{--hl:#1f8a5b;--hl-ink:#14684a;--hl-d:#4ad8a0;--hl-ink-d:#8ff0c8;--hl2:#2b7de9}
:root[data-holiday="maythe4"]{--hl:#2563eb;--hl-ink:#1d4ed8;--hl-d:#60a5fa;--hl-ink-d:#93c5fd;--hl2:#f5c542}
:root[data-holiday="pride"]{--hl:#b01fa0;--hl-ink:#8a1280;--hl-d:#e879d8;--hl-ink-d:#f3a8e8;--hl2:#ff8c00}
:root[data-holiday="july4"]{--hl:#c8102e;--hl-ink:#9a0b22;--hl-d:#ff5d73;--hl-ink-d:#ff9aa8;--hl2:#1f4fbf}
:root[data-holiday="halloween"]{--hl:#d9630b;--hl-ink:#8a3a00;--hl-d:#ff8a1f;--hl-ink-d:#ffb35c;--hl2:#7c3aed}
:root[data-holiday="diwali"]{--hl:#b36d00;--hl-ink:#8a4f00;--hl-d:#ffb020;--hl-ink-d:#ffd27a;--hl2:#d6336c}
:root[data-holiday="thanksgiving"]{--hl:#b5541c;--hl-ink:#8a3b0f;--hl-d:#f0913f;--hl-ink-d:#ffbf85;--hl2:#8a5a2b}
:root[data-holiday="hanukkah"]{--hl:#1e6fd9;--hl-ink:#134aa1;--hl-d:#6aa8ff;--hl-ink-d:#a9ccff;--hl2:#cfd8e6}
:root[data-holiday="christmas"]{--hl:#c0392b;--hl-ink:#8f2318;--hl-d:#ff6b5b;--hl-ink-d:#ff9d92;--hl2:#1f8a43}
:root[data-holiday] body::before{content:"";position:fixed;inset:0 0 auto 0;height:3px;z-index:50;pointer-events:none;
  background:linear-gradient(90deg,var(--hl),var(--hl2),var(--hl))}

:root[data-holiday="pride"] body::before{background:linear-gradient(90deg,#e40303,#ff8c00,#ffed00,#008026,#004dff,#750787)}
:root[data-holiday="pride"] h1 em{background:linear-gradient(90deg,#e40303,#ff8c00,#d9b800,#008026,#004dff,#750787);-webkit-background-clip:text;background-clip:text;color:transparent}

/* falling / rising holiday emoji */
.hfx{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.hfx span{position:absolute;top:0;left:var(--x);font-size:var(--s);opacity:.75;line-height:1;
  animation:hfall var(--t) linear var(--dl,0s) infinite;will-change:transform}
.hfx.rise span{top:auto;bottom:0;animation-name:hrise}
@keyframes hfall{from{transform:translate3d(0,-10vh,0) rotate(0)}to{transform:translate3d(var(--dx),110vh,0) rotate(var(--r))}}
@keyframes hrise{from{transform:translate3d(0,10vh,0) rotate(0)}to{transform:translate3d(var(--dx),-110vh,0) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.hfx{display:none}}

.ts-toast{position:fixed;left:50%;bottom:24px;z-index:70;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:10px 16px;
  border:1px solid var(--accent);border-radius:999px;background:var(--surface);color:var(--ink);font:13px/1.4 var(--mono,monospace);text-align:center;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6);animation:ts-toast 4.2s ease forwards}
@keyframes ts-toast{0%{opacity:0;transform:translate(-50%,10px)}8%,88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.ts-toast{animation:none}}

/* ---- Konami: themes-panel button + on-screen NES-style pad (sizes in cqw so it scales with its width) ---- */
.ts-konami{display:grid;place-items:center;width:36px;height:36px;margin:14px 0 0;padding:0;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.ts-konami:hover{background:var(--bg)}
.ts-konami svg{width:20px;height:20px;flex:none;display:block}
.nes-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(8,10,9,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.nes-modal[hidden]{display:none}
.nes-card{position:relative;box-sizing:border-box;width:min(460px,100%);max-height:100%;overflow:auto;padding:22px 20px 18px;border:1px solid var(--line);border-radius:18px;
  background:var(--surface);color:var(--ink);box-shadow:0 30px 70px -30px rgba(0,0,0,.6);text-align:center;font:15px/1.5 var(--body,system-ui,sans-serif);
  text-transform:none;letter-spacing:normal}
.nes-card:focus{outline:none}
.nes-card h2{margin:0 0 4px;font:400 24px/1.2 var(--display,Georgia,serif)}
.nes-card p{margin:0 0 16px;color:var(--muted);font-size:14px}
.nes-x{position:absolute;top:10px;right:12px;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.nes-x:hover{color:var(--ink);background:var(--bg)}

/* the controller body: light grey shell, dark face plate, a lighter centre strip for SELECT/START, black wells for B and A */
.nes{container-type:inline-size;position:relative;box-sizing:border-box;width:100%;aspect-ratio:5/2;border-radius:10px/14px;
  background:linear-gradient(180deg,#e2e2dc,#c6c6c0);border:2px solid #86867f;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -5px 0 rgba(0,0,0,.14),0 14px 22px -12px rgba(0,0,0,.6)}
.nes>*{position:absolute}
.nes-panel{left:3cqw;top:3.5cqw;width:94cqw;height:30.5cqw;border-radius:1.4cqw;background:linear-gradient(180deg,#323235,#232325);
  box-shadow:inset 0 .4cqw 0 rgba(255,255,255,.08),inset 0 0 0 .5cqw #151516,0 .4cqw 0 rgba(255,255,255,.35)}
.nes-mid{left:31cqw;top:6cqw;width:29cqw;height:25.5cqw;border-radius:1cqw;background:#c9c9c3;
  box-shadow:inset 0 .4cqw .8cqw rgba(0,0,0,.35),inset 0 -.3cqw 0 rgba(255,255,255,.5)}
.nes-mid::before{content:"";position:absolute;left:2cqw;right:2cqw;top:2.2cqw;height:5.6cqw;
  background:repeating-linear-gradient(180deg,#2b2b2d 0 .9cqw,transparent .9cqw 2.35cqw)}
.nes-well{top:9.5cqw;width:14cqw;height:16cqw;border-radius:2cqw;background:#111113;box-shadow:inset 0 .3cqw .6cqw rgba(0,0,0,.8),0 .2cqw 0 rgba(255,255,255,.08)}
.nes-well-b{left:63cqw}.nes-well-a{left:79cqw}
.nes-logo{left:0;right:0;top:35.2cqw;text-align:center;font:italic 800 2.3cqw/1 var(--body,system-ui,sans-serif);letter-spacing:.06em;color:#c62828;pointer-events:none}

/* buttons: hover and press are painted as colour overlays (--lt / --dk) rather than filters or per-arm transforms, so nothing shifts off its pixel grid */
.nes button{--lt:0;--dk:0;position:absolute;padding:0;border:0;cursor:pointer;transition:box-shadow .08s ease-out,transform .08s ease-out;-webkit-tap-highlight-color:transparent}
.nes button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(rgba(255,255,255,var(--lt)),rgba(255,255,255,var(--lt))),linear-gradient(rgba(0,0,0,var(--dk)),rgba(0,0,0,var(--dk)));pointer-events:none}
.nes-ss::after,.nes-ab::after{content:"";position:absolute;inset:-1.4cqw}   /* generous hit area */
.nes button:focus-visible{outline:2px solid #ffe600;outline-offset:2px}
@media (hover:hover){.nes button:hover{--lt:.12}}
.nes button:active,.nes button.on{--lt:0;--dk:.22}

/* d-pad: four arms around a fixed centre, bevelled with inset shadows */
.dp{width:7.5cqw;height:7.5cqw;background:#121214}
.dp-u{left:13.25cqw;top:8.75cqw;border-radius:1.2cqw 1.2cqw 0 0;box-shadow:inset 0 .35cqw 0 rgba(255,255,255,.14),inset .35cqw 0 0 rgba(255,255,255,.06),inset -.35cqw 0 0 rgba(0,0,0,.5)}
.dp-d{left:13.25cqw;top:23.75cqw;border-radius:0 0 1.2cqw 1.2cqw;box-shadow:inset 0 -.45cqw 0 rgba(0,0,0,.6),inset .35cqw 0 0 rgba(255,255,255,.06),inset -.35cqw 0 0 rgba(0,0,0,.5)}
.dp-l{left:5.75cqw;top:16.25cqw;border-radius:1.2cqw 0 0 1.2cqw;box-shadow:inset 0 .35cqw 0 rgba(255,255,255,.14),inset .35cqw 0 0 rgba(255,255,255,.06),inset 0 -.35cqw 0 rgba(0,0,0,.6)}
.dp-r{left:20.75cqw;top:16.25cqw;border-radius:0 1.2cqw 1.2cqw 0;box-shadow:inset 0 .35cqw 0 rgba(255,255,255,.14),inset -.35cqw 0 0 rgba(0,0,0,.5),inset 0 -.35cqw 0 rgba(0,0,0,.6)}
.dp-c{left:13.25cqw;top:16.25cqw;width:7.5cqw;height:7.5cqw;background:#121214;pointer-events:none}
.dp-c::after{content:"";position:absolute;inset:1.9cqw;border-radius:50%;background:radial-gradient(circle at 40% 35%,#2a2a2d,#050506 70%);box-shadow:inset 0 .2cqw .3cqw rgba(0,0,0,.9),0 .15cqw 0 rgba(255,255,255,.1)}
.dp i{position:absolute;left:50%;top:50%;width:0;height:0;border:solid transparent;transform:translate(-50%,-50%);pointer-events:none}
.dp-u i{border-width:0 1.1cqw 1.6cqw;border-bottom-color:#47474b}.dp-d i{border-width:1.6cqw 1.1cqw 0;border-top-color:#47474b}
.dp-l i{border-width:1.1cqw 1.6cqw 1.1cqw 0;border-right-color:#47474b}.dp-r i{border-width:1.1cqw 0 1.1cqw 1.6cqw;border-left-color:#47474b}
.dp:active,.dp.on{--dk:.35}

/* SELECT / START pills */
.nes-ss{top:16.8cqw;width:10cqw;height:4.6cqw;border-radius:2.3cqw;background:linear-gradient(180deg,#8a8a84,#5f5f5a);
  box-shadow:0 .5cqw 0 #2d2d2b,inset 0 .3cqw 0 rgba(255,255,255,.25)}
.nes-sel{left:34cqw}.nes-start{left:47cqw}
.nes-ss:active,.nes-ss.on{transform:translateY(.4cqw);box-shadow:0 .1cqw 0 #2d2d2b,inset 0 .3cqw 0 rgba(255,255,255,.15)}

/* B / A: domed red buttons sitting in their wells */
.nes-ab{top:11.5cqw;width:10cqw;height:10cqw;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#ff8a7e,#e0352c 50%,#9c1a15 100%);
  box-shadow:0 .8cqw 0 #5a0f0c,0 1cqw 1.2cqw rgba(0,0,0,.6),inset 0 .25cqw .4cqw rgba(255,255,255,.35)}
.nes-b{left:65cqw}.nes-a{left:81cqw}
.nes-ab:active,.nes-ab.on{transform:translateY(.6cqw);box-shadow:0 .2cqw 0 #5a0f0c,0 .3cqw .5cqw rgba(0,0,0,.5),inset 0 .25cqw .4cqw rgba(255,255,255,.25)}

.nes-lab{top:27.4cqw;transform:translateX(-50%);font:800 2.2cqw/1 var(--mono,monospace);letter-spacing:.14em;color:#d9362c;pointer-events:none}
.nes.bad{animation:nes-bad .35s}
@keyframes nes-bad{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.nes-dots{display:flex;gap:7px;justify-content:center;margin:16px 0 6px}
.nes-dots i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--muted);box-sizing:border-box;transition:background .15s}
.nes-dots i.on{background:var(--accent);border-color:var(--accent)}
.nes-card .nes-status{margin:0 0 8px;font:12px var(--mono,monospace)}
.nes-hint{padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.nes-hint:hover{color:var(--ink)}
.nes-card .nes-code{margin:0;font:600 17px var(--mono,monospace);color:var(--ink);letter-spacing:.06em}
.nes-code[hidden],.nes-hint[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.nes.bad{animation:none}.nes button{transition:none}}

/* pixel-sprite rain and the LEVEL UP banner */
.hfx.px{z-index:72}
.hfx.px span{font-size:0;line-height:0;opacity:1}
.hfx .spr svg{display:block;width:var(--s);height:auto;image-rendering:pixelated}
.hfx .spin svg{animation:coin-spin .7s steps(6) infinite}
@keyframes coin-spin{0%{transform:scaleX(1)}50%{transform:scaleX(.12)}100%{transform:scaleX(1)}}
.lvl{position:fixed;left:50%;top:38%;z-index:75;transform:translate(-50%,-50%);pointer-events:none;text-align:center;white-space:nowrap;
  font-family:"Pixelify Sans","JetBrains Mono",ui-monospace,monospace;animation:lvl 3.1s linear forwards;
  padding:.3em .7em .45em;background:rgba(18,13,31,.92);box-shadow:0 0 0 3px #7a4b24,0 0 0 6px #120d1f,0 20px 50px -10px rgba(0,0,0,.7)}
.lvl b{display:block;font-size:clamp(26px,8.6vw,72px);line-height:1;font-weight:700;color:#f0b429;letter-spacing:.04em;
  text-shadow:.06em .06em 0 #5a4478,-.03em 0 0 #5a4478,.03em -.03em 0 #5a4478}
.lvl .lu{margin-top:.14em;font-size:1.3em;letter-spacing:.1em;color:#f4e8d0}
.lvl span{display:block;margin-top:.7em;font-size:clamp(11px,3vw,18px);letter-spacing:.3em;color:#f4e8d0;text-shadow:2px 2px 0 #5a4478}
@keyframes lvl{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}20%{transform:translate(-50%,-50%) scale(1)}
  30%,50%,70%{opacity:1}40%,60%{opacity:.25}85%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) scale(1)}}
@media (prefers-reduced-motion:reduce){.lvl{animation:none}.hfx .spin svg{animation:none}}

/* smooth color change, only while switching */
html.theme-anim,html.theme-anim *{transition:background-color .25s,color .25s,border-color .25s,fill .25s!important}

/* ---- picker ---- */
.nav-r{display:flex;align-items:center;gap:10px}
.ts-li{list-style:none;display:flex;align-items:center}
.theme-switch{position:relative;display:inline-block}
.ts-btn{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer}
.ts-btn:hover{background:var(--surface)}
.ts-btn svg{width:18px;height:18px;display:block}
.ts-link{padding:0;border:0;background:none;color:var(--ink);font:inherit;letter-spacing:inherit;cursor:pointer}
.ts-link:hover,.ts-link[aria-expanded="true"]{text-decoration:underline;text-decoration-color:var(--accent)}
.ts-panel{position:absolute;right:0;bottom:calc(100% + 10px);z-index:40;width:min(312px,calc(100vw - 32px));padding:14px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.45);font:14px/1.4 var(--body,system-ui,sans-serif);text-align:left;text-transform:none;letter-spacing:normal}
.ts-panel[hidden]{display:none}
.ts-h{margin:0 0 8px;font:500 11px var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ts-h:not(:first-child){margin-top:14px}
.ts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ts-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px 7px;border:1px solid var(--line);border-radius:10px;
  background:transparent;color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.ts-opt[hidden]{display:none}
.ts-opt:hover{border-color:var(--muted)}
.ts-opt[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.sw{position:relative;display:flex;width:44px;height:26px;border-radius:7px;overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.sw i{flex:1;background:var(--bg)}
.sw::before{content:"";position:absolute;left:5px;bottom:5px;width:11px;height:11px;border-radius:50%;background:var(--accent)}
.sw::after{content:"";position:absolute;right:5px;top:6px;width:16px;height:3px;border-radius:2px;background:var(--ink);
  box-shadow:0 5px 0 -0px var(--muted)}
.sw-auto::before,.sw-auto::after{display:none}
.sw-auto i:first-child{background:#eef0ec}.sw-auto i:last-child{background:#151a18}
.ts-hol{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);cursor:pointer}
.ts-hol input{margin:2px 0 0;accent-color:var(--accent)}
.ts-hol small{display:block;color:var(--muted);font-size:12px}
@media (prefers-reduced-motion:reduce){html.theme-anim,html.theme-anim *{transition:none!important}}

/* ---- small shared polish ---- */
::selection{background:color-mix(in srgb,var(--accent) 38%,transparent);color:var(--ink)}
/* pages crossfade into each other on browsers that support cross-document view transitions */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}}