/* BotsVsBots design system, direction "Night Shift" (docs/design/website-redesign): a dark arena, tall condensed type,
   angled controls from the brand mark, pink as the only primary. Tokens (--ds-*) and components (.ds-*); see
   docs/design-system.md. Loaded by site-nav.js on every page and directly by pages that are already restyled.
   Namespaced so it can sit beside the older per-page stylesheets until they are migrated. */

/* Self-hosted faces (OFL, client-web/assets/fonts/LICENSES.txt). The fallback faces are system fonts scaled and
   re-spaced to the web face's width and line box, so the swap does not move the layout. */
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("assets/fonts/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("assets/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("assets/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("assets/fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed Fallback"; font-weight: 700 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"), local("Helvetica Bold");
  size-adjust: 70%; ascent-override: 143%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 400; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica");
  size-adjust: 107%; ascent-override: 90.5%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"), local("Helvetica Bold");
  size-adjust: 107%; ascent-override: 90.5%; descent-override: 22.5%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  accent-color: var(--ds-accent);
  caret-color: var(--ds-accent);
  scrollbar-color: var(--ds-scrollbar) var(--ds-bg);
  font-variant-numeric: tabular-nums;

  /* Colour. Text and accent pairs are checked for WCAG AA in client-web/test/design-system.test.cjs. */
  --ds-bg: #070a12;
  --ds-bg-raised: #0c111d;
  --ds-surface: #111827;
  --ds-surface-2: #172033;
  --ds-line: rgba(140, 170, 255, .18);
  --ds-line-strong: rgba(140, 170, 255, .38);
  --ds-text: #eef2ff;
  --ds-text-muted: #aab4d0;
  --ds-accent: #ff4f98;       /* hot pink: the only primary. The one action, the brand mark, the current location */
  --ds-accent-ink: #240817;   /* text on --ds-accent */
  --ds-cyan: #3fd8ff;         /* information, links, focus, team A */
  --ds-hot: #ff5c7a;          /* live, danger */
  --ds-hot-ink: #2b0711;      /* text on --ds-hot (live badge) */
  --ds-ok: #54e6a5;
  --ds-control-line: #59708f; /* border of every input, secondary button and choice: 3:1 or better on the page ground */
  --ds-placeholder: #8d99b8;
  --ds-scrollbar: #2a3550;
  --ds-team-a: #3fd8ff;       /* team colours are data; the team name always travels with them */
  --ds-team-a-ink: #06222b;
  --ds-team-b: #f2491c;
  --ds-team-b-ink: #2a0c03;

  /* Game-style tokens (docs/design/game-style-ui.md): lobby, live viewer, spectator and replay HUDs. */
  --game-bg: #080b14;
  --game-panel: #111a2a;
  --game-raised: #1b2840;
  --game-text: #eef2ff;       /* same value as --ds-text: one text colour site-wide */
  --game-muted: #aab4d0;      /* same value as --ds-text-muted */
  --game-pink: #ff4f98;
  --game-pink-ink: #240817;
  --game-cyan: #51ddf8;
  --game-blue: #7cacff;
  --game-good: #82f0c0;
  --game-warning: #ffd080;
  --game-danger: var(--game-pink);
  --game-team-a: #2bd4ff; /* team colours and shapes: js/team-style.js (ring = team A, triangle = team B) */
  --game-team-b: #f2491c;
  --game-good-cb: #56b4e9;
  --game-warning-cb: #f0e442;
  --game-danger-cb: #e69f00;
  --game-team-a-cb: #2bd4ff; /* approved team pair stays fixed; shape/outline grow instead */
  --game-team-b-cb: #f2491c;
  --game-line: #59708f;
  --game-frame: rgba(124, 172, 255, .4); /* lobby panel frame (#1298); shared by live viewer, replay and match pages */
  --game-glass: rgba(8, 11, 20, .90);
  --game-scrim: rgba(8, 11, 20, .72);
  --game-cyan-wash: rgba(81, 221, 248, .08);
  --game-pink-glow: 0 0 24px rgba(255, 79, 152, .28);
  --game-shadow: 0 12px 30px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .08);

  /* Type */
  --ds-font: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-font-display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --ds-fs-xs: .75rem;
  --ds-fs-sm: .875rem;
  --ds-fs-md: 1rem;
  --ds-fs-lg: 1.25rem;
  --ds-fs-xl: clamp(1.75rem, 4vw, 2.5rem);
  --ds-fs-page: clamp(2.75rem, 8vw, 4.5rem);   /* page title of a tool or read page */
  --ds-fs-display: clamp(3.25rem, 11vw, 6rem); /* hero title; never above 6rem */

  /* Spacing (4px base), radii, elevation, motion */
  --ds-space-1: .25rem;
  --ds-space-2: .5rem;
  --ds-space-3: .75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.5rem;
  --ds-space-6: 2rem;
  --ds-space-7: 3rem;
  --ds-space-8: 5rem;
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-pill: 999px;
  --ds-shadow-1: 0 2px 10px rgba(0, 0, 0, .35);
  --ds-shadow-2: 0 18px 50px rgba(0, 0, 0, .5);
  --ds-glow-accent: 0 14px 28px -10px rgba(255, 79, 152, .55); /* the pink action sits on a soft lift, not a halo */
  --ds-skew: -10deg;           /* the brand mark's angle, shared by buttons, badges and the avatar */
  --ds-container: 1240px;
  --ds-edge: 1.25rem;
  --ds-ease: cubic-bezier(.16, 1, .3, 1);
  --ds-dur-fast: .12s;
  --ds-dur: .22s;
  /* Lobby style (#1105): pink call-to-action, blue chips, dark cinematic scene, condensed headings. */
  --ds-cta: var(--ds-accent);
  --ds-cta-hover: #ff77ad;
  --ds-cta-ink: var(--ds-accent-ink);
  --ds-glow-cta: var(--ds-glow-accent);
  --ds-chip-blue: #2a5bd7;
  --ds-chip-cyan: var(--game-cyan);
  --ds-scene-bg: #05070d;
  --ds-scene: radial-gradient(ellipse at 50% 38%, #1b2342, var(--ds-scene-bg) 72%);
  --ds-scene-scrim: rgba(5, 7, 13, .9);
  --ds-progress-track: rgba(189, 201, 221, .22);
  --ds-focus: 0 0 0 3px var(--ds-bg), 0 0 0 6px var(--ds-cyan);
  /* Status icons for toasts and button states, drawn on the 24 px / 2 px grid of assets/icons.svg (a CSS mask cannot reference a sprite symbol). */
  --ds-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ds-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4L2.5 20h19zM12 10v4M12 17h.01'/%3E%3C/svg%3E");
  --ds-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
}

