:root{
  --bg:#0b1015;
  --panel:#111820;
  --panel-2:#0e141b;
  --line:#1e2a36;
  --ink:#e9f1f7;
  --ink-dim:#8fa3b5;
  --go:#5ce1b0;
  --blue:#38bdf8;
  --warn:#ffb454;
  --road:#1a242f;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(900px 500px at 78% -8%, rgba(56,189,248,.14), transparent 60%),
    radial-gradient(700px 460px at 8% 104%, rgba(92,225,176,.12), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  min-height:100vh;
}

.wrap{width:100%;max-width:860px;margin:0 auto;padding:0 20px}

.top{padding:56px 0 26px}
.mark{display:flex;align-items:baseline;gap:2px;font-weight:800;letter-spacing:-.03em;line-height:1}
.mark-num{
  font-size:clamp(52px,11vw,86px);
  background:linear-gradient(135deg,var(--go),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mark-word{font-size:clamp(52px,11vw,86px)}
.tagline{margin:14px 0 0;color:var(--ink-dim);font-size:clamp(16px,2.4vw,19px);max-width:46ch}

.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  margin-bottom:18px;
}

.drop{
  border:1.5px dashed #2b3a49;
  border-radius:12px;
  padding:40px 22px;
  text-align:center;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
  background:rgba(255,255,255,.012);
}
.drop:hover,.drop:focus-visible,.drop.over{border-color:var(--go);background:rgba(92,225,176,.06);outline:none}
.drop.over{transform:translateY(-2px)}
.drop-icon{width:34px;height:34px;stroke:var(--go);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.drop-title{margin:12px 0 6px;font-size:18px;font-weight:600}
.drop-note{margin:0;color:var(--ink-dim);font-size:14px}

.status{margin:14px 2px 0;color:var(--ink-dim);font-size:14px;min-height:20px}
.status.busy{color:var(--blue)}
.status.err{color:var(--warn)}

.result[hidden]{display:none}
.result{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:22px;align-items:start}
.preview{background:#000;border:1px solid var(--line);border-radius:12px;overflow:hidden;line-height:0}
#shot{width:100%;height:auto;display:block}
.verdict-line{margin:0;font-size:clamp(21px,3.4vw,27px);font-weight:700;letter-spacing:-.02em}
.verdict-line.dave{color:var(--go)}
.verdict-sub{margin:8px 0 0;color:var(--ink-dim);font-size:15px}

.controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn{
  font:inherit;font-weight:600;font-size:14px;
  padding:10px 16px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;
  background:linear-gradient(135deg,var(--go),var(--blue));color:#06222c;
  transition:transform .15s ease,opacity .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink-dim)}
.btn.ghost:hover{border-color:#3a4b5c;color:var(--ink)}

.map-panel{padding:18px 18px 12px}
.hud{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.hud-item{
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  padding:9px 14px;display:flex;flex-direction:column;gap:2px;min-width:92px;
}
.hud-item.wide{flex:1;min-width:170px}
.hud-k{font-size:11px;letter-spacing:.14em;color:var(--ink-dim)}
.hud-v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}

#map{width:100%;height:auto;display:block;border-radius:12px;background:#0a0f14}
.block{fill:#0f161d}
.road-base{stroke:var(--road);stroke-width:26;stroke-linecap:round;fill:none}
.road-dash{stroke:#26333f;stroke-width:1.5;stroke-dasharray:9 12;fill:none}
.route-hint{stroke:transparent;stroke-width:14}
.trail{stroke:url(#glow);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}

.dest circle{fill:none;stroke:var(--go);stroke-width:2}
.dest .dest-dot{fill:var(--go);stroke:none}
.dest-label{fill:var(--go);font-size:11px;letter-spacing:.16em;font-weight:600}
.dest.hit circle{stroke:var(--go)}
.dest.hit{animation:pop .5s ease}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
.dest{transform-box:fill-box;transform-origin:center}

.car-body{fill:#ffffff}
.car-halo{fill:rgba(92,225,176,.20)}
.car-ring{stroke:#ffffff;stroke-width:2.5;opacity:0}
.car-arrow{fill:#5ce1b0;opacity:0}
#car.has-face .car-body{opacity:0}
#car.has-face .car-ring,#car.has-face .car-arrow{opacity:1}
#car.dave .car-ring{stroke:#5ce1b0}

.bubble rect,.bubble path{fill:#f4f8fb}
.bubble text{fill:#0b1015;font-size:19px;font-weight:800}
.bubble{transition:opacity .18s ease}

.map-note{margin:12px 2px 6px;color:var(--ink-dim);font-size:14px}

.foot{padding:20px 0 60px;color:#5f7285;font-size:13px}
.foot p{margin:0}

@media (max-width:620px){
  .top{padding:36px 0 18px}
  .result{grid-template-columns:1fr}
  .preview{max-width:240px}
}