/* ==========================================================================
   2 Minute Drill — design tokens, webfonts, base layer
   Owner: ui-shell. Source of truth: docs/DESIGN.md §2–§3, §6–§7.
   Loaded by every page (game pages too): keep it dependency-free and stable.
   ========================================================================== */

/* Self-hosted display face. Only Barlow Condensed is downloaded; body is the
   system stack. 700/800/900 latin, ~43 KB total. 800 is preloaded in <head>. */
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/fonts/barlow-condensed-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/fonts/barlow-condensed-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/fonts/barlow-condensed-900-latin.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ---- stadium ---------------------------------------------------------- */
  --bg: #070b14;            /* page night */
  --bg-2: #0b1220;          /* alternating section */
  --panel: #0f1a2b;         /* cards, dock */
  --panel-2: #142238;       /* raised */
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .20);
  --ink: #f3f7ff;
  --ink-2: #c6d3e6;
  --muted: #8ca1bd;
  --faint: #5d7290;

  /* ---- field ------------------------------------------------------------ */
  --turf: #1d7a47;
  --turf-2: #19693d;
  --turf-3: #228a52;
  --chalk: rgba(255, 255, 255, .86);
  --chalk-dim: rgba(255, 255, 255, .30);
  --los: #4d8dff;           /* line of scrimmage */
  --first: #f5c542;         /* chain gold */
  --flag: #f04438;
  --ball: #8a4b24;

  /* ---- accents ---------------------------------------------------------- */
  --gold: #f5c542;
  --gold-2: #ffd97a;
  --gold-ink: #201603;
  --ice: #7dd3fc;
  --grass-glow: rgba(34, 138, 82, .35);

  /* team colours: ui-game applies these inline per spot on #game (DESIGN §2);
     these are only last-resort fallbacks so var() never resolves to nothing */
  --team-you: #1d7a47;
  --team-you-2: #7dd3fc;
  --team-opp: #b3202c;
  --team-opp-2: #f5c542;

  /* ---- grades ----------------------------------------------------------- */
  --g-green: #34d399;
  --g-yellow: #facc15;
  --g-orange: #fb923c;
  --g-red: #f87171;

  /* ---- type ------------------------------------------------------------- */
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- geometry --------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 40px -22px rgba(0, 0, 0, .9);
  --shadow-pop: 0 24px 60px -20px rgba(0, 0, 0, .85);
  --maxw: 760px;            /* game column */
  --maxw-page: 1120px;      /* content pages */

  /* ---- chrome / motion / layering (ui-shell) ---------------------------- */
  /* Real rendered height of the sticky header: 60 px desktop, 56 px mobile. */
  --md-chrome-h: 60px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 120ms;           /* UI feedback */
  --dur-2: 180ms;           /* hover / open */
  --dur-3: 350ms;           /* banners */
  --z-head: 100;
  --z-skip: 200;

  /* safe-area helpers (viewport-fit=cover is set in <head>) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

@media (max-width: 767px) {
  :root { --md-chrome-h: 56px; }
}

/* ==========================================================================
   Base / reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: #21324c var(--bg);
  scrollbar-width: thin;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

main { display: block; flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 800; text-wrap: balance; }
p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
svg { fill: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }

/* Skip the whole page straight to #main on keyboard focus. */
::selection {
  background: var(--gold);
  color: var(--gold-ink);
  text-shadow: none;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Numerals that must not jitter (scores, clocks, tables, stat bands). */
.tnum,
.num,
[data-num] { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* Accessible label that stays out of the visual layout. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Thin, dark scrollbars (WebKit/Blink; Firefox uses scrollbar-color above). */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: #1e2c44;
  border: 3px solid var(--bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #2c3f5f; }

/* ==========================================================================
   User preferences
   ========================================================================== */

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

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
}