/* Color themes. Switch with <html data-theme="...">; no attribute = Classic (defaults in style.css). */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Monoton&family=Press+Start+2P&family=VT323&family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap');

/* NES: 8-bit console palette, pixel font, hard pixel shadows, square corners */
html[data-theme="nes"]{
  --bg:#0f0f23; --panel:#1b1b3a; --panel2:#26264d; --line:#5c5c9c;
  --text:#fcfcfc; --muted:#a4a4e0; --soft:#e4e4ff;
  --accent:#f83800; --accent-rgb:248 56 0; --on-accent:#fff; --star:#fcd838;
  --bg-rgb:15 15 35; --hero-op:.25;
  --radius:0px;
}
html[data-theme="nes"] *{border-radius:0 !important}
html[data-theme="nes"] .themes button{border-radius:50% !important}
html[data-theme="nes"] h1,
html[data-theme="nes"] h2,
html[data-theme="nes"] h3,
html[data-theme="nes"] .brand,
html[data-theme="nes"] .stat .num,
html[data-theme="nes"] .rank,
html[data-theme="nes"] .noposter,
html[data-theme="nes"] .btn,
html[data-theme="nes"] .seg button,
html[data-theme="nes"] .chip,
html[data-theme="nes"] .eyebrow,
html[data-theme="nes"] .nav nav a,
html[data-theme="nes"] .bar .n,
html[data-theme="nes"] .bar .lab,
html[data-theme="nes"] .stat .lbl,
html[data-theme="nes"] .fact .k,
html[data-theme="nes"] .count,
html[data-theme="nes"] .tag,
html[data-theme="nes"] .badge{font-family:'Press Start 2P',monospace;font-weight:400;letter-spacing:0;line-height:1.5}
html[data-theme="nes"] h1{font-size:clamp(1.3rem,3.6vw,2.4rem);line-height:1.35;text-shadow:4px 4px 0 var(--accent)}
html[data-theme="nes"] h2{font-size:1.1rem}
html[data-theme="nes"] h3,html[data-theme="nes"] .t4 h2{font-size:.8rem;line-height:1.5}
html[data-theme="nes"] .t4 h2{font-size:1.2rem}
html[data-theme="nes"] .brand{font-size:.75rem}
html[data-theme="nes"] .stat .num{font-size:1.4rem}
html[data-theme="nes"] .stat .lbl,html[data-theme="nes"] .fact .k,html[data-theme="nes"] .eyebrow,html[data-theme="nes"] .tag,html[data-theme="nes"] .count,html[data-theme="nes"] .bar .n,html[data-theme="nes"] .bar .lab{font-size:.55rem;text-transform:uppercase}
html[data-theme="nes"] .btn,html[data-theme="nes"] .seg button,html[data-theme="nes"] .chip,html[data-theme="nes"] .nav nav a{font-size:.6rem;text-transform:uppercase}
html[data-theme="nes"] .btn{padding:12px 16px;border:3px solid #000;box-shadow:4px 4px 0 #000}
html[data-theme="nes"] .btn.ghost{border-color:var(--text);box-shadow:4px 4px 0 var(--line)}
html[data-theme="nes"] .btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #000;filter:none}
html[data-theme="nes"] .stat,
html[data-theme="nes"] .fact,
html[data-theme="nes"] .panel,
html[data-theme="nes"] .modal-card,
html[data-theme="nes"] .controls input,
html[data-theme="nes"] .controls select,
html[data-theme="nes"] .seg{border:3px solid var(--line);box-shadow:4px 4px 0 #000}
html[data-theme="nes"] .poster,
html[data-theme="nes"] .hero-poster,
html[data-theme="nes"] .t4-side img{border:3px solid var(--text);box-shadow:5px 5px 0 #000}
html[data-theme="nes"] .card:hover .poster{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--accent);border-color:var(--star)}
html[data-theme="nes"] .nav{border-bottom:3px solid var(--line)}
html[data-theme="nes"] .seg button.on{box-shadow:none}
html[data-theme="nes"] .bar .fill{box-shadow:inset -4px 0 0 rgb(0 0 0 / .25)}
html[data-theme="nes"] .poster img,
html[data-theme="nes"] .hero-poster{image-rendering:auto}
html[data-theme="nes"] .badge{font-size:.55rem}
html[data-theme="nes"] .stars,html[data-theme="nes"] .unrated{font-size:.8rem}

/* Chainsaw Man: gritty manga ink, blood-orange, cream paper, halftone dots, hard shadows */
html[data-theme="chainsaw"]{
  --bg:#0e0c0b; --panel:#181514; --panel2:#231f1d; --line:#3d332e;
  --text:#f4ead5; --muted:#a8977f; --soft:#e8dcc2;
  --accent:#ff4d1a; --accent-rgb:255 77 26; --on-accent:#120b08; --star:#ffd23f;
  --bg-rgb:14 12 11; --hero-op:.3;
  --radius:2px;
}
html[data-theme="chainsaw"] body{background-image:radial-gradient(rgb(255 77 26 / .09) 1.2px,transparent 1.6px);background-size:9px 9px;background-attachment:fixed}
html[data-theme="chainsaw"] h1,
html[data-theme="chainsaw"] h2,
html[data-theme="chainsaw"] h3,
html[data-theme="chainsaw"] .brand,
html[data-theme="chainsaw"] .stat .num,
html[data-theme="chainsaw"] .rank,
html[data-theme="chainsaw"] .noposter{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em}
html[data-theme="chainsaw"] h1{font-size:clamp(2.6rem,6.5vw,4.6rem);line-height:1;text-shadow:4px 4px 0 var(--accent)}
html[data-theme="chainsaw"] h2{font-size:2.1rem;display:inline-block;border-bottom:5px solid var(--accent);line-height:1.1}
html[data-theme="chainsaw"] .eyebrow{background:var(--accent);color:var(--on-accent);display:inline-block;padding:2px 10px;transform:rotate(-2deg);font-weight:700}
html[data-theme="chainsaw"] .btn{border-radius:0;border:2px solid #000;box-shadow:4px 4px 0 var(--text);text-transform:uppercase;letter-spacing:.06em;font-weight:700;transform:skew(-6deg)}
html[data-theme="chainsaw"] .btn:hover{transform:skew(-6deg) translate(2px,2px);box-shadow:2px 2px 0 var(--text);filter:none}
html[data-theme="chainsaw"] .btn.ghost{border-color:var(--text);box-shadow:4px 4px 0 var(--accent)}
html[data-theme="chainsaw"] .logo{border-radius:0;transform:rotate(-6deg)}
html[data-theme="chainsaw"] .poster,
html[data-theme="chainsaw"] .hero-poster,
html[data-theme="chainsaw"] .t4-side img{border:2px solid var(--text);box-shadow:5px 5px 0 #000}
html[data-theme="chainsaw"] .hero-poster{transform:rotate(2.5deg);box-shadow:8px 8px 0 var(--accent)}
html[data-theme="chainsaw"] .card:hover .poster{transform:translate(-3px,-3px) rotate(-1.2deg);box-shadow:7px 7px 0 var(--accent)}
html[data-theme="chainsaw"] .stat,
html[data-theme="chainsaw"] .fact,
html[data-theme="chainsaw"] .panel,
html[data-theme="chainsaw"] .modal-card{border:2px solid var(--text);box-shadow:5px 5px 0 var(--accent)}
html[data-theme="chainsaw"] .stat .num{font-size:2.4rem;color:var(--accent)}
html[data-theme="chainsaw"] .nav{border-bottom:3px solid var(--accent)}
html[data-theme="chainsaw"] .bar.active .fill{box-shadow:0 0 0 2px var(--text)}
html[data-theme="chainsaw"] .badge.like{color:var(--accent)}

/* Cyberpunk: black, acid yellow, neon cyan, hot magenta */
html[data-theme="cyberpunk"]{
  --bg:#08080d; --panel:#111119; --panel2:#1a1a26; --line:#2d2d44;
  --text:#f4f4f0; --muted:#8a8aa8; --soft:#dcdcd2;
  --accent:#fcee0a; --accent-rgb:252 238 10; --on-accent:#0a0a00; --star:#00f0ff;
  --bg-rgb:8 8 13; --hero-op:.3;
  --radius:3px;
}
html[data-theme="cyberpunk"] h1,
html[data-theme="cyberpunk"] h2,
html[data-theme="cyberpunk"] h3,
html[data-theme="cyberpunk"] .brand,
html[data-theme="cyberpunk"] .stat .num,
html[data-theme="cyberpunk"] .rank,
html[data-theme="cyberpunk"] .noposter{font-family:Rajdhani,Inter,sans-serif;text-transform:uppercase;letter-spacing:.04em}
html[data-theme="cyberpunk"] h1{text-shadow:2px 0 #ff003c,-2px 0 #00f0ff}
html[data-theme="cyberpunk"] .btn,
html[data-theme="cyberpunk"] .logo{border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);text-transform:uppercase;letter-spacing:.06em}
html[data-theme="cyberpunk"] .poster,
html[data-theme="cyberpunk"] .stat,
html[data-theme="cyberpunk"] .panel,
html[data-theme="cyberpunk"] .fact{border-radius:2px}
html[data-theme="cyberpunk"] .card:hover .poster{box-shadow:0 0 0 1px var(--accent),0 0 24px rgb(var(--accent-rgb) / .35)}
html[data-theme="cyberpunk"] .bar.active .fill{box-shadow:0 0 16px rgb(var(--accent-rgb) / .6)}
html[data-theme="cyberpunk"] .bar .fill{box-shadow:0 0 12px rgb(0 240 255 / .35)}
html[data-theme="cyberpunk"] .badge.like{color:#ff003c}
html[data-theme="cyberpunk"] .eyebrow{color:#ff003c}

/* Fallout: Pip-Boy phosphor green on a dark CRT */
html[data-theme="fallout"]{
  --bg:#050d06; --panel:#0a170c; --panel2:#0f2012; --line:#1d4a24;
  --text:#4cff6a; --muted:#2fae47; --soft:#7dff93;
  --accent:#4cff6a; --accent-rgb:76 255 106; --on-accent:#021a06; --star:#4cff6a;
  --bg-rgb:5 13 6; --hero-op:.22;
  --radius:6px;
}
html[data-theme="fallout"] body,
html[data-theme="fallout"] .controls input,
html[data-theme="fallout"] .controls select,
html[data-theme="fallout"] .btn,
html[data-theme="fallout"] .seg button,
html[data-theme="fallout"] .chip,
html[data-theme="fallout"] .trailer button{font-family:'Share Tech Mono',ui-monospace,monospace}
html[data-theme="fallout"] h1,
html[data-theme="fallout"] h2,
html[data-theme="fallout"] h3,
html[data-theme="fallout"] .brand,
html[data-theme="fallout"] .stat .num,
html[data-theme="fallout"] .rank,
html[data-theme="fallout"] .noposter{font-family:'Share Tech Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.03em}
html[data-theme="fallout"] *{text-shadow:0 0 6px rgb(76 255 106 / .35)}
html[data-theme="fallout"] .poster img,
html[data-theme="fallout"] .hero-poster,
html[data-theme="fallout"] .t4-side img,
html[data-theme="fallout"] .pick img,
html[data-theme="fallout"] .modal-card img{filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(2.2) brightness(.9) contrast(1.05)}
html[data-theme="fallout"] .badge,
html[data-theme="fallout"] .badge.like{color:#4cff6a;text-shadow:none}
html[data-theme="fallout"] .btn,html[data-theme="fallout"] .logo{text-shadow:none}
html[data-theme="fallout"] .card:hover .poster{box-shadow:0 0 22px rgb(76 255 106 / .35)}
/* CRT scanlines */
html[data-theme="fallout"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.18) 3px)}

/* VHS '86: synthwave sunset, tape tracking, OSD, rental-store stickers */
html[data-theme="vhs"]{
  --bg:#0b0521; --panel:#160a38; --panel2:#210f4d; --line:#4b2a8a;
  --text:#f6eaff; --muted:#b38be0; --soft:#e6d4ff;
  --accent:#ff2a9d; --accent-rgb:255 42 157; --on-accent:#fff; --star:#00e5ff;
  --bg-rgb:11 5 33; --hero-op:.18;
  --radius:4px;
}
html[data-theme="vhs"] h1,
html[data-theme="vhs"] h2,
html[data-theme="vhs"] h3,
html[data-theme="vhs"] .brand,
html[data-theme="vhs"] .stat .num,
html[data-theme="vhs"] .rank,
html[data-theme="vhs"] .noposter,
html[data-theme="vhs"] .btn,
html[data-theme="vhs"] .seg button,
html[data-theme="vhs"] .chip,
html[data-theme="vhs"] .eyebrow,
html[data-theme="vhs"] .nav nav a,
html[data-theme="vhs"] .bar .n,
html[data-theme="vhs"] .bar .lab,
html[data-theme="vhs"] .stat .lbl,
html[data-theme="vhs"] .fact .k,
html[data-theme="vhs"] .count,
html[data-theme="vhs"] .tag,
html[data-theme="vhs"] .badge,
html[data-theme="vhs"] .controls input,
html[data-theme="vhs"] .controls select{font-family:VT323,ui-monospace,monospace;font-weight:400;text-transform:uppercase;letter-spacing:.06em}
html[data-theme="vhs"] h1{font-family:Monoton,VT323,sans-serif;font-size:clamp(1.9rem,4.6vw,3.4rem);letter-spacing:.03em;line-height:1.15;color:#fff;text-shadow:-3px 0 rgb(0 229 255 / .8),3px 0 rgb(255 42 157 / .8),0 0 24px rgb(255 42 157 / .6);animation:vhs-jitter 7s steps(1) infinite}
html[data-theme="vhs"] h2{font-size:2.3rem;line-height:1;background:linear-gradient(#ffe14d,#ff2a9d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgb(255 42 157 / .5))}
html[data-theme="vhs"] h3{font-size:1.6rem}
html[data-theme="vhs"] .t4 h2{font-size:3rem}
html[data-theme="vhs"] .brand{font-size:1.5rem;color:#fff;text-shadow:-1px 0 #00e5ff,1px 0 #ff2a9d}
html[data-theme="vhs"] .stat .num{font-size:3rem;line-height:1;color:#fff;text-shadow:0 0 14px rgb(0 229 255 / .8),-2px 0 rgb(255 42 157 / .7)}
html[data-theme="vhs"] .stat .lbl,html[data-theme="vhs"] .fact .k,html[data-theme="vhs"] .bar .n,html[data-theme="vhs"] .bar .lab,html[data-theme="vhs"] .count,html[data-theme="vhs"] .tag{font-size:1.15rem}
html[data-theme="vhs"] .eyebrow{font-size:1.3rem;color:#ffe14d;text-shadow:0 0 10px rgb(255 225 77 / .7)}
html[data-theme="vhs"] .eyebrow::before{content:"\25B6  ";}
html[data-theme="vhs"] .nav nav a,html[data-theme="vhs"] .btn,html[data-theme="vhs"] .seg button,html[data-theme="vhs"] .chip,html[data-theme="vhs"] .controls input,html[data-theme="vhs"] .controls select{font-size:1.2rem}
html[data-theme="vhs"] .btn{background:linear-gradient(90deg,#ff2a9d,#ff7a3d);color:#fff;border:0;box-shadow:0 0 18px rgb(255 42 157 / .55),inset 0 -3px 0 rgb(0 0 0 / .25);text-shadow:0 1px 0 rgb(0 0 0 / .4)}
html[data-theme="vhs"] .btn:hover{filter:brightness(1.15);box-shadow:0 0 28px rgb(255 42 157 / .85),inset 0 -3px 0 rgb(0 0 0 / .25)}
html[data-theme="vhs"] .btn.ghost{background:transparent;border:2px solid #00e5ff;box-shadow:0 0 14px rgb(0 229 255 / .4),inset 0 0 12px rgb(0 229 255 / .2);color:#00e5ff}
html[data-theme="vhs"] .logo{background:linear-gradient(135deg,#00e5ff,#ff2a9d);color:#fff;box-shadow:0 0 14px rgb(255 42 157 / .6)}
html[data-theme="vhs"] .nav{border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#00e5ff,#ff2a9d,#ffe14d) 1;box-shadow:0 6px 24px rgb(255 42 157 / .18)}
html[data-theme="vhs"] .seg button.on{background:linear-gradient(90deg,#ff2a9d,#ff7a3d)}
html[data-theme="vhs"] .stat,html[data-theme="vhs"] .fact,html[data-theme="vhs"] .panel,html[data-theme="vhs"] .controls input,html[data-theme="vhs"] .controls select{border-color:#4b2a8a;box-shadow:inset 0 0 0 1px rgb(0 229 255 / .12),0 0 16px rgb(139 92 246 / .18)}
html[data-theme="vhs"] .bar .fill{background:linear-gradient(to top,#ff2a9d,#00e5ff);opacity:1;box-shadow:0 0 14px rgb(0 229 255 / .5)}
html[data-theme="vhs"] .bar.active .fill{background:linear-gradient(to top,#ff7a3d,#ffe14d);box-shadow:0 0 20px rgb(255 225 77 / .8)}
html[data-theme="vhs"] .bar .star{color:#00e5ff}
html[data-theme="vhs"] .stars{text-shadow:0 0 8px rgb(0 229 255 / .8)}
html[data-theme="vhs"] .badge{background:rgb(11 5 33 / .85);color:#00e5ff;font-size:1rem;padding:0 6px}
html[data-theme="vhs"] .badge.like{color:#ff2a9d}

/* posters: color bleed + rental sticker + glitch on hover */
html[data-theme="vhs"] .poster,
html[data-theme="vhs"] .hero-poster,
html[data-theme="vhs"] .t4-side img{border:0;box-shadow:-3px 0 0 rgb(0 229 255 / .6),3px 0 0 rgb(255 42 157 / .6),0 0 30px rgb(139 92 246 / .35)}
html[data-theme="vhs"] .poster img,
html[data-theme="vhs"] .hero-poster,
html[data-theme="vhs"] .t4-side img{filter:saturate(1.25) contrast(1.08)}
html[data-theme="vhs"] .poster::after{content:"BE KIND\A REWIND";white-space:pre;position:absolute;left:6px;bottom:8px;background:#ffe14d;color:#111;font:1.05rem/1 VT323,monospace;padding:3px 6px;transform:rotate(-5deg) scale(.6);opacity:0;transition:.18s;transform-origin:left bottom;text-align:center;box-shadow:2px 2px 0 rgb(0 0 0 / .5)}
html[data-theme="vhs"] .card:hover .poster::after{opacity:1;transform:rotate(-5deg) scale(1)}
html[data-theme="vhs"] .card:hover .poster img{animation:vhs-glitch .4s steps(2) 1}
html[data-theme="vhs"] .card:hover .poster{box-shadow:-4px 0 0 rgb(0 229 255 / .85),4px 0 0 rgb(255 42 157 / .85),0 0 36px rgb(255 42 157 / .5)}

/* hero: striped sunset sun, perspective grid floor */
html[data-theme="vhs"] .hero{background:linear-gradient(#0b0521 0%,#2a0a55 55%,#6a1573 100%)}
html[data-theme="vhs"] .hero::before{inset:auto -50% 0 -50%;height:48%;z-index:0;background:repeating-linear-gradient(90deg,rgb(255 42 157 / .75) 0 2px,transparent 2px 70px),repeating-linear-gradient(0deg,rgb(0 229 255 / .6) 0 2px,transparent 2px 38px);transform:perspective(260px) rotateX(62deg);transform-origin:bottom;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent);mask-image:linear-gradient(to top,#000 10%,transparent);animation:vhs-grid 1.6s linear infinite}
html[data-theme="vhs"] .hero::after{background:linear-gradient(to bottom,transparent 72%,var(--bg))}
html[data-theme="vhs"] .hero-inner::before{content:"";position:absolute;z-index:-1;right:6%;top:-70px;width:min(420px,60vw);aspect-ratio:1;border-radius:50%;background:linear-gradient(#ffe14d 15%,#ff7a3d 50%,#ff2a9d 90%);-webkit-mask-image:linear-gradient(to bottom,#000 0 46%,transparent 46% 50%,#000 50% 60%,transparent 60% 65%,#000 65% 74%,transparent 74% 80%,#000 80% 88%,transparent 88% 94%,#000 94%);mask-image:linear-gradient(to bottom,#000 0 46%,transparent 46% 50%,#000 50% 60%,transparent 60% 65%,#000 65% 74%,transparent 74% 80%,#000 80% 88%,transparent 88% 94%,#000 94%);filter:drop-shadow(0 0 40px rgb(255 42 157 / .7));opacity:.9}
html[data-theme="vhs"] .t4-hero{background:radial-gradient(600px 260px at 80% 0,rgb(255 42 157 / .28),transparent),linear-gradient(#0b0521,#1a0b42)}

/* CRT/VHS overlays: scanlines + vignette, rolling tracking bar */
html[data-theme="vhs"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.22) 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5));animation:vhs-flicker 4s steps(1) infinite}
html[data-theme="vhs"] body::before{content:"";position:fixed;left:0;right:0;top:0;height:16vh;pointer-events:none;z-index:99;background:linear-gradient(to bottom,transparent,rgb(255 255 255 / .06) 40%,rgb(255 255 255 / .14) 50%,rgb(255 255 255 / .06) 60%,transparent);animation:vhs-track 6.5s linear infinite}

@keyframes vhs-track{from{transform:translateY(-20vh)}to{transform:translateY(110vh)}}
@keyframes vhs-grid{from{background-position:0 0,0 0}to{background-position:0 0,0 38px}}
@keyframes vhs-flicker{0%,100%{opacity:1}47%{opacity:1}48%{opacity:.8}49%{opacity:1}91%{opacity:.9}92%{opacity:1}}
@keyframes vhs-jitter{0%,90%,100%{transform:translate(0)}91%{transform:translate(-4px,0) skewX(4deg)}93%{transform:translate(5px,0)}95%{transform:translate(-2px,0) skewX(-3deg)}}
@keyframes vhs-glitch{0%{transform:translate(0)}25%{transform:translate(-4px,1px);filter:hue-rotate(60deg) saturate(2)}50%{transform:translate(4px,-1px);filter:hue-rotate(-60deg) saturate(2)}75%{transform:translate(-2px,0)}100%{transform:none}}

/* on-screen display (added by theme.js) */
.vhs-osd,.vhs-flash{display:none}
html[data-theme="vhs"] .vhs-osd{display:flex;position:fixed;left:18px;bottom:16px;z-index:101;gap:18px;align-items:baseline;font:1.7rem/1 VT323,monospace;color:#fff;text-shadow:-2px 0 #00e5ff,2px 0 #ff2a9d,0 0 10px rgb(255 255 255 / .6);pointer-events:none}
.vhs-osd .mode{min-width:5.5ch}
.vhs-osd .mode.blink{animation:osd-blink 1.1s steps(1) infinite}
.vhs-osd .sp{color:#ffe14d;text-shadow:none}
@keyframes osd-blink{50%{opacity:.25}}
html[data-theme="vhs"] .vhs-flash.on{display:grid;position:fixed;inset:0;z-index:200;place-items:start start;background:#1432ff;pointer-events:none;animation:vhs-flash .9s steps(6) forwards}
.vhs-flash span{font:2.2rem/1 VT323,monospace;color:#fff;margin:28px;text-shadow:2px 0 #ff2a9d}
.vhs-flash::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgb(255 255 255 / .08) 0 2px,transparent 2px 5px)}
@keyframes vhs-flash{0%{opacity:1}70%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  html[data-theme="vhs"] body::before{display:none}
  html[data-theme="vhs"] *,html[data-theme="vhs"] body::after{animation:none !important}
}

/* NES extras: pixel cursor, clouds, brick ground, ? block, status bar HUD, dialog box, boot screen */
html[data-theme="nes"],
html[data-theme="nes"] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' shape-rendering='crispEdges'%3E%3Cpath d='M1 1v14h3v-3h2v3h3v-3h2V9H7V7H5V5H3V3H1z' fill='%23fff' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 1 1,auto}
html[data-theme="nes"] body{padding-bottom:46px;background-image:linear-gradient(rgb(255 255 255 / .03) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .03) 1px,transparent 1px);background-size:16px 16px}
html[data-theme="nes"] .hero::after{background:none}
html[data-theme="nes"] .hero::before{inset:auto 0 0 0;height:24px;z-index:2;background-color:#c84c0c;background-image:linear-gradient(to bottom,#fc9838 0 3px,transparent 3px),linear-gradient(to bottom,#000 2px,transparent 2px),linear-gradient(to right,#000 2px,transparent 2px);background-size:100% 100%,100% 12px,32px 12px;border-top:3px solid #000}
html[data-theme="nes"] .hero-inner{padding-bottom:88px}
html[data-theme="nes"] .hero-inner::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:170px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='36' shape-rendering='crispEdges' fill='%23fcfcfc' fill-opacity='.2'%3E%3Crect x='24' y='0' width='24' height='8'/%3E%3Crect x='16' y='8' width='48' height='8'/%3E%3Crect x='8' y='16' width='72' height='8'/%3E%3Crect x='0' y='24' width='88' height='8'/%3E%3C/svg%3E") repeat-x 0 20px/192px 72px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='36' shape-rendering='crispEdges' fill='%23fcfcfc' fill-opacity='.12'%3E%3Crect x='24' y='0' width='24' height='8'/%3E%3Crect x='16' y='8' width='48' height='8'/%3E%3Crect x='8' y='16' width='72' height='8'/%3E%3Crect x='0' y='24' width='88' height='8'/%3E%3C/svg%3E") repeat-x 90px 90px/120px 45px;animation:nes-clouds 70s linear infinite}
@keyframes nes-clouds{to{background-position:1200px 20px,-90px 90px}}
html[data-theme="nes"] .bar .fill{background:repeating-linear-gradient(to top,var(--star) 0 12px,#9c7c00 12px 14px);box-shadow:none}
html[data-theme="nes"] .bar.active .fill{background:repeating-linear-gradient(to top,var(--accent) 0 12px,#7c1800 12px 14px)}
html[data-theme="nes"] .card h3::before{content:"\25BA";color:var(--star);visibility:hidden;margin-right:4px}
html[data-theme="nes"] .card:hover h3::before,html[data-theme="nes"] .card:focus-visible h3::before{visibility:visible;animation:nes-blink .5s steps(1) infinite}
html[data-theme="nes"] .card:hover .poster{animation:nes-bump .28s steps(3) 1}
html[data-theme="nes"] .modal-card{background:#000;border:4px solid #fff;outline:4px solid #000;box-shadow:0 0 0 8px #5c5c9c,10px 10px 0 8px #000}
html[data-theme="nes"] .review{font-family:'Press Start 2P',monospace;font-size:.6rem;line-height:2;color:#fff}
html[data-theme="nes"] .review.typing::after{content:"\25BC";margin-left:6px;animation:nes-blink .4s steps(1) infinite;color:var(--star)}
html[data-theme="nes"] .modal-body h3{color:var(--star)}
html[data-theme="nes"] footer::before{content:"THANK YOU FOR PLAYING!";display:block;color:var(--star);font:.7rem/1.6 'Press Start 2P',monospace;margin-bottom:10px;animation:nes-blink 1s steps(1) infinite}
@keyframes nes-blink{50%{opacity:0}}
@keyframes nes-bump{0%{transform:translate(-2px,-2px)}40%{transform:translate(-2px,-12px)}100%{transform:translate(-2px,-2px)}}

.nes-qblock,.nes-hud,.nes-boot{display:none}
html[data-theme="nes"] .nes-qblock{display:inline-grid;place-items:center;width:46px;height:46px;border:3px solid #000;background:#fc9838;color:#fff;font:1.1rem/1 'Press Start 2P',monospace;text-shadow:2px 2px 0 #000;box-shadow:inset -4px -4px 0 #c84c0c,inset 4px 4px 0 #fcd8a8,4px 4px 0 #000;animation:nes-float 1.4s steps(2) infinite;padding:0}
html[data-theme="nes"] .nes-qblock:hover{filter:brightness(1.15)}
html[data-theme="nes"] .nes-qblock.hit{animation:nes-bump .3s steps(3) 1;background:#9c7c00}
@keyframes nes-float{50%{transform:translateY(-4px)}}
html[data-theme="nes"] .nes-hud{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:101;gap:14px 22px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:10px 16px;background:#000;border-top:4px solid #fff;color:#fff;font:.55rem/1.4 'Press Start 2P',monospace;text-transform:uppercase}
.nes-hud b{color:#fcd838;font-weight:400}
.nes-hud button{font:inherit;background:none;border:2px solid #fff;color:#fff;padding:3px 6px;cursor:pointer}
.nes-hud button:hover{background:#fff;color:#000}
.nes-hud .blink{animation:nes-blink .8s steps(1) infinite;color:#f83800}
.fx-pop{position:fixed;z-index:150;pointer-events:none;animation:fx-pop .85s steps(8) forwards;white-space:nowrap}
.fx-pop.nes{font:.6rem/1 'Press Start 2P',monospace;color:#fff;text-shadow:2px 2px 0 #000}
.fx-pop.fo{font:1.2rem/1 'Share Tech Mono',monospace;color:#4cff6a;text-shadow:0 0 8px #4cff6a}
.fx-pop.cp{font:700 1.2rem/1 Rajdhani,sans-serif;color:#fcee0a;text-shadow:0 0 8px #fcee0a,2px 0 #ff003c;letter-spacing:.06em}
.fx-pop.big{font-size:2rem;animation-duration:1.6s}
@keyframes fx-pop{from{transform:translateY(0);opacity:1}to{transform:translateY(-46px);opacity:0}}
html[data-theme="nes"] .nes-boot.on{display:grid;position:fixed;inset:0;z-index:300;place-items:center;align-content:center;gap:28px;background:#000;color:#fff;font:1rem/1.6 'Press Start 2P',monospace;text-align:center;animation:nes-boot-out .5s steps(5) 1.5s forwards}
.nes-boot strong{font-size:clamp(1.2rem,5vw,2.6rem);text-shadow:4px 4px 0 #f83800;font-weight:400}
.nes-boot em{font-style:normal;color:#fcd838;animation:nes-blink .6s steps(1) infinite}
@keyframes nes-boot-out{to{opacity:0}}
@media(prefers-reduced-motion:reduce){html[data-theme="nes"] *,html[data-theme="nes"] *::before,html[data-theme="nes"] *::after{animation:none !important}}

/* ===== Fallout extras: Pip-Boy HUD, VATS targeting, CRT roll, terminal login ===== */
.fo-hud,.fo-boot,.cp-hud,.cp-ticker,.cp-boot,.cp-jack{display:none}
html[data-theme="fallout"] body{padding-bottom:78px}
html[data-theme="fallout"] .nav nav a:not(.btn)::before{content:"[ "}
html[data-theme="fallout"] .nav nav a:not(.btn)::after{content:" ]"}
html[data-theme="fallout"] h1::after{content:"\2588";margin-left:6px;animation:fo-blink 1s steps(1) infinite}
html[data-theme="fallout"] .eyebrow::before{content:"> "}
html[data-theme="fallout"] body::after{background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.2) 3px),radial-gradient(ellipse at center,transparent 50%,rgba(0,12,0,.65));animation:fo-flicker 5s steps(1) infinite}
html[data-theme="fallout"] body::before{content:"";position:fixed;left:0;right:0;top:0;height:22vh;pointer-events:none;z-index:99;background:linear-gradient(to bottom,transparent,rgb(76 255 106 / .07) 50%,transparent);animation:vhs-track 9s linear infinite}
html[data-theme="fallout"] .bar .fill{background:repeating-linear-gradient(to top,#4cff6a 0 4px,#1d8a30 4px 6px);box-shadow:0 0 14px rgb(76 255 106 / .45)}
html[data-theme="fallout"] .bar.active .fill{background:repeating-linear-gradient(to top,#d8ffe0 0 4px,#4cff6a 4px 6px);box-shadow:0 0 20px rgb(76 255 106 / .9)}
html[data-theme="fallout"] .stat,html[data-theme="fallout"] .fact,html[data-theme="fallout"] .panel,html[data-theme="fallout"] .modal-card,html[data-theme="fallout"] .controls input,html[data-theme="fallout"] .controls select,html[data-theme="fallout"] .seg{border:1px solid #1d4a24;box-shadow:inset 0 0 22px rgb(76 255 106 / .09),0 0 16px rgb(76 255 106 / .1)}
html[data-theme="fallout"] .review{font-family:'Share Tech Mono',monospace;line-height:1.7}
html[data-theme="fallout"] .review.typing::after{content:"\2588";animation:fo-blink .6s steps(1) infinite}
html[data-theme="fallout"] .hero::before{background:radial-gradient(700px 320px at 15% 0,rgb(76 255 106 / .14),transparent 70%)}
html[data-theme="fallout"] footer::before{content:"> VAULT-TEC THANKS YOU FOR YOUR PATIENCE.";display:block;margin-bottom:8px;animation:fo-blink 1.4s steps(1) infinite}
/* V.A.T.S.: hovering a poster targets it; hit chance = your rating */
html[data-theme="fallout"] .poster::before{content:"";position:absolute;inset:8px;z-index:2;pointer-events:none;opacity:0;border:1px solid #4cff6a;background:linear-gradient(#4cff6a,#4cff6a) 50% 0/1px 12px no-repeat,linear-gradient(#4cff6a,#4cff6a) 50% 100%/1px 12px no-repeat,linear-gradient(#4cff6a,#4cff6a) 0 50%/12px 1px no-repeat,linear-gradient(#4cff6a,#4cff6a) 100% 50%/12px 1px no-repeat}
html[data-theme="fallout"] .poster::after{content:"V.A.T.S.  " attr(data-vats);position:absolute;left:8px;right:8px;bottom:8px;z-index:2;pointer-events:none;opacity:0;background:rgb(0 20 4 / .88);border:1px solid #4cff6a;color:#4cff6a;font:1rem/1.2 'Share Tech Mono',monospace;text-align:center;padding:3px 0}
html[data-theme="fallout"] .card:hover .poster::before,html[data-theme="fallout"] .card:hover .poster::after,html[data-theme="fallout"] .card:focus-visible .poster::before,html[data-theme="fallout"] .card:focus-visible .poster::after{opacity:1}
html[data-theme="fallout"] .card:hover .poster::before{animation:fo-lock .35s ease-out 1}
html[data-theme="fallout"] .fx-pop{z-index:160}
/* Pip-Boy status panel */
html[data-theme="fallout"] .fo-hud{display:block;position:fixed;left:0;right:0;bottom:0;z-index:101;background:#020802;border-top:2px solid #4cff6a;box-shadow:0 -6px 24px rgb(76 255 106 / .22);font:1rem/1.3 'Share Tech Mono',monospace;color:#4cff6a;text-transform:uppercase;padding:6px 14px 8px}
.fo-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:5px}
.fo-tabs a,.fo-tabs button{font:inherit;color:#4cff6a;background:none;border:1px solid #1d4a24;padding:0 12px;text-decoration:none;cursor:pointer}
.fo-tabs a:hover,.fo-tabs button:hover{background:#4cff6a;color:#020802;text-shadow:none}
.fo-tabs button{margin-left:auto}
.fo-bars{display:flex;gap:10px 28px;flex-wrap:wrap;align-items:center}
.fo-bars span{display:flex;align-items:center;gap:8px}
.fo-bars u{text-decoration:none;color:#bfffcb}
.fo-bar{display:inline-block;width:110px;height:10px;border:1px solid #4cff6a}
.fo-bar b{display:block;height:100%;width:0;background:#4cff6a;box-shadow:0 0 8px #4cff6a;transition:width .25s steps(5)}
.fo-hud.danger .fo-rad,.fo-hud.danger [data-k="hpn"]{color:#ffb000;text-shadow:0 0 8px #ffb000;animation:fo-blink .8s steps(1) infinite}
html[data-theme="fallout"] .fo-boot.on{display:block;position:fixed;inset:0;z-index:300;background:#020802;padding:7vh 6vw;overflow:hidden}
.fo-boot pre{margin:0;font:clamp(1rem,2.4vw,1.5rem)/1.5 'Share Tech Mono',monospace;color:#4cff6a;text-shadow:0 0 8px #4cff6a;white-space:pre-wrap}
.fo-boot::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgb(0 0 0 / .25) 3px);pointer-events:none}
@keyframes fo-blink{50%{opacity:0}}
@keyframes fo-flicker{0%,100%{opacity:1}30%{opacity:.88}31%{opacity:1}72%{opacity:.92}73%{opacity:1}}
@keyframes fo-lock{from{inset:-20px;opacity:0}to{inset:8px;opacity:1}}

/* ===== Cyberpunk extras: HUD corners, news ticker, scanner, hazard stripes, jack-in ===== */
html[data-theme="cyberpunk"] body{padding-bottom:50px}
html[data-theme="cyberpunk"] body::before{content:"";position:fixed;inset:10px;pointer-events:none;z-index:99;opacity:.75;background:linear-gradient(#fcee0a,#fcee0a) 0 0/46px 3px no-repeat,linear-gradient(#fcee0a,#fcee0a) 0 0/3px 46px no-repeat,linear-gradient(#00f0ff,#00f0ff) 100% 0/46px 3px no-repeat,linear-gradient(#00f0ff,#00f0ff) 100% 0/3px 46px no-repeat,linear-gradient(#ff003c,#ff003c) 0 100%/46px 3px no-repeat,linear-gradient(#ff003c,#ff003c) 0 100%/3px 46px no-repeat,linear-gradient(#fcee0a,#fcee0a) 100% 100%/46px 3px no-repeat,linear-gradient(#fcee0a,#fcee0a) 100% 100%/3px 46px no-repeat}
html[data-theme="cyberpunk"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:98;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 3px,rgba(0,240,255,.035) 4px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.45))}
html[data-theme="cyberpunk"] h1{animation:cp-glitch 5s steps(1) infinite}
html[data-theme="cyberpunk"] .brand{animation:cp-neon 3.4s steps(1) infinite}
html[data-theme="cyberpunk"] .hero::before{inset:auto 0 0 0;height:12px;z-index:2;background:repeating-linear-gradient(-45deg,#fcee0a 0 14px,#08080d 14px 28px)}
html[data-theme="cyberpunk"] .hero::after{background:none}
html[data-theme="cyberpunk"] .hero-inner{padding-bottom:84px}
html[data-theme="cyberpunk"] .hero-bg{filter:blur(30px) saturate(1.6) hue-rotate(-20deg)}
html[data-theme="cyberpunk"] .stat,html[data-theme="cyberpunk"] .fact,html[data-theme="cyberpunk"] .panel{border-left:3px solid #fcee0a;box-shadow:0 0 0 1px rgb(252 238 10 / .12),0 0 22px rgb(0 240 255 / .08)}
html[data-theme="cyberpunk"] .stat .num{color:#fcee0a;text-shadow:0 0 14px rgb(252 238 10 / .55),2px 0 #ff003c}
html[data-theme="cyberpunk"] .modal-card{border:1px solid #fcee0a;box-shadow:0 0 0 1px #08080d,0 0 0 3px #00f0ff,0 0 40px rgb(0 240 255 / .35);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
html[data-theme="cyberpunk"] .modal-body h3{color:#fcee0a}
html[data-theme="cyberpunk"] .modal-body h3::before{content:"DATA SHARD // ";color:#00f0ff;font-size:.8em}
html[data-theme="cyberpunk"] .review{font-family:'Share Tech Mono',monospace}
html[data-theme="cyberpunk"] .review.typing{color:#00f0ff;text-shadow:0 0 6px rgb(0 240 255 / .7)}
html[data-theme="cyberpunk"] .bar.active .fill{background:#fcee0a;box-shadow:0 0 18px #fcee0a}
html[data-theme="cyberpunk"] footer::before{content:"// END OF TRANSMISSION";display:block;color:#00f0ff;margin-bottom:6px;font-family:'Share Tech Mono',monospace}
/* scanner: hovering a poster sweeps it, locks on with brackets and a threat level */
html[data-theme="cyberpunk"] .poster::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,#00f0ff,transparent);box-shadow:0 0 14px #00f0ff,0 0 4px #fff}
html[data-theme="cyberpunk"] .poster::after{content:"THREAT " attr(data-threat);position:absolute;left:6px;bottom:6px;z-index:2;pointer-events:none;opacity:0;background:#fcee0a;color:#08080d;font:700 .95rem/1 Rajdhani,sans-serif;letter-spacing:.08em;padding:3px 8px;clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%)}
html[data-theme="cyberpunk"] .card:hover .poster::before{opacity:1;animation:cp-scan .9s linear infinite}
html[data-theme="cyberpunk"] .card:hover .poster::after{opacity:1}
html[data-theme="cyberpunk"] .card:hover .poster img{animation:vhs-glitch .35s steps(2) 1}
html[data-theme="cyberpunk"] .card:hover .poster{outline:2px solid #00f0ff;outline-offset:3px}
/* news ticker under the nav */
html[data-theme="cyberpunk"] .cp-ticker{display:block;position:sticky;top:var(--nav-h,60px);z-index:19;height:30px;overflow:hidden;background:#fcee0a;color:#08080d;font:700 1rem/30px Rajdhani,sans-serif;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid #08080d}
.cp-track{display:inline-flex;gap:34px;white-space:nowrap;animation:cp-crawl 120s linear infinite;padding-left:100%}
.cp-ticker:hover .cp-track{animation-play-state:paused}
.cp-track em{font-style:normal;background:#08080d;color:#fcee0a;padding:0 12px}
.cp-track b{color:#c2003a;font-weight:700}
/* HUD bottom-left */
html[data-theme="cyberpunk"] .cp-hud{display:flex;position:fixed;left:18px;bottom:16px;z-index:101;align-items:center;gap:20px;background:rgb(8 8 13 / .92);border:1px solid #fcee0a;border-left:5px solid #fcee0a;padding:6px 14px;font:700 1.05rem/1 Rajdhani,sans-serif;letter-spacing:.08em;color:#00f0ff;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.cp-hud b{color:#fcee0a;font-weight:700}
.cp-tag{background:#ff003c;color:#fff;padding:2px 8px;font-size:1.1rem}
.cp-sync i{display:inline-block;width:6px;height:12px;margin-left:3px;background:#00f0ff;animation:cp-sync 1.2s steps(1) infinite}
.cp-sync i:nth-child(2){animation-delay:.2s}.cp-sync i:nth-child(3){animation-delay:.4s}.cp-sync i:nth-child(4){animation-delay:.6s}
.cp-hud button{font:inherit;background:none;border:1px solid #00f0ff;color:#00f0ff;padding:2px 8px;cursor:pointer}
.cp-hud button:hover{background:#00f0ff;color:#08080d}
/* jack-in button */
html[data-theme="cyberpunk"] .cp-jack{display:inline-block;font:700 1.05rem/1 Rajdhani,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#00f0ff;background:transparent;border:2px solid #00f0ff;padding:11px 20px;cursor:pointer;box-shadow:0 0 16px rgb(0 240 255 / .4),inset 0 0 14px rgb(0 240 255 / .2);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
html[data-theme="cyberpunk"] .cp-jack:hover{background:#00f0ff;color:#08080d}
html[data-theme="cyberpunk"] .cp-jack.go{animation:vhs-jitter .4s steps(2) 1,cp-flash .4s steps(2) 1}
/* jacking-in boot screen */
html[data-theme="cyberpunk"] .cp-boot.on{display:grid;position:fixed;inset:0;z-index:300;place-items:center;background:#08080d;animation:nes-boot-out .4s steps(4) 1.7s forwards}
.cp-boot-in{width:min(520px,86vw);font:1.1rem/1.8 'Share Tech Mono',monospace;color:#00f0ff;text-shadow:0 0 8px #00f0ff}
.cp-boot-in p{margin:0}
.cp-boot-in .l2{color:#fcee0a;text-shadow:0 0 8px #fcee0a}
.cp-prog{height:14px;border:2px solid #fcee0a;margin:10px 0}
.cp-prog i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#fcee0a 0 10px,transparent 10px 14px);animation:cp-load 1.5s steps(14) forwards}
.cp-boot-in .ok{color:#ff003c;text-shadow:0 0 10px #ff003c;font-size:1.6rem;opacity:0;animation:cp-ok .1s steps(1) 1.5s forwards;letter-spacing:.2em}
@keyframes cp-load{to{width:100%}}
@keyframes cp-ok{to{opacity:1}}
@keyframes cp-scan{from{top:-3px}to{top:100%}}
@keyframes cp-crawl{to{transform:translateX(-50%)}}
@keyframes cp-sync{50%{opacity:.2}}
@keyframes cp-flash{50%{background:#00f0ff}}
@keyframes cp-neon{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.35}94%{opacity:1}96%{opacity:.5}97%{opacity:1}}
@keyframes cp-glitch{0%,93%,100%{transform:none;text-shadow:2px 0 #ff003c,-2px 0 #00f0ff}94%{transform:translate(-5px,0) skewX(-6deg);text-shadow:-6px 0 #ff003c,6px 0 #00f0ff}96%{transform:translate(4px,0);clip-path:inset(30% 0 40% 0)}97%{clip-path:none;transform:translate(-2px,0) skewX(4deg)}}
@media(prefers-reduced-motion:reduce){
  html[data-theme="fallout"] *,html[data-theme="fallout"] *::before,html[data-theme="fallout"] *::after,
  html[data-theme="cyberpunk"] *,html[data-theme="cyberpunk"] *::before,html[data-theme="cyberpunk"] *::after{animation:none !important}
}

/* subtle glow behind the hero in every theme */
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(700px 320px at 15% 0,rgb(var(--accent-rgb) / .16),transparent 70%)}

body{transition:background-color .25s,color .25s}

/* phone header: wide fonts need smaller brand text so the first row stays on one line */
@media(max-width:600px){
  html[data-theme="nes"] body .nav .brand{font-size:.55rem}
  html[data-theme="nes"] body .nav nav a.btn{padding:6px 8px !important}
  html[data-theme="vhs"] body .nav .brand{font-size:1.4rem}
  html[data-theme="chainsaw"] body .nav .brand{font-size:1.2rem}
}

/* theme switcher */
.themes{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.themes button{width:20px;height:20px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;background:var(--sw);box-shadow:inset 0 0 0 2px var(--sw-bg);transition:transform .15s}
.themes button:hover{transform:scale(1.2)}
.themes button[aria-pressed="true"]{border-color:var(--text)}
.themes button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:600px){.themes{gap:5px;padding:4px 6px}.themes button{width:16px;height:16px}}