/* ===== Glass design system (DEC-380) =====================================================================
   Tokens, surfaces and components for the whole app shell. Three levels, chosen in src/ui/glass.ts and written to
   <html data-glass="…">:
     full   frosted glass: translucent tint + backdrop blur/saturate, edge light, inner highlight, pointer sheen
     lite   the same translucent tint and edge light, no backdrop-filter (the "Very low" / no-GPU path)
     solid  opaque surfaces (high contrast, "Solid panels", prefers-reduced-transparency)
   Reduced motion (the setting or the OS preference) keeps the glass and only stops movement: <html data-motion="reduced">
   turns off transitions, animations and the pointer-following light; the surfaces stay as they are (owner, 2026-10-27).
   Without the attribute (before the script runs) everything renders as "solid".
   Loaded after the feature stylesheets and before access.css, so high contrast (access.css) always wins.
   Rules: no inline styles (CSP style-src 'self'); logical properties (RTL); text sits on a tinted scrim, never on
   raw scene pixels; content never moves with the pointer (only light does), so click targets stay put.
   Documentation: docs/worldsport/design/GLASS-DESIGN-SYSTEM.md
   ============================================================================================================= */

:root {
  /* ----- palette: midnight venue, championship gold, aqua, ion blue ----- */
  --ws-ink-950: #050911;
  --ws-ink-900: #08101b;
  --ws-ink-850: #0c1624;
  --ws-ink-800: #111d2e;
  --ws-ink-700: #1a2a40;
  --ws-gold-300: #ffd977;
  --ws-gold-400: #ffc23d;
  --ws-gold-500: #f2a91a;
  --ws-aqua-300: #8ff5ea;
  --ws-aqua-400: #3ee6d4;
  --ws-ion-300: #a9dcff;
  --ws-ion-400: #7cc8ff;
  --ws-violet-400: #a48bff;
  --ws-coral-400: #ff6b6b;
  --ws-white: #ffffff;
  --ws-text-strong: #f6f8fb;
  --ws-text-muted: #d0d8e2;

  /* ----- surfaces (solid values; the glass levels below override them) ----- */
  --ws-surface-1: #0d1726;           /* cards and dialogs */
  --ws-surface-2: #0b1420;           /* HUD boxes over the scene */
  --ws-surface-3: #142236;           /* raised controls inside a card */
  --ws-surface-strong: #0b1422;      /* results, dialogs, the guide: dense text over any scene */
  --ws-well: #08111c;                /* inputs, sunken areas */
  --ws-edge: rgba(255, 255, 255, 0.16);
  --ws-edge-strong: rgba(255, 255, 255, 0.28);
  --ws-highlight: rgba(255, 255, 255, 0.10);
  --ws-blur: 0px;
  --ws-saturate: 100%;
  --ws-scrim: rgba(4, 8, 14, 0.62);  /* behind text drawn directly over the scene */

  /* ----- depth ----- */
  --ws-shadow-1: 0 1px 0 var(--ws-highlight) inset, 0 6px 18px -6px rgba(0, 0, 0, 0.55);
  --ws-shadow-2: 0 1px 0 var(--ws-highlight) inset, 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 18px 44px -14px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.3);
  --ws-shadow-3: 0 1px 0 var(--ws-highlight) inset, 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 40px 90px -24px rgba(0, 0, 0, 0.8), 0 10px 28px rgba(0, 0, 0, 0.35);
  --ws-glow-gold: 0 8px 26px -8px rgba(255, 194, 61, 0.65);
  --ws-glow-aqua: 0 8px 26px -10px rgba(62, 230, 212, 0.55);

  /* ----- shape and space ----- */
  --ws-radius-xs: 6px;
  --ws-radius-s: 10px;
  --ws-radius-m: 14px;
  --ws-radius-l: 20px;
  --ws-radius-xl: 28px;
  --ws-radius-pill: 999px;
  --ws-space-1: 4px;
  --ws-space-2: 8px;
  --ws-space-3: 12px;
  --ws-space-4: 16px;
  --ws-space-5: 24px;
  --ws-space-6: 32px;
  --ws-gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --ws-target: 44px;                 /* minimum touch target on coarse pointers */

  /* ----- type (system fonts only: the CSP allows font-src 'self' and no font is shipped) ----- */
  --ws-font-ui: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --ws-font-display: "SF Pro Display", "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --ws-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ws-fs-2xs: 0.72rem;
  --ws-fs-xs: 0.8rem;
  --ws-fs-s: 0.9rem;
  --ws-fs-m: 1rem;
  --ws-fs-l: 1.2rem;
  --ws-fs-xl: 1.5rem;
  --ws-fs-2xl: clamp(1.6rem, 3.4vw, 2.2rem);
  --ws-fs-display: clamp(1.9rem, 4.6vw, 3.1rem);
  --ws-tracking-caps: 0.14em;

  /* ----- motion ----- */
  --ws-dur-1: 120ms;
  --ws-dur-2: 220ms;
  --ws-dur-3: 380ms;
  --ws-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ws-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ----- pointer light (written by GlassLight in src/ui/glass.ts; fine pointers only) ----- */
  --ws-mx: 30%;
  --ws-my: 0%;

  /* ----- the legacy tokens follow the system ----- */
  --panel: var(--ws-surface-2);
  --panel-solid: var(--ws-surface-1);
  --line: var(--ws-edge);
  --text: var(--ws-text-strong);
  --muted: var(--ws-text-muted);
  --accent: var(--ws-gold-400);
  --teal: var(--ws-aqua-400);
  --focus: var(--ws-ion-400);
  --font: var(--ws-font-ui);
  --mono: var(--ws-font-mono);
}

