/* docs/features/game-engine/combat/ */

.combat-field {
  background-color: #05070d;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Spacing/font tokens + shared palette: game-stage `--gs-*`. Board: 13 columns (cmd + 11 units + cmd); row count from JS. */
.combat-root {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  --combat-space-2xs: calc(var(--gs-u-h) * 0.38);
  --combat-space-xs: calc(var(--gs-u-h) * 0.62);
  --combat-space-sm: calc(var(--gs-u-h) * 0.88);
  --combat-space-md: calc(var(--gs-u-h) * 1.22);
  --combat-space-lg: calc(var(--gs-u-h) * 1.66);
  --combat-font-xs: calc(var(--gs-u-h) * 1.08);
  --combat-font-sm: calc(var(--gs-u-h) * 1.38);
  --combat-radius-sm: calc(var(--gs-u-h) * 0.76);
  --combat-radius-md: calc(var(--gs-u-h) * 1.08);
  --combat-font-md: calc(var(--gs-u-h) * 1.84);
  --combat-stats-size: calc(var(--gs-u-h) * 2);
  --combat-radius-pill: 999px;
  --combat-side-a-scale: 1;
  --combat-side-a-scale-y: 1;
  --combat-side-a-x: 0%;
  --combat-side-a-y: 0%;
  --combat-side-b-scale: 1;
  --combat-side-b-scale-y: 1;
  --combat-side-b-x: 0%;
  --combat-side-b-y: 0%;
  /* Feed / splash semantics — local to combat; shared gold palette is --gs-* (game-stage.css). */
  --combat-color-damage: #ff4d4d;
  --combat-color-damage-soft: #ff7a7a;
  --combat-color-heal: #6be872;
  --combat-color-skill: #4fa0ff;
  --combat-color-skill-soft: #80c5ff;
  --combat-color-poison: #57cf5f;
  --combat-color-neutral: #c0c0c0;
  --combat-color-neutral-muted: #a0a0a0;
  --combat-color-monster: #ffb16b;
  --combat-color-monster-hover: #ffe0ad;
  --combat-side-a-border: var(--combat-color-skill);
  --combat-side-b-border: var(--combat-color-monster);
  /* End screen — stage-relative only (see game-shell `--gs-*`). */
  --combat-end-art-width: calc(var(--gs-u-w) * 62);
  --combat-end-art-width-defeat: calc(var(--gs-u-w) * 52);
  --combat-end-art-height: calc(var(--gs-u-h) * 80);
  --combat-end-note-bottom: calc(var(--gs-u-h) * 10);
  --combat-end-note-width: calc(var(--gs-u-w) * 86);
  --combat-end-note-gap: calc(var(--gs-u-h) * 0.42);
  --combat-end-art-shadow: drop-shadow(
    0 calc(var(--gs-u-h) * 0.88) calc(var(--gs-u-h) * 2) rgba(0, 0, 0, 0.55)
  );
  /* Side gutters / row-player cards (PvE stands + Arena gutters). Commander lane = one tile column. */
  --combat-row-players-gap: var(--combat-space-xs);
  --combat-row-player-pad-y: var(--combat-space-xs);
  --combat-row-player-pad-x: var(--combat-space-sm);
  --combat-row-player-radius: var(--gs-radius-sm);
  --combat-splash-gap: calc(var(--combat-tile-size, calc(var(--gs-u-h) * 5.8)) * 0.08);
  --combat-splash-font: calc(var(--combat-tile-size, calc(var(--gs-u-h) * 5.8)) * 0.55);
  --combat-splash-icon: calc(var(--combat-tile-size, calc(var(--gs-u-h) * 5.8)) * 0.42);
  --combat-stat-icon-sm: calc(var(--gs-u-h) * 1.2);
  --combat-stat-icon-md: calc(var(--gs-u-h) * 1.3);
  --combat-stat-icon-arrow-w: calc(var(--gs-u-h) * 2.2);
  --combat-stat-icon-arrow-h: calc(var(--gs-u-h) * 1.1);
  --combat-stat-pair-gap: calc(var(--gs-u-h) * 0.3);
  --combat-lift-sm: calc(var(--gs-u-h) * 0.1);
  --combat-lift-md: calc(var(--gs-u-h) * 0.2);
  color: var(--gs-text);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Off-screen so the card subtree doesn't flow inside the stage or block hit-testing. */
.combat-feed-card-mount {
  position: absolute;
  left: -16000px;
  top: 0;
  width: auto;
  max-width: calc(var(--gs-u-w) * 38);
  pointer-events: none;
}

.combat-feed-card-mount .game-card-sizing {
  --game-card-width: calc(var(--gs-u-w) * 13.3);
}

/* Restore hit-testing for the modal skills dialog (shown via `showModal()`, top-layer). */
.combat-feed-card-mount .game-card__skills-dialog {
  pointer-events: auto;
}

/* Feed journal: one opaque wash on ::backdrop only (avoid stacking dialog bg + backdrop “double 72%”). */
.game-card__skills-dialog.game-card__skills-dialog--combat-feed[open] {
  background: transparent;
  backdrop-filter: none;
}

.game-card__skills-dialog.game-card__skills-dialog--combat-feed::backdrop {
  background: var(--gs-dialog-scrim);
  backdrop-filter: blur(calc(var(--gs-u-h) * 0.6));
}

.combat-hud {
  flex: 0 0 16%;
  min-height: 0;
  display: grid;
  grid-template-columns: calc(var(--gs-u-w) * 28) calc(var(--gs-u-w) * 56);
  justify-content: space-between;
  align-items: stretch;
  column-gap: var(--combat-space-md);
  padding: var(--combat-space-sm) var(--combat-space-lg) var(--combat-space-xs);
  background: transparent;
  border-bottom: none;
}

.combat-hud__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: start;
  justify-items: start;
  align-self: start;
  row-gap: var(--combat-space-xs);
}

#combat-turn-label {
  grid-row: 1;
}

#combat-timer {
  grid-row: 2;
}

.combat-turn-actions {
  grid-row: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--combat-space-md);
  --combat-action-btn-size: calc(var(--gs-u-w) * 4.5);
}

.combat-turn-actions .player-meta-dock__btn {
  width: var(--combat-action-btn-size);
  height: var(--combat-action-btn-size);
}

/* Author `display: inline-flex` on .player-meta-dock__btn overrides UA [hidden];
   force hide so story-gated surrender / remove-unit stay non-interactive when locked. */
.combat-turn-actions .player-meta-dock__btn[hidden] {
  display: none !important;
}

.combat-turn-actions .player-meta-dock__icon {
  width: calc(var(--gs-u-h) * 6);
  height: calc(var(--gs-u-h) * 6);
}

.combat-turn-actions .combat-endturn-pill {
  margin-left: 0;
}

.combat-auto-pill {
  visibility: visible;
}

.combat-auto-pill[aria-pressed="true"] {
  color: var(--gs-text-bright);
  border-color: var(--gs-border-gold-bright-strong);
  background: var(--gs-bg-gold-active);
  box-shadow:
    inset 0 var(--gs-hairline) 0 rgba(var(--gs-gold-bright-rgb), 0.14),
    0 0 0 var(--gs-stroke) var(--gs-bg-gold-active-glow);
}

.combat-auto-pill[aria-pressed="true"] .player-meta-dock__icon {
  filter:
    drop-shadow(0 var(--gs-hairline) calc(var(--gs-u-h) * 0.22) rgba(0, 0, 0, 0.75))
    brightness(1.35)
    contrast(1.08)
    saturate(1.15);
}

