/* NEON DRIFT // 1986 — zero dependency, file:// safe */
:root{
  --pink:#ff2e88; --cyan:#25f4ee; --purple:#7a2ff2; --yellow:#ffd166;
  --ink:#070317; --dim:#9a8fb8;
  --mono:"Courier New",Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#04010d;color:#fff}
body{font-family:var(--mono);-webkit-user-select:none;user-select:none;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent}
kbd{display:inline-block;min-width:22px;padding:2px 6px;border:1px solid rgba(37,244,238,.55);border-radius:3px;
  background:rgba(37,244,238,.08);color:var(--cyan);font-size:11px;text-align:center;box-shadow:0 0 8px rgba(37,244,238,.18)}
b{font-weight:700}
.hidden{display:none !important}

#cabinet{position:fixed;inset:0;overflow:hidden;background:#04010d}
#game{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- CRT ---------- */
#crt{position:absolute;inset:0;pointer-events:none;z-index:20;overflow:hidden}
.crt-lines{position:absolute;inset:0;opacity:.30;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,
    rgba(0,0,0,.55) 3px,rgba(0,0,0,.55) 4px);
  mix-blend-mode:multiply}
.crt-vignette{position:absolute;inset:-2%;
  background:radial-gradient(ellipse 78% 72% at 50% 48%,rgba(0,0,0,0) 40%,rgba(10,0,25,.34) 74%,rgba(2,0,10,.92) 100%)}
.crt-glow{position:absolute;inset:0;opacity:.10;
  background:linear-gradient(180deg,rgba(255,46,136,.16),transparent 45%,rgba(37,244,238,.12));
  animation:flicker 5.5s steps(2,end) infinite}
@keyframes flicker{0%,97%{opacity:.10}98%{opacity:.18}100%{opacity:.09}}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;z-index:30;pointer-events:none;
  padding:22px 28px;text-shadow:0 0 10px rgba(37,244,238,.35)}
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.panel{background:linear-gradient(160deg,rgba(18,3,42,.62),rgba(6,1,20,.35));
  border:1px solid rgba(255,46,136,.35);border-radius:4px;padding:12px 16px;
  box-shadow:0 0 22px rgba(255,46,136,.13),inset 0 0 18px rgba(37,244,238,.05);
  backdrop-filter:blur(2px)}
.label{font-size:10px;letter-spacing:.24em;color:var(--dim)}
.speed-panel{min-width:212px}
.speed-row{display:flex;align-items:baseline;gap:8px;margin-top:2px}
#hud-speed{font-size:56px;line-height:.95;font-weight:700;letter-spacing:-.04em;
  color:#fff;text-shadow:0 0 8px #fff,0 0 22px var(--pink),0 0 44px var(--pink);font-variant-numeric:tabular-nums}
.unit{font-size:11px;letter-spacing:.18em;color:var(--cyan)}
.speed-meter{height:5px;margin:9px 0 8px;background:rgba(255,255,255,.10);border-radius:3px;overflow:hidden}
.speed-meter i{display:block;height:100%;width:0%;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--pink));box-shadow:0 0 12px var(--pink);transition:width .08s linear}
.sub{font-size:10px;letter-spacing:.12em;color:var(--dim)}
.sub b{color:#fff;font-size:12px}
.center-panel{text-align:center;border-color:rgba(37,244,238,.28);min-width:230px;padding:10px 20px}
.brand{font-size:17px;font-weight:700;letter-spacing:.30em;color:#fff;text-shadow:0 0 12px var(--cyan)}
.brand span{color:var(--pink);text-shadow:0 0 12px var(--pink)}
.phase{margin-top:5px;font-size:10px;letter-spacing:.20em;color:var(--cyan)}
.phase .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;
  background:var(--yellow);box-shadow:0 0 10px var(--yellow)}
.combo{height:20px;margin-top:4px;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--yellow);
  text-shadow:0 0 14px var(--yellow);opacity:0;transition:opacity .2s}