/* Live viewer and replay canvases stay on system faces so the match pages download no font files (request budgets in terrain-viewer and hq-graphics tests). */
:root.ds-system-fonts {
  --ds-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-font-display: Bahnschrift, "Segoe UI Variable Display", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
}

/* Component display values must not defeat the hidden attribute. */
:is(.ds-btn, .ds-card, .ds-empty, .ds-badge, .ds-hero, .ds-grid, .ds-scorebug)[hidden] { display: none; }

/* Browser surfaces carry the design too: selection, focus ring, placeholder, icons. */
::selection { background: var(--ds-accent); color: var(--ds-accent-ink); }
:where(a, button, input, select, textarea, summary, [tabindex]:not(canvas)):focus-visible { outline: 3px solid var(--ds-cyan); outline-offset: 3px; }
::placeholder { color: var(--ds-placeholder); opacity: 1; }
/* Drawn icons: one 24 px grid, 2 px stroke, from assets/icons.svg (<svg class="ds-icon"><use href="/assets/icons.svg#i-play"/></svg>). */
.ds-icon { display: block; flex: none; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Layout: one container, one left edge on every page. */
.ds-container { width: min(var(--ds-container), calc(100% - 2 * var(--ds-edge))); margin-inline: auto; }
.ds-section { padding-block: var(--ds-space-7); }
.ds-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-5); margin-bottom: var(--ds-space-5); }
.ds-grid { display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* Typography: tall condensed display face for titles, Inter for reading. The block padding holds the face's content area (taller than a tight line box) so a title never overlaps the line above or below it. */
.ds-display, .ds-title { font-family: var(--ds-font-display); font-weight: 800; text-transform: uppercase; text-wrap: balance; }
.ds-display { margin: 0; padding-block: .14em; font-size: var(--ds-fs-display); line-height: .92; letter-spacing: .01em; overflow-wrap: anywhere; }
.ds-title { margin: 0; padding-block: .1em; font-size: var(--ds-fs-xl); line-height: 1; letter-spacing: .01em; }
/* A kicker is only ever a real page name; the heading carries the page otherwise. Kept for pages not yet migrated. */
.ds-eyebrow, .eyebrow { margin: 0 0 var(--ds-space-3); color: var(--ds-text-muted); font: 700 var(--ds-fs-sm)/1.2 var(--ds-font-display); letter-spacing: .12em; text-transform: uppercase; }
.ds-lede { margin: var(--ds-space-4) 0 0; max-width: 38rem; color: var(--ds-text-muted); font-size: clamp(1.0625rem, 2vw, 1.25rem); line-height: 1.5; }
.ds-accent { color: var(--ds-accent); }
.ds-link { color: var(--ds-cyan); text-decoration: underline; text-underline-offset: .2em; }
.ds-link:hover { color: var(--ds-text); }
.access-signup-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
/* Tap target: text links get 44px of hit area; links that stand alone on a line (list items, link rows) are real 44px boxes. */
.ds-link, .back-link { padding-block: 12px; }
:is(li, p) > :is(.ds-link, .back-link):only-child, .start-links .ds-link, .match-footer .ds-link, .reset-links .ds-link, .help-links .ds-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }

