/* ==========================================================================
   THEME - "Editorial night". Loaded LAST on every page. Flattens the old game-show chrome:
   thin hairlines, no radii, Syne capitals for labels/buttons, Cormorant Garamond for text, terracotta accent.
   Colours/fonts/radii come from tokens.css; this file only changes component shape and type treatment.
   ========================================================================== */
html { font-size: 17px; }
body { font-variant-numeric: lining-nums; font-feature-settings: "lnum"; font-family: var(--font); font-size: var(--fs-base); line-height: 1.5; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: .035; background: var(--grain); mix-blend-mode: screen; }

/* ---- type: Syne for display, labels, numbers; Cormorant for reading text ---- */
h1, h2, h3, h4, .display, .h-display, .hero-title, .auth-card h1, .st-title, .tp-name, .lk-name, .empty-state strong, .sc-empty b, .team h2, .monitor-bar h2, .dz-empty b, :is(.sc, .sc-dialog) :is(h1, h2, h3, h4) {
  font-family: var(--font-serif); font-weight: 500; font-stretch: 100%; text-transform: none; letter-spacing: 0; line-height: 1.12; }
h1, .display, .h-display, .hero-title { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 400; letter-spacing: -.01em; }
h2 { font-size: 1.7rem; } h3 { font-size: 1.3rem; } h4 { font-size: 1.1rem; }
label, .label, th, .eyebrow, .kicker, .tag, .tab, summary, legend, small.cap, .stat-label, .muted.cap {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-xs); font-weight: 500; }
.tnum, .timer, .score, [class*="timer"], [class*="score"] { font-variant-numeric: tabular-nums; }
.muted, small, .small, .hint { color: var(--muted); }
a { color: var(--accent-text); }

/* ---- buttons: flat, outlined, uppercase Syne; primary = solid terracotta ---- */
.buzz, button.btn, .btn, .button {
  --b-face: transparent; --b-edge: transparent; --b-ink: var(--text);
  background: transparent; color: var(--text); border: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; margin-bottom: 0;
  font: 500 var(--fs-xs)/1 var(--font-display); font-stretch: 100%; text-transform: uppercase; letter-spacing: .12em; padding: .9em 1.25em; min-height: var(--touch); white-space: nowrap;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.buzz:hover, .btn:hover { filter: none; border-color: var(--accent); color: var(--accent-text); background: transparent; }
.buzz:active, .buzz[aria-pressed="true"] { transform: none; box-shadow: none; background: var(--accent-soft); }
.buzz:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--focus); }
.buzz:not(.quiet):not(.ok):not(.bad):not(.sky):not(.team):not(.ghost), .btn-primary, .btn.primary {
  --b-face: var(--accent); background: var(--accent); border-color: var(--accent); color: var(--bg); }