.combo.on{opacity:1}
.score-panel{min-width:214px}
.score-panel .row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:2px 0}
.score-panel b{font-size:14px;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(255,46,136,.7)}
.score-panel .row:first-child b{font-size:20px;color:var(--pink)}
.hud-bottom{position:absolute;left:28px;right:28px;bottom:20px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.nitro-wrap{width:min(360px,42vw)}
.nitro-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.22em;color:var(--cyan);margin-bottom:5px}
.nitro-track{position:relative;height:14px;border:1px solid rgba(37,244,238,.55);border-radius:3px;
  background:rgba(3,10,25,.72);box-shadow:0 0 16px rgba(37,244,238,.20),inset 0 0 10px rgba(0,0,0,.8);overflow:hidden}
.nitro-track i{display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#1b6cff,var(--cyan) 60%,#fff);
  box-shadow:0 0 18px var(--cyan),0 0 34px rgba(37,244,238,.6);transition:width .1s linear}
.nitro-track em{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 24px,rgba(0,0,0,.55) 24px,rgba(0,0,0,.55) 26px)}
.nitro-hint{font-size:9px;letter-spacing:.16em;color:var(--dim);margin-top:6px}
.nitro-wrap.full .nitro-hint{color:var(--yellow);animation:blink .7s steps(2,end) infinite}
@keyframes blink{50%{opacity:.25}}
.key-hints{font-size:10px;letter-spacing:.10em;color:var(--dim);text-align:right;line-height:2}
.key-hints kbd{margin:0 3px 0 8px}
#hud-banner{position:absolute;left:50%;top:31%;transform:translate(-50%,-50%);
  font-size:clamp(24px,4vw,52px);font-weight:700;letter-spacing:.18em;white-space:nowrap;
  color:#fff;opacity:0;text-shadow:0 0 12px #fff,0 0 30px var(--pink),0 0 60px var(--pink)}
#hud-banner.show{animation:banner 1.15s ease-out forwards}
@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
  68%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(28,4,58,.78),rgba(2,0,10,.94));
  backdrop-filter:blur(3px)}
#start{text-align:center}
.start-inner{padding:20px;max-width:820px}
.start-kicker{font-size:11px;letter-spacing:.55em;color:var(--cyan);margin-bottom:18px;
  text-shadow:0 0 12px var(--cyan)}
.logo{font-size:clamp(52px,10vw,124px);line-height:.88;font-weight:700;letter-spacing:.02em;
  display:flex;flex-direction:column;align-items:center;font-style:italic}
