/* SongBuzz — "the chart show". The screen is a pop-chart broadcast: flat colour fields per round,
   black and white slabs like TV straps, players ranked as chart entries. Shared by TV, phones and quizmaster. */
@font-face {
  font-family: 'Archivo'; src: url('/fonts/archivo-latin-wdth-normal.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo'; src: url('/fonts/archivo-latin-ext-wdth-normal.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #121113;          /* studio black: slabs, type on colour */
  --ink-soft: #2a2729;
  --paper: #fffaf0;        /* strap white */
  --brand: #ff5a1f;        /* broadcast orange: lobby and the logo */
  --round: var(--brand);   /* each round floods the screen with its own colour */
  --good: #00c47d;
  --bad: #ff3b30;
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
/* Round colours, set on <body data-round="…">. All take black type. */
[data-round='fastest'] { --round: #ffc21a; }
[data-round='buzzer']  { --round: #ff4a3d; }
[data-round='year']    { --round: #3cb4ff; }
[data-round='snippet'] { --round: #18c98d; }
[data-round='twisted'] { --round: #ff6fb5; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--round); color: var(--ink);
  font-family: var(--font); font-stretch: 100%; font-weight: 450;
  -webkit-tap-highlight-color: transparent; overflow-x: hidden;
  transition: background-color .6s var(--ease);
  font-kerning: normal; text-rendering: optimizeLegibility;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 900; font-stretch: 75%; line-height: .92; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
.muted { opacity: .72; }
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; }

/* ---------------------------------------------------------------- logo: a broadcast bug */
.logo { display: inline-flex; align-items: center; gap: .3em; background: var(--ink); color: var(--paper); border-radius: .28em; padding: .14em .42em .16em .3em; font-weight: 900; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.logo .dot { width: .62em; height: .62em; border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 .14em var(--paper); }
.logo b { color: var(--brand); font-weight: 900; }

/* ---------------------------------------------------------------- a song: title and artist as two straps */
.track { display: grid; justify-items: start; gap: .18em; min-width: 0; }
.track-title { background: var(--paper); color: var(--ink); font-weight: 850; font-stretch: 80%; line-height: 1.02; padding: .08em .32em .12em; border-radius: .12em; max-width: 100%; overflow-wrap: anywhere; letter-spacing: -0.012em; }
.track-artist { background: var(--ink); color: var(--paper); font-weight: 650; font-stretch: 112%; text-transform: uppercase; letter-spacing: .04em; font-size: .52em; line-height: 1.1; padding: .3em .55em .32em; border-radius: .14em; max-width: 100%; overflow-wrap: anywhere; }
.track.plain .track-title, .track.plain .track-artist { background: none; padding-left: 0; padding-right: 0; color: inherit; }
.track.plain .track-artist { opacity: .78; }

/* ---------------------------------------------------------------- chart-number box */
.num { display: inline-grid; place-items: center; background: var(--ink); color: var(--round); font-weight: 900; font-stretch: 125%; line-height: 1; border-radius: .14em; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; border: 0; text-decoration: none; border-radius: .28em; padding: .62em 1.15em .66em; background: var(--ink); color: var(--paper); font-weight: 850; font-stretch: 100%; font-size: 1.15em; letter-spacing: .005em; line-height: 1; transition: transform .12s var(--ease), background-color .2s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .35; cursor: default; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 .14em var(--ink); }
.btn.paper { background: var(--paper); color: var(--ink); }
.btn.big { font-size: 1.5em; padding: .6em 1.2em .64em; }

/* settings toggles */
.chips { display: flex; flex-wrap: wrap; gap: .4em; }
.chip { display: inline-flex; align-items: center; gap: .4em; border: 0; border-radius: .25em; padding: .5em .8em .52em; background: transparent; color: var(--ink); font-weight: 700; line-height: 1.05; box-shadow: inset 0 0 0 .12em var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.chip-n { display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; border-radius: .2em; background: var(--round); color: var(--ink); font-weight: 900; font-stretch: 125%; font-size: .82em; }
.set-group { margin-bottom: 1.1em; }
.set-row { display: flex; flex-wrap: wrap; gap: 0 2em; }
.set-label { font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: .06em; font-size: .72em; margin-bottom: .55em; }
.set-hint { font-weight: 500; text-transform: none; letter-spacing: 0; font-stretch: 100%; opacity: .7; margin-left: .4em; font-size: 1.3em; }
.stepper { display: inline-flex; align-items: center; gap: .5em; }
.stepper .chip { width: 2.3em; justify-content: center; padding: .5em 0; }
.stepper-val { font-weight: 900; font-stretch: 125%; font-size: 1.6em; min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.search-row { display: flex; gap: .4em; margin-top: .5em; }
.search-row input { flex: 1; min-width: 0; border: 0; border-radius: .25em; padding: .55em .8em; background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 .12em var(--ink); }
.search-row input:focus { outline: none; box-shadow: inset 0 0 0 .2em var(--ink); }

.error { background: var(--ink); color: var(--paper); border-radius: .3em; padding: .7em 1em; margin: .8em 0; font-weight: 600; display: flex; gap: .6em; align-items: center; }
.error .ic { color: var(--bad); }

/* connection lost */
.conn { position: fixed; top: .8rem; left: 50%; transform: translateX(-50%); z-index: 99; display: none; background: var(--ink); color: var(--paper); border-radius: 99px; padding: .4rem .9rem; font-weight: 700; font-size: .85rem; }
body.offline .conn { display: block; }

.spinner { width: 2.6em; height: 2.6em; border-radius: 50%; border: .3em solid rgba(18, 17, 19, .18); border-top-color: var(--ink); animation: spin .8s linear infinite; margin: 0 auto; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { transform: translateY(.6em); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { from { transform: scale(.85); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }