:root{
  --bg:#0b0f14; --fg:#e8eef5; --muted:#7b8794;
  --danger:#ff3b30; --warn:#ff9f0a;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
/* The HTML hidden attribute must win over .overlay/#hud display rules below. */
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  overflow:hidden; user-select:none;
  transition:background .2s ease;
}
body.danger{ background:#3a0d0a; }

/* Start overlay */
.overlay{
  position:fixed; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--bg);
}
.start-card{ text-align:center; max-width:440px; }
.start-icon{ width:92px; height:92px; border-radius:22px; margin-bottom:18px; box-shadow:0 8px 30px rgba(0,0,0,.5); }
.start-card h1{ font-size:27px; line-height:1.25; margin-bottom:18px; }
#startInfo{ color:var(--muted); margin-bottom:26px; font-size:16px; }
#startBtn{
  font-size:28px; font-weight:800; letter-spacing:2px;
  padding:18px 64px; border:none; border-radius:16px;
  background:var(--warn); color:#000; cursor:pointer;
}
#startBtn:disabled{ opacity:.4; cursor:default; }
.fineprint{ margin-top:26px; font-size:13px; line-height:1.5; color:var(--muted); }

/* Driving HUD */
#hud{
  height:100%; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
#speedBox{ text-align:center; }
#speed{ font-size:140px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
#speedBox .unit{ font-size:24px; color:var(--muted); margin-top:4px; }

.alert{
  width:min(92vw,520px); text-align:center; padding:22px 24px;
  border-radius:24px; background:var(--danger); color:#fff;
  box-shadow:0 0 60px rgba(255,59,48,.45);
  animation:pop .18s ease;
}
@keyframes pop{ from{ transform:scale(.92); opacity:.4; } to{ transform:scale(1); opacity:1; } }
.alert.hidden{ display:none; }
.alert-title{ font-size:22px; font-weight:800; letter-spacing:3px; }
.alert-dist{ font-size:84px; font-weight:800; line-height:1.15; font-variant-numeric:tabular-nums; }
.alert-limit{ font-size:26px; font-weight:700; }
.alert-limit:empty{ display:none; }

#statusLine{
  position:fixed; bottom:20px; left:0; right:0; padding:0 16px;
  text-align:center; color:var(--muted); font-size:14px;
}
#diag{ margin-top:4px; font-size:13px; color:var(--warn); }
#diag:empty{ display:none; }
#menuBtn{ position:fixed; top:16px; right:16px; }
#muteBtn{ position:fixed; top:16px; right:72px; }

/* Settings sheet */
.sheet{
  width:min(92vw,440px); max-height:86vh; overflow:auto;
  background:#141a22; border-radius:20px; padding:22px 22px 26px;
}
.sheet h2{ font-size:22px; margin-bottom:14px; text-align:center; }
.srow{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 2px; border-top:1px solid rgba(255,255,255,.07);
}
.srow:first-of-type{ border-top:none; }
.srow.col{ flex-direction:column; align-items:stretch; }
.srow.col > span{ margin-bottom:10px; }
.srow > span{ font-size:16px; }
.seg{ display:flex; background:rgba(255,255,255,.07); border-radius:11px; padding:3px; }
.seg button{
  border:none; background:transparent; color:var(--muted);
  padding:9px 16px; border-radius:9px; font-size:15px; font-weight:600; cursor:pointer;
}
.seg button.on{ background:var(--warn); color:#000; }
#voiceSel{
  width:100%; padding:12px; font-size:15px; border-radius:11px;
  background:#0d1218; color:var(--fg); border:1px solid rgba(255,255,255,.12);
}
#voiceTest{ margin-top:10px; align-self:flex-start; font-size:14px; }
.primary{
  width:100%; margin-top:22px; padding:15px; font-size:18px; font-weight:700;
  border:none; border-radius:14px; background:var(--warn); color:#000; cursor:pointer;
}
#updateChip{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:20;
  border:none; border-radius:999px; padding:12px 20px; cursor:pointer;
  background:#2ec36b; color:#04130a; font-size:15px; font-weight:700;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
}
#forceRefresh{ width:100%; font-size:15px; }
.ghost{
  background:rgba(255,255,255,.08); color:var(--fg);
  border:none; border-radius:12px; padding:10px 14px; font-size:20px; cursor:pointer;
}

/* GPS status banner + version tag */
.banner{
  position:fixed; top:60px; left:50%; transform:translateX(-50%); z-index:5;
  max-width:92vw; padding:10px 16px; border-radius:12px;
  background:rgba(255,255,255,.10); color:var(--fg);
  font-size:15px; font-weight:600; text-align:center; line-height:1.35;
}
.banner.warn{ background:rgba(255,159,10,.20); color:#ffcf6a; }
.version{ position:fixed; top:18px; left:16px; color:var(--muted); font-size:13px; }
.hidden{ display:none !important; }

/* Radar — offline situational view (no map tiles) */
#radar{
  width:min(72vw, 38vh); height:min(72vw, 38vh);
  max-width:320px; max-height:320px; display:block;
}