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

/* Idle / motion / attack horizontal strips. Frame count is set on the element
   (--combat-idle-frames / --combat-idle-end-x) from combat-portrait.ts.
   --combat-sprite-frame-ratio scales the display cell vs idle so weapon 2× (256)
   sheets keep the same on-screen character size as 128 idle (AutoSprite absolute
   pixels match; stretching both to 100% would shrink attack/motion characters).
   steps() MUST use the same var: a hardcoded steps(4) desyncs 25-frame AutoSprite
   strips after animation restarts (conveyor / wrap). Policy gate:
   src/frontend/src/combat/combat-board-portrait-policy.ts */
.combat-cell__tile .combat-unit__sprite-idle,
.combat-portrait-stage .combat-unit__sprite-idle {
  --combat-idle-frames: 4;
  --combat-idle-end-x: 133.333333%;
  --combat-sprite-frame-ratio: 1;
  /* Bottom-center a larger cell when ratio > 1 so swing arcs can bleed past the tile. */
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(100% * var(--combat-sprite-frame-ratio));
  height: calc(100% * var(--combat-sprite-frame-ratio));
  margin: 0;
  border-radius: 0;
  border: none;
  box-sizing: border-box;
  display: block;
  background-color: transparent;
  background-image: var(--combat-idle-sprite-url);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: calc(var(--combat-idle-frames) * 100%) 100%;
  image-rendering: auto;
  transform: translateX(-50%);
  animation: combat-unit-idle-sprite-frames var(--combat-sprite-anim-duration, 1.5s)
    steps(var(--combat-idle-frames), end) var(--combat-sprite-anim-iterate, infinite);
}

/* Must match/exceed base sprite specificity so player_b facing is not dropped. */
.combat-cell__tile .combat-unit__sprite-idle--flipped,
.combat-portrait-stage .combat-unit__sprite-idle--flipped {
  transform: translateX(-50%) scaleX(-1);
}

.combat-unit__icon {
  --combat-facing-scale-x: 1;
}

/* Facing flip must survive idle breathe / other transform animations on the icon
   (those keyframes re-declare `transform` and would otherwise wipe scaleX(-1)). */
.combat-unit__icon--flipped {
  --combat-facing-scale-x: -1;
  transform: scaleX(var(--combat-facing-scale-x));
}

@media (prefers-reduced-motion: reduce) {
  .combat-cell__tile .combat-unit__sprite-idle,
  .combat-portrait-stage .combat-unit__sprite-idle {
    animation: none;
    background-position: 0 100%;
  }
}

@keyframes combat-unit-idle-sprite-frames {
  from {
    background-position: 0 100%;
  }
  to {
    background-position: var(--combat-idle-end-x) 100%;
  }
}

/*
 * Temporary rear-facing flip (does not permanently mutate team facing):
 * - `combat-unit--strike-backward`: `unit_damage` with `backward_strike: true` (spin to hit, spin back).
 * - `combat-unit--retreat-facing`: coalesced `unit_move` run with `retreat: true` (cautious / fear)
 *   so the walk faces the travel direction instead of moonwalking; cleared on land.
 */
.combat-cell__tile .combat-unit--strike-backward .combat-unit__sprite-idle,
.combat-portrait-stage .combat-unit--strike-backward .combat-unit__sprite-idle,
.combat-cell__tile .combat-unit--retreat-facing .combat-unit__sprite-idle,
.combat-portrait-stage .combat-unit--retreat-facing .combat-unit__sprite-idle {
  transform: translateX(-50%) scaleX(-1);
  transition: transform 140ms ease-out;
}

.combat-unit--strike-backward .combat-unit__icon,
.combat-unit--retreat-facing .combat-unit__icon {
  --combat-facing-scale-x: -1;
  transform: scaleX(var(--combat-facing-scale-x));
  transition: transform 140ms ease-out;
}

.combat-cell__tile .combat-unit--strike-backward .combat-unit__sprite-idle--flipped,
.combat-portrait-stage .combat-unit--strike-backward .combat-unit__sprite-idle--flipped,
.combat-cell__tile .combat-unit--retreat-facing .combat-unit__sprite-idle--flipped,
.combat-portrait-stage .combat-unit--retreat-facing .combat-unit__sprite-idle--flipped {
  transform: translateX(-50%) scaleX(1);
  transition: transform 140ms ease-out;
}

.combat-unit--strike-backward .combat-unit__icon--flipped,
.combat-unit--retreat-facing .combat-unit__icon--flipped {
  --combat-facing-scale-x: 1;
  transform: scaleX(var(--combat-facing-scale-x));
  transition: transform 140ms ease-out;
}

:is(.combat-unit__sprite-idle, .combat-unit__icon) {
  transition: transform 140ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .combat-unit--strike-backward :is(.combat-unit__sprite-idle, .combat-unit__icon, .combat-unit__sprite-idle--flipped, .combat-unit__icon--flipped),
  .combat-unit--retreat-facing :is(.combat-unit__sprite-idle, .combat-unit__icon, .combat-unit__sprite-idle--flipped, .combat-unit__icon--flipped),
  :is(.combat-unit__sprite-idle, .combat-unit__icon) {
    transition: none;
  }
}

/* Default stacking for unit scale children (everything except known special overlays). */
.combat-cell__tile
  .combat-unit__scale
  > :not(.combat-unit__presentation):not(.combat-unit__ambient):not(
    .combat-unit__portrait-fx
  ):not(.combat-portrait-fx__cursed-sigil) {
  position: relative;
  z-index: 1;
}

/* Side stand sprite strips retired — commanders use .combat-commander-portrait images. */