/* Buttons: one pink action per view, everything else outline or text. 44px minimum target.
   The action is a parallelogram like the brand mark; it squares off while focused so the ring is never clipped. */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  min-height: 44px; padding: var(--ds-space-2) var(--ds-space-5);
  border: 2px solid transparent; border-radius: 0;
  color: var(--ds-text); background: transparent;
  font: 800 1.0625rem/1.1 var(--ds-font-display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; text-align: center;
  cursor: pointer; transition: transform var(--ds-dur) var(--ds-ease); /* colours switch instantly: a fade from the disabled surface would pass through unreadable mixes */
}
.ds-btn:hover:not(:disabled) { transform: translateY(-2px); }
.ds-btn:active:not(:disabled) { transform: translateY(0); }
.ds-btn:focus-visible { outline: 3px solid var(--ds-cyan); outline-offset: 3px; }
.ds-btn:disabled { opacity: .5; cursor: not-allowed; }
.ds-btn-cta, .ds-btn-primary { border-color: var(--ds-cta); color: var(--ds-cta-ink); background: var(--ds-cta); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-inline: var(--ds-space-6); }
.ds-btn-cta:hover:not(:disabled), .ds-btn-primary:hover:not(:disabled) { border-color: var(--ds-cta-hover); background: var(--ds-cta-hover); }
.ds-btn-cta:focus-visible, .ds-btn-primary:focus-visible { clip-path: none; }
/* A disabled action is not a second pink fill: it drops to a quiet surface and squares off. */
.ds-btn-cta:disabled, .ds-btn-primary:disabled { border-color: var(--ds-surface-2); color: var(--ds-text-muted); background: var(--ds-surface-2); clip-path: none; opacity: 1; }
.ds-btn-secondary { border-color: var(--ds-control-line); background: transparent; }
.ds-btn-secondary:hover:not(:disabled) { border-color: var(--ds-text); }
.ds-btn-ghost { color: var(--ds-text-muted); }
.ds-btn-ghost:hover:not(:disabled) { color: var(--ds-text); background: rgba(140, 170, 255, .1); }
.ds-btn-lg { min-height: 56px; padding-inline: 2.25rem; font-size: 1.25rem; }
.ds-btn-sm { min-height: 44px; padding: var(--ds-space-1) var(--ds-space-4); font-size: var(--ds-fs-sm); }

