/* Playback drives transient motion from one clock; CSS provides stable states. */
.has-battle-feedback .duel-position.is-defeated .duel-card { filter: grayscale(1); }
.has-battle-feedback .duel-position.is-defeated .duel-side-label { color: #c4cbd2; }
.has-battle-feedback .duel-position.is-defeated .duel-side-label::after { content: ' · DERROTADO'; font-weight: 800; }
.has-battle-feedback .duel-position.is-damage-source .duel-card { border-color: #ffe4a4; box-shadow: 0 0 0 1px #f7d79199, 0 0 36px #e8bc6955, 0 10px 22px #0008; }
.has-battle-feedback .duel-card { transition: border-color 180ms ease; }
.has-battle-feedback[data-replay-done=false] .phase-reveal .action-plan { visibility: visible; }
.has-battle-feedback .combat-fx.fx-enter,
.has-battle-feedback[data-replay-impact] .life-value { animation: none; }
/* These five-class selectors outrank the legacy side-specific impact rules. */
.has-battle-feedback .game-arena .duel-position .duel-card .damage-float,
.has-battle-feedback .game-arena .duel-position .duel-card .heal-float { display: none; animation: none; }

.commander .life-track { position: relative; isolation: isolate; }
.commander .life-track > .life-trail,
.commander .life-track > .life-fill { position: absolute; left: 0; top: 0; height: 100%; }
.commander .life-track > .life-trail { z-index: -1; background: #f4c9a0; box-shadow: none; }
.commander .life-track > .life-fill { z-index: 0; }
.has-battle-feedback .life-track > i { transition: none; }
.has-battle-feedback .phase-reveal .life-track { height: 7px; }
.has-battle-feedback .commander { position: relative; }
.has-battle-feedback .phase-reveal .life-value { min-width: 82px; justify-content: flex-end; transform-origin: 65% 50%; }
.has-battle-feedback .phase-reveal .life-value > b { font-size: clamp(35px, 4vw, 49px); line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.has-battle-feedback .commander[data-life-kind=damage] .life-value { color: #ffc1b5; text-shadow: 0 0 15px #ff704d66; }
.has-battle-feedback .commander[data-life-kind=heal] .life-value { color: #b8f5ce; text-shadow: 0 0 15px #49d58366; }
.has-battle-feedback .commander[data-life-kind=virus] .life-value { color: #dfc3ff; text-shadow: 0 0 15px #b879ff66; }
.has-battle-feedback .commander[data-life-kind=damage] .life-trail { background: #ffcdb5; }
.has-battle-feedback .commander[data-life-kind=virus] .life-trail { background: #dbc0ff; }
.life-change {
  position: absolute; z-index: 8; right: 3px; top: calc(100% - 1px);
  display: flex; align-items: baseline; justify-content: center; gap: 5px;
  min-width: 72px; padding: 5px 8px; border: 1px solid #ffbea466; border-radius: 5px;
  color: #ffd0bd; background: #34191bf2; box-shadow: 0 4px 13px #0007;
  pointer-events: none; line-height: 1; white-space: nowrap;
}
.life-change[hidden] { display: none; }
.life-change > strong { font-size: 27px; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.life-change > small { font-size: 9px; font-weight: 800; letter-spacing: .08em; }
[data-life-kind=heal] .life-change { color: #baf8d3; border-color: #91e9b866; background: #112e23f2; }
[data-life-kind=virus] .life-change { color: #e5caff; border-color: #cc9cf766; background: #281638f2; }
.battle-damage-link {
  position: fixed; z-index: 45; height: 3px; margin-top: -1px;
  border-radius: 50%; transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, #ffe5b8 65%, #fff2dc);
  box-shadow: 0 0 8px #ffbd5ca8, 0 0 15px #ff845955;
  pointer-events: none;
}
.battle-damage-link::after { content: ''; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff3db; box-shadow: 0 0 12px #ffd38b; }
@media (max-width: 600px) {
  .has-battle-feedback .phase-reveal .life-value { min-width: 65px; }
  .has-battle-feedback .phase-reveal .life-value > b { font-size: 38px; }
  .life-change { right: 0; padding: 4px 6px; min-width: 61px; }
  .life-change > strong { font-size: 23px; }
  .life-change > small { font-size: 8px; }
}
.reduced-motion .battle-damage-link { display: none; }
.reduced-motion .has-battle-feedback .duel-card { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .battle-damage-link { display: none; }
  .has-battle-feedback .duel-card { transition: none; }
}