.combat-root--spectator .combat-handbar {
  display: none !important;
}

#combat-remove-unit-btn[aria-pressed="true"] {
  border-color: rgba(255, 120, 120, 0.65);
  background: rgba(130, 20, 20, 0.22);
  box-shadow:
    inset 0 var(--gs-hairline) 0 rgba(255, 255, 255, 0.06),
    0 0 0 var(--gs-stroke) rgba(255, 95, 95, 0.18);
}

#combat-remove-unit-btn[aria-pressed="true"] .player-meta-dock__icon {
  filter:
    drop-shadow(0 var(--gs-hairline) calc(var(--gs-u-h) * 0.22) rgba(0, 0, 0, 0.75))
    sepia(1)
    saturate(6)
    hue-rotate(330deg)
    brightness(1.05);
}

.combat-root--remove-mode .combat-unit--remove-target {
  cursor: pointer;
  z-index: 9;
  filter:
    drop-shadow(0 0 calc(var(--gs-u-h) * 0.55) rgba(255, 85, 85, 0.85))
    drop-shadow(0 0 calc(var(--gs-u-h) * 0.22) rgba(0, 0, 0, 0.9));
}

.combat-root--remove-mode .combat-cell__tile:has(.combat-unit--remove-target) {
  background: rgba(210, 35, 35, 0.18);
  border-color: rgba(255, 110, 110, 0.55);
}

.combat-root--remove-mode .combat-cell:hover .combat-cell__tile:has(.combat-unit--remove-target) {
  background: rgba(210, 35, 35, 0.22);
  border-color: rgba(255, 120, 120, 0.7);
}

.combat-root--spectator .combat-turn-actions :is(#combat-auto-btn, #combat-end-turn-btn, #combat-surrender-btn, #combat-remove-unit-btn) {
  display: none !important;
}

#combat-exit-btn {
  display: none;
}

.combat-root--spectator #combat-exit-btn {
  display: inline-flex;
}

.combat-turn {
  margin: 0;
  font-size: var(--combat-font-md);
  letter-spacing: 0.04em;
  font-weight: 800;
  color: var(--gs-text-bright);
  text-shadow: var(--gs-shadow-text-glow);
}

.combat-timer {
  margin-left: 0;
  font-size: var(--combat-font-xs);
  font-weight: 700;
  opacity: 0.92;
}

.combat-feed {
  margin-top: 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  box-sizing: border-box;
  padding: var(--combat-space-2xs) var(--combat-space-sm) var(--combat-space-sm);
  width: calc(var(--gs-u-w) * 56);
  align-self: stretch;
  border-radius: var(--combat-radius-sm);
  font-size: var(--combat-font-sm);
  color: var(--gs-text-warm);
  background: var(--gs-panel-bg);
}

.combat-feed.combat-feed--status {
  color: var(--gs-text-bright, #f5e6c8);
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--gs-accent-gold, #c9a227) 55%, transparent);
  background: color-mix(in srgb, var(--gs-panel-bg) 88%, #3a2208 12%);
}

.combat-feed__entry {
  line-height: 1.25;
  margin-bottom: calc(var(--gs-u-h) * 0.22);
}

.combat-feed__entry:last-child {
  margin-bottom: 0;
}

.combat-feed__entry:first-letter {
  text-transform: capitalize;
}

.combat-feed__entry--turn {
  color: var(--gs-text-gold);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--combat-space-xs);
  margin: var(--combat-space-2xs) 0;
}

.combat-feed__divider-line {
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  background: var(--gs-gradient-gold-divider);
}

.combat-feed__divider-label {
  flex: 0 0 auto;
  padding: 0 var(--combat-space-xs);
  color: var(--gs-text-gold);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.combat-feed__entry--side-player {
  color: var(--combat-color-skill);
  font-weight: 700;
}

.combat-feed__entry--side-opponent {
  color: var(--combat-color-damage-soft);
  font-weight: 700;
}

.combat-feed__entry--damage {
  color: var(--combat-color-damage);
}

.combat-feed__damage-type-icon {
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.2em;
  vertical-align: -0.14em;
  object-fit: contain;
  filter: drop-shadow(0 var(--gs-hairline) var(--gs-hairline) rgba(0, 0, 0, 0.75));
}

.combat-feed__entry--zero {
  color: var(--combat-color-neutral-muted);
}

.combat-feed__entry--stat {
  color: var(--combat-color-neutral);
}

.combat-feed__entry--healing {
  color: var(--combat-color-heal);
}

.combat-feed__entry--skill {
  color: var(--combat-color-skill);
}

.combat-feed__entry--poison {
  color: var(--combat-color-poison);
}

.combat-feed :is(.combat-feed__name, .combat-feed__divider-label) {
  font-family: var(--game-font-display, var(--font-display));
  font-size: calc(1em * var(--game-font-chat-display-scale, 0.88));
}

.combat-feed__name {
  font-weight: 700;
}

.combat-feed__name--player {
  color: var(--combat-color-skill-soft);
}

.combat-feed__name--monster {
  color: var(--combat-color-monster);
}

.combat-feed__name--clickable {
  cursor: pointer;
  text-decoration-thickness: var(--gs-hairline);
  text-underline-offset: calc(var(--gs-u-h) * 0.22);
}

.combat-feed__name--clickable:hover,
.combat-feed__name--clickable:focus-visible {
  color: var(--combat-color-monster-hover);
  outline: none;
}

.combat-board {
  position: relative;
  flex: 1 1 auto;
  min-height: 42%;
  padding: var(--combat-space-sm) var(--combat-space-md);
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: visible;
  /* Tile math uses cqw/cqh; board is the query container (not the whole stage). */
  container-type: size;
  container-name: combat-board;
}

.combat-board__overlay {
  width: 100%;
  height: 100%;
  border-radius: var(--combat-radius-md);
  border: var(--gs-hairline) solid var(--gs-border-gold-warm-subtle);
  background: rgba(6, 8, 14, 0.12);
  box-shadow: inset 0 0 0 var(--gs-hairline) var(--gs-inset-board);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--combat-space-md);
  position: relative;
  overflow: visible;
  /* JS sets --combat-grid-rows from active map row count. Unit columns fixed at 11. */
  --combat-board-columns: 11;
  --combat-board-cols: 13;
  --combat-grid-rows: 2;
  /* Tile size is min(width, height). On few-row maps height is plentiful, so width
     caps the square tile — reclaim side padding so 2-row battles read larger.
     Packed reference is 4 rows (rare); frac → 0.80. Two rows → ~0.92. */
  --combat-board-width-frac: clamp(
    0.8,
    calc(1.04 - 0.06 * var(--combat-grid-rows)),
    0.94
  );
  --combat-board-inner-width: calc(
    (100cqw - 2 * var(--combat-space-md)) * var(--combat-board-width-frac)
  );
  --combat-cell-gap: max(var(--gs-hairline), var(--combat-space-2xs));
  --combat-row-gap: var(--combat-cell-gap);
  --combat-cell-stats-band: 0px;
  --combat-cell-tile-stats-gap: 0px;
  --combat-tile-by-width: calc(
    (
        var(--combat-board-inner-width) - (var(--combat-board-cols) - 1) * var(--combat-cell-gap)
      ) / var(--combat-board-cols)
  );
  --combat-tile-by-height: calc(
    (
        100cqh - 2 * var(--combat-space-md) - var(--combat-space-md)
        - (var(--combat-grid-rows) - 1) * var(--combat-row-gap)
        - var(--combat-grid-rows) * (var(--combat-cell-tile-stats-gap) + var(--combat-cell-stats-band))
      ) / var(--combat-grid-rows)
  );
  --combat-tile-size: min(var(--combat-tile-by-width), var(--combat-tile-by-height));
  --combat-commander-bar-width: calc(var(--combat-tile-size) * 0.62);
  --combat-commander-bar-height: max(calc(var(--gs-u-h) * 0.95), calc(var(--combat-tile-size) * 0.1));
  --combat-side-sprite-size: var(--combat-tile-size);
  --combat-side-name-max: var(--combat-tile-size);
}

.combat-lane-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--combat-space-md);
}

