/* ============================================================================
   Dirt Bike shell
   Out of race UI: title, track select, results, boards, auth, admin, top bar.

   Art direction: late afternoon supercross. Warm low key light from the upper
   left, cool sky fill, deep warm shade. Surfaces are fabricated parts, not
   flat rectangles: every raised plane carries a lit top edge, an occluded
   bottom edge and a contact shadow so it sits on the plane behind it.

   Contrast, measured, all at or above WCAG AA for their size:
     #f6f1e9 on #0d0b09 17.5:1   #f6f1e9 on #1b1713 15.9:1
     #c3b6a4 on #1b1713  8.9:1   #a89c8c on #1b1713  6.6:1
     #ff7a2f on #0d0b09  7.6:1   #ff8f4d on #241e18  7.3:1
     #6fdc8c on #1b1713 10.4:1   #ff9090 on #1b1713  8.2:1
     #190a01 ink on the #ff9a5c to #ef6a1e primary fill 9.2:1 to 6.2:1
   ========================================================================== */

:root {
  /* ---- surfaces, darkest to lightest.
     The field is deliberately not all near black: panels sit in the midtones
     so the frame has a real value range from #12100d up to lit dirt. ---- */
  --bg: #12100d;
  --bg-2: #1a1611;
  --panel: #2a2219;
  --panel-2: #332a20;
  --panel-3: #3f3427;
  --raised: #3a3025;
  --well: #17130f;

  /* ---- ink ---- */
  --text: #f6f1e9;
  --text-2: #c3b6a4;
  --text-3: #a89c8c;
  --ink: #190a01;

  /* ---- accents ---- */
  --accent: #ff7a2f;
  --accent-hi: #ff8f4d;
  --accent-lo: #ef6a1e;
  --accent-soft: rgba(255, 122, 47, 0.13);
  --accent-line: rgba(255, 122, 47, 0.42);
  /* Player orange is reserved for primary actions, the current page and the
     brand mark. Everything decorative uses dirt amber instead, so the eye
     always finds the one thing it is supposed to act on. */
  --dirt: #c98a52;
  --dirt-hi: #e0a468;
  --good: #6fdc8c;
  --danger: #ff9090;
  --sky: #8fb8e8;

  /* ---- edges. Top edges catch the cool sky fill, bottom edges catch the warm
     dirt bounce, which is the same two source light story as the race. ---- */
  --edge-hi: rgba(196, 220, 255, 0.13);
  --edge-hi-2: rgba(206, 228, 255, 0.24);
  --edge-bounce: rgba(255, 176, 116, 0.13);
  --edge-lo: rgba(0, 0, 0, 0.6);
  --line: rgba(233, 238, 246, 0.11);
  --line-2: rgba(233, 238, 246, 0.07);

  /* ---- elevation ---- */
  --e1: 0 1px 0 var(--edge-lo), 0 2px 6px rgba(0, 0, 0, 0.4);
  --e2: 0 1px 0 var(--edge-lo), 0 6px 14px -6px rgba(0, 0, 0, 0.7), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --e3: 0 2px 0 var(--edge-lo), 0 12px 24px -10px rgba(0, 0, 0, 0.75), 0 34px 64px -30px rgba(0, 0, 0, 0.95);
  --e-inset: inset 0 1px 0 var(--edge-hi-2), inset 0 -1px 0 var(--edge-bounce), inset 0 -2px 6px rgba(0, 0, 0, 0.28);

  /* ---- type ---- */
  --display: 'Arial Black', 'Segoe UI Black', 'Helvetica Neue', Impact, Arial, sans-serif;
  --body: 'Segoe UI', 'Helvetica Neue', system-ui, Arial, sans-serif;
  --mono: 'Cascadia Mono', 'SF Mono', Consolas, 'Courier New', monospace;

  --t-3xs: 10px;
  --t-2xs: 11px;
  --t-xs: 12px;
  --t-sm: 13px;
  --t-base: 15px;
  --t-md: 17px;
  --t-lg: 20px;
  --t-xl: 25px;
  --t-2xl: 31px;
  --t-3xl: 40px;

  /* ---- rhythm ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 22px;
  --s6: 30px;
  --s7: 42px;
  --s8: 60px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* ---- motion: fast and weighted, never floaty ---- */
  --t-fast: 120ms;
  --t-mid: 160ms;
  --t-slow: 220ms;
  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 0.9, 0.3, 1);

  --wrap: 1280px;

  /* Very fine monochrome grain. Constant across the frame so it never crawls. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

html { overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font: var(--t-base)/1.55 var(--body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Stadium light: warm key from the upper left, cool floodlight pool upper
   right, and a warm dust band at the horizon. Fixed, so it never scrolls. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 640px at 8% -10%, rgba(255, 176, 108, 0.16), transparent 62%),
    radial-gradient(1000px 700px at 88% 4%, rgba(143, 184, 232, 0.14), transparent 62%),
    radial-gradient(1500px 620px at 50% 116%, rgba(200, 146, 88, 0.13), transparent 68%),
    linear-gradient(180deg, #221c15 0%, #17130f 38%, #100e0b 100%);
}

/* Corner vignette. Keeps the eye on the middle of the frame. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(0, 0, 0, 0.55) 100%);
}

/* Very fine film grain, constant across the frame so it never crawls. A 320px
   tile at this opacity has no structure a viewer could count. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.045;
}

body.racing .grain { display: none; }
body.racing { overflow: hidden; }

a { color: var(--accent-hi); }

/* Every inline icon gets a size by default. Component rules may override, but
   nothing is ever allowed to fall back to the intrinsic SVG box. */
