*{box-sizing:border-box}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{
  font-family:Inter,system-ui,sans-serif;color:#F4F5F7;overflow:hidden;
  background:radial-gradient(90% 60% at 50% -10%,#6f8bff22,transparent 70%),linear-gradient(180deg,#141821,#0c0e13);
}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}

:root{--accent:#8AA2FF;--line:#ffffff14;--dim:#8990a0;--good:#4ADE80;--bad:#FF6B8A}

#app{
  height:100dvh;max-width:620px;margin:0 auto;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:10px;
}

/* one slim row: title, shields and active power on the left, stats right —
   every pixel saved here is track the player sees the next gate on */
header{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand{display:flex;align-items:center;gap:12px;line-height:1.1;margin-right:auto;min-width:0}
.brand b{font:700 20px 'Bricolage Grotesque',system-ui,sans-serif;color:var(--accent);letter-spacing:-.01em;white-space:nowrap}
.stats{display:flex;gap:6px}
.stat{min-width:60px;padding:6px 9px;text-align:center;border:1px solid var(--line);border-radius:11px;background:#ffffff08}
.stat b{display:block;font:700 16px 'Space Mono',monospace;font-variant-numeric:tabular-nums;line-height:1.15}
.stat span{display:block;font:9px 'Space Mono',monospace;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.stat.hi b{color:var(--accent)}

.shields{font-size:14px;letter-spacing:4px;color:var(--accent);line-height:1}
.shields.low{color:var(--bad);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
/* active power-up readout: freeze countdown, surge gates left */
.fx{font:11px 'Space Mono',monospace;color:#6EE7FF;letter-spacing:.06em;white-space:nowrap}
.stars{font-size:28px;letter-spacing:6px;margin:2px 0 8px;color:#3a3f4d}
.stars .on{color:#FFC24D;text-shadow:0 0 14px #ffc24d66}
#modalCard .big{font:700 44px 'Bricolage Grotesque',system-ui,sans-serif;color:var(--accent);margin:0 0 6px}
#modalCard .note{font-size:13px;color:var(--dim)}
footer button:disabled{opacity:.4;cursor:default}
.stage{position:relative;flex:1 1 auto;min-height:0;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:#0b0d12;box-shadow:0 24px 50px #0007,inset 0 1px #ffffff0d}
#track{display:block;width:100%;height:100%;touch-action:none}

.paused{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;
  background:#0b0d12d4;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.paused[hidden]{display:none}
.paused b{font:700 26px 'Bricolage Grotesque',system-ui,sans-serif;color:#F4F5F7}
.paused span{font:10px 'Space Mono',monospace;color:var(--dim);letter-spacing:.16em;text-transform:uppercase}

.flash{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .16s ease}
.flash[hidden]{display:none}
.flash.good{background:radial-gradient(60% 40% at 50% 88%,rgba(74,222,128,.30),transparent 70%);opacity:1}
.flash.bad{background:radial-gradient(60% 40% at 50% 88%,rgba(255,107,138,.34),transparent 70%);opacity:1}

footer{display:flex;justify-content:center;gap:8px;flex:0 0 auto}
footer button{min-height:46px;padding:0 16px;border:1px solid var(--line);border-radius:13px;background:#ffffff0d;font-weight:700;font-size:13px;transition:background .18s}
footer button:active{background:#ffffff1a}
footer .primary{background:var(--accent);color:#121627;border-color:var(--accent)}
footer .iconbtn{min-width:46px;padding:0 12px;font-size:17px;line-height:1}
@media(max-width:380px){
  footer button{padding:0 12px;font-size:12px}
  footer .iconbtn{min-width:42px;padding:0 10px;font-size:16px}
}

#modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:#080a0dd9;z-index:5}
#modal[hidden]{display:none}
#modalCard{width:min(400px,100%);padding:26px 24px;border-radius:20px;text-align:center;
  background:#161a24;border:1px solid #ffffff20;box-shadow:0 30px 60px #0008}
#modalCard h2{font:700 25px 'Bricolage Grotesque',system-ui,sans-serif;margin:0 0 10px}
#modalCard p{margin:0 0 12px;font-size:14px;line-height:1.6;color:#B8BEC9}
#modalCard b{color:#fff}
.modalBtn{margin-top:4px;padding:12px 22px;border:0;border-radius:12px;background:var(--accent);color:#121627;font-weight:700;font-size:14px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){.flash{transition:none}}
@media(max-height:640px){
  #app{gap:7px;padding-top:7px}
  .brand b{font-size:17px}
  .stat{min-width:52px;padding:5px 7px}
  .stat b{font-size:14px}
  footer button{min-height:42px}
}

.modalBtn.ghost{background:transparent;border:1px solid rgba(255,255,255,.18);color:#C7CCD5;margin-left:8px}