/* Apex Drive – UI chrome (gauges themselves are canvas). System fonts only, no external assets. */
:root {
  --bg: #050506;
  --panel: #0c0d10;
  --line: #22242a;
  --text: #f2f2f4;
  --muted: #80838b;
  --accent: #ff1e2d;
  --accent-2: #ff6a00;
  --ok: #18ff5a;
  --warn: #ffb000;
  --font: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --cut: 14px;
  color-scheme: dark;
}
body.style-hyper { --accent: #ff3b1e; }
body.style-track { --accent: #2d7bff; }
body.style-retro { --accent: #ff8a00; }
body.style-neon  { --accent: #00e5ff; --accent-2: #ff00c8; }
body.style-raptor  { --accent: #ff1e2d; }
body.style-inferno { --accent: #ff6a00; --accent-2: #ffb347; }
body.style-venom   { --accent: #39ff14; }
body.style-hud     { --accent: #4dff9a; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); }
body {
  font: 500 15px/1.35 var(--font);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation; overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }

#gauge { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; } /* JS sets exact px size */

/* ---------- top bar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: linear-gradient(#000c, #0000);
}
.brand { font-style: italic; font-weight: 900; letter-spacing: .14em; font-size: 18px; white-space: nowrap; }
.brand b { color: var(--accent); font-weight: 900; }
.brand i { color: var(--muted); margin: 0 2px; }
.chips { display: flex; gap: 8px; flex: 1; min-width: 0; overflow: hidden; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
  font: italic 800 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  background: #111317; border: 1px solid var(--line);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.chip.gps i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.chip.gps.good i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.chip.gps.fair i { background: var(--warn); }
.chip.gps.poor i { background: var(--accent); animation: blink 1s steps(2) infinite; }
.chip.gps.sim i { background: #b04dff; }
.chip.profile { color: var(--accent); }
.actions { display: flex; gap: 8px; }
.icon-btn {
  width: 44px; height: 40px; display: grid; place-items: center;
  background: #111317; border: 1px solid var(--line);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: background .15s, color .15s;
}
.icon-btn:hover, .icon-btn:focus-visible { background: var(--accent); color: #000; outline: none; }

.hud-btn { width: auto; padding: 0 14px 0 12px; gap: 6px; display: flex; color: var(--accent); }
.hud-btn span { font: italic 900 13px/1 var(--font); letter-spacing: .12em; }

/* ---------- windshield HUD mode: black, empty, mirrored ---------- */
.hud-ui { display: none; }
.hud-mode { background: #000; }
.hud-mode .topbar, .hud-mode .dock, .hud-mode .panel, .hud-mode .scrim { display: none !important; }
.hud-mode .hud-ui {
  display: flex; gap: 8px; position: fixed; z-index: 6;
  top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
  opacity: .16; transition: opacity .5s;
}
.hud-mode .hud-ui.awake { opacity: .95; transition: opacity .15s; }
.hud-ui button {
  height: 34px; min-width: 34px; padding: 0 10px; display: flex; align-items: center; justify-content: center; gap: 6px;
  color: #fff; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 17px;
  font: 800 11px/1 var(--font); letter-spacing: .1em;
}
.hud-ui svg { width: 16px; height: 16px; }
#gauge.mirror-v { transform: scaleY(-1); }
#gauge.mirror-h { transform: scaleX(-1); }

/* ---------- bottom dock ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: linear-gradient(#0000, #000d 40%);
}

.start {
  position: relative; width: 104px; height: 104px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 35%, #3a0a0e, #120304 70%);
  border: 3px solid #2a2c31;
  box-shadow: inset 0 0 0 6px #0b0b0d, 0 6px 24px #0009;
  display: grid; place-items: center;
  transition: transform .08s;
}
.start:active { transform: scale(.95); }
.start-ring { position: absolute; inset: 9px; border-radius: 50%; border: 2px solid var(--accent); opacity: .45; }
.start-label { display: grid; text-align: center; line-height: 1.05; font-style: italic; }
.start-label b { font-size: 16px; font-weight: 900; letter-spacing: .08em; }
.start-label small { font-size: 9px; font-weight: 800; letter-spacing: .14em; color: var(--muted); }
.is-off .start-ring { animation: pulse 1.6s ease-in-out infinite; }
.is-on .start { background: radial-gradient(circle at 50% 35%, #ff2b39, #8a0710 75%); border-color: #ff1e2d; box-shadow: inset 0 0 0 6px #0b0b0d, 0 0 32px #ff1e2d88; }
.is-on .start-ring { opacity: 1; border-color: #fff; }
.is-on .start-label small { color: #ffd0d4; }

.odo { display: grid; gap: 6px; justify-items: center; min-width: 0; }
.credit {
  font: italic 700 10px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; white-space: nowrap; margin-top: 2px;
}
.credit b { color: var(--text); font-weight: 900; }
.credit:hover b, .credit:focus-visible b { color: var(--accent); }
.odo-row { display: flex; align-items: center; gap: 8px; }
.odo-tag { font: italic 900 11px/1 var(--font); letter-spacing: .16em; color: var(--muted); width: 36px; text-align: right; }
.odo-num {
  font: 800 22px/1 "Consolas", "Roboto Mono", "SFMono-Regular", Menlo, monospace;
  letter-spacing: .14em; padding: 6px 8px 6px 10px; color: #fff;
  background: linear-gradient(#000, #1a1b1f 50%, #000); border: 1px solid #2a2c31;
  font-variant-numeric: tabular-nums;
}
.odo-row.total .odo-num { font-size: 17px; color: #c9cbd1; }
.odo-unit { font: italic 900 11px/1 var(--font); color: var(--accent); width: 24px; }

.pedals { display: flex; gap: 10px; flex: none; align-items: center; }
.brake {
  display: none; width: 96px; height: 96px; place-items: center; align-content: center; gap: 2px;
  font-style: italic; color: #ff5a64;
  background: repeating-linear-gradient(0deg, #15161a 0 6px, #0c0d10 6px 9px);   /* rubber pedal grip */
  border: 2px solid #3a1418;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: background .08s, transform .08s; touch-action: none;
}
.brake span { font-size: 20px; font-weight: 900; letter-spacing: .06em; }
.brake small { font-size: 10px; font-weight: 800; letter-spacing: .2em; color: var(--muted); }
.brake.down { background: #ff1e2d; color: #fff; border-color: #ff1e2d; transform: scale(.97); }
.brake.down small { color: #fff; }
.is-sim .brake { display: grid; }
.is-sim.is-off .brake { opacity: .45; }
.rev {
  flex: none; width: 128px; height: 96px;
  display: grid; place-items: center; align-content: center; gap: 2px;
  font-style: italic; background: linear-gradient(160deg, #1b1d22, #0a0a0c);
  border: 2px solid #2a2c31;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  transition: background .08s, transform .08s;
  touch-action: none;
}
.rev span { font-size: 28px; font-weight: 900; letter-spacing: .06em; }
.rev small { font-size: 10px; font-weight: 800; letter-spacing: .2em; color: var(--muted); }
.rev.down { background: var(--accent); color: #000; transform: scale(.97); }
.rev.down small { color: #000; }
.is-off .rev { opacity: .45; }

/* ---------- settings panel ---------- */
.scrim { position: fixed; inset: 0; z-index: 8; background: #000a; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 9;
  width: min(440px, 100vw); overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 20px 28px; background: var(--panel); border-left: 2px solid var(--accent);
  transform: translateX(105%); transition: transform .22s cubic-bezier(.2,.8,.2,1);
  will-change: transform; contain: layout paint;
}
.panel.open { transform: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.panel h2 { margin: 0; font: italic 900 24px/1 var(--font); letter-spacing: .18em; }
.panel h2::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 10px; background: var(--accent); clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); vertical-align: -2px; }
.panel section { margin-top: 20px; }
.panel h3 { margin: 0 0 10px; font: italic 900 12px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.panel h3 output { color: var(--text); }
.hint { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
kbd { font: 700 11px var(--font); padding: 1px 5px; border: 1px solid var(--line); background: #15171b; }

.opts { display: grid; gap: 8px; }
.opt {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  text-align: left; padding: 10px 14px 10px 10px; background: #111317; border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  transition: border-color .15s, background .15s;
}
.opt b { font-style: italic; font-weight: 900; letter-spacing: .04em; }
.opt small { grid-column: 2; color: var(--muted); font-size: 12px; }
.opt > i { grid-row: span 2; width: 40px; height: 40px; }
.opt:hover { border-color: #3a3d44; }
.opt.on { border-color: var(--accent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, #111317), #111317 70%); }
.opt.on b { color: var(--accent); }

.cyl { display: grid; place-items: center; font: italic 900 18px/1 var(--font); color: #000; background: var(--accent); clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%); }
.swatch { border: 1px solid #2a2c31; }
.sw-apex  { background: radial-gradient(circle, #111 45%, #ff1e2d 47% 55%, #0a0a0a 57%); }
.sw-hyper { background: repeating-linear-gradient(90deg, #ff3b1e 0 4px, #0000 4px 7px), #000; }
.sw-track { background: radial-gradient(circle at 20% 30%, #18ff5a 3px, #0000 4px), radial-gradient(circle at 50% 30%, #ff1e2d 3px, #0000 4px), radial-gradient(circle at 80% 30%, #2d7bff 3px, #0000 4px), #050505; }
.sw-retro { background: radial-gradient(circle at 30% 50%, #000 30%, #ccc 32% 38%, #0000 40%), radial-gradient(circle at 75% 50%, #000 30%, #ccc 32% 38%, #0000 40%), #1a130c; }
.sw-raptor  { background: linear-gradient(135deg, #000 38%, #ff1e2d 39% 46%, #000 47% 58%, #ff1e2d 59% 63%, #000 64%); box-shadow: 0 0 10px #ff1e2d66; }
.sw-inferno { background: radial-gradient(circle at 50% 110%, #fff3c4 0, #ffb000 22%, #ff4a12 45%, #1a0603 72%); }
.sw-venom   { background: radial-gradient(circle, #39ff14 0 20%, #0a160b 24%); border-color: #39ff14; box-shadow: inset 0 0 8px #39ff14aa; }
.sw-hud     { background: linear-gradient(#000 46%, #4dff9a 47% 53%, #000 54%), #011; box-shadow: inset 0 0 0 1px #4dff9a88; }
.sw-neon  { background: linear-gradient(#1a0333 55%, #ff00c8 56% 58%, #05010a 59%); box-shadow: inset 0 0 0 2px #00e5ff; }

.seg { display: flex; border: 1px solid var(--line); background: #0a0b0d; }
.seg button { flex: 1; padding: 11px 8px; font: italic 900 13px/1 var(--font); letter-spacing: .1em; color: var(--muted); transition: background .15s, color .15s; }
.seg button.on { background: var(--accent); color: #000; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

input[type=range] { width: 100%; height: 28px; background: none; -webkit-appearance: none; appearance: none; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--accent), #2a2c31); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; background: #fff; border: 3px solid var(--accent); clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%); }
input[type=range]::-moz-range-track { height: 6px; background: #2a2c31; }
input[type=range]::-moz-range-progress { height: 6px; background: var(--accent); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 0; background: #fff; border: 3px solid var(--accent); }

.danger { display: flex; gap: 10px; }
.btn { flex: 1; padding: 12px; font: italic 900 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: #000; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.btn.ghost { background: #15171b; color: var(--text); }
.author {
  margin-top: 26px; padding: 14px 16px; display: grid; gap: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, #111317), #111317 75%);
  border-left: 3px solid var(--accent);
}
.author > span { font: italic 800 11px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.author a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--text); text-decoration: none; }
.author a b { font: italic 900 18px/1.2 var(--font); letter-spacing: .04em; }
.author a small { font: 800 12px/1 var(--font); color: var(--accent); letter-spacing: .06em; }
.author a:hover b { color: var(--accent); }
.foot { margin: 14px 0 0; font-size: 11px; color: #555860; letter-spacing: .06em; }

.toast {
  position: fixed; left: 50%; top: 72px; z-index: 10; transform: translateX(-50%);
  padding: 10px 18px; background: var(--accent); color: #000; font: italic 900 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
[hidden] { display: none !important; }

@keyframes pulse { 50% { opacity: 1; transform: scale(1.04); } }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .chip.profile { display: none; }
  .brand { font-size: 15px; letter-spacing: .1em; }
}
@media (max-width: 520px) {
  .topbar { gap: 8px; }
  .brand span, .brand i { display: none; }            /* keep only the first word */
  .chip { height: 26px; padding: 0 10px; font-size: 11px; }
  .icon-btn { width: 40px; height: 36px; }
  .hud-btn { width: auto; padding: 0 10px; }
  .hud-btn span { font-size: 11px; }
  .dock { gap: 8px; padding-top: 10px; }
  .start { width: 72px; height: 72px; border-width: 2px; }
  .start-ring { inset: 6px; }
  .start-label b { font-size: 11px; }
  .start-label small { display: none; }
  .rev { width: 82px; height: 68px; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
  .rev span { font-size: 21px; }
  .rev small { font-size: 8px; }
  .odo { gap: 4px; }
  .odo-row { gap: 5px; }
  .odo-num { font-size: 15px; letter-spacing: .06em; padding: 4px 6px; }
  .odo-row.total .odo-num { font-size: 13px; }
  .odo-tag { width: 26px; font-size: 9px; letter-spacing: .08em; }
  .odo-unit { width: 18px; font-size: 9px; }
  .credit { font-size: 8.5px; letter-spacing: .04em; }
  .pedals { gap: 6px; }
  .brake { width: 64px; height: 68px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
  .brake span { font-size: 12px; }
  .brake small { font-size: 7px; }
  /* simulator on a phone: 4 controls in one row → compact everything */
  .is-sim .dock { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .is-sim .start { width: 60px; height: 60px; }
  .is-sim .start-label b { font-size: 9px; }
  .is-sim .rev { width: 70px; }
  .is-sim .odo-tag { display: none; }
  .is-sim .credit { white-space: normal; text-align: center; max-width: 110px; line-height: 1.25; }
  .panel { width: 100vw; border-left: 0; padding: 14px 14px 24px; }
  .opt { padding: 8px 12px 8px 8px; }
  .opt > i { width: 34px; height: 34px; }
  .opt { grid-template-columns: 34px 1fr; }
}
@media (max-width: 360px) {
  .row2 { grid-template-columns: 1fr; }
  .start { width: 62px; height: 62px; }
  .rev { width: 70px; }
  .odo-num { font-size: 13px; }
  .chip.gps span { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {     /* phones held sideways */
  .topbar { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 4px; }
  .icon-btn { height: 34px; }
  .start { width: 64px; height: 64px; }
  .start-label b { font-size: 9px; letter-spacing: .04em; }
  .start-label small { display: none; }
  .rev { height: 58px; width: 96px; }
  .brake { height: 58px; width: 80px; }
  .brake span { font-size: 13px; }
  .brake small { font-size: 8px; }
  .dock { padding-top: 4px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .odo-row.total { display: none; }
  .credit { margin-top: 0; }
}
@media (min-width: 1600px) {                                    /* Tesla screens / big displays */
  .brand { font-size: 22px; }
  .start { width: 124px; height: 124px; }
  .start-label b { font-size: 19px; }
  .rev { width: 150px; height: 110px; }
  .rev span { font-size: 34px; }
  .odo-num { font-size: 26px; }
  .odo-row.total .odo-num { font-size: 20px; }
  .credit { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}