/* emulator.st — data-theme overrides (tokens defined in style.css :root) */

html[data-theme="nes"] {
  --bg: #151518;
  --bg-card: #1e1e24;
  --bg-panel: #1a1a1f;
  --bg-hover: #2a2a32;
  --text: #ececec;
  --text-dim: #8a8a96;
  --accent: #c0392b;
  --accent-bright: #ff6b5a;
  --accent-glow: rgba(192, 57, 43, 0.45);
  --accent-soft: rgba(192, 57, 43, 0.14);
  --accent-soft-strong: rgba(192, 57, 43, 0.22);
  --resume-accent-tint: rgba(192, 57, 43, 0.16);
  --topbar-grad-a: rgba(21, 21, 24, 0.98);
  --topbar-grad-b: rgba(21, 21, 24, 0.92);
}

html[data-theme="snes"] {
  --bg: #c4c0d4;
  --bg-card: #b8b4ca;
  --bg-panel: #aeaac2;
  --bg-hover: #d2cee0;
  --text: #252230;
  --text-dim: #4a4458;
  --accent: #5c4a8a;
  --accent-bright: #3d2f6b;
  --accent-glow: rgba(61, 47, 107, 0.35);
  --accent-soft: rgba(61, 47, 107, 0.12);
  --accent-soft-strong: rgba(61, 47, 107, 0.2);
  --resume-accent-tint: rgba(61, 47, 107, 0.18);
  --topbar-grad-a: rgba(196, 192, 212, 0.98);
  --topbar-grad-b: rgba(196, 192, 212, 0.94);
  --border: rgba(0, 0, 0, 0.12);
  --border-hover: rgba(0, 0, 0, 0.22);
  --search-bg: rgba(0, 0, 0, 0.06);
  --search-bg-focus: rgba(0, 0, 0, 0.1);
  --pill-bg: rgba(0, 0, 0, 0.06);
  --tab-inactive-bg: rgba(0, 0, 0, 0.05);
  --sys-pill-bg: rgba(0, 0, 0, 0.06);
  --shadow-color: rgba(0,0,0,0.2);
}

html[data-theme="gb"] {
  --bg: #0d1f0d;
  --bg-card: #143214;
  --bg-panel: #102810;
  --bg-hover: #1a401a;
  --text: #dce8c8;
  --text-dim: #7a9a48;
  --accent: #8bac0f;
  --accent-bright: #d4e860;
  --accent-glow: rgba(139, 172, 15, 0.4);
  --accent-soft: rgba(139, 172, 15, 0.15);
  --accent-soft-strong: rgba(139, 172, 15, 0.24);
  --resume-accent-tint: rgba(139, 172, 15, 0.18);
  --topbar-grad-a: rgba(13, 31, 13, 0.98);
  --topbar-grad-b: rgba(13, 31, 13, 0.92);
}

html[data-theme="gbc"] {
  --bg: #1a2040;
  --bg-card: #242a55;
  --bg-panel: #1e2450;
  --bg-hover: #2e3470;
  --text: #e8e8f4;
  --text-dim: #9090c0;
  --accent: #00b4d8;
  --accent-bright: #ff6b9d;
  --accent-glow: rgba(0, 180, 216, 0.35);
  --accent-soft: rgba(0, 180, 216, 0.12);
  --accent-soft-strong: rgba(255, 107, 157, 0.15);
  --resume-accent-tint: rgba(0, 180, 216, 0.14);
  --topbar-grad-a: rgba(26, 32, 64, 0.98);
  --topbar-grad-b: rgba(26, 32, 64, 0.92);
}

html[data-theme="gba"] {
  --bg: #1a1438;
  --bg-card: #242050;
  --bg-panel: #201c48;
  --bg-hover: #302868;
  --text: #e6e2f4;
  --text-dim: #9890c0;
  --accent: #6860d8;
  --accent-bright: #a898ff;
  --accent-glow: rgba(104, 96, 216, 0.4);
  --accent-soft: rgba(104, 96, 216, 0.14);
  --accent-soft-strong: rgba(104, 96, 216, 0.22);
  --resume-accent-tint: rgba(104, 96, 216, 0.16);
  --topbar-grad-a: rgba(26, 20, 56, 0.98);
  --topbar-grad-b: rgba(26, 20, 56, 0.92);
}