svg.ico {
  width: 16px;
  height: 16px;
  flex: none;
  display: inline-block;
  vertical-align: -0.16em;
}

::selection {
  background: var(--accent);
  color: var(--ink);
}

.visually-hidden {
  position: absolute !important;
  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;
}

/* ------------------------------------------------------------------- focus */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 122, 47, 0.18);
}

.card:focus-within {
  border-color: var(--accent-line);
}

/* ================================================================= typography
   One display treatment, one body treatment, one mono treatment. The display
   face is layered: a metallic vertical gradient fill, a hard extrude, then a
   soft cast shadow, so headings read as fabricated signage and not as an h1. */

.display {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.02;
  color: #f6f1e9;
  background-image: linear-gradient(178deg, #fffdf8 0%, #f4ece0 38%, #cbbca6 62%, #ece2d3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(1px 1px 0 rgba(38, 22, 10, 0.95))
    drop-shadow(2px 2px 0 rgba(18, 10, 4, 0.8))
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}

.display-accent {
  background-image: linear-gradient(178deg, #ffdcb6 0%, #ff9a5c 44%, #ef6a1e 72%, #ffbe8c 100%);
}

.page-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.04;
  margin: 0;
  color: #f6f1e9;
  background-image: linear-gradient(178deg, #fffdf8 0%, #f2e9dc 40%, #c6b6a0 64%, #e8ddcd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(1px 1px 0 rgba(38, 22, 10, 0.95))
    drop-shadow(2px 2px 0 rgba(16, 9, 4, 0.85))
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.65));
}

.page-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-2xs);
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dirt-hi);
  margin: 0 0 var(--s2);
}

.page-kicker::before {
  content: '';
  width: 22px;
  height: 3px;
  background: linear-gradient(90deg, var(--dirt-hi), rgba(201, 138, 82, 0));
  border-radius: 2px;
  flex: none;
}

.page-sub {
  color: var(--text-2);
  font-size: var(--t-base);
  margin: var(--s2) 0 0;
  max-width: 62ch;
}

h2.section {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--t-md);
  letter-spacing: 0.05em;
  margin: 0;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
}

h2.section::before {
  content: '';
  width: 4px;
  height: 17px;
  flex: none;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--dirt-hi), #a06636);
  transform: skewX(-12deg);
}

h3.card-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--t-md);
  letter-spacing: 0.02em;
  line-height: 1.12;
  margin: 0;
  color: var(--text);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}

.eyebrow {
  font-size: var(--t-2xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.muted-text { color: var(--text-2); }
.faint-text { color: var(--text-3); }

/* The racing voice does not stop at the display type. Every label, control and
   column head is raked to the same angle so the interface reads as one object.
   Running body copy stays upright: legibility wins there. */
.btn,
.icon-btn,
.seg button,
.seg-label,
.nav a,
.eyebrow,
.badge,
.pill,
.stat-label,
.diff-label,
.field > label,
.field-label,
.page-kicker,
.hero-kicker,
.hero-fact-label,
.compare-head,
.result-verdict,
.strip-meta,
.board-item,
.linklike,
table.xb th {
  font-style: italic;
}

.mono {
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* A printed vinyl start line. Two rows of checker with a bevel and a warm
   under-glow, fading out to the right so it reads as a graphic, not a border. */
svg.checker-strip {
  display: block;
  height: 30px;
  width: min(470px, 100%);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.85));
}

/* =================================================================== surfaces
   Panels are milled plates: a top lit edge, a body gradient that falls away
   from the key light, an occluded bottom edge, and a contact shadow. */

.panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(200, 224, 255, 0.07), rgba(200, 224, 255, 0) 34%),
    linear-gradient(184deg, var(--panel-2) 0%, var(--panel) 56%, #221b14 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--e2), var(--e-inset);
}

.panel-flush { padding: 0; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line-2);
}

.section-block { margin-top: var(--s7); }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}

.section-head .hairline {
  flex: 1;
  height: 1px;
  min-width: 30px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* ==================================================================== buttons
   Primary is glossy painted plastic under the key light. Secondary is a dry
   milled plate. Both press down and lose their highlight when active. */

.btn {
  --btn-bg-a: #2f271f;
  --btn-bg-b: #221c16;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--btn-bg-a), var(--btn-bg-b));
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 10px 18px;
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--e1), inset 0 1px 0 var(--edge-hi-2);
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.btn:hover {
  --btn-bg-a: #3a3126;
  --btn-bg-b: #29221a;
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: var(--e2), inset 0 1px 0 var(--edge-hi-2);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
}

.btn-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #ff9a5c 0%, #fb7c31 52%, #ef6a1e 100%);
  border-color: #c2510f;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 214, 178, 0.45);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 8px 18px -8px rgba(255, 122, 47, 0.55),
    inset 0 1px 0 rgba(255, 236, 214, 0.6),
    inset 0 -2px 0 rgba(120, 44, 4, 0.5);
}

