:root {
  --ink: #0e1017;
  --panel: rgba(16, 19, 28, 0.92);
  --panel-edge: rgba(255, 255, 255, 0.12);
  --text: #f2f5fb;
  --muted: #97a1b8;
  --accent: #ffcc32;
  --accent-2: #ff4d6d;
  --good: #4ade80;
  --display: 'Arial Black', 'Helvetica Neue', Impact, system-ui, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  touch-action: none;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

/* ------------------------------------------------------------------- HUD */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
           max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  font-family: var(--display);
}

.hud-corner { position: absolute; display: flex; gap: 14px; }
.hud-tl { top: 14px; left: 14px; }
.hud-tr { top: 14px; right: 14px; flex-direction: column; align-items: flex-end; gap: 6px; }
.hud-bl { bottom: 14px; left: 14px; }
.hud-br { bottom: 14px; right: 14px; }

.stat {
  display: flex;
  flex-direction: column;
  padding: 7px 13px 8px;
  background: linear-gradient(180deg, rgba(20, 24, 35, 0.86), rgba(12, 14, 22, 0.86));
  border: 1px solid var(--panel-edge);
  border-radius: 11px;
  backdrop-filter: blur(7px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}
.stat--right { align-items: flex-end; }

.stat-label {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-value { font-size: 27px; line-height: 1.05; letter-spacing: -0.02em; }
.stat-value--mono { font-family: var(--mono); font-size: 20px; font-weight: 700; }
.stat-value--dim { color: var(--muted); }
/* The time trial delta: green when ahead of the ghost, red when behind. */
.stat-value.is-ahead { color: var(--good); }
.stat-value.is-behind { color: var(--accent-2); }
/* A medal: a coin in its colour, wherever one is shown. */
.medal {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  vertical-align: -0.1em;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--m);
  box-shadow: 0 0 0 1px #0006 inset;
}
.medal--none { --m: transparent; box-shadow: 0 0 0 1px var(--muted) inset; }
.stat-sub {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 1px;
}

#hud-map {
  width: 168px;
  height: 168px;
  margin-top: 6px;
  border-radius: 13px;
  background: rgba(10, 13, 20, 0.72);
  border: 1px solid var(--panel-edge);
  backdrop-filter: blur(7px);
}

