/* Brood Front: battle screen (T812). Everything is scoped to #battle or to
   the full-bleed shell. The battle hides the kit header and keeps its own
   in-stage pause button (P051); the section pads by the --rr-inset-* tokens. */
.game-shell.full-bleed > .menu-bar { display: none; }

#battle.screen {
  position: relative;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  text-align: left;
  padding: 0;                 /* full bleed (T875): the stage pads itself by the insets */
  overflow: hidden;
}

/* The stage is the whole screen; the canvas is centred in it at scale
   min(w / 300, h / 600). The band floats over the top of the field. */
#battle .bt-stage {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 var(--rr-inset-right) var(--rr-inset-bottom) var(--rr-inset-left);
  overflow: hidden;
  /* behind and around the canvas (T936): a deep violet well that the field's own vignette fades into */
  background: radial-gradient(ellipse at 50% 45%, #1a1430 0%, #0d0a1c 55%, #07050f 100%);
}
#battle canvas {
  display: block;
  flex: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* The HUD band (T875): one translucent strip over the top of the field, 52 px
   plus the camera inset (--bt-off is how far the canvas sits below the stage
   top, so the inset is only added where the canvas reaches the notch). Taps
   pass through it except on its controls. */
#battle .bt-band {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: var(--bt-off, 0px);
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: max(4px, calc(4px + var(--rr-inset-top) - var(--bt-off, 0px))) calc(8px + var(--rr-inset-right)) 4px calc(8px + var(--rr-inset-left));
  background: linear-gradient(180deg, rgba(10, 8, 24, 0.82), rgba(10, 8, 24, 0.66));
  border-bottom: 1px solid rgba(230, 220, 255, 0.16);
  color: #f2ecff;
  pointer-events: none;
}
#battle .bt-band button,
#battle .bt-band .bf-salvage { pointer-events: auto; }

#battle .bt-timer {
  flex: none;
  min-width: 3.1em;
  font: 700 1.15rem/44px ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
#battle .bt-wall {
  flex: 1 1 0;
  min-width: 52px;
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
#battle .bt-wall-label { font-size: 0.6rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
#battle .bt-wall-bar {
  position: relative;
  height: 18px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
#battle .bt-wall-fill { display: block; height: 100%; width: 100%; background: #8ea0c8; border-radius: 9px; }
#battle .bt-wall-fill.mid { background: #d8a65a; }
#battle .bt-wall-fill.low { background: #d85a5a; }
#battle .bt-wall-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 0.72rem/1 ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 1px 2px #000;
}

#battle .bt-pause {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid rgba(230, 220, 255, 0.4);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  touch-action: manipulation;
  cursor: pointer;
}
#battle .bt-pause i { display: block; width: 5px; height: 18px; border-radius: 2px; background: #e6dcff; }
#battle .bt-hud { flex: none; display: flex; align-items: center; gap: 6px; height: 44px; }