:root{
  --cyan:#38f5ff;
  --mag:#ff2fb9;
  --amber:#ffcf4a;
  --ink:#05060b;
  --panel:rgba(8,10,20,.52);
  --edge:rgba(120,235,255,.22);
  --font:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Roboto Mono",Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  width:100%;height:100%;overflow:hidden;background:var(--ink);
  color:#eaf6ff;font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;touch-action:none;
}

#scene{position:fixed;inset:0;width:100%;height:100%;display:block}

.hidden{display:none !important}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ================= HUD ================= */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}

.panel{
  position:absolute;padding:10px 14px;border-radius:12px;
  background:var(--panel);
  border:1px solid var(--edge);
  backdrop-filter:blur(9px) saturate(1.3);
  -webkit-backdrop-filter:blur(9px) saturate(1.3);
  box-shadow:0 0 22px rgba(0,0,0,.55), inset 0 0 22px rgba(56,245,255,.05);
}

.panel-lap{top:18px;left:18px;min-width:196px}
.panel-lap .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:1px 0}
.panel-lap .lbl{font-size:10px;letter-spacing:.22em;color:rgba(190,225,255,.55)}
.panel-lap .val{font-size:15px;font-weight:600;letter-spacing:.04em}
.panel-lap .row-big .val{font-size:26px;text-shadow:0 0 16px rgba(56,245,255,.55)}
.panel-lap .hot{color:var(--amber);text-shadow:0 0 14px rgba(255,207,74,.5)}

.panel-speed{top:18px;right:18px;text-align:right;min-width:132px}
.panel-speed .speed{font-family:var(--mono);font-size:40px;line-height:1;font-weight:600;
  text-shadow:0 0 22px rgba(56,245,255,.5)}
.panel-speed .speed em{font-style:normal;font-size:11px;letter-spacing:.18em;
  color:rgba(190,225,255,.5);margin-left:6px}
.panel-speed .gear{margin-top:4px;font-family:var(--mono);font-size:14px;letter-spacing:.3em;
  color:var(--mag);text-shadow:0 0 14px rgba(255,47,185,.6)}

.panel-score{top:112px;right:18px;width:212px}
.score-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.22em;
  color:rgba(190,225,255,.55)}
.score-head .mult{color:var(--amber);letter-spacing:.06em;font-weight:700;font-size:12px;
  text-shadow:0 0 12px rgba(255,207,74,.7)}
.score-val{font-family:var(--mono);font-size:34px;font-weight:700;line-height:1.15;
  text-shadow:0 0 20px rgba(255,47,185,.45)}
.score-pending{font-family:var(--mono);font-size:15px;height:19px;color:var(--cyan);
  text-shadow:0 0 14px rgba(56,245,255,.6)}
.combo-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:5px}
.combo-bar i{display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--mag));
  box-shadow:0 0 12px rgba(255,47,185,.8);transition:width .08s linear}

.panel-map{right:18px;bottom:18px;padding:8px}
.panel-map canvas{display:block;width:260px;height:200px;opacity:.95}
.map-label{position:absolute;top:10px;left:14px;font-size:9px;letter-spacing:.28em;
  color:rgba(190,225,255,.4)}

#toast{
  position:absolute;left:50%;top:16%;transform:translateX(-50%) scale(.9);
  font-size:34px;font-weight:800;letter-spacing:.06em;opacity:0;
  color:#fff;text-shadow:0 0 24px var(--cyan),0 0 60px rgba(56,245,255,.5);
  transition:opacity .18s ease, transform .28s cubic-bezier(.2,1.6,.4,1);
  white-space:nowrap;
}
#toast.show{opacity:1;transform:translateX(-50%) scale(1)}
#toast.gold{color:var(--amber);text-shadow:0 0 24px var(--amber),0 0 70px rgba(255,207,74,.55)}

#warn{
  position:absolute;left:50%;top:58%;transform:translateX(-50%);
  padding:10px 20px;border-radius:10px;font-size:14px;letter-spacing:.14em;
  background:rgba(60,4,20,.55);border:1px solid rgba(255,47,185,.5);
  color:#ffd9ef;box-shadow:0 0 30px rgba(255,47,185,.3);
  animation:blink 1s steps(2,end) infinite;
}
#warn b{color:#fff}
@keyframes blink{50%{opacity:.25}}

#hint{
  position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
  font-size:12px;letter-spacing:.2em;color:rgba(220,240,255,.65);
  text-shadow:0 0 12px rgba(0,0,0,.9);
  transition:opacity .6s ease;
}

/* ================= TITLE ================= */
#title{
  position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(255,47,185,.16), transparent 60%),
    radial-gradient(100% 80% at 20% 90%, rgba(56,245,255,.14), transparent 60%),
    rgba(3,4,10,.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:opacity .45s ease, visibility .45s;
}
#title.gone{opacity:0;visibility:hidden;pointer-events:none}

.title-wrap{text-align:center;padding:0 24px;max-width:760px}

.kicker{font-size:11px;letter-spacing:.55em;color:var(--cyan);margin-bottom:10px;
  text-shadow:0 0 18px rgba(56,245,255,.6)}

#title h1{
  font-size:clamp(52px,11vw,124px);line-height:.92;font-weight:900;letter-spacing:-.02em;
  color:#fff;
  text-shadow:
    0 0 10px rgba(255,255,255,.6),
    0 0 34px rgba(56,245,255,.65),
    0 0 90px rgba(56,245,255,.35);
}
#title h1 span{
  display:block;color:transparent;
  -webkit-text-stroke:2px var(--mag);
  text-shadow:0 0 34px rgba(255,47,185,.75),0 0 90px rgba(255,47,185,.4);
}
.tag{margin-top:16px;font-size:14px;letter-spacing:.06em;color:rgba(225,240,255,.72)}

.controls{margin:30px auto 0;display:flex;flex-direction:column;gap:9px;align-items:center}
.ctrl{display:flex;align-items:center;gap:12px;font-size:12px;color:rgba(215,235,255,.72)}
.keys{display:flex;gap:5px}
.keys b,.ctrl .ctext b{
  display:inline-block;min-width:26px;padding:3px 7px;border-radius:6px;
  background:rgba(56,245,255,.09);border:1px solid rgba(56,245,255,.35);
  color:#dffbff;font-family:var(--mono);font-size:11px;font-weight:600;
  box-shadow:0 0 14px rgba(56,245,255,.18)
}
.ctext{letter-spacing:.08em}

.start-hint{
  margin-top:34px;font-size:13px;letter-spacing:.32em;color:#fff;
  text-shadow:0 0 20px rgba(56,245,255,.8);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.boot{margin-top:14px;font-size:11px;letter-spacing:.18em;color:rgba(180,205,235,.4)}

/* ================= FATAL ================= */
#fatal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(3,4,10,.92);padding:24px}
.fatal-box{max-width:640px;padding:26px 30px;border-radius:14px;line-height:1.6;
  background:rgba(12,8,20,.9);border:1px solid rgba(255,47,185,.45);font-size:14px;
  box-shadow:0 0 60px rgba(255,47,185,.18)}
.fatal-box b{color:#fff;font-size:17px;letter-spacing:.06em}
.fatal-box code{font-family:var(--mono);font-size:12.5px;background:rgba(56,245,255,.1);
  padding:2px 6px;border-radius:5px;color:#9ff4ff}

@media (max-width:720px){
  .panel-map{transform:scale(.72);transform-origin:bottom right}
  .panel-score{width:170px}
  .score-val{font-size:26px}
}