.item-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 128px;
  height: 76px;
  border-radius: 13px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  background: rgba(12, 15, 23, 0.6);
  color: var(--muted);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.item-slot.has-item {
  border-style: solid;
  border-color: var(--slot, var(--accent));
  color: var(--slot, var(--accent));
  box-shadow: 0 0 0 1px var(--slot, var(--accent)) inset, 0 0 26px -6px var(--slot, var(--accent));
  transform: translateY(-2px);
}
.item-slot[data-kind='boost'] { --slot: #4ade80; }
.item-slot[data-kind='missile'] { --slot: #f87171; }
.item-slot[data-kind='mine'] { --slot: #fbbf24; }
.item-icon { width: 30px; height: 30px; display: none; filter: drop-shadow(0 0 8px currentColor); }
.item-slot.has-item .item-icon { display: block; }
.item-label { font-size: 19px; letter-spacing: 0.01em; }
.item-slot.has-item .item-label { font-size: 13px; }
/* Landing an item pops the slot; driving through a box with one already in
   hand rattles it. Both classes are dropped again when the animation ends. */
.item-slot.pop { animation: item-pop 0.42s cubic-bezier(0.2, 1.6, 0.4, 1); }
.item-slot.shake { animation: item-shake 0.36s ease; }
@keyframes item-pop {
  0% { transform: scale(0.8); box-shadow: 0 0 0 1px var(--slot) inset, 0 0 0 0 var(--slot); }
  45% { transform: scale(1.16); box-shadow: 0 0 0 1px var(--slot) inset, 0 0 40px 6px var(--slot); }
  100% { transform: translateY(-2px); }
}
@keyframes item-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-2deg); }
  40% { transform: translateX(6px) rotate(2deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.item-hint {
  font-family: var(--body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.speedo {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 6px;
  padding: 8px 16px 10px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(20, 24, 35, 0.86), rgba(12, 14, 22, 0.86));
  border: 1px solid var(--panel-edge);
  backdrop-filter: blur(7px);
}
.speedo-value { font-size: 46px; line-height: 0.95; letter-spacing: -0.04em; }
.speedo-unit {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.boost-track {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-top: 5px;
}
.boost-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #a3e635);
  transform-origin: left;
  transform: scaleX(0);
}

.draft {
  grid-column: 1 / -1;
  margin-top: 5px;
  font-family: var(--body);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7dd3fc;
  opacity: 0;
  transition: opacity 0.14s;
}
.draft.on { opacity: 1; }

.countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(90px, 18vw, 200px);
  color: var(--accent);
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: scale(1.5);
}
.countdown.show { animation: countPop 1s ease-out; }
/* Each light slams in, then GO! bursts out of the same spot. */
.countdown[data-n='3'] { color: #ff4d6d; }
.countdown[data-n='2'] { color: #ff9a3d; }
.countdown[data-n='1'] { color: var(--accent); }
.countdown[data-n='go'] { color: var(--good); font-size: clamp(110px, 22vw, 260px); }
.countdown[data-n='go'].show { animation: goBurst 0.9s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes countPop {
  0% { opacity: 0; transform: scale(2.2); filter: brightness(2.5); }
  14% { opacity: 1; transform: scale(0.94); filter: brightness(1.6); }
  26% { transform: scale(1.04); filter: brightness(1); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.86); }
}
@keyframes goBurst {
  0% { opacity: 0; transform: scale(0.4); filter: brightness(3); }
  22% { opacity: 1; transform: scale(1.15); }
  40% { transform: scale(1); filter: brightness(1); }
  70% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.6); }
}

.messages {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hud-msg {
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 21px;
  letter-spacing: 0.02em;
  background: rgba(12, 15, 23, 0.82);
  border: 1px solid var(--panel-edge);
  animation: msgIn 0.26s cubic-bezier(0.2, 1.5, 0.4, 1);
  backdrop-filter: blur(6px);
}
.hud-msg--go { color: var(--accent); font-size: 32px; }
.hud-msg--finish {
  color: var(--accent);
  font-size: 46px;
  letter-spacing: 0.05em;
  text-shadow: 0 4px 26px rgba(255, 204, 50, 0.5), 0 2px 0 rgba(0, 0, 0, 0.4);
  animation: finishPop 0.7s cubic-bezier(0.18, 1.6, 0.4, 1);
}
@keyframes finishPop {
  0% { opacity: 0; transform: scale(0.15) rotate(-5deg); }
  55% { opacity: 1; transform: scale(1.15) rotate(1.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.hud-msg--good { color: var(--good); }
.hud-msg--bad { color: var(--accent-2); }
.hud-msg--item { color: #93c5fd; }
/* A how-to line, not an event: smaller, sentence case, one line. */
.hud-msg--tip { font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--text); padding: 7px 16px; }
@keyframes msgIn { from { opacity: 0; transform: translateY(12px) scale(0.9); } }

/* ------------------------------------------------------------ Touch pad */
.touch { position: absolute; inset: 0; pointer-events: none; }
/* Two invisible halves: slide on the left to steer, hold the right to drift. */
.touch-zone { position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: auto; touch-action: none; }
.touch-zone--steer { left: 0; }
.touch-zone--drift { right: 0; }
/* Where the steering thumb landed, and how far it has slid. */
.touch-stick {
  position: fixed;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: rgba(18, 22, 33, 0.35);
  pointer-events: none;
}
.touch-stick i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transform: translateX(var(--x, 0px));
}
.touch-btn {
  position: absolute;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(18, 22, 33, 0.66);
  color: var(--text);
  font-size: 22px;
  backdrop-filter: blur(6px);
  pointer-events: auto;
  touch-action: none;
}
.touch-btn:active { background: rgba(255, 204, 50, 0.28); }
/* Left, just above the item it fires. The right thumb holds drifts now, and
   a committed drift holds its line while the left thumb leaves the steering
   for a tap. */
.touch-btn--item {
  left: max(18px, env(safe-area-inset-left));
  bottom: 104px;
  width: 76px;
  height: 76px;
  color: var(--accent);
  font-size: 26px;
}
.touch-btn--pause {
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  font-size: 11px;
}
.touch-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(12, 15, 23, 0.7);
  color: var(--muted);
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  animation: hint-out 0.8s ease 5s forwards;
}
@keyframes hint-out { to { opacity: 0; } }

/* --------------------------------------------------------------- Screens */
#screens { position: fixed; inset: 0; pointer-events: none; }

.screen {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(24, 28, 42, 0.72), rgba(6, 8, 13, 0.94));
  backdrop-filter: blur(9px);
  pointer-events: auto;
  overflow: auto;
}
/* One definite column, so a panel's percentage width is a share of the screen
   and not of whatever its widest child would like. */
.screen.show { display: grid; grid-template-columns: 100%; animation: fade 0.22s ease-out; }

/* The menu sits over a live race, so keep its veil thin. */
#screen-menu, #screen-loading {
  background: linear-gradient(180deg, rgba(7, 9, 15, 0.5), rgba(7, 9, 15, 0.84));
  backdrop-filter: blur(2px);
}
#screen-menu .title, #screen-menu .tagline, #screen-menu .eyebrow, #screen-menu .credits {
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.8);
}
@keyframes fade { from { opacity: 0; } }

.loading { text-align: center; }
.loading-mark {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(140deg, var(--accent), #ff8a3d);
  color: #17130a;
  font-family: var(--display);
  font-size: 27px;
  transform: rotate(-6deg);
  box-shadow: 0 16px 40px -12px rgba(255, 204, 50, 0.7);
}
.loading-title {
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: 0.03em;
  margin: 0 0 20px;
}
.loading-bar {
  width: min(320px, 70vw);
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin: 0 auto;
}
.loading-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #ff8a3d);
  transition: width 0.25s ease-out;
}
.loading-text { color: var(--muted); font-size: 13px; margin-top: 12px; }
/* Loaded: the bar gives way to "press start", the way the old consoles did. */
#screen-loading.ready { cursor: pointer; }
#screen-loading.ready .loading-bar { visibility: hidden; }
#screen-loading.ready .loading-text {
  color: var(--text);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  animation: blink 1.1s steps(2, jump-none) infinite;
}
@keyframes blink { 50% { opacity: 0.15; } }