.btn-primary:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #ffab73 0%, #ff8b45 52%, #f4762b 100%);
  border-color: #d75c14;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 14px 26px -10px rgba(255, 122, 47, 0.6),
    inset 0 1px 0 rgba(255, 240, 222, 0.7),
    inset 0 -2px 0 rgba(120, 44, 4, 0.45);
}

.btn-primary:active {
  box-shadow: inset 0 3px 7px rgba(96, 34, 2, 0.6);
}

.btn-lg {
  padding: 14px 28px;
  font-size: var(--t-base);
  border-radius: var(--r-md);
  letter-spacing: 0.07em;
}

.btn-small {
  padding: 6px 12px;
  font-size: var(--t-xs);
  border-radius: var(--r-sm);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line-2);
  box-shadow: none;
  color: var(--text-2);
}

.btn-ghost:hover {
  background: rgba(255, 236, 214, 0.05);
  color: var(--text);
  box-shadow: var(--e1);
}

.btn-danger { color: var(--text-2); }

.btn-danger:hover {
  border-color: rgba(255, 144, 144, 0.55);
  color: var(--danger);
}

.btn .ico {
  width: 15px;
  height: 15px;
  flex: none;
  display: block;
}

.btn-lg .ico { width: 18px; height: 18px; }

.linklike {
  background: none;
  border: 0;
  padding: 2px 2px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  font: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast) var(--ease);
}

.linklike:hover { color: var(--accent-hi); }

/* Segmented control. Selected state carries aria-pressed, never colour alone:
   it also gets the raised lit plate and a caret notch. */

.seg {
  display: inline-flex;
  background: linear-gradient(180deg, #100d0b, #171310);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 3px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
}

.seg button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 8px 18px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-3);
  font: inherit;
  font-weight: 800;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.seg button:hover { color: var(--text); }

.seg button[aria-pressed='true'] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #ff9a5c, #ef6a1e);
  border-color: #c2510f;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 214, 178, 0.4);
  box-shadow: 0 2px 8px -2px rgba(255, 122, 47, 0.5), inset 0 1px 0 rgba(255, 240, 222, 0.55);
}

.seg-label {
  color: var(--text-3);
  text-transform: uppercase;
  font-size: var(--t-2xs);
  font-weight: 800;
  letter-spacing: 0.16em;
}

.mode-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* ===================================================================== chips */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(246, 241, 233, 0.13), rgba(246, 241, 233, 0.05));
  border: 1px solid var(--line);
  color: var(--text-2);
  box-shadow: inset 0 1px 0 var(--edge-hi-2);
  white-space: nowrap;
}

.badge.admin {
  background: linear-gradient(180deg, rgba(255, 122, 47, 0.26), rgba(255, 122, 47, 0.1));
  border-color: var(--accent-line);
  color: #ffbe8c;
}

.badge.featured {
  background: linear-gradient(180deg, rgba(111, 220, 140, 0.24), rgba(111, 220, 140, 0.08));
  border-color: rgba(111, 220, 140, 0.42);
  color: #a9edbe;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-3xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--text-2);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px 8px 3px 4px;
  white-space: nowrap;
}

.pill .mark {
  width: 15px;
  height: 11px;
  flex: none;
  display: block;
}

/* One line, always. Cards in a row must break at the same height. */
.pill-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow: hidden;
  min-height: 21px;
}

/* ===================================================================== forms */

.field { margin-bottom: var(--s4); }

.field > label,
.field-label {
  display: block;
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  font-weight: 800;
  margin-bottom: 6px;
}

.field-hint {
  font-size: var(--t-xs);
  color: var(--text-3);
  margin: 5px 0 0;
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='search'],
select,
textarea {
  width: 100%;
  background: linear-gradient(180deg, #0c0a08, #151109);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font: inherit;
  font-size: var(--t-base);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65), 0 1px 0 var(--edge-hi);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

input::placeholder { color: #7d7263; }

input:hover,
select:hover { border-color: rgba(246, 241, 233, 0.18); }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65), 0 0 0 3px rgba(255, 122, 47, 0.16);
}

