/* Saira (OFL, fonts/OFL.txt): variable weight and width, upright + italic, Latin subset. */
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 100 900; font-stretch: 75% 125%; font-display: swap;
  src: url(fonts/saira-roman.woff2) format('woff2'); }
@font-face { font-family: 'Saira'; font-style: italic; font-weight: 100 900; font-stretch: 75% 125%; font-display: swap;
  src: url(fonts/saira-italic.woff2) format('woff2'); }

:root {
  --bg: #0e0f13;
  --panel: #1a1c22;
  --text: #e9eaee;
  --muted: #8b8f9a;
  --accent: #ff7a1a;
  --danger: #ff4040;
  --font: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;  /* the one typeface (UI kit, 2026-10-09) */
  --cash: #6fdc8c;
  --rep: #f2c418;
  --warn: #ffbf3a;
  --nos: #4aa8ff;
  --menu-pb: max(6px, calc(var(--sab) - 14px)); /* the tabs sit low, over the home indicator's margin (Evan, 2026-10-09) */

  /* Read by src/core/env.js — iOS only reports these through CSS. (--sa?0: the
     real insets, which the dev iPhone simulation overrides; main.js.) */
  --sat0: env(safe-area-inset-top, 0px);
  --sar0: env(safe-area-inset-right, 0px);
  --sab0: env(safe-area-inset-bottom, 0px);
  --sal0: env(safe-area-inset-left, 0px);
  --sat: var(--sat0);
  --sar: var(--sar0);
  --sab: var(--sab0);
  --sal: var(--sal0);
}

/* UI scale (2026-10-10): on phones the menus and the slip are laid out at
   844 x 390 (an iPhone 13-15 Pro) and scaled to fit the screen (main.js sets
   --k, the layer's size in layout px --mw/--mh, and 1% of it --mvw/--mvh), so
   every phone shows the same layout, bigger or smaller. Inside the scaled
   layers, the safe-area insets are in layout px too. Foldables: --k is 1. */
#menu, #slip {
  inset: auto; left: 0; top: 0; width: var(--mw, 100vw); height: var(--mh, 100vh);
  transform: scale(var(--k, 1)); transform-origin: 0 0;
  --sat: calc(var(--sat0) / var(--k, 1));
  --sar: calc(var(--sar0) / var(--k, 1));
  --sab: calc(var(--sab0) / var(--k, 1));
  --sal: calc(var(--sal0) / var(--k, 1));
  --il: var(--il-k, 0px);
  --ir: var(--ir-k, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  /* iOS Safari enlarges text in landscape unless told not to: every size here is as designed. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* No zoom, scroll, text selection or callouts anywhere in the game. */
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

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

/* Dev buttons; positioned by main.js at the bottom-left of the race view. */
#dev {
  position: fixed;
  display: flex;
  gap: 6px;
}
#dev button {
  padding: 5px 8px;
  font: 600 10px/1 var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(26, 28, 34, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
}
#dev button.on { border-color: var(--accent); color: var(--accent); }
#dev:not(.open) button:not(#btn-dev), #dev:not(.open) #dev-version { display: none; }
#dev button[hidden] { display: none; }
#dev-version { align-self: center; padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: rgba(10,10,14,0.75);
  font: 600 10px/1 var(--font); letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
#btn-dev { font-size: 13px !important; padding: 3px 7px !important; }

/* Restart, beside the timer (positioned by main.js). */
#btn-reset {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}
body:not(.ready) #btn-reset, body.rotate #btn-reset { display: none; }

