/* theme.css: "Kobalt Hitparade" (strategie/analyse/songquiz/bronrapport_muziekbingo_design.md).
 * Tokens voor tv, telefoon en afstandsbediening. Thema-edities wisselen alleen deze tokens. */
@font-face { font-family: 'Bagel Fat One'; src: url(fonts/BagelFatOne.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(fonts/BricolageGrotesque.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
:root {
  --bg: #14207A; --bg2: #0f1862; --panel: #1D35A6; --brand: #2E4BD6; --cream: #FFF7E8; --fold: #EBD6B3;
  --gold: #FFD35C; --hot: #FF7A6B; --ink: #221F1C; --bad: #C9496B; --muted: rgba(255,247,232,.72);
  --font-display: 'Bagel Fat One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-ui: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--cream); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: .85em; }
.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.logo { font: 400 40px var(--font-display); letter-spacing: .01em; white-space: nowrap; }
.logo b { color: var(--gold); font-weight: 400; }
.logo.small { font-size: 34px; }
.chip { display: inline-block; font: 700 18px var(--font-ui); background: rgba(255,247,232,.1); border: 2px solid rgba(255,247,232,.18); padding: 7px 16px; border-radius: 999px; }
.chip.gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.chip.hot { background: var(--hot); color: var(--ink); border-color: var(--hot); }
.chip.bad { background: rgba(201,73,107,.25); border-color: var(--bad); }
.chip.on { background: var(--cream); color: var(--ink); }
.btn { font: 800 20px var(--font-ui); background: rgba(255,247,232,.1); border: 2px solid rgba(255,247,232,.3); color: var(--cream); padding: 12px 22px; border-radius: 16px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn.big { font-size: 24px; padding: 16px 28px; border-radius: 18px; }
.btn.primary { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn:disabled { opacity: .45; cursor: default; }
.btn:focus-visible, .opt:focus-visible, .chip:focus-visible { outline: 4px solid var(--hot); outline-offset: 3px; }
/* papier met omgevouwen hoek (uit het logo) */
.paper { background: var(--cream); color: var(--ink); border-radius: 14px; position: relative;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.paper::after { content: ''; position: absolute; top: 0; right: 0; width: 26px; height: 26px; background: var(--fold); border-bottom-left-radius: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }