/* Augmenta Labs — visual themes. Default (no data-theme / "pitwall") lives in labs.css. */

/* theme picker (all themes) */
.theme-pick { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--mute); cursor: pointer; }
.theme-pick:hover { color: var(--text); border-color: var(--line-strong); }
.theme-pick select { width: auto; border: 0; background: transparent; padding: 4px 6px; font-weight: 700; font-size: 12px; color: var(--text); }

/* ════════════════ 1 · CLASSROOM — bright, calm, accessible ════════════════ */
[data-theme="classroom"] {
  --bg: #f3f6fb; --panel: #ffffff; --panel-solid: #ffffff;
  --line: #e3e9f2; --line-strong: #c9d4e3;
  --text: #1c2536; --soft: #46546b; --mute: #6b7a92;
  --acc: #2f74f5; --acc-dim: #e7f0ff; --violet: #8b5cf6; --warm: #f97316; --good: #12a66c; --bad: #e5484d; --amber: #f2a20c;
  --surface: #f6f8fc; --surface-2: #eef2f8; --track: #e3e9f2; --hard: #8a97ab;
  --font: 'Nunito', system-ui, sans-serif; --display: 'Nunito', system-ui, sans-serif;
  --radius: 22px; --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(28,37,54,0.05), 0 8px 24px rgba(28,37,54,0.07);
}
[data-theme="classroom"] body { background: radial-gradient(1000px 500px at 0% 0%, #e4eeff, transparent 60%), radial-gradient(900px 600px at 100% 100%, #f1e9ff, transparent 60%), var(--bg); }
[data-theme="classroom"] body::before { display: none; }
[data-theme="classroom"] .panel { backdrop-filter: none; }
[data-theme="classroom"] .brand h1 { font-weight: 900; letter-spacing: 0; font-size: 18px; }
[data-theme="classroom"] .logo { box-shadow: 0 6px 16px rgba(47,116,245,0.3); border-radius: 12px; }
[data-theme="classroom"] .seg { background: var(--surface-2); border: 0; border-radius: 14px; padding: 4px; }
[data-theme="classroom"] .seg .on { background: #fff; color: var(--acc) !important; box-shadow: 0 1px 3px rgba(28,37,54,0.12); }
[data-theme="classroom"] .btn { border-radius: 12px; background: #fff; }
[data-theme="classroom"] .btn.primary { background: var(--acc); color: #fff; border-color: var(--acc); }
[data-theme="classroom"] :is(.choice, .era) { border-radius: 16px; padding: 10px 12px; border-width: 2px; }
[data-theme="classroom"] :is(.choice, .era)::after { opacity: .22; }
[data-theme="classroom"] :is(.choice, .era).on { border-color: var(--acc); background: var(--acc-dim); }
[data-theme="classroom"] .sec-h { font-weight: 800; letter-spacing: 1px; color: var(--soft); }
[data-theme="classroom"] .hero { background: linear-gradient(135deg, #eaf8f1, #eaf2ff); border: 0; }
[data-theme="classroom"] .hero.bad { background: linear-gradient(135deg, #fdecec, #fff3e6); }
[data-theme="classroom"] .hero .v { font-family: var(--font); font-weight: 900; }
[data-theme="classroom"] .stat { border: 0; background: var(--surface); border-radius: 16px; }
[data-theme="classroom"] .stat .v { font-family: var(--font); font-weight: 800; font-size: 18px; }
[data-theme="classroom"] input[type=range] { height: 10px; border-radius: 6px; }
[data-theme="classroom"] input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; background: #fff; box-shadow: 0 0 0 3px var(--acc), 0 3px 8px rgba(28,37,54,0.25); }
[data-theme="classroom"] input[type=range]::-moz-range-thumb { width: 24px; height: 24px; background: #fff; box-shadow: 0 0 0 3px var(--acc); }
[data-theme="classroom"] .nudge { width: 28px; height: 28px; border-radius: 9px; font-size: 15px; }
[data-theme="classroom"] .ex, [data-theme="classroom"] .ch { border-radius: 16px; }
[data-theme="classroom"] .ex .eq { background: #f0f5ff; border-color: #d6e4ff; color: #1d4ed8; }
[data-theme="classroom"] .ch.done { background: #eaf8f1; }
[data-theme="classroom"] #toast { background: #fff; color: var(--text); box-shadow: var(--shadow); }
[data-theme="classroom"] .mini { background: var(--surface); }
[data-theme="classroom"] .warn { color: #9a3412; background: #fff4ea; border-color: #fed7aa; }

/* ════════════════ 2 · LAB NOTEBOOK — graph paper, pencil & highlighter ════════════════ */
[data-theme="notebook"] {
  --bg: #f7f2e6; --panel: #fffdf6; --panel-solid: #fffdf6;
  --line: rgba(43,58,85,0.16); --line-strong: rgba(43,58,85,0.4);
  --text: #23314d; --soft: #3d4c69; --mute: #6d7891;
  --acc: #1f5fd1; --acc-dim: rgba(255,226,0,0.42); --violet: #7a3fd6; --warm: #e2621b; --good: #1d8a4a; --bad: #d22b2b; --amber: #c98a00;
  --surface: rgba(43,58,85,0.03); --surface-2: rgba(43,58,85,0.06); --track: rgba(43,58,85,0.15); --hard: #6d7891;
  --font: 'Nunito', system-ui, sans-serif; --display: 'Caveat', cursive;
  --radius: 6px; --radius-sm: 6px;
  --shadow: 0 1px 1px rgba(43,58,85,0.05);
}
[data-theme="notebook"] body { background: var(--bg); }
[data-theme="notebook"] body::before { opacity: 1; mask-image: none;
  background-image: linear-gradient(rgba(31,95,209,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(31,95,209,0.09) 1px, transparent 1px);
  background-size: 22px 22px; }
[data-theme="notebook"] .panel { backdrop-filter: none; border: 1.5px solid var(--line-strong); }
[data-theme="notebook"] #topbar { border-bottom: 3px double var(--line-strong); }
[data-theme="notebook"] .brand h1 { font-size: 30px; font-weight: 700; letter-spacing: 0.5px; line-height: 1; }
[data-theme="notebook"] .brand h1 span { color: var(--bad); }
[data-theme="notebook"] .logo { border-radius: 50%; background: #fff; border: 2px solid var(--text); box-shadow: none; }
[data-theme="notebook"] .logo svg { stroke: var(--text); }
[data-theme="notebook"] .sec-h { font-family: var(--display); font-size: 24px; letter-spacing: 0; text-transform: none; color: var(--text); font-weight: 700; }
[data-theme="notebook"] .sec-h::after { background: none; border-bottom: 1.5px dashed var(--line-strong); height: 0; }
[data-theme="notebook"] .seg { border-radius: 6px; border: 1.5px solid var(--line-strong); background: transparent; }
[data-theme="notebook"] .seg .on { background: var(--acc-dim); color: var(--text) !important; box-shadow: none; }
[data-theme="notebook"] .btn { border-radius: 6px; border: 1.5px solid var(--text); box-shadow: 0 1px 0 rgba(43,58,85,0.12); }
[data-theme="notebook"] .btn:hover { background: var(--acc-dim); }
[data-theme="notebook"] :is(.choice, .era) { border: 1.5px solid var(--line-strong); border-radius: 6px; }
[data-theme="notebook"] :is(.choice, .era)::after { display: none; }
[data-theme="notebook"] :is(.choice, .era) b { font-size: 13px; }
[data-theme="notebook"] :is(.choice, .era).on { background: linear-gradient(transparent 55%, var(--acc-dim) 55%); border-color: var(--text); }
[data-theme="notebook"] :is(.choice, .era).on b { color: var(--text); }
[data-theme="notebook"] .hero { background: #fff; border: 1.5px solid var(--text); box-shadow: 0 1px 1px rgba(43,58,85,0.05); }
[data-theme="notebook"] .hero.bad { background: #fff6f3; }
[data-theme="notebook"] .hero .k { font-family: var(--display); font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--text); }
[data-theme="notebook"] .hero .v { color: var(--acc); }
[data-theme="notebook"] .stat { border: 1.5px dashed var(--line-strong); border-radius: 6px; background: transparent; }
[data-theme="notebook"] input[type=range]::-webkit-slider-thumb { background: var(--text); box-shadow: 0 0 0 3px var(--acc-dim); }
[data-theme="notebook"] input[type=range]::-moz-range-thumb { background: var(--text); }
[data-theme="notebook"] .ex { border-radius: 6px; background: #fff; border-left: 4px solid var(--bad); }
[data-theme="notebook"] .ex summary { font-family: var(--display); font-size: 21px; font-weight: 700; }
[data-theme="notebook"] .ex .eq { background: transparent; border: 0; border-left: 3px solid var(--acc); border-radius: 0; color: var(--acc); }
[data-theme="notebook"] .ch { border-radius: 6px; background: #fff; }
[data-theme="notebook"] .ch.done { background: linear-gradient(transparent 60%, rgba(29,138,74,0.18) 60%), #fff; }
[data-theme="notebook"] .ch .tick { border-radius: 3px; border: 2px solid var(--text); }
[data-theme="notebook"] #toast { background: #fff; color: var(--text); border: 1.5px solid var(--text); box-shadow: 0 2px 6px rgba(43,58,85,0.1); }
[data-theme="notebook"] .mini { background: #fff; }
[data-theme="notebook"] .warn { color: #8a3a0a; background: #fff3d6; border: 1.5px dashed #e2a33b; }
[data-theme="notebook"] .heroband h2 { font-family: var(--display); font-size: clamp(44px, 7vw, 72px); letter-spacing: 0; line-height: .95; }
[data-theme="notebook"] .heroband h2 span { background: linear-gradient(transparent 60%, var(--acc-dim) 60%); color: var(--acc); -webkit-background-clip: border-box; background-clip: border-box; }
[data-theme="notebook"] .card h3 { font-family: var(--display); font-size: 30px; font-weight: 700; }

/* ════════════════ 3 · TOYBOX — chunky, bold, playful (ages 10–14) ════════════════ */
[data-theme="toybox"] {
  --bg: #fff4dc; --panel: #ffffff; --panel-solid: #ffffff;
  --line: #1d1b26; --line-strong: #1d1b26;
  --text: #1d1b26; --soft: #3b3848; --mute: #6a6578;
  --acc: #2f5bff; --acc-dim: #ffd23f; --violet: #9b5cff; --warm: #ff7a1a; --good: #00b37a; --bad: #ff4466; --amber: #ffb800;
  --surface: #fff9ee; --surface-2: #fff0d4; --track: #f1e3c6; --hard: #6a6578;
  --font: 'Fredoka', system-ui, sans-serif; --display: 'Fredoka', system-ui, sans-serif;
  --radius: 22px; --radius-sm: 16px;
  --shadow: 5px 5px 0 #1d1b26;
}
[data-theme="toybox"] body { background: var(--bg); }
[data-theme="toybox"] body::before { opacity: 1; mask-image: none;
  background-image: radial-gradient(circle, #ffb3c1 2.5px, transparent 3px), radial-gradient(circle, #9fd8ff 2.5px, transparent 3px);
  background-size: 60px 60px, 60px 60px; background-position: 0 0, 30px 30px; }
[data-theme="toybox"] .panel { backdrop-filter: none; border: 3px solid var(--line); }
[data-theme="toybox"] .brand h1 { font-size: 21px; font-weight: 700; letter-spacing: 0; }
[data-theme="toybox"] .brand h1 span { color: #fff; background: var(--bad); padding: 0 8px 1px; border-radius: 10px; border: 2.5px solid var(--line); }
[data-theme="toybox"] .logo { border: 3px solid var(--line); box-shadow: 3px 3px 0 var(--line); background: var(--acc-dim); border-radius: 14px; }
[data-theme="toybox"] .sec-h { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--text); }
[data-theme="toybox"] .sec-h::after { height: 3px; border-radius: 2px; background: var(--track); }
[data-theme="toybox"] .seg { border: 2.5px solid var(--line); border-radius: 14px; background: #fff; }
[data-theme="toybox"] .seg button, [data-theme="toybox"] .seg a { font-weight: 600; font-size: 13px; color: var(--soft); }
[data-theme="toybox"] .seg .on { background: var(--acc-dim); color: var(--text) !important; box-shadow: inset 0 0 0 2px var(--line); }
[data-theme="toybox"] .btn { border: 2.5px solid var(--line); border-radius: 14px; box-shadow: 3px 3px 0 var(--line); background: #fff; font-size: 13px; }
[data-theme="toybox"] .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); border-color: var(--line); }
[data-theme="toybox"] .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
[data-theme="toybox"] .btn.primary { background: var(--good); color: #fff; }
[data-theme="toybox"] :is(.choice, .era) { border: 2.5px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 3px 3px 0 var(--line); padding: 9px 11px; }
[data-theme="toybox"] :is(.choice, .era)::after { opacity: 1; filter: none; width: 26px; height: 26px; right: 8px; top: 8px; border: 2.5px solid var(--line); }
[data-theme="toybox"] :is(.choice, .era) b { font-size: 14px; font-weight: 600; }
[data-theme="toybox"] :is(.choice, .era).on { background: var(--acc-dim); border-color: var(--line); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
[data-theme="toybox"] :is(.choice, .era).on b { color: var(--text); }
[data-theme="toybox"] .hero { background: #d9f7ea; border: 3px solid var(--line); }
[data-theme="toybox"] .hero.bad { background: #ffe0e6; }
[data-theme="toybox"] .hero .v { font-family: var(--font); font-weight: 700; font-size: 46px; }
[data-theme="toybox"] .stat { border: 2.5px solid var(--line); border-radius: 16px; background: #fff; }
[data-theme="toybox"] .stat .v { font-family: var(--font); font-weight: 700; font-size: 19px; }
[data-theme="toybox"] input[type=range] { height: 12px; border: 2.5px solid var(--line); border-radius: 8px; }
[data-theme="toybox"] input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; background: var(--acc-dim); border: 3px solid var(--line); box-shadow: 2px 2px 0 var(--line); }
[data-theme="toybox"] input[type=range]::-moz-range-thumb { width: 20px; height: 20px; background: var(--acc-dim); border: 3px solid var(--line); }
[data-theme="toybox"] .nudge { width: 28px; height: 28px; border: 2.5px solid var(--line); border-radius: 9px; color: var(--text); font-weight: 700; background: #fff; }
[data-theme="toybox"] .toggle .sw { border: 2.5px solid var(--line); height: 24px; width: 42px; }
[data-theme="toybox"] .ex { border: 2.5px solid var(--line); border-radius: 16px; background: #fff; }
[data-theme="toybox"] .ex summary { font-size: 14px; font-weight: 600; }
[data-theme="toybox"] .ex .eq { background: #eef2ff; border: 2px solid var(--line); color: var(--acc); }
[data-theme="toybox"] .ch { border: 2.5px solid var(--line); border-radius: 16px; background: #fff; }
[data-theme="toybox"] .ch b { font-size: 13.5px; font-weight: 600; }
[data-theme="toybox"] .ch.done { background: #d9f7ea; }
[data-theme="toybox"] .ch .tick { border: 2.5px solid var(--line); border-radius: 50%; }
[data-theme="toybox"] .chal-prog .bar { height: 10px; border: 2px solid var(--line); border-radius: 6px; }
[data-theme="toybox"] #toast { background: var(--acc-dim); color: var(--text); border: 3px solid var(--line); box-shadow: 4px 4px 0 var(--line); font-weight: 600; }
[data-theme="toybox"] .mini { background: #fff; border: 2.5px solid var(--line); }
[data-theme="toybox"] .warn { color: var(--text); background: #ffe7c2; border: 2.5px solid var(--line); }
[data-theme="toybox"] .stint { border: 2.5px solid var(--line); background: #fff; }
[data-theme="toybox"] .heroband h2 { font-weight: 700; letter-spacing: -0.5px; }
[data-theme="toybox"] .heroband h2 span { background: none; color: var(--bad); -webkit-text-stroke: 0; }
[data-theme="toybox"] .card:hover { transform: translate(-2px, -2px) rotate(-0.6deg); }

/* ════════════════ 4 · RETRO RACING — 70s endurance-racing poster ════════════════ */
[data-theme="poster"] {
  --bg: #f1e7d0; --panel: #fbf4e3; --panel-solid: #fbf4e3;
  --line: rgba(32,41,46,0.22); --line-strong: #20292e;
  --text: #20292e; --soft: #3c464c; --mute: #6e6a5e;
  --acc: #0e7c86; --acc-dim: rgba(14,124,134,0.13); --violet: #5a3e8a; --warm: #e85d26; --good: #2e8b4a; --bad: #c4122f; --amber: #f0a500;
  --surface: rgba(32,41,46,0.035); --surface-2: rgba(32,41,46,0.07); --track: rgba(32,41,46,0.14); --hard: #6e6a5e;
  --font: 'Archivo', system-ui, sans-serif; --display: 'Bebas Neue', 'Archivo', sans-serif;
  --radius: 4px; --radius-sm: 3px;
  --shadow: 0 2px 0 rgba(32,41,46,0.12);
}
[data-theme="poster"] body { background: var(--bg); }
[data-theme="poster"] body::before { opacity: 1; mask-image: none; inset: 0 0 auto 0; height: 10px; z-index: 30;
  background: linear-gradient(90deg, var(--acc) 0 40%, var(--amber) 40% 55%, var(--warm) 55% 75%, var(--bad) 75% 100%); background-size: auto; }
[data-theme="poster"] .panel { backdrop-filter: none; border: 2px solid var(--line-strong); }
[data-theme="poster"] #topbar { border-width: 2px 2px 6px; }
[data-theme="poster"] .brand h1 { font-size: 30px; font-weight: 400; letter-spacing: 1.5px; line-height: 1; }
[data-theme="poster"] .brand h1 span { color: var(--warm); }
[data-theme="poster"] .brand p { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; }
@media (max-width: 760px) { [data-theme="poster"] .brand h1 { font-size: 22px; } }
[data-theme="poster"] .logo { border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px var(--panel), 0 0 0 6px var(--warm); }
[data-theme="poster"] .sec-h { font-family: var(--display); font-size: 21px; font-weight: 400; letter-spacing: 1.5px; color: var(--text); }
[data-theme="poster"] .sec-h::before { content: ''; width: 18px; height: 8px; background: linear-gradient(90deg, var(--acc) 50%, var(--warm) 50%); }
[data-theme="poster"] .sec-h::after { height: 2px; background: var(--line-strong); }
[data-theme="poster"] .seg { border-radius: 3px; border: 2px solid var(--line-strong); padding: 2px; }
[data-theme="poster"] .seg button, [data-theme="poster"] .seg a { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.4px; font-size: 10.5px; padding-left: 6px; padding-right: 6px; }
[data-theme="poster"] .seg .on { background: var(--text); color: var(--bg) !important; box-shadow: none; }
[data-theme="poster"] .btn { border-radius: 3px; border: 2px solid var(--line-strong); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; font-weight: 800; }
[data-theme="poster"] .btn.primary { background: var(--warm); color: #fff; border-color: var(--line-strong); }
[data-theme="poster"] :is(.choice, .era) { border: 2px solid var(--line-strong); border-radius: 3px; }
[data-theme="poster"] :is(.choice, .era)::after { opacity: 1; filter: none; right: 0; top: 0; width: 8px; height: 100%; border-radius: 0; }
[data-theme="poster"] :is(.choice, .era) b { font-family: var(--display); font-size: 19px; font-weight: 400; letter-spacing: 1px; }
[data-theme="poster"] :is(.choice, .era).on { background: var(--acc); }
[data-theme="poster"] :is(.choice, .era).on b, [data-theme="poster"] :is(.choice, .era).on span { color: #fff; }
[data-theme="poster"] .hero { background: var(--acc); border: 2px solid var(--line-strong); color: #fff; position: relative; overflow: hidden; }
[data-theme="poster"] .hero::after { content: ''; position: absolute; right: -30px; top: 0; bottom: 0; width: 120px; transform: skewX(-18deg);
  background: linear-gradient(90deg, var(--amber) 0 30%, var(--warm) 30% 65%, var(--bad) 65%); opacity: .9; }
[data-theme="poster"] .hero > * { position: relative; z-index: 1; }
[data-theme="poster"] .hero.bad { background: var(--bad); }
[data-theme="poster"] .hero .k, [data-theme="poster"] .hero .sub, [data-theme="poster"] .hero .v small, [data-theme="poster"] .hero .ml { color: rgba(255,255,255,0.85); }
[data-theme="poster"] .hero .sub b { color: #fff !important; }
[data-theme="poster"] .hero .v { font-family: var(--display); font-size: 58px; font-weight: 400; letter-spacing: 1px; }
[data-theme="poster"] .hero .ml b { color: #fff; }
[data-theme="poster"] .stat { border: 2px solid var(--line-strong); border-radius: 3px; background: var(--panel); }
[data-theme="poster"] .stat .v { font-family: var(--display); font-size: 26px; font-weight: 400; letter-spacing: 0.5px; }
[data-theme="poster"] .stat .k { text-transform: uppercase; letter-spacing: 0.8px; font-size: 9.5px; font-weight: 800; }
[data-theme="poster"] input[type=range] { border-radius: 0; height: 6px; background: linear-gradient(90deg, var(--acc) 0%, var(--warm) var(--p, 50%), var(--track) var(--p, 50%)); }
[data-theme="poster"] input[type=range]::-webkit-slider-thumb { border-radius: 2px; width: 12px; height: 22px; background: var(--text); box-shadow: none; }
[data-theme="poster"] input[type=range]::-moz-range-thumb { border-radius: 2px; width: 12px; height: 22px; background: var(--text); }
[data-theme="poster"] .ex { border: 2px solid var(--line-strong); border-radius: 3px; background: var(--panel); }
[data-theme="poster"] .ex summary { text-transform: uppercase; letter-spacing: 0.8px; font-weight: 800; font-size: 11.5px; }
[data-theme="poster"] .ex .eq { background: var(--text); color: var(--amber); border: 0; border-radius: 2px; }
[data-theme="poster"] .ch { border: 2px solid var(--line-strong); border-radius: 3px; background: var(--panel); }
[data-theme="poster"] .ch.done { background: #dcebd9; }
[data-theme="poster"] #toast { background: var(--text); color: var(--bg); border: 0; border-left: 8px solid var(--warm); border-radius: 2px; }
[data-theme="poster"] .mini { background: var(--panel); border: 2px solid var(--line-strong); border-radius: 3px; }
[data-theme="poster"] .warn { color: var(--text); background: #f8dcb6; border: 2px solid var(--warm); border-radius: 3px; }
[data-theme="poster"] .stint { border: 2px solid var(--line-strong); border-radius: 3px; }
[data-theme="poster"] .heroband h2 { font-family: var(--display); font-weight: 400; font-size: clamp(52px, 8vw, 92px); letter-spacing: 1px; line-height: .9; }
[data-theme="poster"] .heroband h2 span { background: none; color: var(--warm); }
[data-theme="poster"] .card h3 { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: 1px; }

/* ════════════════ 5 · ARCADE — neon, pixel headings, game-like ════════════════ */
[data-theme="arcade"] {
  --bg: #12082a; --panel: rgba(28,14,62,0.9); --panel-solid: #1c0e3e;
  --line: rgba(255,62,165,0.28); --line-strong: #ff3ea5;
  --text: #f4ecff; --soft: #cbbcf0; --mute: #9887c4;
  --acc: #00f0ff; --acc-dim: rgba(0,240,255,0.14); --violet: #b14aff; --warm: #ff3ea5; --good: #39ff88; --bad: #ff3e5e; --amber: #ffe600;
  --surface: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.07); --track: rgba(255,255,255,0.1); --hard: #f4ecff;
  --font: 'Chakra Petch', system-ui, sans-serif; --display: 'Press Start 2P', monospace;
  --radius: 0px; --radius-sm: 0px;
  --shadow: 4px 4px 0 rgba(255,62,165,0.55), 0 0 30px rgba(177,74,255,0.18);
}
[data-theme="arcade"] body { background: radial-gradient(800px 500px at 50% -10%, rgba(177,74,255,0.35), transparent 70%), linear-gradient(#12082a, #0a0418); }
[data-theme="arcade"] body::before { opacity: 1; mask-image: none; z-index: 50;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px); background-size: auto; }
[data-theme="arcade"] .panel { border: 2px solid var(--line-strong); border-radius: 0; }
[data-theme="arcade"] .brand h1 { font-size: 13px; font-weight: 400; letter-spacing: 1px; line-height: 1.5; text-shadow: 0 0 10px rgba(0,240,255,0.6); }
[data-theme="arcade"] .brand h1 span { color: var(--amber); text-shadow: 0 0 10px rgba(255,230,0,0.7); }
[data-theme="arcade"] .logo { border-radius: 0; background: var(--warm); box-shadow: 3px 3px 0 var(--acc); }
[data-theme="arcade"] .sec-h { font-family: var(--display); font-size: 9px; font-weight: 400; color: var(--amber); letter-spacing: 1px; }
[data-theme="arcade"] .sec-h::after { background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 10px); height: 2px; }
[data-theme="arcade"] .seg { border-radius: 0; border: 2px solid var(--line); }
[data-theme="arcade"] .seg button, [data-theme="arcade"] .seg a { border-radius: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
[data-theme="arcade"] .seg .on { background: var(--acc); color: #12082a !important; box-shadow: 0 0 14px rgba(0,240,255,0.6); }
[data-theme="arcade"] .btn { border-radius: 0; border: 2px solid var(--acc); color: var(--acc); text-transform: uppercase; letter-spacing: 1px; box-shadow: 3px 3px 0 var(--warm); }
[data-theme="arcade"] .btn.primary { background: var(--warm); color: #fff; border-color: var(--warm); box-shadow: 3px 3px 0 var(--acc); }
[data-theme="arcade"] :is(.choice, .era) { border-radius: 0; border: 2px solid var(--line); }
[data-theme="arcade"] :is(.choice, .era)::after { border-radius: 0; filter: none; opacity: 1; width: 10px; height: 10px; right: 8px; top: 8px; box-shadow: 0 0 10px var(--c); }
[data-theme="arcade"] :is(.choice, .era).on { border-color: var(--acc); background: var(--acc-dim); box-shadow: 0 0 16px rgba(0,240,255,0.35), inset 0 0 12px rgba(0,240,255,0.15); }
[data-theme="arcade"] .hero { border-radius: 0; border: 2px solid var(--good); background: linear-gradient(135deg, rgba(57,255,136,0.12), rgba(0,240,255,0.06)); box-shadow: inset 0 0 30px rgba(57,255,136,0.12); }
[data-theme="arcade"] .hero.bad { border-color: var(--bad); background: linear-gradient(135deg, rgba(255,62,94,0.16), rgba(255,62,165,0.06)); }
[data-theme="arcade"] .hero .k { font-family: var(--display); font-size: 8.5px; color: var(--amber); }
[data-theme="arcade"] .hero .v { font-family: var(--display); font-size: 30px; line-height: 1.4; text-shadow: 0 0 16px rgba(0,240,255,0.7); color: var(--acc); }
[data-theme="arcade"] .stat { border-radius: 0; border: 2px solid var(--line); }
[data-theme="arcade"] .stat .v { color: var(--amber); font-family: var(--display); font-size: 12px; line-height: 1.8; }
[data-theme="arcade"] input[type=range] { border-radius: 0; background: linear-gradient(90deg, var(--warm) 0%, var(--acc) var(--p, 50%), var(--track) var(--p, 50%)); }
[data-theme="arcade"] input[type=range]::-webkit-slider-thumb { border-radius: 0; background: var(--amber); box-shadow: 0 0 12px var(--amber); }
[data-theme="arcade"] input[type=range]::-moz-range-thumb { border-radius: 0; background: var(--amber); }
[data-theme="arcade"] .nudge, [data-theme="arcade"] .sw, [data-theme="arcade"] .sw::after { border-radius: 0; }
[data-theme="arcade"] .ex, [data-theme="arcade"] .ch, [data-theme="arcade"] .stint { border-radius: 0; border: 2px solid var(--line); }
[data-theme="arcade"] .ex .eq { border-radius: 0; color: var(--good); background: rgba(57,255,136,0.08); border-color: rgba(57,255,136,0.4); }
[data-theme="arcade"] .ch.done { border-color: var(--good); box-shadow: 0 0 14px rgba(57,255,136,0.3); }
[data-theme="arcade"] .ch .tick { border-radius: 0; }
[data-theme="arcade"] .ch.done b::after { content: ' +100'; font-family: var(--display); font-size: 8px; color: var(--amber); margin-left: 6px; }
[data-theme="arcade"] .chal-prog { font-family: var(--display); font-size: 9px; color: var(--amber); }
[data-theme="arcade"] .chal-prog::before { content: 'XP'; }
[data-theme="arcade"] #toast { border-radius: 0; border: 2px solid var(--amber); font-family: var(--display); font-size: 10px; line-height: 1.7; color: var(--amber); }
[data-theme="arcade"] .mini { border-radius: 0; }
[data-theme="arcade"] .heroband h2 { font-family: var(--display); font-size: clamp(22px, 3.4vw, 36px); line-height: 1.45; letter-spacing: 0; }
[data-theme="arcade"] .heroband h2 span { background: none; color: var(--amber); text-shadow: 0 0 18px rgba(255,230,0,0.6); }
[data-theme="arcade"] .card h3 { font-family: var(--display); font-size: 13px; line-height: 1.5; }

/* shared light-theme fixes */
[data-theme="classroom"] .delta.up, [data-theme="notebook"] .delta.up, [data-theme="toybox"] .delta.up, [data-theme="poster"] .delta.up { background: rgba(18,166,108,0.12); }
[data-theme="classroom"] .live-dot, [data-theme="notebook"] .live-dot, [data-theme="toybox"] .live-dot, [data-theme="poster"] .live-dot { box-shadow: none; }