/* Combat owns a single viewport independently of the exploration layout. */
.combat-heading { display: none; }

html:has(body.in-combat), body.in-combat {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body.in-combat { padding: 0; }

body.in-combat #viewport-container.in-combat {
  --combat-gutter: 12px;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sat) calc(var(--sar) + var(--combat-gutter)) max(12px, var(--sab)) calc(var(--sal) + var(--combat-gutter));
  box-sizing: border-box;
}

/* One parent gutter aligns the arena, hazard border, charge bar and cards. */
#viewport-container.in-combat > .telemetry,
#viewport-container.in-combat > .staging,
#viewport-container.in-combat > .action-dock {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-inline: 0;
}

#viewport-container.in-combat > .telemetry {
  flex: 0 0 48px;
  min-height: 0;
  padding: 0;
}

.in-combat .identity-row { height: 48px; margin: 0; gap: 6px; }
.in-combat .combat-heading { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.in-combat .combat-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffadb5; font-size: 13px; }
.in-combat .combat-heading span { font-size: 12px; color: var(--muted); }
.in-combat .system-controls { flex: 0 0 auto; gap: 2px; }
.in-combat .system-controls button { min-width: 48px; min-height: 48px; height: 48px; padding: 4px; }
.in-combat .brand, .in-combat .telemetry-divider, .in-combat #audio-toggle,
.in-combat .stage-heading, .in-combat .stage-meta, .in-combat .console-footer,
.in-combat .loadout-open, .in-combat .combat-instruction,
.in-combat .chassis-id, .in-combat .signal-chevron, .in-combat .signal-index { display: none; }

#viewport-container.in-combat > .staging {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 0;
  gap: 4px;
  overflow: hidden;
}

#viewport-container.in-combat .stage-bay[data-mode=combat] {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