.combat-lane-header__title {
  text-align: center;
  color: var(--gs-text-muted);
  font-size: var(--combat-font-sm);
}

.combat-grid-wrap {
  position: relative;
  width: var(--combat-board-inner-width);
  max-width: var(--combat-board-inner-width);
  margin-inline: auto;
  display: grid;
  column-gap: var(--combat-cell-gap);
  align-items: center;
  overflow: visible;
  /* First row vertical center for PvE side sprites; derived from CSS tile size only. */
  --combat-top-row-center: calc(0.5 * var(--combat-tile-size));
}

/* Wrap: [cmd] repeat(11, unit) [cmd] — 13 columns; set in JS. */
.combat-row-players--left {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.combat-row-players--right {
  grid-column: 13;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

/* Arena presentation: per-row players are shown as gutters flanking the grid.
   We hide the legacy single-commander stand when arena is active. */
.combat-root--arena .combat-side-stands {
  display: none;
}

.combat-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Above board units (cells up to z-index 6) and status icons — match playtest + combat-fx.css. */
  z-index: 40;
  overflow: visible;
}

.combat-hit-splash {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--combat-splash-gap);
  font-weight: 800;
  font-size: var(--combat-splash-font);
  text-shadow: 0 var(--gs-hairline) calc(var(--gs-u-h) * 0.22) rgba(0, 0, 0, 0.9);
  opacity: 0;
  animation: combat-hit-splash-float 620ms ease-out forwards;
}

.combat-hit-splash__value {
  order: 1;
  position: relative;
  z-index: 0;
}

.combat-hit-splash__damage-type-icon {
  order: 0;
  position: relative;
  z-index: 1;
  width: var(--combat-splash-icon);
  height: var(--combat-splash-icon);
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 var(--gs-hairline) calc(var(--gs-u-w) * 0.22) rgba(0, 0, 0, 0.75));
}

.combat-damage-type-icon--healing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: var(--combat-splash-icon);
  height: var(--combat-splash-icon);
  padding-inline: calc(var(--combat-splash-icon) * 0.08);
  object-fit: unset;
  filter: none;
  color: var(--combat-color-heal);
  font-weight: 900;
  font-size: calc(var(--combat-splash-icon) * 0.92);
  line-height: 1;
  text-shadow: 0 var(--gs-hairline) calc(var(--gs-u-h) * 0.22) rgba(0, 0, 0, 0.75);
}

.combat-hit-splash--damage {
  color: var(--combat-color-damage);
}

.combat-hit-splash--healing {
  color: var(--combat-color-heal);
}

.combat-hit-splash--stat {
  color: var(--combat-color-neutral);
}

.combat-hit-splash--zero {
  color: var(--combat-color-neutral-muted);
}

.combat-hit-splash--skill {
  color: var(--combat-color-skill);
}

.combat-hit-splash--poison {
  color: var(--combat-color-poison);
}

@keyframes combat-hit-splash-float {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.9);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120%) scale(1);
  }
}

.combat-end-screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
  background: var(--gs-scrim);
  z-index: 120;
  cursor: pointer;
}

.combat-end-screen[hidden] {
  display: none;
}

.combat-end-screen__art {
  display: none;
  max-width: var(--combat-end-art-width);
  max-height: var(--combat-end-art-height);
  opacity: 0;
  transform: scale(0.2);
  filter: var(--combat-end-art-shadow);
}

.combat-end-screen__art--defeat {
  max-width: var(--combat-end-art-width-defeat);
}

.combat-end-screen__note {
  position: absolute;
  bottom: var(--combat-end-note-bottom);
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: min(100%, var(--combat-end-note-width));
  max-width: var(--combat-end-note-width);
  padding: calc(var(--gs-u-h) * 0.85) calc(var(--gs-u-h) * 1.35);
  text-align: center;
  display: grid;
  gap: var(--combat-end-note-gap);
  color: var(--gs-text-endscreen);
  text-shadow: var(--gs-shadow-text-glow);
}

.combat-end-screen__note.ornate-panel {
  /* Braid + corners from ornate-panel.css; keep layout tokens above. */
  overflow: visible;
}

.combat-end-screen__note-score:empty,
.combat-end-screen__note-hint:empty {
  display: none;
}

.combat-end-screen__note-title {
  font-size: var(--gs-text-xl);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.combat-end-screen__note-score {
  font-size: var(--gs-text-lg);
  font-weight: 800;
}

/* Honor Badge grant readout on the Arena end screen. Hidden by default
   (``[hidden]``) and surfaced by ``setEndScreen`` only when the settlement
   payload reports a non-zero credit for the viewer
   (``state.arena.result_summary.honor_badge_payouts``). */
.combat-end-screen__note-badges {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gs-u-h) * 0.45);
  font-size: var(--gs-text-lg);
  font-weight: 800;
  color: var(--gs-text-reward);
  text-shadow: var(--gs-shadow-text-glow);
}

.combat-end-screen__note-badges[hidden] {
  display: none;
}

.combat-end-screen__note-hint {
  font-size: var(--gs-text-sm);
  font-weight: 600;
  opacity: 0.62;
}

