.ffx{position:fixed;inset:0;z-index:9000;overflow:hidden;display:flex;align-items:center;justify-content:center;pointer-events:auto;animation:ffin .18s}
.ffx.out{opacity:0;transition:opacity .2s}@keyframes ffin{from{opacity:0}}
.ffbg{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#3a0f0f 0,#0b0508 60%,#000 100%)}
.ffx.aqua .ffbg{background:radial-gradient(circle at 50% 45%,#0d3650 0,#02101c 65%,#000)}.ffx.bird .ffbg{background:radial-gradient(circle at 50% 30%,#3d4a66 0,#0f1422 65%,#000)}
.ffx.sup .ffbg{background:radial-gradient(circle at 50% 45%,#6b1a00 0,#1a0500 55%,#000);animation:ffpulse calc(.5s*var(--slow)) infinite alternate}@keyframes ffpulse{to{filter:brightness(1.6)}}
.ffart{position:absolute;left:50%;width:min(58vw,300px);aspect-ratio:59/80;margin-left:calc(min(58vw,300px)/-2);background:#222 center/cover;border-radius:14px;box-shadow:0 0 40px #000,0 0 0 2px #d9a74a88}
.ffart b{position:absolute;bottom:-26px;left:0;right:0;text-align:center;color:#fff;font:800 14px system-ui;text-shadow:0 2px 6px #000}
.ffart.att{bottom:6vh;z-index:3}.ffart.def{top:8vh;z-index:2}.ffart.lp{display:flex;align-items:center;justify-content:center;background:#300;color:#f66}.ffart.lp b{position:static;font-size:22px}
.ffart.ko{animation:ffko .5s forwards}@keyframes ffko{to{opacity:0;filter:brightness(4) blur(6px);transform:scale(1.3) rotate(8deg)}}
.ffhit{position:absolute;top:8vh;left:50%;width:min(58vw,300px);aspect-ratio:59/80;margin-left:calc(min(58vw,300px)/-2);z-index:4;pointer-events:none}
.ffname{position:absolute;top:50%;left:0;right:0;text-align:center;font:900 clamp(20px,7vw,40px) system-ui;color:#ffd27a;letter-spacing:.06em;text-shadow:0 0 18px #f60,0 3px 0 #000;transform:translateY(-50%) skewX(-8deg);z-index:5;animation:ffname .5s both}
@keyframes ffname{from{opacity:0;transform:translateY(-50%) scale(2.2) skewX(-8deg)}}
.ffx.sup .ffname{color:#fff;font-size:clamp(24px,9vw,52px);text-shadow:0 0 30px #f30,0 0 8px #ff0}
.ffhit .p{position:absolute;left:var(--x);top:var(--y);width:10px;height:10px;border-radius:50%;opacity:0;animation:ffp calc(.7s*var(--slow)) var(--d) ease-out forwards}
@keyframes ffp{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.4)}}
.p.blood{background:#b0001a;width:8px;height:8px}.p.dust{background:#b89a72;width:16px;height:16px;filter:blur(2px)}.p.water{background:#9fe0ff;width:9px;height:12px;border-radius:50% 50% 50% 0}
.p.venom{background:#7dff3a;box-shadow:0 0 8px #7dff3a}.p.feather{background:#eee;width:6px;height:18px;border-radius:50% 50% 10% 10%}.p.ink{background:#111;width:22px;height:22px;filter:blur(3px)}.p.spark{background:#fff6a0;box-shadow:0 0 12px #ff0;width:6px;height:6px}
.slash{position:absolute;left:10%;width:80%;height:6px;background:linear-gradient(90deg,transparent,#fff,#f33,transparent);border-radius:4px;box-shadow:0 0 12px #f33;transform:rotate(-35deg) scaleX(0);animation:ffsl calc(.3s*var(--slow)) forwards}
.slash.s1{top:30%}.slash.s2{top:48%;animation-delay:.05s}.slash.s3{top:66%;animation-delay:.1s}@keyframes ffsl{to{transform:rotate(-35deg) scaleX(1)}}
.jaw{position:absolute;left:5%;width:90%;height:28%;background:repeating-linear-gradient(90deg,#fff 0 8%,transparent 8% 14%);clip-path:polygon(0 0,100% 0,100% 30%,95% 100%,90% 30%,85% 100%,80% 30%,75% 100%,70% 30%,65% 100%,60% 30%,55% 100%,50% 30%,45% 100%,40% 30%,35% 100%,30% 30%,25% 100%,20% 30%,15% 100%,10% 30%,5% 100%,0 30%);filter:drop-shadow(0 0 6px #f00)}
.jaw.up{top:10%;animation:ffju calc(.25s*var(--slow)) forwards}.jaw.dn{bottom:10%;transform:scaleY(-1);animation:ffjd calc(.25s*var(--slow)) forwards}@keyframes ffju{from{transform:translateY(-60%)}to{transform:translateY(55%)}}@keyframes ffjd{from{transform:scaleY(-1) translateY(-60%)}to{transform:scaleY(-1) translateY(55%)}}
.wave{position:absolute;left:50%;top:60%;width:20px;height:20px;margin:-10px;border-radius:50%;border:6px solid #e8c89a;animation:ffw calc(.6s*var(--slow)) forwards}.wave.big{border-width:10px}@keyframes ffw{to{transform:scale(18);opacity:0}}
.crack{position:absolute;inset:40% 0 0;background:linear-gradient(100deg,transparent 45%,#000 46%,#000 48%,transparent 49%),linear-gradient(70deg,transparent 30%,#000 31%,transparent 33%);opacity:.8}
.swirl,.inkc{position:absolute;inset:-10%;border-radius:50%;background:conic-gradient(from 0deg,transparent,#9fe0ff88,transparent,#2a7fb088,transparent);animation:ffsw calc(.8s*var(--slow)) linear}.inkc{background:radial-gradient(#000 0,#000c 40%,transparent 70%);animation:ffink calc(.7s*var(--slow)) forwards}
@keyframes ffsw{to{transform:rotate(720deg)}}@keyframes ffink{from{transform:scale(.1)}to{transform:scale(1.6);opacity:.2}}
.needle,.fang{position:absolute;left:48%;top:-20%;width:6px;height:60%;background:linear-gradient(#fff,#7dff3a);clip-path:polygon(0 0,100% 0,50% 100%);animation:ffnd calc(.2s*var(--slow)) forwards}.fang.f2{left:56%}@keyframes ffnd{to{top:30%}}
.coil{position:absolute;left:-5%;right:-5%;height:16%;border-radius:40px;background:repeating-linear-gradient(60deg,#5a4a1e 0 14px,#2b2410 14px 28px);box-shadow:0 0 10px #000;animation:ffco calc(.5s*var(--slow)) forwards;transform:scaleX(0)}
.coil.c1{top:25%}.coil.c2{top:45%;animation-delay:.08s}.coil.c3{top:65%;animation-delay:.16s}@keyframes ffco{to{transform:scaleX(1) rotate(-8deg)}}
.bolt{position:absolute;left:40%;top:-30%;width:30%;height:130%;background:linear-gradient(#fff,#8ff);clip-path:polygon(40% 0,70% 0,50% 40%,80% 40%,20% 100%,40% 55%,10% 55%);filter:drop-shadow(0 0 14px #6ff);animation:ffbo .3s steps(2) 2}.bolt.b2{left:10%;transform:scaleX(-1)}@keyframes ffbo{50%{opacity:0}}
.flash{position:fixed;inset:0;background:#fff;animation:fffl calc(.45s*var(--slow)) forwards}@keyframes fffl{to{opacity:0}}
.ffdmg{position:absolute;left:0;right:0;top:35%;text-align:center;font:900 clamp(34px,12vw,64px) system-ui;color:#fff;-webkit-text-stroke:2px #a00;text-shadow:0 4px 0 #600;animation:ffdm calc(.9s*var(--slow)) forwards}
@keyframes ffdm{0%{transform:scale(2.4);opacity:0}20%{transform:scale(1);opacity:1}100%{transform:translateY(-60px);opacity:0}}
.ffx.skip *{animation-duration:.01s!important}
.ffdef{position:absolute;left:0;right:0;bottom:-8%;text-align:center;font:900 16px system-ui;color:#9fe0ff;text-shadow:0 0 10px #08f,0 2px 0 #000;animation:ffname .4s both}
.dfx{position:absolute;inset:-6%;border-radius:18px;pointer-events:none;animation:ffdf calc(.7s*var(--slow)) forwards}@keyframes ffdf{0%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1)}100%{opacity:0}}
.dfx.d-shell{background:radial-gradient(ellipse at 50% 60%,#6b5a2a 0 45%,#3a2e12 46% 52%,transparent 53%);border-radius:50% 50% 20% 20%}
.dfx.d-coil{border:10px dashed #7a6a2a;border-radius:50%;animation:ffdf .7s forwards,ffsw .7s linear}
.dfx.d-wing{background:radial-gradient(ellipse at 0 50%,#ddd8 0 35%,transparent 36%),radial-gradient(ellipse at 100% 50%,#ddd8 0 35%,transparent 36%)}
.dfx.d-ink{background:radial-gradient(#000 0,#000a 50%,transparent 70%)}.dfx.d-hide{box-shadow:inset 0 0 0 8px #c9a46a,0 0 30px #c9a46a}.dfx.d-brace{box-shadow:inset 0 0 0 6px #9fe0ff,0 0 30px #4cf}
.dfx.d-dodge{background:linear-gradient(90deg,transparent,#fff4,transparent)}
.ffart.dr-shell{transition:transform .2s;transform:scale(.8)!important}.ffart.dr-dodge{transform:translateX(70px) skewX(-10deg)!important;transition:transform .15s}.ffart.dr-coil{transform:rotate(-12deg) scale(.9)!important;transition:.2s}
/* Adults content mode only (body.gore) */
.p.blood{background:radial-gradient(circle at 35% 35%,#d01818,#6a0000);width:9px;height:9px;border-radius:50% 50% 50% 0;box-shadow:0 0 3px #400}
.ffx .slash{position:absolute;left:50%;top:50%;width:150px;height:7px;margin:-3px 0 0 -75px;background:linear-gradient(90deg,transparent,#b00000 20%,#ff2a2a 50%,#8a0000 80%,transparent);border-radius:50%;transform:rotate(-35deg) scaleX(0);animation:slashin .25s ease-out forwards;filter:drop-shadow(0 0 4px #600)}
.ffx .slash.s2{transform:rotate(25deg) scaleX(0);animation-delay:.08s;top:56%}
@keyframes slashin{to{transform:rotate(var(--rr,-35deg)) scaleX(1)}}.ffx .slash.s2{--rr:25deg}
.bpool{position:absolute;left:10%;right:10%;bottom:-6px;height:16px;border-radius:50%;background:radial-gradient(#8a0000,#4a0000 60%,transparent 72%);transform:scaleX(.2);animation:bpool 1.2s ease-out forwards;pointer-events:none}
.bdrip{position:absolute;top:55%;width:5px;height:0;background:linear-gradient(#a00000,#5a0000);border-radius:0 0 4px 4px;animation:bdrip 1.4s ease-in forwards;pointer-events:none}.bdrip.d1{left:35%}.bdrip.d2{left:62%;animation-delay:.3s}
@keyframes bpool{to{transform:scaleX(1)}}@keyframes bdrip{to{height:36%}}
/* Adults: realistic blood spray, stains, mist; claw gashes on wounded cards */
.bspray{position:absolute;inset:0;pointer-events:none;z-index:30;overflow:visible}
.bspray i{position:absolute;left:var(--cx);top:var(--cy);width:var(--s);height:var(--s);border-radius:50% 50% 50% 10%;background:radial-gradient(circle at 35% 30%,#e3261f,#8e0a0a 60%,#4a0000);box-shadow:0 0 2px #300;animation:bfly var(--t) cubic-bezier(.15,.7,.4,1) forwards}
@keyframes bfly{0%{transform:translate(0,0) scale(.4);opacity:1}80%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:.9}}
.bspray .stain{position:absolute;width:var(--s);height:calc(var(--s)*.8);border-radius:47% 53% 40% 60%/55% 45% 55% 45%;background:radial-gradient(circle at 40% 40%,#b5120f,#6d0303 65%,#3a0000);opacity:0;transform:scale(.3);animation:bstain .4s .25s forwards;filter:drop-shadow(0 0 1px #200)}
.bspray .stain::after{content:'';position:absolute;left:40%;top:80%;width:22%;height:110%;border-radius:0 0 50% 50%;background:linear-gradient(#7d0505,#4a0000);animation:bdrop 1.6s .6s ease-in forwards;transform-origin:top;transform:scaleY(0)}
@keyframes bstain{to{opacity:.95;transform:scale(1)}}@keyframes bdrop{to{transform:scaleY(1)}}
.bspray .mist{position:absolute;left:calc(var(--cx) - 30%);top:calc(var(--cy) - 25%);width:60%;height:50%;border-radius:50%;background:radial-gradient(#d0101099,transparent 70%);animation:bmist .7s ease-out forwards}
@keyframes bmist{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.6);opacity:0}}
.bspray.big i{box-shadow:0 0 4px #400}
.yz .wound{position:absolute;inset:0;border-radius:5px;pointer-events:none;z-index:2;background:linear-gradient(118deg,transparent 30%,#7a0000 31%,#d01c1c 32.5%,#5a0000 34%,transparent 35%),linear-gradient(118deg,transparent 42%,#7a0000 43%,#c41616 44.5%,#5a0000 46%,transparent 47%),radial-gradient(circle at 60% 55%,#9a0b0b88,transparent 30%)}
.yz .wound.w2{background:linear-gradient(118deg,transparent 30%,#7a0000 31%,#d01c1c 32.5%,#5a0000 34%,transparent 35%),linear-gradient(118deg,transparent 42%,#7a0000 43%,#c41616 44.5%,#5a0000 46%,transparent 47%),linear-gradient(118deg,transparent 54%,#7a0000 55%,#c41616 56.5%,#5a0000 58%,transparent 59%),radial-gradient(circle at 55% 60%,#9a0b0baa,transparent 38%)}
.yz .wound.w3{background:linear-gradient(118deg,transparent 30%,#7a0000 31%,#d01c1c 32.5%,#5a0000 34%,transparent 35%),linear-gradient(118deg,transparent 42%,#7a0000 43%,#c41616 44.5%,#5a0000 46%,transparent 47%),linear-gradient(118deg,transparent 54%,#7a0000 55%,#c41616 56.5%,#5a0000 58%,transparent 59%),linear-gradient(32deg,transparent 60%,#7a0000 61%,#c41616 62%,#5a0000 63.5%,transparent 64%),radial-gradient(circle at 50% 60%,#8a0808cc,transparent 48%)}
.yz .bdrip{z-index:2}
/* real matchup on every clip, so the cards always match the fight */
.ffclip .ffvs{position:absolute;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:#000a;border:1px solid #f3d98b55;border-radius:999px;padding:5px 12px;color:#fff;font:800 13px system-ui,sans-serif;z-index:3;white-space:nowrap}
.ffclip .ffvs span{display:flex;align-items:center;gap:6px}.ffclip .ffvs i{width:26px;height:26px;border-radius:50%;background:#222 center/cover}.ffclip .ffvs b{color:#f3d98b}