/* Custom select: never a default browser control. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.6l5-5' fill='none' stroke='%23c3b6a4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #0c0a08, #151109);
  background-repeat: no-repeat, no-repeat;
  background-position: right 12px center, 0 0;
  background-size: 12px 8px, auto;
  cursor: pointer;
}

select option {
  background: #191410;
  color: var(--text);
}

input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0c0a08, #171310);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

input[type='checkbox']::after {
  content: '';
  width: 11px;
  height: 7px;
  border-left: 2.4px solid var(--ink);
  border-bottom: 2.4px solid var(--ink);
  transform: rotate(-45deg) translate(1px, -1px) scale(0.4);
  opacity: 0;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease);
}

input[type='checkbox']:checked {
  background: linear-gradient(180deg, #ff9a5c, #ef6a1e);
  border-color: #c2510f;
  box-shadow: inset 0 1px 0 rgba(255, 240, 222, 0.55), 0 2px 8px -2px rgba(255, 122, 47, 0.5);
}

input[type='checkbox']:checked::after {
  opacity: 1;
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}

input[type='range'] {
  appearance: none;
  -webkit-appearance: none;
  height: 22px;
  background: transparent;
  cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #0a0806, #191410);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 var(--edge-hi);
  border: 1px solid rgba(0, 0, 0, 0.6);
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffb27f, #ef6a1e);
  border: 1px solid #a8440a;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 240, 222, 0.7);
  transition: transform var(--t-fast) var(--ease);
}

input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type='range']:active::-webkit-slider-thumb { transform: scale(0.96); }

input[type='range']::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #131009;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

input[type='range']::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffb27f, #ef6a1e);
  border: 1px solid #a8440a;
}

.inline-field {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--text-2);
  font-size: var(--t-sm);
}

.inline-field .field-label { margin-bottom: 0; }
.inline-field input,
.inline-field select { width: auto; }

.form-error {
  color: var(--danger);
  font-size: var(--t-sm);
  font-weight: 600;
  min-height: 20px;
  margin: 2px 0 var(--s3);
}

.form-error:not(:empty) {
  padding: 7px 11px;
  border-radius: var(--r-sm);
  background: rgba(255, 100, 100, 0.09);
  border-left: 3px solid var(--danger);
}

/* ==================================================================== topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: 0 var(--s5);
  height: 60px;
  background: linear-gradient(180deg, rgba(24, 20, 16, 0.94), rgba(13, 11, 9, 0.9));
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.75);
  box-shadow: 0 1px 0 var(--edge-hi), 0 10px 26px -14px rgba(0, 0, 0, 0.95);
}

/* Warm accent hairline under the bar, brightest under the logo. */
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 122, 47, 0.6), rgba(255, 122, 47, 0.06) 34%, transparent 60%);
}

body.racing .topbar { display: none; }

.wordmark {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  border-radius: var(--r-sm);
  flex: none;
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.wordmark:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.wordmark svg { display: block; height: 30px; width: auto; }

.nav {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
  align-items: center;
}

.nav a {
  position: relative;
  color: var(--text-3);
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.13em;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.nav a:hover {
  color: var(--text);
  background: rgba(246, 241, 233, 0.05);
}

.nav a[aria-current='page'] {
  color: var(--accent-hi);
  background: var(--accent-soft);
}

/* Selected nav is never colour alone: it also carries a lit underbar. */
.nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-lo));
  box-shadow: 0 0 8px rgba(255, 122, 47, 0.7);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, #241e18, #191410);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-2);
  font: inherit;
  font-size: var(--t-2xs);
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 7px 12px;
  cursor: pointer;
  box-shadow: var(--e1), inset 0 1px 0 var(--edge-hi);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.icon-btn:hover {
  color: var(--text);
  border-color: var(--accent-line);
  transform: translateY(-1px);
}

.icon-btn:active { transform: translateY(1px); }
.icon-btn .ico { width: 15px; height: 15px; flex: none; }
.icon-btn[aria-pressed='true'] { color: var(--text-3); }
.icon-btn[aria-pressed='true'] .ico { opacity: 0.75; }

.userchip {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: linear-gradient(180deg, #241e18, #171310);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
  box-shadow: var(--e1), inset 0 1px 0 var(--edge-hi);
}

.userchip .avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--ink);
  background: linear-gradient(180deg, #ffab73, #ef6a1e);
  box-shadow: inset 0 1px 0 rgba(255, 240, 222, 0.6), 0 1px 3px rgba(0, 0, 0, 0.6);
}

.user-name {
  font-weight: 700;
  font-size: var(--t-sm);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==================================================================== layout */

#screen {
  display: block;
  padding: 0 0 var(--s6);
}

body.racing #screen { padding: 0; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s6) var(--s5) 0;
}

.wrap-wide { max-width: 1580px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line-2);
}

.page-head-main { min-width: 0; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  align-items: start;
}

.two-col.even { align-items: stretch; }

.garage-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  align-items: stretch;
}

.garage-panels > .panel { height: 100%; }

.graphics-select { min-height: 44px; }

/* ---------------------------------------------------------------- footrail */

.footrail {
  margin-top: var(--s7);
  border-top: 1px solid rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 1px 0 var(--edge-hi);
  background: linear-gradient(180deg, rgba(26, 22, 17, 0.9), rgba(13, 11, 9, 0.95));
}

body.racing .footrail { display: none; }

.footrail-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s4) var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}

.footmark { display: block; opacity: 0.7; }
.footmark svg { display: block; height: 20px; width: auto; }

.foot-sep {
  width: 1px;
  height: 20px;
  background: linear-gradient(180deg, transparent, var(--line), transparent);
}