.combat-end-screen--show .combat-end-screen__art--active {
  display: block;
  animation: combat-end-screen-flash-in 500ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes combat-end-screen-flash-in {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.combat-grid {
  grid-row: 1;
  display: grid;
  /* Cols 2–12 only (11 units). End line 13 — not -1, which would swallow the right cmd column. */
  grid-column: 2 / 13;
  grid-template-columns: subgrid;
  column-gap: 0;
  row-gap: var(--combat-row-gap);
  width: auto;
  max-width: none;
  height: fit-content;
  justify-self: stretch;
}

.combat-side-stands {
  display: contents;
}

.combat-side-stand {
  position: relative;
  grid-row: 1;
  display: grid;
  gap: var(--combat-space-xs);
  justify-items: center;
  align-self: start;
  width: max-content;
  max-width: 100%;
  margin-top: var(--combat-top-row-center);
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.combat-side-stand--left {
  grid-column: 1;
  justify-self: end;
}

.combat-side-stand--right {
  grid-column: 13;
  justify-self: start;
}

.combat-commander-hp {
  display: flex;
  align-items: center;
  gap: calc(var(--gs-u-w) * 0.2);
  width: max-content;
  max-width: 100%;
}

.combat-commander-hp--right {
  flex-direction: row-reverse;
}

.combat-commander-bar__badge-slot {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(var(--combat-commander-bar-height) * 1.15);
  height: calc(var(--combat-commander-bar-height) * 1.15);
}

.combat-commander-bar__badge-slot[hidden] {
  display: none;
}

.combat-commander-bar__badge {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.combat-commander-bar {
  box-sizing: border-box;
  width: var(--combat-commander-bar-width);
  height: var(--combat-commander-bar-height);
  min-height: calc(var(--gs-text-2xs) * 0.92);
  position: relative;
  border-radius: var(--combat-radius-pill);
  overflow: hidden;
  border: var(--gs-hairline) solid rgba(118, 210, 255, 0.8);
  background: rgba(6, 20, 34, 0.35);
  box-shadow: 0 var(--gs-hairline) calc(var(--gs-u-w) * 0.4) rgba(0, 0, 0, 0.3);
}

.combat-commander-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(51, 163, 67, 0.92), rgba(31, 118, 46, 0.92));
}

.combat-commander-bar--right .combat-commander-bar__fill {
  background: linear-gradient(90deg, rgba(51, 163, 67, 0.92), rgba(31, 118, 46, 0.92));
}

.combat-commander-bar__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  line-height: 1;
  padding: 0 calc(var(--gs-u-h) * 0.25);
  font-size: min(var(--gs-text-2xs), calc(var(--combat-commander-bar-height) * 0.88));
  font-weight: 700;
  color: #eaf8ee;
  text-shadow:
    0 0 var(--gs-hairline) rgba(0, 0, 0, 1),
    0 var(--gs-hairline) calc(var(--gs-u-h) * 0.22) rgba(0, 0, 0, 0.85),
    0 0 calc(var(--gs-u-h) * 0.5) rgba(12, 35, 26, 0.55);
  background: transparent;
  border: none;
  box-shadow: none;
  z-index: 2;
  pointer-events: none;
}

.combat-side-name {
  width: var(--combat-side-sprite-size);
  max-width: 100%;
  text-align: center;
  font-size: var(--combat-font-xs);
  line-height: 1.1;
  color: var(--gs-text-label);
  text-shadow: 0 var(--gs-hairline) calc(var(--gs-u-h) * 0.22) rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combat-commander-portrait {
  --combat-commander-contact-shadow:
    drop-shadow(0 calc(var(--gs-u-h) * 0.08) calc(var(--gs-u-h) * 0.18) rgba(0, 0, 0, 0.4))
    drop-shadow(0 calc(var(--gs-u-h) * 0.28) calc(var(--gs-u-h) * 0.55) rgba(0, 0, 0, 0.38));
  box-sizing: border-box;
  position: relative;
  width: var(--combat-side-sprite-size);
  height: auto;
  aspect-ratio: 10 / 11;
  /* Visible so surround drop-shadow + floor ellipse are not clipped (oval crop retired). */
  overflow: visible;
  background: transparent;
}

/* Soft floor ellipse — same grounding language as board-unit static shadows. */
.combat-commander-portrait::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 62%;
  height: 14%;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.22) 42%,
    transparent 72%
  );
  opacity: 0.85;
}

.combat-commander-portrait--hand-tooltip {
  overflow: visible;
  pointer-events: auto;
  cursor: help;
}

/* Right-side portraits are mirrored; un-flip tooltip text. */
.combat-side-stand--right .combat-commander-portrait--hand-tooltip > .game-tooltip {
  --game-tooltip-transform: translateX(-50%) scaleX(-1);
}

.combat-opponent-hand-tooltip__val {
  color: #c89bff;
  font-weight: 700;
}

.combat-commander-portrait__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  border: 0;
  background: transparent;
  /* Landing-style silhouette blend (matches board unit art-frame). */
  filter: var(--combat-commander-contact-shadow);
}

.combat-side-stand--left .combat-commander-portrait {
  transform-origin: center center;
  transform: translate(var(--combat-side-a-x), var(--combat-side-a-y))
    scaleX(var(--combat-side-a-scale))
    scaleY(var(--combat-side-a-scale-y));
}

.combat-side-stand--right .combat-commander-portrait {
  transform-origin: center center;
  transform: translate(var(--combat-side-b-x), var(--combat-side-b-y))
    scaleX(calc(-1 * var(--combat-side-b-scale)))
    scaleY(var(--combat-side-b-scale-y));
}


.combat-row-players {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: var(--combat-row-players-gap);
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.combat-row-players--left {
  align-items: flex-end;
}

.combat-row-players--right {
  align-items: flex-start;
}

.combat-root--arena .combat-row-players .combat-side-stand {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  padding: 0;
  justify-self: auto;
  width: max-content;
  max-width: 100%;
}

.combat-root--arena .combat-row-players .combat-side-stand--left {
  justify-self: end;
}

.combat-root--arena .combat-row-players .combat-side-stand--right {
  justify-self: start;
}

.combat-row-player {
  max-width: 100%;
  padding: var(--combat-row-player-pad-y) var(--combat-row-player-pad-x);
  border-radius: var(--combat-row-player-radius);
  background: rgba(0, 0, 0, 0.35);
  border: var(--gs-hairline) solid var(--gs-border-gold-bright-whisper);
  color: var(--gs-text-label);
  text-shadow: 0 var(--gs-hairline) calc(var(--gs-u-h) * 0.22) rgba(0, 0, 0, 0.9);
  font-size: var(--combat-font-xs);
  line-height: 1.1;
  overflow: visible;
  display: grid;
  gap: var(--combat-space-xs);
  justify-items: center;
}

.combat-row-player__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}

.combat-row-player__hp {
  margin-top: 0;
}

.combat-row-player--defeated {
  opacity: 0.55;
  text-decoration: line-through;
}

.combat-cell {
  box-sizing: border-box;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: var(--combat-cell-tile-stats-gap);
  column-gap: 0;
  cursor: default;
  font-size: var(--combat-font-sm);
  transition: transform 120ms ease;
  min-width: 0;
  min-height: 0;
}

.combat-cell:focus-visible {
  outline: var(--gs-stroke) solid var(--gs-focus-outline-soft);
  outline-offset: var(--gs-hairline);
}

.combat-cell:hover .combat-cell__tile {
  border-color: var(--gs-border-gold-bright-dim);
}