html[data-theme="nds"] {
  --bg: #e2e2e8;
  --bg-card: #d6d6e0;
  --bg-panel: #ceced8;
  --bg-hover: #ececf2;
  --text: #1a1a22;
  --text-dim: #4a4a58;
  --accent: #c8102e;
  --accent-bright: #e02040;
  --accent-glow: rgba(200, 16, 46, 0.35);
  --accent-soft: rgba(200, 16, 46, 0.1);
  --accent-soft-strong: rgba(200, 16, 46, 0.16);
  --resume-accent-tint: rgba(200, 16, 46, 0.12);
  --topbar-grad-a: rgba(226, 226, 232, 0.98);
  --topbar-grad-b: rgba(226, 226, 232, 0.94);
  --border: rgba(0, 0, 0, 0.1);
  --border-hover: rgba(0, 0, 0, 0.2);
  --search-bg: rgba(0, 0, 0, 0.05);
  --search-bg-focus: rgba(0, 0, 0, 0.08);
  --pill-bg: rgba(0, 0, 0, 0.06);
  --tab-inactive-bg: rgba(0, 0, 0, 0.04);
  --sys-pill-bg: rgba(0, 0, 0, 0.05);
  --shadow-color: rgba(0,0,0,0.15);
}

html[data-theme="n64"] {
  --bg: #222228;
  --bg-card: #2e2e38;
  --bg-panel: #282830;
  --bg-hover: #3a3a48;
  --text: #e8e8ec;
  --text-dim: #909098;
  --accent: #6b4c8c;
  --accent-bright: #e8b84a;
  --accent-glow: rgba(232, 184, 74, 0.35);
  --accent-soft: rgba(107, 76, 140, 0.18);
  --accent-soft-strong: rgba(232, 184, 74, 0.15);
  --resume-accent-tint: rgba(107, 76, 140, 0.2);
  --topbar-grad-a: rgba(34, 34, 40, 0.98);
  --topbar-grad-b: rgba(34, 34, 40, 0.92);
}

html[data-theme="genesis"] {
  --bg: #080808;
  --bg-card: #121212;
  --bg-panel: #0e0e0e;
  --bg-hover: #1c1c1c;
  --text: #ececec;
  --text-dim: #888888;
  --accent: #e31e24;
  --accent-bright: #ff4a4f;
  --accent-glow: rgba(227, 30, 36, 0.45);
  --accent-soft: rgba(227, 30, 36, 0.12);
  --accent-soft-strong: rgba(227, 30, 36, 0.2);
  --resume-accent-tint: rgba(227, 30, 36, 0.14);
  --topbar-grad-a: rgba(8, 8, 8, 0.98);
  --topbar-grad-b: rgba(8, 8, 8, 0.92);
}

html[data-theme="segacd"] {
  --bg: #121018;
  --bg-card: #1c1824;
  --bg-panel: #181420;
  --bg-hover: #282238;
  --text: #e8e4dc;
  --text-dim: #908878;
  --accent: #c9a227;
  --accent-bright: #e8c547;
  --accent-glow: rgba(201, 162, 39, 0.4);
  --accent-soft: rgba(201, 162, 39, 0.12);
  --accent-soft-strong: rgba(201, 162, 39, 0.2);
  --resume-accent-tint: rgba(201, 162, 39, 0.14);
  --topbar-grad-a: rgba(18, 16, 24, 0.98);
  --topbar-grad-b: rgba(18, 16, 24, 0.92);
}

html[data-theme="sega32x"] {
  --bg: #0c0c10;
  --bg-card: #16161c;
  --bg-panel: #121218;
  --bg-hover: #22222c;
  --text: #e4e4e8;
  --text-dim: #888890;
  --accent: #c62828;
  --accent-bright: #7e8c96;
  --accent-glow: rgba(198, 40, 40, 0.35);
  --accent-soft: rgba(198, 40, 40, 0.12);
  --accent-soft-strong: rgba(126, 140, 150, 0.18);
  --resume-accent-tint: rgba(198, 40, 40, 0.12);
  --topbar-grad-a: rgba(12, 12, 16, 0.98);
  --topbar-grad-b: rgba(12, 12, 16, 0.92);
}

