/* Combat view (combat-view.js): arrows between figures, roles on the combatants, and everything else stepping back. */
.combat-overlay{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:30;overflow:visible}
.combat-lines{display:none}
.combat-overlay .attack-glow{fill:none;stroke:#ff5a2a;stroke-width:12;stroke-linecap:round;opacity:.28;filter:blur(3px)}
.combat-overlay .attack-line{fill:none;stroke:#ffb347;stroke-width:4.5;stroke-linecap:round}
.combat-overlay #combat-attack-head path{fill:#ffb347}
.combat-overlay .intercept-line{fill:none;stroke:#7fe6dd;stroke-width:4;stroke-linecap:round}
.combat-overlay #combat-intercept-head path{fill:#7fe6dd}
.combat-overlay .intercept-shield circle{fill:#0e2d36;stroke:#7fe6dd;stroke-width:2}
.combat-overlay .intercept-shield path{fill:#7fe6dd}
/* Planned but not yet confirmed: the line marches toward its target. */
.combat-overlay .is-planned.attack-line,.combat-overlay .is-planned.intercept-line{stroke-dasharray:10 8;animation:combat-march .7s linear infinite}
.combat-overlay .is-planned.attack-glow{opacity:.16}
@keyframes combat-march{to{stroke-dashoffset:-18}}

/* Combatants: attackers glow ember and lean in, interceptors glow teal, targets carry a pulsing ring at their feet. */
.unit[data-combat-role]{z-index:6}
.unit[data-combat-role] .piece-visual::before{position:absolute;left:50%;top:-8px;translate:-50% -100%;z-index:7;width:max-content;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 2px 8px #0008;pointer-events:none;zoom:calc(1/var(--board-zoom,1))}
.unit[data-combat-role=attacker] .piece-visual::before{content:'Attacking';background:#ff6a33;color:#2a0d02}
.unit[data-combat-role=blocker] .piece-visual::before{content:'Intercepting';background:#7fe6dd;color:#062a2a}
.unit[data-combat-role=target] .piece-visual::before{content:'Targeted';background:#ffd27a;color:#3a2600}
.unit[data-combat-role=attacker] .piece-visual{filter:drop-shadow(0 0 6px #ff5a2a) drop-shadow(0 0 18px #ff5a2a99)}
.unit[data-combat-role=blocker] .piece-visual{filter:drop-shadow(0 0 6px #5fd7cf) drop-shadow(0 0 16px #5fd7cf88)}
#own-field .unit[data-combat-role=attacker]>.piece--unit{translate:0 -12px}
/* Figures stand on the field's lower edge, so the opponent's attackers come forward by growing from their feet. */
#opponent-field .unit[data-combat-role=attacker]>.piece--unit{scale:1.06;transform-origin:50% 100%}
.unit[data-combat-role]>.piece--unit{transition:translate .35s cubic-bezier(.2,.7,.2,1),scale .35s cubic-bezier(.2,.7,.2,1)}
.unit[data-combat-role=target] .piece-visual::after{content:'';position:absolute;left:8%;right:8%;bottom:-4%;height:26%;border:3px solid #ffcf6a;border-radius:50%;box-shadow:0 0 14px #ffb347aa,inset 0 0 10px #ffb34766;animation:combat-target 1.2s ease-in-out infinite;pointer-events:none;z-index:0}
@keyframes combat-target{0%,100%{opacity:.95;scale:1}50%{opacity:.55;scale:1.08}}
/* Everything not in the fight steps back. */
body[data-combat=declared] .arena .creatures>.unit:not([data-combat-role]){opacity:.42;filter:saturate(.5)}
body[data-combat] .arena .creatures>.unit{transition:opacity .3s,filter .3s,translate .35s cubic-bezier(.2,.7,.2,1)}

/* A player under attack: the portrait pulses red and carries a badge with the number of attackers. The badge sits on the
   portrait itself, so the player panel keeps its own layout and nothing covers the name. */
.player-bar[data-under-attack] .portrait{box-shadow:0 0 0 3px #ff5a2a,0 0 22px #ff5a2acc;animation:combat-player 1.1s ease-in-out infinite}
.portrait[data-under-attack]{position:relative;overflow:visible}
.portrait[data-under-attack]::after{content:'⚔ ' attr(data-under-attack);position:absolute;right:-8px;bottom:-6px;padding:1px 6px;border-radius:999px;background:#ff5a2a;color:#2a0d02;font-size:11px;font-weight:800;line-height:1.4;white-space:nowrap;z-index:5;box-shadow:0 2px 6px #0008}
@keyframes combat-player{50%{box-shadow:0 0 0 5px #ff5a2a,0 0 34px #ff5a2a}}

/* Ready to act: creatures that can still attack (gold) or intercept (teal) carry a ring at their feet; the opponent's
   portrait glows when it can be attacked. */
.unit[data-combat-ready] .piece-aura{border:2px solid var(--ready,#ffd27a);border-radius:50%;box-shadow:0 0 14px var(--ready,#ffd27a),inset 0 0 10px var(--ready,#ffd27a);opacity:.9;animation:combat-ready 1.6s ease-in-out infinite}
.unit[data-combat-ready=intercept]{--ready:#7fe6dd}
.unit[data-combat-ready] .piece-visual{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--ready,#ffd27a) 60%,transparent))}
@keyframes combat-ready{50%{opacity:.55}}
.player-bar.opponent .portrait[data-attackable]{box-shadow:0 0 0 3px #ffd27a,0 0 20px #ffbf45aa;animation:combat-ready 1.6s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  .unit[data-combat-ready] .piece-aura,.player-bar.opponent .portrait[data-attackable],.combat-overlay .is-planned.attack-line,.combat-overlay .is-planned.intercept-line,.unit[data-combat-role=target] .piece-visual::after,.player-bar[data-under-attack] .portrait{animation:none}
  .unit[data-combat-role]>.piece--unit{transition:none}
}