:root {
  --bg: #0a0b0d;
  --panel: #131519;
  --panel-2: #1a1d23;
  --line: rgba(255, 255, 255, 0.08);
  --text: #eef1f5;
  --muted: #8b93a1;
  --accent: #ff5a1f;
  --accent-2: #ff8a3d;
  --red: #ff2e43;
  --green: #35d18a;
  --amber: #f5b33d;
  --radius: 18px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255, 90, 31, 0.08), transparent 60%),
    var(--bg);
  -webkit-tap-highlight-color: transparent;
}

/* The Halloween car: a haunted night behind the page (img/halloween-bg.jpg),
   darkened so the gauge and text stay easy to read, and showing a little
   through the panels. */
body.haunted { background: transparent; }
body.haunted::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 11, 13, 0.25), rgba(10, 11, 13, 0.6) 80%),
    url('../img/halloween-bg.jpg') center / cover no-repeat;
}
body.haunted .gauge-panel,
body.haunted .control-panel { background: rgba(19, 21, 25, 0.82); }

button {
  font: inherit;
  color: inherit;
  /* No text selection or iPhone Copy / Look Up bubble when a button is held. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
}

/* The brand is the page's h1; keep it looking like plain brand text. */
.brand-name { margin: 0; font: inherit; letter-spacing: inherit; }
.brand-pro { color: var(--green); }
.brand-mark { width: 30px; height: 30px; color: var(--text); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

.chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.chip[data-state="ok"] { color: var(--green); }
.chip[data-state="wait"] { color: var(--amber); }
.chip[data-state="bad"] { color: var(--red); }
.chip[data-help] { cursor: pointer; border-color: var(--red); }
.chip[data-help]::after { content: "?"; font-weight: 700; font-size: 12px; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; border: 1px solid currentColor; }

.help-card { text-align: left; }
.help-card h2 { padding-right: 40px; }
.help-card h3 { margin: 16px 0 4px; font-size: 16px; }
.help-card ol { margin: 0; padding-left: 22px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.help-card .pay-hint { margin-top: 16px; }

/* ---------- dashboard ---------- */

.dash {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px;
  padding: 16px 20px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}

.gauge-panel,
.control-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.gauge-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  /* Holding a pedal must not select the speed / rpm text around it on iPhone. */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

/* GPS drive: the dial takes all the room it has, the panel's width or the
   screen height left over after the top bar and the throttle bar (about
   160 px). The dial is 0.9 as tall as wide. */
.gauge {
  position: relative;
  width: 100%;
  max-width: calc((100vh - 160px) / 0.9);
}

#tach { width: 100%; height: auto; display: block; }

.tach-track { fill: none; stroke: var(--panel-2); stroke-width: 22; stroke-linecap: round; }
.tach-red { fill: none; stroke: rgba(255, 46, 67, 0.55); stroke-width: 22; }
.tach-value {
  fill: none;
  stroke: var(--accent);
  stroke-width: 22;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(255, 90, 31, 0.55));
  transition: stroke 0.15s;
}
.tach-value.shift { stroke: var(--red); filter: drop-shadow(0 0 14px rgba(255, 46, 67, 0.9)); }

.tick { stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; }
.tick.major { stroke: rgba(255, 255, 255, 0.8); stroke-width: 3; }
.tick.red { stroke: var(--red); }
.tick-label { fill: var(--muted); font-size: 21px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }

.g-speed {
  fill: var(--text);
  font-size: 108px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.g-unit { fill: var(--muted); font-size: 20px; text-anchor: middle; }
.g-gear-box { fill: var(--panel-2); stroke: var(--line); stroke-width: 1.5; }
.g-gear { fill: var(--text); font-size: 34px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.g-rpm { fill: var(--muted); font-size: 17px; text-anchor: middle; font-variant-numeric: tabular-nums; }

.bars { width: 100%; max-width: 470px; }

.bar { display: flex; align-items: center; gap: 12px; }
.bar-label { color: var(--muted); font-size: 14px; width: 70px; }
.bar-track { flex: 1; height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; }

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

.control-panel { display: flex; flex-direction: column; gap: 12px; }

.car-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 90, 31, 0.16), rgba(255, 90, 31, 0.02));
  border: 1px solid rgba(255, 90, 31, 0.3);
}
.car-name { font-size: 20px; font-weight: 700; line-height: 1.3; }
.car-tag { color: var(--muted); font-size: 14px; line-height: 1.4; }

/* ---------- car picker ---------- */

.car-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.car-picker button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 96px;
  padding: 10px 6px 8px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  touch-action: manipulation;
}
.pick-art { display: block; width: 100%; }
.pick-art img { display: none; width: 100%; height: auto; }
.pick-art.has-photo img { display: block; }
.pick-art.has-photo svg { display: none; }
/* The picture's box is always there, shaped for the tallest car picture
   (300×105), so nothing below moves while it loads or when another car is
   picked. Wider pictures sit on its bottom edge. */
