html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #140e1f;
  color: #f3e9d2;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  user-select: none;
}

body.playing, body.playing * { cursor: none; }

/* Layers, bottom to top: stage 0, band 1, HUD 2, crosshair 3, plain page 4. */
#stage, #stage canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

#plain {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  font-size: 1.4rem;
  background: #140e1f;
  z-index: 4;
}

#hud {
  position: fixed;
  inset: 0 0 auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.8rem 1.2rem;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 4px #000;
  pointer-events: none;
  z-index: 2;
}
#hearts { color: #e5484d; font-size: 1.6rem; letter-spacing: 0.2em; }
#score { text-align: center; font-weight: bold; }
#wave, #bossbar { justify-self: end; }
#bossbar { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; }
#bossbar div { width: 14rem; height: 0.8rem; border: 2px solid #f3e9d2; background: #2b1d3f; }
#bossbar i { display: block; height: 100%; background: #c9a227; }
#sound { position: fixed; right: 1rem; bottom: 0.7rem; font-size: 0.85rem; opacity: 0.8; }
#weapons { position: fixed; left: 1.2rem; bottom: 0.7rem; font-size: 1rem; }
#weapons .hand { font-weight: bold; color: #fff4d0; }
#weapons .none { opacity: 0.4; }
/* The pickup notice: in the banners' style, on its own line just below them; the boss hint below it. */
#notice, #hint {
  position: fixed;
  top: calc(50% + 2.2rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 1.2rem;
  font-size: 1.25rem;
  background: rgba(10, 6, 18, 0.72);
}
#hint { top: calc(50% + 4.4rem); }

#band {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1; /* its own stacking context, so the band below sits over the stage */
}
#band::before {
  content: "";
  position: absolute;
  inset: 32% 0;
  background: rgba(10, 6, 18, 0.72);
  z-index: -1;
}
#band h1 { margin: 0 0 0.6rem; font-size: 2.6rem; color: #f0b25a; text-shadow: 0 3px 6px #000; }
#band .lines { text-align: center; font-size: 1.25rem; line-height: 1.8; padding: 0 1rem; }
#band .buttons { display: flex; gap: 1rem; }
#band button {
  margin-top: 1rem;
  padding: 0.6rem 1.6rem;
  font: inherit;
  font-size: 1.2rem;
  color: #140e1f;
  background: #f0b25a;
  border: 0;
  border-radius: 0.3rem;
  cursor: pointer;
  pointer-events: auto;
}

#crosshair {
  position: fixed;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 2px solid #fff4d0;
  border-radius: 50%;
  box-shadow: 0 0 4px #000;
  pointer-events: none;
  z-index: 3;
}
#crosshair::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: #fff4d0;
  border-radius: 50%;
}
/* The Scattergun: a 44 px ring with its pellet pattern, 7 dots evenly on the ring from its right. */
#crosshair.scattergun {
  width: 40px;
  height: 40px;
  margin: -22px 0 0 -22px;
}
#crosshair.scattergun::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -6px;
  width: 52px;
  height: 52px;
  background-image:
    radial-gradient(circle, #fff4d0 2.5px, transparent 3px), radial-gradient(circle, #fff4d0 2.5px, transparent 3px),
    radial-gradient(circle, #fff4d0 2.5px, transparent 3px), radial-gradient(circle, #fff4d0 2.5px, transparent 3px),
    radial-gradient(circle, #fff4d0 2.5px, transparent 3px), radial-gradient(circle, #fff4d0 2.5px, transparent 3px),
    radial-gradient(circle, #fff4d0 2.5px, transparent 3px);
  background-size: 8px 8px;
  background-repeat: no-repeat;
  background-position: 43px 22px, 35.09px 5.58px, 17.33px 1.53px, 3.08px 12.89px, 3.08px 31.11px, 17.33px 42.47px, 35.09px 38.42px;
}
/* The launcher: a dashed 52 px circle for the blast. */
#crosshair.launcher {
  width: 48px;
  height: 48px;
  margin: -26px 0 0 -26px;
  border-style: dashed;
}

[hidden] { display: none !important; }