:root {
  --cyan: #28f0ff;
  --violet: #8b5bff;
  --magenta: #ff3df0;
  --danger: #ff2e4d;
  --gold: #ffd23f;
  --ink: #05060f;
  --panel: rgba(10, 13, 28, 0.92);
}

#game-shell {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  min-height: 100dvh;
  background: #000;
  overflow: hidden;
}

#app {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: #05060f;
  box-shadow: 0 0 60px rgba(139, 91, 255, 0.15);
}

@media (min-width: 640px) {
  #app { max-width: 480px; border-radius: 18px; margin: 16px auto; height: min(860px, 96dvh); }
  #game-shell { align-items: center; }
}

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

/* ---------------- HUD ---------------- */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
/* Three-column grid (score | height | pause) — a deliberate structural
   choice, not a positioning patch: score, height and the pause button each
   get their own column so none can ever collide with another, regardless
   of what gets added to the header later (this project's other games
   needed several rounds of patches to arrive at this same conclusion for
   a shared-corner flex layout — applied directly here from the start). */
.hud-top {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 8px;
  padding: 0 14px;
}
.hud-score, .hud-height {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.hud-height { align-items: center; }
.hud-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(244, 248, 255, 0.6);
}
#hud-score-value, #hud-height-value {
  font-size: 20px;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(40, 240, 255, 0.6);
}
#hud-combo {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 46px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 61, 240, 0.18);
  border: 1px solid var(--magenta);
  color: var(--magenta);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  text-shadow: 0 0 10px var(--magenta);
}
#btn-pause {
  justify-self: end;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 26, 54, 0.75);
  border: 1px solid rgba(139, 91, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  pointer-events: auto;
}
#btn-pause[hidden] { display: none; }

.banner {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  text-align: center;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-shadow: 0 0 16px currentColor, 0 0 32px currentColor;
  pointer-events: none;
  z-index: 6;
  white-space: nowrap;
}
.banner[hidden] { display: none; }
.banner-pop { animation: bannerPop 0.9s ease-out; }
@keyframes bannerPop {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  15% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
#combo-banner { top: 44%; color: var(--magenta); }
#milestone-banner { top: 24%; color: var(--cyan); }

/* ---------------- countdown ---------------- */
#countdown-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 7;
  pointer-events: none;
}
#countdown-value {
  font-size: 96px;
  font-weight: 900;
  color: var(--cyan);
  text-shadow: 0 0 30px var(--cyan);
}
#countdown-screen[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .banner-pop { animation: none; }
}