.foot-spacer { flex: 1; min-width: 12px; }

.foot-nav { display: flex; gap: var(--s4); }

.foot-nav a {
  color: var(--text-3);
  text-decoration: none;
  font-style: italic;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease);
}

.foot-nav a:hover { color: var(--accent-hi); }

.foot-note {
  color: var(--text-3);
  font-size: var(--t-xs);
  font-style: italic;
  letter-spacing: 0.08em;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* Staggered entrance. `backwards` fill means no keyframe value survives the
   animation, so hover and press transforms still work afterwards. */
@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes wipeIn {
  from { opacity: 0; transform: translate3d(-16px, 0, 0); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  #screen > * { animation: riseIn 240ms var(--ease-out) backwards; }
  #screen > *:nth-child(2) { animation-delay: 45ms; }
  #screen > *:nth-child(3) { animation-delay: 80ms; }
  #screen > *:nth-child(4) { animation-delay: 110ms; }

  .grid > * { animation: riseIn 220ms var(--ease-out) backwards; }
  .grid > *:nth-child(2) { animation-delay: 35ms; }
  .grid > *:nth-child(3) { animation-delay: 70ms; }
  .grid > *:nth-child(4) { animation-delay: 100ms; }
  .grid > *:nth-child(5) { animation-delay: 125ms; }
  .grid > *:nth-child(n + 6) { animation-delay: 145ms; }

  .hero-in-1 { animation: wipeIn 300ms var(--ease-out) 20ms backwards; }
  .hero-in-2 { animation: riseIn 340ms var(--ease-out) 70ms backwards; }
  .hero-in-3 { animation: wipeIn 300ms var(--ease-out) 150ms backwards; }
  .hero-in-4 { animation: riseIn 300ms var(--ease-out) 200ms backwards; }
  .hero-in-5 { animation: riseIn 300ms var(--ease-out) 250ms backwards; }
}

/* ====================================================================== hero
   Full bleed key art with a hard left to right falloff so all type sits on a
   near solid plate, and a warm rim where the art meets the dark. */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(97deg,
      rgba(14, 12, 10, 0.94) 0%,
      rgba(16, 13, 10, 0.84) 30%,
      rgba(18, 14, 11, 0.5) 55%,
      rgba(22, 16, 12, 0.16) 76%,
      rgba(26, 19, 14, 0.22) 100%),
    url('/textures/hero.jpg') 62% 42% / cover no-repeat,
    var(--bg);
}

/* Two source lighting over the art: a warm key pool where the sun sits, a cool
   sky fill lifting the shadow side toward blue, then a deep floor shadow. No
   repeating overlay anywhere, so nothing tiles. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(660px 420px at 76% 6%, rgba(255, 200, 136, 0.3), transparent 66%),
    radial-gradient(760px 620px at 4% 96%, rgba(122, 168, 224, 0.22), transparent 68%),
    linear-gradient(180deg, rgba(96, 138, 196, 0.14) 0%, transparent 26%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, transparent 20%, transparent 48%, rgba(14, 12, 10, 0.7) 80%, var(--bg) 100%);
}

/* A single soft light streak raking down from the floodlights. One shape, not
   a pattern, so there is nothing to count. */
.hero::after {
  content: '';
  position: absolute;
  top: -30%;
  right: 6%;
  width: 46%;
  height: 160%;
  z-index: 0;
  pointer-events: none;
  transform: rotate(14deg);
  background: linear-gradient(90deg,
    rgba(255, 226, 186, 0) 0%,
    rgba(255, 226, 186, 0.11) 34%,
    rgba(255, 226, 186, 0.03) 52%,
    rgba(255, 226, 186, 0.09) 68%,
    rgba(255, 226, 186, 0) 100%);
  filter: blur(9px);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s6) var(--s5);
  min-height: 384px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--dirt-hi);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: var(--t-2xs);
  font-weight: 800;
  margin: 0 0 var(--s4);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.hero-kicker .rule {
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--dirt-hi), rgba(201, 138, 82, 0));
  flex: none;
}

.hero-logo {
  display: block;
  width: min(680px, 78%);
  height: auto;
  margin: 0 0 var(--s4) -4px;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.75));
}

.hero-sub {
  color: var(--text);
  font-size: var(--t-lg);
  font-weight: 600;
  margin: var(--s4) 0 0;
  max-width: 42ch;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.hero-sub .accent { color: var(--accent-hi); }

.hero-cta {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s5);
}

.hero-facts {
  display: flex;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid rgba(246, 241, 233, 0.12);
  max-width: 620px;
}

.hero-fact { min-width: 84px; }

.hero-fact-value {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--text);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.85);
}

.hero-fact-label {
  display: block;
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-2);
  font-weight: 800;
  margin-top: 5px;
}

/* ==================================================================== tiles */

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

.tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s4);
  text-align: left;
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255, 236, 214, 0.05), rgba(255, 236, 214, 0) 45%),
    linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 60%, #17130f 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s5);
  cursor: pointer;
  color: var(--text);
  font: inherit;
  overflow: hidden;
  box-shadow: var(--e2), var(--e-inset);
  transition:
    transform var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease);
}

