*{margin:0;padding:0;box-sizing:border-box;}

body {
  background: #111;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  overflow: hidden;
  transition: background .6s;
}
body.night { background: #0a0a0a; }

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(820px, 96vw);
}

/* ── HUD ─────────────────── */
.hud {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  min-height: 34px;
}

.scores {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(.48rem, 1.4vw, .68rem);
  letter-spacing: .06em;
}
.hi-lbl { color: #555; }
#hiEl   { color: #555; min-width: 5ch; text-align:right; }
#scEl   { color: #444; min-width: 5ch; text-align:right; }
body.night #hiEl  { color: #777; }
body.night #scEl  { color: #888; }
body.night .hi-lbl{ color: #555; }

/* ── Power-up badges ─────── */
.pu-bar { display:flex; gap:6px; align-items:center; min-height:28px; }
.pu-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .42rem;
  padding: 4px 7px;
  border-radius: 20px;
  border: 1.5px solid;
  letter-spacing: .05em;
  animation: blink 1.2s ease infinite;
}
.pu-tag.shield { color:#00e5ff; border-color:#00e5ff; background:rgba(0,229,255,.08); }
.pu-tag.slow   { color:#ffd740; border-color:#ffd740; background:rgba(255,215,64,.08); }
.pu-tag.boost  { color:#ff4081; border-color:#ff4081; background:rgba(255,64,129,.08); }
.pu-bar-inner {
  width: 32px; height: 4px;
  background: currentColor;
  border-radius: 2px;
  transition: width .1s linear;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.65} }

/* ── Canvas ──────────────── */
.canvas-box {
  width:100%;
  border-radius: 6px;
  overflow: hidden;
  outline: 1px solid #1e1e1e;
  box-shadow: 0 0 40px rgba(0,0,0,.6);
}
canvas {
  display: block;
  width: 100%;
  image-rendering: pixelated;
}

/* ── Mobile ──────────────── */
.mob-row { display:none; gap:14px; margin-top:4px; }
.mbtn {
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  background: #1a1a1a;
  color: #666;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  letter-spacing: .05em;
  transition: background .1s;
  -webkit-tap-highlight-color: transparent;
}
.mbtn:active { background:#252525; color:#999; }
@media (pointer:coarse) { .mob-row { display:flex; } }