.car-hero { max-width: 420px; aspect-ratio: 20 / 7; margin: 14px auto 14px; position: relative; z-index: 1; pointer-events: none; }
.car-hero img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  opacity: 0; transition: opacity 0.2s;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
}
.car-hero.has-photo img { opacity: 1; }
.car-picker svg, .cars-grid svg { width: 100%; max-width: 150px; height: auto; fill: currentColor; }
.car-picker svg .glass, .cars-grid svg .glass { fill: var(--panel-2); opacity: 0.85; }
.car-picker svg .wheel, .cars-grid svg .wheel { fill: var(--panel-2); stroke: currentColor; stroke-width: 4; }
.car-picker .pick-name { font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; }
.car-picker button[aria-checked="true"] {
  color: var(--text);
  border-color: rgba(255, 90, 31, 0.9);
  background: linear-gradient(135deg, rgba(255, 90, 31, 0.22), rgba(255, 90, 31, 0.04));
}
.car-picker button[aria-checked="true"] svg { color: #ff5a1f; }

.start-btn {
  position: sticky;
  top: 8px;
  z-index: 5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 76px;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(255, 90, 31, 0.3);
  touch-action: manipulation;
}
.start-btn:active { transform: translateY(1px); }
.start-btn.on { background: linear-gradient(180deg, #3a3e46, #2a2d33); box-shadow: none; }
.start-ring { width: 22px; height: 22px; border-radius: 50%; border: 3px solid currentColor; }
.start-btn.on .start-ring { background: var(--red); border-color: var(--red); box-shadow: 0 0 12px var(--red); }

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--panel-2);
  border-radius: 14px;
  border: 1px solid var(--line);
}
.segmented button {
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.segmented button[aria-checked="true"] { background: #2b2f37; color: var(--text); }
.segmented.small button { min-height: 40px; font-size: 15px; padding: 0 14px; }

/* Test-drive pedals under the throttle bar: a wide, short brake and a taller
   gas pedal in brushed aluminum, standing on the same floor line. Kept low so
   the dial, bar and pedals all fit the car's split-screen browser. The lower
   the finger on a pedal, the harder it presses. */
.pedals {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 28px;
}
.pedal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: none;
}
.pedal.active { color: var(--accent-2); }
.pedal-plate {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  padding: 14px 10px;
  overflow: hidden;
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(0, 0, 0, 0.04) 1px 2px, transparent 2px 4px),
    linear-gradient(165deg, #f1f3f5, #c9ced4 40%, #a3aab3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -3px 4px rgba(0, 0, 0, 0.25), 0 8px 18px rgba(0, 0, 0, 0.55);
  transition: transform 0.08s;
}
.pedal-brake .pedal-plate { width: 156px; height: 92px; padding: 12px 10px; border-radius: 14px 14px 14px 32px / 14px 14px 14px 24px; }
.pedal-gas .pedal-plate { width: 96px; height: 120px; padding: 12px 10px; }
.pedal-plate i {
  width: 7px;
  border-radius: 4px;
  background: #23262c;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* How hard the pedal is pressed: orange from the top down to the finger. */
.pedal-plate::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--press, 0) * 100%);
  background: linear-gradient(180deg, rgba(255, 90, 31, 0.1), rgba(255, 90, 31, 0.45));
  border-bottom: 2px solid var(--accent);
  opacity: 0;
}
.pedal.active .pedal-plate { transform: translateY(2px) scale(0.98); }
.pedal.active .pedal-plate::after { opacity: 1; }
.pedal-note { max-width: 400px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }
/* Test drive: the dial gets the screen height the pedals leave over, so the
   whole panel fits without scrolling (about 260 px wide on the car's split
   screen, 592 px high). The rest of the panel takes about 360 px. */
.mode-demo .gauge { max-width: min(470px, max(200px, calc((100vh - 360px) / 0.9))); }
body:not(.mode-demo) .demo-only { display: none; }

.pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 84px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: none;
}
.pad small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; text-transform: none; }
.pad.active { transform: scale(0.98); }
.pad-rev {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 76px);
  left: 16px;
  z-index: 20;
  display: none;
  width: 150px;
  min-height: 110px;
  background: rgba(255, 90, 31, 0.18);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.pad-rev.shown { display: flex; }
.pad-rev.active { background: rgba(255, 90, 31, 0.25); border-color: var(--accent); }
.pad:disabled { opacity: 0.4; }
.mode-demo .pad-rev small { display: none; }

.ghost-btn {
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.ghost-btn.running { border-color: var(--accent); color: var(--accent-2); }

.status { min-height: 22px; color: var(--muted); font-size: 15px; }
.status.warn { color: var(--amber); }
.status.error { color: var(--red); }

.settings { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }

.slider { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 12px; font-size: 15px; color: var(--muted); }
.slider span { display: flex; justify-content: space-between; }
.slider output { color: var(--text); font-variant-numeric: tabular-nums; }
.slider[hidden] { display: none; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  touch-action: pan-y;
}
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--panel-2); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--text);
  border: 4px solid var(--accent);
}
input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--panel-2); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--text); border: 4px solid var(--accent); }

.units { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 15px; padding-top: 4px; }

/* ---------- info ---------- */

.info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 4px 24px 8px;
}
.info h2 { font-size: 18px; margin: 12px 0 10px; }
.info ol { margin: 0; padding-left: 22px; line-height: 1.7; }
.hint { color: var(--muted); font-size: 15px; line-height: 1.55; }

.diag { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.diag li { display: flex; gap: 10px; align-items: baseline; }
.diag .ok { color: var(--green); }
.diag .bad { color: var(--red); }
.diag .warn { color: var(--amber); }
.diag .muted { color: var(--muted); }

/* ---------- about + FAQ ---------- */

.about { margin: 16px auto 0; padding-top: 12px; border-top: 1px solid var(--line); }
.about p, .about-cars { color: var(--muted); font-size: 15px; line-height: 1.6; }
.about p b, .about-cars b { color: var(--text); }
.about-cars { margin: 0; padding-left: 22px; line-height: 1.7; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 0; font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent-2); font-weight: 700; }
.faq[open] summary::after { content: '\2013'; }
.faq p { margin: 0 0 14px; }

.foot { max-width: 1400px; margin: 0 auto; padding: 12px 24px 28px; color: var(--muted); font-size: 13px; }

@media (max-width: 520px) {
  .brand { font-size: 18px; }
  .chip { font-size: 12px; padding: 5px 9px; }
  .slider { grid-template-columns: 112px 1fr; }
}

@media (max-width: 860px) and (orientation: portrait) {
  .gauge, .mode-demo .gauge { max-width: min(470px, 40vh); }
}

/* Stack only in portrait: the car screen is landscape but under 860 CSS px wide. */
@media (max-width: 860px) and (orientation: portrait) {
  .dash, .info { grid-template-columns: 1fr; }
  .dash { padding: 16px; }
  .info { padding: 4px 16px 8px; }
  .topbar { padding: 12px 16px; }
  .foot { padding: 12px 16px 24px; }
}

/* ---------- pro line + payment modal ---------- */

.pro-line[hidden] { display: none; }
.pro-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  color: var(--muted);
  font-size: 15px;
}

.link-btn {
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--accent-2);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 6, 8, 0.82);
  backdrop-filter: blur(6px);
}
.modal[hidden] { display: none; }

