:root {
  --bg: #050806;
  --panel: #0b110d;
  --panel-2: #111a14;
  --line: rgba(255, 255, 255, 0.08);
  --text: #eef5f0;
  --muted: #8a998f;
  --accent: #16a05c;
  --accent-2: #2ccb86;
  --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(30, 213, 131, 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(5, 8, 6, 0.25), rgba(5, 8, 6, 0.6) 80%),
    url('../img/halloween-bg.jpg') center / cover no-repeat;
}
body.haunted .gauge-panel,
body.haunted .control-panel { background: rgba(11, 17, 13, 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;
}

/* Left column: the gauge box, and the Explore button under it when it shows. */
.gauge-col { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.gauge-col > .gauge-panel { align-self: stretch; }

.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), and the Explore button under it when that shows (--below). The
   dial is 0.9 as tall as wide. */
.gauge {
  position: relative;
  width: 100%;
  max-width: calc((100vh - 160px - var(--below, 0px)) / 0.9);
}
.show-explore { --below: 56px; }

#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(30, 213, 131, 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(30, 213, 131, 0.16), rgba(30, 213, 131, 0.02));
  border: 1px solid rgba(30, 213, 131, 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(30, 213, 131, 0.9);
  background: linear-gradient(135deg, rgba(30, 213, 131, 0.22), rgba(30, 213, 131, 0.04));
}
.car-picker button[aria-checked="true"] svg { color: #16a05c; }

.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(30, 213, 131, 0.3);
  touch-action: manipulation;
}
.start-btn:active { transform: translateY(1px); }
.start-btn.on { background: linear-gradient(180deg, #2a362e, #1c251f); 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"],
.segmented button[aria-pressed="true"] { background: #202b24; 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, #f0f5f2, #c5d1c9 40%, #a1b1a7);
  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: #18211b;
  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(30, 213, 131, 0.1), rgba(30, 213, 131, 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 - var(--below, 0px)) / 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(30, 213, 131, 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(30, 213, 131, 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; }

/* "More settings": one row under Volume that opens and closes the rest. */
.more-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; margin: 4px 0; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .03);
  color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; touch-action: manipulation;
  transition: background .2s, border-color .2s;
}
.more-btn::after { content: ''; width: 8px; height: 8px; border: solid var(--accent-2); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .25s; }
.more-btn:hover { background: rgba(255, 255, 255, .07); }
.more-btn[aria-expanded="true"] { border-color: rgba(44, 225, 143, .4); }
.more-btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.more-settings { display: flex; flex-direction: column; gap: 4px; }
.more-settings[hidden] { display: none; }

/* ---------- 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; }

/* The way to the story page (explore.html), under the gauge and only for
   people without Pro (js/help.js shows it). */
.explore-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: none;
  height: 44px; max-width: 100%; padding: 0 22px; overflow: hidden; border-radius: 999px;
  background: linear-gradient(92deg, #16a05c, #2ccb86 55%, #7fdcaa); box-shadow: 0 10px 30px -10px rgba(30, 213, 131, .8);
  color: #06120d; font-size: 15px; font-weight: 800; white-space: nowrap; text-decoration: none; touch-action: manipulation;
}
.explore-link:hover { background: linear-gradient(92deg, #1aaa62, #3fd592 55%, #8fe0b6); }
.explore-link[hidden] { display: none; }
.explore-link span { transition: transform .25s; }
.explore-link:hover span { transform: translateX(3px); }
.explore-link::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%) 130% 0 / 250% 100% no-repeat;
  animation: explore-shine 3.6s ease-in-out infinite;
}
@keyframes explore-shine { 60%, 100% { background-position: -130% 0; } }
@media (prefers-reduced-motion: reduce) { .explore-link::after { animation: none; } }

/* ---------- help at the fold ---------- */

.help { max-width: 1400px; margin: 4px auto 0; padding: 0 20px; }
.help-intro { max-width: 760px; margin: 0 auto 16px; font-size: 14px; line-height: 1.6; text-align: center; color: var(--muted, rgba(255, 255, 255, .7)); }
.help-intro a { color: var(--accent-2); }
.help-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.help-links a, .help-tab {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .03);
  color: var(--muted); font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: background .2s, border-color .2s, color .2s;
}
.help-tab { border-color: rgba(44, 225, 143, .4); color: var(--text); }
.help-tab::after { content: ''; width: 7px; height: 7px; border: solid var(--accent-2); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .25s; }
.help-links a:hover, .help-tab:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.help-tab[aria-expanded="true"] { border-color: var(--accent); background: rgba(30, 213, 131, .16); }
.help-tab[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.help-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 48px; padding: 22px 4px 30px; border-bottom: 1px solid var(--line); animation: help-in .35s cubic-bezier(.2, .7, .2, 1) both; }
.help-panel[hidden] { display: none; }
.help-wide { display: block; }
.help-panel h2 { margin: 8px 0 12px; font-size: 18px; }
.help-steps { margin: 0; padding-left: 22px; line-height: 1.7; }
.help-know { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.help-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
.help-faq .faq p { color: var(--muted); font-size: 15px; line-height: 1.6; }
@keyframes help-in { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 860px) {
  .help { padding: 0 16px; }
  .help-panel, .help-faq { grid-template-columns: 1fr; }
}

.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; }
}

/* ---------- maximized gauge ---------- */

/* The round button in the gauge panel's top right corner, which the dial
   leaves empty. */
.gauge-panel { position: relative; }
.gauge-max {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  touch-action: manipulation;
}
.gauge-max:hover { color: var(--text); border-color: rgba(30, 213, 131, 0.6); }
.gauge-max svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gauge-max .ico-min, .gauge-max-on .gauge-max .ico-max { display: none; }
.gauge-max-on .gauge-max .ico-min { display: block; }

/* Maximized: the gauge column takes the full width and the controls move
   down under it, as when the panels stack in portrait. The dial still fits
   the screen height as in GPS drive (.gauge above), also in portrait and in
   test drive, where it drops the 470 px cap. */
.gauge-max-on .dash { grid-template-columns: minmax(0, 1fr); }
.gauge-max-on .gauge { max-width: calc((100vh - 160px - var(--below, 0px)) / 0.9); }
.gauge-max-on.mode-demo .gauge { max-width: max(200px, calc((100vh - 360px - var(--below, 0px)) / 0.9)); }

/* The row under the gauge: Explore in the middle and, while maximized, the
   free engine time left on its left. Only without Pro, like Explore. */
.gauge-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  align-self: stretch;
}
body:not(.show-explore) .gauge-foot { display: none; }
.gauge-foot .explore-link { grid-column: 2; }
.gauge-time { display: none; grid-column: 1; padding-left: 4px; color: var(--amber); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gauge-time.out { color: var(--red); }
.gauge-max-on .gauge-time { display: block; }
/* Too narrow to share the row: the time goes on its own line above. */
@media (max-width: 860px) and (orientation: portrait) {
  .gauge-foot { grid-template-columns: minmax(0, 1fr); }
  .gauge-foot .explore-link, .gauge-time { grid-column: 1; justify-self: center; }
}

/* ---------- 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; }
/* While the cars window is open the page behind it does not scroll, and a
   list that reaches its end does not hand the scroll on to the page. */
html.no-scroll, html.no-scroll body { overflow: hidden; }
.modal, .modal-card, .my-cars-list, .cars-grid, .cars-split { overscroll-behavior: contain; }

.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%; }
.qr:empty { display: none; }
.modal[data-mode="redeem"] .qr,
.modal[data-mode="transfer"] .qr { display: none; }