/* Lobby-style pieces: condensed heading, blue chip, goal row with a thin progress line, dark scene gradient (--ds-scene). */
.ds-heading-condensed { color: var(--game-text); font-family: var(--ds-font-display); font-weight: 800; line-height: 1; letter-spacing: .03em; overflow-wrap: anywhere; text-transform: uppercase; }
.ds-chip { display: inline-block; padding: 4px 8px; border-radius: 4px; color: #fff; background: var(--ds-chip-blue); font: 700 .8125rem/1.2 var(--ds-font-display); letter-spacing: .08em; text-shadow: none; text-transform: uppercase; white-space: nowrap; }
.ds-goal { display: grid; gap: 4px; padding-top: 14px; }
.ds-goal-label { color: var(--game-muted); font-size: 13px; }
.ds-goal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ds-goal-value { color: var(--game-text); font: 800 20px/1.1 var(--ds-font-display); letter-spacing: .04em; }
.ds-progress { display: block; width: 100%; height: 2px; margin-top: 8px; border: 0; background: var(--ds-progress-track); accent-color: var(--game-blue); }
.ds-progress::-webkit-progress-bar { background: var(--ds-progress-track); }
.ds-progress::-webkit-progress-value { background: var(--game-blue); }
.ds-progress::-moz-progress-bar { background: var(--game-blue); }

/* Cards (flat: a hairline, no shadow), player card, badges */
.ds-card { position: relative; padding: var(--ds-space-5); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); background: var(--ds-surface); }
.ds-card-interactive { transition: transform var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease); }
.ds-card-interactive:hover { transform: translateY(-3px); border-color: var(--ds-line-strong); }
.ds-card-title { margin: 0 0 var(--ds-space-2); font: 800 var(--ds-fs-lg)/1.1 var(--ds-font-display); text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; }
.ds-card p { margin: 0; color: var(--ds-text-muted); }
.ds-avatar { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); color: var(--ds-text); background: var(--ds-surface-2); font: 800 var(--ds-fs-md)/1 var(--ds-font-display); letter-spacing: .04em; text-transform: uppercase; }
.ds-player { display: flex; align-items: center; gap: var(--ds-space-3); min-width: 0; }
.ds-player-name { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.ds-player-meta { display: block; color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }
/* Badge: a parallelogram label. State is always a word (Live, Open), never colour alone. */
.ds-badge { display: inline-flex; align-items: center; gap: var(--ds-space-2); padding: .25rem .875rem; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); color: var(--ds-text-muted); background: var(--ds-surface-2); font: 700 .8125rem/1.2 var(--ds-font-display); letter-spacing: .14em; text-transform: uppercase; }
.ds-badge-live { color: var(--ds-hot-ink); background: var(--ds-hot); }
.ds-badge-live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; animation: ds-pulse 1.6s ease-in-out infinite; }
.ds-badge-ok { color: var(--ds-ok); }

/* Scorebug: the match chip shared by home, watch, results and the lobby. Team, score, team, optional state.
   Markup: <a class="ds-scorebug"><span class="ds-scorebug-team" data-team="a">Claude</span><span class="ds-scorebug-score"><b>7</b><i>:</i><b>5</b></span>
   <span class="ds-scorebug-team" data-team="b">Gemini</span><span class="ds-badge ds-badge-live">Live 02:51</span></a>. */
/* On a narrow screen the state badge drops to its own full-width row instead of squeezing the team names. */
.ds-scorebug { display: inline-flex; flex-wrap: wrap; align-items: stretch; max-width: 100%; color: var(--ds-text); background: var(--ds-bg-raised); text-decoration: none; }
.ds-scorebug > * { display: flex; align-items: center; min-height: 44px; }
.ds-scorebug-team { padding: var(--ds-space-1) var(--ds-space-4); color: var(--ds-team-a-ink); background: var(--ds-team-a); font: 800 1.125rem/1.1 var(--ds-font-display); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: break-word; min-width: 0; }
.ds-scorebug-team[data-team="b"] { color: var(--ds-team-b-ink); background: var(--ds-team-b); }
.ds-scorebug-score { gap: .25rem; padding: 0 var(--ds-space-4); font: 800 1.75rem/1 var(--ds-font-display); letter-spacing: .04em; }
.ds-scorebug-score i { color: var(--ds-text-muted); font-style: normal; }
.ds-scorebug > .ds-badge { flex: 1 0 auto; justify-content: center; clip-path: none; padding-inline: var(--ds-space-3); }
a.ds-scorebug:hover { color: var(--ds-text); background: var(--ds-surface); }