html[data-theme="ps1"] {
  --bg: #3a404c;
  --bg-card: #454b58;
  --bg-panel: #404650;
  --bg-hover: #505868;
  --text: #f0f0f4;
  --text-dim: #a8acb8;
  --accent: #6a9bd8;
  --accent-bright: #c8d8f0;
  --accent-glow: rgba(106, 155, 216, 0.35);
  --accent-soft: rgba(106, 155, 216, 0.14);
  --accent-soft-strong: rgba(106, 155, 216, 0.22);
  --resume-accent-tint: rgba(106, 155, 216, 0.16);
  --topbar-grad-a: rgba(58, 64, 76, 0.98);
  --topbar-grad-b: rgba(58, 64, 76, 0.92);
}

html[data-theme="psp"] {
  --bg: #1a1c24;
  --bg-card: #242830;
  --bg-panel: #202228;
  --bg-hover: #323844;
  --text: #e6e8ec;
  --text-dim: #9098a8;
  --accent: #7a90b0;
  --accent-bright: #b8c8e0;
  --accent-glow: rgba(122, 144, 176, 0.35);
  --accent-soft: rgba(122, 144, 176, 0.14);
  --accent-soft-strong: rgba(122, 144, 176, 0.22);
  --resume-accent-tint: rgba(122, 144, 176, 0.14);
  --topbar-grad-a: rgba(26, 28, 36, 0.98);
  --topbar-grad-b: rgba(26, 28, 36, 0.92);
}

html[data-theme="arcade"] {
  --bg: #0a0a14;
  --bg-card: #141420;
  --bg-panel: #101018;
  --bg-hover: #1c1c30;
  --text: #e8f8f4;
  --text-dim: #68a898;
  --accent: #00d4aa;
  --accent-bright: #ff3d9a;
  --accent-glow: rgba(0, 212, 170, 0.35);
  --accent-soft: rgba(0, 212, 170, 0.12);
  --accent-soft-strong: rgba(255, 61, 154, 0.12);
  --resume-accent-tint: rgba(0, 212, 170, 0.14);
  --topbar-grad-a: rgba(10, 10, 20, 0.98);
  --topbar-grad-b: rgba(10, 10, 20, 0.92);
}

html[data-theme="dos"] {
  --bg: #2a2618;
  --bg-card: #363022;
  --bg-panel: #302c1c;
  --bg-hover: #423c28;
  --text: #d8d0b8;
  --text-dim: #908868;
  --accent: #4a8c2a;
  --accent-bright: #7fd060;
  --accent-glow: rgba(74, 140, 42, 0.4);
  --accent-soft: rgba(74, 140, 42, 0.15);
  --accent-soft-strong: rgba(74, 140, 42, 0.22);
  --resume-accent-tint: rgba(74, 140, 42, 0.16);
  --topbar-grad-a: rgba(42, 38, 24, 0.98);
  --topbar-grad-b: rgba(42, 38, 24, 0.92);
  --font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
}

html[data-theme="a2600"] {
  --bg: #2a1f14;
  --bg-card: #3a2a1c;
  --bg-panel: #322418;
  --bg-hover: #483828;
  --text: #f0e8d8;
  --text-dim: #a89878;
  --accent: #d89020;
  --accent-bright: #f5b040;
  --accent-glow: rgba(216, 144, 32, 0.4);
  --accent-soft: rgba(216, 144, 32, 0.12);
  --accent-soft-strong: rgba(216, 144, 32, 0.2);
  --resume-accent-tint: rgba(216, 144, 32, 0.14);
  --topbar-grad-a: rgba(42, 31, 20, 0.98);
  --topbar-grad-b: rgba(42, 31, 20, 0.92);
}

/* OLED Dark theme — pure black for AMOLED screens */
html[data-theme="oled"] {
  --bg: #000000;
  --bg-alt: #0a0a0a;
  --panel-bg: #050505;
  --panel-border: #1a1a1a;
  --text: #e0e0e0;
  --text-dim: #888;
  --accent: #7c3aed;
  --accent-bright: #a78bfa;
  --topbar-bg: #000000;
  --card-bg: #0a0a0a;
  --card-border: #1a1a1a;
  --input-bg: #0a0a0a;
  --input-border: #222;
  --hover-bg: #111;
  --scanline-opacity: 0;
}

