/* Four expressive, detailed poses per fighter, using one consistent atlas per identity. */
.sprite{background-image:var(--fighter-art);background-size:200% 200%;background-position:var(--pose-x,0%) var(--pose-y,0%);aspect-ratio:2/3;clip-path:inset(.5%);}
.showcase-sprite{max-height:555px;width:95%;aspect-ratio:2/3;}
.hero-scene{min-height:570px;}
.hero-tile-art .sprite{width:89%;left:5.5%;top:-6px;}
.mini-hero .sprite{top:0;width:105%;left:-2.5%;}
.loadout-art>.sprite{width:95%;left:-5%;bottom:-3%;}
.battle-stage{height:495px;}
.combatants{inset:105px 18% 20px;}
.combatant-art{width:240px;height:360px;max-height:100%;}
.combatant{--face:1;--direction:1;--reaction-angle:0deg;--fall-lift:-66px;}
.combatant.opponent{--face:-1;--direction:-1;}
.pose-shell,.body-rig{position:absolute;inset:0;transform-origin:50% 91%;}
.pose-shell{animation:breathing-hd 4.5s ease-in-out infinite;}
.body-rig{transform:scaleX(var(--face));}
.combatant .fighter,.combatant.opponent .fighter{width:100%;height:100%;transform:none;animation:none;clip-path:inset(.5%);background-position:var(--pose-x,0%) var(--pose-y,0%);filter:drop-shadow(0 9px 7px #0009);}
.combatant .combatant-art{animation:none;transform-origin:50% 91%;}
.combatant-art:before,.combatant-art:after{pointer-events:none;}
.body-zone{left:calc(53% - 13px);top:calc(16% + var(--zone)*15.5%);}
.cinematic .body-zone{opacity:0;pointer-events:none;}
.cinematic .combatant .pose-shell{animation:none;}
.cinematic .stage-message{letter-spacing:.5px;color:#d6c3ac;}
.combatant.attack-motion .combatant-art{animation:attack-hd 540ms cubic-bezier(.2,.55,.3,1);}
.combatant.attack-motion .body-rig:after{content:'';position:absolute;left:52%;top:calc(37% + var(--aim-y,0px));width:70%;height:3px;background:linear-gradient(90deg,transparent,#f9e6bc);transform:rotate(-25deg);filter:drop-shadow(0 0 4px #e8b973);animation:slash-hd 480ms ease-out;}
.combatant.pain[data-reaction=head] .pose-shell{animation:pain-head 650ms ease-out;}
.combatant.pain[data-reaction=chest] .pose-shell{animation:pain-chest 650ms ease-out;}
.combatant.pain[data-reaction=stomach] .pose-shell{animation:pain-stomach 700ms ease-out;}
.combatant.pain[data-reaction=waist] .pose-shell{animation:pain-waist 700ms ease-out;}
.combatant.pain[data-reaction=legs] .pose-shell{animation:pain-legs 700ms ease-out;}
.combatant.pain .fighter{animation:damage-light 250ms ease-out;}
.combatant.recover-anger .pose-shell{animation:angry-recover 620ms ease-out;}
.combatant.recover-anger .fighter{filter:drop-shadow(0 0 6px #e5ab7d40) drop-shadow(0 9px 7px #0009);}
.combatant.guard-motion .pose-shell{animation:block-hd 520ms ease-out;}
.combatant.guard-motion .body-rig:before{content:'';position:absolute;inset:10% 5% 2%;border:2px solid #a4d6ef;border-radius:45%;z-index:3;box-shadow:0 0 20px #72afcf66,inset 0 0 35px #8dbfd833;animation:shield 600ms ease-out forwards;}
.combatant.burn-pain .pose-shell{animation:pain-stomach 550ms ease-out;}
.combatant.burn-pain .fighter{filter:drop-shadow(0 0 11px #d76741);}
.contact-burst{position:absolute;left:53%;top:var(--impact-y);z-index:8;pointer-events:none;width:4px;height:4px;border-radius:50%;background:#ffdeb5;box-shadow:0 0 15px 5px #f5ba7455;animation:contact-flash 350ms ease-out forwards;}
.contact-burst.blocked{background:#b8e6ff;box-shadow:0 0 15px 5px #78b1db55;}
.contact-burst.burning{background:#ef8a55;}
.contact-burst i{position:absolute;left:0;top:0;height:2px;width:7px;background:inherit;transform-origin:left center;animation:spark-ray 430ms ease-out forwards;}
.damage-float{top:27%;pointer-events:none;}
.damage-float.blocked-float{font-size:15px;letter-spacing:1.5px;}
.heal-float{position:absolute;top:20%;left:54%;z-index:10;color:#a8d5a7;font-size:18px;animation:damage 1s ease-out forwards;}
.mouth-blood{position:absolute;left:var(--mouth-x,61%);top:var(--mouth-y,19%);width:4px;height:3px;z-index:12;pointer-events:none;background:#932b2b;border-radius:50%;}
.mouth-blood i{position:absolute;left:0;top:0;width:calc(var(--size)*2);height:var(--size);border-radius:45% 65% 60% 45%;background:linear-gradient(90deg,#8c2226,#c04b48);box-shadow:0 0 1px #541a1a;animation:mouth-droplet 780ms cubic-bezier(.1,.5,.5,1) forwards;animation-delay:var(--delay);opacity:0;}
.combatant.knocked-out{filter:none!important;z-index:3;}
.combatant.knocked-out .pose-shell{animation:none;}
.combatant.knocked-out .combatant-art{animation:collapse-hd 1100ms cubic-bezier(.3,.1,.5,1) forwards;}
.combatant.knocked-out .fighter{animation:fade-defeat 1200ms forwards;}
.combatant.knocked-out .body-zone{display:none;}
.combatant.knocked-out .fighter-label{opacity:.35;}
.fall-dust{position:absolute;bottom:2%;left:12%;width:120%;height:15px;border-radius:50%;background:radial-gradient(ellipse,#c7ac8777,transparent 70%);filter:blur(3px);opacity:0;animation:fall-dust 750ms 700ms ease-out forwards;pointer-events:none;}
.victory-pose .pose-shell{animation:victory-hd 1.2s ease-out forwards;}
.finish-caption{font-size:20px!important;font-weight:600;letter-spacing:7px!important;bottom:42%!important;color:#f4d0a1!important;text-shadow:0 2px 20px #000;animation:finish-title 350ms ease-out;}
.battle-stage.impact-shake{animation:impact-nudge 210ms linear;}
.animation-lab{margin-top:24px;display:flex;align-items:center;gap:30px;justify-content:space-between;}
.animation-lab h2{margin:12px 0;}
.animation-lab p{font-size:12px;color:#99939c;}
.animation-lab .btn{white-space:nowrap;}
@keyframes breathing-hd{50%{transform:translateY(-2px)}}
@keyframes attack-hd{0%,100%{transform:translate(0,0)}22%{transform:translateX(calc(-8px*var(--direction))) rotate(calc(-3deg*var(--direction)))}58%{transform:translate(calc(clamp(40px,8vw,105px)*var(--direction)),var(--aim-y,0px)) rotate(calc(8deg*var(--direction)))}76%{transform:translateX(calc(25px*var(--direction)))}}
@keyframes slash-hd{0%,30%{opacity:0;scale:.3 1}55%{opacity:1;scale:1 1}100%{opacity:0;scale:1.3 1}}
@keyframes pain-head{0%{transform:translate(0,0)}20%{transform:translate(calc(-21px*var(--direction)),-4px) rotate(calc(-11deg*var(--direction)))}46%{transform:translate(calc(-11px*var(--direction)),2px) rotate(calc(-6deg*var(--direction)))}75%{transform:translate(calc(3px*var(--direction)),0) rotate(calc(1deg*var(--direction)))}100%{transform:translate(0,0)}}
@keyframes pain-chest{20%{transform:translate(calc(-22px*var(--direction)),3px) rotate(calc(-7deg*var(--direction)))}60%{transform:translate(calc(-8px*var(--direction)),0)}100%{transform:none}}
@keyframes pain-stomach{22%{transform:translate(calc(5px*var(--direction)),12px) rotate(calc(10deg*var(--direction)))}55%{transform:translateY(6px) rotate(calc(5deg*var(--direction)))}100%{transform:none}}
@keyframes pain-waist{20%{transform:translate(calc(-16px*var(--direction)),13px) rotate(calc(-8deg*var(--direction)))}55%{transform:translateY(7px) rotate(calc(3deg*var(--direction)))}100%{transform:none}}
@keyframes pain-legs{20%{transform:translate(calc(-8px*var(--direction)),26px) rotate(calc(6deg*var(--direction)))}50%{transform:translate(calc(3px*var(--direction)),13px) rotate(calc(-3deg*var(--direction)))}100%{transform:none}}
@keyframes angry-recover{0%{transform:translateY(4px)}40%{transform:translateX(calc(5px*var(--direction)))}100%{transform:none}}
@keyframes block-hd{20%{transform:translateX(calc(-8px*var(--direction))) rotate(calc(-3deg*var(--direction)))}65%{transform:translateX(calc(3px*var(--direction)))}100%{transform:none}}
@keyframes damage-light{0%,100%{filter:brightness(1) drop-shadow(0 9px 7px #0009)}30%{filter:brightness(1.35) sepia(.15) drop-shadow(0 0 8px #b7604144)}}
@keyframes contact-flash{0%{opacity:1;scale:.6}40%{opacity:.9;scale:1.3}100%{opacity:0;scale:1.5}}
@keyframes spark-ray{0%{transform:rotate(var(--ray)) translateX(0);opacity:1}100%{transform:rotate(var(--ray)) translateX(var(--distance));opacity:0}}
@keyframes mouth-droplet{0%{opacity:0;transform:translate(0,0) rotate(-15deg)}12%{opacity:.95}55%{opacity:.8;transform:translate(var(--dx),var(--dy)) rotate(15deg)}100%{opacity:0;transform:translate(calc(var(--dx)*1.25),var(--drop)) rotate(70deg)}}
@keyframes collapse-hd{0%{transform:translate(0,0) rotate(0)}22%{transform:translate(calc(-8px*var(--direction)),18px) rotate(calc(-9deg*var(--direction)))}42%{transform:translate(calc(4px*var(--direction)),23px) rotate(calc(25deg*var(--direction)))}78%{transform:translate(calc(10px*var(--direction)),var(--fall-lift)) rotate(calc(86deg*var(--direction)))}87%{transform:translate(calc(10px*var(--direction)),calc(var(--fall-lift) - 6px)) rotate(calc(81deg*var(--direction)))}100%{transform:translate(calc(10px*var(--direction)),var(--fall-lift)) rotate(calc(84deg*var(--direction)))}}
@keyframes fade-defeat{0%{filter:brightness(1)}100%{filter:brightness(.67) saturate(.68) drop-shadow(0 5px 5px #0008)}}
@keyframes fall-dust{0%{opacity:0;scale:.3 1}30%{opacity:.7;scale:1.1 1}100%{opacity:0;scale:1.7 1}}
@keyframes victory-hd{0%{transform:translateY(2px)}100%{transform:translateY(-3px)}}
@keyframes finish-title{from{opacity:0;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}
@keyframes impact-nudge{0%,100%{transform:translate(0,0)}25%{transform:translate(2px,1px)}55%{transform:translate(-2px,-1px)}80%{transform:translate(1px,0)}}
@media(min-width:1500px){.hero-scene{min-height:620px}.showcase-sprite{max-height:610px}.battle-stage{height:530px}.combatant-art{width:260px;height:390px}}
@media(max-width:1150px){.battle-stage{height:465px}.combatant-art{width:222px;height:333px}.combatants{inset:105px 14% 20px}}
@media(max-width:850px){.battle-stage{height:435px}.combatant-art{width:200px;height:300px}.combatants{inset:105px 8% 20px}.animation-lab{align-items:start;flex-direction:column}.animation-lab .btn{width:100%}.showcase-sprite{margin-bottom:20px}}
@media(max-width:560px){.hero-scene{min-height:540px}.showcase{width:62%;right:-8%}.showcase-sprite{margin-bottom:30px}.hero-tile-art .sprite{width:115%;left:-7.5%;top:-6px}.mini-hero .sprite{width:130%;left:-15%;top:0}.battle-stage{height:375px}.combatants{inset:100px 1% 18px}.combatant{width:46%;--fall-lift:-46px}.combatant-art{width:170px;height:255px}.body-zone{left:calc(53% - 10px)}.finish-caption{font-size:15px!important;letter-spacing:4px!important}.damage-float{font-size:22px}.mouth-blood i{height:calc(var(--size)*.8);width:calc(var(--size)*1.5)}.animation-lab p{font-size:11px}}
.reduced .combatant.knocked-out .combatant-art{transform:translateY(var(--fall-lift)) rotate(calc(84deg*var(--direction)));}
.reduced .combatant.knocked-out .fighter{filter:brightness(.67);}
.reduced .mouth-blood{display:none;}
@media(prefers-reduced-motion:reduce){.pose-shell,.contact-burst,.contact-burst i,.mouth-blood i,.combatant .combatant-art,.combatant .fighter,.finish-caption,.battle-stage{animation:none!important}.combatant.knocked-out .combatant-art{transform:translateY(var(--fall-lift)) rotate(calc(84deg*var(--direction)))}.mouth-blood{display:none}}

.animation-complete{grid-column:1/-1;display:flex;gap:20px;align-items:center;width:100%}.animation-complete>div{flex:1}.animation-complete h2{font-size:24px;margin:8px 0}.animation-complete p{color:#99939c;font-size:12px}.animation-complete .btn{white-space:nowrap}.animation-complete .eyebrow{font-size:9px}
@media(max-width:700px){.animation-complete{flex-wrap:wrap;gap:10px}.animation-complete>div{flex-basis:100%}.animation-complete h2{font-size:20px}.animation-complete .btn{flex:1}.animation-complete p{font-size:11px}}

/* A narrow parent must resize both axes together, never squeeze just the width. */
.combatant .combatant-art{height:auto;aspect-ratio:2/3;flex-shrink:0;}