/* Battle panels on the 960x540 grid (see campaign.css for the shared pixel rules). */
#combat-panels { position:absolute; inset:0; pointer-events:none; }
#combat-panels .spell-source { width:40px; height:40px; z-index:8; cursor:help; }
#combat-panels .spell-source:hover { transform:translateY(-2px); }
/* A firing socket squashes into its base, stretches up, then settles; sizes stay whole (44x36, 36x44).
   Two identical animations take turns so a repeat restarts without a reflow. */
#combat-panels .spell-source.fire-a { animation:socket-fire-a .3s steps(1,end); transform-origin:50% 100%; }
#combat-panels .spell-source.fire-b { animation:socket-fire-b .3s steps(1,end); transform-origin:50% 100%; }
@keyframes socket-fire-a { 0%{transform:scale(1.1,.9);filter:brightness(2.4)} 22%{transform:translateY(-4px) scale(.9,1.1);filter:brightness(1.7)} 50%{transform:translateY(-2px);filter:brightness(1.25)} 75%{transform:none;filter:none} }
@keyframes socket-fire-b { 0%{transform:scale(1.1,.9);filter:brightness(2.4)} 22%{transform:translateY(-4px) scale(.9,1.1);filter:brightness(1.7)} 50%{transform:translateY(-2px);filter:brightness(1.25)} 75%{transform:none;filter:none} }
/* A boosted formation's status plate flashes white (its own silhouette), then glows back to normal. */
#campaign .status-plate.boost-hit-a { animation:plate-hit-a .24s steps(1,end); }
#campaign .status-plate.boost-hit-b { animation:plate-hit-b .24s steps(1,end); }
@keyframes plate-hit-a { 0%{filter:brightness(0) invert(1)} 14%{filter:brightness(2)} 55%{filter:brightness(1.4)} 100%{filter:none} }
@keyframes plate-hit-b { 0%{filter:brightness(0) invert(1)} 14%{filter:brightness(2)} 55%{filter:brightness(1.4)} 100%{filter:none} }
.damage-panel { position:absolute; z-index:7; pointer-events:auto; }
#combat-panels .hit { position:absolute; z-index:2; }
#combat-panels .hit:hover { background:rgba(255,240,200,.07); }
#damage-detail { position:absolute; z-index:55; pointer-events:none; }
#combat-panels #skip-spells { z-index:9; }
#combat-panels #skip-spells:hover { filter:brightness(1.2); }
#combat-recap { position:absolute; z-index:30; pointer-events:auto; }
#combat-recap .recap-canvas { position:absolute; left:0; top:0; }
/* Reduced motion drops the socket's squash and hop (the FX canvas still flashes it). */
@media (prefers-reduced-motion:reduce) { #combat-panels .spell-source.fire-a, #combat-panels .spell-source.fire-b { animation:none; } }