/* Light theme */
html[data-theme="light"] {
  --bg: #f5f5f5;
  --bg-alt: #ebebeb;
  --panel-bg: #ffffff;
  --panel-border: #ddd;
  --text: #1a1a2e;
  --text-dim: #666;
  --accent: #6d28d9;
  --accent-bright: #7c3aed;
  --topbar-bg: #ffffff;
  --card-bg: #ffffff;
  --card-border: #e0e0e0;
  --input-bg: #f0f0f0;
  --input-border: #ccc;
  --hover-bg: #eee;
  --shadow-color: rgba(0,0,0,0.15);
  --scanline-opacity: 0;
}
html[data-theme="light"] .panel { box-shadow: 0 1px 3px rgba(0,0,0,.1); }
html[data-theme="light"] .ghost-btn { color: #333; border-color: #ccc; }
html[data-theme="light"] .ghost-btn:hover { background: #eee; }
html[data-theme="light"] .pill { background: #e8e0f0; color: #4c1d95; }
html[data-theme="light"] .topbar { border-bottom: 1px solid #ddd; }
html[data-theme="light"] .scanlines { display: none; }

/* ═════════════════════════════════════════════════════════════════════════
   ARCADE CABINET theme ("cabinet") — the site becomes one big cabinet:
   dark room, backlit marquee header, CRT screen with scanlines + vignette,
   game grid as an attract-mode game-select wall, coin-op chrome.
   Cosmetic chrome + coin credits are enhanced by /static/js/arcade-cabinet.js
   (theme is fully usable with JS off — the coin widget simply never appears).
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="cabinet"] {
  --bg: #07020d;
  --bg-card: #12060e;
  --bg-panel: #0d0409;
  --bg-hover: #1c0a18;
  --text: #ffe9f4;
  --text-dim: #b78ca8;
  --accent: #ff2a6d;
  --accent-bright: #ff5c8a;
  --accent-glow: rgba(255, 42, 109, 0.55);
  --accent-soft: rgba(255, 42, 109, 0.14);
  --accent-soft-strong: rgba(255, 42, 109, 0.24);
  --resume-accent-tint: rgba(255, 42, 109, 0.18);
  --topbar-grad-a: rgba(18, 4, 12, 0.98);
  --topbar-grad-b: rgba(18, 4, 12, 0.94);
  --border: rgba(255, 42, 109, 0.22);
  --border-hover: rgba(37, 244, 238, 0.5);
  --shadow-color: rgba(255, 42, 109, 0.25);
  --scanline-opacity: 0.55;
  --cab-cyan: #25f4ee;
  --cab-yellow: #f9f871;
}

/* ── the room: dark, neon bleed from the screen ─────────────────────────── */
html[data-theme="cabinet"] body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 42, 109, 0.10), transparent 60%),
    radial-gradient(900px 500px at 8% 110%, rgba(37, 244, 238, 0.06), transparent 60%),
    radial-gradient(900px 500px at 92% 110%, rgba(249, 248, 113, 0.05), transparent 60%),
    var(--bg);
}

/* ── marquee: the header is a backlit cabinet marquee ──────────────────── */
html[data-theme="cabinet"] .topbar {
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 2px 24px var(--accent-glow), inset 0 -14px 30px -18px var(--accent-glow);
}
html[data-theme="cabinet"] .topbar .brand {
  color: #fff;
  text-shadow: 0 0 6px var(--accent), 0 0 18px var(--accent-glow), 0 0 36px var(--accent-glow);
  letter-spacing: 0.06em;
}
html[data-theme="cabinet"] .topbar .subbrand {
  color: var(--cab-cyan);
  text-shadow: 0 0 8px rgba(37, 244, 238, 0.6);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.62rem;
}
html[data-theme="cabinet"] .topbar .brand-badge {
  background: linear-gradient(160deg, var(--accent), #b3003c);
  box-shadow: 0 0 14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35);
  color: #fff;
}

/* ── the CRT: main content is the screen ────────────────────────────────── */
html[data-theme="cabinet"] .container {
  position: relative;
  background:
    linear-gradient(rgba(7, 2, 13, 0.0), rgba(255, 42, 109, 0.03)),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow:
    0 0 0 4px #0a0208,
    0 0 0 6px #241019,
    0 0 44px var(--accent-glow),
    inset 0 0 80px rgba(0, 0, 0, 0.55);
  padding: 18px;
  margin-top: 14px;
}
html[data-theme="cabinet"] .container::before {
  /* corner screen screws */
  content: "";
  position: absolute; inset: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 42, 109, 0.14);
  pointer-events: none;
}
html[data-theme="cabinet"] .scanlines {
  opacity: var(--scanline-opacity);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.38) 100%);
}

