:root{
  --primary:#DC2626; --secondary:#2563EB; --accent:#22C55E;
  --bg:#0F172A; --fg:#FFFFFF; --muted:#1F1829;
  --border:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.05);
  --s:1; --ui1:calc(9px * var(--s)); --ui2:calc(12px * var(--s));
  --ui3:calc(16px * var(--s)); --ui4:calc(24px * var(--s));
  --pixel:'Press Start 2P',monospace; --term:'VT323',monospace;
  --radius:calc(16px * var(--s));
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1000px 600px at 50% -10%, #1b2740 0%, transparent 60%),
    linear-gradient(180deg,#0b1120 0%,#0F172A 60%,#080c16 100%);
  color:var(--fg);
  font-family:var(--term);
  display:grid;place-items:center;
  min-height:100dvh;padding:10px;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 75%);
}
.wrap{position:relative;display:grid;place-items:center}
.stage{
  position:relative;width:min(94vw,calc((100dvh - 22px) * .6),520px);
  aspect-ratio:3/5;border-radius:calc(22px * var(--s));
  overflow:hidden;background:#05070d;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 80px rgba(0,0,0,.75),
             0 0 0 1px rgba(37,99,235,.25),
             0 0 60px rgba(37,99,235,.18);
  touch-action:none;user-select:none;
}
canvas{display:block;width:100%;height:100%}
.crt{
  position:absolute;inset:0;pointer-events:none;z-index:6;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.55;
}

.hud{position:absolute;left:0;right:0;z-index:5;pointer-events:none;
  display:flex;align-items:flex-start;gap:calc(10px * var(--s));
  padding:calc(12px * var(--s));font-family:var(--pixel)}