.buzz:not(.quiet):not(.ok):not(.bad):not(.sky):not(.team):not(.ghost):hover, .btn-primary:hover { background: transparent; color: var(--accent-text); border-color: var(--accent); }
.buzz.ok { background: var(--ok); border-color: var(--ok); color: var(--bg); } .buzz.ok:hover { background: transparent; color: var(--ok); }
.buzz.bad { background: transparent; border-color: var(--bad); color: var(--bad); } .buzz.bad:hover { background: var(--bad); color: var(--bg); }
.buzz.sky { background: transparent; border-color: var(--team-2); color: var(--team-2); }
.buzz.quiet { background: transparent; border-color: var(--line-strong); color: var(--text); box-shadow: none; }
.buzz.team { background: transparent; border-color: var(--team, var(--team-1)); color: var(--team, var(--team-1)); box-shadow: none; }
.buzz.team:hover { background: var(--team, var(--team-1)); color: var(--bg); }
.buzz.sm { padding: .7em 1.1em; min-height: 34px; } .buzz.lg { padding: 1.15em 2em; }
.twitch-btn, .btn-twitch { background: #9146ff !important; border-color: #9146ff !important; color: #fff !important; }
.twitch-btn:hover, .btn-twitch:hover { background: transparent !important; color: #b58cff !important; }

/* ---- panels: flat surface + hairline, no glow, no rounded corners ---- */
.set, .card, .panel, .glass, details.card { background: var(--surface); border: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.set::before, .set::after { display: none; }
.card:hover { border-color: var(--line-strong); }
.marquee::before { display: none; }

/* ---- tags / chips / pills ---- */
.tag, .chip, .pill, .badge { border-radius: 999px; background: transparent; border: 1px solid var(--line-strong); color: var(--muted); padding: .3em .85em; }
.tag.gold { color: var(--accent-text); border-color: rgba(205,92,69,.45); }
.tag.easy { color: var(--ok); border-color: rgba(95,167,122,.4); background: transparent; }
.tag.medium { color: var(--warn); border-color: rgba(201,149,63,.4); background: transparent; }
.tag.hard { color: var(--bad); border-color: rgba(212,97,78,.4); background: transparent; }
.tag.ok { color: var(--ok); background: transparent; } .tag.bad { color: var(--bad); background: transparent; }
.tag.on, .chip.on, .chip.active, .tag[aria-pressed="true"], .tag.active { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }
.onair { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); border-radius: 999px; font-family: var(--font-display); letter-spacing: .15em; }
.onair::before { background: var(--accent); box-shadow: none; }

/* ---- inputs: underline fields ---- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea {
  background: transparent; color: var(--text); border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; box-shadow: none;
  font-family: var(--font); font-size: var(--fs-md); padding: .6em .15em; }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--accent); box-shadow: none; }
input::placeholder, textarea::placeholder { color: var(--muted); }
select option { background: var(--surface); color: var(--text); }
textarea { border: 1px solid var(--line-strong); padding: .7em .8em; }
textarea:focus { border-color: var(--accent); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accent); }

/* ---- tables ---- */
table { border-collapse: collapse; }
th { color: var(--muted); border-bottom: 1px solid var(--line-strong); }
td { border-bottom: 1px solid var(--line); }
tbody tr:hover td { background: rgba(224,222,219,.025); }

/* ---- progress / meters ---- */
progress, .progress, .meter, .bar { border-radius: 0; }
.progress > *, .meter > *, .bar > i { background: var(--accent); border-radius: 0; }

/* ---- modals / dialogs / toasts ---- */
dialog, .modal, .drawer, .toast, [role=dialog] { border-radius: 0; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgba(0,0,0,.6); color: var(--text); }
::backdrop { background: rgba(8,7,7,.72); }

/* ---- header / nav / user chip ---- */
header.site, .site-header, .topbar, .app-header { background: rgba(15,14,14,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.brand-name, .brand { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .18em; font-weight: 500; }
.brand-mark { border-radius: 50%; background: var(--accent) !important; box-shadow: none !important; color: var(--bg); }
nav a, .nav a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-xs); }
.user-chip { border: 0; background: transparent; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-xs); }
.user-chip .role { border-radius: 999px; background: transparent !important; border: 1px solid var(--accent); color: var(--accent-text) !important; }

/* ---- stage / backgrounds: remove the gold spotlight, keep a whisper of warmth ---- */
.stage::before, .stage::after { opacity: .35; }
.stage-inner .set, .stage-inner .card { border-radius: 0; }

/* ---- selection + scrollbar ---- */
::selection { background: var(--accent); color: #fff; }
* { scrollbar-color: #3a3836 transparent; }
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }

/* ---- control-room details ---- */
.sc-tabs { border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: 0; gap: 0; }
.sc-tab { border-radius: 0; font: 500 var(--fs-xs)/1 var(--font-display) !important; font-stretch: 100% !important; text-transform: uppercase; letter-spacing: .14em; min-block-size: 48px; padding: 0 1.3rem; color: var(--muted); }
.sc a.sc-tab { color: var(--muted); }
.sc a.sc-tab.on { background: transparent; color: var(--accent-text); box-shadow: inset 0 -2px 0 var(--accent); }
.sc-tab:hover { background: rgba(224,222,219,.04); }
.sc-seg, .sc-seg-b, .sc-rail, .sc-rail-b { border-radius: 0 !important; }
.sc-seg-b, .sc-rail-b { font-family: var(--font-display); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: var(--fs-xs); font-stretch: 100%; }
.tm { border-radius: 0; background: var(--bg-raised) !important; border: 1px solid var(--line-strong); box-shadow: none; }
.tm-num { font: 500 clamp(3.5rem, 20cqi, 7rem)/1 var(--font-display) !important; font-stretch: 100% !important; text-shadow: none !important; letter-spacing: 0; }
.stage-timer, .tm-bar, .tm-track { border-radius: 0; }
[class*="avatar"], .avatar { border-radius: 50%; }
.page-header h1, .sc-head h1 { font-family: var(--font-serif); }
.flash, .alert, .notice, .sc-note { border-radius: 0; }

.su-chips { border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 0; }
.su-chip { border-radius: 0; font: 500 var(--fs-xs)/1 var(--font-display) !important; font-stretch: 100% !important; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); background: transparent; }
.su-chip:hover, .su-chip.on { color: var(--accent-text); background: transparent; }
.sc-fieldset legend, .sc-fieldset > legend { font-family: var(--font-serif); text-transform: none; letter-spacing: 0; font-size: 1.15rem; color: var(--accent-text); }
.ptile, .pt-tile { border-radius: 0; }

/* ---- keep grid children from forcing overlap ---- */
.lv-top > *, .sc-sect > * { min-inline-size: 0; }
.tm-btns { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }
.tm-btns .buzz { padding-inline: .8em; white-space: normal; text-align: center; }

/* ---- stage + viewer chips: flat, no pressable edge ---- */
.st-diff, .st-pts, .st-chip, .tp-win-chip, .tp-pts, .st-game-tag { box-shadow: none !important; }

/* ---- login / stage brand ---- */
.stage-brand .brand-name { font-size: clamp(1.4rem, 4vw, 1.9rem) !important; white-space: nowrap; letter-spacing: .2em; }
.stage-brand .brand-mark { inline-size: 40px !important; block-size: 40px !important; box-shadow: none !important; }
.stage-brand .brand-mark .i { inline-size: 20px !important; block-size: 20px !important; }
.auth-card, .stage-card, .stage-inner > .card, .stage-inner > .set { border-radius: 0 !important; }
.auth-card h2, .stage-inner h2, .stage-inner h1 { font-family: var(--font-serif); font-weight: 400; font-size: 2rem; }
.stage-inner .card h2 { font-size: 2rem; }
code, kbd { font-family: var(--font-mono); border-radius: 0; }
body .stage-inner h1, body .stage-inner h2, body .auth-card h1 { font-family: var(--font-serif); font-weight: 400; font-size: 2rem; letter-spacing: 0; text-transform: none; }
* { font-feature-settings: "lnum"; }