/* plan choice in the pay window, styled like the Units switch */
.pay-plans { margin: 0 auto 14px; max-width: 420px; }
.pay-plans button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 10px; }
.pay-plans small { font-size: 13px; font-weight: 500; }
.pay-plans em { font-size: 12px; font-style: normal; font-weight: 700; color: var(--accent-2); }
.modal[data-mode="redeem"] .pay-plans,
.modal[data-mode="transfer"] .pay-plans,
.modal[data-state="ok"] .pay-plans { 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, #eef5f0);
  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, #1f2a23);
  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); }

/* "EVMotor is a Lifemock production", centered at the very bottom. */
.foot-made { margin-top: 28px; padding: 28px 16px 36px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; text-align: center; }
.foot-made p { margin: 0 auto 10px; max-width: 760px; }
.foot-made a { color: var(--text); text-decoration: none; }
.foot-made a:hover { color: var(--accent-2); }
.made-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.made-line a { font-weight: 700; }
.made-mark { width: 22px; height: 22px; flex: none; color: var(--text); }
.foot-made .foot-social { display: flex; justify-content: center; gap: 12px; margin: 0 auto 14px; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--text); }
.foot-social a:hover, .foot-social a:focus-visible { color: var(--accent-2); border-color: var(--accent); }
.foot-social svg { width: 20px; height: 20px; fill: currentColor; }
.made-legal { font-size: 12px; opacity: .85; }
.foot-made .made-version { margin-bottom: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.foot-made .made-version a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
/* changelog.html: one entry per version, newest first. */
.changelog .log-entry { padding: 14px 0; border-bottom: 1px solid var(--line); }
.changelog .log-entry h2 { margin: 0 0 4px; color: var(--accent-2); }
.changelog .log-entry p { margin: 0; }
.foot-made .foot-links { justify-content: center; margin: 0 0 14px; }
.foot-made .foot-links 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; }

