#stage {
  display: block;
  width: min(900px, 100%);
  height: auto;
  margin-top: 34px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 4px 22px rgba(0, 0, 0, .4), 0 12px 34px rgba(0, 0, 0, .3);
}
#stage.hurt { animation: hurt .45s ease; }
@keyframes hurt { 40% { filter: drop-shadow(0 0 24px rgba(255, 60, 90, .7)); } }

#progressTrack {
  width: min(900px, 100%);
  height: 9px;
  margin-top: 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
#progressFill {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(90deg, #7c3aed, #34d399);
  transition: width .25s ease;
}

.row-label {
  margin-top: 26px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #9aa0d0;
}

/* ---- active firing slots ---- */

#slots {
  display: flex;
  gap: 22px;
  margin-top: 12px;
  min-height: 108px;
}

.slot {
  width: 82px;
  height: 108px;
  border-radius: 18px;
  border: 2px dashed rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
  transition: border-color .2s;
}
.slot.filled { border-style: solid; border-color: rgba(255, 255, 255, .22); cursor: pointer; }
.slot.filled:hover .turret { filter: brightness(1.15); }

/* ---- turret capsule (used in slots and staging) ---- */

.turret {
  position: relative;
  width: 62px;
  height: 84px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset -4px -8px 14px rgba(0,0,0,.35), inset 3px 6px 10px rgba(255,255,255,.25), 0 8px 18px rgba(0,0,0,.4);
}
/* barrel nub */
.turret::before {
  content: "";
  position: absolute;
  top: -10px; left: 50%;
  width: 14px; height: 16px;
  transform: translateX(-50%);
  border-radius: 5px 5px 0 0;
  background: rgba(255, 255, 255, .35);
}
.turret .ammo {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  font-variant-numeric: tabular-nums;
}

.turret.deployed { animation: deploy .3s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes deploy { from { transform: translateY(18px) scale(.7); opacity: 0; } }

/* ---- staging grid ---- */

#staging {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  min-height: 96px;
}

.turret.staged {
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.turret.staged:hover { transform: translateY(-6px); filter: brightness(1.2); }

.staging-empty {
  align-self: center;
  color: #666c99;
  font-size: .85rem;
  font-style: italic;
  padding: 10px 0;
}

#lives .heart { color: #ff5470; font-size: 1rem; margin-right: 2px; text-shadow: 0 0 8px rgba(255,84,112,.6); }
#lives .heart.off { color: rgba(255,255,255,.14); text-shadow: none; }