/* Warm edge light that sweeps in from the left on hover. */
.tile::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--dirt-hi), #a06636);
  transform: scaleY(0.001);
  transform-origin: center;
  transition: transform var(--t-mid) var(--ease-out);
}

.tile:hover,
.tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  box-shadow: var(--e3), var(--e-inset), 0 0 40px -18px rgba(255, 122, 47, 0.7);
}

.tile:hover::before,
.tile:focus-visible::before { transform: scaleY(1); }

.tile:active { transform: translateY(0); }

.tile-ico {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-content: center;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #322820, #1d1813);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--edge-hi-2), 0 3px 8px -3px rgba(0, 0, 0, 0.8);
  color: var(--dirt-hi);
  transition: color var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}

.tile-ico .ico { width: 22px; height: 22px; display: block; }

.tile:hover .tile-ico {
  color: #ffc496;
  background: linear-gradient(180deg, #3d3125, #241c15);
}

.tile-body { min-width: 0; flex: 1; }

.tile-title {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--t-lg);
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.65);
}

.tile-sub {
  display: block;
  color: var(--text-2);
  font-size: var(--t-sm);
  margin-top: 3px;
}

.tile-arrow {
  flex: none;
  color: var(--text-3);
  transition: transform var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease);
}

.tile-arrow .ico { width: 18px; height: 18px; display: block; }

.tile:hover .tile-arrow {
  transform: translateX(4px);
  color: var(--accent-hi);
}

/* Rider identity panel on the menu. */
.rider-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.rider-plate {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
  border: 1px solid var(--line-2);
}

.plate-num {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-content: center;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #f4ecdf, #cfc2ae);
  color: #16110c;
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-lg);
  transform: skewX(-8deg);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 3px 8px -3px rgba(0, 0, 0, 0.9);
}

/* ============================================================ track cards */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s4);
}

.grid-wide { grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); }

.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card-featured { grid-column: span 2; }
.card-featured .card-art { height: 168px; }
.card-featured h3.card-title { font-size: var(--t-xl); }

@media (max-width: 1080px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-featured { grid-column: span 2; }
}

@media (max-width: 700px) {
  .grid-3 { grid-template-columns: 1fr; }
  .card-featured { grid-column: span 1; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 236, 214, 0.05), rgba(255, 236, 214, 0) 38%),
    linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 55%, #17130f 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--e2), var(--e-inset);
  transition:
    transform var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  box-shadow: var(--e3), var(--e-inset), 0 0 44px -20px rgba(255, 122, 47, 0.65);
}

/* The silhouette strip is the card's key art: a real side profile of the
   track, sampled from trackFormat, on a dusk sky. */
.card-art {
  position: relative;
  display: block;
  width: 100%;
  height: 124px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  background: #0b0908;
  overflow: hidden;
}

.card-art svg { display: block; width: 100%; height: 100%; }

.card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -14px 22px -12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 236, 214, 0.08);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4);
  flex: 1;
}

.card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
}

.card-meta {
  color: var(--text-2);
  font-size: var(--t-xs);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.card-meta .sep { color: #6a6053; margin: 0 6px; }

.card-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s2) 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  margin-top: 2px;
}

.diff {
  display: flex;
  align-items: center;
  gap: 8px;
}

.diff-bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  padding: 3px 5px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.34);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.diff-bars i {
  display: block;
  width: 8px;
  border-radius: 1px;
  background: rgba(233, 238, 246, 0.13);
}

.diff-bars i:nth-child(1) { height: 8px; }
.diff-bars i:nth-child(2) { height: 12px; }
.diff-bars i:nth-child(3) { height: 16px; }
.diff-bars i:nth-child(4) { height: 20px; }
.diff-bars i:nth-child(5) { height: 24px; }

.diff-bars i.on {
  background: linear-gradient(180deg, #edb684, #a8703c);
  box-shadow: inset 0 1px 0 rgba(255, 240, 222, 0.45);
}

.diff-label {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.1;
}

.diff-label small {
  display: block;
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

.card-best {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--good);
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-best.none {
  color: var(--text-3);
  font-weight: 500;
}

.card-best .ico { width: 14px; height: 14px; flex: none; }

.card-actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--s3);
}

.empty-note {
  color: var(--text-2);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.12));
  border: 1px dashed rgba(246, 241, 233, 0.13);
  border-radius: var(--r-lg);
  padding: var(--s5);
  text-align: center;
}

/* ------------------------------------------------------------- the pillars */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
}

.pillar {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(200, 224, 255, 0.06), rgba(200, 224, 255, 0) 34%),
    linear-gradient(184deg, var(--panel-2), var(--panel) 60%, #221b14);
  box-shadow: var(--e2), var(--e-inset);
}

.pillar-art {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
}

.pillar-body { padding: var(--s3) var(--s4) var(--s4); }

.pillar-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--t-md);
  letter-spacing: 0.02em;
  margin: 0 0 5px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.65);
}

.pillar-copy {
  margin: 0;
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.45;
}