/* Glass levels: translucent tints. Alphas are chosen so text passes WCAG AA over a pure white scene even before the
   blur is counted (the a11y audit composites against black and white). */
:root[data-glass="full"],
:root[data-glass="lite"] {
  --ws-surface-1: rgba(12, 21, 37, 0.76);
  --ws-surface-strong: rgba(9, 16, 28, 0.9);
  --ws-surface-2: rgba(8, 15, 27, 0.74);
  --ws-surface-3: rgba(255, 255, 255, 0.07);
  --ws-well: rgba(3, 8, 15, 0.55);
  --ws-highlight: rgba(255, 255, 255, 0.16);
}
:root[data-glass="full"] {
  --ws-blur: 22px;
  --ws-saturate: 165%;
}

/* ---------- base ---------- */
html, body { background: var(--ws-ink-950); }
body { font-family: var(--ws-font-ui); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--ws-font-display); }

/* Screens over the venue: light at the top so the 3D stadium stays visible, darker where the text is. */
.screen {
  padding: max(16px, env(safe-area-inset-top)) var(--ws-gutter) max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(5, 9, 17, 0.08) 0%, rgba(5, 9, 17, 0.42) 62%, rgba(5, 9, 17, 0.72) 100%),
    radial-gradient(60% 50% at 0% 100%, rgba(62, 230, 212, 0.10), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(164, 139, 255, 0.10), transparent 70%);
}

/* ---------- surfaces ---------- */
.menu-card {
  background-color: var(--ws-surface-1);
  border: 1px solid var(--ws-edge);
  box-shadow: var(--ws-shadow-3);
}
.access-card, #results-inner, #proto-results-inner, #champ-inner, .coach, .guide, .vil-dialog {
  background-color: var(--ws-surface-strong);
  border: 1px solid var(--ws-edge);
  box-shadow: var(--ws-shadow-3);
}
.hud-box, .esc-hint, .proto-hint, .captions, .round-banner, .guide-return {
  background-color: var(--ws-surface-2);
  border: 1px solid var(--ws-edge);
  box-shadow: var(--ws-shadow-2);
}
.esc-hint { border-radius: var(--ws-radius-pill); }
.menu-card { border-radius: var(--ws-radius-xl); position: relative; isolation: isolate; }
.access-card { border-radius: var(--ws-radius-l); position: relative; isolation: isolate; }
.hud-box { border-radius: var(--ws-radius-m); }
#results-inner, #proto-results-inner, #champ-inner, .coach, .vil-dialog { border-radius: var(--ws-radius-l); }

/* Edge light: a 1 px gradient rim that catches the light from the top-left (and follows the pointer in "full"). */
:root[data-glass] .menu-card::before,
:root[data-glass] .access-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.06) 32%, rgba(124, 200, 255, 0.08) 64%, rgba(62, 230, 212, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
:root[data-glass="solid"] .menu-card::before, :root[data-glass="solid"] .access-card::before { display: none; }
/* Specular sheen: a soft light spot under the pointer (decorative, behind the content). */
:root[data-glass="full"] .menu-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background:
    radial-gradient(60% 45% at var(--ws-mx) var(--ws-my), rgba(255, 255, 255, 0.07), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 22%);
}

