@import url('fonts/fonts.css');

/* 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; }
/* A few short points under a form field, e.g. what joining with your Twitch channel does */
.pad-glyph { height: 1.5em; vertical-align: -.4em; }
.pad-key { font: 700 .82em var(--ui); }
.points { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; color: var(--muted); line-height: 1.35; }
.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); }
/* --pc: a player's colour (set by the board and the phone page while that player is answering); unset = the usual yellow. */
.bulbs.lit { --b: var(--pc, var(--bulb)); }
.bulbs.lit .bulb-layer { filter: drop-shadow(0 0 .2em var(--pc, #ffb300)); }
.bulb-layer circle { transition: fill .2s; }
.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(--pc, var(--bulb)); background: #2a2410; }
.player.control { box-shadow: inset 4px 0 0 var(--pc, var(--bulb)); }
.cdot { display: none; width: .7em; height: .7em; border-radius: 50%; margin-right: .45em; background: var(--pc, transparent); flex: none; }
.cdot.on { display: inline-block; }
.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; }

/* Dialogs (confirm boxes, Host controls, the score box) */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; min-width: 320px; max-width: min(520px, calc(92vw / var(--zoom, 1))); max-height: calc(92vh / var(--zoom, 1)); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.confirm-text { margin: 0 0 14px; font-weight: 600; line-height: 1.45; }
.ask-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; justify-content: end; gap: 8px; margin-top: 4px; } /* buttons in a row share one width */

/* Controller focus: a bright ring on whatever the D-pad has reached (only while a controller is in use) */
body.pad :focus { outline: 3px solid var(--bulb) !important; outline-offset: 2px; }
body.pad .cell:focus, body.pad .cat:focus { outline-offset: -3px; }

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

/* The stats sheet on a contestant's screen (buildStatsSheet() in common.js) */
.stats-title { font: 800 1.2rem var(--ui); letter-spacing: .06em; text-transform: uppercase; color: #c3c9f5; text-align: center; }
.stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.stat-card { background: var(--set-deep); border-radius: 3px; padding: 10px 12px; min-width: 0; }
.stat-card small { display: block; font: 700 .72rem var(--ui); letter-spacing: .06em; text-transform: uppercase; color: #c3c9f5; }
.stat-card b { display: block; font: 800 1.35rem/1.2 var(--ui); color: var(--bulb); overflow-wrap: anywhere; }
.stat-card span { display: block; font: 600 .9rem var(--ui); }
.stats-table-wrap { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font: 600 1rem var(--ui); white-space: nowrap; }
.stats-table th { font: 700 .72rem var(--ui); letter-spacing: .06em; text-transform: uppercase; color: #c3c9f5; text-align: right; padding: 0 10px 6px; }
.stats-table td { text-align: right; padding: 8px 10px; border-top: 1px solid rgba(255, 255, 255, .15); }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; font-weight: 800; position: sticky; left: 0; background: var(--set); }
.stats-table tr.me td { background: rgba(255, 207, 63, .16); }
.stats-table tr.me td:first-child { background: #3a3d96; }
.stats-table td.neg { color: #ff8a80; }
@media (max-width: 520px) { /* a phone: tighter table so most columns fit, the rest scroll */
  .stats-table { font-size: .82rem; }
  .stats-table th { font-size: .62rem; padding: 0 6px 6px; letter-spacing: .03em; white-space: normal; line-height: 1.1; vertical-align: bottom; }
  .stats-table td { padding: 8px 6px; }
  .stats-table th:first-child, .stats-table td:first-child { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
}
  .cat.has-about { position: relative; cursor: pointer; }
  .cat-i { position: absolute; top: 3px; right: 3px; width: 1.5em; height: 1.5em; border-radius: 50%; background: #ffffffd0; color: var(--set); font: 800 .8rem/1.5em var(--ui); text-align: center; text-shadow: none; text-transform: none; }
#catNote { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; max-width: min(520px, 92vw); padding: 10px 38px 10px 16px; border-radius: 4px; background: #141318; border: 1px solid var(--bulb); font-weight: 600; box-shadow: 0 3px 0 #000; cursor: pointer; }
#catNote::after { content: '¹5'; position: absolute; right: 12px; top: 10px; color: var(--muted); font-size: .9rem; }