:root{
  --bg:#101018;
  --panel:#181824;
  --panel-2:#20202e;
  --text:#f3f1ea;
  --muted:#a9a6bd;
  --accent:#ffb020;
  --good:#37d67a;
  --border:#33334a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c0c14; --panel:#15151f; --panel-2:#1c1c29;
    --text:#f3f1ea; --muted:#a9a6bd; --border:#2c2c40;
  }
}
:root[data-theme="dark"]{
  --bg:#0c0c14; --panel:#15151f; --panel-2:#1c1c29;
  --text:#f3f1ea; --muted:#a9a6bd; --border:#2c2c40;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0; height:100%; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Segoe UI,Roboto,sans-serif;
  overscroll-behavior:none; touch-action:none; overflow:hidden;
}
#app{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background:var(--bg);
}
#stage{
  position:relative; width:min(100vw, 480px); height:min(100dvh, 900px);
  aspect-ratio:9/16; max-height:100%; border-radius:18px; overflow:hidden;
  box-shadow:0 0 0 1px var(--border), 0 20px 60px rgba(0,0,0,.5); background:#000;
}
canvas#game{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.hud{
  position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between;
  padding:10px 12px; pointer-events:none; z-index:5;
}
.pill{
  background:rgba(12,12,20,.55); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12); border-radius:999px;
  padding:6px 12px; font-size:13px; font-weight:700; letter-spacing:.2px;
  display:flex; align-items:center; gap:6px;
}
.pill.chip{ color:var(--accent); }
.pill.level{ color:#8ec5ff; }
#pauseBtn{
  position:absolute; top:10px; right:10px; z-index:6; pointer-events:auto;
  background:rgba(12,12,20,.55); border:1px solid rgba(255,255,255,.12); color:var(--text);
  width:34px; height:34px; border-radius:999px; font-size:16px; display:none;
  align-items:center; justify-content:center;
}
.overlay{
  position:absolute; inset:0; z-index:10; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px;
  background:radial-gradient(120% 100% at 50% 0%, rgba(30,20,50,.85), rgba(6,6,12,.95));
  backdrop-filter:blur(2px);
}
.hidden{ display:none !important; }
.title{
  font-size:30px; font-weight:900; margin:0 0 4px; letter-spacing:.5px;
  background:linear-gradient(90deg,#ffd76a,#ff4d6d,#8ec5ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.subtitle{ color:var(--muted); font-size:13px; margin:0 0 22px; max-width:280px; line-height:1.5; }
.bigscore{ font-size:44px; font-weight:900; margin:2px 0; }
.row{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; justify-content:center; }
button.btn{
  appearance:none; border:none; cursor:pointer; font-weight:800; font-size:15px;
  padding:13px 22px; border-radius:14px; color:#1a1a1a;
  background:linear-gradient(180deg,#ffd76a,#ffb020);
  box-shadow:0 6px 0 #b57a10, 0 10px 20px rgba(255,176,32,.25);
}
button.btn:active{ transform:translateY(4px); box-shadow:0 2px 0 #b57a10; }
button.btn.secondary{ background:var(--panel-2); color:var(--text); box-shadow:0 6px 0 var(--border); }
button.btn.secondary:active{ box-shadow:0 2px 0 var(--border); }
.statline{ color:var(--muted); font-size:13px; margin-top:2px; }
.statline b{ color:var(--accent); }
.garageGrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; max-width:340px;
  margin:16px 0; max-height:46vh; overflow-y:auto; padding:4px;
}
.carCard{
  background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:10px 6px;
  display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
}
.carCard.locked{ opacity:.55; }
.carCard.equipped{ border-color:var(--good); box-shadow:0 0 0 1px var(--good) inset; }
.carCard canvas{ width:44px; height:66px; }
.carCard .name{ font-size:10px; font-weight:700; color:var(--text); text-align:center; }
.carCard .cost{ font-size:10px; color:var(--accent); font-weight:700; }
.carCard .cost.owned{ color:var(--good); }
.topbarText{
  position:absolute; top:14px; left:0; right:0; text-align:center; font-size:11px;
  color:var(--muted); letter-spacing:.5px; text-transform:uppercase; font-weight:700;
}
.modalBackdrop{
  position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(6,6,12,.75); backdrop-filter:blur(2px);
}
.modal{
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:20px; max-width:280px; width:100%; text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.modalTitle{ font-weight:800; font-size:16px; margin-bottom:8px; }
.modal.wide{ max-width:340px; max-height:76vh; overflow-y:auto; }
.rulesList{ list-style:none; margin:10px 0 16px; padding:0; text-align:left; display:flex; flex-direction:column; gap:10px; }
.rulesList li{ font-size:13px; color:var(--muted); line-height:1.45; }
.rulesList li b{ color:var(--text); }