/* The inactive map's minimum content size must not size the shared grid row. */
.in-combat .stage-bay > .traversal-view { display: none; }
.in-combat .stage-bay > .combat-view { min-height: 0; padding: 0; gap: 4px; }
.in-combat .mech-stage { order: 0; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.in-combat .mech-svg { display: flex; align-items: center; justify-content: center; }
.in-combat .mech-svg > svg {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: clamp(140px, 26dvh, 220px);
  object-fit: contain;
  margin: 0 auto;
}
.in-combat .player-cutaway { width: 64px; height: auto; bottom: 4px; }
.in-combat .player-cutaway > div { height: 54px; }
.in-combat .player-cutaway > span { font-size: 10px; letter-spacing: 0; }
.in-combat .clamp-overview { top: 4px; }
.in-combat .clamp-overview > span { font-size: 10px; letter-spacing: 0; }
.in-combat .enemy-header { order: 1; gap: 8px; font-size: 12px; line-height: 16px; letter-spacing: 0; }
.in-combat #enemy-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-combat .enemy-header > b { flex: 0 0 auto; font-size: 12px; color: var(--white); }
.in-combat .enemy-health { order: 2; height: 5px; margin: 0; }
.in-combat .combat-gauges {
  order: 3;
  flex: 0 0 50px;
  display: grid;
  grid-template: 30px 16px / minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 10px;
}
.in-combat .combat-gauges .gauge-row { margin: 0; min-width: 0; grid-row: 1; }
.in-combat .gauge-label { font-size: 0; line-height: 18px; letter-spacing: 0; margin: 0 0 3px; }
.in-combat .gauge-label > span { font-size: 0; }
.in-combat .integrity .gauge-label > span::after { content: 'HULL'; font-size: 12px; }
.in-combat .thermal .gauge-label > span::after { content: 'HEAT'; font-size: 12px; }
.in-combat .heat-symbol { display: none; }
.in-combat .gauge-label strong, .in-combat .gauge-label small { font-size: 12px; }
.in-combat .segmented-track, .in-combat .heat-track { height: 5px; }
.in-combat .combat-barrier { grid-area: 2 / 1 / 3 / -1; display: flex; align-items: center; gap: 8px; }
.in-combat #barrier-status { font-size: 12px; line-height: 16px; color: #b8d4ff; white-space: nowrap; }
.in-combat .barrier-track { flex: 1; height: 5px; overflow: hidden; background: #253347; }
.in-combat #barrier-fill { height: 100%; background: #b8d4ff; transform-origin: left center; }

.in-combat .intent-panel {
  order: 4;
  flex: 0 0 84px;
  height: 84px;
  padding: 4px 6px;
  overflow: hidden;
}
.in-combat .clock-label { display: none; }
.in-combat .intent-panel > div:first-of-type { font-size: 12px; line-height: 16px; }
.in-combat #intent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.in-combat .intent-panel strong { font-size: 12px; }
.in-combat .intent-track { height: 4px; margin: 3px 0; }
.in-combat .intent-panel > small { font-size: 12px; line-height: 16px; }
.in-combat .stagger-window { margin: 0; font-size: 12px; line-height: 16px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ddc4c9; }
.in-combat .stagger-window.open { color: var(--hazard-amber); }
.in-combat .combat-timeline { height: 16px; margin: 0; gap: 8px; font-size: 12px; line-height: 16px; scrollbar-width: none; }
.in-combat .combat-timeline li { max-width: none; padding: 0 4px; white-space: nowrap; font-size: 12px; line-height: 16px; }

#viewport-container.in-combat .signal-panel { flex: 0 0 38px; min-height: 0; height: 38px; padding: 2px 6px; overflow: hidden; }
.in-combat .signal-panel > div { min-width: 0; height: 100%; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.in-combat .signal-panel b, .in-combat .signal-panel p { font-size: 12px; line-height: 16px; margin: 0; letter-spacing: 0; }
.in-combat .signal-panel p { max-width: none; overflow-wrap: anywhere; }

#viewport-container.in-combat > .action-dock { flex: 0 0 auto; min-height: 0; padding: 6px 0 0; }
.in-combat .action-dock::before, .in-combat .action-dock::after { display: none; }
.in-combat .dock-heading, .in-combat .charge-track,
.in-combat .charge-caption, .in-combat .protocol-buttons {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-inline: 0;
}
.in-combat .dock-heading { font-size: 12px; line-height: 16px; letter-spacing: 0; }
.in-combat .dock-heading strong, .in-combat .dock-heading small { font-size: 12px; }
.in-combat .charge-track { height: 8px; margin-top: 3px; padding: 0; }
.in-combat .charge-track > div { top: 0; bottom: 0; left: 0; }
.in-combat .charge-track > span { font-size: 0; background: none; }
.in-combat .charge-caption { height: 16px; margin: 3px 0 5px; gap: 8px; font-size: 12px; line-height: 16px; letter-spacing: 0; }
.in-combat #charge-rate, .in-combat #cast-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-combat #cast-state { text-align: right; }
.in-combat .protocol-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-inline: 0; }
.in-combat .module-control {
  display: grid;
  grid-template: minmax(0, 1fr) 16px / minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 4px;
  height: clamp(60px, 8dvh, 68px);
  min-height: 48px;
  min-width: 0;
  padding: 4px 7px;
  overflow: hidden;
}
.in-combat .protocol-top, .in-combat .protocol-sub { display: contents; }
.in-combat .protocol-number, .in-combat .protocol-sub > span:first-child { display: none; }
.in-combat .module-control .protocol-name { grid-area: 1 / 1; font-size: 12px; line-height: 14px; margin: 0; overflow: hidden; }
.in-combat .module-control .protocol-state { grid-area: 1 / 2; margin: 0; padding: 2px 3px; font-size: 0; line-height: 12px; letter-spacing: 0; }
.in-combat .protocol-state::after { content: attr(data-compact); font-size: 10px; }
.in-combat .protocol-cost { grid-area: 2 / 1; font-size: 12px; line-height: 16px; color: #ffe1a1; }
.in-combat .protocol-cost small { font-size: 12px; }
.in-combat .protocol-sub > span:last-child { grid-area: 2 / 1 / 3 / -1; justify-self: end; font-size: 12px; line-height: 16px; color: #ffe1a1; white-space: nowrap; }

/* A pending update stays available after the encounter without covering controls. */
body.in-combat .update-banner { display: none; }