.combat-cell__tile {
  box-sizing: border-box;
  width: var(--combat-tile-size);
  height: var(--combat-tile-size);
  align-self: center;
  flex: 0 0 auto;
  position: relative;
  overflow: visible;
  border-radius: 5%;
  display: grid;
  place-items: center;
  box-shadow: none;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

/* Inlaid tile edge: grid-visible OR occupied tiles when grid chrome is hidden. */
.combat-root--grid-visible .combat-cell__tile,
.combat-root:not(.combat-root--grid-visible) :is(.combat-cell--unit-a, .combat-cell--unit-b) .combat-cell__tile {
  box-shadow:
    inset 0 0 0 var(--gs-hairline) rgba(0, 0, 0, 0.55),
    inset 0 0 0 calc(var(--gs-hairline) * 2) rgba(var(--gs-gold-alt-rgb), 0.14);
}

/* Occupied tiles: no fill pad (sprites sit on the battleground); keep overflow for tooltips / bleed. */
:is(.combat-cell--unit-a, .combat-cell--unit-b) .combat-cell__tile {
  overflow: visible;
  background: transparent;
}

.combat-cell--playable,
.combat-root--deploy-mode .combat-cell--deploy-valid {
  cursor: pointer;
}

.combat-cell--playable .combat-cell__tile,
.combat-root--deploy-mode .combat-cell--deploy-valid .combat-cell__tile {
  border-color: var(--gs-border-gold-playable);
  background: var(--gs-bg-gold-playable);
}

.combat-cell--playable:hover .combat-cell__tile,
.combat-cell--playable:focus-visible .combat-cell__tile,
.combat-root--deploy-mode .combat-cell--deploy-valid:hover .combat-cell__tile,
.combat-root--deploy-mode .combat-cell--deploy-valid:focus-visible .combat-cell__tile,
.combat-root--deploy-mode .combat-cell--deploy-valid.combat-cell--drop-target .combat-cell__tile {
  border-color: var(--gs-border-gold-playable-hover);
  background: var(--gs-bg-gold-playable-hover);
  transform: translateY(calc(-1 * var(--combat-lift-sm)));
  outline: none;
}

.combat-cell--playable:focus-visible {
  outline: none;
}

/* Deploy targeting: invalid cells get red hover / drop feedback. */

.combat-root--deploy-mode .combat-cell--deploy-invalid:hover .combat-cell__tile,
.combat-root--deploy-mode .combat-cell--deploy-invalid:focus-visible .combat-cell__tile {
  border-color: rgba(220, 72, 72, 0.88);
  background: rgba(180, 40, 40, 0.22);
  transform: none;
  outline: none;
}

.combat-root--deploy-mode .combat-cell--deploy-invalid.combat-cell--drop-target .combat-cell__tile {
  border-color: rgba(220, 72, 72, 0.95);
  background: rgba(180, 40, 40, 0.28);
}

.combat-card-wrap--dragging {
  opacity: 0.45;
}

.combat-cell--selected .combat-cell__tile {
  outline: var(--gs-stroke) solid var(--gs-border-gold-bright-focus);
  outline-offset: var(--gs-hairline);
}

.combat-cell__stats {
  display: none;
}

.combat-cell__stats--empty {
  display: none;
}

/* Only HP shown: keep it on the right when the ATK pair is omitted. */
.combat-cell__stats--no-atk {
  display: none;
}

.combat-stat-pair {
  display: inline-flex;
  align-items: center;
  gap: var(--combat-stat-pair-gap);
  min-width: 0;
}

:is(.combat-stat-damage-type-icon, .combat-stat-icon) {
  filter: drop-shadow(0 calc(var(--gs-u-w) * 0.05) 0 rgba(0, 0, 0, 0.95))
    drop-shadow(0 var(--gs-hairline) calc(var(--gs-u-w) * 0.22) rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 calc(var(--gs-u-w) * 0.3) rgba(0, 0, 0, 0.55));
}

.combat-stat-damage-type-icon {
  width: var(--combat-stats-size);
  height: var(--combat-stats-size);
  object-fit: contain;
}

.combat-stat-pair--atk {
  justify-content: flex-start;
}

.combat-stat-pair--hp {
  justify-content: flex-end;
}

.combat-stat-icon {
  flex: 0 0 auto;
  display: block;
}

.combat-stat-icon--sword {
  width: var(--combat-stat-icon-md);
  height: var(--combat-stat-icon-md);
  margin-top: var(--gs-hairline);
  color: #9aa3ad;
}

.combat-stat-icon--heart {
  width: var(--combat-stat-icon-md);
  height: var(--combat-stat-icon-md);
  color: #e04552;
}

.combat-stat-icon--arrow {
  width: var(--combat-stat-icon-arrow-w);
  height: var(--combat-stat-icon-arrow-h);
  margin-top: var(--gs-hairline);
  color: #9a6b3a;
}

.combat-stat-icon--flipped-x {
  transform: scaleX(-1);
}

.combat-stat-value {
  font-variant-numeric: tabular-nums;
  min-width: 0.6em;
  text-align: center;
  color: var(--gs-text-value);
  text-shadow:
    0 0 var(--gs-hairline) rgba(0, 0, 0, 1),
    0 var(--gs-hairline) calc(var(--gs-u-h) * 0.22) rgba(0, 0, 0, 0.95),
    0 0 calc(var(--gs-u-h) * 0.4) rgba(0, 0, 0, 0.65);
}

.combat-cell__tile .combat-unit,
.combat-portrait-stage .combat-unit {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* combat_display visual tuning is scoped to the portrait subtree so ability/status icon
   overlays, HP bar, ATK foot, and floor grounding (siblings of __scale) keep native
   size and anchor on the tile. */
.combat-cell__tile .combat-unit__scale,
.combat-portrait-stage .combat-unit__scale {
  position: absolute;
  inset: 0;
  --combat-display-scale: 1;
  --combat-display-scale-x: 1;
  --combat-display-scale-y: 1;
  --combat-display-x: 0%;
  --combat-display-y: 0%;
  transform: translate(var(--combat-display-x), var(--combat-display-y))
    scaleX(calc(var(--combat-display-scale) * var(--combat-display-scale-x)))
    scaleY(calc(var(--combat-display-scale) * var(--combat-display-scale-y)));
  transform-origin: center bottom;
}

/* Floor grounding — sibling of __scale (same contract as legend ring).
   Soft contact ellipse for every unit (static icon and sprite strip). A town-guard
   RTS cast on tile-sized strips squashes to a near-invisible smear, so strips keep
   this ellipse rather than replacing it. */
.combat-cell__tile .combat-unit__ground-shadow,
.combat-portrait-stage .combat-unit__ground-shadow {
  position: absolute;
  left: 50%;
  bottom: -4%;
  width: 62%;
  height: 18%;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.28) 40%,
    transparent 72%
  );
  opacity: 0.9;
}

.combat-cell--pending .combat-cell__tile {
  border-style: dashed;
}

.combat-unit--pending {
  opacity: 0.55;
  filter: grayscale(0.15) saturate(0.85);
}

.combat-unit--camouflaged {
  opacity: 0.45;
}

/* Floor ring: fixed size/position on the tile (not inside __scale / combat_display). */
.combat-cell__tile .combat-unit__legend-ring,
.combat-portrait-stage .combat-unit__legend-ring {
  --legend-ring-core: rgba(var(--gs-gold-soft-rgb), 0.88);
  --legend-ring-glow: rgba(var(--gs-gold-glow-rgb), 0.6);
  position: absolute;
  left: 50%;
  bottom: -5%;
  width: 72%;
  height: 23%;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  border: var(--gs-hairline) solid color-mix(in srgb, var(--legend-ring-core) 90%, white 10%);
  background:
    radial-gradient(
      ellipse at 50% 52%,
      color-mix(in srgb, var(--legend-ring-core) 82%, white 18%) 0%,
      var(--legend-ring-core) 38%,
      color-mix(in srgb, var(--legend-ring-core) 55%, transparent 45%) 66%,
      transparent 100%
    );
  box-shadow:
    0 0 calc(var(--gs-u-h) * 0.8) calc(var(--gs-u-h) * 0.2) var(--legend-ring-glow),
    0 0 calc(var(--gs-u-h) * 1.4) calc(var(--gs-u-h) * 0.5)
      color-mix(in srgb, var(--legend-ring-glow) 72%, transparent 28%),
    0 calc(var(--gs-u-h) * 0.6) calc(var(--gs-u-h) * 1.2) rgba(0, 0, 0, 0.35);
  opacity: 0.9;
  filter: saturate(1.08);
  animation: combat-legend-ring-pulse 1.8s ease-in-out infinite;
}

.combat-cell__tile .combat-unit__legend-ring::after,
.combat-portrait-stage .combat-unit__legend-ring::after {
  content: "";
  position: absolute;
  inset: 16% 12%;
  border-radius: 50%;
  border: var(--gs-hairline) solid color-mix(in srgb, var(--legend-ring-core) 72%, white 28%);
  opacity: 0.82;
}

@keyframes combat-legend-ring-pulse {
  0%,
  100% {
    transform: translateX(-50%) scale(0.97);
    opacity: 0.82;
  }
  50% {
    transform: translateX(-50%) scale(1.03);
    opacity: 1;
  }
}

