/* Neon — WHOA BRO's own look. Everything the host draws (result, sheets,
 * leaderboard, credits, toasts) is lit the way the board is: black ground,
 * glowing tubes for buttons, glowing letters for labels. The two accents come
 * from the player's colour scheme (--bp-accent, --bp-accent-2, set by the
 * view's paintPage), so a Gold player gets gold buttons. One appearance, dark,
 * repeated under both theme selectors so a toggle never half-inverts it. */

@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('/themes/neon/space-grotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/themes/neon/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/themes/neon/space-grotesk-700.woff2') format('woff2'); }

:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --ground: #050506;
  --panel: #0b0b10;
  --panel-2: #13131b;
  --ink: #f4f4ff;
  --ink-dim: #9aa0b8;
  --rule: #1c1c28;
  --rule-soft: #22222e;
  --tile: #2a2a38;
  --accent: var(--bp-accent, #ff4fd8);
  --accent-ink: #08080c;
  --good: var(--bp-accent-2, #5ef2e6);
  --warn: #ffd23f;
  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --ui: 'Space Grotesk', ui-sans-serif, -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --radius: 14px;
  --rule-w: 1.5px;
  --shadow-hard: none;
  --glow-a: var(--bp-accent, #ff4fd8);
  --glow-b: var(--bp-accent-2, #5ef2e6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }

body { background: var(--ground); color: var(--ink); }

/* ---- buttons: a lit tube, and an outlined one */
.btn {
  border: 0; border-radius: var(--radius);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 16px;
  color: var(--accent-ink); background: var(--glow-a);
  box-shadow: 0 0 0 1px var(--glow-a), 0 0 22px -2px var(--glow-a), 0 0 60px -12px var(--glow-a);
  transition: transform .08s, box-shadow .15s;
}
.btn:active { transform: scale(.97); box-shadow: 0 0 0 1px var(--glow-a), 0 0 12px var(--glow-a); }
.btn.ghost {
  background: rgba(0,0,0,.4); color: var(--ink); font-weight: 600; font-size: 14px; letter-spacing: .1em;
  box-shadow: inset 0 0 0 1.5px var(--glow-b), 0 0 16px -6px var(--glow-b);
}
.btn.ghost:active { box-shadow: inset 0 0 0 1.5px var(--glow-b), 0 0 8px var(--glow-b); }
.btn:disabled { background: var(--panel-2); color: var(--ink-dim); box-shadow: inset 0 0 0 1.5px var(--rule-soft); cursor: default; }
.btn:disabled:active { transform: none; }

/* ---- type: labels glow, headlines are lit letters */
.label { color: var(--glow-b); letter-spacing: .28em; font-weight: 700; text-shadow: 0 0 10px color-mix(in srgb, var(--glow-b) 70%, transparent); }
.big {
  color: #fff; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  text-shadow: 0 0 6px var(--glow-a), 0 0 18px var(--glow-a), 0 0 42px color-mix(in srgb, var(--glow-a) 60%, transparent);
}
.muted { color: var(--ink-dim); }
.textlink { color: var(--ink); opacity: .65; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.textlink:hover { opacity: 1; color: var(--ink); }

/* ---- sheets: black glass with a lit top edge */
.sheet { background: rgba(0,0,0,.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet-body {
  background: rgba(8,8,12,.94); border: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -1.5px 0 var(--glow-a), 0 -10px 40px -10px var(--glow-a);
}
@media (min-width: 700px) { .sheet-body { border-radius: 22px; box-shadow: 0 0 0 1.5px var(--glow-a), 0 0 50px -10px var(--glow-a); } }
.sheet-body h2 {
  font-size: 22px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px;
  text-shadow: 0 0 14px var(--glow-a);
}
.sheet-body input {
  background: #000 !important; border: 0 !important; color: var(--ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--glow-b), 0 0 14px -6px var(--glow-b); border-radius: 12px !important;
  font-size: 18px !important; letter-spacing: .06em;
}
.sheet-body input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--glow-b), 0 0 20px -4px var(--glow-b); }

/* ---- leaderboard, credits, toast */
ol.board li:nth-child(odd) { background: rgba(255,255,255,.035); }
ol.board li.me { outline: 0; box-shadow: inset 0 0 0 1.5px var(--glow-a), 0 0 14px -4px var(--glow-a); }
.credits h2 { color: var(--glow-b); text-shadow: 0 0 10px var(--glow-b); }
.credit-list li { border-top-color: rgba(255,255,255,.07); }
#toast { background: #000; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--glow-b), 0 0 18px -4px var(--glow-b); letter-spacing: .06em; }
.seg-opt[aria-checked="true"] { background: var(--glow-a); color: #08080c; }