:root {
  --neon-cyan: #39ffe0;
  --neon-pink: #ff2e9a;
  --neon-purple: #7a3aff;
  --neon-gold: #ffd23f;
  --panel-bg: rgba(14, 10, 28, 0.92);
  --panel-border: rgba(57, 255, 224, 0.25);
}

#game-wrap {
  position: relative;
  /* Width is always the driving dimension and height is derived from the
     fixed 9:16 aspect-ratio (never the other way around) — the canvas
     renderer assumes a true 9:16 box and would distort if width/height
     were constrained independently. */
  width: min(100%, 520px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  background: #05040a;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 0 60px rgba(57, 255, 224, 0.08), 0 20px 60px rgba(0,0,0,0.6);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

@media (max-width: 540px) {
  /* This page has a header + ad slot above the game — on short phones,
     letting the game claim its full natural (width-driven) height would
     push Play below the fold. Cap it via height instead, still deriving
     width from the same 9:16 aspect-ratio so nothing ever distorts. */
  #game-wrap { width: min(100%, calc(84svh * 9 / 16)); border-radius: 0; }
}

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

#game-wrap.shake { animation: shakeWrap 0.4s ease; }
@keyframes shakeWrap {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-4px, 4px); }
  80% { transform: translate(3px, -2px); }
}

/* ---------------------------------------------------------------- HUD */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: max(10px, env(safe-area-inset-top)) 14px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
  z-index: 20;
  gap: 8px;
}
#hud > * { pointer-events: auto; }

.hud-stat {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.3;
  min-width: 64px;
}
.hud-stat .val { display: block; font-size: 18px; color: var(--neon-cyan); }
#hud-best .val { color: var(--neon-gold); }

#hud-combo {
  position: absolute;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-bg);
  border: 1px solid var(--neon-pink);
  border-radius: 20px;
  padding: 4px 14px;
  font-weight: 800;
  color: var(--neon-pink);
  font-size: 15px;
}

#hud-coins {
  position: absolute;
  top: 74px;
  right: 14px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 13px;
}

#hud-powerup {
  position: absolute;
  top: 110px;
  right: 14px;
  font-size: 20px;
  background: var(--panel-bg);
  border-radius: 10px;
  padding: 4px 8px;
}

.pulse { animation: pulseScale 0.35s ease; }
@keyframes pulseScale {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.hud-icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------------------- popups */
#popup-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 25;
}
.score-popup {
  position: absolute;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  text-shadow: 0 0 8px currentColor, 0 2px 4px rgba(0,0,0,0.6);
  animation: popupFloat 0.9s ease forwards;
  white-space: nowrap;
}
.tier-perfect { color: var(--neon-cyan); font-size: 20px; }
.tier-near { color: var(--neon-gold); }
.tier-air { color: #7cf7ff; }
.tier-ramp { color: var(--neon-pink); }
.tier-puddle { color: #7fb8ff; }
.tier-shield { color: var(--neon-cyan); }
.tier-powerup { color: var(--neon-gold); font-size: 18px; }
.tier-achievement { color: #ffe27a; font-size: 18px; }
@keyframes popupFloat {
  0% { opacity: 0; transform: translateY(10px) scale(0.8); }
  20% { opacity: 1; transform: translateY(0) scale(1.1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px) scale(1); }
}