/* evmotor.io/redeem: the code form at the top of the page. */
.redeem-box { margin: 18px 0 8px; padding: 18px 16px 6px; border: 1px solid var(--line); border-radius: 16px; text-align: center; }
.redeem-box > p:first-child { margin-top: 0; }
.redeem-box .ghost-btn { padding: 0 24px; color: var(--text); }
.redeem-box[data-state="error"] .pay-hint { color: var(--red); }
.redeem-box[data-state="ok"] .pay-hint { color: var(--green); font-size: 20px; font-weight: 700; }
.redeem-box .mail-form { flex-wrap: wrap; }
.redeem-box .mail-form input { width: 26ch; max-width: 100%; font-family: inherit; font-size: 17px; font-weight: 400; letter-spacing: 0; text-align: left; text-transform: none; }
#mailBox[data-state="ok"] .pay-hint { font-size: 16px; font-weight: 600; }

/* evmotor.io/cancel: one big button per price. */
.big-links { display: grid; gap: 12px; margin: 20px 0; }
.legal .big-link { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); text-decoration: none; }
.legal .big-link:hover { border-color: var(--accent); }
.big-link b { display: block; margin-bottom: 4px; color: var(--accent-2); font-size: 18px; }
.big-link span { color: var(--muted); font-size: 15px; line-height: 1.45; }

.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-col h3 { margin: 0; font-size: 16px; text-align: left; }
.cars-col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.cars-sort { flex: none; margin-left: auto; }
.cars-pro-note { margin: 0; color: var(--accent-2); font-size: 14px; line-height: 1.35; text-align: left; }
.cars-sort button { min-height: 40px; }
.cars-split { display: block; }
.my-cars-list { display: flex; flex-direction: column; gap: 6px; }
.my-car {
  display: flex;
  user-select: none;
  -webkit-user-select: none;
  /* A swipe over the row scrolls the list; a finger holding still picks it up (app.js). */
  touch-action: pan-y;
  -webkit-touch-callout: none;
  cursor: grab;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 2px solid rgba(53, 209, 138, 0.8);
  border-radius: 12px;
  background: rgba(53, 209, 138, 0.16);
  text-align: left;
}
.my-car.dragging {
  position: relative;
  z-index: 3;
  cursor: grabbing;
  background: rgba(53, 209, 138, 0.3);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
}
.my-car .pick-art { width: 92px; flex: none; }
.my-car svg, .my-car img { width: 100%; height: auto; }
.my-car svg { fill: currentColor; color: var(--muted); }
.my-car svg .glass { fill: var(--panel-2); opacity: 0.85; }
.my-car svg .wheel { fill: var(--panel-2); stroke: currentColor; stroke-width: 4; }
.my-car .all-name { flex: 1; min-width: 0; }
.my-move { display: flex; gap: 6px; flex: none; }
.my-move button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.my-move button:disabled { opacity: 0.3; cursor: default; }
.my-move .x-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  fill: none;
  color: inherit;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.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;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.all-car[data-badge="pro"] .all-badge { color: var(--accent-2); }