/* HP bar floats above the portrait head (outside the tile box — not over the face). */
/* Interpolable ratio so side hue tracks the fill ease (drop / rise). */
@property --combat-unit-hp-ratio {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.combat-cell__tile .combat-unit__hp-bar {
  --combat-unit-hp-ratio: 1;
  --combat-unit-hp-bar-width: 10%;
  --combat-unit-hp-bar-gap: max(2px, calc(var(--combat-tile-size, 72px) * 0.02));
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - var(--combat-unit-hp-bar-gap)));
  width: var(--combat-unit-hp-bar-width);
  height: max(calc(var(--gs-u-h) * 1.15), calc(var(--combat-tile-size, 72px) * 0.11));
  z-index: 9;
  box-sizing: border-box;
  border-radius: var(--combat-radius-pill, 999px);
  overflow: hidden;
  pointer-events: none;
  border: var(--gs-hairline) solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 8, 14, 0.72);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  opacity: 1;
  transition:
    opacity 120ms ease-out,
    --combat-unit-hp-ratio 280ms ease-out;
}

.combat-cell__tile .combat-unit__hp-bar--idle {
  opacity: 0.4;
}

.combat-cell__tile .combat-unit__hp-bar--snap {
  transition: opacity 120ms ease-out;
}

.combat-cell__tile .combat-unit__hp-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  max-width: 100%;
  border-radius: inherit;
  transition: width 280ms ease-out;
}

.combat-cell__tile .combat-unit__hp-bar--snap .combat-unit__hp-bar-fill {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .combat-cell__tile .combat-unit__hp-bar {
    transition: none;
  }

  .combat-cell__tile .combat-unit__hp-bar-fill {
    transition: none;
  }
}

.combat-cell__tile .combat-unit__hp-bar--a .combat-unit__hp-bar-fill {
  background: color-mix(
    in srgb,
    rgb(56, 140, 255) calc(var(--combat-unit-hp-ratio) * 100%),
    rgb(132, 48, 196) calc((1 - var(--combat-unit-hp-ratio)) * 100%)
  );
}

.combat-cell__tile .combat-unit__hp-bar--b .combat-unit__hp-bar-fill {
  background: color-mix(
    in srgb,
    rgb(242, 148, 48) calc(var(--combat-unit-hp-ratio) * 100%),
    rgb(148, 18, 28) calc((1 - var(--combat-unit-hp-ratio)) * 100%)
  );
}

.combat-cell__tile .combat-unit__hp-bar-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: min(var(--gs-text-2xs), calc(var(--combat-tile-size, 72px) * 0.12));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #f4f0e6;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 1),
    0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Allow sprite to slide across the gap to the previous cell during FLIP move */
.combat-cell__tile.combat-cell__tile--slide-open {
  overflow: visible;
  z-index: 6;
}

/* Vacated origin while a unit glides — strip occupied/grid tile chrome immediately. */
:is(.combat-cell--unit-a, .combat-cell--unit-b) .combat-cell__tile.combat-cell__tile--slide-open,
.combat-root--grid-visible .combat-cell__tile.combat-cell__tile--slide-open,
.combat-root:not(.combat-root--grid-visible)
  :is(.combat-cell--unit-a, .combat-cell--unit-b)
  .combat-cell__tile.combat-cell__tile--slide-open {
  background: transparent;
  box-shadow: none;
}

.combat-unit.combat-unit--move-slide {
  transition: transform 0.32s cubic-bezier(0.25, 0.85, 0.3, 1);
  will-change: transform;
}

/* Detached unit glide — portrait only; no outer tile chrome on the float shell. */
.combat-root--grid-visible .combat-cell__tile.combat-unit-float,
.combat-cell__tile.combat-unit-float {
  position: absolute;
  z-index: 26;
  pointer-events: none;
  will-change: transform;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Combat-image board units: borderless, no background, art bleeds past cell edges.
   Default 20% smaller; per-card combat_display.scale overrides via --combat-display-scale. */
.combat-cell__tile .combat-unit__scale--card-art-portrait,
.combat-portrait-stage .combat-unit__scale--card-art-portrait {
  overflow: visible;
  border-radius: inherit;
  --combat-display-scale: 0.8;
}

.combat-cell__tile .combat-unit__art-frame,
.combat-portrait-stage .combat-unit__art-frame {
  --combat-unit-contact-shadow:
    drop-shadow(0 calc(var(--gs-u-h) * 0.08) calc(var(--gs-u-h) * 0.18) rgba(0, 0, 0, 0.45))
    drop-shadow(0 calc(var(--gs-u-h) * 0.28) calc(var(--gs-u-h) * 0.55) rgba(0, 0, 0, 0.4));
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
}

/*
 * Surround blend on the portrait itself (img + sprite strip). Applying only on
 * __art-frame is unreliable for absolute sprite children; keep FX filters free to
 * compose on top by putting contact shadow here and appending it in combat-fx.css
 * where those rules fully replace `filter`.
 */
.combat-cell__tile .combat-unit__icon,
.combat-portrait-stage .combat-unit__icon,
.combat-cell__tile .combat-unit__sprite-idle,
.combat-portrait-stage .combat-unit__sprite-idle {
  filter: var(--combat-unit-contact-shadow);
}

.combat-cell__tile .combat-unit__icon,
.combat-portrait-stage .combat-unit__icon {
  max-height: 84%;
  border-radius: 0;
  border: none;
  object-fit: contain;
  object-position: center bottom;
  box-shadow: none;
  display: block;
}

.combat-handbar {
  flex: 0 0 19%;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: end;
  position: relative;
  z-index: 3;
  --combat-track-gap: 0px;
  /* ~96% of this strip's nominal height (flex-basis 19% of stage). Uses inherited `--gs-u-h` → stage cqh. */
  --combat-slot-h-safe: calc(var(--gs-u-h) * 100 * 0.19 * 0.96);
  /* Row spans stage width; `/10` preserves legacy density vs former handbar `100cqi`. */
  --combat-slot-w: max(
    calc(var(--gs-u-h) * 1.2),
    min(calc((100cqw - var(--gs-stroke)) / 10), calc(var(--combat-slot-h-safe) * 5 / 7))
  );
  --game-card-width: var(--combat-slot-w);
  --combat-card-radius: calc(var(--gs-u-h) * 0.2);
  --game-card-radius: var(--combat-card-radius);
  --combat-pile-icon: calc(var(--gs-u-h) * 8);
  --combat-pile-inset: calc(var(--gs-u-h) * 0.3);
  --combat-pile-count-bottom: calc(var(--gs-u-h) * 0.25);
  --combat-pile-count-font: calc(var(--gs-u-h) * 1.35);
  gap: 0;
  padding:
    calc(var(--gs-u-h) * 0.15) calc(var(--gs-u-h) * 1.8) calc(var(--gs-u-h) * 0.15);
  background: linear-gradient(to top, rgba(7, 8, 12, 0.82), rgba(7, 8, 12, 0.45));
  overflow-x: visible;
  overflow-y: visible;
}

.combat-grid-setting-btn {
  position: absolute;
  right: calc(var(--gs-u-w) * 1.2);
  bottom: calc(var(--gs-u-h) * 0.2);
  width: calc(var(--gs-u-w) * 2.4);
  height: calc(var(--gs-u-w) * 2.4);
  display: grid;
  place-items: center;
  font-size: calc(var(--gs-u-h) * 0.8);
  color: rgba(var(--gs-gold-alt-rgb), 0.92);
  background: var(--gs-panel-bg-solid);
  border: var(--gs-hairline) solid var(--gs-border-gold-bright-subtle);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
}

.combat-grid-setting-btn:hover,
.combat-grid-setting-btn:focus-visible {
  border-color: var(--gs-border-gold-bright-hover);
  background: var(--gs-panel-bg-raised);
  outline: none;
}

.combat-grid-setting-btn__icon {
  width: calc(var(--gs-u-h) * 2);
  height: calc(var(--gs-u-h) * 2);
  color: currentColor;
  display: block;
}

.combat-grid-setting-btn[aria-pressed="true"] {
  border-color: var(--gs-border-gold-bright-strong);
  box-shadow: 0 0 0 var(--gs-hairline) var(--gs-ring-gold-soft);
}

/* Battlefield unit hover — full card dock (right of graveyard, left of settings). */
.combat-unit-preview-dock {
  position: absolute;
  right: calc(var(--gs-u-w) * 4.4);
  bottom: calc(var(--gs-u-h) * 0.15);
  z-index: 4;
  pointer-events: auto;
}

.combat-unit-preview-dock[hidden] {
  display: none;
}

.combat-unit-preview-dock--pinned,
.combat-unit-preview-dock[data-pinned] {
  outline: calc(var(--gs-hairline) * 2) solid rgba(255, 210, 160, 0.45);
  outline-offset: calc(var(--gs-u-h) * 0.08);
  border-radius: var(--gs-radius-sm);
}

.combat-unit-preview-dock .combat-unit-preview-dock__card {
  filter: drop-shadow(0 calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 0.9) rgba(0, 0, 0, 0.62));
}