.modal-card {
  position: relative;
  width: min(440px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 28px 28px 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.modal-card h2 { margin: 0 0 6px; font-size: 26px; }
.modal-lead { margin: 0 0 16px; color: var(--muted); font-size: 16px; line-height: 1.5; }

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.qr {
  width: min(270px, 62vmin);
  min-height: 120px;
  aspect-ratio: 1;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: #fff;   /* QR codes need a light background to scan reliably */
  overflow: hidden;
}
.qr svg { display: block; width: 100%; height: 100%; }
.modal[data-state="ok"] .qr:empty { display: none; }
.modal[data-mode="redeem"] .qr,
.modal[data-mode="transfer"] .qr { display: none; }

/* one-time code: shown on a Pro device, typed on the other one */
.code-show {
  margin: 0 0 16px;
  font: 700 38px/1.2 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--text, #eef1f5);
  user-select: all;
}
.code-show[hidden], .code-form[hidden], .pay-alt[hidden] { display: none; }
.pay-alt { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pay-alt a { color: var(--accent-2); font-weight: 700; }
.pay-help { display: none; }
.modal[data-mode="redeem"] .pay-help,
.modal[data-mode="transfer"] .pay-help { display: block; }
.code-form { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 0 0 12px; }
.code-form input {
  width: 14ch;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line, #2a2f38);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: 700 22px ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.code-form .ghost-btn { margin-bottom: 0; }
.renew-line .link-btn { padding: 0; font-size: 14px; }

.pay-hint { min-height: 24px; margin: 0 0 12px; font-size: 16px; line-height: 1.45; }
.modal[data-state="error"] .pay-hint { color: var(--red); }
.modal[data-state="ok"] .pay-hint { color: var(--green); font-size: 20px; font-weight: 700; }
.modal .ghost-btn { padding: 0 24px; margin-bottom: 12px; }
.pay-price { margin: 0; color: var(--muted); font-size: 13px; }

/* ---------- payment return page ---------- */

.done {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
}
.done h1 { margin: 8px 0 0; font-size: 28px; }
.done p { max-width: 360px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; }
.done-mark { width: 84px; height: 84px; color: var(--green); }
.done-mark.off { color: var(--muted); }

/* ---------- legal links, consent banner, legal pages ---------- */
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.foot-links a, .legal a, .faq a { color: var(--accent-2); }
.consent {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  max-width: 720px; margin: 0 auto; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); font-size: 15px;
}
.consent p { margin: 0; flex: 1 1 260px; color: var(--text); }
.consent-actions { display: flex; gap: 10px; }
.consent-actions .ghost-btn { min-width: 84px; }
.consent-yes { border-color: var(--green); color: var(--green); }
.legal { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; line-height: 1.6; }
.legal h1 { margin: 0 0 4px; }
.legal h2 { margin: 28px 0 6px; font-size: 18px; }
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 22px; }
.legal .updated { font-size: 14px; }

.renew-line { padding-top: 8px; color: var(--green); font-size: 14px; }
.renew-line[hidden] { display: none; }
.renew-line b { font-weight: 700; }

/* ---------- location warning ---------- */
.gps-warn {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 12px; padding: 12px 14px;
  border: 1px solid var(--amber); border-radius: 14px;
  background: rgba(245, 179, 61, 0.1);
  color: var(--text); font-size: 15px; line-height: 1.4;
}
.gps-warn[hidden] { display: none; }
.gps-warn strong { color: var(--amber); }
.gps-warn .link-btn { align-self: flex-start; padding-left: 0; }
.important { color: var(--amber); }

/* ---------- "Show all cars" ---------- */
.car-picker .pick-all {
  justify-content: center;
  border-style: dashed;
  background: transparent;
}
.all-plus { font-size: 30px; line-height: 1; font-weight: 300; color: var(--muted); }
.car-picker .pick-name small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; }
/* Pinned, but its sound isn't made yet. */
.car-picker .pick-later { opacity: 0.6; cursor: default; }
/* The garage (garage.html): a car that isn't released yet. */
.car-picker .pick-garage .pick-name small { color: var(--accent-2); }
/* Garage: the header over each group of cars, the production one a divider. */
.car-picker .pick-section {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.car-picker .pick-section::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.car-picker .pick-section-garage { color: var(--accent-2); }
.car-picker .pick-section:not(:first-child) { margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--line); }

.cars-card { width: min(760px, 100%); }
.cars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.all-car {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 12px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  touch-action: manipulation;
}
.all-name { color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.2; }
.all-tag { font-size: 12px; line-height: 1.35; }
.all-badge {
  margin-top: auto;
  padding: 2px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.all-car[data-badge="pro"] .all-badge { color: var(--accent-2); }
.all-car[data-badge="pinned"] .all-badge { color: var(--green); }
/* Pinned to the front page (Pro). */
.all-car[aria-pressed="true"] {
  border-color: rgba(53, 209, 138, 0.8);
  background: rgba(53, 209, 138, 0.16);
}
.cars-hint { min-height: 20px; margin: 12px 0 0; color: var(--amber); font-size: 14px; }
@media (max-width: 520px) {
  .cars-card { padding: 24px 14px 16px; }
  .cars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}