.logo span:first-child{color:#fff;text-shadow:0 0 18px #fff,0 0 44px var(--cyan),0 0 90px var(--cyan)}
.logo span:last-child{color:var(--pink);text-shadow:0 0 18px var(--pink),0 0 48px #ff0055,0 0 100px #ff0055;
  background:linear-gradient(180deg,#ffe3f1 0%,var(--pink) 48%,#8d1a6b 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.logo-sub{margin-top:14px;font-size:11px;letter-spacing:.30em;color:var(--dim)}
.start-rule{height:2px;margin:28px auto 22px;width:min(560px,86vw);
  background:linear-gradient(90deg,transparent,var(--pink),var(--cyan),transparent);
  box-shadow:0 0 16px var(--pink)}
.start-desc{font-size:12px;line-height:2;color:#cfc3e8;letter-spacing:.06em}
.btn{margin-top:26px;padding:15px 44px;border:2px solid var(--pink);border-radius:3px;
  background:linear-gradient(180deg,rgba(255,46,136,.22),rgba(122,47,242,.18));
  color:#fff;font-size:16px;font-weight:700;letter-spacing:.28em;
  box-shadow:0 0 20px rgba(255,46,136,.55),inset 0 0 20px rgba(255,46,136,.16);
  transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{transform:translateY(-2px);background:linear-gradient(180deg,rgba(255,46,136,.42),rgba(122,47,242,.3));
  box-shadow:0 0 34px rgba(255,46,136,.85),inset 0 0 26px rgba(255,46,136,.3)}
.btn:active{transform:translateY(1px)}
.btn.ghost{border-color:rgba(37,244,238,.6);box-shadow:0 0 14px rgba(37,244,238,.3);font-size:12px;padding:10px 26px;margin-top:20px}
.start-btn{animation:pulse 2.1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 38px rgba(255,46,136,.95),inset 0 0 28px rgba(255,46,136,.34)}}
.start-keys{margin-top:22px;font-size:10px;letter-spacing:.14em;color:var(--dim)}
.dialog{border:1px solid rgba(255,46,136,.55);border-radius:5px;padding:26px 30px;
  background:linear-gradient(155deg,rgba(24,3,52,.96),rgba(5,1,18,.97));
  box-shadow:0 0 40px rgba(255,46,136,.25),inset 0 0 30px rgba(37,244,238,.05);max-width:min(880px,92vw)}
.dialog-title{font-size:20px;font-weight:700;letter-spacing:.24em;color:#fff;
  text-shadow:0 0 16px var(--pink);margin-bottom:20px;text-align:center}
.dialog-title span{color:var(--cyan);font-size:11px;letter-spacing:.3em;margin-left:8px}
.help-cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.help-cols h3{font-size:11px;letter-spacing:.26em;color:var(--cyan);margin:0 0 12px;
  border-bottom:1px solid rgba(37,244,238,.25);padding-bottom:6px}
.help-cols h3:not(:first-child){margin-top:20px}
.krow{display:flex;align-items:center;gap:5px;margin:6px 0;font-size:11px}
.krow span{margin-left:10px;color:#cfc3e8;letter-spacing:.05em}
.help-cols p{font-size:11px;line-height:1.9;color:#cfc3e8;margin:8px 0}
.pink{color:var(--pink)}.cyan{color:var(--cyan)}.yellow{color:var(--yellow)}
.mono{color:var(--cyan);font-size:10px;line-height:2;letter-spacing:.06em}
.pause-dialog{text-align:center;min-width:320px}
.dim{color:var(--dim);font-size:11px;letter-spacing:.1em}
#fatal{position:absolute;inset:0;z-index:99;background:#0a0018;color:#ff7aae;padding:40px;
  font-size:13px;line-height:1.8;white-space:pre-wrap;overflow:auto}

/* ---------- touch ---------- */
#touch{position:absolute;inset:0;z-index:40;pointer-events:none;display:none}
.touch-left,.touch-right{position:absolute;bottom:22px;display:flex;gap:10px;align-items:flex-end;pointer-events:none}
.touch-left{left:18px}.touch-right{right:18px;flex-wrap:wrap;justify-content:flex-end;max-width:270px}
.tbtn{pointer-events:auto;display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(255,46,136,.65);border-radius:8px;
  background:linear-gradient(180deg,rgba(255,46,136,.20),rgba(20,2,44,.75));
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;
  box-shadow:0 0 14px rgba(255,46,136,.32);touch-action:none}
.tbtn.steer{width:66px;height:66px;font-size:22px}
.tbtn.gas{width:84px;height:84px;border-color:rgba(37,244,238,.7);color:var(--cyan);
  box-shadow:0 0 18px rgba(37,244,238,.4);font-size:13px}
.tbtn.small{width:78px;height:42px;border-color:rgba(37,244,238,.45)}
.tbtn.cyan{color:var(--cyan)}
.tbtn.on{background:rgba(255,46,136,.55);box-shadow:0 0 26px var(--pink);transform:scale(.95)}
@media (hover:none),(pointer:coarse){#touch{display:block}.key-hints{display:none}}
@media (max-width:760px){
  #hud{padding:12px}.hud-top{gap:6px}
  .panel{padding:7px 9px}.speed-panel{min-width:126px}.center-panel{min-width:0;padding:6px 8px}
  .score-panel{min-width:130px}
  #hud-speed{font-size:34px}.brand{font-size:11px;letter-spacing:.12em}
  .score-panel b{font-size:11px}.score-panel .row:first-child b{font-size:15px}
  .label,.sub,.phase,.nitro-hint{font-size:8px}
  .hud-bottom{left:12px;right:12px;bottom:100px}.nitro-wrap{width:52vw}
  .help-cols{grid-template-columns:1fr;gap:18px}
  .dialog{padding:18px;max-height:88vh;overflow:auto}
}