:root {
  --bg: #14161c;
  --panel: rgba(20, 22, 30, 0.9);
  --panel-2: #232733;
  --line: #353a48;
  --text: #f4f4f2;
  --muted: #aab0bd;
  --accent: #ffd23a;
  --red: #e84a3c;
  --good: #4fd46f;
  --bad: #ff6a5a;
  --radius: 12px;
  /* The screen's safe areas (docs/PLATFORMS.md, "Layout"): under a notch, a
     cut-out, a rounded corner or the home indicator. Everything the player
     reads or touches keeps inside them. The browser tests set these to try
     insets that a desktop browser doesn't have. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* The site's header: 48 px and its border, under the top safe area. */
  --header-h: calc(49px + var(--safe-t));
  /* The smallest text (docs/PLATFORMS.md): 14 px on a desktop, 15 on a
     tablet, 13 on a phone, set by the queries below. The canvas reads it too
     (main.js), for the text it draws. */
  --t-min: 14px;
  color-scheme: dark;
}

/* A tablet: a touch screen at least 600 px each way. */
@media (pointer: coarse) {
  :root {
    --t-min: 15px;
  }
}

/* A phone: a touch screen under 600 px one way or the other. */
@media (pointer: coarse) and (max-width: 599px), (pointer: coarse) and (max-height: 599px) {
  :root {
    --t-min: 13px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  -webkit-text-size-adjust: 100%;
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

/* The page keeps the game inside the left and right safe areas (a phone held
   sideways has its notch or cut-out there). */
.page {
  padding: 8px max(8px, var(--safe-r)) 40px max(8px, var(--safe-l));
}

/* No scrolling, zooming, selection or long-press menu mid-play
   (docs/PLATFORMS.md): the stage takes no touch gestures, the menus scroll
   up and down inside it, and main.js prevents Safari's pinch gesture and the
   context menu. --in-* are the parts of the safe areas that fall inside the
   game: only the bottom on the page (the home indicator under a race on a
   phone held sideways), every side in fullscreen. */
.game-root {
  --in-t: 0px;
  --in-r: 0px;
  --in-b: var(--safe-b);
  --in-l: 0px;
  /* Touch controls keep 16 px inside the safe areas, so a thumb on one never
     starts a system gesture from the screen's edge, and at least 24 px from
     the edges, clear of a phone's rounded corners (docs/PLATFORMS.md). */
  --touch-l: max(24px, calc(16px + var(--in-l)));
  --touch-r: max(24px, calc(16px + var(--in-r)));
  --touch-b: max(24px, calc(16px + var(--in-b)));
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: none;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.stage {
  position: relative;
  width: 100%;
  height: max(240px, calc(100vh - var(--header-h) - 24px));
  height: max(240px, calc(100dvh - var(--header-h) - 24px));
  touch-action: none;
  overscroll-behavior: none;
  overflow: hidden;
}

/* Full screen, with the site's button (docs/PLATFORMS.md, "Full screen"):
   the race fills the screen edge to edge, its HUD, controls and menus inside
   the safe areas, and the top middle stays clear for the site's "Leave full
   screen" button (the timer and the menus start below it). */
.game-root:fullscreen {
  --in-t: var(--safe-t);
  --in-r: var(--safe-r);
  --in-l: var(--safe-l);
  max-width: none;
  border: 0;
  border-radius: 0;
}
.game-root:fullscreen .stage {
  height: 100vh;
  height: 100dvh;
}
.game-root:fullscreen .hud {
  --hud-top: calc(max(8px, var(--safe-t)) + 52px);
}
.game-root:fullscreen .screen {
  padding-top: calc(max(8px, var(--safe-t)) + 56px);
  padding-left: calc(16px + var(--in-l));
  padding-right: calc(16px + var(--in-r));
  padding-bottom: calc(24px + var(--in-b));
}

#view {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- HUD ---------- */

/* --hud-top: where the timer starts; the toast and the banner keep below
   it, clear of each other on a short screen (a phone held sideways). */
.hud {
  --hud-top: calc(10px + var(--in-t));
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.45);
}

.hud-tl {
  position: absolute;
  left: calc(12px + var(--in-l));
  top: calc(10px + var(--in-t));
}
.hud-pos {
  font-size: 44px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
}
.hud-pos small {
  font-size: 20px;
  opacity: 0.85;
  margin-left: 2px;
}
.hud-lap {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 700;
}

.hud-tc {
  position: absolute;
  left: 50%;
  top: var(--hud-top);
  transform: translateX(-50%);
  text-align: center;
}
.hud-time {
  font-size: 26px;
  font-weight: 800;
}
.hud-sub {
  font-size: max(15px, var(--t-min));
  font-weight: 700;
  min-height: 18px;
}
.hud-sub .good {
  color: var(--good);
}
.hud-sub .bad {
  color: var(--bad);
}

.hud-tr {
  position: absolute;
  right: calc(10px + var(--in-r));
  top: calc(8px + var(--in-t));
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.hbtn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(15, 17, 24, 0.55);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.hbtn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.hud-board {
  position: absolute;
  left: calc(12px + var(--in-l));
  top: calc(92px + var(--in-t));
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: max(13px, var(--t-min));
  font-weight: 600;
}
.hud-board li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 4px;
  margin-bottom: 2px;
  border-radius: 6px;
  background: rgba(10, 12, 18, 0.45);
  min-width: 150px;
}
.hud-board .bp {
  min-width: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hud-board li.fin .bn::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 8px;
  margin-left: 5px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  background: conic-gradient(#fff 25%, #16161a 0 50%, #fff 0 75%, #16161a 0) 0 0 / 5px 4px;
}
.hud-board li.me {
  background: rgba(255, 210, 58, 0.85);
  color: #16161a;
  text-shadow: none;
}
.hud-board li.out {
  opacity: 0.45;
  text-decoration: line-through;
}
.hud-board .sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.6);
}
.hud-board .gap {
  margin-left: auto;
  padding-left: 6px;
  font-size: max(12px, var(--t-min));
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.hud-banner {
  position: absolute;
  left: 50%;
  top: max(30%, calc(var(--hud-top) + 130px));
  transform: translate(-50%, -50%);
  font-size: 56px;
  font-weight: 900;
  font-style: italic;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.hud-banner.show {
  opacity: 1;
}
.hud-banner.small {
  font-size: 30px;
}
.hud-banner.go {
  color: var(--good);
}
.hud-banner.warn {
  color: var(--bad);
}

.hud-toast {
  position: absolute;
  left: 50%;
  top: calc(var(--hud-top) + 60px);
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  width: max-content;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(12, 14, 20, 0.62);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.hud-toast.show {
  opacity: 1;
}
.hud-toast.good {
  color: var(--good);
}
.hud-toast.gold {
  color: var(--accent);
}

.hud-chain {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translateX(-50%);
  font-size: 22px;
  font-weight: 900;
  font-style: italic;
  white-space: nowrap;
  color: var(--accent);
}
.hud-chain small {
  font-size: 16px;
  color: #fff;
  margin-left: 6px;
}

.hud-bc {
  position: absolute;
  left: 50%;
  bottom: calc(12px + var(--in-b));
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.hud-speed {
  font-size: 34px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}
.hud-speed small {
  font-size: max(14px, var(--t-min));
  margin-left: 4px;
  font-style: normal;
  font-weight: 700;
}
.hud-meters {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 3px;
}
.meter {
  display: flex;
  gap: 3px;
}
.meter i {
  width: 18px;
  height: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.meter i.l1 {
  background: #ffd23a;
}
.meter i.l2 {
  background: #ff7a1a;
}
.meter i.l3 {
  background: #8f7dff;
}
.meter.tow {
  width: 60px;
  height: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.meter.tow b {
  display: block;
  height: 100%;
  width: 0;
  background: #5ff0ff;
}
.meter.tow.ready b {
  background: #fff;
}

/* ---------- Touch controls ---------- */

.touch {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 var(--touch-r) var(--touch-b) var(--touch-l);
  pointer-events: none;
}
.touch-l,
.touch-r {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  pointer-events: auto;
}
.tb {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(15, 17, 24, 0.4);
  color: #fff;
  font-weight: 800;
  font-size: max(15px, var(--t-min));
  display: grid;
  place-items: center;
  padding: 0;
  touch-action: none;
}
.tb svg {
  width: 34px;
  height: 34px;
  fill: #fff;
}
.tb.on {
  background: rgba(255, 210, 58, 0.55);
  border-color: var(--accent);
}
.tb-s {
  width: 62px;
  height: 62px;
  font-size: max(13px, var(--t-min));
}
.tb-gas {
  width: 78px;
  height: 78px;
}
body.touch-ui .hud-bc {
  bottom: calc(var(--touch-b) + 84px);
}
body.touch-ui .hud-board {
  display: none;
}
/* Touch: the sound and pause buttons are thumb-sized and kept in from the
   edges like the driving buttons; the place and lap keep clear of the
   corner. */
body.touch-ui .hbtn {
  width: 44px;
  height: 44px;
}
body.touch-ui .hud-tr {
  right: var(--touch-r);
  top: calc(16px + var(--in-t));
}
body.touch-ui .hud-tl {
  left: var(--touch-l);
  top: calc(14px + var(--in-t));
}

/* ---------- Menus ---------- */

.menu {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(12, 14, 20, 0.35), rgba(12, 14, 20, 0.7));
  touch-action: pan-y;
}
.menu:empty {
  display: none;
}
.screen {
  width: 100%;
  max-width: 880px;
  padding: 18px 16px 24px;
  margin: auto 0;
}
.screen h2 {
  margin: 0 0 12px;
  font-size: 26px;
  font-style: italic;
  font-weight: 900;
}
.screen h3 {
  margin: 18px 0 8px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.topbar h2 {
  margin: 0;
  flex: 1;
}
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(20, 22, 30, 0.8);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: max(14px, var(--t-min));
  white-space: nowrap;
}
.chip .coin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3a8, #f5c400 55%, #b58a00);
}
.star {
  color: var(--accent);
}
.star.off {
  color: rgba(255, 255, 255, 0.25);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.btn:hover:not(:disabled) {
  border-color: #59607a;
}
.btn:focus-visible,
.tile:focus-visible,
.hbtn:focus-visible,
body.pad-input .menu :focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #16161a;
}
.btn.red {
  background: var(--red);
  border-color: var(--red);
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.btn.small {
  min-height: 44px;
  padding: 8px 12px;
  font-size: max(14px, var(--t-min));
}
.btn.back {
  min-width: 44px;
  padding: 8px 12px;
}

.title {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.logo {
  margin: 4px 0 2px;
  font-size: clamp(38px, 8vw, 68px);
  font-weight: 900;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-shadow: 0 3px 0 #a3261b, 0 6px 16px rgba(0, 0, 0, 0.6);
}
.logo span {
  color: var(--accent);
}
.title .chips {
  justify-content: center;
}
.title-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 10px;
  margin-top: 6px;
}
.title-grid .btn {
  flex-direction: column;
  gap: 2px;
  min-height: 62px;
}
.title-grid .btn small {
  font-weight: 500;
  font-size: max(12px, var(--t-min));
  opacity: 0.85;
}
.title-grid .btn.primary small {
  opacity: 0.8;
}
.keys {
  font-size: max(13px, var(--t-min));
  color: var(--muted);
  max-width: 560px;
  line-height: 1.5;
  text-shadow: 0 1px 2px #000;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 4px;
}
.tabs .btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 12px;
  font-size: max(14px, var(--t-min));
}
.tabs .btn.sel {
  border-color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card .kind {
  font-size: max(12px, var(--t-min));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.card .name {
  font-size: 17px;
  font-weight: 800;
}
.card .meta {
  font-size: max(13px, var(--t-min));
  color: var(--muted);
}
.card .stars {
  font-size: 20px;
  letter-spacing: 2px;
}
.card canvas {
  width: 100%;
  height: 90px;
  display: block;
}
.card .btn {
  margin-top: auto;
}
.card.locked {
  opacity: 0.6;
}
.note {
  color: var(--muted);
  font-size: max(14px, var(--t-min));
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px;
}
.tile {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  text-align: center;
  font-size: max(13px, var(--t-min));
  font-weight: 700;
}
.tile canvas {
  width: 100%;
  height: 64px;
  display: block;
}
.tile.sel {
  border-color: var(--accent);
}
.tile small {
  display: block;
  font-size: var(--t-min);
  font-weight: 500;
  color: var(--muted);
}

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
/* Choices: thumb-sized buttons 8 px apart (docs/PLATFORMS.md). */
.seg {
  display: inline-flex;
  align-self: flex-start;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 8px;
}
.seg button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  padding: 8px 14px;
  min-width: 44px;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
}
.seg button.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: #16161a;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.field > span {
  font-size: max(14px, var(--t-min));
  font-weight: 700;
  color: var(--muted);
}
/* A slider a thumb can take: 44 px tall, the track across its middle. */
.field input[type='range'] {
  width: min(320px, 100%);
  height: 44px;
  margin: 0;
  accent-color: var(--accent);
}
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* Garage */
.garage {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
}
.carlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.carlist .tile {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
}
.carlist .tile canvas {
  width: 56px;
  height: 30px;
  flex: none;
}
.preview {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
}
.preview canvas {
  width: 100%;
  height: 150px;
  display: block;
}
.stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  font-size: max(13px, var(--t-min));
  align-items: center;
  margin-top: 6px;
}
.bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.bar b {
  display: block;
  height: 100%;
  background: var(--accent);
}
.ups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.up {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.up .pips {
  display: flex;
  gap: 4px;
}
.up .pips i {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
}
.up .pips i.on {
  background: var(--accent);
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.swatch {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 2px solid var(--line);
  cursor: pointer;
  position: relative;
  padding: 0;
}
.swatch.sel {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent);
}
.swatch small {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  font-size: var(--t-min);
  font-weight: 800;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 0 0 8px 8px;
}

/* Results */
.results table {
  width: 100%;
  border-collapse: collapse;
  font-size: max(14px, var(--t-min));
  font-variant-numeric: tabular-nums;
}
.results td,
.results th {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.results th {
  color: var(--muted);
  font-weight: 700;
  font-size: max(12px, var(--t-min));
  text-transform: uppercase;
}
.results tr.me {
  background: rgba(255, 210, 58, 0.18);
}
.results .unlock {
  margin: 6px 0;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--accent);
  color: #16161a;
  font-weight: 900;
  margin-right: 8px;
}
.results .big {
  font-size: 40px;
  font-weight: 900;
  font-style: italic;
  margin: 0;
}
.results .bigstars {
  font-size: 40px;
  letter-spacing: 6px;
}
.results .bigstars .star {
  display: inline-block;
  animation: pop 0.35s both;
}
.results .bigstars .star:nth-child(2) {
  animation-delay: 0.25s;
}
.results .bigstars .star:nth-child(3) {
  animation-delay: 0.5s;
}
@keyframes pop {
  from {
    transform: scale(0.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.coins {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  max-width: 360px;
  font-variant-numeric: tabular-nums;
}
.coins .total {
  font-weight: 800;
  border-top: 1px solid var(--line);
  padding-top: 4px;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 12px;
}
.ach {
  color: var(--accent);
  font-weight: 700;
}
.ad-in {
  margin-top: 16px;
}

.pause {
  max-width: 420px;
  text-align: center;
}
.pause .actions {
  flex-direction: column;
}
.pause .btn {
  width: 100%;
}

/* ---------- Below the game ---------- */

.ad-below {
  max-width: 1280px;
  margin: 12px auto 0;
}
.about {
  max-width: 800px;
  margin: 24px auto 0;
  padding: 0 12px;
  line-height: 1.55;
}
.about h1 {
  font-size: 26px;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  .page {
    padding: 4px 0 30px;
  }
  .game-root {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .hud-pos {
    font-size: 34px;
  }
  .hud-time {
    font-size: 20px;
  }
  .hud-sub {
    font-size: max(13px, var(--t-min));
  }
  .hud-banner {
    font-size: 44px;
  }
  .hud-banner.small {
    font-size: 22px;
  }
  .hud-speed {
    font-size: 28px;
  }
  .garage {
    grid-template-columns: 1fr;
  }
  .carlist {
    flex-direction: row;
    overflow-x: auto;
  }
  .carlist .tile {
    flex: 0 0 auto;
  }
  .title-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  /* Narrow screens: Drift sits above Brake, beside a tall Gas button. */
  .touch-r {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: 'drift gas' 'brake gas';
    gap: 10px;
    align-items: center;
  }
  .touch-r [data-hold='drift'] {
    grid-area: drift;
  }
  .touch-r [data-hold='brake'] {
    grid-area: brake;
  }
  .touch-r .tb-gas {
    grid-area: gas;
    height: 134px;
    border-radius: 40px;
  }
  body.touch-ui .hud-bc {
    bottom: calc(var(--touch-b) + 148px);
  }
}

@media (max-width: 380px) {
  .tb {
    width: 62px;
    height: 62px;
  }
  .tb-s {
    width: 54px;
    height: 54px;
  }
  .tb-gas {
    width: 66px;
  }
  .touch-r .tb-gas {
    height: 118px;
  }
  body.touch-ui .hud-bc {
    bottom: calc(var(--touch-b) + 128px);
  }
}

/* Landscape phones: while racing, the site's header steps aside and the
   stage fills the screen. The menus, the pause screen and the results show
   the header again, with its "Full screen" button, and the stage fits under
   it. */
@media (orientation: landscape) and (max-height: 500px) {
  .stage {
    height: calc(100vh - var(--header-h) - 12px);
    height: calc(100dvh - var(--header-h) - 12px);
    min-height: 240px;
  }
  body.racing .site-header {
    display: none;
  }
  body.racing .page {
    padding-top: 0;
  }
  body.racing .stage {
    height: calc(100vh - 2px);
    height: calc(100dvh - 2px);
  }
  .hud-pos {
    font-size: 30px;
  }
  .hud-board {
    display: none;
  }
  body.touch-ui .hud-bc {
    bottom: calc(10px + var(--in-b));
  }
}

@media (any-pointer: coarse) {
  .hbtn {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud-banner,
  .hud-toast {
    transition: none;
  }
}

/* A finger can recover from the runoff without a keyboard or restarting. */
.hud-reset { display: none; }
body.racing.touch-ui .hud-reset {
  display: grid;
  position: absolute;
  left: var(--touch-l);
  bottom: calc(var(--touch-b) + 84px);
  width: 62px;
  pointer-events: auto;
  font-size: var(--t-min);
}

.hud-rule { display: block; font-size: var(--t-min); }