@media (max-width: 1080px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .pillars { grid-template-columns: 1fr; }
}

/* Compact circuit strip on the title screen. */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s3);
}

.strip-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), #17130f);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--e1), inset 0 1px 0 var(--edge-hi);
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}

.strip-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  box-shadow: var(--e2), 0 0 34px -16px rgba(255, 122, 47, 0.7);
}

.strip-card:active { transform: translateY(0); }

.strip-art {
  height: 62px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  background: #0b0908;
}

.strip-art svg { display: block; width: 100%; height: 100%; }

.strip-body { padding: 9px 11px 11px; }

.strip-name {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}

.strip-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--t-2xs);
  color: var(--text-2);
  letter-spacing: 0.04em;
}

/* ====================================================================== race */

.race-host {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 50;
}

/* =================================================================== results
   The time is the hero. Everything else is support. */

.result-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: center;
  overflow: hidden;
  padding: var(--s6) var(--s6);
}

.result-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 260px at 18% 0%, rgba(255, 154, 92, 0.14), transparent 68%),
    repeating-linear-gradient(104deg, rgba(255, 214, 170, 0.035) 0 2px, transparent 2px 22px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 72%);
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.result-hero > * { position: relative; }

.result-verdict .ico { width: 14px; height: 14px; }

.result-verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: var(--t-2xs);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: #ffbe8c;
}

.result-verdict.best {
  border-color: rgba(111, 220, 140, 0.45);
  background: rgba(111, 220, 140, 0.13);
  color: #a9edbe;
}

.result-verdict.dnf {
  border-color: rgba(255, 144, 144, 0.45);
  background: rgba(255, 100, 100, 0.1);
  color: var(--danger);
}

.result-time {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(52px, 8vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: var(--s3) 0 0;
  font-variant-numeric: tabular-nums;
  background-image: linear-gradient(178deg, #fffdf8 0%, #f4ece0 34%, #c2b39c 60%, #efe5d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(2px 2px 0 rgba(40, 22, 9, 0.95))
    drop-shadow(4px 4px 0 rgba(14, 8, 3, 0.8))
    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.7));
}

.result-time .frac { font-size: 0.52em; }

.result-delta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s4);
  font-family: var(--mono);
  font-size: var(--t-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 7px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-2);
}

.result-delta.up {
  color: var(--good);
  border-color: rgba(111, 220, 140, 0.4);
  background: rgba(111, 220, 140, 0.1);
}

.result-delta.down {
  color: #ffbe8c;
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.result-delta .ico { width: 15px; height: 15px; flex: none; }

.result-track {
  color: var(--text-2);
  font-size: var(--t-base);
  margin: var(--s3) 0 0;
}

.compare {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.compare-row { display: grid; gap: 5px; }

.compare-head {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--text-3);
}

.compare-head .val {
  font-family: var(--mono);
  letter-spacing: 0;
  color: var(--text);
  font-size: var(--t-sm);
}

.compare-bar {
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(180deg, #0a0806, #17120e);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.compare-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(180deg, #6f6559, #4a423a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.compare-row.now .compare-bar span {
  background: linear-gradient(180deg, #ffab73, #ef6a1e);
  box-shadow: inset 0 1px 0 rgba(255, 240, 222, 0.5), 0 0 14px rgba(255, 122, 47, 0.5);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: var(--s3);
}

.result-hero .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.stat {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 236, 214, 0.05), rgba(255, 236, 214, 0) 45%),
    linear-gradient(180deg, var(--panel-2), #17130f);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  box-shadow: var(--e1), inset 0 1px 0 var(--edge-hi);
  overflow: hidden;
}

.stat::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(201, 138, 82, 0.8), rgba(201, 138, 82, 0.06));
}

.stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-3);
  font-weight: 800;
}

.stat-label .ico { width: 13px; height: 13px; color: var(--dirt-hi); }

.stat-value {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1.1;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
}

.actions-row {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  align-items: center;
}

.submit-line {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  color: var(--text-2);
  font-size: var(--t-sm);
}

.submit-line .ico { width: 15px; height: 15px; flex: none; color: var(--text-3); }

/* =============================================================== leaderboards */

.boards {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}

.board-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--s3);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.14));
  border: 1px solid var(--line-2);
  max-height: 74vh;
  overflow-y: auto;
}

.board-item {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 9px 12px;
  color: var(--text-2);
  font: inherit;
  font-weight: 700;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.board-item .tick {
  width: 3px;
  height: 15px;
  flex: none;
  border-radius: 2px;
  background: transparent;
  transform: skewX(-12deg);
}

.board-item:hover {
  color: var(--text);
  background: rgba(246, 241, 233, 0.05);
}

.board-item[aria-current='true'] {
  background: linear-gradient(90deg, var(--accent-soft), rgba(255, 122, 47, 0.03));
  border-color: var(--accent-line);
  color: #ffbe8c;
}

.board-item[aria-current='true'] .tick {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo));
  box-shadow: 0 0 8px rgba(255, 122, 47, 0.7);
}

