/* Fonts are linked from index.html <head> (with preconnect) — an @import here
   chained them behind this stylesheet and blocked the first paint. */

:root {
  --bg: #080810;
  --surface: #0e0e1a;
  --surface2: #161625;
  --surface3: #1e1e30;
  --border: rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.12);
  --red: #ff3b5c;
  --red-glow: rgba(255,59,92,0.45);
  --red-dim: rgba(255,59,92,0.1);
  --blue: #3b8eff;
  --blue-glow: rgba(59,142,255,0.45);
  --blue-dim: rgba(59,142,255,0.1);
  --gold: #f5c842;
  --gold-dim: rgba(245,200,66,0.12);
  --gold2: #ffd700;

  /* ── Theme accent (default = gold) ── */
  --accent:       #f5c842;
  --accent-dim:   rgba(245,200,66,0.12);
  --accent-glow:  rgba(245,200,66,0.35);
  --accent-grad:  linear-gradient(135deg, #f5c842 0%, #ffa040 100%);
}

:root {
  --green: #00e676;
  --green-dim: rgba(0,230,118,0.1);
  --purple: #a855f7;
  --text: #e8e8f0;
  --text2: #b0b0c8;
  /* Lightened to meet WCAG AA contrast on the dark surfaces (were #5a5a78 =
     3.01 and #454560 = 2.07, both failing 4.5). Still read as "quiet" greys. */
  --muted: #8a8aa2;
  --muted2: #7c7c94;   /* dimmer than --muted; used by directory/profile/arena */
  --danger: #ff4560;
  --radius: 14px;
  --radius-sm: 8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* UX-13: keyboard focus ring for accessibility */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus:not(:focus-visible) { outline: none; }

/* overflow-x on body alone does not clip: the html element keeps its own
   scroll area, so the decorative flame canvases (504px inside a 360px ring)
   still let the whole page be dragged sideways on the scoreboard. */
/* Reserve the vertical scrollbar's space at all times so switching between a
   tall tab (scrollbar) and a short one (no scrollbar) never changes the content
   width — that width jump was the "layout shifts briefly on tab switch". */
/* overflow-x: clip (not hidden) — still blocks the sideways drag from the
   decorative flame canvases, but does NOT turn html into a scroll container,
   which would break position:sticky (tab toolbars) and it keeps overflow-y
   visible so scrollbar-gutter works. */
html { overflow-x: clip; scrollbar-gutter: stable; }
/* TV / projector fills the screen with a fixed overlay — no page scroll, so
   drop the reserved gutter to avoid a sliver on the right. */
html:has(body.tv-mode) { scrollbar-gutter: auto; }

body {
  font-family: 'Space Grotesk', 'Rajdhani', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: clip;
  padding-bottom: 60px;
}

/* Subtle grid background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* Ambient glow blobs */
body::after {
  content: '';
  position: fixed;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,142,255,0.04) 0%, transparent 70%);
  top: -200px; right: -200px;
  pointer-events: none;
  z-index: 0;
}