/*
 * Racing site (racing.crashspeedruns.*): "Galactic Grand Prix", Crash Team Racing's HUD in Crash
 * Nitro Kart's galaxy. Loaded only on that site, on top of theme.css, components.css and
 * pages.css, and scoped to [data-site="racing"] (on <html>). The galaxy gives the starry indigo
 * sky, the nebulae, the chrome panels and the nitro green. The HUD gives the chunky yellow and
 * orange titles with an ink outline and an extrusion (Luckiest Guy), the position plates, the
 * red/white kerbs, the start lights and the menu selection bar. Orbitron is for HUD labels and
 * big times. Pages are the same templates; the brand, the font preloads and the home page are
 * overridden in templates/sites/racing/. See docs/design.md (Sites).
 */

@font-face {
  font-family: "Luckiest Guy";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/assets/vendor/fonts/luckiest-guy/luckiest-guy-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Luckiest Guy";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/assets/vendor/fonts/luckiest-guy/luckiest-guy-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/assets/vendor/fonts/orbitron/orbitron-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
/* Opaque colours only: sticky table cells use the surfaces as their background */
:root[data-site="racing"] {
  --cs-bg: #0d0920;
  --cs-bg-deep: #070414;
  --cs-surface: #161036;
  --cs-surface-2: #1e1648;
  --cs-surface-3: #2a205e;
  --cs-border: #2e2566;
  --cs-border-strong: #4b3f9a;
  --cs-text: #f4f1ff;
  --cs-muted: #aba4d6;
  --cs-faint: #726aa6;

  /* Wumpa orange by default; text on any accent is ink (game colours are mid-tones) */
  --cs-accent-default: #ff8a1c;
  --cs-accent-contrast: #1a0b33;

  --cs-gold: #ffd21a;
  --cs-silver: #cfd8f6;
  --cs-bronze: #ff9a4d;
  --cs-ahead: #3dff7a;
  --cs-behind: #ff4d6a;

  --cs-radius-sm: 0.4rem;
  --cs-radius: 0.7rem;
  --cs-radius-lg: 1rem;

  --cs-font-display: "Luckiest Guy", "Arial Black", Impact, sans-serif;
  --race-font-hud: "Orbitron", "Arial Narrow", sans-serif;

  --race-ink: #1a0b33;
  --race-orange: #ff8a1c;
  --race-yellow: #ffd21a;
  --race-red: #ff3b4e;
  --race-nitro: #3dff7a;
  --race-turbo: #2ad8ff;
  --race-violet: #8b5cff;
  --race-skew: -10deg;

  /* The HUD yellow of plates and main buttons, and its 3D edge */
  --race-plate: linear-gradient(180deg, #fff38a 0%, #ffd21a 48%, #ffa514 100%);
  --race-plate-edge: #a35a00;
  --race-turbo-bar: linear-gradient(90deg, var(--race-yellow), var(--race-orange) 45%, var(--race-red));
  --race-kerb: repeating-linear-gradient(115deg, var(--race-red) 0 14px, #f4f1ff 14px 28px);
  --race-check: conic-gradient(#f4f1ff 25%, #070414 0 50%, #f4f1ff 0 75%, #070414 0);

  /* Chrome frames: strong for feature panels, soft for everyday ones */
  --race-chrome: linear-gradient(160deg, #eef1ff 0%, #8f86d8 22%, #2e2566 48%, #5a4fb0 70%, #d9dcff 100%);
  --race-chrome-soft: linear-gradient(160deg, #6d63c4 0%, #2e2566 40%, #2a205e 62%, #8f86d8 100%);
  --race-panel: linear-gradient(180deg, #211a52 0%, #161036 55%, #120c2e 100%);

  /* Cartoon lettering: an ink outline (with paint-order) and a stepped ink extrusion */
  --race-outline: 0.11em;
  --race-extrude: 0.035em 0.055em 0 var(--race-ink), 0.07em 0.11em 0 var(--race-ink), 0.07em 0.14em 0.35em rgba(0, 0, 0, 0.55);
}

/* Fallback art of the racing games without their own (games/{code}.css loads later and wins:
   :where() keeps this at the specificity of [data-game]) */
:where([data-site="racing"]) [data-game] {
  --game-art:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.6px) 0 0 / 70px 70px,
    radial-gradient(circle at 62% 70%, rgba(255, 255, 255, 0.45) 0 1px, transparent 1.6px) 0 0 / 110px 110px,
    repeating-linear-gradient(115deg, transparent 0 52px, color-mix(in srgb, var(--cs-accent) 16%, transparent) 52px 55px, transparent 55px 96px),
    radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--cs-accent) 34%, transparent), transparent 55%);
  --game-emblem: url("/assets/img/sites/racing-wheel.svg");
}

/* ── Base: the galaxy behind every page ───────────────────────────────────── */
[data-site="racing"] body {
  background:
    radial-gradient(circle at 20px 30px, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.6px) 0 0 / 160px 160px,
    radial-gradient(circle at 110px 120px, rgba(196, 210, 255, 0.55) 0 0.8px, transparent 1.4px) 0 0 / 160px 160px,
    radial-gradient(circle at 150px 60px, rgba(255, 230, 170, 0.6) 0 1.2px, transparent 1.8px) 0 0 / 240px 240px,
    radial-gradient(circle at 60px 190px, rgba(255, 255, 255, 0.5) 0 0.8px, transparent 1.4px) 0 0 / 240px 240px,
    radial-gradient(900px 620px at 6% -8%, rgba(139, 92, 255, 0.24), transparent 65%),
    radial-gradient(760px 520px at 100% 34%, rgba(42, 216, 255, 0.1), transparent 65%),
    radial-gradient(1000px 520px at 50% 112%, rgba(255, 138, 28, 0.1), transparent 70%),
    var(--cs-bg);
  background-attachment: fixed;
}

[data-site="racing"] ::selection {
  background: color-mix(in srgb, var(--race-nitro) 35%, transparent);
}

/* ── Lettering: the HUD's chunky outlined titles ──────────────────────────── */
/* Luckiest Guy is set in capitals: a few of its lowercase letters (e) look out of place */
[data-site="racing"] :is(.page-title, .game-banner-title, .section-title, .player-name, .error-code, .game-card-name, .pb-game-title) {
  font-family: var(--cs-font-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  -webkit-text-stroke: var(--race-outline) var(--race-ink);
  paint-order: stroke fill;
  text-shadow: var(--race-extrude);
}

[data-site="racing"] :is(.page-title, .game-banner-title, .player-name, .error-code) {
  color: var(--race-yellow);
}

[data-site="racing"] .page-title {
  margin: 0.3rem 0 0.75rem;
  font-size: clamp(1.9rem, 4.4vw, 2.8rem);
  line-height: 1.05;
}

[data-site="racing"] .pb-game-title {
  font-size: 1.3rem;
  color: #fff;
}

[data-site="racing"] .section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  font-size: 1.5rem;
  line-height: 1.1;
  color: #fff;
}

/* Turbo stripes before every section title */
[data-site="racing"] .section-title::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 0.8rem;
  background: linear-gradient(90deg, var(--race-yellow) 0 26%, transparent 26% 37%, var(--race-orange) 37% 63%, transparent 63% 74%, var(--race-red) 74%);
  transform: skewX(-28deg);
}

[data-site="racing"] .records-game .section-title a {
  color: #fff;
}

[data-site="racing"] .records-game .section-title a:hover {
  color: var(--race-yellow);
}

/* Small HUD labels */
[data-site="racing"] :is(.kicker, .crumbs, .subcategory-label, .filter-label, .footer-heading, .stat-chip-label, .record-label, .game-card-cta, .run-time-method, .pb-category-title, .pb-block-title, .pb-count),
[data-site="racing"] .board th:not(.rk-game) {
  font-family: var(--race-font-hud);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

[data-site="racing"] .kicker {
  font-size: 0.7rem;
  color: var(--race-nitro);
}

[data-site="racing"] .crumbs {
  font-size: 0.68rem;
}

/* ── Navigation: a HUD bar over a kerb ────────────────────────────────────── */
[data-site="racing"] .site-nav {
  --bs-navbar-color: var(--cs-muted);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: var(--race-yellow);
  background: linear-gradient(180deg, #1d1552 0%, #110a30 100%);
  border-bottom: 0;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.85);
}

[data-site="racing"] .site-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 6px;
  background: var(--race-kerb);
  box-shadow: 0 2px 0 var(--race-ink);
  pointer-events: none;
}

[data-site="racing"] .site-nav .nav-link {
  font-family: var(--race-font-hud);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Wide screens: the current section sits on a slanted yellow plate */
@media (min-width: 992px) {
  [data-site="racing"] .site-nav .navbar-nav > .nav-item > .nav-link {
    position: relative;
    isolation: isolate;
    padding-inline: 0.95rem;
  }

  [data-site="racing"] .site-nav .navbar-nav > .nav-item > .nav-link::before {
    content: "";
    position: absolute;
    inset: 0.3rem 0.15rem;
    z-index: -1;
    border-radius: 0.25rem;
    transform: skewX(var(--race-skew));
    transition: background-color 0.15s ease;
  }

  [data-site="racing"] .site-nav .navbar-nav > .nav-item > .nav-link:hover::before {
    background-color: rgba(255, 255, 255, 0.08);
  }

  [data-site="racing"] .site-nav .navbar-nav > .nav-item > .nav-link.active {
    color: var(--race-ink);
  }

  [data-site="racing"] .site-nav .navbar-nav > .nav-item > .nav-link.active::before {
    background: var(--race-plate);
    box-shadow: 0 3px 0 var(--race-plate-edge), 0 0 0 1.5px var(--race-ink);
  }
}

/* Brand: "CRASH RACING" lettering and a nitro "SPEEDRUNS" plate */
[data-site="racing"] .brand {
  gap: 0.6rem;
  font-family: var(--cs-font-display);
  font-size: 1.4rem;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-site="racing"] .brand img {
  width: 2.5rem;
  filter: drop-shadow(0 0 10px rgba(255, 210, 26, 0.35));
}

.race-brand-word {
  display: inline-flex;
  gap: 0.28em;
  padding-top: 0.12em;
  line-height: 1;
  -webkit-text-stroke: 0.14em var(--race-ink);
  paint-order: stroke fill;
  text-shadow: 0.04em 0.07em 0 var(--race-ink);
  transform: skewX(-6deg);
}

.race-brand-crash {
  color: var(--race-orange);
}

.race-brand-racing {
  color: var(--race-yellow);
}

.race-brand-tag {
  padding: 0.22rem 0.45rem 0.18rem;
  border-radius: 0.15rem;
  font-family: var(--race-font-hud);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--race-ink);
  background: var(--race-nitro);
  box-shadow: 0 2px 0 #0d8a3a;
  transform: skewX(var(--race-skew));
}

/* ── Dropdowns: chrome panels with an orange selection ────────────────────── */
[data-site="racing"] .dropdown-menu {
  --bs-dropdown-bg: #1a1342;
  --bs-dropdown-border-color: #4b3f9a;
  --bs-dropdown-link-hover-bg: rgba(255, 138, 28, 0.14);
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--race-ink), 0 18px 36px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ── Game banner: a track select screen ───────────────────────────────────── */
[data-site="racing"] .game-banner {
  border-bottom: 0;
}

/* A kerb in the game's colour along the bottom */
[data-site="racing"] .game-banner::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: repeating-linear-gradient(115deg, var(--cs-accent) 0 14px, #f4f1ff 14px 28px);
}

[data-site="racing"] .game-banner > .game-art::after {
  background: linear-gradient(90deg, rgba(13, 9, 32, 0.94) 0%, rgba(13, 9, 32, 0.72) 50%, rgba(13, 9, 32, 0.35) 100%);
}

[data-site="racing"] .game-banner-inner {
  padding-block: clamp(1.1rem, 3vw, 1.6rem) clamp(1.3rem, 3.2vw, 1.8rem);
}

[data-site="racing"] .game-cover {
  border: 3px solid transparent;
  border-radius: 0.8rem;
  background: var(--race-chrome) border-box;
  box-shadow: 0 0 0 2px var(--race-ink), 0 12px 24px -10px #000;
  rotate: -4deg;
}

[data-site="racing"] .game-banner .kicker {
  color: var(--race-nitro);
}

[data-site="racing"] .game-banner-title {
  font-size: clamp(1.6rem, 4.6vw, 2.6rem);
  line-height: 1.05;
}

[data-site="racing"] a.game-banner-title:hover {
  color: #fff38a;
  text-decoration: none;
}

[data-site="racing"] .scope-bar {
  background: rgba(7, 4, 20, 0.6);
}

/* Game sections: slanted plates, the current one in HUD yellow */
[data-site="racing"] .game-nav {
  background: linear-gradient(180deg, #170f3e, #110b2e);
}

[data-site="racing"] .game-tabs {
  gap: 0.3rem;
  padding-block: 0.5rem;
}

[data-site="racing"] .game-tabs .nav-link {
  isolation: isolate;
  padding: 0.5rem 1rem;
  font-family: var(--race-font-hud);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-site="racing"] .game-tabs .nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--cs-border);
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.035);
  transform: skewX(var(--race-skew));
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

[data-site="racing"] .game-tabs .nav-link:hover::before {
  border-color: var(--cs-border-strong);
  background-color: rgba(255, 255, 255, 0.08);
}

[data-site="racing"] .game-tabs .nav-link.active {
  color: var(--race-ink);
}

[data-site="racing"] .game-tabs .nav-link.active::before {
  border-color: var(--race-ink);
  background: var(--race-plate);
  box-shadow: 0 3px 0 var(--race-plate-edge);
}

[data-site="racing"] .game-tabs .nav-link.active::after {
  display: none;
}

@media (max-width: 767.98px) {
  [data-site="racing"] .game-tabs {
    margin-left: 0;
  }
}

/* ── Footer: the finish line ──────────────────────────────────────────────── */
[data-site="racing"] .site-footer {
  position: relative;
  margin-top: 6rem;
  padding-top: 3.5rem;
  border-top: 0;
  background:
    radial-gradient(900px 300px at 50% 0, rgba(139, 92, 255, 0.18), transparent 70%),
    linear-gradient(180deg, #0b0720, #050310);
}

[data-site="racing"] .site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 24px;
  background: var(--race-check) 0 0 / 24px 24px;
  box-shadow: 0 3px 0 var(--race-ink), 0 10px 24px -6px rgba(0, 0, 0, 0.8);
}

[data-site="racing"] .footer-heading {
  font-size: 0.68rem;
  color: var(--race-yellow);
}

[data-site="racing"] .footer-bottom {
  border-top-color: var(--cs-border);
}

/* ── Buttons: chunky arcade keys ──────────────────────────────────────────── */
[data-site="racing"] .btn {
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: var(--cs-radius-sm);
}

/* The main ones lean forward and sit on a solid 3D edge that sinks when pressed */
[data-site="racing"] :is(.btn-gold, .btn-accent, .btn-ghost) {
  --btn-edge: #0b0720;
  border-width: 2px;
  box-shadow: 0 4px 0 var(--btn-edge), 0 10px 18px -10px rgba(0, 0, 0, 0.7);
  transform: skewX(var(--race-skew));
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

[data-site="racing"] :is(.btn-gold, .btn-accent, .btn-ghost):active {
  box-shadow: 0 1px 0 var(--btn-edge);
  transform: skewX(var(--race-skew)) translateY(3px);
}

[data-site="racing"] .btn-gold {
  --btn-edge: var(--race-plate-edge);
  --bs-btn-color: var(--race-ink);
  --bs-btn-border-color: var(--race-ink);
  --bs-btn-hover-color: var(--race-ink);
  --bs-btn-hover-border-color: var(--race-ink);
  --bs-btn-active-color: var(--race-ink);
  --bs-btn-active-border-color: var(--race-ink);
  background-image: var(--race-plate);
}

[data-site="racing"] .btn-gold:hover,
[data-site="racing"] .btn-gold:focus-visible {
  background-image: linear-gradient(180deg, #fff8b8 0%, #ffdf45 48%, #ffb22e 100%);
}

[data-site="racing"] .btn-accent {
  --btn-edge: color-mix(in srgb, var(--cs-accent) 45%, #000);
  --bs-btn-border-color: var(--race-ink);
  --bs-btn-hover-border-color: var(--race-ink);
  --bs-btn-active-border-color: var(--race-ink);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%);
}

[data-site="racing"] .btn-ghost {
  --bs-btn-bg: rgba(42, 32, 94, 0.7);
  --bs-btn-border-color: var(--cs-border-strong);
  --bs-btn-hover-bg: rgba(66, 52, 150, 0.85);
  --bs-btn-hover-border-color: #8f86d8;
  --bs-btn-active-bg: rgba(66, 52, 150, 0.95);
}

[data-site="racing"] .game-links .btn.active {
  border-color: var(--race-yellow);
  color: var(--race-yellow);
}

/* ── Forms, pagination, tables ────────────────────────────────────────────── */
[data-site="racing"] :is(.form-control, .form-select) {
  background-color: rgba(7, 4, 20, 0.55);
}

[data-site="racing"] :is(.form-control, .form-select):focus {
  border-color: var(--race-turbo);
  box-shadow: 0 0 0 0.2rem rgba(42, 216, 255, 0.25);
}

[data-site="racing"] .pagination {
  font-family: var(--race-font-hud);
  font-size: 0.85rem;
}

[data-site="racing"] .pagination .page-link {
  transform: skewX(var(--race-skew));
}

[data-site="racing"] .table {
  --bs-table-border-color: rgba(171, 164, 214, 0.1);
  --bs-table-hover-bg: rgba(255, 138, 28, 0.09);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
}

/* ── Surfaces: chrome-framed panels ───────────────────────────────────────── */
[data-site="racing"] :is(.card, .surface) {
  --bs-card-cap-bg: rgba(255, 255, 255, 0.035);
  border: 2px solid transparent;
  background: linear-gradient(var(--cs-surface), var(--cs-surface)) padding-box, var(--race-chrome-soft) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 30px -20px #000;
}

[data-site="racing"] .card-header {
  font-family: var(--race-font-hud);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-site="racing"] :is(.record-card, .tile-link, .player-card, .stat-chip, .player-hero) {
  border: 2px solid transparent;
  background: var(--race-panel) padding-box, var(--race-chrome-soft) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 28px -18px #000;
}

[data-site="racing"] :is(.record-card, .tile-link, .player-card):hover {
  background: var(--race-panel) padding-box, linear-gradient(160deg, #fff38a, var(--race-yellow) 40%, var(--race-orange)) border-box;
}

[data-site="racing"] .record-card.is-empty {
  border: 2px dashed var(--cs-border-strong);
  background: rgba(13, 9, 32, 0.5);
  box-shadow: none;
}

[data-site="racing"] .empty-state {
  border: 2px dashed var(--cs-border-strong);
  background: rgba(13, 9, 32, 0.45);
}

[data-site="racing"] .empty-state .bi {
  color: var(--race-turbo);
}

[data-site="racing"] .chip {
  border-color: var(--cs-border-strong);
  border-radius: 0.35rem;
  background: rgba(30, 22, 72, 0.75);
}

[data-site="racing"] .chip-game {
  border-color: color-mix(in srgb, var(--cs-accent) 55%, transparent);
  background: color-mix(in srgb, var(--cs-accent) 18%, #161036);
}

/* Pill switchers: slanted plates, the chosen one in the accent */
[data-site="racing"] .segmented {
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--cs-border-strong);
  border-radius: 0.5rem;
  background: rgba(7, 4, 20, 0.55);
}

[data-site="racing"] .segmented .nav-link {
  position: relative;
  isolation: isolate;
  border-radius: 0;
  font-weight: 650;
}

[data-site="racing"] .segmented .nav-link,
[data-site="racing"] .segmented .nav-link:hover,
[data-site="racing"] .segmented .nav-link.active {
  background: none;
}

[data-site="racing"] .segmented .nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.25rem;
  transform: skewX(var(--race-skew));
  transition: background-color 0.15s ease;
}

[data-site="racing"] .segmented .nav-link:hover::before {
  background-color: rgba(255, 255, 255, 0.07);
}

[data-site="racing"] .segmented .nav-link.active::before {
  background: var(--cs-accent) linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--cs-accent) 45%, #000);
}

/* ── Positions: slanted HUD plates instead of medallions ──────────────────── */
[data-site="racing"] .rank {
  width: 2.35rem;
  height: 1.9rem;
  padding-top: 0.14em;
  border: 2px solid var(--race-ink);
  border-radius: 0.3rem;
  background: linear-gradient(180deg, #3d3186, #241b5a);
  box-shadow: 0 3px 0 #0b0720;
  color: #fff;
  font-family: var(--cs-font-display);
  font-size: 1.05rem;
  font-weight: 400;
  font-synthesis: none;
  text-shadow: 0.05em 0.07em 0 var(--race-ink);
  transform: skewX(var(--race-skew));
}

[data-site="racing"] :is(.rank-1, .rank-2, .rank-3) {
  border: 2px solid var(--race-ink);
  color: var(--race-ink);
  text-shadow: 0 0.06em 0 rgba(255, 255, 255, 0.45);
}

[data-site="racing"] .rank-1 {
  background: var(--race-plate);
  box-shadow: 0 3px 0 var(--race-plate-edge), 0 0 14px rgba(255, 210, 26, 0.35);
}

[data-site="racing"] .rank-1::before {
  display: none;
}

[data-site="racing"] .rank-2 {
  background: linear-gradient(180deg, #ffffff, #cfd8f6 50%, #8e98c8);
  box-shadow: 0 3px 0 #4d5585;
}

[data-site="racing"] .rank-3 {
  background: linear-gradient(180deg, #ffd0a6, #ff9a4d 50%, #d2601c);
  box-shadow: 0 3px 0 #7d3207;
}

[data-site="racing"] .rank-lg {
  width: 3.3rem;
  height: 2.7rem;
  font-size: 1.55rem;
}

[data-site="racing"] .rank-xl {
  width: 4.6rem;
  height: 3.8rem;
  border-width: 3px;
  font-size: 2.3rem;
}

[data-site="racing"] .rankings-cell .rank {
  min-width: 1.6rem;
  height: 1.35rem;
  border-width: 1.5px;
  border-radius: 0.2rem;
  box-shadow: 0 2px 0 #0b0720;
  font-size: 0.78rem;
}

[data-site="racing"] :is(.badge-wr, .badge-new, .badge-pb) {
  border-radius: 0.2rem;
  background: var(--race-plate);
  box-shadow: 0 2px 0 var(--race-plate-edge);
  color: var(--race-ink);
  font-family: var(--race-font-hud);
  font-weight: 900;
  transform: skewX(var(--race-skew));
}

/* ── Leaderboards ─────────────────────────────────────────────────────────── */
[data-site="racing"] .board th:not(.rk-game) {
  font-size: 0.62rem;
  color: var(--race-turbo);
}

[data-site="racing"] .board tr.is-record {
  background: linear-gradient(90deg, rgba(255, 210, 26, 0.17), rgba(255, 210, 26, 0.03) 70%);
}

[data-site="racing"] .board tr.is-record > :first-child,
[data-site="racing"] .records-table tr.is-recent > :first-child {
  box-shadow: inset 4px 0 0 var(--race-yellow);
}

/* The hovered row: the orange edge of the menu selection */
[data-site="racing"] .board tbody tr[data-href]:hover > :first-child {
  box-shadow: inset 4px 0 0 var(--race-orange), inset 0 0 0 9999px var(--bs-table-hover-bg);
}

[data-site="racing"] .records-table .group-row th {
  font-family: var(--race-font-hud);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

[data-site="racing"] .level-number {
  border-radius: 0.2rem;
  background: rgba(42, 216, 255, 0.12);
  color: var(--race-turbo);
  transform: skewX(var(--race-skew));
}

/* ── Podium: trophy plinths in the colour of the place ────────────────────── */
[data-site="racing"] .podium-step {
  overflow: hidden;
  padding-bottom: 4.3rem;
  border: 0;
  border-radius: 0.9rem 0.9rem 0.35rem 0.35rem;
  background: var(--race-panel);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tone) 55%, #2e2566), 0 18px 30px -18px #000;
}

[data-site="racing"] .podium-step-1 {
  padding-top: 1.6rem;
}

[data-site="racing"] .podium-step:hover {
  box-shadow: inset 0 0 0 2px var(--race-yellow), 0 18px 30px -18px #000;
}

[data-site="racing"] .podium-step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.4rem;
  background:
    var(--race-check) 0 0 / 10px 10px repeat-x,
    linear-gradient(180deg, color-mix(in srgb, var(--tone) 70%, #fff), var(--tone) 40%, color-mix(in srgb, var(--tone) 72%, #000));
  background-size: 10px 10px, auto;
  border-top: 2px solid var(--race-ink);
}

/* Its place, big on the plinth's front */
[data-site="racing"] .podium-step .rank {
  position: absolute;
  z-index: 1;
  bottom: 0.3rem;
  left: 50%;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  font-size: 1.9rem;
  -webkit-text-stroke: 0.12em var(--race-ink);
  paint-order: stroke fill;
  text-shadow: var(--race-extrude);
  translate: -50% 0;
}

[data-site="racing"] .podium-time {
  font-family: var(--race-font-hud);
  font-weight: 800;
  letter-spacing: 0.01em;
}

[data-site="racing"] .tone-1 .podium-time {
  color: var(--race-yellow);
  text-shadow: 0 0 22px rgba(255, 210, 26, 0.35);
}

@media (max-width: 575.98px) {
  [data-site="racing"] .podium-step {
    padding-bottom: 3.8rem;
  }

  [data-site="racing"] .podium-step::after {
    height: 3rem;
  }

  [data-site="racing"] .podium-step .rank {
    font-size: 1.6rem;
  }
}

/* ── Run feed: rows of the race standings ─────────────────────────────────── */
[data-site="racing"] .feed-item {
  padding-left: 1.45rem;
  border: 0;
  border-radius: 0.6rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cs-accent) 17%, #1a1342) 0%, #161036 40%, #120c2e 100%);
  box-shadow: inset 0 0 0 1px var(--cs-border), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px -16px #000;
  transition: box-shadow 0.15s ease;
}

[data-site="racing"] .feed-item::before {
  left: 0.5rem;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 0.38rem;
  border-radius: 2px;
  transform: skewX(var(--race-skew));
}

[data-site="racing"] .feed-item:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cs-accent) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px -16px #000;
}

[data-site="racing"] .feed-item.is-record {
  box-shadow: inset 0 0 0 1px rgba(255, 210, 26, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px -16px #000;
}

[data-site="racing"] :is(.feed-time, .record-time, .stat-chip-value) {
  font-family: var(--race-font-hud);
  font-weight: 800;
  letter-spacing: 0.01em;
}

[data-site="racing"] .feed-time {
  font-size: 1.02rem;
}

[data-site="racing"] .feed-item.is-record .feed-time {
  color: var(--race-yellow);
}

/* ── Game cards (/games) and the home's game select ───────────────────────── */
[data-site="racing"] .game-card,
.race-pick {
  border: 3px solid transparent;
  border-radius: 1rem;
  background: linear-gradient(var(--cs-bg-deep), var(--cs-bg-deep)) padding-box, var(--race-chrome) border-box;
  box-shadow: 0 0 0 2px var(--race-ink), 0 18px 34px -18px #000;
}

[data-site="racing"] .game-card:hover,
[data-site="racing"] .game-card:focus-visible,
.race-pick:hover,
.race-pick:focus-visible {
  border-color: transparent;
  background: linear-gradient(var(--cs-bg-deep), var(--cs-bg-deep)) padding-box, linear-gradient(180deg, #fff38a, var(--race-yellow) 40%, var(--race-orange)) border-box;
  animation: race-select 0.9s ease-in-out infinite alternate;
}

[data-site="racing"] :is(.game-card, .race-pick) .game-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 4, 20, 0.94) 0%, rgba(7, 4, 20, 0.5) 45%, transparent 75%);
}

[data-site="racing"] .game-card-year {
  align-self: flex-start;
  padding: 0.15rem 0.5rem;
  border-radius: 0.15rem;
  background: var(--cs-accent);
  color: var(--race-ink);
  font-family: var(--race-font-hud);
  font-size: 0.68rem;
  font-weight: 800;
  transform: skewX(var(--race-skew));
}

[data-site="racing"] .game-card-name {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.05;
}

[data-site="racing"] .game-card-cta {
  font-size: 0.7rem;
  color: var(--race-yellow);
}

.race-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.race-pick {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.4rem;
  aspect-ratio: 4 / 5;
  padding: 0.9rem;
  overflow: hidden;
  color: #fff;
}

.race-pick:hover {
  color: #fff;
}

.race-pick .game-emblem {
  top: 11%;
  left: 50%;
  width: 56%;
  aspect-ratio: 1;
  translate: -50% 0;
  opacity: 0.9;
  transition: scale 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.race-pick:hover .game-emblem,
.race-pick:focus-visible .game-emblem {
  scale: 1.08;
}

.race-pick-year {
  padding: 0.12rem 0.45rem;
  border-radius: 0.15rem;
  background: var(--cs-accent);
  color: var(--race-ink);
  font-family: var(--race-font-hud);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  transform: skewX(var(--race-skew));
}

.race-pick-name {
  font-family: var(--cs-font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  -webkit-text-stroke: var(--race-outline) var(--race-ink);
  paint-order: stroke fill;
  text-shadow: var(--race-extrude);
}

@media (min-width: 768px) {
  .race-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
  }

  .race-pick {
    aspect-ratio: 1;
  }
}

/* ── Home: the title screen ───────────────────────────────────────────────── */
.race-hero {
  padding-bottom: clamp(7rem, 16vw, 11rem);
}

.race-hero .hero-fx {
  mask-image: linear-gradient(180deg, #000 90%, transparent 100%);
}

.race-stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30px 40px, #fff 0 1.1px, transparent 1.8px) 0 0 / 120px 120px,
    radial-gradient(circle at 90px 20px, rgba(196, 210, 255, 0.8) 0 0.9px, transparent 1.5px) 0 0 / 150px 150px,
    radial-gradient(circle at 60px 110px, rgba(255, 230, 170, 0.85) 0 1.4px, transparent 2px) 0 0 / 210px 210px,
    radial-gradient(700px 360px at 50% 30%, rgba(139, 92, 255, 0.28), transparent 70%),
    radial-gradient(520px 300px at 18% 70%, rgba(42, 216, 255, 0.12), transparent 70%),
    radial-gradient(520px 300px at 85% 75%, rgba(255, 59, 78, 0.12), transparent 70%);
  animation: race-twinkle 3.5s ease-in-out infinite alternate;
}

/* A ringed planet in the corner of the sky */
.race-planet {
  position: absolute;
  top: 9%;
  right: max(-4rem, calc(50% - 44rem));
  width: clamp(7rem, 17vw, 13rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #d9c2ff, #7c4dff 42%, #2a1170 78%);
  box-shadow: inset -1.2rem -0.9rem 2.4rem rgba(7, 4, 20, 0.85), 0 0 60px rgba(139, 92, 255, 0.35);
  opacity: 0.85;
}

.race-planet::before {
  content: "";
  position: absolute;
  inset: 36% -42%;
  border: 0.4rem solid rgba(42, 216, 255, 0.5);
  border-radius: 50%;
  rotate: -16deg;
}

.race-planet::after {
  content: "";
  position: absolute;
  top: 78%;
  left: -55%;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd9a6, #ff8a1c 50%, #8a3a00 85%);
  box-shadow: inset -0.3rem -0.3rem 0.8rem rgba(7, 4, 20, 0.7);
}

/* The track, running to the horizon: kerbs, a dashed centre line and a hologram grid */
.race-road {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1050px, 150vw);
  height: 56%;
  translate: -50% 0;
  transform: perspective(480px) rotateX(60deg);
  transform-origin: bottom;
  background:
    linear-gradient(180deg, var(--race-yellow) 50%, transparent 0) 50% 0 / 12px 80px repeat-y,
    repeating-linear-gradient(180deg, var(--race-red) 0 26px, #f4f1ff 26px 52px) 0 0 / 30px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--race-red) 0 26px, #f4f1ff 26px 52px) 100% 0 / 30px 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(42, 216, 255, 0.18) 0 2px, transparent 2px 140px),
    linear-gradient(180deg, #2a205e, #17113f);
  opacity: 0.6;
  animation: race-drive 0.9s linear infinite;
}

/* Start lights: three reds one after another, then green */
.race-lights {
  display: inline-flex;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.8rem;
  background: linear-gradient(180deg, #2c2a40, #121019);
  box-shadow: 0 0 0 2px var(--race-ink), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 24px -10px #000;
}

.race-lights > span {
  width: clamp(1.1rem, 3vw, 1.55rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2b1a26;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.75);
  animation: race-light linear both;
}

.race-lights > span:nth-child(1) { animation-delay: 0.4s; animation-duration: 1.5s; }
.race-lights > span:nth-child(2) { animation-delay: 0.8s; animation-duration: 1.1s; }
.race-lights > span:nth-child(3) { animation-delay: 1.2s; animation-duration: 0.7s; }
.race-lights > span:nth-child(4) { animation-delay: 1.9s; animation-duration: 0.01s; }

/* "CRASH" over a huge extruded "RACING", then the nitro "SPEEDRUNS" plate */
.race-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 1.2rem;
  font-family: var(--cs-font-display);
  font-weight: 400;
  font-synthesis: none;
  line-height: 0.92;
  text-transform: uppercase;
  -webkit-text-stroke: 0.09em var(--race-ink);
  paint-order: stroke fill;
  animation: hero-in 1.1s var(--hero-ease) 0.2s both;
}

.race-title-crash {
  font-size: clamp(2.2rem, 7vw, 4.3rem);
  letter-spacing: 0.06em;
  color: var(--race-orange);
  text-shadow: var(--race-extrude);
  transform: skewX(-8deg) rotate(-3deg);
}

.race-title-racing {
  font-size: clamp(3.5rem, 13.5vw, 8.4rem);
  letter-spacing: 0.03em;
  color: var(--race-yellow);
  text-shadow:
    0.015em 0.025em 0 #e06a00,
    0.03em 0.05em 0 #e06a00,
    0.045em 0.075em 0 #b84a00,
    0.06em 0.1em 0 #b84a00,
    0.08em 0.125em 0 var(--race-ink),
    0.1em 0.15em 0 var(--race-ink),
    0 0.2em 0.5em rgba(0, 0, 0, 0.6);
  transform: skewX(-8deg);
}

.race-title-tag {
  margin-top: 0.7rem;
  padding: 0.35rem 0.85rem 0.3rem 1.25rem;
  font-family: var(--race-font-hud);
  font-size: clamp(0.7rem, 1.8vw, 0.95rem);
  font-weight: 900;
  letter-spacing: 0.45em;
  line-height: 1;
  color: var(--race-ink);
  background: var(--race-nitro);
  -webkit-text-stroke: 0;
  box-shadow: 0 0 0 2px var(--race-ink), 0 4px 0 #0d8a3a, 0 0 26px rgba(61, 255, 122, 0.45);
  transform: skewX(var(--race-skew));
}

.race-hero .hero-tagline {
  margin-bottom: 2rem;
  color: #d4cdfa;
}

/* The menu: the HUD's yellow options in a chrome frame, with the pulsing orange selection */
.race-menu {
  position: relative;
  width: min(100%, 23rem);
  margin: 0 auto;
  padding: 0.75rem;
  border: 4px solid transparent;
  border-radius: 1.1rem;
  background:
    linear-gradient(180deg, rgba(34, 26, 85, 0.94), rgba(15, 10, 40, 0.96)) padding-box,
    var(--race-chrome) border-box;
  box-shadow: 0 0 0 2px var(--race-ink), 0 0 0 6px rgba(42, 216, 255, 0.16), 0 26px 50px -22px #000;
  animation: hero-in 1.1s var(--hero-ease) 0.45s both;
}

.race-menu ul {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.race-menu a {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem 0.45rem 2.6rem;
  font-family: var(--cs-font-display);
  font-size: clamp(1.35rem, 3.6vw, 1.7rem);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--race-yellow);
  -webkit-text-stroke: 0.12em var(--race-ink);
  paint-order: stroke fill;
  text-shadow: 0.04em 0.07em 0 var(--race-ink);
}

.race-menu a .bi {
  font-size: 0.75em;
  color: var(--race-turbo);
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* The selection bar and its ▶ cursor */
.race-menu a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.35rem;
  background: linear-gradient(90deg, var(--race-red), var(--race-orange) 55%, rgba(255, 138, 28, 0));
  opacity: 0;
  transform: skewX(var(--race-skew));
}

.race-menu a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.8rem;
  width: 0.85rem;
  height: 1rem;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity: 0;
  translate: 0 -50%;
}

.race-menu a:is(:hover, :focus-visible),
.race-menu ul:not(:hover, :focus-within) > li:first-child > a {
  color: #fff;
}

.race-menu a:is(:hover, :focus-visible) .bi,
.race-menu ul:not(:hover, :focus-within) > li:first-child > a .bi {
  color: var(--race-yellow);
}

.race-menu a:is(:hover, :focus-visible)::before,
.race-menu ul:not(:hover, :focus-within) > li:first-child > a::before {
  opacity: 1;
  animation: race-pulse 0.8s ease-in-out infinite alternate;
}

.race-menu a:is(:hover, :focus-visible)::after,
.race-menu ul:not(:hover, :focus-within) > li:first-child > a::after {
  opacity: 1;
  animation: race-nudge 0.5s ease-in-out infinite alternate;
}

/* ── Pages ────────────────────────────────────────────────────────────────── */
/* Run page: the time as a HUD readout over a turbo line */
[data-site="racing"] .run-hero {
  border-bottom: 0;
}

[data-site="racing"] .run-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--race-turbo-bar);
  transform: skewX(-40deg);
}

[data-site="racing"] .run-time {
  font-family: var(--race-font-hud);
  font-weight: 900;
  letter-spacing: 0;
}

[data-site="racing"] .run-time .text-gold {
  text-shadow: 0 0 28px rgba(255, 210, 26, 0.4);
}

[data-site="racing"] .run-time-method {
  font-size: 0.75rem;
}

[data-site="racing"] .theater {
  border: 3px solid transparent;
  background: linear-gradient(#000, #000) padding-box, var(--race-chrome) border-box;
  box-shadow: 0 0 0 2px var(--race-ink), 0 20px 40px -24px #000;
}

/* Player profile: a racer's badge */
[data-site="racing"] .crest {
  border: 3px solid transparent;
  background: var(--race-plate) padding-box, var(--race-chrome) border-box;
  box-shadow: 0 0 0 2px var(--race-ink), 0 4px 0 var(--race-plate-edge);
  color: var(--race-ink);
  font-family: var(--cs-font-display);
  font-size: 2.2rem;
  font-weight: 400;
  font-synthesis: none;
}

[data-site="racing"] .player-name {
  line-height: 1.1;
}

[data-site="racing"] .player-name .flag {
  -webkit-text-stroke: 0;
}

[data-site="racing"] .stat-chip-value {
  font-size: 1.45rem;
}

[data-site="racing"] .stat-chip.is-gold {
  background: linear-gradient(180deg, #33290f, #1a1342) padding-box, var(--race-plate) border-box;
}

/* Error page: a giant HUD number */
[data-site="racing"] .error-code {
  font-size: clamp(5rem, 20vw, 10rem);
  transform: skewX(-8deg);
}

/* ── Motion ───────────────────────────────────────────────────────────────── */
@keyframes race-light {
  0% { background: #2b1a26; }
  1%,
  99% {
    background: radial-gradient(circle at 40% 35%, #ffc2c2, #ff2a3d 55%, #8a0012);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 16px rgba(255, 42, 61, 0.85);
  }

  100% {
    background: radial-gradient(circle at 40% 35%, #d2ffe0, #3dff7a 55%, #0a8a3a);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 18px rgba(61, 255, 122, 0.9);
  }
}

@keyframes race-drive {
  to { background-position: 50% 80px, 0 52px, 100% 52px, 0 0, 0 0; }
}

@keyframes race-twinkle {
  to { opacity: 0.65; }
}

@keyframes race-pulse {
  to { filter: brightness(1.3) saturate(1.15); }
}

@keyframes race-nudge {
  to { translate: 0.3rem -50%; }
}

@keyframes race-select {
  to { box-shadow: 0 0 0 2px var(--race-ink), 0 0 0 6px rgba(255, 210, 26, 0.5), 0 18px 34px -18px #000; }
}

@media (prefers-reduced-motion: reduce) {
  .race-road,
  .race-stars,
  .race-menu a::before,
  .race-menu a::after,
  .race-pick,
  [data-site="racing"] .game-card {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  [data-site="racing"] *,
  [data-site="racing"] *::before,
  [data-site="racing"] *::after {
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }
}