/* Tabs: an underline row. The current tab carries aria-selected="true" (tablist) or aria-current="page" (links). */
.ds-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--ds-line); scrollbar-width: thin; scrollbar-color: var(--ds-scrollbar) transparent; } /* a thin themed scrollbar shows when tabs overflow */
.ds-tabs > :is(a, button, [role="tab"]) { display: flex; align-items: center; flex: none; min-height: 52px; padding: 0 var(--ds-space-4); border: 0; border-bottom: 3px solid transparent; color: var(--ds-text-muted); background: none; font: 800 1.0625rem/1 var(--ds-font-display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ds-tabs > :is(a, button, [role="tab"]):hover { color: var(--ds-text); }
.ds-tabs > :is([aria-selected="true"], [aria-current="page"]) { color: var(--ds-text); border-bottom-color: var(--ds-accent); }
.ds-tabs > :is(a, button, [role="tab"]):focus-visible { outline-offset: -3px; }

/* Table: wrap in .ds-table-wrap so wide tables scroll inside the page, never the page itself. Numbers align (tabular). */
.ds-table-wrap { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-sm); }
.ds-table th, .ds-table td { padding: var(--ds-space-3) var(--ds-space-4); border-top: 1px solid var(--ds-line); text-align: left; }
.ds-table th { border-top: 0; color: var(--ds-text-muted); background: var(--ds-bg-raised); font: 700 var(--ds-fs-sm)/1.2 var(--ds-font-display); letter-spacing: .12em; text-transform: uppercase; }
.ds-table :is(th, td).ds-num { text-align: right; }
.ds-table tbody tr:hover { background: rgba(140, 170, 255, .06); }
.ds-table tbody tr[aria-current="true"] td { background: rgba(63, 216, 255, .07); }
.ds-num { font-family: var(--ds-font-display); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Forms: every control edge is at least 3:1 against the page. */
.ds-field { display: grid; gap: var(--ds-space-2); margin-block: var(--ds-space-4); }
.ds-label { color: var(--ds-text); font-size: var(--ds-fs-sm); font-weight: 600; }
.ds-hint { color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }
.ds-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--ds-space-2) var(--ds-space-4); border: 2px solid var(--ds-control-line); border-radius: 0; color: var(--ds-text); background: var(--ds-bg); font: inherit; }
.ds-input:hover:not(:disabled) { border-color: var(--ds-text-muted); }
.ds-input:focus-visible { outline: 3px solid var(--ds-cyan); outline-offset: 2px; border-color: var(--ds-cyan); }
.ds-input:disabled { opacity: .5; cursor: not-allowed; }
.ds-input[aria-invalid="true"] { border-color: var(--ds-hot); }
/* Error message under a field (link it with aria-describedby): a drawn alert icon and plain words, so the invalid state is never colour alone. */
.ds-error { display: flex; align-items: flex-start; gap: var(--ds-space-2); margin: 0; color: var(--ds-hot); font-size: var(--ds-fs-sm); }
.ds-error::before { content: ""; flex: none; width: 1.25em; height: 1.25em; background: currentColor; -webkit-mask: var(--ds-icon-alert) center / contain no-repeat; mask: var(--ds-icon-alert) center / contain no-repeat; }

/* Page header: the title alone, sized by the job of the page (--ds-fs-page for tool and read pages, .ds-display for a hero).
   The hero art is set per page; the scrim keeps text AA-contrast over any image. */
.ds-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: min(82vh, 40rem); padding-block: var(--ds-space-7); background-color: var(--ds-bg); background-size: cover; background-position: center; }
.ds-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(7, 10, 18, .94) 0%, rgba(7, 10, 18, .8) 45%, rgba(7, 10, 18, .35) 100%),
  linear-gradient(0deg, var(--ds-bg) 0%, transparent 35%); }
.ds-hero-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-top: var(--ds-space-5); }
.ds-page-header { padding-block: var(--ds-space-7) var(--ds-space-5); }
.ds-page-header :is(h1, .ds-title, .ds-display) { padding-block: .1em; font-size: var(--ds-fs-page); line-height: 1; }
.ds-page-header-compact :is(h1, .ds-title, .ds-display) { font-size: var(--ds-fs-xl); }