.combat-unit-preview-dock .combat-unit-preview-dock__card-btn {
  pointer-events: none;
  cursor: default;
}

.combat-unit-preview-dock .combat-game-card-sizing {
  --game-card-width: calc(var(--combat-slot-w) * 1.12);
  width: var(--game-card-width);
}

.combat-settings-lightbox {
  position: absolute;
  inset: 0;
  z-index: 100;
}

.combat-settings-lightbox[hidden] {
  display: none;
}

.combat-settings-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: var(--gs-scrim-heavy);
}

.combat-settings-lightbox__panel {
  position: absolute;
  right: calc(var(--gs-u-w) * 2.2);
  bottom: calc(var(--gs-u-h) * 9);
  min-width: calc(var(--gs-u-w) * 22);
  background: var(--gs-panel-bg-dark);
  border: var(--gs-hairline) solid var(--gs-border-gold-bright-medium);
  border-radius: var(--gs-radius-md);
  padding: var(--combat-space-sm) var(--combat-space-md);
  box-shadow:
    0 calc(var(--gs-u-h) * 1) calc(var(--gs-u-h) * 3) rgba(0, 0, 0, 0.45);
}

.combat-settings-lightbox__title {
  font-size: var(--combat-font-sm);
  font-weight: 700;
  margin-bottom: var(--combat-space-sm);
  color: var(--gs-text-ui);
}

.combat-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--combat-space-sm);
  font-size: var(--combat-font-sm);
  color: var(--gs-text-secondary);
}

.combat-settings-lightbox__report {
  margin-top: var(--combat-space-sm);
}

.combat-hand {
  display: flex;
  align-items: end;
  gap: 0;
}

.combat-handbar-spacer {
  width: 0;
  height: 0;
  overflow: hidden;
}

.combat-card-wrap {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.combat-hand-slot {
  width: var(--combat-slot-w);
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: visible;
}

.combat-hand-slot-placeholder {
  width: var(--combat-slot-w);
  max-width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  border-radius: var(--combat-card-radius);
  border: var(--gs-hairline) solid var(--gs-border-gold-bright-faint);
  background: rgba(18, 16, 24, 0.35);
}

.combat-hand-slot-placeholder--empty {
  background:
    linear-gradient(145deg, rgba(50, 42, 70, 0.35), rgba(18, 16, 24, 0.4)),
    radial-gradient(circle at 50% 50%, rgba(150, 130, 190, 0.12), transparent 62%);
}

.combat-hand-slot-placeholder--broken {
  border-color: transparent;
  background:
    linear-gradient(145deg, rgba(64, 64, 70, 0.34), rgba(34, 34, 38, 0.48)),
    url("/assets/img/slab/broken-slab_150_200.webp?v=67e8b30368d6");
  background-size: cover, 100% 100%;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: none;
}

.combat-zone-slot {
  width: calc(var(--combat-slot-w) * 1.14);
  height: calc(100% + 14%);
  min-height: 0;
  min-width: 0;
  position: relative;
  display: grid;
  place-items: center;
  align-self: end;
  transform: none;
  border: none;
  border-radius: var(--combat-card-radius);
  background-color: rgb(18, 14, 12);
  background:
    linear-gradient(180deg, rgb(24, 20, 18), rgb(12, 10, 12)),
    radial-gradient(circle at 50% 22%, rgb(62, 46, 28), rgb(12, 10, 12) 62%);
  box-shadow: inset 0 0 0 var(--gs-hairline) rgb(52, 42, 32);
}

.combat-zone-slot--pile {
  background-image: url("/assets/img/slab/engraved-slab_161x250.webp?v=35ec97c9631b");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.combat-pile-card {
  width: calc(var(--combat-slot-w) * 1.02);
  height: auto;
  aspect-ratio: 5 / 7;
  display: block;
  justify-self: center;
  margin-inline: auto;
  transform: none;
  transform-origin: bottom center;
  z-index: 2;
  position: relative;
  overflow: visible;
  opacity: 1;
  background-color: rgb(46, 33, 20);
  border-radius: var(--combat-card-radius);
  border: none;
  box-shadow: none;
  background:
    linear-gradient(145deg, rgb(96, 73, 44), rgb(46, 33, 20)),
    radial-gradient(circle at 50% 50%, rgb(126, 96, 64), rgb(46, 33, 20) 68%);
}

.combat-pile-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("/assets/img/logo/hal-logo-128x85.webp?v=d495dbaaa364");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 78% auto;
  opacity: 0.28;
  filter: sepia(1) hue-rotate(332deg) saturate(0.55) brightness(0.85);
  mix-blend-mode: normal;
  pointer-events: none;
}

#combat-reinforcements-pile .combat-pile-card::before {
  background-color: rgb(28, 22, 18);
  background-image: url("/assets/img/slab/hal-cardback_169x250.webp?v=c1c001ecf65b");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
  filter: none;
}

.combat-graveyard-pile-face {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translate(-50%, 0);
  width: var(--combat-slot-w);
  max-width: calc(100% - var(--combat-pile-inset) * 2);
  height: auto;
  z-index: 4;
  pointer-events: auto;
  display: block;
}

.combat-graveyard-pile-face .combat-card-btn {
  display: block;
  width: 100%;
}

.combat-graveyard-pile-face .combat-game-card-sizing {
  width: 100%;
  max-width: 100%;
}

.combat-graveyard-pile-face .game-card__cd-wrap {
  visibility: hidden;
}

.combat-zone-slot--pile.combat-zone-slot--empty .combat-pile-card,
.combat-zone-slot--pile.combat-zone-slot--empty .combat-graveyard-pile-face {
  opacity: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

.combat-zone-slot--pile.combat-zone-slot--empty .combat-pile-card::before {
  opacity: 0;
}

#combat-graveyard-pile::before {
  content: "";
  position: absolute;
  inset: var(--combat-pile-inset);
  border-radius: var(--combat-card-radius);
  border: var(--gs-hairline) dashed rgba(198, 145, 145, 0.25);
  background:
    radial-gradient(circle at 50% 50%, rgba(120, 82, 82, 0.18), transparent 68%);
  pointer-events: none;
}