/* ------------------------------------------------------- Opening titles */
#screen-intro {
  background: none;
  backdrop-filter: none;
  padding: 0;
  overflow: hidden;
  cursor: none;
  animation: none;
}
/* Scanlines and a vignette: the feel of a CRT, not its blur. */
#screen-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.intro-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 12vh;
  background: #000;
  transition: transform 0.9s cubic-bezier(0.6, 0, 0.3, 1);
  z-index: 1;
}
.intro-bar--top { top: 0; }
.intro-bar--bottom { bottom: 0; }
#screen-intro.open .intro-bar--top { transform: translateY(-100%); }
#screen-intro.open .intro-bar--bottom { transform: translateY(100%); }
.intro-card {
  position: absolute;
  left: 7vw;
  bottom: calc(12vh + 5vh);
  z-index: 2;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(40px, 9vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
  transform: skewX(-6deg);
  transform-origin: left bottom;
  /* A touch of colour fringing, as on a cheap TV. */
  text-shadow: -3px 0 rgba(255, 40, 100, 0.75), 3px 0 rgba(40, 210, 255, 0.75), 0 10px 40px rgba(0, 0, 0, 0.6);
}
.intro-card.in { animation: cardIn 0.22s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.intro-card.small {
  bottom: auto;
  top: calc(12vh + 5vh);
  font-size: clamp(15px, 2.3vw, 26px);
  letter-spacing: 0.38em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  color: var(--accent);
}
.intro-card.small.in { animation: fade 0.5s ease-out both; }
@keyframes cardIn {
  from { opacity: 0; transform: skewX(-6deg) scale(1.7) translateX(-6vw); filter: blur(6px); }
}
.intro-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(56px, 13vw, 150px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: #fff;
  text-shadow: -4px 0 rgba(255, 40, 100, 0.7), 4px 0 rgba(40, 210, 255, 0.7), 0 18px 60px rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
}
.intro-title span { display: block; color: var(--accent); }
#screen-intro.titled .intro-title { animation: titleSlam 2.6s cubic-bezier(0.15, 1.4, 0.35, 1) both; }
@keyframes titleSlam {
  0% { opacity: 0; transform: scale(2.6); filter: blur(14px); }
  12% { opacity: 1; transform: scale(1); filter: blur(0); }
  70% { opacity: 1; transform: scale(0.96); }
  100% { opacity: 0; transform: scale(0.9); }
}
.intro-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.intro-flash.go { animation: flash 0.16s ease-out; }
.intro-flash.go.big { animation: flashBig 0.7s ease-out; }
@keyframes flash { from { opacity: 0.32; } to { opacity: 0; } }
@keyframes flashBig { from { opacity: 0.92; } to { opacity: 0; } }
.intro-skip {
  position: absolute;
  right: 18px;
  bottom: calc(12vh + 10px);
  z-index: 2;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  animation: fade 0.6s 1.2s ease-out both;
}
#screen-intro.open .intro-skip { opacity: 0; transition: opacity 0.3s; }

.menu { text-align: center; max-width: 640px; }
.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.title {
  font-family: var(--display);
  font-size: clamp(50px, 11vw, 104px);
  line-height: 0.88;
  margin: 0;
  letter-spacing: -0.03em;
  font-style: italic;
  text-shadow: 0 14px 46px rgba(0, 0, 0, 0.55);
}
.title span { display: block; color: var(--accent); }
.tagline { color: var(--muted); margin: 16px 0 30px; font-size: 15px; }

.menu-buttons { display: flex; flex-direction: column; gap: 11px; max-width: 340px; margin: 0 auto; }
/* Career and single race share the top row: two ways into the same thing. */
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.menu-row .btn { padding-left: 10px; padding-right: 10px; }
.credits { margin-top: 32px; font-size: 11px; color: #6b7488; line-height: 1.6; }
.credits strong { color: var(--muted); }

.btn {
  appearance: none;
  border: 1px solid var(--panel-edge);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 13px 22px;
  border-radius: 11px;
  cursor: pointer;
  transition: transform 0.12s, background 0.16s, border-color 0.16s;
}
.btn:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.btn:focus-visible, .card:focus-visible,
.btn:focus, .card:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent);
}
.card[aria-pressed='true']:focus, .card[aria-pressed='true']:focus-visible {
  box-shadow: 0 0 0 1px var(--accent) inset, 0 0 0 2px var(--ink), 0 0 0 4px var(--accent);
}
.btn:active { transform: translateY(0); }
.btn--primary {
  background: linear-gradient(150deg, var(--accent), #ffab2e);
  border-color: transparent;
  color: #1b1508;
  box-shadow: 0 12px 30px -14px rgba(255, 204, 50, 0.9);
}
.btn--primary:hover { background: linear-gradient(150deg, #ffd75a, #ffb845); }
.btn--ghost { background: none; }
/* Offered, not pushed: the install button sits below the real menu actions. */
.btn--install {
  border-style: dashed;
  border-color: rgba(255, 204, 50, 0.5);
  color: var(--accent);
  font-size: 13px;
  padding: 10px 22px;
}
.btn--install:hover { background: rgba(255, 204, 50, 0.12); }

.panel {
  width: min(940px, 100%);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 30px 80px -30px #000;
}
.panel--narrow { width: min(520px, 100%); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-head h2 { font-family: var(--display); font-size: 24px; margin: 0; letter-spacing: 0.01em; }
.panel-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.foot-note { margin-right: auto; color: var(--muted); font-size: 13px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; }
.card-grid--cars { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }

.card {
  text-align: left;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--panel-edge);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, transform 0.12s;
  color: inherit;
  font: inherit;
}
.card:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }
.card[aria-pressed='true'] {
  border-color: var(--accent);
  background: rgba(255, 204, 50, 0.13);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.card[disabled] { opacity: 0.42; cursor: not-allowed; }
.card-name { font-family: var(--display); font-size: 17px; margin: 0 0 4px; }
.card-blurb { color: var(--muted); font-size: 12px; margin: 0; line-height: 1.5; }
.card-meta {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-swatch { width: 26px; height: 5px; border-radius: 3px; margin-bottom: 9px; }

.card-art {
  position: relative;
  height: 88px;
  margin: -4px -4px 10px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.card-art--photo img { object-fit: cover; }

/* The circuit from the air, above the cards. */
.track-hero {
  position: relative; height: clamp(150px, 30vh, 250px); margin-bottom: 12px;
  border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-edge);
}
.track-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: heroIn 0.35s ease-out; }
@keyframes heroIn { from { opacity: 0.2; transform: scale(1.03); } }
.hero-text {
  position: absolute; left: 0; top: 0; bottom: 0; width: min(380px, 60%); padding: 16px 18px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  background: linear-gradient(90deg, rgba(10, 12, 18, 0.88), rgba(10, 12, 18, 0.55) 70%, transparent);
}
.hero-world { font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.hero-text h3 { margin: 0; font-family: var(--display); font-size: 24px; text-shadow: 0 2px 8px #000; }
.hero-text p { margin: 0; font-size: 13px; color: #d6dbe7; line-height: 1.35; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card-art--car {
  background:
    radial-gradient(70% 90% at 50% 118%, color-mix(in srgb, var(--tint) 55%, transparent), transparent 70%),
    rgba(255, 255, 255, 0.05);
}
.card-art--car::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 62%;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--tint);
  opacity: 0.85;
}

.bars { display: grid; gap: 5px; margin-top: 10px; }
.bar { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 8px; }
.bar span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.bar i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); display: block; }
.bar i::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--v, 50%);
  border-radius: 3px;
  background: var(--accent);
}