/* Empty state: say what is missing and the next step. */
.ds-empty { display: grid; justify-items: start; gap: var(--ds-space-3); padding: var(--ds-space-6); border: 1px dashed var(--ds-control-line); border-radius: var(--ds-radius-lg); color: var(--ds-text-muted); }
.ds-empty p { margin: 0; max-width: 34rem; }
/* Empty, error, signed-out and not-found messages on a status line (js/page-state.js); loading and ready stay plain text. */
.ds-state { margin: var(--ds-space-5) 0 0; color: var(--ds-text-muted); overflow-wrap: anywhere; }
.ds-state:is([data-state="empty"], [data-state="signed-out"], [data-state="not-found"], [data-state="error"]) { padding: var(--ds-space-6); border: 1px dashed var(--ds-control-line); border-radius: var(--ds-radius-lg); }
.ds-state[data-state="error"] { border-color: var(--ds-hot); color: var(--ds-text); }
.ds-state:empty { display: none; }
.ds-state-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-top: var(--ds-space-3); }

body.ds-page { background: var(--ds-bg); color: var(--ds-text); font-family: var(--ds-font); }

:root.colorblind-palette {
  --game-good: var(--game-good-cb);
  --game-warning: var(--game-warning-cb);
  --game-danger: var(--game-danger-cb);
  --game-team-a: var(--game-team-a-cb);
  --game-team-b: var(--game-team-b-cb);
}
/* Page shell and sign-in dialog for pages built on the design system (body.ds-page). */
.ds-page .account-dialog { color: var(--ds-text); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-lg); background: var(--ds-surface); box-shadow: var(--ds-shadow-2); }
.ds-page .account-dialog::backdrop { background: rgba(3, 5, 10, .8); }
.ds-page .account-dialog .dialog-heading h2 { font-family: var(--ds-font-display); text-transform: uppercase; }
.ds-page .account-dialog .ds-label { margin: var(--ds-space-4) 0 var(--ds-space-1); }
.ds-page .account-dialog .icon-button { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ds-page .account-dialog .icon-button .ds-icon { width: 20px; height: 20px; }
.ds-page .account-dialog .icon-button { border-color: var(--ds-control-line); border-radius: var(--ds-radius-md); }
.ds-page .account-dialog .icon-button:focus-visible, .ds-page .account-dialog .text-button:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.ds-page .account-dialog #account-submit { width: 100%; }
.ds-page .account-dialog .text-button { color: var(--ds-cyan); }
.ds-page .account-dialog .error-message { color: var(--ds-hot); }
.ds-page .account-dialog #account-resend { width: 100%; min-height: 44px; margin: var(--ds-space-2) 0; padding: var(--ds-space-2) var(--ds-space-4); border: 2px solid var(--ds-control-line); border-radius: 0; color: var(--ds-text); background: transparent; font: inherit; cursor: pointer; }
.ds-page .account-dialog #account-resend[hidden] { display: none; }
.ds-page .account-dialog #account-resend:focus-visible { outline: none; box-shadow: var(--ds-focus); }

@keyframes ds-pulse { 50% { opacity: .35; } }
/* Visual feedback (#2073): rating change badge, milestone meter, toasts and action states. */
.ds-rating-line { display: flex; align-items: baseline; gap: var(--ds-space-2); }
.ds-rating-value { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.ds-delta { display: inline-block; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; font: 800 .85rem/1.3 var(--ds-font-display); font-variant-numeric: tabular-nums; animation: ds-delta-in .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.ds-rank-move { margin-left: 6px; font: 800 .8rem/1.3 var(--ds-font-display); font-variant-numeric: tabular-nums; }
.ds-delta-up { color: var(--ds-ok); }
.ds-delta-down { color: var(--ds-hot); }
.ds-milestone { display: grid; gap: 4px; margin-top: var(--ds-space-1); }
.ds-milestone-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); }
.ds-milestone-text { font-size: .85rem; color: var(--game-muted); }
.ds-milestone-bar { height: 6px; margin-top: 0; border-radius: 3px; overflow: hidden; }
.ds-milestone-bar::-webkit-progress-bar { border-radius: 3px; }
.ds-milestone-bar::-webkit-progress-value { background: var(--ds-ok); transition: width .8s ease-out; }
.ds-milestone-bar::-moz-progress-bar { background: var(--ds-ok); }
.ds-tier-bronze { background: #8a5a2b; }
.ds-tier-silver { background: #5c6b80; }
.ds-tier-gold { background: #7f6407; }
.ds-tier-platinum { background: #1a7280; }
.ds-tier-diamond { background: #2a5bd7; }
.ds-tier-master { background: #a4306f; }
.ds-toasts { position: fixed; inset: auto var(--ds-space-4) var(--ds-space-4) auto; z-index: 1000; display: grid; gap: var(--ds-space-2); max-width: min(24rem, calc(100vw - 2 * var(--ds-space-4))); pointer-events: none; }
/* Toast: a drawn status icon (check, alert or info) before the message; the kind is in the icon and the wording, not a coloured edge. */
.ds-toast { display: flex; align-items: flex-start; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-md); color: var(--ds-text); background: var(--ds-surface-2); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); animation: ds-toast-in .25s var(--ds-ease) both; }
.ds-toast::before, .ds-btn[data-state="success"]::after, .ds-btn[data-state="error"]::after { content: ""; flex: none; width: 1.25em; height: 1.25em; background: currentColor; -webkit-mask: var(--ds-icon-info) center / contain no-repeat; mask: var(--ds-icon-info) center / contain no-repeat; }
.ds-toast::before { margin-top: .1em; color: var(--game-cyan); }
.ds-toast-success::before, .ds-btn[data-state="success"]::after { color: var(--ds-ok); -webkit-mask-image: var(--ds-icon-check); mask-image: var(--ds-icon-check); }
.ds-toast-error::before, .ds-btn[data-state="error"]::after { color: var(--ds-hot); -webkit-mask-image: var(--ds-icon-alert); mask-image: var(--ds-icon-alert); }
.ds-btn[data-state="loading"] { opacity: .7; cursor: progress; }
.ds-btn[data-state="loading"]::after { content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .5em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.1em; animation: ds-spin .8s linear infinite; }
.ds-btn[data-state="success"] { border-color: var(--ds-ok); }
.ds-btn[data-state="error"] { border-color: var(--ds-hot); }
@keyframes ds-delta-in { from { transform: translateY(8px) scale(.7); } }
@keyframes ds-toast-in { from { transform: translateY(12px); } }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ds-btn, .ds-card-interactive { transition: none; }
  .ds-btn:hover:not(:disabled), .ds-card-interactive:hover { transform: none; }
  .ds-badge-live::before { animation: none; }
  .ds-delta, .ds-toast, .ds-btn[data-state="loading"]::after { animation: none; }
  .ds-milestone-bar::-webkit-progress-value { transition: none; }
}

/* Lobby-style page shell (#1107): cinematic dark scene behind the page, condensed uppercase headings, pink eyebrow,
   flat sections instead of boxed panels. Opt in with body.ds-scene-page. */
body.ds-scene-page { background: var(--ds-scene) fixed, var(--ds-scene-bg); }
.ds-scene-page :is(.ds-display, .ds-title, .ds-card-title) { color: var(--game-text); font-weight: 800; letter-spacing: .03em; }
.ds-scene-page .ds-lede { color: var(--game-muted); }
.ds-scene-page .ds-accent { color: var(--ds-cta); }
.ds-scene-page .ds-card { padding: var(--ds-space-4) 0 0; border: 0; border-top: 1px solid var(--ds-line); border-radius: 0; background: none; box-shadow: none; }
.ds-scene-page .ds-card-interactive:hover { border-color: var(--ds-cta); }
.ds-scene-page .ds-page-header { border-bottom: 0; }
.ds-scene-page .ds-empty { border-radius: var(--ds-radius-md); background: none; }
.ds-scene-page .ds-btn-secondary { background: rgba(5, 7, 13, .55); }

.model-team-badge { display: inline-block; padding: .1em .5em; border: 1px solid currentColor; border-radius: .5em; font-size: .75em; color: #b9d7ff; }
.model-team-badge[data-model-team="0"] { color: #efb899; }
.model-team-badge[data-model-team="1"] { color: #83dfbc; }
.model-team-badge[data-model-team="2"] { color: #a9baff; }
.model-team-badge[data-model-team="3"] { color: #e4c782; }