@import url("https://fonts.googleapis.com/css2?family=Bungee&family=VT323&family=Rubik:wght@400;500;700&family=Pacifico&family=Righteous&family=Shrikhand&family=Audiowide&family=Inter:wght@400;500;700;800&family=Courier+Prime:wght@400;700&display=swap");

/* ============================================================
   Base tokens. Every decade overrides a subset of these;
   the page markup never changes.
   ============================================================ */
:root {
  --cabinet: #120A1E;        /* page background */
  --cabinet-2: #1E1033;      /* raised panels */
  --panel: #0A0612;          /* recessed / readout background */
  --neon-pink: #FF2BD6;      /* primary accent */
  --neon-cyan: #19E6FF;      /* secondary accent */
  --lemon: #F7E34A;          /* section header colour */
  --grape: #8A2BE2;          /* section header shadow */
  --teal: #16B8A8;
  --led: #FF4A1F;            /* readout text */
  --led-bg: #0A0612;         /* readout background */
  --led-dim: #4A1206;
  --white: #FFFFFF;          /* body text */
  --silver: #C9CBD3;         /* muted text */
  --ink: #15121C;            /* text on chrome */
  --chrome: linear-gradient(180deg, #FAFAFA 0%, #D9DBE0 18%, #8E919B 46%, #5B5E68 54%, #B9BCC5 80%, #F2F3F6 100%);
  --chrome-flat: linear-gradient(180deg, #E8E9EE, #9A9DA7);
  --glow-pink: 0 0 6px var(--neon-pink), 0 0 18px rgba(255, 43, 214, 0.55), 0 0 40px rgba(255, 43, 214, 0.25);
  --glow-cyan: 0 0 6px var(--neon-cyan), 0 0 18px rgba(25, 230, 255, 0.55), 0 0 40px rgba(25, 230, 255, 0.25);
  --display: "Bungee", "Impact", "Arial Black", sans-serif;
  --led-font: "VT323", "Courier New", monospace;
  --body: "Rubik", "Helvetica Neue", Arial, sans-serif;
  --sign-shadow: 0.04em 0.04em 0 var(--neon-pink), 0.08em 0.08em 0 var(--neon-cyan), 0 0 18px rgba(255, 43, 214, 0.7), 0 0 40px rgba(255, 43, 214, 0.35);
  --sign-color: #fff;
  --pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2040c20-26%2036%2024%2058-4s40%2018%2062-8%22%20stroke%3D%22%2319E6FF%22%20stroke-width%3D%227%22%2F%3E%3Cpath%20d%3D%22M130%20190c22-28%2034%2020%2058-6s30%2016%2046-4%22%20stroke%3D%22%238A2BE2%22%20stroke-width%3D%227%22%2F%3E%3Cpath%20d%3D%22M20%20150q14-30%2032%200t32%200%22%20stroke%3D%22%23FF2BD6%22%20stroke-width%3D%225%22%2F%3E%3Cpath%20d%3D%22M150%2070q12-26%2026%200t26%200%22%20stroke%3D%22%23F7E34A%22%20stroke-width%3D%225%22%2F%3E%3Cpath%20d%3D%22M180%20120l22%2036-44%200z%22%20stroke%3D%22%2319E6FF%22%20stroke-width%3D%225%22%2F%3E%3Cpath%20d%3D%22M60%20200l16%2026-32%200z%22%20stroke%3D%22%23FF2BD6%22%20stroke-width%3D%225%22%2F%3E%3Cpath%20d%3D%22M96%20100l12%200M102%2094l0%2012%22%20stroke%3D%22%23F7E34A%22%20stroke-width%3D%225%22%2F%3E%3Cpath%20d%3D%22M210%2022l12%200M216%2016l0%2012%22%20stroke%3D%22%238A2BE2%22%20stroke-width%3D%225%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%2319E6FF%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2296%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%22222%22%20cy%3D%22204%22%20r%3D%225%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23FF2BD6%22%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%2230%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22226%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23F7E34A%22%3E%3Crect%20x%3D%22150%22%20y%3D%22150%22%20width%3D%229%22%20height%3D%229%22%20transform%3D%22rotate%2820%20154%20154%29%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%22110%22%20width%3D%228%22%20height%3D%228%22%20transform%3D%22rotate%2835%2012%20114%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --pattern-size: 240px 240px;
  --pattern-opacity: 0.22;
  --bg-glow: radial-gradient(ellipse at 50% -10%, rgba(255, 43, 214, 0.18), transparent 55%), radial-gradient(ellipse at 50% 110%, rgba(25, 230, 255, 0.14), transparent 55%);
  --radius: 22px;            /* card corners */
  --pill: 999px;             /* button corners */
  --arch: 150px;             /* top corners of the dome; 0 = flat */
  --tubes: block;            /* bubble tubes on the host dome */
  --dome-side: 60px;         /* room for the tubes */
  --cycle: running;          /* colour cycling on tubes/arch */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  position: relative;
  background: var(--cabinet);
  background-image: var(--bg-glow);
  color: var(--white);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background-image: var(--pattern);
  background-size: var(--pattern-size);
  opacity: var(--pattern-opacity);
  pointer-events: none;
}
@media (max-width: 700px) { body::before { opacity: calc(var(--pattern-opacity) * 0.6); } }

h1, h2, h3 { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--neon-cyan); outline-offset: 2px; }
input { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* ---- type roles ---- */
.sign { font-family: var(--display); color: var(--sign-color); text-shadow: var(--sign-shadow); letter-spacing: 0.02em; }
.sign.cyan { text-shadow: 0 0 4px #fff, 0 0 10px var(--neon-cyan), 0 0 24px var(--neon-cyan), 0 0 60px rgba(25, 230, 255, 0.6); }
.led {
  font-family: var(--led-font);
  color: var(--led);
  text-shadow: 0 0 2px var(--led), 0 0 8px rgba(255, 74, 31, 0.6);
  background: var(--led-bg);
  background-image: radial-gradient(rgba(255, 74, 31, 0.08) 1px, transparent 1.2px);
  background-size: 4px 4px;
  border-radius: 6px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.9), inset 0 0 0 2px #2A1A12;
  letter-spacing: 0.03em;
  line-height: 1;
}
.sel { font-family: var(--led-font); color: var(--led); text-shadow: 0 0 6px rgba(255, 74, 31, 0.8); }
.muted { color: var(--silver); opacity: 0.8; }

/* ---- surfaces ---- */
.tube { border: 3px solid var(--neon-pink); border-radius: var(--radius); box-shadow: var(--glow-pink), inset 0 0 14px rgba(255, 43, 214, 0.35); }
.tube.cyan { border-color: var(--neon-cyan); box-shadow: var(--glow-cyan), inset 0 0 14px rgba(25, 230, 255, 0.35); }
.chrome {
  background: var(--chrome);
  color: var(--ink);
  border-radius: calc(var(--radius) - 8px);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.6) inset, 0 -2px 0 rgba(0, 0, 0, 0.35) inset, 0 6px 14px rgba(0, 0, 0, 0.5);
}

/* ---- controls ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.75em 1.5em;
  border-radius: var(--pill);
  background: var(--chrome);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.95em;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.7) inset, 0 -3px 0 rgba(0, 0, 0, 0.35) inset, 0 6px 12px rgba(0, 0, 0, 0.5);
  transition: transform 0.08s ease;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(0, 0, 0, 0.35) inset, 0 2px 4px rgba(0, 0, 0, 0.5); }
.btn.neon { background: var(--neon-pink); color: #fff; text-shadow: 0 0 6px rgba(255, 255, 255, 0.8); box-shadow: var(--glow-pink); }
.btn.ghost { background: var(--cabinet-2); color: var(--silver); box-shadow: inset 0 0 0 2px #3A2B55; }
.btn[disabled] { opacity: 0.5; cursor: default; transform: none; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + var(--safe-bottom));
  transform: translateX(-50%) translateY(20px);
  font-family: var(--led-font); font-size: 22px;
  padding: 0.35em 0.9em 0.25em;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  width: max-content; max-width: min(92vw, 640px);
  text-align: center; z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes hue { to { filter: hue-rotate(360deg); } }
.cycle { animation: hue 18s linear infinite; animation-play-state: var(--cycle); }

.ticker { overflow: hidden; white-space: nowrap; }
.ticker span { display: inline-block; padding-left: 100%; animation: ticker 24s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .ticker span { padding-left: 0; }
}

/* ============================================================
   50s - Wurlitzer 1015 in a chrome diner: cream enamel, warm
   incandescent glow, bubble tubes, script lettering, 45 labels
   ============================================================ */
[data-theme="50s"] {
  --cabinet: #2A1A14; --cabinet-2: #3B271E; --panel: #1A100C;
  --neon-pink: #E8B04B; --neon-cyan: #F26B5B;
  --lemon: #F7E1B5; --grape: #8E2F2F; --teal: #2A9D8F;
  --led: #2B1A0E; --led-bg: #F3E6CB; --led-dim: #CBB592;
  --white: #FFF6E6; --silver: #D9C7A8; --ink: #2B1A0E;
  --chrome: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 20%, #A8A49B 48%, #6E6A62 54%, #CFCBC2 82%, #FFFFFF 100%);
  --glow-pink: 0 0 8px #E8B04B, 0 0 22px rgba(232, 176, 75, .55), 0 0 44px rgba(232, 176, 75, .25);
  --glow-cyan: 0 0 8px #F26B5B, 0 0 22px rgba(242, 107, 91, .55), 0 0 44px rgba(242, 107, 91, .25);
  --display: "Pacifico", "Brush Script MT", cursive;
  --led-font: "Courier Prime", "Courier New", monospace;
  --sign-color: #FFF4DC;
  --sign-shadow: 0.05em 0.05em 0 #8E2F2F, 0 0 14px rgba(232, 176, 75, .9), 0 0 36px rgba(232, 176, 75, .5);
  --pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23C83C3C%22%20stroke-width%3D%222%22%20opacity%3D%22.9%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2222%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2214%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%232A9D8F%22%20stroke-width%3D%222%22%20opacity%3D%22.9%22%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22120%22%20r%3D%2222%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22120%22%20r%3D%2214%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22120%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M105%2030l6%2012%2013%202-9%209%202%2013-12-6-12%206%202-13-9-9%2013-2z%22%20fill%3D%22%23F2B134%22%2F%3E%3Cpath%20d%3D%22M28%20118l4%208%209%201-6%206%201%209-8-4-8%204%201-9-6-6%209-1z%22%20fill%3D%22%23F2B134%22%2F%3E%3C%2Fsvg%3E"); --pattern-size: 160px 160px; --pattern-opacity: 0.16;
  --bg-glow: radial-gradient(ellipse at 50% 0%, rgba(232, 176, 75, .25), transparent 55%);
  --radius: 26px; --arch: 190px; --tubes: block; --dome-side: 64px; --cycle: paused;
}
[data-theme="50s"] .led { text-shadow: none; background-image: repeating-linear-gradient(0deg, transparent 0 28px, rgba(0,0,0,.06) 28px 29px); box-shadow: inset 0 2px 6px rgba(0,0,0,.35), inset 0 0 0 2px #B89A6A; }
[data-theme="50s"] .sel { text-shadow: none; color: #C83C3C; font-weight: 700; }
[data-theme="50s"] .sign { letter-spacing: 0; }
[data-theme="50s"] .btn { font-family: var(--body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
[data-theme="50s"] .btn.neon { background: #C83C3C; box-shadow: 0 0 14px rgba(200,60,60,.6); }
/* checkerboard diner floor along the bottom */
[data-theme="50s"] body::after, body[data-theme="50s"]::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 14px; z-index: -1;
  background: repeating-conic-gradient(#F3E6CB 0 25%, #1A100C 0 50%) 0 0 / 28px 28px;
}

/* ============================================================
   60s - Seeburg in a mod living room: walnut, brushed aluminum,
   orange / teal / olive, atomic starbursts, flip-card title strips
   ============================================================ */
[data-theme="60s"] {
  --cabinet: #1E2A2A; --cabinet-2: #2C3B38; --panel: #121C1B;
  --neon-pink: #F28C28; --neon-cyan: #2BB3A6;
  --lemon: #F2C14E; --grape: #7A4B2A; --teal: #2BB3A6;
  --led: #F3EFE0; --led-bg: #1C1A17; --led-dim: #4A4538;
  --white: #F6F1E4; --silver: #C9C2AE; --ink: #2A1F14;
  --chrome: linear-gradient(180deg, #8C5A3A 0%, #6B3F25 30%, #4F2C18 50%, #7A4B2E 75%, #9C6A46 100%);
  --chrome-flat: linear-gradient(180deg, #D9D6CF, #A7A49B);
  --glow-pink: 0 0 0 2px #F28C28, 0 8px 20px rgba(0,0,0,.5);
  --glow-cyan: 0 0 0 2px #2BB3A6, 0 8px 20px rgba(0,0,0,.5);
  --display: "Righteous", "Futura", "Century Gothic", sans-serif;
  --led-font: "Righteous", "Futura", sans-serif;
  --sign-color: #F2C14E;
  --sign-shadow: 0.05em 0.05em 0 #F28C28, 0.1em 0.1em 0 #2BB3A6;
  --pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cg%20stroke%3D%22%23F28C28%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M50%2050v-22M50%2050v22M50%2050h-22M50%2050h22M50%2050l-15-15M50%2050l15%2015M50%2050l15-15M50%2050l-15%2015%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%232BB3A6%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M150%20140v-18M150%20140v18M150%20140h-18M150%20140h18M150%20140l-12-12M150%20140l12%2012M150%20140l12-12M150%20140l-12%2012%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%225%22%20fill%3D%22%23F28C28%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22140%22%20r%3D%224%22%20fill%3D%22%232BB3A6%22%2F%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2240%22%20r%3D%226%22%20fill%3D%22none%22%20stroke%3D%22%23C9B458%22%20stroke-width%3D%223%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%22160%22%20r%3D%223%22%20fill%3D%22%23C9B458%22%2F%3E%3Cellipse%20cx%3D%22110%22%20cy%3D%22100%22%20rx%3D%2214%22%20ry%3D%226%22%20fill%3D%22none%22%20stroke%3D%22%232BB3A6%22%20stroke-width%3D%222%22%20transform%3D%22rotate%28-25%20110%20100%29%22%2F%3E%3C%2Fsvg%3E"); --pattern-size: 200px 200px; --pattern-opacity: 0.35;
  --bg-glow: radial-gradient(ellipse at 50% 100%, rgba(242, 140, 40, .18), transparent 60%);
  --radius: 18px; --pill: 10px; --arch: 70px; --tubes: none; --dome-side: 14px; --cycle: paused;
}
[data-theme="60s"] .led { text-shadow: none; letter-spacing: 0.06em; background-image: repeating-linear-gradient(90deg, transparent 0 1.1em, rgba(255,255,255,.12) 1.1em calc(1.1em + 2px)); box-shadow: inset 0 0 0 3px #A7A49B, inset 0 4px 8px rgba(0,0,0,.6); }
[data-theme="60s"] .sel { text-shadow: none; color: #F28C28; }
[data-theme="60s"] .btn { background: var(--chrome-flat); color: var(--ink); }
[data-theme="60s"] .btn.neon { background: #F28C28; color: #1E2A2A; text-shadow: none; }
[data-theme="60s"] .tube { border-width: 6px; }

/* ============================================================
   70s - Rock-Ola in a rec room: smoked glass, harvest gold and
   burnt orange, rainbow stripe, mirror-ball shimmer, groovy type
   ============================================================ */
[data-theme="70s"] {
  --cabinet: #2B1B12; --cabinet-2: #3E2A1D; --panel: #1A100A;
  --neon-pink: #E07A2A; --neon-cyan: #D8A62B;
  --lemon: #F2C94C; --grape: #7A3B12; --teal: #6B8E23;
  --led: #FFB347; --led-bg: #1A0F08; --led-dim: #4A2E12;
  --white: #FBEFD9; --silver: #D9BE97; --ink: #2B1B12;
  --chrome: linear-gradient(180deg, #7A4A2A 0%, #5C341A 40%, #3F2311 52%, #6A3D1F 80%, #8A5A36 100%);
  --chrome-flat: linear-gradient(180deg, #E0B36A, #B8863C);
  --glow-pink: 0 0 10px rgba(224, 122, 42, .8), 0 0 30px rgba(224, 122, 42, .35);
  --glow-cyan: 0 0 10px rgba(216, 166, 43, .8), 0 0 30px rgba(216, 166, 43, .35);
  --display: "Shrikhand", "Cooper Black", serif;
  --led-font: "VT323", monospace;
  --sign-color: #F2C94C;
  --sign-shadow: 0.04em 0.04em 0 #E07A2A, 0.08em 0.08em 0 #B5341C, 0.12em 0.12em 0 #6B8E23;
  --pattern: repeating-linear-gradient(135deg, #B5341C 0 18px, #E07A2A 18px 36px, #F2C94C 36px 54px, #6B8E23 54px 72px, transparent 72px 420px);
  --pattern-size: auto; --pattern-opacity: 0.18;
  --bg-glow: radial-gradient(ellipse at 50% 0%, rgba(242, 201, 76, .18), transparent 55%);
  --radius: 30px; --arch: 120px; --tubes: none; --dome-side: 14px; --cycle: paused;
}
[data-theme="70s"] .led { box-shadow: inset 0 2px 10px rgba(0,0,0,.9), inset 0 0 0 2px #7A4A2A; }
[data-theme="70s"] .btn { background: var(--chrome-flat); color: var(--ink); }
[data-theme="70s"] .btn.neon { background: #B5341C; color: #FBEFD9; }
[data-theme="70s"] .search form, [data-theme="70s"] .shout form { background: var(--chrome-flat); }
[data-theme="70s"] .tube { border-color: #E0B36A; box-shadow: inset 0 0 40px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.6); }
[data-theme="70s"] .sign { letter-spacing: 0.01em; }

/* ============================================================
   80s - synthwave arcade: chrome text, magenta / cyan, grid horizon,
   VHS scanlines over the player
   ============================================================ */
[data-theme="80s"] {
  --cabinet: #0B0820; --cabinet-2: #171140; --panel: #06041A;
  --neon-pink: #FF2D95; --neon-cyan: #19E6FF;
  --lemon: #FFE45C; --grape: #6A00F4; --teal: #19E6FF;
  --led: #19E6FF; --led-bg: #06041A; --led-dim: #0B3A42;
  --display: "Audiowide", "Orbitron", "Eurostile", sans-serif;
  --sign-color: #fff;
  --sign-shadow: 0 1px 0 #ccc, 0 2px 0 #bbb, 0 3px 0 #999, 0 4px 0 #666, 0 0 16px #FF2D95, 0 0 40px rgba(255, 45, 149, .6);
  --pattern: linear-gradient(rgba(25, 230, 255, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(25, 230, 255, .35) 1px, transparent 1px);
  --pattern-size: 60px 60px; --pattern-opacity: 0.25;
  --bg-glow: linear-gradient(180deg, #0B0820 0%, #0B0820 55%, rgba(255, 45, 149, .25) 100%);
  --radius: 10px; --pill: 8px; --arch: 20px; --tubes: none; --dome-side: 14px; --cycle: paused;
}
[data-theme="80s"] body::before, body[data-theme="80s"]::before { transform: perspective(600px) rotateX(60deg) translateY(30%); transform-origin: 50% 100%; }
[data-theme="80s"] .led { text-shadow: 0 0 2px var(--led), 0 0 10px rgba(25, 230, 255, .7); background-image: none; box-shadow: inset 0 2px 10px rgba(0,0,0,.9), inset 0 0 0 2px #FF2D95; }
[data-theme="80s"] .sel { color: #FF2D95; text-shadow: 0 0 8px rgba(255, 45, 149, .8); }
[data-theme="80s"] .btn { font-family: var(--display); }

/* ============================================================
   90s - the default tokens above: neon tubes, chrome dome,
   squiggle wallpaper, bubble tubes, LED readout
   ============================================================ */

/* ============================================================
   2000s - TouchTunes touchscreen era: brushed aluminum, glossy
   aqua buttons, blue glass gradients, Helvetica
   ============================================================ */
[data-theme="2000s"] {
  --cabinet: #0E1C33; --cabinet-2: #16294A; --panel: #091427;
  --neon-pink: #3B9CFF; --neon-cyan: #7FD3FF;
  --lemon: #DDEBFF; --grape: #0B2E6B; --teal: #3B9CFF;
  --led: #BFE3FF; --led-bg: #0A1A33; --led-dim: #1E3A66;
  --white: #F4F8FF; --silver: #A9BBD6; --ink: #10233F;
  --chrome: repeating-linear-gradient(180deg, #E9EDF2 0 2px, #C9D0D9 2px 3px), linear-gradient(180deg, #F3F5F8, #AEB6C2);
  --chrome-flat: linear-gradient(180deg, #F3F5F8, #C2C9D3);
  --glow-pink: 0 0 0 1px rgba(255,255,255,.4), 0 8px 24px rgba(59, 156, 255, .35);
  --glow-cyan: 0 0 0 1px rgba(255,255,255,.4), 0 8px 24px rgba(127, 211, 255, .35);
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --led-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sign-color: #fff;
  --sign-shadow: 0 2px 2px rgba(0,0,0,.6), 0 0 18px rgba(59, 156, 255, .6);
  --pattern: radial-gradient(ellipse at 50% 30%, rgba(127, 211, 255, .25), transparent 60%);
  --pattern-size: auto; --pattern-opacity: 1;
  --bg-glow: linear-gradient(180deg, #16294A, #0E1C33 60%, #07101F);
  --radius: 14px; --pill: 12px; --arch: 14px; --tubes: none; --dome-side: 14px; --cycle: paused;
}
[data-theme="2000s"] .sign { font-weight: 800; letter-spacing: -0.02em; }
[data-theme="2000s"] .led { font-weight: 700; text-shadow: none; background-image: linear-gradient(180deg, rgba(255,255,255,.14), transparent 50%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), inset 0 2px 8px rgba(0,0,0,.6); border-radius: 8px; }
[data-theme="2000s"] .sel { text-shadow: none; font-weight: 700; color: #7FD3FF; }
[data-theme="2000s"] .btn { font-weight: 700; letter-spacing: 0; text-transform: none;
  background: linear-gradient(180deg, #8FD3FF 0%, #3B9CFF 50%, #1C7BE0 51%, #4FB2FF 100%); color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px rgba(0,0,0,.5); }
[data-theme="2000s"] .btn.ghost { background: linear-gradient(180deg, #F3F5F8, #C2C9D3); color: var(--ink); text-shadow: none; }
[data-theme="2000s"] .tube { border-width: 1px; border-color: rgba(255,255,255,.35); background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 40%); }

/* ============================================================
   Modern - flat and dark, big soft cards, clean sans, album-art glow
   ============================================================ */
[data-theme="modern"] {
  --cabinet: #0F0F12; --cabinet-2: #1B1B20; --panel: #141418;
  --neon-pink: #1DB954; --neon-cyan: #1DB954;
  --lemon: #FFFFFF; --grape: transparent; --teal: #1DB954;
  --led: #FFFFFF; --led-bg: #1B1B20; --led-dim: #2E2E36;
  --white: #FFFFFF; --silver: #A7A7AD; --ink: #0F0F12;
  --chrome: #FFFFFF; --chrome-flat: #2A2A31;
  --glow-pink: 0 12px 32px rgba(0,0,0,.6); --glow-cyan: 0 12px 32px rgba(0,0,0,.6);
  --display: "Inter", system-ui, sans-serif;
  --led-font: "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --sign-color: #fff; --sign-shadow: none;
  --pattern: none; --pattern-opacity: 0;
  --bg-glow: radial-gradient(ellipse at 20% 0%, rgba(29, 185, 84, .12), transparent 50%);
  --radius: 16px; --pill: 999px; --arch: 16px; --tubes: none; --dome-side: 14px; --cycle: paused;
}
[data-theme="modern"] .sign { font-weight: 800; letter-spacing: -0.03em; }
[data-theme="modern"] .led { font-weight: 600; text-shadow: none; background-image: none; box-shadow: none; border-radius: 12px; }
[data-theme="modern"] .sel { text-shadow: none; color: var(--silver); font-weight: 600; }
[data-theme="modern"] .btn { font-weight: 700; box-shadow: none; }
[data-theme="modern"] .btn:active { transform: scale(.97); box-shadow: none; }
[data-theme="modern"] .btn.neon { background: #1DB954; color: #0F0F12; text-shadow: none; box-shadow: none; }
[data-theme="modern"] .btn.ghost { background: #2A2A31; color: #fff; box-shadow: none; }
[data-theme="modern"] .tube { border: 0; background: var(--cabinet-2); box-shadow: none; }
[data-theme="modern"] .chrome { box-shadow: none; }