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

:root {
  --cyan: #4df3ff;
  --magenta: #ff3ea5;
  --gold: #ffd23f;
  --bg: #05060f;
  --ink: #e8f4ff;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

body {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 0%, #14163a 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, #2a0b2e 0%, transparent 55%),
    var(--bg);
}

#stage {
  position: relative;
  width: min(100vw, calc(100vh * 0.6667));
  height: min(100vh, calc(100vw * 1.5));
  max-width: 560px;
  max-height: 840px;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 0 0 1px #1d2a4d, 0 0 60px -10px #4df3ff33;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  touch-action: none;
}

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: clamp(9px, 2.1vmin, 12px);
  letter-spacing: 0.08em;
}
.hud-row { display: flex; justify-content: space-between; align-items: flex-end; }
.hud-row.bottom { align-items: flex-end; }
.hud-group { display: flex; flex-direction: column; gap: 6px; }
.weapon { display: flex; align-items: baseline; gap: 5px; line-height: 1; }
.weapon #hud-power {
  color: var(--gold);
  font-size: 1.5em;
  font-weight: 700;
  text-shadow: 0 0 10px #ffd23f88;
  font-variant-numeric: tabular-nums;
}
.weapon .wmax { color: #4a5f88; font-size: 0.85em; }
.weapon.max #hud-power { color: #c084ff; text-shadow: 0 0 12px #c084ffaa; }
.weapon.max .wmax { display: none; }
.wbar {
  width: 74px; height: 3px;
  background: #ffffff14;
  border-radius: 99px;
  overflow: hidden;
}
.wbar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  transition: width .18s ease;
}
.weapon.max ~ .wbar i { background: linear-gradient(90deg, var(--gold), #c084ff); }
.hud-block { display: flex; flex-direction: column; gap: 2px; }
.hud-block.center { align-items: center; }
.hud-block.right { align-items: flex-end; }
.hud-label { color: #6c86b8; font-size: 0.78em; }
.hud-value {
  color: var(--cyan);
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 12px #4df3ff88;
  font-variant-numeric: tabular-nums;
}
.lives, .bombs { display: flex; gap: 5px; }
.pip {
  width: 11px; height: 11px;
  clip-path: polygon(50% 0%, 100% 100%, 50% 78%, 0% 100%);
  background: var(--cyan);
  box-shadow: 0 0 8px #4df3ffaa;
}
.pip.bomb {
  clip-path: none;
  border-radius: 50%;
  width: 9px; height: 9px;
  background: var(--gold);
  box-shadow: 0 0 8px #ffd23faa;
}

#boss-bar {
  position: absolute;
  top: 58px; left: 14%; right: 14%;
  height: 6px;
  background: #ffffff14;
  border: 1px solid #ff3ea555;
  border-radius: 99px;
  overflow: hidden;
  pointer-events: none;
}
#boss-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--magenta), var(--gold));
  transition: width .12s linear;
}

/* ---------- Pantallas ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(ellipse at center, #05060fc4 25%, #05060fee 100%);
  backdrop-filter: blur(3px);
  z-index: 5;
}

.title {
  font-size: clamp(30px, 9vmin, 54px);
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--cyan);
  text-shadow: 0 0 24px #4df3ff66;
}
.title span { display: block; color: var(--magenta); text-shadow: 0 0 24px #ff3ea566; }
.subtitle {
  font-size: clamp(20px, 6vmin, 32px);
  letter-spacing: 0.14em;
  color: var(--magenta);
  text-shadow: 0 0 20px #ff3ea566;
}
.tagline { color: #7f9ac9; font-size: clamp(10px, 2.6vmin, 13px); letter-spacing: .1em; }

.btn {
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: clamp(13px, 3.2vmin, 16px);
  padding: 13px 34px;
  color: var(--bg);
  background: var(--cyan);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 0 22px -4px var(--cyan);
  transition: transform .08s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 30px -2px var(--cyan); }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: transparent;
  color: #8fa8d4;
  box-shadow: inset 0 0 0 1px #33456e;
  padding: 10px 26px;
}
.btn.ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1px #4df3ff88; }

.help { margin-top: 6px; color: #6c86b8; font-size: clamp(9px, 2.3vmin, 11.5px); line-height: 2; }
.help b { color: #a9c4f0; font-weight: 700; }
.best { color: #6c86b8; font-size: clamp(9px, 2.3vmin, 11.5px); letter-spacing: .1em; }
.final { color: #7f9ac9; font-size: clamp(9px, 2.3vmin, 11.5px); letter-spacing: .18em; line-height: 1.9; }
.final span { color: var(--gold); font-size: 2.8em; font-weight: 700; text-shadow: 0 0 20px #ffd23f66; }
.final.small { letter-spacing: .1em; }
.final.small span { font-size: 1em; color: var(--cyan); text-shadow: none; }
.newbest { color: var(--gold); letter-spacing: .2em; font-size: clamp(10px, 2.8vmin, 13px); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- Botones flotantes ---------- */
#touch-bomb {
  position: absolute;
  right: 16px; bottom: 16px;
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1px solid #ffd23f66;
  background: #ffd23f1f;
  color: var(--gold);
  font-size: 20px;
  z-index: 4;
  cursor: pointer;
  touch-action: manipulation;
}
#touch-bomb:active { background: #ffd23f44; }

#btn-sound {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: none;
  border-radius: 50%;
  background: #ffffff10;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  z-index: 6;
  opacity: .5;
}
#btn-sound:hover { opacity: 1; }

.hidden { display: none !important; }

@media (hover: hover) and (pointer: fine) {
  #touch-bomb { display: none !important; }
}