/* ── attract-mode game wall ─────────────────────────────────────────────── */
html[data-theme="cabinet"] .game-card {
  border-radius: 8px;
  border: 2px solid #241019;
  background: var(--bg-card);
  box-shadow: 0 4px 14px rgba(0,0,0,.6);
}
html[data-theme="cabinet"] .game-card .card-poster::after {
  /* CRT glass over every poster */
  content: "";
  position: absolute; inset: 0;
  border-radius: 6px;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0px, rgba(0,0,0,.12) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.10), transparent 45%);
  z-index: 2;
}
html[data-theme="cabinet"] .game-card:hover,
html[data-theme="cabinet"] .game-card:focus-visible {
  border-color: var(--cab-cyan);
  box-shadow: 0 0 0 2px rgba(37, 244, 238, 0.35), 0 0 26px rgba(37, 244, 238, 0.35);
}
html[data-theme="cabinet"] .game-card:hover .card-overlay,
html[data-theme="cabinet"] .game-card:focus-visible .card-overlay {
  background: rgba(5, 1, 10, 0.45);
}
html[data-theme="cabinet"] .game-card .card-overlay::after {
  content: "PRESS START";
  position: absolute; bottom: 8px; left: 0; right: 0;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--cab-yellow);
  text-shadow: 0 0 8px rgba(249, 248, 113, 0.8);
  animation: cab-blink 1.1s steps(2, start) infinite;
}
html[data-theme="cabinet"] .game-card.cab-attract {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 2px var(--accent-soft-strong), 0 0 30px var(--accent-glow);
  animation: cab-attract-pulse 1.6s ease-in-out 2;
}
@keyframes cab-attract-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35) saturate(1.2); }
}
@keyframes cab-blink {
  50% { opacity: 0; }
}