.board-title {
  font-family: var(--display);
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--t-xl);
  margin: 0;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
}

.board-hero { overflow: hidden; }

.board-art {
  height: 150px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.75);
}

.board-hero-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding: var(--s4) var(--s5);
}

.board-hero-side {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}

.me-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: var(--s4) 0 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--accent-soft), rgba(255, 122, 47, 0.02));
  border: 1px solid var(--accent-line);
  font-weight: 700;
  color: #ffbe8c;
  font-size: var(--t-sm);
}

.me-row .ico { width: 16px; height: 16px; flex: none; }

.rank {
  display: inline-grid;
  place-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--text-2);
  background: linear-gradient(180deg, #2a231c, #1a1512);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--edge-hi);
}

.rank.g1 { background: linear-gradient(180deg, #ffe08a, #c9962c); color: #241704; border-color: #a87c1c; }
.rank.g2 { background: linear-gradient(180deg, #eae3d6, #9a9184); color: #201c16; border-color: #857c70; }
.rank.g3 { background: linear-gradient(180deg, #e3a476, #a4652c); color: #241704; border-color: #8a5322; }

/* ==================================================================== tables */

.table-scroll {
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, 0.22);
}

table.xb {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

table.xb th {
  text-align: left;
  color: var(--text-3);
  text-transform: uppercase;
  font-size: var(--t-3xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 10px 12px;
  background: linear-gradient(180deg, #241e18, #1a1612);
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 1px 0 var(--edge-hi);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

table.xb td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}

table.xb tbody tr { transition: background var(--t-fast) var(--ease); }
table.xb tbody tr:nth-child(even) { background: rgba(246, 241, 233, 0.018); }
table.xb tbody tr:hover { background: rgba(255, 122, 47, 0.07); }
table.xb tbody tr:last-child td { border-bottom: 0; }
table.xb td .btn { margin-right: 6px; }

table.xb td.num-cell {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ====================================================================== auth */

.auth-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  align-items: start;
}

@media (max-width: 1180px) {
  .auth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.auth-panel .panel-head { margin-bottom: var(--s4); }

.auth-side {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.auth-perk {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  font-size: var(--t-sm);
  color: var(--text-2);
}

.auth-perk .ico {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--dirt-hi);
  margin-top: 2px;
}

/* ===================================================================== admin */

.admin-panel { margin-top: var(--s4); }

.forbidden-panel {
  max-width: 620px;
  margin: 8vh auto 0;
  text-align: center;
  padding: var(--s7) var(--s6);
}

.forbidden-panel .page-kicker,
.forbidden-panel .actions-row { justify-content: center; }

.forbidden-panel .page-sub { margin-inline: auto; }

.forbidden-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s5);
  display: grid;
  place-content: center;
  border-radius: 50%;
  color: var(--accent-hi);
  background: linear-gradient(180deg, #322820, #1a1512);
  border: 1px solid var(--accent-line);
  box-shadow: inset 0 1px 0 var(--edge-hi-2), 0 10px 26px -12px rgba(255, 122, 47, 0.5);
}

.forbidden-badge .ico { width: 28px; height: 28px; }

.filter-row {
  display: flex;
  gap: var(--s2);
  align-items: flex-end;
  margin-bottom: var(--s4);
  flex-wrap: wrap;
}

.filter-row .field { margin-bottom: 0; }
.filter-row .field input { min-width: 280px; }

/* ===================================================================== toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%) translateY(14px);
  background: linear-gradient(180deg, #2a231c, #191410);
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 12px 20px;
  font-size: var(--t-sm);
  font-weight: 600;
  max-width: min(560px, 92vw);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out);
  z-index: 100;
  box-shadow: var(--e3);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==================================================================== editor */

.editor-host {
  width: 100%;
  min-height: 74vh;
}

/* ================================================================ responsive */

@media (max-width: 1080px) {
  .result-hero { grid-template-columns: 1fr; gap: var(--s5); }
  .hero-logo { width: min(600px, 92%); }
}

@media (max-width: 940px) {
  .boards { grid-template-columns: 1fr; }
  .board-list { flex-direction: row; flex-wrap: wrap; max-height: none; }
  .board-item { flex: 1 1 auto; }
  .auth-grid,
  .two-col,
  .garage-panels,
  .menu-grid { grid-template-columns: 1fr; }
  .topbar { gap: var(--s3); height: auto; flex-wrap: wrap; padding: var(--s2) var(--s4); }
  .nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .wrap { padding: var(--s5) var(--s4) 0; }
  .hero-inner { padding: var(--s6) var(--s4); min-height: 340px; }
  .hero-logo { width: 92%; }
}

@media (max-width: 560px) {
  .grid, .grid-wide { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .page-head { align-items: flex-start; flex-direction: column; }
  .hero-sub { font-size: var(--t-md); }
}

/* ====================================================== reduced motion
   Everything decorative stops. Nothing that carries meaning depends on it. */

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

  .tile:hover,
  .card:hover,
  .btn:hover,
  .strip-card:hover { transform: none; }

  .tile:hover .tile-arrow { transform: none; }
}