@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap');

:root{
  --color-primary:#dc2626;
  --color-secondary:#2563eb;
  --color-accent:#22c55e;
  --color-background:#0f172a;
  --color-foreground:#ffffff;
  --color-muted:#1f1829;
  --color-border:rgba(255,255,255,.08);
  --panel:rgba(255,255,255,.05);
  --font-display:'Orbitron', 'Segoe UI', sans-serif;
  --font-body:'JetBrains Mono', ui-monospace, monospace;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-foreground);
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(37,99,235,.28), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(220,38,38,.22), transparent 55%),
    linear-gradient(180deg,#0b1120 0%, var(--color-background) 45%, #070b14 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:18px clamp(10px,3vw,26px) 34px;
  display:flex;
  flex-direction:column;
  gap:14px;
  animation:fadeUp .5s ease both;
}

h1,h2{font-family:var(--font-display);margin:0;letter-spacing:.02em}

h1{font-size:clamp(1.9rem,5vw,3rem);line-height:1.05}

h2{font-size:clamp(1.3rem,3.4vw,1.9rem)}

p{margin:0;line-height:1.7}

kbd{
  font-family:var(--font-body);
  font-size:.72rem;
  padding:2px 7px;
  border-radius:6px;
  border:1px solid var(--color-border);
  background:rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- top bar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border:1px solid var(--color-border);
  border-radius:var(--r-md);
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(12px);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(.95rem,2.6vw,1.15rem);
  letter-spacing:.03em;
}

.brand svg{width:22px;height:22px;color:var(--color-primary)}

.topbar-actions{display:flex;gap:8px}

.icon-btn{
  display:grid;
  place-items:center;
  width:38px;height:38px;
  border-radius:var(--r-sm);
  border:1px solid var(--color-border);
  background:var(--panel);
  color:var(--color-foreground);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.icon-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

.icon-btn.off{color:#94a3b8}
.icon-btn svg{width:19px;height:19px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px 24px;
  border-radius:var(--r-md);
  border:1px solid transparent;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .25s ease, filter .2s ease;
}

.btn svg{width:18px;height:18px}

.btn.primary{
  color:#fff;
  background:linear-gradient(135deg,var(--color-primary),#7f1d1d);
  box-shadow:0 12px 30px rgba(220,38,38,.35);
}

.btn.primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 18px 38px rgba(220,38,38,.45)}
.btn.primary:active{transform:translateY(0)}

.btn:focus-visible,.icon-btn:focus-visible,.tbtn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* ---------- stage ---------- */
.stage{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  min-height:360px;
  max-height:min(76vh,720px);
  border-radius:var(--r-lg);
  border:1px solid var(--color-border);
  overflow:hidden;
  background:#0b1220;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}

canvas#game{display:block;width:100%;height:100%;touch-action:none}

/* ---------- hud ---------- */
.hud{
  position:absolute;
  inset:12px 12px auto auto;
  display:grid;
  gap:8px;
  grid-template-columns:repeat(2,minmax(96px,auto));
  pointer-events:none;
}

.hud-card{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 12px;
  border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(8,12,22,.55);
  backdrop-filter:blur(10px);
}

.hud-label{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#93a4bd}
.hud-value{font-family:var(--font-display);font-weight:900;font-size:1.05rem;line-height:1.15;font-variant-numeric:tabular-nums}
.hud-value small{font-size:.6rem;color:#93a4bd}

.hud-lives .hud-value{display:flex;gap:4px;color:var(--color-primary)}
.hud-lives svg{width:16px;height:16px}

.hud-nitro{grid-column:span 2}
.nitro-track{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.nitro-fill{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--color-accent),#a3e635);
  box-shadow:0 0 12px rgba(34,197,94,.7);
  transition:width .18s linear;
}

.hud-combo{
  grid-column:span 2;
  justify-self:end;
  font-size:.72rem;
  color:#a3e635;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease;
}

.hud-combo.show{opacity:1;transform:none}

/* ---------- overlays ---------- */
.overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  background:linear-gradient(180deg, rgba(7,11,20,.82), rgba(7,11,20,.94));
  backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease, visibility .28s ease;
  z-index:4;
}

.overlay.show{opacity:1;visibility:visible}

.panel{
  width:min(560px,100%);
  display:grid;
  gap:14px;
  justify-items:center;
  text-align:center;
  padding:26px clamp(16px,4vw,32px);
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:fadeUp .38s ease both;
}

.panel.compact{gap:10px;padding:24px}
.lead{font-size:.86rem;color:#c2cee0;max-width:44ch}

.badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 12px;
  border-radius:99px;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#bbf7d0;
  border:1px solid rgba(34,197,94,.4);
  background:rgba(34,197,94,.1);
}

.badge.danger{color:#fecaca;border-color:rgba(220,38,38,.45);background:rgba(220,38,38,.12)}
.badge svg{width:14px;height:14px}

.keys{display:grid;gap:7px;justify-items:center;font-size:.76rem;color:#c2cee0}
.key-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}

.best{font-family:var(--font-display);font-size:.82rem;color:#fbbf24}

.score-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(120px,1fr));
  gap:10px;
  width:100%;
}

.score-grid>div{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:12px;
  border-radius:var(--r-sm);
  border:1px solid var(--color-border);
  background:rgba(255,255,255,.05);
}

.score-grid b{font-family:var(--font-display);font-size:1.2rem}

/* ---------- touch controls ---------- */
.touch{
  position:absolute;
  inset:auto 12px 12px 12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  z-index:5;
  pointer-events:none;
}

.tbtn{
  pointer-events:auto;
  display:grid;
  place-items:center;
  width:58px;height:58px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(8,12,22,.6);
  backdrop-filter:blur(10px);
  color:#e2e8f0;
  cursor:pointer;
  touch-action:none;
  transition:transform .15s ease, background .15s ease;
}

.tbtn:active{transform:scale(.92);background:rgba(255,255,255,.16)}
.tbtn svg{width:22px;height:22px}
.tbtn.wide{width:52px;height:52px;border-radius:var(--r-md)}
.tbtn.accent{color:#bbf7d0;border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.16)}
.touch .spacer{width:10px}

/* ---------- footer ---------- */
.footnote{font-size:.74rem;color:#8b9bb4;text-align:center;max-width:70ch;margin:0 auto}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .stage{aspect-ratio:9/14;max-height:78vh;min-height:420px}
  .hud{inset:10px 10px auto auto;grid-template-columns:repeat(2,minmax(88px,1fr));gap:6px}
  .hud-value{font-size:.95rem}
}

@media (min-width:861px){
  .touch{display:none}
}

@media (max-width:420px){
  .hud-card{padding:6px 9px}
  .hud-value{font-size:.85rem}
  .tbtn{width:52px;height:52px}
  .panel{padding:20px 14px}
}

@media (hover:none) and (pointer:coarse){
  .hint-desktop{display:none}
}