* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: #14101d radial-gradient(1200px 700px at 50% 30%, #241b38 0%, #14101d 60%);
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: #f4ede4;
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#stage {
  position: relative; overflow: hidden; border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.65), 0 0 0 3px #2c2342, 0 0 0 6px #0c0914;
  background: #1e1b2e;
  touch-action: none;
}
#bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#entities { position: absolute; inset: 0; }
#entities img.sprite { position: absolute; pointer-events: none; }
.bullet {
  position: absolute; height: 5px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, #ffe9a8, #ffb547);
  box-shadow: 0 0 8px 2px rgba(255,181,71,.75);
}
.proj {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #9fe870, #3d7a1e 70%, #274d12);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.4);
}
.shell {
  background: radial-gradient(circle at 35% 30%, #ffd9d9, #b03a2e 70%, #6e1f16);
}
.pop {
  position: absolute; pointer-events: none; font-weight: 900; color: #ffb547;
  text-shadow: 0 2px 0 #7a3c00, 0 0 12px rgba(0,0,0,.6);
  animation: popfloat .8s ease-out forwards;
}
@keyframes popfloat { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-46px); opacity: 0; } }

/* ---------- HUD ---------- */
#hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: .55em .8em; pointer-events: none;
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
}
#hearts { font-size: 1.35em; letter-spacing: .12em; color: #ff5470; line-height: 1; }
#hearts .off { color: rgba(255,255,255,.25); }
#bombs { font-size: .95em; margin-top: .25em; color: #ffe9a8; font-weight: 700; }
#hud-center { text-align: center; }
#wave-label { font-weight: 900; letter-spacing: .18em; font-size: 1em; color: #f4ede4; }
#bossbar {
  margin-top: .35em; width: 15em; height: .8em; border: 2px solid #f4ede4; border-radius: 6px;
  position: relative; background: rgba(0,0,0,.45); overflow: visible;
}
#bossbar-fill { height: 100%; width: 100%; background: linear-gradient(180deg, #ff7a5c, #c62f1d); border-radius: 3px; transition: width .15s; }
#bossbar span {
  position: absolute; inset: 0; font-size: .62em; font-weight: 900; letter-spacing: .3em;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
#hud-right { display: flex; align-items: center; gap: .5em; }
#score { font-size: 1.5em; font-weight: 900; color: #ffb547; font-variant-numeric: tabular-nums; }
#mute-btn {
  pointer-events: auto; cursor: pointer; border: 2px solid rgba(244,237,228,.5);
  background: rgba(0,0,0,.4); color: #f4ede4; border-radius: 8px;
  width: 1.9em; height: 1.9em; font-size: 1em; line-height: 1;
}
#mute-btn.muted { opacity: .45; text-decoration: line-through; }

/* ---------- Banner ---------- */
#banner {
  position: absolute; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center;
  font-family: "Arial Black", Impact, sans-serif; font-size: 3.2em; letter-spacing: .08em;
  color: #ffb547; text-shadow: 0 4px 0 #7a3c00, 0 8px 28px rgba(0,0,0,.8);
  pointer-events: none; animation: bannerpulse 1.6s ease both;
}
@keyframes bannerpulse { 0% { transform: scale(.7); opacity: 0; } 18% { transform: scale(1.06); opacity: 1; } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Overlays ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 40;
  background: linear-gradient(100deg, rgba(20,14,34,.88) 30%, rgba(20,14,34,.45) 75%);
  display: flex; align-items: center; gap: 2em; padding: 0 6%;
}
.hidden { display: none !important; }
.title-art img { height: 24em; max-height: 78vh; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.title-text { max-width: 34em; }
h1 {
  font-family: "Arial Black", Impact, sans-serif; font-size: 3.4em; line-height: 1.02; letter-spacing: .01em;
}
.word-metal {
  background: linear-gradient(180deg, #fdfdfd 15%, #aebdd1 45%, #5d6f88 55%, #d7e2f0 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(10,14,24,.9));
}
.word-smug {
  background: linear-gradient(180deg, #ffe9a8 10%, #ffb547 50%, #e07b1f 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(80,40,0,.9));
}
.tagline { margin-top: .9em; font-size: 1.02em; line-height: 1.55; color: #e8e0d2; }
.controls { margin-top: .9em; font-size: .92em; line-height: 1.7; color: #cbbfa9; }
.controls b { color: #ffb547; }
button#start-btn, button#restart-btn {
  margin-top: 1.3em; cursor: pointer; border: 0; border-radius: 12px;
  font-family: "Arial Black", Impact, sans-serif; font-size: 1.15em; letter-spacing: .06em;
  padding: .72em 1.5em; color: #2a1503;
  background: linear-gradient(180deg, #ffd97a, #ffb547 55%, #f08c1a);
  box-shadow: 0 6px 0 #9a5205, 0 12px 26px rgba(0,0,0,.5);
  transition: transform .06s, box-shadow .06s, filter .2s;
}
button#start-btn:hover, button#restart-btn:hover { filter: brightness(1.06); }
button#start-btn:active, button#restart-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #9a5205, 0 6px 14px rgba(0,0,0,.5); }
button#start-btn:disabled { filter: grayscale(.6) brightness(.7); cursor: wait; }
.loading { margin-top: .7em; font-size: .85em; color: #9d8fb5; }
#end-screen { flex-direction: column; justify-content: center; text-align: center; gap: .4em; padding: 0 4%; background: rgba(16,11,28,.82); }
#end-screen img { height: 15em; filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)); }
#end-title { font-size: 2.9em; color: #ffb547; text-shadow: 0 4px 0 #7a3c00, 0 8px 24px rgba(0,0,0,.7); }
#end-score { font-size: 1.25em; font-weight: 700; color: #f4ede4; }
#end-screen button { margin-top: .8em; }

/* ---------- Touch controls ---------- */
#touch {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 35;
  display: flex; justify-content: space-between; padding: .6em .8em;
  pointer-events: none;
}
.tcluster { display: flex; gap: .55em; align-items: flex-end; }
#touch button {
  pointer-events: auto; cursor: pointer; border: 2px solid rgba(244,237,228,.55);
  background: rgba(14,10,26,.5); color: #f4ede4; border-radius: 50%;
  width: 3.4em; height: 3.4em; font-size: 1.05em; font-weight: 900;
  backdrop-filter: blur(2px); touch-action: none;
}
#touch button.big { width: 4.3em; height: 4.3em; font-size: .95em; background: rgba(160,70,10,.55); }
#touch button:active { background: rgba(255,181,71,.6); }

#foot { font-size: 12.5px; color: #8d7fa8; text-align: center; max-width: 90vw; }
#foot a { color: #ffb547; text-decoration: none; }
#foot a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .overlay { flex-direction: column; justify-content: center; text-align: center; gap: .8em; padding: 4% 5%; }
  .title-art img { height: 12.5em; }
  h1 { font-size: 2.4em; }
  .title-text { max-width: 100%; }
  #end-screen img { height: 11em; }
  #end-title { font-size: 2.2em; }
  #banner { font-size: 2.2em; }
}