/* Neon Storm - dark neon look, responsive, phone-friendly.
   The stage keeps the canvas aspect ratio (480x720) and overlays sit on top. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: #05060f;
  color: #cfefff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 700px at 50% -10%, #14163a 0%, #05060f 60%),
    #05060f;
}

/* Aspect-ratio container so overlays line up with the canvas exactly. */
#stage {
  position: relative;
  width: min(100vw, calc(100dvh * (480 / 720)));
  height: min(100dvh, calc(100vw * (720 / 480)));
  max-width: 480px;
  max-height: 720px;
  box-shadow: 0 0 40px rgba(94,242,255,0.12), 0 0 0 1px rgba(94,242,255,0.15);
  border-radius: 10px;
  overflow: hidden;
  background: #05060f;
}

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

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 8px 10px;
  pointer-events: none;
  z-index: 5;
}
.hidden { display: none !important; }

.hud-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.hud-item { display: flex; flex-direction: column; line-height: 1; }
.hud-item b { font-size: 18px; letter-spacing: 1px; color: #eafcff; text-shadow: 0 0 8px rgba(94,242,255,0.6); }
.tag { font-size: 9px; letter-spacing: 2px; color: #5ef2ff; opacity: 0.7; margin-bottom: 2px; }
.lives b { color: #ff5d7e; text-shadow: 0 0 8px rgba(255,93,126,0.7); letter-spacing: 2px; }
.best b { color: #ffd166; text-shadow: 0 0 8px rgba(255,209,102,0.5); }
.lvl { text-align: center; }
.lvl b { color: #b388ff; text-shadow: 0 0 8px rgba(179,136,255,0.7); }

/* power-up badges with shrinking bars */
.pbadges { display: flex; gap: 8px; margin-top: 8px; }
.pbadge {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid currentColor;
}
.pbadge.show { display: inline-flex; }
.pbadge i { width: 46px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.15); overflow: hidden; display: inline-block; }
.pbadge u { display: block; height: 100%; width: 100%; border-radius: 3px; }
.pbadge.shield { color: #5ef2ff; text-shadow: 0 0 8px rgba(94,242,255,0.7); }
.pbadge.shield u { background: #5ef2ff; box-shadow: 0 0 8px #5ef2ff; }
.pbadge.triple { color: #ffde59; text-shadow: 0 0 8px rgba(255,222,89,0.7); }
.pbadge.triple u { background: #ffde59; box-shadow: 0 0 8px #ffde59; }

/* ---------- system buttons ---------- */
#sys {
  position: absolute;
  top: 52px; right: 10px;
  display: flex;
  gap: 6px;
  z-index: 6;
}
.sysbtn {
  width: 34px; height: 30px;
  background: rgba(10,12,30,0.55);
  border: 1px solid rgba(94,242,255,0.35);
  border-radius: 8px;
  color: #cfefff;
  font-size: 14px;
  cursor: pointer;
}
.sysbtn.muted { color: #ff5d7e; border-color: rgba(255,93,126,0.5); }
.sysbtn:active { transform: scale(0.94); }

/* ---------- overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(10,12,32,0.55), rgba(3,4,12,0.9));
  backdrop-filter: blur(3px);
  z-index: 10;
  padding: 16px;
}
.overlay.show { display: flex; }
.panel {
  max-width: 360px;
  width: 100%;
  padding: 20px 18px;
  border-radius: 16px;
  border: 1px solid rgba(94,242,255,0.25);
  background: rgba(6,8,22,0.72);
  box-shadow: 0 0 30px rgba(94,242,255,0.18), inset 0 0 30px rgba(255,46,136,0.06);
}

.logo {
  font-size: 40px;
  margin: 0 0 2px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #5ef2ff;
  text-shadow: 0 0 10px #5ef2ff, 0 0 28px rgba(94,242,255,0.7);
}
.logo span { color: #ff2e88; text-shadow: 0 0 10px #ff2e88, 0 0 28px rgba(255,46,136,0.7); }
.tagline { margin: 0 0 16px; opacity: 0.7; letter-spacing: 2px; font-size: 11px; text-transform: uppercase; }

.howto {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  font-size: 13px;
  line-height: 1.9;
  color: #b9cbe6;
}
.howto b { color: #eafcff; }
.s-shield { color: #5ef2ff; }
.s-triple { color: #ffde59; }
.s-boss { color: #ff2e88; }

.best-line { margin: 8px 0 14px; font-size: 13px; letter-spacing: 2px; color: #ffd166; }
.best-line b { text-shadow: 0 0 8px rgba(255,209,102,0.6); }

.cta, .ghost {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  letter-spacing: 2px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid #5ef2ff;
  color: #021018;
  background: linear-gradient(180deg, #7df9ff, #37d6e8);
  box-shadow: 0 0 18px rgba(94,242,255,0.5);
  font-weight: 700;
}
.cta:active { transform: translateY(1px); }
.ghost {
  background: transparent;
  color: #cfefff;
  border: 1px solid rgba(94,242,255,0.35);
  box-shadow: none;
}
.btns { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.hint { font-size: 11px; opacity: 0.55; margin-top: 12px; }

.ptitle { font-size: 30px; margin: 4px 0 14px; letter-spacing: 3px; color: #eafcff; text-shadow: 0 0 12px rgba(94,242,255,0.6); }
.ptitle.over { color: #ff2e88; text-shadow: 0 0 12px rgba(255,46,136,0.8); }
.newbest { display: none; margin-bottom: 8px; color: #ffde59; letter-spacing: 2px; text-shadow: 0 0 10px rgba(255,222,89,0.7); }
.stats { display: flex; justify-content: space-around; gap: 8px; margin: 12px 0 18px; }
.stats > div { display: flex; flex-direction: column; }
.stats span { font-size: 10px; letter-spacing: 2px; opacity: 0.6; }
.stats b { font-size: 22px; color: #eafcff; text-shadow: 0 0 8px rgba(94,242,255,0.5); }

/* ---------- touch controls ---------- */
#touch { position: absolute; inset: 0; z-index: 7; pointer-events: none; display: none; }
.tbtn {
  position: absolute;
  pointer-events: auto;
  background: rgba(10,12,30,0.4);
  border: 1px solid rgba(94,242,255,0.3);
  color: #9fd6ff;
  border-radius: 12px;
  user-select: none;
  font-size: 20px;
  touch-action: none;
}
.tbtn:active { background: rgba(94,242,255,0.2); color: #eafcff; }
.tbtn.left  { left: 10px;  bottom: 20px; width: 60px; height: 60px; }
.tbtn.right { left: 82px;  bottom: 20px; width: 60px; height: 60px; }
.tbtn.up    { right: 82px; bottom: 90px; width: 60px; height: 60px; }
.tbtn.down  { right: 82px; bottom: 20px; width: 60px; height: 60px; }
.tbtn.fire  {
  right: 10px; bottom: 20px; width: 82px; height: 82px;
  border-radius: 50%;
  border-color: rgba(255,46,136,0.6);
  color: #ff8ab4;
  font-size: 15px;
  letter-spacing: 1px;
}

/* show touch controls only where fine pointers are unavailable */
@media (hover: none) and (pointer: coarse) {
  #touch { display: block; }
}
@media (max-width: 480px) {
  #stage { border-radius: 0; box-shadow: none; }
  .logo { font-size: 34px; }
}