/* Timing slip, over the whole game after a race. */
#slip {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sat) + 8px) calc(var(--ir, var(--sar)) + 8px) calc(var(--sab) + 8px) calc(var(--il, var(--sal)) + 8px);
  background: rgba(8, 8, 11, 0.55);
}
#slip[hidden], body.rotate #slip { display: none; }
.slip-card {
  max-height: 100%;
  overflow: auto;
  padding: 10px 14px 12px;
  background: rgba(244, 241, 232, 0.8); /* paper, 80% */
  color: #1d1e22;
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  font: 13px/1.25 var(--font);
  font-variant-numeric: tabular-nums;
}
.slip-head {
  margin: 0 0 6px;
  padding: 4px 0 6px;
  border-bottom: 2px dashed #b9b4a6;
  font: 800 15px/1.2 var(--font);
  letter-spacing: 0.06em;
  text-align: center;
}
.slip-head.win { color: #1c8a35; }
.slip-head.loss { color: #c0281f; }
.slip-card table { border-collapse: collapse; width: 100%; }
.slip-card th { text-align: left; padding: 1px 14px 1px 0; color: #6b6a64; font-weight: 600; }
.slip-card td { text-align: right; padding: 1px 0 1px 18px; min-width: 70px; }
.slip-card tr.who td { font: 800 12px/1.1 var(--font); padding-bottom: 4px; }
.slip-card tr.who small { display: block; font-weight: 500; color: #6b6a64; }
.slip-card tr.et th, .slip-card tr.et td { font-weight: 800; border-top: 1px solid #d6d1c3; }
.slip-card td.best { color: #1c8a35; font-weight: 700; }
.slip-card td.red { color: #c0281f; font-weight: 700; }
.slip-pay { margin-top: 6px; padding-top: 5px; border-top: 2px dashed #b9b4a6; font-size: 11px; }
.pay-line, .pay-total { display: grid; grid-template-columns: 1fr 64px 64px; gap: 6px; }
.pay-line span { color: #3d3e44; }
.pay-line b { text-align: right; color: #1c8a35; font-weight: 700; }
.pay-line.cup span, .pay-line.cup b { color: #b06a00; font-weight: 800; }
.pay-total { margin-top: 2px; padding-top: 2px; border-top: 1px solid #d6d1c3; font-weight: 800; }
.pay-total b { text-align: right; }
.slip-foot {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 2px dashed #b9b4a6;
  color: #6b6a64;
  font-size: 11px;
  text-align: center;
}
.slip-buttons { display: flex; gap: 8px; margin-top: 10px; }


#loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.ready #loading { display: none; }
#loading { flex-direction: column; gap: 12px; }
.load-bar { width: min(260px, 60vw); height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.load-bar i { display: block; height: 100%; width: calc(var(--load, 0.03) * 100%); background: var(--accent); transition: width 0.2s ease-out; }

#rotate {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg);
  color: var(--muted);
  font-size: 16px;
}
body.rotate #rotate { display: flex; }
body.rotate #dev { display: none; }

.rotate-icon {
  width: 44px;
  height: 76px;
  border: 3px solid var(--muted);
  border-radius: 8px;
  animation: tilt 2s ease-in-out infinite;
}
@keyframes tilt {
  0%, 30% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}

#toast {
  position: fixed;
  pointer-events: none;
  white-space: nowrap;
  left: 50%;
  top: calc(var(--sat) + 10px);
  transform: translateX(-50%) scale(var(--k, 1));
  transform-origin: 50% 0;
  padding: 8px 14px;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 13px;
}

#fatal {
  position: fixed;
  inset: 0;
  padding: calc(var(--sat) + 24px) calc(var(--sar) + 24px) 24px calc(var(--sal) + 24px);
  background: #2a0b0b;
  color: #ffd6d6;
  font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow: auto;
  -webkit-user-select: text;
  user-select: text;
}

/* In-game confirmations and dev pickers (main.js dialog: not window.confirm). */
.m-dialog { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(0,0,0,0.6); }
.m-dialog > .m-panel { display: flex; flex-direction: column; gap: 6px; min-width: 260px; max-width: min(420px, 90vw); padding: 14px;
  background: linear-gradient(180deg, #23252d, #121318); color: var(--text); transform: scale(var(--k, 1)); }
.m-dialog b { font: 700 14px/1.3 var(--font); }
.m-dialog small { color: var(--muted); font: 500 12px/1.3 var(--font); margin-bottom: 4px; }
.m-dialog .btn { margin: 0; }

/* --- Menu (Garage / Parts / Race), src/ui/menu.js ------------------------- */
#menu {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 6px;
  padding: calc(var(--sat) + 6px) calc(var(--ir, var(--sar)) + 8px) var(--menu-pb) calc(var(--il, var(--sal)) + 8px);
  background: radial-gradient(120% 90% at 35% 30%, #2a2622 0%, #15161a 55%, #0b0c0f 100%);
  color: var(--text);
}
#menu[hidden], body.rotate #menu { display: none; }
:where(#menu) button { font: inherit; color: inherit; }
.m-screen { min-height: 0; }
.m-screen[hidden] { display: none !important; }
.m-label { display: block; margin-bottom: 3px; font: 700 9px/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* Tab bar */
.m-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

/* Shared menu pieces: one panel look, one label look, one button look. */
.m-panel { background: rgba(14,15,20,0.8); border: 1px solid rgba(255,255,255,0.09); border-radius: 8px; }
.m-chip { padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.18); background: rgba(8,9,12,0.6);
  font: 800 9px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; }

/* Cash and Rep: Garage and Parts, top right. */
.m-wallet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 10px; }
.m-wallet span { display: flex; align-items: center; gap: 5px; }
/* The selected car, small, in the middle of the Cash/Rep bar (a little bigger than the bar). */
.m-car { flex: none; width: 60px; height: 34px; margin: -9px 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); pointer-events: none; }
.m-wallet small { font: 700 9px/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.m-wallet b { font: 800 13px/1.15 var(--font); font-variant-numeric: tabular-nums; }
.m-cash { color: #6fdc8c; }
.m-rep { color: #f2c418; }
.m-screen[data-tab="parts"] { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 6px; min-height: 0; }

/* Parts shop (Stage 6): the car's numbers, section chips, one card per part (art comes later). */
.p-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 40px; padding: 0 0 0 30px; } /* clear of ⚙ */
.p-car { margin: 0; font: italic 900 20px/1.05 var(--font); }
.p-sum { display: flex; flex-wrap: wrap; gap: 4px; }
.p-sum .m-chip { font-size: 10px; text-transform: none; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.p-warn { flex-basis: 100%; font: 600 11px/1.3 var(--font); color: #f2c418; }
.p-warn[hidden] { display: none; }
.p-sections { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.p-sections small { color: #6fdc8c; font-size: 10px; }
/* The row of part cards, with the rows' arrows over its ends. */
.p-strip { position: relative; min-height: 0; display: flex; }
.p-strip > .p-cards { flex: 1; }
.p-strip .row-arrow { top: 30%; margin-top: -23px; } /* level with the art, clear of the names */
.p-strip .row-arrow.l { left: 2px; }
.p-strip .row-arrow.r { right: 2px; }
.p-cards { display: flex; align-items: flex-start; gap: 8px; overflow-x: auto; overflow-y: hidden; min-height: 0; padding-bottom: 4px; scroll-snap-type: x mandatory; scroll-padding: 0 2px; scrollbar-width: none; overscroll-behavior-x: contain; }
.p-cards::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .p-sections.dragging, .p-sections.dragging button { cursor: grabbing; user-select: none; } .p-cards { cursor: grab; } .p-cards.dragging, .p-cards.dragging .p-card { cursor: grabbing; user-select: none; } }
.p-card { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; }
.p-card h3 { margin: 0; font: italic 900 14px/1.15 var(--font); }
.p-card p { margin: 0; flex: 1; font: 500 11px/1.3 var(--font); color: var(--muted); }
.p-status { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font: 600 11px/1.3 var(--font); }
.p-price { color: #6fdc8c; font-size: 13px; }
.p-on { color: var(--accent); }
.p-stock { color: #9fb4c8; letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; }
.p-no { color: #c98a8a; }
.p-lock { flex-basis: 100%; display: inline-flex; align-items: center; gap: 4px; color: #e0b45c; font-weight: 600; }
.p-lock svg { width: 12px; height: 12px; flex: none; }
.p-repl { color: #f2c418; font-size: 10px; }
.p-bottle { position: relative; flex-basis: 100%; padding-top: 5px; color: #8fd3ff; font-size: 10px; }
.p-bottle i { position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #5ab8ff var(--w), rgba(255,255,255,0.12) var(--w)); }
.p-path { flex-basis: 100%; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.p-card.needs .p-effect .p-good { color: #8fd6a2; }
.p-effect { min-height: 14px; font: 700 11px/1.3 var(--font); font-variant-numeric: tabular-nums; color: var(--muted); }
.p-good { color: #6fdc8c; }
.p-bad { color: #e07a5f; }
.p-btns { display: flex; gap: 4px; }
.p-btns:empty { display: none; }
.p-card.fitted { border-color: rgba(255,140,60,0.5); }
.p-card.blocked, .p-card.stock { opacity: 0.6; }
.p-card.needs h3, .p-card.needs p { opacity: 0.7; }

/* Garage: big car view + car list on the right, options along the bottom. */
.g-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Car info: name, stats, deal. Clear of the dev ⚙ at top left. */
.g-name { margin: 0; font: italic 900 17px/1.05 var(--font); letter-spacing: 0.01em; }
.g-body { margin: 2px 0 6px; font: 700 9px/1.2 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.g-stat { display: grid; grid-template-columns: 1fr auto; align-items: baseline; margin-bottom: 3px; }
.g-stat span { font: 700 9px/1.4 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.g-stat b { font: 800 10px/1.4 var(--font); font-variant-numeric: tabular-nums; }
.g-tags { display: flex; gap: 4px; margin-top: 6px; }
.g-price { margin-bottom: 4px; font: 800 12px/1.2 var(--font); color: #6fdc8c; font-variant-numeric: tabular-nums; }

/* Service (6.5): top right of the car view. Each row repairs that item. */

/* Car list: cards like the ladder's (name on a dark strip, accent outline when picked). */
.g-cars { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: auto; }
.g-car { flex: 1; min-height: 52px; position: relative; padding: 0; text-align: left; overflow: hidden;
  background: rgba(14,15,20,0.8); border: 1px solid rgba(255,255,255,0.09); border-radius: 8px; }
.g-car canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-strip { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 8px 3px; background: rgba(8,9,12,0.55); }
.g-car b { font: italic 900 12px/1.1 var(--font); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.7); }
.g-car.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.g-car.locked canvas { opacity: 0.45; filter: grayscale(0.6); }
.g-lock { position: absolute; top: 4px; right: 4px; }
.g-lock:empty { display: none; }

/* Options: one panel, three titled sections. */
/* Right column: ride height on top; rims | rim size underneath. */
.g-wheels { display: flex; flex-direction: column; gap: 10px; }
.g-wheel-row { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: start; } /* rims, then rim size under them (three buttons need the width) */
.g-wheels .m-head { margin-bottom: 7px; }
.g-opt { min-width: 0; padding: 0 12px; }
.g-opt + .g-opt { border-left: 1px solid rgba(255,255,255,0.08); }
.g-opt > .m-label { margin-bottom: 6px; }
.g-hsb { display: grid; grid-template-columns: 66px 1fr; align-items: center; column-gap: 8px; row-gap: 4px; }
.g-hsb > span, .g-stance-val { font: 700 9px/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.g-stance-row { display: grid; grid-template-columns: 1fr 40px; align-items: center; column-gap: 8px; }
.g-stance-val, .g-rimsize-val { text-align: right; font: 600 9px/1 var(--font); letter-spacing: 0.14em; color: var(--muted); }
.g-stance-slider .m-slider-track, .g-rimsize-slider .m-slider-track { background: linear-gradient(90deg, #3a3c44, var(--accent)); }
.g-rims { display: flex; gap: 6px; }

/* Custom slider (ui/slider.js): a track and a square thumb, Nitto-style. */
.m-slider { position: relative; height: 18px; touch-action: none; cursor: pointer; outline: none; }
.m-slider-track { position: absolute; left: 0; right: 0; top: 5px; height: 8px; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08); }
.m-slider-thumb { position: absolute; top: 1px; width: 10px; height: 16px; margin-left: -5px; border-radius: 2px;
  background: linear-gradient(#f4f4f6, #b9bbc2); box-shadow: 0 1px 3px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.25); }
.m-slider.drag .m-slider-thumb, .m-slider:focus-visible .m-slider-thumb { box-shadow: 0 0 0 2px var(--accent), 0 1px 3px rgba(0,0,0,0.6); }
.g-rim { width: 30px; height: 30px; padding: 2px !important; background: rgba(8,9,12,0.6); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; }
.g-rim canvas { width: 100%; height: 100%; display: block; }
.g-rim.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* Parts (placeholder) */
.m-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); }
.m-empty svg { width: 40px; height: 40px; fill: var(--accent); opacity: 0.8; }
.m-empty h2 { margin: 8px 0 4px; color: var(--text); font: 800 18px/1.2 var(--font); letter-spacing: 0.06em; text-transform: uppercase; }
.m-empty p { margin: 0; font-size: 13px; }

/* Race tab: pick an opponent, then Race. */
.m-screen[data-tab="race"] { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; min-height: 0; }
.r-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-left: 30px; } /* clear of the dev ⚙ */
.r-head h2 { margin: 0; font: 800 20px/1.1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; }
.r-you { margin-left: auto; text-align: right; font: 600 12px/1.2 var(--font); color: var(--muted); } /* right of the centred Cash/Rep */
.r-opps { display: grid; grid-template-rows: repeat(3, 1fr); gap: 6px; min-height: 0; }
.r-tier { display: grid; grid-template-columns: 92px repeat(3, 1fr); gap: 6px; min-height: 0; }
.r-tier-head { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.r-tier-head b { font: 800 13px/1.1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
.r-tier-head small { font: 600 9px/1.25 var(--font); color: var(--muted); }
.r-tier.locked .r-opp { opacity: 0.35; }
/* Opponent cards: the portrait fills the card; name and your record on a dark strip. */
.r-opp { position: relative; overflow: hidden; padding: 0; text-align: left; background: #15171c;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; }
.r-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 88% 22%; pointer-events: none; } /* 2:1 art, character right */
.r-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 17px; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px;
  padding: 0 8px 3px; background: rgba(8,9,12,0.55); }
/* Name: bold italic, rising out of the strip, with a hard drop shadow. */
.r-opp b { margin-bottom: -2px; padding-right: 4px; font: italic 900 22px/1 var(--font); letter-spacing: 0.01em;
  color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,0.75), 0 0 8px rgba(0,0,0,0.55); }
.r-opp.beaten b::after { content: ' ✓'; color: #45c46a; }
.r-meta { font: italic 800 11px/1 var(--font); letter-spacing: 0.04em; color: rgba(255,255,255,0.85); white-space: nowrap; text-shadow: 1px 1px 0 rgba(0,0,0,0.7); }
.r-tier.locked .r-opp { opacity: 0.45; }
.r-tier.locked .r-face { filter: grayscale(1); }
.r-opp.on { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.r-foot { display: flex; gap: 8px; align-items: stretch; }
.r-foot .r-dial { display: flex; align-items: center; gap: 4px; }
.r-dial[hidden] { display: none; }
.r-dial .m-label { margin: 0 4px 0 0; }
.r-dial-val { min-width: 62px; text-align: center; font: 800 18px/1 var(--font); }
.r-go { height: 38px; font: 800 16px/1 var(--font) !important; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--accent); border: 0; border-radius: 8px; color: #fff !important; }

/* Tournament view: each tier row is a bracket, R1 -> R2 -> R3 -> cup. */
.r-cup, .r-round { display: none; }
.m-screen[data-tab="race"].tour .r-tier { grid-template-columns: 92px repeat(3, 1fr) 84px; }
.m-screen[data-tab="race"].tour .r-cup { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid rgba(242,196,24,0.35); border-radius: 8px; background: rgba(40,33,10,0.55); color: #f2c418; }
.r-trophy { font-size: 20px; line-height: 1; }
.r-cup-cash { font: 900 14px/1 var(--font); color: #f2c418; }
.r-cup-won { font: 700 9px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.m-screen[data-tab="race"].tour .r-round { display: block; position: absolute; top: 4px; left: 4px; z-index: 1; font-size: 9px; }
.m-screen[data-tab="race"].tour .r-opp:not(:last-of-type)::after,
.m-screen[data-tab="race"].tour .r-opp:nth-of-type(3)::after { content: '▶'; position: absolute; right: -9px; top: 50%; transform: translateY(-50%);
  z-index: 2; font-size: 10px; color: rgba(255,255,255,0.45); }
.m-screen[data-tab="race"].tour .r-opp { overflow: visible; }
.m-screen[data-tab="race"].tour .r-opp .r-face { border-radius: 8px; }
.m-screen[data-tab="race"].tour .r-tier.picked .r-cup, .m-screen[data-tab="race"].tour .r-tier.active .r-cup { border-color: #f2c418; box-shadow: inset 0 0 0 1px #f2c418; }
.m-screen[data-tab="race"].tour .r-tier.picked .r-tier-head b { color: var(--accent); }
.r-opp.done { opacity: 0.55; }
.r-opp.done .r-round { color: #45c46a; }
.r-opp.next { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), 0 0 12px rgba(255,122,26,0.35); }
.r-opp.next .r-round { color: var(--accent); border-color: var(--accent); }
.r-forfeit[hidden] { display: none; }
.slip-tour { margin: 6px 0 2px; padding: 6px 8px; border-radius: 6px; font: 800 12px/1.3 var(--font); letter-spacing: 0.04em; text-align: center; }
.slip-tour.next { background: rgba(255,122,26,0.16); color: #a8470a; }
.slip-tour.won { background: #f2c418; color: #2a2000; }
.slip-wear { margin: 4px 0 0; padding: 4px 8px; border-radius: 6px; font: 800 11px/1.3 var(--font); text-align: center; }
.slip-wear.bad { background: #c4402a; color: #fff; }
.slip-wear.warn { background: rgba(255,176,32,0.22); color: #7a4a00; }
.slip-tour.out { background: rgba(196,64,40,0.14); color: #a3301b; }

/* Near-square screens (unfolded foldables). */
@media (max-aspect-ratio: 3/2) {
  .r-tier { grid-template-columns: 72px repeat(3, 1fr); }
}

/* In the menu, the race-only buttons hide. */
body.in-menu #btn-reset, body.in-menu #btn-menu { display: none; }

/* Back to the menu, beside restart (positioned by main.js). */
#btn-menu {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}
body:not(.ready) #btn-menu, body.rotate #btn-menu { display: none; }

#graphics-notice {
  position: fixed;
  left: 50%; bottom: max(6px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 30; max-width: min(640px, calc(100vw - 24px));
  width: max-content; padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 6px;
  background: rgba(16,18,23,0.92); color: #d7d9dd;
  font: 11px/1.35 var(--font); text-align: center;
  pointer-events: none;
}
#graphics-notice[hidden], body.rotate #graphics-notice { display: none; }

/* ===========================================================================
   UI kit (2026-10-09, proposal: dev/ui-kit.html). One typeface (Saira), one
   button, one panel, one switch, one chip, one bar, one icon set (ui/icons.js).
   Button colours always mean the same thing:
     orange (default)  the main action: Race, Buy, Enter
     .go     green     fix / fit / repair
     .nos    blue      nitrous
     .steel  graphite  secondary: Replay, Menu, Remove, steppers
     .danger red       Sell, Forfeit
     .gold   gold      prizes, cups
   Flat (Evan, 2026-10-09: the reflection and glint looked too bubbly; they
   look like the switch's lit option). States: hover brightens and rings,
   pressed darkens and dips 1px, disabled is flat grey. Sizes: .lg (the one main action), default, .sm (in rows/cards).
   =========================================================================== */
.btn {
  --c1: #ffb15a; --c2: #ff7a1a; --c3: #c94c06; --glow: rgba(255,140,40,0.35); --txt: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 14px; border-radius: 8px; border: 0;
  background: linear-gradient(180deg, var(--c1), var(--c2) 50%, var(--c3));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 0 10px var(--glow), 0 2px 5px rgba(0,0,0,0.35);
  color: var(--txt); font: italic 800 12px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4); white-space: nowrap; cursor: pointer;
  transition: filter 0.12s, box-shadow 0.12s, transform 0.06s;
}
.btn .i { width: 14px; height: 14px; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4)); }
.btn small { font: 600 10px/1 var(--font); letter-spacing: 0.02em; text-transform: none; font-style: normal; opacity: 0.92; }
.btn.sm { height: 22px; padding: 0 8px; border-radius: 6px; font-size: 10px; gap: 4px; letter-spacing: 0.06em; }
.btn.sm .i { width: 11px; height: 11px; }
.btn.sm small { font-size: 9px; }
.btn.lg { height: 38px; padding: 0 22px; border-radius: 9px; font-size: 15px; letter-spacing: 0.1em; }
.btn.lg .i { width: 17px; height: 17px; }
.btn.block { display: flex; width: 100%; }
.btn.go     { --c1: #8ff07d; --c2: #3cc24a; --c3: #1d8a2c; --glow: rgba(80,220,90,0.3); }
.btn.nos    { --c1: #8fd3ff; --c2: #2f8fff; --c3: #1555c8; --glow: rgba(60,150,255,0.35); }
.btn.danger { --c1: #ff8a7a; --c2: #e53b2c; --c3: #a8180f; --glow: rgba(255,70,50,0.3); }
.btn.steel  { --c1: #b9bdc6; --c2: #6e737f; --c3: #42464f; --glow: rgba(0,0,0,0); }
.btn.gold   { --c1: #fff08a; --c2: #f2c418; --c3: #b88a00; --glow: rgba(255,210,40,0.35); --txt: #3a2800; text-shadow: 0 1px 0 rgba(255,255,255,0.45); }
@media (hover: hover) {
  .btn:hover:not(:disabled) { filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 0 0 1px rgba(255,255,255,0.18), 0 0 14px var(--glow), 0 2px 5px rgba(0,0,0,0.35); }
}
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.88);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); }
.btn:disabled {
  --c1: #4c4f58; --c2: #3c3f47; --c3: #30323a; --glow: rgba(0,0,0,0); --txt: #8d919c;
  cursor: default; text-shadow: none; filter: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn[hidden] { display: none; }

/* Switches: a recessed track, the chosen option lit in orange. */
.seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 10px; background: rgba(0,0,0,0.45);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.06); align-self: center; }
.seg > button { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent;
  color: var(--muted); font: italic 800 11px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.seg > button[hidden] { display: none; }
@media (hover: hover) { .seg > button:hover:not(.on):not(:disabled) { color: var(--text); background: rgba(255,255,255,0.05); } }
.seg > button.on { color: #fff; background: linear-gradient(180deg, #ffb15a, #ff7a1a 50%, #c94c06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 0 10px rgba(255,140,40,0.35); text-shadow: 0 1px 0 rgba(0,0,0,0.4); }
.seg > button .i { width: 13px; height: 13px; }

/* Icons */
.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.15em; }

/* Panels: smoked glass with a lit top edge. */
.m-panel { background: linear-gradient(180deg, rgba(34,36,45,0.9), rgba(16,17,23,0.9)); border: 1px solid rgba(255,255,255,0.07); border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 20px rgba(0,0,0,0.35); }
.m-label { font: 600 9px/1 var(--font); letter-spacing: 0.16em; color: var(--muted); }
.m-head { display: flex; align-items: center; gap: 6px; font: italic 800 10px/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: #d9d7cf; }
.m-head::before { content: ''; width: 3px; height: 10px; background: var(--accent); transform: skewX(-18deg); }

/* Chips: flat labels (never pressable). */
.m-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06);
  font: 700 9px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: #d9d7cf; }
.m-chip .i { width: 10px; height: 10px; }
.m-chip.warn { color: var(--warn); border-color: rgba(255,176,32,0.45); background: rgba(40,28,6,0.85); }
.m-chip.lock { color: var(--rep); border-color: rgba(242,196,24,0.35); background: rgba(20,18,8,0.85); }
.m-chip.cash { color: var(--cash); border-color: rgba(111,220,140,0.35); background: rgba(8,20,12,0.85); }

/* Bars: a recessed track with a lit fill. */
.m-bar { display: block; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.08); box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); overflow: hidden; }
.m-bar > i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(180deg, #ffb15a, #ff7a1a); box-shadow: 0 0 6px rgba(255,140,40,0.45); }
.m-bar.ok > i { background: linear-gradient(180deg, #8ff07d, #3cc24a); box-shadow: 0 0 6px rgba(80,220,90,0.35); }
.m-bar.warn > i { background: linear-gradient(180deg, #ffd56a, #ffa21a); }
.m-bar.nos > i { background: linear-gradient(180deg, #8fd3ff, #2f8fff); box-shadow: 0 0 6px rgba(60,150,255,0.45); }

/* --- the kit applied ------------------------------------------------------- */
/* Tabs: the current screen in orange, the others graphite. */
.m-tabs { gap: 8px; }
.m-tabs .btn { height: 34px; }
.m-tabs .btn:not(.on) { --c1: #b9bdc6; --c2: #6e737f; --c3: #42464f; --glow: rgba(0,0,0,0); }
.m-tabs .btn .i { width: 15px; height: 15px; }

.m-wallet small { display: inline-flex; color: var(--muted); }
.m-wallet small .i { width: 13px; height: 13px; }
.m-wallet b { font: 800 14px/1.15 var(--font); }

/* Garage */
.g-name { font: italic 900 19px/1 var(--font); }
.g-body { font: 600 9px/1.2 var(--font); letter-spacing: 0.16em; }
.g-stat span { font: 600 9px/1.4 var(--font); letter-spacing: 0.14em; }
.g-stat b { font: 700 11px/1.4 var(--font); }
.g-stat .m-bar { grid-column: 1 / -1; margin: 1px 0 2px; }
.g-price { font: 800 13px/1.2 var(--font); }
.g-srow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 6px; padding: 3px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.g-srow:first-child { border-top: 0; padding-top: 0; }
.g-srow > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 4px; min-width: 0; }
.g-srow span { font: 600 9px/1.3 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.g-srow b { font: 700 11px/1.3 var(--font); font-variant-numeric: tabular-nums; }
.g-srow.bad b { color: var(--warn); }
.g-srow .m-bar { grid-column: 1 / -1; }
.g-srow .btn { min-width: 44px; margin: 0 0 2px; }
.g-srow .ok { display: inline-flex; justify-content: center; min-width: 44px; color: var(--cash); }
.g-srow .ok .i { width: 13px; height: 13px; }
.g-car { border-radius: 10px; background: linear-gradient(180deg, #1d1f27, #121318); border-color: rgba(255,255,255,0.08); }
.g-car.on { box-shadow: inset 0 0 0 1px var(--accent), 0 0 12px rgba(255,122,26,0.3); }
.g-strip { background: linear-gradient(0deg, rgba(0,0,0,0.75), rgba(0,0,0,0.2)); }
.g-car b { font: italic 900 12px/1.1 var(--font); }
.g-opts { border-radius: 11px; }
.g-opt > .m-head { margin-bottom: 7px; }
.g-hsb > span, .g-stance-val { font: 600 9px/1 var(--font); letter-spacing: 0.14em; }
.g-rim { border-radius: 8px; }

/* Dev: garage shadow handles (menu.js editShadows). */
.g-shadow-edit[hidden] { display: none; }
.g-shadow-edit [data-h] { position: absolute; z-index: 3; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; cursor: grab; touch-action: none;
  border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 10px rgba(0,0,0,0.6); }
.g-shadow-edit [data-h^="c"] { background: rgba(60,150,255,0.85); }   /* the body shadow's corners */
.g-shadow-edit [data-h^="w"] { background: rgba(255,122,26,0.9); }    /* under each visible tyre */
.g-shadow-bar { position: absolute; z-index: 3; left: 50%; top: calc(var(--wallet-h, 34px) + 14px); /* below the Cash/Rep row and the settings gear, which covered Save */ transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.g-shadow-car { font: 600 11px/1 var(--font); color: var(--muted); white-space: nowrap; }

/* Parts */
.p-car { font: italic 900 21px/1 var(--font); }
.p-sum .m-chip { font: 700 10px/1.2 var(--font); letter-spacing: 0.02em; }
.p-sections.seg { display: flex; overflow-x: auto; scrollbar-width: none; justify-self: start; max-width: 100%; }
.p-sections.seg > button { flex: none; height: 24px; padding: 0 10px; font-size: 10px; }
.p-sections small { color: var(--cash); font-size: 10px; font-style: normal; }
.p-sections button.on small { color: #b4ffbf; text-shadow: 0 1px 0 rgba(0,60,20,0.6); }
.p-card { gap: 5px; padding: 9px 10px 7px; }
.p-card h3 { font: italic 800 14px/1.15 var(--font); }
.p-card p { font: 400 11px/1.35 var(--font); }
.p-status { font: 600 11px/1.3 var(--font); }
.p-price { font-weight: 800; font-size: 13px; color: var(--cash); }
.p-effect { font: 700 11px/1.3 var(--font); }
.p-btns { gap: 6px; }
.p-btns .btn { flex: 1; min-width: 0; }
.p-btns .btn:disabled { white-space: normal; text-transform: none; letter-spacing: 0.01em; font-style: normal; font-weight: 600; line-height: 1.1; }
.p-card.fitted { border-color: rgba(255,140,60,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(255,140,60,0.25), 0 8px 20px rgba(0,0,0,0.35); }
.p-bottle i { height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--nos) var(--w), rgba(255,255,255,0.12) var(--w)); }
/* Part cards (2026-10-12, Nitto-style): a swipeable row of tall cards, the
   part's art big on top, its name, what it does, its status and one button
   below. The description waits for the detail view (tap a card), so nothing is
   ever cut off. */
.p-card { flex: 0 0 auto; width: clamp(150px, calc((100% - 24px) / 3.5), 240px); max-height: 100%; scroll-snap-align: start; cursor: pointer; container-type: inline-size; }
/* Square art, shrinking only when the screen is too short for it (landscape phones). */
.p-art { flex: 0 1 100cqw; min-height: 48px; border-radius: 8px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.07), rgba(0,0,0,0) 70%), rgba(0,0,0,0.28);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05); }
.p-art { position: relative; }
.p-art img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.45)); }
.p-art .i { width: 38%; height: 38%; max-width: 64px; max-height: 64px; opacity: 0.16; }
.p-title { flex: none; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.p-card .p-title h3 { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-cards .p-card > p { display: none; }
/* Name, effect and status take fixed room, so every card's art is the same size. */
/* Names start on one line across the row; the effect sits on its own fixed line below two lines of name. */
.p-cards .p-title { height: calc(2 * 1.15em * 13 / 11 + 16px); font-size: 11px; justify-content: flex-start; }
.p-cards .p-title .p-effect { margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-cards .p-pre, .p-cards .p-suf { display: none; }
.p-name { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.p-name h3 { flex: 1; min-width: 0; }
.p-cost { flex: none; display: inline-flex; align-items: center; gap: 3px; padding-top: 1px; font: 800 12px/1.15 var(--font); font-variant-numeric: tabular-nums; color: var(--cash); }
.p-cost .i { width: 13px; height: 13px; }
.p-card.gated .p-cost, .p-card.needs .p-cost { color: var(--muted); }
.p-detail-card .p-cost { font-size: 15px; }
.p-detail-card .p-cost .i { width: 16px; height: 16px; }
.p-detail-card .p-name { padding-right: 30px; }
.p-cards .p-status { flex: none; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.6em; }
.p-cards .p-status > * { display: inline; }
.p-cards .p-status > * + *::before { content: ' · '; }
.p-cards .p-status > .p-path, .p-cards .p-status > .p-repl { display: none; }
.p-cards .p-btns { flex: none; min-height: 24px; }
.p-cards .p-btns:empty { display: block; }
/* Art stays in colour unless the part can never go on this car; a Rep lock only dims it. */
.p-card.blocked .p-art { filter: grayscale(1) brightness(0.7); }
.p-card.gated .p-art { filter: brightness(0.7); }
.p-x { display: none; }
/* The detail: the card lifted over the row, art on the left, everything else beside it. */
.p-detail { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 8px; background: rgba(6,7,10,0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.p-detail[hidden] { display: none; }
.p-detail-card { position: relative; width: min(560px, 100%); max-height: 100%; overflow-y: auto; display: grid; grid-template-columns: minmax(120px, 40%) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr; gap: 6px 14px; padding: 12px; min-height: min(220px, 100%); opacity: 1 !important; touch-action: pan-y; }
.p-detail-card > .p-art { grid-row: 1 / -1; min-height: 0; height: 100%; }
.p-detail-card > .p-art .i { opacity: 0.2; }
.p-detail-card h3 { margin: 0; font: italic 900 18px/1.1 var(--font); }
.p-detail-card > p { margin: 0; font: 400 12px/1.4 var(--font); color: var(--muted); }
.p-detail-card > .p-title { grid-row: 1; } .p-detail-card > p { grid-row: 2; } .p-detail-card > .p-status { grid-row: 3; }
.p-detail-card .p-btns { grid-row: 4; align-self: end; }
.p-detail-card .p-x { display: grid; place-items: center; position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--text); }
.p-detail-card .p-x .i { width: 14px; height: 14px; }
.p-status:empty { display: none; }
.p-btns { margin-top: auto; }
.p-effect:empty { display: none; }

/* Race tab */
.r-head h2 { font: italic 900 22px/1 var(--font); letter-spacing: 0.02em; }
.r-you { font: 500 12px/1.2 var(--font); }
.r-tier-head b { font: italic 800 14px/1.1 var(--font); letter-spacing: 0.06em; }
.r-tier-head small { display: inline-flex; align-items: center; gap: 3px; font: 600 10px/1.25 var(--font); }
.r-tier-head small .i { width: 11px; height: 11px; color: var(--rep); }
.r-opp { border-radius: 10px; }
.r-opp b { font: italic 900 22px/1 var(--font); }
.r-meta { font: italic 700 11px/1 var(--font); }
.r-foot { align-items: flex-start; }
.r-foot .r-go { flex: 1; }
.r-dial { gap: 5px; }
.r-dial .btn { min-width: 40px; height: 34px; padding: 0 6px; font-style: normal; font-size: 12px; letter-spacing: 0.02em; }
.r-dial .r-dial-avg { font-size: 10px; letter-spacing: 0.04em; text-transform: none; }
.r-dial-val { min-width: 64px; text-align: center; font: italic 800 20px/1 var(--font); font-variant-numeric: tabular-nums; }
.r-trophy .i { width: 22px; height: 22px; }
.r-cup-cash { font: italic 900 15px/1 var(--font); }
.r-cup-won { font: 600 9px/1.2 var(--font); }
.m-screen[data-tab="race"].tour .r-cup { border-radius: 10px; background: linear-gradient(180deg, rgba(60,48,12,0.75), rgba(28,22,6,0.75)); box-shadow: inset 0 1px 0 rgba(255,240,150,0.15); }

/* Timing slip: same typeface; numbers tabular. */
.slip-card { font: 500 13px/1.25 var(--font); font-variant-numeric: tabular-nums; border-radius: 10px; }
.slip-head { font: italic 900 17px/1.2 var(--font); }
.slip-card tr.who td { font: italic 800 12px/1.1 var(--font); }
.slip-tour, .slip-wear { font-family: var(--font); display: flex; align-items: center; justify-content: center; gap: 6px; }
.slip-tour .i, .slip-wear .i { width: 14px; height: 14px; }
.slip-buttons { gap: 10px; }
.slip-buttons .btn { flex: 1; }

/* Race view buttons: restart and menu. */
#btn-reset, #btn-menu { --c1: #b9bdc6; --c2: #6e737f; --c3: #42464f; padding: 0; margin: 0; }
#btn-reset .i, #btn-menu .i { width: 16px; height: 16px; }

#toast { background: linear-gradient(180deg, rgba(34,36,45,0.96), rgba(16,17,23,0.96)); border-radius: 10px; font: 600 13px/1.2 var(--font);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 20px rgba(0,0,0,0.4); }

/* --- Garage (2026-10-09, Evan) ---------------------------------------------------
   The workshop fills the whole screen (behind the island too) and the car sits
   in a fixed spot, weighted left (menu.js carRect), so it never moves. Three
   buttons top-left open drawers that slide in from the right (Car info, Select
   car, Customise); the open one's button is a green Done; another button swaps
   drawers. Cash/Rep: a chip top-right. */
.m-screen[data-tab="garage"] { position: relative; min-height: 0; }
.g-view { position: fixed; inset: 0; z-index: 0; }
.g-canvas, .s-canvas { touch-action: none; }
.s-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Swipe rows of cars (garage, showroom): arrows at the edges, level with the car,
   and dots under it; positions come from the row (menu.js paintRow). */
.row-arrow { position: absolute; z-index: 1; top: var(--row-y, 50%); width: 30px; height: 46px; margin-top: -23px; padding: 0; border: 0; border-radius: 10px;
  display: grid; place-items: center; color: #fff; background: rgba(10,11,15,0.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.row-arrow[hidden] { display: none; }
.row-arrow .i { width: 18px; height: 18px; stroke-width: 2.6; }
.row-arrow.l { left: calc(var(--row-l, 0px) + var(--il, var(--sal)) + 6px); }
.row-arrow.r { right: calc(var(--row-r, 0px) + var(--ir, var(--sar)) + 6px); }
.g-view .row-arrow.l { top: calc(var(--row-y, 50%) + 50px); } /* clear of the garage's buttons */
.row-dots { position: absolute; z-index: 1; left: var(--row-cx, 50%); bottom: calc(var(--row-b, 0px) + 2px); transform: translateX(-50%); display: flex; gap: 6px; pointer-events: none; }
.row-dots:empty { display: none; }
/* Garage: Select car (or Selected) under the car on show, above the dots. */
.g-pick { position: absolute; z-index: 1; left: var(--row-cx, 50%); bottom: calc(var(--row-b, 0px) + 12px); transform: translateX(-50%); }
.g-pick:empty { display: none; }
.g-stance-row[hidden], .g-stance-lock[hidden], .g-bov[hidden], .g-bovs[hidden], .g-bov-lock[hidden] { display: none; }
.g-bov-lock { margin: 2px 0 0; align-self: flex-start; }
.g-rimsizes { flex-wrap: nowrap; }
.g-rimsizes > button { padding: 0 9px; }
.g-bovs { flex-wrap: wrap; }
.g-bovs > button { padding: 0 9px; }
.g-stance-lock { margin: 2px 0 0; align-self: flex-start; }
.g-pick .btn { margin: 0; height: 26px; padding: 0 14px; white-space: nowrap; }
/* Already selected: the same button, faded to the Cash/Rep bar's dark grey-blue, not pressable. */
.g-pick .btn.g-picked:disabled { --c1: #2c2f3a; --c2: #1f2129; --c3: #15161c; --txt: #9aa3b5; opacity: 0.92;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.06); }
.row-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.row-dots i.on { background: var(--accent); box-shadow: 0 0 6px rgba(255,122,26,0.7); }
/* Car showroom: the car area on the left, the car's panel on the right (like Car info). */
.m-screen[data-tab="showroom"] { position: relative; min-height: 0; }
.m-screen[data-tab="showroom"] > .m-wallet { position: absolute; z-index: 2; top: 0; right: 22px; flex-wrap: nowrap;
  width: calc(34 * var(--mvw, 1vw) - 22px); min-width: 218px; max-width: 358px; background: linear-gradient(180deg, rgba(34,36,45,0.75), rgba(16,17,23,0.75)); }
/* Phones: a slim panel down the left (where the garage's buttons are), the cars across the rest. */
.s-panel { position: fixed; z-index: 3; left: calc(var(--il, var(--sal)) + 8px); width: 196px;
  top: calc(var(--sat) + 8px); max-height: calc(100 * var(--mvh, 1vh) - var(--sat) - 8px - var(--menu-pb) - 34px - 10px);
  display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; overflow-y: auto; scrollbar-width: none;
  background: linear-gradient(180deg, #23252d, #121318); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.s-panel .g-title .g-name { font-size: 16px; }
.s-panel .g-stat { margin-bottom: 0; }
.s-panel .g-stat span { font-size: 8px; line-height: 1.2; }
.s-panel .g-stat b { font-size: 10px; line-height: 1.2; }
.s-panel .m-bar { height: 3px; }
.s-price { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.s-price .p-cost { font-size: 16px; }
.s-price .p-cost .i { width: 16px; height: 16px; }
.s-rep { display: inline-flex; align-items: center; gap: 4px; font: 700 12px/1 var(--font); color: var(--rep); }
.s-rep .i { width: 13px; height: 13px; }
.s-rep.lock { color: #e0b45c; }
.s-have { display: flex; align-items: center; gap: 5px; font: 600 11px/1.2 var(--font); color: var(--muted); }
.s-have .i { width: 13px; height: 13px; }
.s-deal { display: flex; flex-direction: column; gap: 6px; }
.s-soon { margin: 2px 0; font: 500 11px/1.35 var(--font); color: var(--muted); }
.s-deal .btn { margin: 0; }
.m-tabs { position: relative; z-index: 2; }
.g-menu { position: fixed; z-index: 2; left: calc(var(--il, var(--sal)) + 8px); top: calc(var(--sat) + 40px); display: flex; flex-direction: column; gap: 6px; width: 118px; }
/* Landscape iPhones: lined up with the island's outer edge (11 px in) and low
   enough to clear the screen's curve there (55 px radius: 22 px down at 11 px in). */
body[data-island] .g-menu { left: calc(11px / var(--k, 1)); top: calc(var(--sat) + 26px); gap: 4px; } /* ends ~10 px above the island, even stretched (top at ~122 px) */
.g-menu .btn { justify-content: flex-start; margin: 0; }
.m-screen[data-tab="garage"] > .m-wallet, .m-screen[data-tab="parts"] > .m-wallet { position: absolute; z-index: 2; top: 0; right: 22px; flex-wrap: nowrap;
  width: calc(34 * var(--mvw, 1vw) - 22px); min-width: 218px; max-width: 358px; } /* left edge = the drawers'; the right end pulled in clear of the screen's curved corner */ /* the drawers' width, so they line up (rep levels + a progress bar go here later) */
.g-drawer { position: fixed; z-index: 3; right: calc(var(--ir, var(--sar)) + 8px); width: calc(34 * var(--mvw, 1vw)); min-width: 240px; max-width: 380px;
  top: calc(var(--sat) + 6px + 34px); max-height: calc(100 * var(--mvh, 1vh) - var(--sat) - 6px - 34px - var(--menu-pb) - 34px - 10px); /* above the tabs; as tall as its content */
  display: flex; flex-direction: column; gap: 7px; padding: 9px 10px; overflow-y: auto; scrollbar-width: none;
  background: linear-gradient(180deg, rgba(35,37,45,0.75), rgba(18,19,24,0.75));
  transform: translateX(calc(100% + var(--ir, var(--sar)) + 20px)); opacity: 0; visibility: hidden;
  transition: transform 0.22s ease, opacity 0.22s ease, visibility 0s linear 0.22s; }
.g-drawer.open { transform: none; opacity: 1; visibility: visible; transition: transform 0.22s ease, opacity 0.22s ease, visibility 0s; }
.g-title .g-body { margin: 2px 0 0; }
.g-stats .g-stat { margin-bottom: 2px; }
.g-stats .g-tags { margin-top: 5px; }
.g-service > .m-head { margin-bottom: 4px; }
.g-srow { padding: 2px 0; }
.g-deal:empty, .g-buy-bar:empty { display: none; }
.g-deal .btn, .g-buy-bar .btn { margin: 0; }
.g-drawer[data-pane="cars"] .g-cars { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.g-drawer[data-pane="cars"] .g-car { min-height: 56px; }
.g-buy-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-drawer[data-pane="custom"] .g-opts { display: flex; flex-direction: column; gap: 10px; }
.g-drawer[data-pane="custom"] .g-opt { padding: 0; border: 0; }
.g-drawer[data-pane="custom"] .g-hsb { grid-template-columns: 70px 1fr; }
/* Garage engine start/stop (ui/garageEngine.js, Evan 2026-10-19): a rendered
   push-button (assets-src/hud/startstop, tools/blender/start_button.py) at the
   right of the garage view, centred; it never moves: the pressed-in, LED-lit
   render swaps in. Running, the boost gauge, tacho and throttle pedal show at
   the bottom right, above Race track. Foldables: the button moves to the bottom
   half, just above where the pedal shows. Under an open panel (the panels sit
   over them). The next-car arrow drops below it. */
.g-start { position: absolute; z-index: 1; top: 50%; right: calc(var(--ir, var(--sar)) + 10px); width: 66px; height: 66px; margin-top: -33px;
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55)); }
.g-start img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.g-start img.on, .g-start.on img.off { visibility: hidden; }
.g-start.on img.on { visibility: visible; }
.g-start:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.g-view .row-arrow.r { top: calc(50% + 64px); }
.g-engine { position: fixed; z-index: 2; right: calc(var(--ir, var(--sar)) + 8px); bottom: calc(var(--menu-pb) + 34px + 8px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.g-engine > * { pointer-events: auto; }
.g-dash { width: 216px; height: 95px; touch-action: none; } /* garageEngine.js DASH x SIZE */
.g-dash[hidden] { display: none; }

/* Garage on near-square screens (unfolded foldables, Evan 2026-10-09): the
   garage view is the top half; the bottom half holds the settings gear,
   Cash/Rep, the three buttons and the open panel. Parts and Race track are
   unchanged (full screen). */
@media (max-aspect-ratio: 3/2) and (min-height: 560px) { /* short ones (an iPhone Duo's cover screen on its side) use the phone garage */
  .g-view { bottom: 50%; }
  .g-start { position: fixed; top: auto; margin-top: 0; right: calc(var(--ir, var(--sar)) + 6px); bottom: calc(var(--menu-pb) + 34px + 8px + 95px + 10px); }
  .g-view .row-arrow.r { top: var(--row-y, 50%); }
  .s-panel { left: calc(var(--il, var(--sal)) + 8px); right: calc(var(--ir, var(--sar)) + 8px); width: auto; min-width: 0; max-width: none; top: calc(50% + 44px); max-height: calc(50% - 44px - var(--sab) - 4px - 34px - 12px); }
  .m-screen[data-tab="showroom"] > .m-wallet { position: fixed; top: calc(50% + 8px); right: calc(var(--ir, var(--sar)) + 8px); width: auto; min-width: 0; }
  .g-menu { position: fixed; left: calc(var(--il, var(--sal)) + 8px); top: calc(50% + 40px); width: 132px; }
  .m-screen[data-tab="garage"] > .m-wallet { position: fixed; top: calc(50% + 8px); right: calc(var(--ir, var(--sar)) + 8px); width: auto; min-width: 0; }
  .g-drawer { left: calc(var(--il, var(--sal)) + 8px + 132px + 10px); right: calc(var(--ir, var(--sar)) + 8px); width: auto; min-width: 0; max-width: none;
    top: calc(50% + 44px); max-height: calc(50% - 44px - var(--sab) - 4px - 34px - 12px);
    transform: none; }
  .g-drawer[data-pane="cars"] .g-cars { flex-direction: row; }
  .g-drawer[data-pane="cars"] .g-car { min-height: 90px; }
  .g-drawer[data-pane="custom"] .g-opts { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0 14px; }
}

/* iPhone pass (Evan, 2026-10-09, from a 15 Pro Max screenshot). */
.m-screen[data-tab="garage"] > .m-wallet, .m-screen[data-tab="parts"] > .m-wallet { background: linear-gradient(180deg, rgba(34,36,45,0.75), rgba(16,17,23,0.75)); }
/* Parts: the same Cash/Rep chip as the garage (same place on both, so it doesn't jump); the header keeps clear of it. */
.p-head { padding-right: calc(34 * var(--mvw, 1vw) + 8px); }
/* Tabs centred on the screen (the menu's side margins differ when only one side has the island). */
.m-tabs { margin-left: max(0px, calc(var(--ir, 0px) - var(--il, 0px))); margin-right: max(0px, calc(var(--il, 0px) - var(--ir, 0px))); }
/* Car info: the drive / boost chips beside the name; everything a size smaller so Fix all and Refill fit. */
.g-title { display: flex; align-items: center; gap: 8px; }
.g-title .g-name { font-size: 17px; }
.g-title .g-tags { display: flex; gap: 4px; margin: 0; }
.g-drawer[data-pane="info"] { gap: 5px; padding: 8px 10px; }
.g-drawer[data-pane="info"] .g-stat { margin-bottom: 1px; }
.g-drawer[data-pane="info"] .g-stat span, .g-drawer[data-pane="info"] .g-srow span { font-size: 8px; line-height: 1.2; }
.g-drawer[data-pane="info"] .g-stat b, .g-drawer[data-pane="info"] .g-srow b { font-size: 10px; line-height: 1.2; }
.g-drawer[data-pane="info"] .m-bar { height: 3px; }
.g-drawer[data-pane="info"] .g-service > .m-head { margin-bottom: 2px; }
.g-drawer[data-pane="info"] .g-srow { padding: 1px 0; gap: 1px 6px; }
.g-drawer[data-pane="info"] .g-srow .btn { height: 20px; }
.g-drawer[data-pane="info"] .g-service .btn.block { margin-top: 3px; height: 22px; }

/* Scrolling lists take finger drags (main.js SCROLLERS); pans only, so no zoom. */
.g-drawer, .slip-card, .t-list { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.p-cards, .p-sections { touch-action: pan-x; -webkit-overflow-scrolling: touch; }

/* Landscape phones: slightly tighter cards in the swipe row. */
@media (min-aspect-ratio: 3/2) {
  /* Cards are at least half the list's height (four by two fill it); a card with
     more to say makes its row taller and the list scrolls, rather than cutting text off. */
  .p-card { padding: 7px 8px 7px; gap: 4px; }
  .p-card h3 { font-size: 13px; }
  .p-warn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Slip on landscape phones: the times on the left, earnings and the buttons on
   the right, so everything fits without scrolling (Evan, 2026-10-09). */
.slip-side { display: flex; flex-direction: column; }
@media (min-aspect-ratio: 3/2) {
  .slip-card { width: min(640px, 100%); }
  .slip-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; align-items: stretch; }
  .slip-side { min-width: 0; }
  .slip-side > :first-child { margin-top: 0; }
  .slip-side .slip-pay:first-child { border-top: 0; padding-top: 0; }
  .slip-side .slip-buttons { margin-top: auto; padding-top: 8px; }
  .slip-buttons .btn { padding-left: 6px; padding-right: 6px; white-space: nowrap; }
}
/* The gear is an SVG (the ⚙ glyph rendered as an emoji on some iPhone screens). */
#btn-dev { display: flex; align-items: center; justify-content: center; }
#btn-dev .i { width: 16px; height: 16px; }

/* Race view: restart, menu and the settings gear look like the timer box beside
   them (same height, panel colour and corners; Evan, 2026-10-09). */
#btn-reset, #btn-menu {
  background: rgba(10,10,14,0.75) !important; border: 0 !important; border-radius: 6px !important;
  box-shadow: none !important; color: #f2f0ea !important; padding: 0 !important;
}
#btn-reset .i, #btn-menu .i { width: 16px; height: 16px; filter: none; }

/* Settings: the garage only, a square just left of Cash/Rep, its height, colour
   and corners (placed by main.js placeSettings); the menu opens below it. */
body:not(.in-menu) #dev, body.in-menu:not(.tab-garage) #dev { display: none; }
#dev { flex-direction: column; align-items: flex-end; z-index: 4; transform: scale(var(--k, 1)); transform-origin: 100% 0; } /* the UI scale, like the Cash/Rep chip beside it */
#dev #btn-dev { width: var(--wallet-h, 30px); height: var(--wallet-h, 30px); padding: 0 !important;
  border: 1px solid rgba(255,255,255,0.07); border-radius: var(--wallet-r, 8px);
  background: linear-gradient(180deg, rgba(34,36,45,0.75), rgba(16,17,23,0.75));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 20px rgba(0,0,0,0.35); color: var(--muted); }
#dev #btn-dev .i { width: 13px; height: 13px; filter: none; } /* like the Cash/Rep icons */

/* Race tab on narrow near-square screens (a Galaxy Z Fold's inner screen held
   upright, ~690-750 px wide; 2026-10-10): the tier's name sits above its row
   instead of in a column, the cards share the width, and the race button gets
   its own line under the dial-in. */
@media (max-aspect-ratio: 3/2) and (max-width: 800px) {
  .r-tier, .m-screen[data-tab="race"].tour .r-tier { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); row-gap: 4px; }
  .m-screen[data-tab="race"].tour .r-tier { grid-template-columns: repeat(3, minmax(0, 1fr)) 72px; }
  .r-tier-head { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 10px; padding-left: 2px; }
  .r-opp { min-width: 0; }
  .r-foot { flex-wrap: wrap; }
  .r-foot .r-go { flex: 1 1 100%; }
}
/* Narrower still (an iPhone Duo's cover screen held upright, 466 px): smaller names and records so they don't run together. */
@media (max-aspect-ratio: 3/2) and (max-width: 520px) {
  .r-opp b { font-size: 17px; }
  .r-meta { font-size: 9px; }
}

/* Tuning (6.4, Evan 2026-10-10): the garage's fourth panel, wider than the
   others and full height. Sliders on the left (locked ones name their part, a
   tap into the shop), the predicted times and the gear chart on the right. */
.g-drawer[data-pane="tune"] { width: calc(52 * var(--mvw, 1vw)); max-width: 520px; padding: 0; background: linear-gradient(180deg, rgba(30,32,40,0.95), rgba(16,17,22,0.95));
  height: calc(100 * var(--mvh, 1vh) - var(--sat) - 6px - 34px - var(--menu-pb) - 34px - 10px); }
.g-tune { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); flex: 1; min-height: 0; }
.t-main { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(255,255,255,0.06); }
.t-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 8px 10px 2px; }
.t-tabs > button { height: 24px; font-size: 10px; }
.t-list { flex: 1; overflow-y: auto; min-height: 0; padding: 2px 10px 6px; scrollbar-width: none; }
.t-row { padding: 4px 0 2px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.t-row:last-child { border-bottom: 0; }
.t-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 700 10px/1.3 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.t-val { font: italic 800 12px/1.3 var(--font); letter-spacing: 0.02em; text-transform: none; color: var(--text); font-variant-numeric: tabular-nums; }
.t-row.warn .t-val { color: var(--warn); }
.t-row.warn .t-val::after { content: ' · over-revs'; font-weight: 600; font-style: normal; font-size: 10px; }
.t-row.locked { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0;
  font: 700 10px/1.3 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.t-row.locked .btn { flex: none; height: 22px; text-transform: none; letter-spacing: 0.02em; }
.t-row.locked .btn .i { width: 11px; height: 11px; }
.t-side { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 8px 10px; }
.t-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.t-stat span { display: block; font: 700 9px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.t-stat b { display: block; font: italic 800 16px/1.1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-stat small { display: block; min-height: 12px; font: 700 10px/1.2 var(--font); font-variant-numeric: tabular-nums; }
.t-chart { flex: 1; min-height: 60px; width: 100%; border-radius: 6px; background: rgba(0,0,0,0.25); }
@media (max-aspect-ratio: 3/2) and (min-height: 560px) { .g-drawer[data-pane="tune"] { width: auto; max-width: none; height: auto; } }
.t-slider .m-slider-track { background: linear-gradient(90deg, rgba(255,138,42,0.55) var(--fill, 0%), rgba(255,255,255,0.1) var(--fill, 0%)); }