.all-car[hidden] { display: none; }
/* Pro: your front page on the left, the cars to add on the right. Each column
   scrolls by itself, so the window stays inside a 600 px-tall screen. */
.cars-card.is-pro {
  width: min(1000px, 100%);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 568px;
  overflow: hidden;
  padding: 14px 18px 10px;
}
/* No title row: the column headings are the top line, and the close button
   sits on it, right of the sort buttons. The h2 stays for screen readers. */
.cars-card.is-pro .modal-close { top: 17px; right: 12px; }
.cars-card.is-pro h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cars-card.is-pro .cars-col-head { padding-right: 44px; }
.cars-card.is-pro .cars-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; flex: 1; min-height: 0; }
.cars-card.is-pro .cars-col { display: flex; flex-direction: column; min-height: 0; }
.cars-card.is-pro .cars-col > h3 { margin: 0 0 8px; min-height: 50px; display: flex; align-items: center; }
.cars-card.is-pro .my-cars-list,
.cars-card.is-pro .cars-grid { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.cars-card.is-pro .cars-grid { display: flex; flex-direction: column; gap: 6px; }
.cars-card.is-pro .all-car {
  flex-direction: row;
  gap: 10px;
  padding: 6px 10px;
  text-align: left;
  border-radius: 12px;
  min-height: 56px;
  cursor: default;
}
.cars-card.is-pro .all-car .pick-art { width: 92px; flex: none; }
.cars-card.is-pro .all-car svg, .cars-card.is-pro .all-car img { max-width: 92px; }
.cars-card.is-pro .all-name { flex: 1; min-width: 0; }
.cars-card.is-pro .all-tag { display: none; }
/* Pro: the Add button is the only thing in the row that adds the car. */
.cars-card.is-pro .all-badge {
  margin: 0;
  flex: none;
  min-width: 84px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--green);
  font-size: 15px;
}
.cars-card.is-pro .cars-hint { margin: 6px 0 0; min-height: 18px; }
.cars-hint { min-height: 20px; margin: 12px 0 0; color: var(--amber); font-size: 14px; }
/* Free: the big button that starts a test run of the Pro cars window. */
.try-sort-btn {
  display: block;
  width: 100%;
  min-height: 60px;
  margin: 0 0 16px;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(30, 213, 131, 0.3);
  touch-action: manipulation;
}
.try-sort-btn:active { transform: translateY(1px); }
.try-sort-btn[hidden], .try-sort-bar[hidden] { display: none; }
.try-sort-bar { margin: 8px 0 0; color: var(--amber); font-size: 14px; text-align: left; }
.try-sort-bar .link-btn { margin-left: 6px; }
@media (max-width: 700px) {
  /* One column: each column is as tall as its cars and the window scrolls,
     so a list never spills over the one below it. */
  .cars-card.is-pro .cars-split { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow-y: auto; }
  .cars-card.is-pro .cars-col { min-height: auto; }
  /* One column: the front-page heading is the top line, so it makes room for ×. */
  .cars-card.is-pro .cars-col > h3 { padding-right: 44px; }
  .cars-card.is-pro .my-cars-list, .cars-card.is-pro .cars-grid { overflow: visible; }
}
@media (max-width: 520px) {
  .cars-card { padding: 24px 14px 16px; }
  .cars-card.is-pro { padding: 14px 12px 10px; }
  /* Phone width: smaller pictures, so the arrows and X fit next to the name. */
  .my-car .pick-art, .cars-card.is-pro .all-car .pick-art { width: 64px; }
  .my-move { gap: 4px; }
  .cars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}