/* Frosted glass: only at the "full" level. */
:root[data-glass="full"] :is(.menu-card, .access-card, #results-inner, #proto-results-inner, #champ-inner, .coach, .guide, .vil-dialog, .hud-box, .esc-hint, .proto-hint, .captions, .round-banner, .guide-return, #spectate .sp-actions button) {
  -webkit-backdrop-filter: blur(var(--ws-blur)) saturate(var(--ws-saturate));
  backdrop-filter: blur(var(--ws-blur)) saturate(var(--ws-saturate));
}
/* A card inside a screen that already blurs (nested blur is expensive and muddy). */
:root[data-glass="full"] .access-dialog { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
:root:not([data-glass="full"]) :is(.menu-card, .guide) { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- typography ---------- */
.brand h1 { font-size: var(--ws-fs-display); font-weight: 800; letter-spacing: -0.03em; }
.brand h1 .brand-co { color: var(--ws-text-strong); }
.brand h1 .brand-product { color: var(--ws-gold-400); text-shadow: 0 0 28px rgba(255, 194, 61, 0.35); }
.eyebrow { color: var(--ws-aqua-400); letter-spacing: var(--ws-tracking-caps); }
.menu-section h2 { font-family: var(--ws-font-ui); font-size: var(--ws-fs-xs); font-weight: 800; letter-spacing: var(--ws-tracking-caps); color: var(--ws-aqua-300); }
.menu-section h2::before { content: ""; display: inline-block; inline-size: 18px; block-size: 2px; margin-inline-end: 8px; vertical-align: 0.3em; border-radius: 2px;
  background: linear-gradient(90deg, var(--ws-gold-400), var(--ws-aqua-400)); }
.screens-head h2, .access-head h2, #results-inner h2, #proto-results-inner h2, #champ-inner h2 { font-weight: 800; letter-spacing: -0.01em; }
.clock, .stat .val { font-family: var(--ws-font-mono); letter-spacing: -0.02em; }
.label { letter-spacing: var(--ws-tracking-caps); }

/* ---------- online trials (menu, DEC-393/394): an inset glass well with an aqua edge ---------- */
.online-trials {
  margin-block-start: var(--ws-space-3); padding: var(--ws-space-3) var(--ws-space-4); border-radius: var(--ws-radius-l);
  background-color: var(--ws-well); border: 1px solid rgba(62, 230, 212, 0.38); box-shadow: inset 0 1px 0 var(--ws-highlight), var(--ws-shadow-1);
}
.online-trials h3 { margin: 0 0 4px; font-size: var(--ws-fs-xs); font-weight: 800; letter-spacing: var(--ws-tracking-caps); text-transform: uppercase; color: var(--ws-aqua-300); }
.online-trials h3::before { content: "● "; color: #2fd27a; }
.online-trials-note { margin: 0 0 var(--ws-space-2); font-size: var(--ws-fs-xs); color: var(--ws-text-muted); }
.online-trials-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ws-space-2) var(--ws-space-3); }
.online-trials-row .field { flex: 1 1 12em; min-width: 0; margin: 0; }
.online-trial-btn { flex: 0 0 auto; border-color: rgba(62, 230, 212, 0.7); color: var(--ws-text-strong);
  background-image: linear-gradient(180deg, rgba(62, 230, 212, 0.28), rgba(124, 200, 255, 0.12)); }
.online-trial-btn:hover, .online-trial-btn:focus-visible { border-color: var(--ws-aqua-300); }
:root[data-glass="solid"] .online-trials { background-color: var(--ws-ink-850); }

/* ---------- controls ---------- */
button {
  background-color: var(--ws-surface-3); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--ws-edge); border-radius: var(--ws-radius-s);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 4px 14px -6px rgba(0, 0, 0, 0.6);
  transition: background-color var(--ws-dur-1) var(--ws-ease-out), border-color var(--ws-dur-1) var(--ws-ease-out), box-shadow var(--ws-dur-2) var(--ws-ease-out);
}
button:hover { background-color: var(--ws-surface-3); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)); border-color: var(--ws-edge-strong); }
button:active { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 4px rgba(0, 0, 0, 0.5); }
button.primary {
  background-color: var(--ws-gold-400); background-image: linear-gradient(180deg, var(--ws-gold-300), var(--ws-gold-400) 55%, var(--ws-gold-500)); color: #1a1200; border-color: rgba(255, 230, 160, 0.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, var(--ws-glow-gold);
}
button.primary:hover { background-color: var(--ws-gold-300); background-image: linear-gradient(180deg, #ffe39a, var(--ws-gold-300) 55%, var(--ws-gold-400)); }
input[type="text"], input[type="number"], select {
  background: var(--ws-well); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--ws-radius-s);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
}
select option { background: var(--ws-ink-850); color: var(--ws-text-strong); }
select optgroup { background: var(--ws-ink-850); color: var(--ws-aqua-300); font-style: normal; font-weight: 800; }
input[type="text"]:hover, select:hover { border-color: rgba(255, 255, 255, 0.3); }
.seg label { background: var(--ws-surface-3); border-color: var(--ws-edge); border-radius: var(--ws-radius-pill); }
.seg label:has(input:checked) { background: rgba(255, 194, 61, 0.16); border-color: var(--ws-gold-400); box-shadow: 0 0 0 1px rgba(255, 194, 61, 0.25) inset; }
kbd { background: linear-gradient(180deg, #2b3a4c, #1b2735); border: 1px solid rgba(255, 255, 255, 0.22); border-bottom-width: 3px; border-radius: 6px; color: #fff; }
.guide-open-btn { border-radius: var(--ws-radius-pill); }
.sc-tab, .guide-foot button, .guide-chapters li button { border-radius: var(--ws-radius-pill); }
.sc-panel, .sc-detail, .games-next, .access-group, .games-disc { background: rgba(255, 255, 255, 0.035); border-color: var(--ws-edge); }
:root[data-glass="solid"] :is(.sc-panel, .sc-detail, .games-next, .access-group, .games-disc) { background: var(--ws-ink-850); }
.access-group { border-radius: var(--ws-radius-m); }
.lobby-list li { background: rgba(255, 255, 255, 0.05); border-radius: var(--ws-radius-s); }

/* Touch controls: glass discs that light up gold when pressed. */
.touch-btn { background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 60%), rgba(10, 18, 30, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.42); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.2) inset; }
.touch-btn.pressed { background: var(--ws-gold-400); box-shadow: var(--ws-glow-gold); }

/* ---------- HUD ---------- */
.bar { background: rgba(255, 255, 255, 0.10); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; }
.bar i { background: linear-gradient(90deg, var(--ws-aqua-400), #8ef5b0); }
.call:not(:empty):not(.fs) { background: var(--ws-scrim); border-radius: var(--ws-radius-m); padding: 0.02em 0.45em; }
:root[data-glass="full"] .call:not(:empty):not(.fs) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.call.go { color: var(--ws-gold-300); }
.tag { background: rgba(6, 11, 19, 0.78); border-radius: var(--ws-radius-xs); }

/* ---------- motion (content never moves with the pointer) ---------- */
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}
.reduced button, .reduce-flash button { transition: none; }
/* Reduced motion keeps static glass: no transitions or animations on glass surfaces, no moving light. */
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }

/* ---------- touch targets on coarse pointers (WCAG 2.5.5 enhanced, 44 px) ---------- */
@media (pointer: coarse) {
  :is(.screen, .access-dialog, .guide, #village) button:not(.touch-btn) { min-height: var(--ws-target); }
  .seg label, .check { min-height: var(--ws-target); }
}

/* ---------- responsive shell ---------- */
/* Large desktops: a wider, airier card. */
@media (min-width: 1600px) {
  .menu-card:not(.narrow):not(.screens-card) { width: min(1180px, 100%); padding: 32px 38px; }
}
/* Tablets in portrait (iPad 768–1024 wide, tall): two columns, settings under the play column. */
@media (min-width: 700px) and (max-width: 1100px) and (orientation: portrait) {
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .menu-grid > .menu-section:last-child { grid-column: 1 / -1; }
}
/* Phones: edge-to-edge glass sheet with a comfortable inner gutter. */
@media (max-width: 560px) {
  .menu-card { padding: 18px 16px; border-radius: var(--ws-radius-l); }
  .brand h1 { font-size: clamp(1.6rem, 8vw, 2.1rem); }
}
/* Phones held sideways: compact header, keep the venue visible above the fold. */
@media (orientation: landscape) and (max-height: 520px) {
  .menu-card { padding: 14px 18px; }
  .brand h1 { font-size: 1.6rem; }
  .eyebrow { margin-bottom: 2px; }
}

/* Disqualification marks on translucent result panels: a lighter coral keeps AA over any scene. */
.results-table .dq { color: #ff9a9a; }