.hud-bottom{bottom:0;top:auto;align-items:center;justify-content:space-between}
.hud-top{justify-content:flex-start}
.stat{display:flex;flex-direction:column;gap:calc(3px * var(--s))}
.hud-top .stat:nth-child(2){margin-right:auto}
.lbl{font-size:calc(7px * var(--s));letter-spacing:.12em;color:rgba(255,255,255,.55)}
.val{font-size:calc(13px * var(--s));color:#fff;text-shadow:0 0 calc(10px * var(--s)) rgba(37,99,235,.8)}
.val.dim{color:var(--accent);text-shadow:0 0 calc(10px * var(--s)) rgba(34,197,94,.7)}
.speedo{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1;
  padding:calc(7px * var(--s)) calc(11px * var(--s));
  background:var(--glass);backdrop-filter:blur(12px);
  border:1px solid var(--border);border-radius:var(--radius);
}
.speedo .val.big{font-size:calc(19px * var(--s));color:#fff;text-shadow:0 0 calc(14px * var(--s)) rgba(220,38,38,.9)}
.tools{display:flex;gap:calc(7px * var(--s));pointer-events:auto}
.iconbtn{
  pointer-events:auto;cursor:pointer;display:grid;place-items:center;
  width:calc(34px * var(--s));height:calc(34px * var(--s));
  background:var(--glass);backdrop-filter:blur(12px);
  border:1px solid var(--border);border-radius:calc(10px * var(--s));
  color:#dbe4f5;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.iconbtn svg,.padbtn svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.iconbtn svg{width:calc(15px * var(--s));height:calc(15px * var(--s));stroke-width:1.75}
.iconbtn:hover{transform:translateY(-2px);background:rgba(37,99,235,.28);box-shadow:0 8px 20px rgba(37,99,235,.35)}
.iconbtn.off{color:rgba(255,255,255,.35)}
.iconbtn:focus-visible,.cta:focus-visible,.padbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.nitro{display:flex;flex-direction:column;gap:calc(5px * var(--s));width:38%}
.nitro .bar{
  height:calc(11px * var(--s));border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.08);border:1px solid var(--border);
  backdrop-filter:blur(12px);
}
.nitro .fill{
  height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,#1d4ed8,#38bdf8);
  box-shadow:0 0 calc(14px * var(--s)) rgba(56,189,248,.85);
  transition:width .12s linear;
}
.nitro .fill.hot{background:linear-gradient(90deg,#f59e0b,#DC2626);box-shadow:0 0 calc(16px * var(--s)) rgba(220,38,38,.9)}
.pad{display:flex;gap:calc(8px * var(--s));pointer-events:auto}
.padbtn{
  pointer-events:auto;cursor:pointer;display:grid;place-items:center;
  width:calc(48px * var(--s));height:calc(44px * var(--s));
  background:var(--glass);backdrop-filter:blur(12px);
  border:1px solid var(--border);border-radius:calc(12px * var(--s));
  color:#e6edfb;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
}
.padbtn svg{width:calc(19px * var(--s));height:calc(19px * var(--s));stroke-width:1.75}
.padbtn:hover{transform:translateY(-2px);background:rgba(37,99,235,.3)}
.padbtn:active,.padbtn.on{background:rgba(220,38,38,.45);box-shadow:0 0 calc(18px * var(--s)) rgba(220,38,38,.6)}
.padbtn.boom{border-color:rgba(245,158,11,.5);color:#fbbf24}
.padbtn.boom:hover{background:rgba(245,158,11,.28)}

.overlay{
  position:absolute;inset:0;z-index:7;display:grid;place-items:center;
  padding:calc(18px * var(--s));
  background:radial-gradient(circle at 50% 45%,rgba(15,23,42,.72),rgba(4,6,12,.94));
  backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;
}
.overlay.show{opacity:1;visibility:visible}
.panel{
  width:100%;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:calc(11px * var(--s));
  padding:calc(20px * var(--s)) calc(16px * var(--s));
  background:rgba(15,23,42,.55);backdrop-filter:blur(12px);
  border:1px solid var(--border);border-radius:calc(20px * var(--s));
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.overlay.show .panel{animation:fadeUp .45s cubic-bezier(.22,1,.36,1) both}
.kicker{font-family:var(--pixel);font-size:calc(7px * var(--s));letter-spacing:.28em;color:var(--secondary)}
.logo{
  font-family:var(--pixel);font-size:calc(26px * var(--s));line-height:1.18;
  color:#fff;letter-spacing:.02em;
  text-shadow:calc(3px * var(--s)) calc(3px * var(--s)) 0 var(--primary),
              0 0 calc(26px * var(--s)) rgba(220,38,38,.65);
}
.logo span{color:var(--secondary);text-shadow:calc(3px * var(--s)) calc(3px * var(--s)) 0 rgba(255,255,255,.15),0 0 calc(26px * var(--s)) rgba(37,99,235,.8)}
.title{font-family:var(--pixel);font-size:calc(19px * var(--s));color:#fff;text-shadow:0 0 calc(20px * var(--s)) rgba(37,99,235,.8)}
.title.danger{color:#fecaca;text-shadow:calc(3px * var(--s)) calc(3px * var(--s)) 0 var(--primary),0 0 calc(24px * var(--s)) rgba(220,38,38,.9)}
.tagline{font-size:calc(17px * var(--s));line-height:1.35;color:rgba(255,255,255,.72);max-width:32ch}

.keys{display:flex;flex-direction:column;gap:calc(6px * var(--s));width:100%;text-align:left}
.keyrow{
  display:flex;align-items:center;gap:calc(9px * var(--s));
  padding:calc(8px * var(--s)) calc(11px * var(--s));
  background:var(--glass);border:1px solid var(--border);
  border-radius:calc(11px * var(--s));font-size:calc(16px * var(--s));color:rgba(255,255,255,.85)
}
.keyrow svg{flex:none;width:calc(15px * var(--s));height:calc(15px * var(--s));stroke-width:1.75;color:var(--secondary)}
.keyrow b{color:#fff;font-weight:400}
.cta{
  cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:calc(8px * var(--s));
  padding:calc(12px * var(--s));font-family:var(--pixel);font-size:calc(11px * var(--s));
  color:#fff;background:linear-gradient(135deg,var(--primary),#7f1d1d);
  border:1px solid rgba(255,255,255,.18);border-radius:calc(13px * var(--s));
  box-shadow:0 calc(8px * var(--s)) calc(22px * var(--s)) rgba(220,38,38,.35);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.cta svg{width:calc(14px * var(--s));height:calc(14px * var(--s));stroke-width:2}
.cta:hover{transform:translateY(-2px);filter:brightness(1.12);box-shadow:0 calc(12px * var(--s)) calc(28px * var(--s)) rgba(220,38,38,.5)}
.cta:active{transform:translateY(0)}
.cta.ghost{background:rgba(255,255,255,.05);box-shadow:none;border-color:var(--border);color:rgba(255,255,255,.85)}
.cta.ghost:hover{background:rgba(37,99,235,.22);box-shadow:0 calc(10px * var(--s)) calc(24px * var(--s)) rgba(37,99,235,.3)}
.record,.tagline+.record{font-size:calc(16px * var(--s));color:rgba(255,255,255,.6)}
.record b{color:var(--accent)}
.scores{display:flex;gap:calc(10px * var(--s));width:100%}
.scores>div{flex:1;display:flex;flex-direction:column;gap:calc(4px * var(--s));
  padding:calc(10px * var(--s));background:var(--glass);border:1px solid var(--border);border-radius:calc(12px * var(--s))}
.scores .val{font-size:calc(15px * var(--s))}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:420px){ .padbtn{width:calc(42px * var(--s));height:calc(40px * var(--s))} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} }