#combat-graveyard-pile::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 33%;
  width: var(--combat-pile-icon);
  height: var(--combat-pile-icon);
  transform: translate(-50%, 50%);
  background-image: url("/assets/img/slab/graveyard-icon_64x64.webp?v=b7a131391b81");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  z-index: 6;
  pointer-events: none;
}

.combat-graveyard-open {
  position: absolute;
  left: 50%;
  bottom: 33%;
  width: var(--combat-pile-icon);
  height: var(--combat-pile-icon);
  transform: translate(-50%, 50%);
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  z-index: 8;
  cursor: pointer;
}

.combat-graveyard-open:focus-visible {
  outline: var(--gs-stroke) solid var(--gs-focus-outline-strong);
  outline-offset: calc(var(--gs-u-h) * 0.3);
  border-radius: 50%;
}

.combat-pile-count {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--combat-pile-count-bottom);
  margin-top: 0;
  padding: 0.12em 0.46em;
  border-radius: var(--combat-radius-pill);
  background: var(--gs-panel-bg-solid);
  border: var(--gs-hairline) solid var(--gs-border-gold-bright);
  font-size: var(--combat-pile-count-font);
  line-height: 1.1;
  color: var(--gs-text-ui);
  z-index: 3;
}

.combat-endturn-pill:not(.player-meta-dock__btn) {
  flex-shrink: 0;
  margin-left: var(--combat-space-sm);
  padding: var(--combat-space-2xs) var(--combat-space-md);
  font-size: calc(var(--gs-u-h) * 1.2);
}

.combat-endturn-pill {
  flex-shrink: 0;
  margin-left: var(--combat-space-sm);
}

/* Keep layout width stable: do not use display:none / [hidden] for this control */
.combat-endturn-pill:disabled {
  visibility: hidden;
  pointer-events: none;
}

.combat-card-btn {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.combat-card-btn:hover:not([aria-disabled="true"]),
.combat-card-btn:focus-visible:not([aria-disabled="true"]) {
  transform: translateY(calc(-1 * var(--combat-lift-md)));
  box-shadow: none;
  outline: none;
}

.combat-card-btn--ready {
  filter: none;
}

.combat-card-btn--selected {
  outline: none;
}

/* Hand selection ring: primary slot card only — never the zoom `<dialog>` article (`.game-card--dialog`). */
.combat-handbar .combat-card-btn--selected .game-card:not(.game-card--dialog) {
  box-shadow:
    0 0 0 var(--gs-stroke) var(--gs-ring-gold),
    0 calc(var(--gs-u-h) * 0.8) calc(var(--gs-u-h) * 2) rgba(0, 0, 0, 0.4),
    inset 0 var(--gs-hairline) 0 rgba(255, 255, 255, 0.06);
}

.combat-card-btn[aria-disabled="true"] {
  cursor: default;
}

/* Cooldown dim: hand slots only — never skills dialog or battlefield unit preview dock. */
.combat-handbar
  .combat-card-btn[aria-disabled="true"]:not(.combat-unit-preview-dock__card-btn)
  > .combat-game-card-sizing {
  opacity: 0.72;
}

.combat-game-card-sizing {
  container-type: inline-size;
  container-name: gamecard;
  width: var(--game-card-width);
  max-width: 100%;
  height: auto;
}

/* Hand cards use the same skill-icon strip as army/formation (needs a query container).
   Scoped to non-legendary so the legendary contract (z=20 above border z=10) keeps winning;
   without the `:not(.legendary-card)` guard this rule has equal specificity to the legendary
   slot rule in game-card.css and, loading later, would push icons behind the legendary decal. */
.combat-handbar .game-card--has-skill-icons:not(.legendary-card) > .game-card__skill-icons {
  z-index: 7;
}

.combat-handbar .game-card__art {
  border-radius: max(var(--gs-hairline), calc(var(--combat-card-radius) * 0.55));
}

.combat-handbar .game-card__skills-viewport {
  border-radius: max(var(--gs-hairline), calc(var(--combat-card-radius) * 0.5));
}

.combat-handbar
  .combat-card-btn:not(.combat-card-btn--ready):not(.combat-unit-preview-dock__card-btn)
  .game-card:not(.game-card--dialog) {
  filter: grayscale(0.5) brightness(0.62) saturate(0.72);
}

.combat-card-btn--graveyard-spent .game-card:not(.game-card--dialog),
.combat-graveyard-lightbox__card .game-card:not(.game-card--dialog) {
  filter: grayscale(0.45) saturate(0.72) sepia(0.35) brightness(0.86);
}

.combat-handbar
  .combat-card-btn:not(.combat-card-btn--ready):not(.combat-unit-preview-dock__card-btn)
  .game-card:not(.game-card--dialog)
  .game-card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(140deg, rgba(50, 46, 72, 0.62), rgba(25, 28, 44, 0.62)),
    radial-gradient(circle at 50% 50%, rgba(180, 160, 210, 0.25), transparent 60%);
}

.combat-graveyard-lightbox {
  position: absolute;
  inset: 0;
  z-index: 105;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--combat-space-md);
}

.combat-graveyard-lightbox[hidden] {
  display: none;
}

.combat-graveyard-lightbox__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(5, 7, 14, 0.78);
  backdrop-filter: blur(calc(var(--gs-u-h) * 0.4));
}

.combat-graveyard-lightbox__panel {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: max-content;
  max-width: min(calc(var(--gs-u-w) * 80), 80vw);
  max-height: min(calc(var(--gs-u-h) * 80), 80vh);
  --game-card-width: calc(var(--gs-u-w) * 13);
  --combat-card-radius: calc(var(--gs-u-h) * 0.2);
  --game-card-radius: var(--combat-card-radius);
  --brass-panel-opacity: 0.96;
  border-radius: var(--gs-radius-md);
  background-color: rgba(10, 12, 18, 0.92);
  display: flex;
  flex-direction: column;
  gap: var(--combat-space-sm);
  padding: var(--combat-space-md);
  overflow: hidden;
}

.combat-graveyard-lightbox__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.combat-graveyard-lightbox__title {
  font-size: var(--combat-font-md);
  font-weight: 800;
  color: var(--gs-text-ui);
  text-align: center;
}

.combat-graveyard-lightbox__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.combat-graveyard-lightbox__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--combat-space-sm);
  align-content: flex-start;
  justify-content: center;
  padding: var(--gs-hairline);
}

.combat-graveyard-lightbox__list .combat-card-wrap {
  width: calc(var(--gs-u-w) * 13);
  height: auto;
  aspect-ratio: 5 / 7;
  display: block;
}

.combat-graveyard-lightbox__list .combat-card-btn {
  display: block;
  width: 100%;
}

.combat-graveyard-lightbox__list .combat-game-card-sizing {
  width: var(--game-card-width);
  max-width: 100%;
}

.combat-graveyard-lightbox__card .game-card__cd-wrap {
  visibility: hidden;
}

.combat-graveyard-lightbox__empty {
  font-size: var(--combat-font-sm);
  color: var(--gs-text-dim);
  text-align: center;
  padding: calc(var(--gs-u-h) * 0.6) 0 calc(var(--gs-u-h) * 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .combat-cell__tile .combat-unit__legend-ring,
  .combat-portrait-stage .combat-unit__legend-ring {
    animation: none;
  }
}