@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Barlow:wght@500;600;700;800&display=swap');

/* Studio set: stage black, board blue, marquee-bulb yellow, tally-light red. */
:root {
  --ink: #0f0e13;
  --panel: #1a1922;
  --panel-2: #23212d;
  --line: #312e3c;
  --text: #f2f0ea;
  --muted: #9a96a8;
  --set: #1a2fd0;
  --set-deep: #111f96;
  --bulb: #ffcf3f;
  --bulb-dim: #5c4a1a;
  --tally: #e5392b;
  --go: #27a85f;
  --cue: #efe6cf;
  --cue-ink: #2a2418;
  --sign: 'Bungee', Impact, sans-serif; /* wordmark, dollar values, scores, timers */
  --ui: 'Barlow', 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 500 16px/1.4 var(--ui); color: var(--text); background: var(--ink); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--bulb); }
code { font: 500 .9em ui-monospace, Consolas, monospace; }

/* Wordmark */
.logo { font: 400 1.5rem/1 var(--sign); color: var(--bulb); white-space: nowrap; }
.logo b { font-weight: 400; color: var(--text); }
.logo small { font: 700 .42em var(--ui); letter-spacing: .14em; color: var(--muted); margin-left: .7em; vertical-align: .25em; }

/* Controls: physical console buttons */
.btn {
  font: 700 1rem/1 var(--ui); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .7em 1.1em; border: 1px solid #000; border-radius: 4px; background: var(--panel-2); box-shadow: 0 3px 0 #000;
  transition: transform .06s, box-shadow .06s, filter .12s;
}
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--bulb); outline-offset: 2px; }
.btn.primary { background: var(--bulb); color: #1a1405; }
.btn.good { background: var(--go); }
.btn.bad { background: var(--tally); }
.btn.blue { background: var(--set); }
.btn.big { font-size: 1.1rem; padding: .85em 1.3em; }
.btn.small { font-size: .82rem; padding: .4em .7em; box-shadow: 0 2px 0 #000; }
.btn.ghost { background: transparent; border-color: var(--line); box-shadow: none; }
kbd { font: 700 .72em var(--ui); padding: .15em .45em; border-radius: 3px; border: 1px solid currentColor; opacity: .75; }

select, textarea, input:not([type]), input[type=text], input[type=number] {
  font: 500 1rem var(--ui); color: var(--text); background: #0a090d; border: 1px solid var(--line); border-radius: 4px; padding: .55em .7em;
}
select option { background: var(--panel); }
input[type=number] { width: 7.5em; }
input[type=radio] { accent-color: var(--bulb); width: 1.1em; height: 1.1em; }
input[type=checkbox] { appearance: none; width: 1.4em; height: 1.4em; margin: 0; flex: none; border: 2px solid var(--muted); border-radius: 3px; cursor: pointer; position: relative; }
input[type=checkbox]:checked { background: var(--bulb); border-color: var(--bulb); }
input[type=checkbox]:checked::after { content: ''; position: absolute; left: .38em; top: .12em; width: .32em; height: .65em; border: solid #1a1405; border-width: 0 .17em .17em 0; transform: rotate(45deg); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.chip { display: inline-flex; align-items: center; gap: .5em; font: 600 .85rem var(--ui); padding: .3em .7em; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); }
.dot { width: .6em; height: .6em; border-radius: 50%; background: var(--go); flex: none; }
.dot.off { background: #55525f; }
.hint { color: var(--muted); font-size: .9rem; }
.neg { color: var(--tally) !important; }
.eyebrow { font: 700 .78rem var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* The board */
.grid { display: grid; gap: 6px; padding: 6px; background: #000; }
.cat, .cell { display: grid; place-items: center; text-align: center; padding: .5em; min-height: 56px; background: var(--set); }
.cat { font: 800 var(--cat, 1rem)/1.05 var(--ui); text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 #000; overflow: hidden; } /* --cat: set by fitCats() */
.cell { font: 400 2rem/1 var(--sign); color: var(--bulb); text-shadow: 3px 3px 0 #000; }
.cell.used { color: transparent; text-shadow: none; background: var(--set-deep); }
.grid.enter .cat, .grid.enter .cell { animation: tileIn .35s ease-out backwards; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes tileIn { from { opacity: 0; transform: rotateX(70deg); } }

/* Marquee bulbs: drawBulbs() (common.js) lays them along the middle of this padding band, a whole number per side
   so every corner gets exactly one. They sit dim, light up, or chase (alternate bulbs blink in turn). */
.bulbs { position: relative; padding: 1.15em; background: #000; border-radius: .5em; --b: var(--bulb-dim); }
.bulb-layer { position: absolute; inset: 0; pointer-events: none; }
.bulb-layer circle { fill: var(--b); }
.bulbs.lit { --b: var(--bulb); }
.bulbs.lit .bulb-layer { filter: drop-shadow(0 0 .2em #ffb300); }
.bulbs.chase .bulb-layer .a { animation: blink .5s steps(1) infinite; }
.bulbs.chase .bulb-layer .b { animation: blink .5s steps(1) infinite .25s; }
@keyframes blink { 50% { opacity: .2; } }

/* Countdown: a row of bulbs going dark from both ends toward the middle */
.timer { --d: 15px; height: 14px; border-radius: 7px; background: radial-gradient(circle, var(--bulb-dim) 0 calc(var(--d) * .23), transparent calc(var(--d) * .3)) 0 0 / var(--d) 100% space, #000; }
.timer i { display: block; height: 100%; background: radial-gradient(circle, var(--bulb) 0 calc(var(--d) * .23), transparent calc(var(--d) * .3)) 0 0 / var(--d) 100% space; filter: drop-shadow(0 0 3px #ffb300); animation: drain linear forwards; }
@keyframes drain { to { clip-path: inset(0 50% 0 50%); } }

/* Scores (host + phone); the stream board restyles these as podiums */
.scores { display: flex; gap: 8px; flex-wrap: wrap; }
.player { min-width: 0; padding: 8px 12px; border-radius: 4px; background: var(--panel); border: 1px solid var(--line); }
.player .name { font: 700 1.1rem/1.25 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .score { font: 400 1.5rem/1.1 var(--sign); color: var(--bulb); }
.player.answering { border-color: var(--bulb); background: #2a2410; }
.player.control { box-shadow: inset 4px 0 0 var(--bulb); }
.player.offline { opacity: .45; }
.score.up { animation: up 1s; }
.score.down { animation: down 1s; }
@keyframes up { 20%, 60% { color: var(--go); } }
@keyframes down { 20%, 60% { color: var(--tally); } }

.clue-text { white-space: pre-line; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }