:root{
  --bg:#070a1c; --neon:#29f6ff; --pink:#ff3df0; --gold:#ffd23d;
  --panel:rgba(10,16,44,.86); --txt:#eaf6ff;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;color:var(--txt);
  user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}
#wrap{position:fixed;inset:0;overflow:hidden}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:none}
/* ---------- HUD ---------- */
#hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;
  padding:calc(8px + env(safe-area-inset-top)) 12px 0;pointer-events:none;z-index:5;
  text-shadow:0 0 8px rgba(41,246,255,.8);font-variant-numeric:tabular-nums}
#hud.hidden{display:none}
.hud-left,.hud-right{display:flex;flex-direction:column;gap:2px;min-width:110px}
.hud-right{align-items:flex-end}
.hud-row{display:flex;gap:8px;align-items:center;font-size:15px;font-weight:700}
.hud-label{font-size:10px;letter-spacing:2px;opacity:.7}
#hud-score,#hud-high{font-size:18px}
.hud-center{text-align:center}
#hud-mult{font-size:30px;font-weight:900;color:var(--gold);text-shadow:0 0 14px rgba(255,210,61,.9);line-height:1}
#hud-level{font-size:12px;letter-spacing:3px;opacity:.85;margin-top:2px}
#hud-lives{display:flex;gap:4px;font-size:18px}
.mini-btn{pointer-events:auto;background:rgba(20,30,70,.8);border:1px solid var(--neon);color:var(--txt);
  border-radius:8px;min-width:40px;min-height:36px;font-size:15px;font-weight:800;cursor:pointer;margin-left:6px}
.mini-btn:active{transform:scale(.92)}
/* ---------- banners ---------- */
#overdrive-banner{position:absolute;top:12%;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;
  font-size:clamp(26px,6vw,52px);font-weight:900;letter-spacing:3px;color:#fff;
  text-shadow:0 0 18px var(--pink),0 0 46px var(--pink),0 0 80px var(--pink);animation:odpulse .5s infinite alternate}
#overdrive-banner.hidden{display:none}
@keyframes odpulse{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.07)}}
#hint-bar{position:absolute;bottom:23%;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;
  background:rgba(8,12,36,.9);border:1px solid var(--gold);border-radius:12px;padding:8px 16px;
  font-size:14px;max-width:92vw;text-align:center;box-shadow:0 0 18px rgba(255,210,61,.5)}
#hint-bar.hidden{display:none}
/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px;text-align:center;background:radial-gradient(ellipse at 50% 35%,rgba(30,20,90,.88),rgba(5,7,20,.94));
  backdrop-filter:blur(3px)}
.overlay.hidden{display:none}
.title{font-size:clamp(44px,11vw,96px);font-weight:900;letter-spacing:6px;color:#fff;
  text-shadow:0 0 12px var(--neon),0 0 44px var(--neon),0 0 90px var(--pink)}
.title span{color:var(--pink);text-shadow:0 0 12px var(--pink),0 0 44px var(--pink)}
h2{font-size:clamp(30px,7vw,56px);font-weight:900;letter-spacing:4px;text-shadow:0 0 16px var(--neon)}
.subtitle{font-size:clamp(14px,3.4vw,19px);opacity:.92;max-width:640px}
.subtitle b,.od{color:var(--pink)}
.best-line{font-size:16px;letter-spacing:2px;color:var(--gold);font-weight:800}
#newbest{color:#fff;background:linear-gradient(90deg,var(--pink),var(--gold));border-radius:8px;padding:2px 10px;margin-left:8px;animation:odpulse .4s infinite alternate}
#newbest.hidden{display:none}
.menu-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.big-btn{background:linear-gradient(180deg,#1b2a6b,#0d1440);border:2px solid var(--neon);color:#fff;font-weight:900;
  font-size:18px;letter-spacing:2px;border-radius:14px;padding:14px 30px;cursor:pointer;min-height:52px;min-width:170px;
  box-shadow:0 0 18px rgba(41,246,255,.45),inset 0 0 14px rgba(41,246,255,.15)}
.big-btn:active{transform:scale(.95)}
.big-btn.ghost{border-color:var(--pink);box-shadow:0 0 18px rgba(255,61,240,.4)}
.menu-toggles{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{background:rgba(20,30,70,.8);border:1px solid #5a6aa8;color:var(--txt);border-radius:20px;
  padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:1px;cursor:pointer;min-height:40px}
.controls-line{font-size:13px;opacity:.8}
.tiny{font-size:12px;opacity:.65;max-width:560px}
.tiny b{color:var(--gold)}
.help-grid{display:flex;flex-direction:column;gap:10px;max-width:640px;max-height:52vh;overflow-y:auto;
  background:var(--panel);border:1px solid #33407a;border-radius:14px;padding:16px;font-size:14px;line-height:1.45;text-align:left}
.sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin:0 2px}
.sw.n{background:#3fa9ff}.sw.p{background:#b06bff}.sw.v{background:#ff9f2e}.sw.b{background:#3d4a6b;border:1px solid #9fb4ff}
.sw.d{background:#39e6a3}.sw.x{background:#ff4d5e}.sw.f{background:#ff6a00}.sw.vo{background:#ffe93d}.sw.g{background:rgba(200,240,255,.6)}.sw.go{background:var(--gold)}
/* ---------- toast / touch ---------- */
#toast{position:absolute;top:22%;left:50%;transform:translateX(-50%);z-index:9;pointer-events:none;
  background:rgba(8,12,36,.92);border:1px solid var(--neon);padding:10px 22px;border-radius:12px;
  font-weight:800;font-size:17px;letter-spacing:1px;box-shadow:0 0 22px rgba(41,246,255,.5);white-space:nowrap}
#toast.hidden{display:none}
#mobile-btns{position:absolute;bottom:calc(10px + env(safe-area-inset-bottom));left:0;right:0;z-index:7;
  display:flex;justify-content:center;gap:14px;pointer-events:none}
#mobile-btns.hidden{display:none}
.touch-btn{pointer-events:auto;border:2px solid var(--gold);background:rgba(40,30,8,.85);color:#fff;font-weight:900;
  font-size:16px;border-radius:40px;padding:16px 30px;min-height:58px;min-width:170px;letter-spacing:1px}
.touch-btn.small{min-width:60px;padding:16px 18px;border-color:var(--neon)}
.touch-btn:active{transform:scale(.93)}
#stick{position:absolute;z-index:8;width:120px;height:120px;border:2px solid rgba(41,246,255,.7);border-radius:50%;
  background:radial-gradient(circle,rgba(41,246,255,.12),transparent 70%);pointer-events:none;transform:translate(-50%,-50%)}
#stick.hidden{display:none}
#stick-nub{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,#fff, var(--neon) 55%, #0a5a70);box-shadow:0 0 16px var(--neon)}
@media (pointer:fine){#mobile-btns{display:none!important}}
@media (prefers-reduced-motion:reduce){#overdrive-banner,.title{animation:none}}