:root{
  --bg:#0F172A; --bg2:#111c33; --fg:#FFFFFF;
  --muted:#1F1E27; --border:rgba(255,255,255,.09);
  --primary:#D97706; --secondary:#F59E0B; --accent:#6366F1;
  --danger:#DC2626; --ok:#22C55E;
  --glass:rgba(15,23,42,.55);
  --hud-font:'JetBrains Mono',ui-monospace,monospace;
  --disp-font:'Orbitron',system-ui,sans-serif;
  --r:14px; --shadow:0 10px 34px rgba(0,0,0,.55);
  --safe: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--fg);
  font-family:var(--hud-font);-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer}

/* ---------- full screens ---------- */
.screen{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:22px;
  background:radial-gradient(1200px 700px at 70% -10%,rgba(217,119,6,.16),transparent 60%),
             radial-gradient(900px 600px at 10% 110%,rgba(99,102,241,.18),transparent 60%),
             linear-gradient(160deg,#0b1220,#0F172A 60%,#0a0f1c)}
.loadInner,.startInner{width:min(560px,94vw);text-align:center}
.logo{font-family:var(--disp-font);font-weight:900;letter-spacing:.06em;
  font-size:clamp(26px,6vw,44px);color:#fff;text-shadow:0 0 26px rgba(245,158,11,.35)}
.logo.big{font-size:clamp(38px,10vw,78px);margin-bottom:6px}
.logo span{color:var(--secondary)}
.tag{color:#9fb0cc;font-size:clamp(12px,3.2vw,15px);margin-bottom:18px;letter-spacing:.04em}

/* ---------- loading ---------- */
.loadTrack{height:8px;border-radius:99px;background:rgba(255,255,255,.08);
  overflow:hidden;margin:22px 0 10px;border:1px solid var(--border)}
#loadBar{height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
  transition:width .25s ease}
.loadText{color:#8ea3c2;font-size:13px}

/* ---------- start ---------- */
.row{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0}
.row label{color:#a9bbd6;font-size:13px;min-width:62px;text-align:left}
select{background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--border);
  border-radius:10px;padding:9px 12px;font-family:inherit;font-size:13px;min-width:150px;
  transition:border-color .2s,background .2s}
select:hover{border-color:rgba(245,158,11,.5);background:rgba(255,255,255,.09)}
.cta{margin-top:18px;width:100%;max-width:320px;padding:14px 22px;border:0;border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));color:#1a1204;
  font-weight:700;font-size:16px;font-family:var(--disp-font);letter-spacing:.05em;
  box-shadow:0 10px 30px rgba(217,119,6,.35);transition:transform .18s,box-shadow .18s,filter .18s}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(217,119,6,.5);filter:brightness(1.06)}
.cta:active{transform:translateY(0)}
.cta.ghost{background:transparent;border:1px solid var(--border);color:#cfe0f7;box-shadow:none}
.cta.ghost:hover{border-color:rgba(245,158,11,.55);background:rgba(255,255,255,.05)}
.keys{margin-top:24px;text-align:right}
.keys h4{font-size:12px;color:#8ea3c2;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.startError{margin:12px auto;padding:10px 14px;border-radius:12px;max-width:460px;
  background:rgba(220,38,38,.14);border:1px solid rgba(220,38,38,.5);color:#ffd9d9;font-size:12.5px}

/* ---------- key grid ---------- */
.keyGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:12.5px;color:#b9c9e2}
.keyGrid b{color:var(--secondary);font-weight:700;margin-inline-end:6px}
.keyGrid .warn{grid-column:1/-1;margin-top:6px;color:#ff9d9d;font-size:12px}

.panel{width:min(600px,94vw);padding:26px;border-radius:20px;text-align:right;
  background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--border);box-shadow:var(--shadow)}
.panel h3{font-family:var(--disp-font);font-size:18px;margin-bottom:16px;color:#fff}
.panel .cta{max-width:none}
.pauseStats{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:13px;color:#c3d3ea;margin:12px 0}
.pauseStats b{color:var(--secondary)}
.fatalMsg{color:#ffd9d9;font-size:13px;line-height:1.8;margin-bottom:6px;word-break:break-word}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:30;pointer-events:none}
#mmWrap{position:absolute;inset-inline-start:14px;top:14px;width:186px;height:186px;
  border-radius:50%;overflow:hidden;border:2px solid rgba(245,158,11,.5);box-shadow:var(--shadow);
  background:rgba(8,12,22,.8)}
#minimap{width:100%;height:100%;display:block}
.mmN{position:absolute;top:3px;left:50%;transform:translateX(-50%);
  font-size:9px;color:var(--secondary);letter-spacing:.1em}
#topbar{position:absolute;inset-inline-end:16px;top:14px;text-align:left;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.money{font-family:var(--disp-font);font-size:clamp(18px,3.4vw,26px);color:#7CE38B;
  text-shadow:0 2px 14px rgba(0,0,0,.8)}
.wanted{display:flex;gap:3px;font-size:19px;line-height:1}
.wanted i{opacity:.16;font-style:normal;color:#FFD54A;transition:opacity .25s,transform .25s}
.wanted i.on{opacity:1;text-shadow:0 0 14px rgba(255,213,74,.85);transform:scale(1.12)}
.wanted i.blink{animation:wb .5s steps(2,end) 0s 6}
@keyframes wb{50%{opacity:.2}}
.clock{font-size:12.5px;color:#a9bbd6;background:rgba(10,15,28,.6);padding:4px 10px;
  border-radius:8px;border:1px solid var(--border)}

/* ---------- mission ---------- */
.mission{position:absolute;top:14px;left:50%;transform:translateX(-50%);text-align:center;
  min-width:min(420px,80vw);padding:10px 18px;border-radius:14px;
  background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--border)}
.mTitle{font-family:var(--disp-font);font-size:14px;color:var(--secondary)}
.mDesc{font-size:12.5px;color:#cfe0f7;margin-top:3px}
.mTimer{font-size:16px;color:#fff;margin-top:2px;font-weight:700}
.mTimer.low{color:#ff7a7a;animation:wb .6s steps(2,end) infinite}

/* ---------- vitals ---------- */
#vitals{position:absolute;inset-inline-end:16px;bottom:calc(22px + var(--safe));width:190px;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.vitRow{width:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end}
.vitRow span{font-size:10.5px;color:#9fb0cc;min-width:44px;text-align:left}
.bar{flex:1;height:9px;border-radius:99px;background:rgba(255,255,255,.1);
  overflow:hidden;border:1px solid var(--border)}
.bar i{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,#16A34A,#7CE38B);transition:width .25s}
.bar.car i{background:linear-gradient(90deg,#C2410C,#F59E0B)}
.bar i.low{background:linear-gradient(90deg,#991B1B,#EF4444)}

/* ---------- speedometer ---------- */
#speedo{position:absolute;inset-inline-start:16px;bottom:calc(22px + var(--safe));
  width:132px;text-align:center}
.dial{position:relative;width:132px;height:132px}
.dial svg{width:100%;height:100%;transform:rotate(126deg)}
.dial circle{fill:none;stroke-width:9;stroke-linecap:round}
.d0{stroke:rgba(255,255,255,.12)}
.d1{stroke:var(--secondary);stroke-dasharray:327;stroke-dashoffset:327;
  transition:stroke-dashoffset .12s linear,stroke .3s}
.dialTxt{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0}
.dialTxt b{font-family:var(--disp-font);font-size:29px;color:#fff;line-height:1}
.dialTxt span{font-size:9.5px;color:#9fb0cc;letter-spacing:.12em}
.carName{font-size:10.5px;color:var(--secondary);letter-spacing:.1em;margin-top:-6px}

/* ---------- prompt / crosshair / toasts ---------- */
.prompt{position:absolute;left:50%;bottom:20%;transform:translateX(-50%);
  padding:9px 18px;border-radius:999px;background:rgba(10,15,28,.78);
  border:1px solid rgba(245,158,11,.5);font-size:13px;color:#fff;white-space:nowrap}
.prompt b{color:var(--secondary)}
.crosshair{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%)}
.crosshair:before,.crosshair:after{content:'';position:absolute;background:rgba(255,255,255,.85)}
.crosshair:before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
.crosshair:after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}
.toasts{position:absolute;left:50%;top:96px;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{padding:9px 16px;border-radius:12px;background:rgba(10,15,28,.86);
  border:1px solid var(--border);font-size:12.5px;color:#fff;
  animation:tin .3s ease both;max-width:min(440px,86vw);text-align:center}
.toast.good{border-color:rgba(34,197,94,.6)}
.toast.bad{border-color:rgba(220,38,38,.6)}
.toast.gold{border-color:rgba(245,158,11,.7)}
@keyframes tin{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
#flash{position:absolute;inset:0;background:#DC2626;opacity:0;transition:opacity .35s;pointer-events:none}
.subtitle{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
  font-size:14px;color:#fff;text-shadow:0 2px 10px #000;text-align:center;max-width:80vw}

/* ---------- touch ---------- */
#touch{position:fixed;inset:0;z-index:40;pointer-events:none}
#stickBase{position:absolute;inset-inline-start:22px;bottom:calc(28px + var(--safe));
  width:132px;height:132px;border-radius:50%;border:2px solid rgba(255,255,255,.2);
  background:rgba(10,15,28,.4);pointer-events:auto}
#stickKnob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;background:rgba(245,158,11,.75);border:2px solid rgba(255,255,255,.5)}
.tbtns{position:absolute;inset-inline-end:20px;bottom:calc(26px + var(--safe));
  display:grid;grid-template-columns:repeat(2,74px);gap:12px;pointer-events:auto}
.tbtn{width:74px;height:74px;border-radius:50%;border:2px solid rgba(255,255,255,.22);
  background:rgba(10,15,28,.6);color:#fff;font-size:13px;font-family:inherit}
.tbtn:active{background:rgba(245,158,11,.5)}

@media (max-width:820px){
  #mmWrap{width:118px;height:118px}
  #vitals{width:140px}
  #speedo{width:96px}
  .dial{width:96px;height:96px}
  .dialTxt b{font-size:21px}
  .keyGrid{grid-template-columns:1fr}
  .mission{min-width:86vw}
}
@media (max-height:520px){ .dial{width:82px;height:82px} #mmWrap{width:96px;height:96px} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} }