.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.results li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
}
.results li.me { border-color: var(--accent); background: rgba(255, 204, 50, 0.12); }
.results .place { font-family: var(--display); font-size: 18px; color: var(--muted); }
.results li.me .place { color: var(--accent); }
.results .who { font-weight: 700; }
.results .when { font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* Championship points against each finish on the results screen. */
.results .pts { margin-left: 8px; font-family: var(--display); font-weight: 400; color: var(--accent); }

/* ----------------------------------------------------------- Championship */
.nowrap { white-space: nowrap; }
/* Settings: a label and a row of choices per line; on a short screen the
   lines flow into two columns. */
.settings { display: grid; gap: 10px; }
.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 10px 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--panel-edge);
}
.setting-name { font-weight: 700; font-size: 14px; }
.setting-name small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); margin-top: 2px; max-width: 32ch; }
.choices { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.choice {
  appearance: none;
  min-width: 46px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid var(--panel-edge);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.choice:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.choice[aria-pressed='true'] {
  border-color: var(--accent);
  background: rgba(255, 204, 50, 0.16);
  color: var(--accent);
}
.choice:focus, .choice:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent); }
.btn--danger { border-color: rgba(255, 77, 109, 0.55); color: #ff8fa3; font-size: 13px; padding: 9px 16px; }
.btn--danger:hover { background: rgba(255, 77, 109, 0.14); }

/* Worlds: a segmented switch in the circuit screen's header, and a row of
   its own on the championship setup. */
.worlds { display: flex; gap: 6px; flex-wrap: wrap; }
.panel-head .worlds { margin-right: auto; }
.worlds--wide { margin: 0 0 10px; }
.worlds--wide .world { flex: 1 1 0; }
.world {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 7px 14px 8px;
  border-radius: 12px;
  border: 1px solid var(--panel-edge);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}
.world:hover:not([disabled]) { background: rgba(255, 255, 255, 0.09); }
.world-name { font-family: var(--display); font-size: 14px; letter-spacing: 0.03em; }
.world-sub { font-size: 11px; color: var(--muted); }
.world[aria-pressed='true'] {
  border-color: var(--accent);
  background: rgba(255, 204, 50, 0.13);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.world[aria-pressed='true'] .world-name { color: var(--accent); }
.world[disabled] { opacity: 0.45; cursor: not-allowed; }
.world:focus, .world:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent); }

/* Difficulty: four big buttons in the level's own colour, not a select in the
   footer — it decides more about a race than the car does. */
.levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.level {
  appearance: none;
  text-align: left;
  padding: 9px 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--panel-edge);
  border-top: 3px solid var(--lvl);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, transform 0.12s;
}
.level:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-1px); }
.level-name { display: block; font-family: var(--display); font-size: 16px; letter-spacing: 0.03em; color: var(--lvl); }
.level-blurb { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.35; }
.level[aria-pressed='true'] {
  border-color: var(--lvl);
  background: color-mix(in srgb, var(--lvl) 18%, transparent);
  box-shadow: 0 0 0 1px var(--lvl) inset;
}
.level[aria-pressed='true'] .level-blurb { color: var(--text); }
.level:focus, .level:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent);
}
.level-tag { font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }
.results-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.champ-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 60ch; }
.champ-rounds {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 10px;
}
.round {
  position: relative;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--panel-edge);
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}
.round.is-next { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: rgba(255, 204, 50, 0.1); }
.round.is-done .round-art { opacity: 0.55; }
.round-art { position: relative; height: clamp(90px, 18vh, 150px); border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.round-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.round-no { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.round-name { display: block; font-family: var(--display); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.round-place {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(12, 15, 23, 0.85);
  font-family: var(--display);
  font-size: 13px;
}
.p1 { color: #ffd84a; }
.p2 { color: #dfe6f2; }
.p3 { color: #f0a36b; }

.standings { width: 100%; border-collapse: separate; border-spacing: 0 5px; font-size: 14px; }
.standings th {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 0 6px;
}
.standings th:nth-child(2) { text-align: left; }
.standings td { padding: 8px 6px; background: rgba(255, 255, 255, 0.04); text-align: center; font-family: var(--mono); }
.standings td:first-child { border-radius: 10px 0 0 10px; }
.standings td:last-child { border-radius: 0 10px 10px 0; }
.standings td.pos { font-family: var(--display); color: var(--muted); width: 34px; }
.standings td.who { text-align: left; font-family: var(--body); font-weight: 700; white-space: nowrap; }
.standings td.who i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.standings td.who em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-left: 6px; }
.standings td.dim { color: #4d5566; }
.standings td.pts { font-family: var(--display); font-size: 17px; width: 52px; }
.standings tr.me td { background: rgba(255, 204, 50, 0.12); }
.standings tr.me td:first-child { box-shadow: 1px 0 0 var(--accent) inset, 0 1px 0 var(--accent) inset, 0 -1px 0 var(--accent) inset; }
.standings tr.me td:last-child { box-shadow: -1px 0 0 var(--accent) inset, 0 1px 0 var(--accent) inset, 0 -1px 0 var(--accent) inset; }
.standings tr.me td:not(:first-child):not(:last-child) { box-shadow: 0 1px 0 var(--accent) inset, 0 -1px 0 var(--accent) inset; }
.standings tbody tr:first-child td.pos { color: #ffd84a; }

/* The title, won: the heading shines. */
/* -------------------------------------------------------------- trophies */
.menu-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.menu-buttons .menu-row--3 .btn { padding-left: 4px; padding-right: 4px; white-space: nowrap; }

.trophy-tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.tally {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border: 1px solid var(--panel-edge); border-radius: 12px; background: rgba(255, 255, 255, 0.03);
}
.tally b { font-family: var(--display); font-size: 24px; color: var(--accent); line-height: 1.1; }
.trophy-worlds { align-content: start; }
.tally b small { font-size: 13px; color: var(--muted); font-family: var(--body); font-weight: 600; }
.tally span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.trophy-worlds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-height: 52vh; overflow-y: auto; touch-action: pan-y; }
.trophy-world { border: 1px solid var(--panel-edge); border-radius: 14px; padding: 12px; background: rgba(255, 255, 255, 0.025); }
.trophy-world.is-won { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.trophy-world h3 { margin: 0 0 8px; font-family: var(--display); font-size: 15px; letter-spacing: 0.02em; }
.trophy-world ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.trophy-world li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; font-size: 13px; }
.tw-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-medal { font-family: var(--mono); font-size: 12px; display: inline-flex; gap: 5px; align-items: center; }
.tw-place { font-family: var(--display); font-size: 12px; color: var(--muted); min-width: 2em; text-align: right; }
.trophy-world .dim { color: #5d667a; font-style: normal; font-family: var(--body); }
.cups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cup { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--c); }
.cup svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
.cup--none { color: #3a4152; }
.cup-level { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* GameVolt's tier colours. */
.tally--bronze b { color: #cd7f32; }
.tally--silver b { color: #c0c0c0; }
.tally--gold b { color: #ffd700; }
.tally--platinum b { color: #b4ffff; }

.trophy-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.trophy-tabs .choice { flex: 0 0 auto; }
.trophy-records { margin: 0 0 4px; grid-column: 1 / -1; color: var(--muted); font-size: 13px; }

.trophy-list { max-height: 52vh; overflow-y: auto; touch-action: pan-y; padding: 2px 4px 2px 2px; }
.tier-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 14px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--panel-edge);
  font-family: var(--display); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
}
.tier-head:first-child { margin-top: 2px; }
.tier-head span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--muted); }
.tier-head--bronze { color: #cd7f32; }
.tier-head--silver { color: #c0c0c0; }
.tier-head--gold { color: #ffd700; }
.tier-head--platinum { color: #b4ffff; }
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.trophy-card {
  --t: #cd7f32;
  appearance: none; font: inherit; color: var(--text); cursor: default;
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
  padding: 8px 8px 12px; border-radius: 12px;
  border: 1px solid var(--panel-edge); background: rgba(255, 255, 255, 0.025);
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.trophy-card--silver { --t: #c0c0c0; }
.trophy-card--gold { --t: #ffd700; }
.trophy-card--platinum { --t: #b4ffff; }
.trophy-card img {
  width: 112px; height: 112px; margin-bottom: 2px;
  filter: grayscale(1) brightness(0.32) contrast(1.1);
  transition: transform 0.16s ease;
}
.trophy-card b { font-size: 12px; letter-spacing: 0.02em; color: var(--muted); }
.trophy-card small { font-size: 11px; color: #6b7488; line-height: 1.3; }
.trophy-card.is-held {
  border-color: color-mix(in srgb, var(--t) 45%, transparent);
  background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--t) 14%, transparent), transparent 75%), rgba(255, 255, 255, 0.03);
}
.trophy-card.is-held img { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)); }
.trophy-card.is-held b { color: var(--text); }
.trophy-card.is-held small { color: var(--muted); }
.trophy-card:hover img, .trophy-card:focus-visible img { transform: translateY(-3px) scale(1.06); }
.trophy-card:focus, .trophy-card:focus-visible {
  outline: none; border-color: var(--t);
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--t);
}
.trophy-world:focus, .trophy-world:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent); }

/* Trophy unlocked, as GameVolt's games show it. */
#trophy-toast {
  position: fixed; bottom: -90px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  background: #0a0a18ee; border: 1px solid #ffd70066; border-radius: 10px; padding: 10px 20px;
  z-index: 60; transition: bottom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 30px #ffd70033; pointer-events: none;
}
#trophy-toast.show { bottom: max(24px, env(safe-area-inset-bottom)); }
#trophy-toast-icon { font-size: 28px; line-height: 0; }
#trophy-toast-icon img { width: 56px; height: 56px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6)); }
#trophy-toast-label { font-size: 9px; color: #ffd700; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; }
#trophy-toast-tier { font-size: 9px; font-weight: 700; letter-spacing: 2px; }
#trophy-toast-tier.bronze { color: #cd7f32; }
#trophy-toast-tier.silver { color: #c0c0c0; }
#trophy-toast-tier.gold { color: #ffd700; }
#trophy-toast-tier.platinum { color: #b4ffff; }
#trophy-toast-name { font-size: 14px; color: #fff; font-weight: 700; letter-spacing: 1px; }

/* ---------------------------------------------------------------- ending */
/* The credits roll over the live race: no veil, no blur, only the shade
   behind the text that .ending gives. */
#screen-ending { padding: 0; background: none; backdrop-filter: none; }
.ending-roll { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85); }
.ending {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 16, 23, 0.8), rgba(14, 16, 23, 0.4) 30%, rgba(14, 16, 23, 0.4) 70%, rgba(14, 16, 23, 0.85));
}
.ending-roll {
  position: absolute; left: 50%; top: 100%; width: min(560px, 92vw); transform: translateX(-50%);
  text-align: center; animation: roll 46s linear forwards;
}
@keyframes roll { to { transform: translate(-50%, calc(-100% - 100vh)); } }
.ending-roll h3 {
  margin: 44px 0 10px; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
}
.ending-roll p { margin: 6px 0; font-size: 17px; color: var(--text); line-height: 1.5; }
.ending-roll .title { font-size: clamp(40px, 9vw, 76px); }
.ending-roll .ending-lead { font-family: var(--display); font-size: 26px; color: var(--accent); letter-spacing: 0.06em; margin-top: 18px; }
.ending-roll .ending-thanks { margin: 70vh 0 40vh; font-family: var(--display); font-size: 28px; }
.ending-cup { color: var(--accent); }
.ending-cup svg { width: 96px; height: 96px; filter: drop-shadow(0 0 30px rgba(255, 204, 50, 0.6)); }
/* Bottom left: the sound toggle has the other corner. */
.ending-back { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); }

#screen-champ.is-champion #champ-title {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(255, 204, 50, 0.55);
  animation: champGlow 1.6s ease-in-out infinite alternate;
}
@keyframes champGlow { to { text-shadow: 0 0 40px rgba(255, 204, 50, 0.9); } }

/* What the podium just opened: a card each, with the thing itself on it. */
.unlocks { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.unlock {
  flex: 1 1 150px;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 204, 50, 0.45);
  background: linear-gradient(135deg, rgba(255, 204, 50, 0.16), rgba(255, 204, 50, 0.04));
  animation: unlockIn 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.unlock:nth-child(2) { animation-delay: 0.14s; }
.unlock:nth-child(3) { animation-delay: 0.28s; }
.unlock-art { position: relative; height: 54px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.unlock-art--medal { display: grid; place-items: center; font-size: 34px; }
.unlock-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.unlock-art--world img { object-fit: cover; }
.unlock-kind { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.unlock-name { font-family: var(--display); font-size: 15px; }
@keyframes unlockIn {
  0% { opacity: 0; transform: translateY(10px) scale(0.92); }
  100% { opacity: 1; transform: none; }
}

.howto dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0 0 18px; }
.howto dt { font-weight: 700; color: var(--muted); font-size: 13px; }
.howto dd { margin: 0; }
.howto h3 { font-family: var(--display); font-size: 15px; margin: 20px 0 10px; }
.howto p { font-size: 13px; line-height: 1.65; color: #cbd3e3; }
.howto .muted { color: var(--muted); }
kbd {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--panel-edge);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--mono);
  font-size: 11px;
}
/* The controls in hand (controls.js): on the pause screen and in How to play. */
.control-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0 0 18px; align-items: center; }
.control-list dt { font-weight: 700; color: var(--muted); font-size: 13px; }
.control-list dd { margin: 0; font-size: 13px; color: #cbd3e3; line-height: 1.6; }
#pause-controls { margin: 0 0 6px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }

/* A button or key, as Kenney's Input Prompts draw it (controls.js). The
   icons leave an eighth of their square as margin, so they are drawn a
   little larger than the text beside them. */
.pb { width: 30px; height: 30px; margin: -3px 0; vertical-align: middle; -webkit-user-drag: none; }
.pad-hints .pb { width: 28px; height: 28px; }
.pb--wide { width: 46px; height: 46px; margin: -11px -4px; }

/* The menus' button bar, with a pad in hand and not racing. */
.pad-hints {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  display: none;
  gap: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(10, 12, 18, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--panel-edge);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  pointer-events: none;
}
.pad-hints > span { display: inline-flex; align-items: center; gap: 7px; }
body[data-input="pad"]:not(.racing) .pad-hints:not(:empty) { display: inline-flex; }
/* Room to scroll the last of a long screen out from under the bar. */
body[data-input="pad"] .screen { padding-bottom: 64px; }
/* The pause screen's four buttons on one line, under the control guide. */
#screen-paused .panel { width: min(600px, 100%); }

.controls-tabs { flex-wrap: wrap; }
.controls-note { font-size: 13px; line-height: 2; color: var(--muted); margin: 0; }

.item-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 13px; }
.item-legend b { color: var(--c); font-family: var(--display); margin-right: 8px; letter-spacing: 0.02em; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 50;
  transform: translate(-50%, 14px);
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(14, 17, 25, 0.94);
  border: 1px solid var(--panel-edge);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
  backdrop-filter: blur(8px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.sound-toggle {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 40;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--panel-edge);
  background: rgba(16, 19, 28, 0.8);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
}
.sound-toggle[data-muted='true'] { color: #5a6274; text-decoration: line-through; }
/* The speedo occupies the same corner during a race. */
body.racing .sound-toggle { display: none; }
.fullscreen-toggle { right: 60px; display: grid; place-items: center; padding: 0; }
.fullscreen-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fullscreen-toggle .fs-out { display: none; }
.fullscreen-toggle[data-on='true'] .fs-in { display: none; }
.fullscreen-toggle[data-on='true'] .fs-out { display: inline; }

/* A friend's ghost to beat. */
.challenge-art { position: relative; height: 200px; border-radius: 12px; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--panel-edge); }
.challenge-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.challenge-lead { font-size: 17px; line-height: 1.5; margin: 0 0 6px; }
.challenge-lead b { color: var(--accent); }

.version { opacity: 0.65; }

.update-chip {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--panel-edge);
  background: var(--accent, #ffcc32);
  color: #14161f;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
/* Never interrupt a race — the chip waits behind the menus. */
body.racing .update-chip { display: none; }

/* --- Phones ------------------------------------------------------------- */

/* Held sideways, a phone is short. The screens scroll in principle, but that
   is no way to pick a circuit: the pickers become a strip of cards that scrolls
   sideways under a pinned header and footer, so the current choice and the
   button that confirms it are always on screen. The how-to and the results
   spread into two columns instead, and the main menu tightens up until it fits
   with the Install button in. Installed, this is the whole screen the game
   gets. */
@media (max-height: 520px) {
  .screen { padding: 12px; }

  .eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 4px; }
  .title { font-size: clamp(34px, 13vh, 56px); }
  .tagline { font-size: 13px; margin: 6px 0 10px; }
  .menu-buttons { gap: 5px; }
  .menu-row { gap: 5px; }
  .menu-buttons .btn { padding: 8px 20px; font-size: 14px; }
  .menu-buttons .btn--install { padding: 6px 20px; font-size: 12px; }
  .credits { margin-top: 12px; font-size: 10px; }

  .panel { display: flex; flex-direction: column; max-height: 100%; padding: 14px 16px; }
  .trophy-tally { margin-bottom: 8px; }
  .tally { padding: 5px 4px; flex-direction: row; justify-content: center; gap: 8px; }
  .tally b { font-size: 17px; }
  .trophy-worlds, .trophy-list { max-height: none; flex: 1; min-height: 0; }
  /* A phone on its side: every line counts, and only the grid scrolls, so
     the tabs and Back stay put while a pad walks the trophies. */
  #screen-trophies .panel { height: calc(100dvh - 24px); }
  #trophy-sub { display: none; }
  .trophy-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; }
  .trophy-card { padding: 5px 6px 7px; gap: 1px; }
  .trophy-card img { width: 66px; height: 66px; margin: 0; }
  .trophy-card b { font-size: 11px; }
  .trophy-card small { font-size: 10px; }
  .tier-head { margin: 8px 0 5px; font-size: 11px; }
  .trophy-tabs { margin-bottom: 6px; }
  .trophy-tabs .choice { padding: 5px 12px; }
  .cup svg { width: 22px; height: 22px; }
  .panel--narrow { width: min(760px, 100%); }
  .panel-head { margin-bottom: 10px; }
  .panel-head h2 { font-size: 19px; }
  /* The sound and full-screen toggles sit in the bottom-right corner; keep the buttons off them. */
  .panel-foot { margin-top: 10px; gap: 8px; padding-right: 88px; }
  .panel-foot .btn { padding: 9px 18px; font-size: 14px; }

  .card-grid {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    /* Room for the focus ring, which would otherwise be clipped. */
    padding: 3px 3px 8px;
    margin: -3px -3px 0;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  .card { flex: 0 0 176px; scroll-snap-align: start; padding: 11px; }
  .card:hover { transform: none; }
  .card-art { height: 60px; margin: -2px -2px 8px; }
  .card-name { font-size: 15px; }
  .card-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card-meta { margin-top: 7px; }
  .bars { margin-top: 7px; gap: 4px; }

  .results { grid-template-columns: 1fr 1fr; gap: 6px; }
  .results li { padding: 7px 10px; gap: 8px; }
  .levels { gap: 6px; margin-bottom: 8px; }
  .level { padding: 5px 10px 6px; }
  .world { padding: 5px 12px 6px; }
  .settings { grid-template-columns: 1fr 1fr; gap: 6px; }
  .setting { padding: 5px 8px; gap: 8px; }
  .setting-name { font-size: 12px; }
  .setting-name small { display: none; }
  .choice { min-width: 0; padding: 5px 6px; font-size: 11px; }
  .world-sub { display: none; }
  .worlds--wide { margin-bottom: 6px; }
  .level-name { font-size: 14px; }
  .level-blurb { display: none; }
  .results-sub { font-size: 12px; margin-top: 2px; }
  .champ-sub { font-size: 12px; }
  .champ-rounds { gap: 6px; margin-bottom: 6px; }
  .round { padding: 5px; }
  .round-art { height: 52px; margin-bottom: 4px; }
  .track-hero { display: none; }
  .round-place { position: static; display: inline-block; margin-top: 2px; padding: 0; background: none; font-size: 12px; }
  .standings { border-spacing: 0 3px; font-size: 12px; }
  .standings td { padding: 4px 5px; }
  .standings td.pts { font-size: 14px; }
  .unlocks { margin-top: 8px; gap: 8px; }
  .unlock { grid-template-columns: 56px 1fr; padding: 5px 8px; }
  .unlock-art { height: 40px; }
  .unlock-name { font-size: 13px; }

  .howto { columns: 2; column-gap: 28px; }
  .howto dl, .howto ul, .howto p, .howto h3 { break-inside: avoid; }
  .howto dl { gap: 5px 16px; margin-bottom: 10px; }
  .howto h3 { margin: 0 0 6px; }
  .howto p, .item-legend { font-size: 12px; line-height: 1.5; }
  .howto p { margin: 8px 0; }
  .item-legend { gap: 5px; }

  /* The lap-time column used to run down into the speedo: a smaller map, no
     best-lap readout (it is on the results screen), a shorter speedo. */
  #hud-map { width: 108px; height: 108px; }
  .hud-tr .stat:nth-child(2) { display: none; }
  .stat-value { font-size: 21px; }
  .speedo { padding: 6px 12px 8px; }
  .speedo-value { font-size: 32px; }
  .item-slot { width: 104px; height: 62px; gap: 1px; }
  .item-icon { width: 22px; height: 22px; }
  .item-slot.has-item .item-label { font-size: 11px; }
}
/* Shorter still (a small phone with the browser bars up): the straplines go. */
@media (max-height: 360px) {
  .eyebrow, .tagline { display: none; }
  .title { margin-bottom: 10px; }
  /* Room for the level buttons above the circuits. */
  .levels { margin-bottom: 6px; }
  .level { padding: 3px 10px 4px; }
  .card-art { height: 40px; }
  .card-blurb { -webkit-line-clamp: 1; }
}

@media (max-width: 720px) {
  .trophy-worlds { grid-template-columns: 1fr; }
  .trophy-tally { gap: 6px; }
  #hud-map { width: 108px; height: 108px; }
  .stat-value { font-size: 21px; }
  .speedo-value { font-size: 34px; }
  .item-slot { width: 104px; height: 62px; }
}

/* Held upright, the pickers ran to one tall column — ten cars was 2,600px of
   scrolling. */
@media (max-width: 480px) {
  /* Four worlds: two by two, not three and one left over. */
  .worlds { display: grid; grid-template-columns: 1fr 1fr; }
  .trophy-worlds { grid-template-columns: 1fr; }
  .trophy-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .trophy-card img { width: 84px; height: 84px; }
  .card-grid, .card-grid--cars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card { padding: 10px; }
  .card-art { height: 64px; margin: -2px -2px 8px; }
  .card-name { font-size: 15px; }
  .bar { grid-template-columns: 42px 1fr; }
  .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .panel-head { flex-wrap: wrap; }
  .panel-head .worlds { order: 3; width: 100%; margin-right: 0; }
  /* Each setting's choices take their own full-width line. */
  .setting { flex-wrap: wrap; gap: 6px; }
  .setting .choices { width: 100%; flex-wrap: nowrap; }
  .setting .choice { flex: 1 1 0; min-width: 0; }
  .setting--reset .btn { width: 100%; }
  .panel-head .world { flex: 1 1 0; }
  .level { padding: 7px 10px 8px; }
  .level-name { font-size: 14px; }
  .level-blurb { font-size: 11px; }
  /* A cup's rounds as a list on a phone held upright: a real look at each. */
  .champ-rounds { grid-auto-flow: row; grid-template-columns: 1fr; gap: 8px; }
  .round { display: grid; grid-template-columns: 128px 1fr; column-gap: 12px; align-content: center; }
  .round-art { grid-row: span 2; height: 72px; margin: 0; }
  .round-no { align-self: end; }
  .round-name { align-self: start; }
  .standings { font-size: 12px; }
  .standings td { padding: 6px 3px; }
  .standings th { padding: 0 3px; }
  /* The bottom edge is the item slot and the speedo; the hint goes above ★,
     and wraps rather than running off an upright phone. */
  .touch-hint { bottom: 220px; white-space: normal; width: calc(100% - 32px); text-align: center; border-radius: 14px; }
}