/* ── arcade buttons / chrome ────────────────────────────────────────────── */
html[data-theme="cabinet"] .btn-primary,
html[data-theme="cabinet"] button[class*="primary"] {
  background: linear-gradient(160deg, var(--accent), #b3003c);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 0 12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
html[data-theme="cabinet"] .pill,
html[data-theme="cabinet"] .sys-pill {
  background: var(--accent-soft);
  color: var(--accent-bright);
  border: 1px solid var(--border);
}
html[data-theme="cabinet"] a { color: var(--cab-cyan); }
html[data-theme="cabinet"] ::selection { background: var(--accent); color: #fff; }
html[data-theme="cabinet"] ::-webkit-scrollbar { width: 10px; }
html[data-theme="cabinet"] ::-webkit-scrollbar-track { background: #0a0208; }
html[data-theme="cabinet"] ::-webkit-scrollbar-thumb {
  background: #3a1220; border-radius: 5px; border: 2px solid #0a0208;
}
html[data-theme="cabinet"] ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── coin-slot widget (added by arcade-cabinet.js when the theme is on) ─── */
.cab-coin-slot {
  position: fixed;
  right: 14px; bottom: 14px;
  z-index: 9800;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--cab-yellow, #f9f871);
  background: rgba(10, 2, 8, 0.92);
  border: 1px solid var(--accent, #ff2a6d);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 0 14px rgba(255, 42, 109, 0.35);
  transition: transform .1s ease;
}
.cab-coin-slot:active { transform: scale(0.94); }
.cab-coin-slot .cab-slot-line {
  display: block;
  width: 34px; height: 3px;
  margin: 5px auto 0;
  background: #000;
  border: 1px solid rgba(249, 248, 113, 0.5);
  border-radius: 2px;
}
.cab-coin-slot.cab-coin-in { animation: cab-coin-drop .45s ease; }
@keyframes cab-coin-drop {
  0% { box-shadow: 0 0 2px rgba(249,248,113,.2); }
  40% { box-shadow: 0 0 26px rgba(249,248,113,.9); transform: translateY(2px); }
  100% { box-shadow: 0 0 14px rgba(255,42,109,.35); }
}
.cab-flash {
  position: fixed; inset: 0;
  z-index: 9900;
  pointer-events: none;
  background: #fff;
  opacity: 0;
}
.cab-flash.cab-go { animation: cab-crt-flash .35s ease-out; }
@keyframes cab-crt-flash {
  0% { opacity: .85; }
  30% { opacity: .1; }
  60% { opacity: .5; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="cabinet"] .game-card .card-overlay::after,
  html[data-theme="cabinet"] .game-card.cab-attract { animation: none; }
  .cab-coin-slot.cab-coin-in, .cab-flash.cab-go { animation: none; }
}

html[data-theme="arcadeos"] {
  --bg: #060913;
  --bg-card: #0c1222;
  --bg-panel: #0a0f1c;
  --bg-hover: #141c30;
  --text: #e8f0ff;
  --text-dim: #7f8db0;
  --accent: #25f4ee;
  --accent-bright: #6ef9f5;
  --accent-glow: rgba(37, 244, 238, 0.45);
  --accent-soft: rgba(37, 244, 238, 0.12);
  --accent-soft-strong: rgba(37, 244, 238, 0.22);
  --resume-accent-tint: rgba(37, 244, 238, 0.16);
  --topbar-grad-a: rgba(6, 9, 19, 0.98);
  --topbar-grad-b: rgba(6, 9, 19, 0.94);
  --border: rgba(37, 244, 238, 0.25);
  --border-hover: rgba(157, 77, 255, 0.6);
  --shadow-color: rgba(37, 244, 238, 0.2);
}

/* ═════════════════════════════════════════════════════════════════════════
   ARCADE OS site-wide chrome (2026-10-27): the destination pages (Social,
   Dashboard, Multiplayer, Live, Achievements, Help, Account, Search…)
   share the standard components, so skinning them here — scoped under
   html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) — carries the Arcade OS identity to every
   sub-page with zero template changes. Other themes are untouched.
   ═════════════════════════════════════════════════════════════════════════ */

html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) body {
  background:
    radial-gradient(1200px 640px at 82% -8%, rgba(45, 30, 100, 0.30), transparent 62%),
    radial-gradient(900px 520px at 2% 110%, rgba(42, 107, 255, 0.14), transparent 60%),
    var(--bg);
}

/* topbar: dark glass + neon seam, arcade brand */
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .topbar {
  background: linear-gradient(180deg, rgba(6, 9, 19, 0.96), rgba(6, 9, 19, 0.88));
  border-bottom: 1px solid rgba(37, 244, 238, 0.28);
  box-shadow: 0 4px 30px rgba(37, 244, 238, 0.07);
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .brand-badge {
  background: linear-gradient(120deg, #19e3f2, #25f4ee);
  color: #04121a;
  box-shadow: 0 0 14px rgba(37, 244, 238, 0.45);
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .brand {
  background: linear-gradient(120deg, #fff 40%, var(--accent-bright));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(37, 244, 238, 0.35));
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .subbrand {
  color: var(--accent-bright);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* panels: arcade glass */
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .panel {
  background: linear-gradient(160deg, rgba(14, 20, 38, 0.92), rgba(9, 13, 26, 0.94));
  border: 1px solid rgba(37, 244, 238, 0.22);
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(37, 244, 238, 0.08), 0 18px 44px rgba(0, 0, 0, 0.45);
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .eyebrow {
  letter-spacing: 0.3em;
  text-shadow: 0 0 10px rgba(37, 244, 238, 0.3);
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) h1, html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) h2 {
  letter-spacing: 0.02em;
}

/* buttons */
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .ghost-btn {
  background: rgba(12, 18, 34, 0.7);
  border: 1px solid rgba(139, 152, 189, 0.28);
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .ghost-btn:hover,
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .ghost-btn.is-active {
  border-color: rgba(37, 244, 238, 0.55);
  color: #fff;
  box-shadow: 0 0 12px rgba(37, 244, 238, 0.25);
  background: rgba(28, 40, 70, 0.55);
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .play-btn {
  background: linear-gradient(120deg, #19e3f2, #25f4ee);
  color: #04121a;
  border: none;
  box-shadow: 0 0 18px rgba(37, 244, 238, 0.4);
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .play-btn:hover {
  box-shadow: 0 0 28px rgba(37, 244, 238, 0.6);
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .pill {
  background: rgba(37, 244, 238, 0.1);
  border: 1px solid rgba(37, 244, 238, 0.25);
  color: var(--accent-bright);
}

/* inputs */
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .search-input,
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) input[type="text"],
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) input[type="password"],
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) input[type="email"],
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) input[type="number"],
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) input[type="date"],
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) textarea,
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) select {
  background: rgba(5, 8, 16, 0.9);
  border: 1px solid rgba(139, 152, 189, 0.3);
  color: var(--text);
  border-radius: 9px;
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .search-input:focus,
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) input:focus,
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) textarea:focus,
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) select:focus {
  border-color: rgba(37, 244, 238, 0.6);
  box-shadow: 0 0 12px rgba(37, 244, 238, 0.22);
  outline: none;
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) input[type="checkbox"],
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) input[type="radio"] {
  accent-color: #25f4ee;
}

/* game cards + system chips */
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .game-card {
  background: rgba(12, 18, 34, 0.8);
  border: 1px solid rgba(139, 152, 189, 0.22);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .game-card:hover,
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .game-card:focus-visible {
  border-color: rgba(37, 244, 238, 0.55);
  box-shadow: 0 0 18px rgba(37, 244, 238, 0.28);
  transform: translateY(-2px);
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .sys-chip,
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .system-rail button {
  border-radius: 10px;
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .tab-btn {
  background: rgba(12, 18, 34, 0.8);
  border: 1px solid rgba(139, 152, 189, 0.28);
  border-radius: 9px;
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .tab-btn.is-active {
  border-color: rgba(37, 244, 238, 0.55);
  color: var(--accent-bright);
  box-shadow: 0 0 12px rgba(37, 244, 238, 0.22);
}

/* scrollbars + selection */
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) ::-webkit-scrollbar { width: 10px; height: 10px; }
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) ::-webkit-scrollbar-track { background: rgba(6, 9, 19, 0.6); }
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) ::-webkit-scrollbar-thumb {
  background: rgba(37, 244, 238, 0.3);
  border-radius: 5px;
  border: 2px solid rgba(6, 9, 19, 0.9);
}
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) ::-webkit-scrollbar-thumb:hover { background: rgba(37, 244, 238, 0.55); }
html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) ::selection { background: rgba(37, 244, 238, 0.35); color: #fff; }

/* ── Arcade OS 3D: same tokens + deeper scene for the 3D cover-flow ── */
html[data-theme="arcadeos3d"] {
  --bg: #05070f;
  --bg-card: #0c1222;
  --bg-panel: #0a0f1c;
  --bg-hover: #141c30;
  --text: #eef3ff;
  --text-dim: #8b98bd;
  --accent: #25f4ee;
  --accent-bright: #7ffdf9;
  --accent-glow: rgba(37, 244, 238, 0.5);
  --accent-soft: rgba(37, 244, 238, 0.12);
  --accent-soft-strong: rgba(37, 244, 238, 0.24);
  --resume-accent-tint: rgba(37, 244, 238, 0.16);
  --topbar-grad-a: rgba(5, 7, 15, 0.97);
  --topbar-grad-b: rgba(5, 7, 15, 0.93);
  --border: rgba(37, 244, 238, 0.28);
  --border-hover: rgba(255, 42, 157, 0.55);
  --aos-purple: #9d4dff;
  --aos-magenta: #ff2a9d;
  --aos-blue: #2a6bff;
}
html[data-theme="arcadeos3d"] body {
  background: var(--bg);
}

/* session 59: at ≤1366px the arcadeos subbrand letter-spacing (0.24em vs
   the stock 0.08em) widens brand-wrap enough to push the fixed topbar
   cluster 22px past the viewport on 1280x720 laptops (html scrollWidth
   1302 > 1280). Tighten inside the skin's own scope on small desktops —
   full spacing restored ≥1367px. */
@media (max-width: 1366px) {
  html:is([data-theme="arcadeos"],[data-theme="arcadeos3d"]) .subbrand {
    letter-spacing: 0.1em;
  }
}