/* The beast pit's beasts (beasts.js): SVG rigs drawn in the fighter slot like a gladiator's rig. */
svg.beast{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
svg.beast :is(.bj,.bi){transform-box:view-box;transform-origin:0 0}
svg.beast .bi-breath{transform-box:fill-box;transform-origin:50% 100%}
/* In a fighter's facing box the wrapper mirrors the beast toward its rival, like a rig: there the art keeps facing right. */
.sprite-facing svg.beast .beast-face{transform:none}
/* Idle (CSS only): breathing, a swishing tail, a look about, blinks and an ear flap. Endless in the arena, twice elsewhere. */
svg.beast .bi-breath{animation:beast-breath 2.6s ease-in-out 2}
svg.beast .bi-tail{animation:beast-tail 3.4s ease-in-out 2}
svg.beast .bi-tail2{animation:beast-tail2 3.4s ease-in-out 2}
svg.beast .bi-head{animation:beast-look 6.2s ease-in-out 2}
svg.beast .bi-ear{animation:beast-ear 4.6s ease-in-out 2}
.arena-scene svg.beast :is(.bi-breath,.bi-tail,.bi-tail2,.bi-head,.bi-ear){animation-iteration-count:infinite}
.arena-scene svg.beast .bi-blink{animation:beast-blink 5.2s step-end infinite}
/* A telegraph lashes the tail; a worn-out beast (the rig's data-fatigued) pants. */
:is(svg.beast[data-windup],[data-telegraph] svg.beast) .bi-tail{animation-duration:.8s}
[data-fatigued="true"] svg.beast .bi-breath{animation-duration:.9s}
@keyframes beast-breath{50%{transform:scale(1.012,1.03)}}
@keyframes beast-tail{0%,100%{transform:rotate(0)}30%{transform:rotate(-14deg)}58%{transform:rotate(7deg)}}
@keyframes beast-tail2{0%,100%{transform:rotate(0)}36%{transform:rotate(-20deg)}62%{transform:rotate(12deg)}}
@keyframes beast-look{0%,100%{transform:rotate(0)}40%{transform:rotate(-3deg)}72%{transform:rotate(2.5deg)}}
@keyframes beast-ear{0%,100%{transform:rotate(0)}8%{transform:rotate(-16deg)}16%{transform:rotate(0)}22%{transform:rotate(-9deg)}30%{transform:rotate(0)}}
@keyframes beast-blink{0%,100%{opacity:0}95%{opacity:1}97.5%{opacity:0}}
html[data-motion="off"] svg.beast :is(.bi,.bi-blink){animation:none!important}
/* A beast that won the fight grins (views.js: the wrapper celebrates; a beaten one has fled: battle-stage.css hides it). */
.fighter-sprite.celebrating svg.beast .bf{opacity:0}
.fighter-sprite.celebrating svg.beast .bf-happy{opacity:1}
/* The croc's mud puddle is folded away until it lurks; the lurking croc sits in mud instead of turning ghostly (evade). */
svg.beast :is(.bj-mud,.bj-hearts){transform:scale(0)}
svg.beast-rig[data-beast="croc"][data-status~="evade"]{opacity:1}
/* Ground shadows under the whole beast (the wrapper's is a gladiator's): most of a beast stands behind its slot centre, so the
   shadow sits toward its rump (the right while it faces left, the left once it has turned: facing-flipped). */
.fighter-sprite.enemy:is([data-beast="lion"],:has(svg.beast-lion)) .ground-shadow{left:38%;width:62%}
.fighter-sprite.enemy:is([data-beast="bear"],:has(svg.beast-bear)) .ground-shadow{left:46%;width:65%}
.fighter-sprite.enemy:is([data-beast="bull"],:has(svg.beast-bull)) .ground-shadow{left:38%;width:60%}
.fighter-sprite.enemy:is([data-beast="croc"],:has(svg.beast-croc)) .ground-shadow{left:21%;width:105%;height:4.5%}
.fighter-sprite.enemy:is([data-beast="elephant"],:has(svg.beast-elephant)) .ground-shadow{left:42%;width:81%;height:7%}
.fighter-sprite.enemy.facing-flipped:is([data-beast="lion"],:has(svg.beast-lion)) .ground-shadow{left:-1%}
.fighter-sprite.enemy.facing-flipped:is([data-beast="bear"],:has(svg.beast-bear)) .ground-shadow{left:-11%}
.fighter-sprite.enemy.facing-flipped:is([data-beast="bull"],:has(svg.beast-bull)) .ground-shadow{left:0}
.fighter-sprite.enemy.facing-flipped:is([data-beast="croc"],:has(svg.beast-croc)) .ground-shadow{left:-26%}
.fighter-sprite.enemy.facing-flipped:is([data-beast="elephant"],:has(svg.beast-elephant)) .ground-shadow{left:-23%}