/* LeafFauna realistic battle scene — leafactivity.com */
.arena.real{background:#0b1a12;padding-top:8px}
.arena.real>*:not(.rs){position:relative;z-index:5}
.rfield{height:330px;pointer-events:none}
.arena:not(.real) .rfield{display:none}
.arena.real .rs{position:absolute;inset:0;z-index:0;overflow:hidden}
.arena.real>.bwin{position:absolute;z-index:70}
.rs{contain:layout paint}
.rs-bg{position:absolute;inset:-4%;background:center 60%/cover no-repeat;animation:rsdrift 28s ease-in-out infinite alternate;will-change:transform}
@keyframes rsdrift{from{transform:scale(1.06) translate3d(-1.5%,0,0)}to{transform:scale(1.12) translate3d(1.5%,-1%,0)}}
.rs-light{position:absolute;inset:0;background:radial-gradient(ellipse 70% 40% at 70% 12%,#fff6d655,transparent 70%);mix-blend-mode:screen;animation:rslight 9s ease-in-out infinite alternate}
@keyframes rslight{to{opacity:.45;transform:translateX(-6%)}}
.rs-water{position:absolute;inset:0;background:repeating-linear-gradient(100deg,#ffffff00 0 40px,#bff4ff1c 50px,#ffffff00 70px);background-size:200% 100%;mix-blend-mode:screen;animation:rswater 7s linear infinite}
.rs[data-hab=wetland] .rs-water{top:55%;opacity:.7}
@keyframes rswater{to{background-position:-200% 0}}
.rs-ground{position:absolute;left:0;right:0;top:50%;bottom:0;background:linear-gradient(#0000,#0003 30%,#0007)}
.rs-vig{position:absolute;inset:0;background:linear-gradient(#000a,#0000 22%,#0000 62%,#000c 82%,#000e),radial-gradient(ellipse at 50% 55%,#0000 55%,#0008);pointer-events:none}
.rs-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
.rs-figs{position:absolute;left:0;right:0;top:190px;height:330px}
.rf{position:absolute;width:calc(132px*var(--sc));height:calc(118px*var(--sc));transform:translate(-50%,-100%);z-index:var(--z);cursor:pointer;-webkit-tap-highlight-color:transparent}
.rf-body{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;transform:scaleX(var(--fx));will-change:transform,translate}
.rf img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px #0009) saturate(1.05);transform-origin:50% 100%;animation:rfbreath 2.6s ease-in-out infinite;user-select:none}
.rf.far img{filter:drop-shadow(0 4px 4px #0008) saturate(.9) brightness(.92) contrast(.95)}
.rf:nth-child(2n) img{animation-delay:-1.1s}.rf:nth-child(3n) img{animation-delay:-.5s;animation-duration:3s}
@keyframes rfbreath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,1.035) translateY(-1px)}}
.rf.fly img{animation:rffly 2.2s ease-in-out infinite}
@keyframes rffly{0%,100%{transform:translateY(-38px)}50%{transform:translateY(-52px) rotate(-2deg)}}
.rf.water img{animation:rfswim 3.2s ease-in-out infinite;-webkit-mask:linear-gradient(#000 78%,#0006);mask:linear-gradient(#000 78%,#0006)}
@keyframes rfswim{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.rf img.nofig{width:76%;aspect-ratio:1;border-radius:50%;object-fit:cover;border:2px solid #ffffffaa;box-shadow:0 0 18px #9fe8bd88}
.rf-sh{position:absolute;left:12%;right:12%;bottom:-7px;height:16px;border-radius:50%;background:radial-gradient(#000a,#0000 70%);animation:rfsh 2.6s ease-in-out infinite}
.rf.fly .rf-sh{opacity:.45;transform:scale(.7)}
@keyframes rfsh{50%{transform:scaleX(.94);opacity:.85}}
.rf.hitflash img{animation:rfflash .45s,rfbreath 2.6s ease-in-out infinite}
@keyframes rfflash{0%,60%{filter:brightness(2.6) saturate(0) drop-shadow(0 0 10px #fff)}100%{filter:drop-shadow(0 6px 6px #0009)}}
.rf.aura .rf-body::before{content:"";position:absolute;inset:-10% 0 -6%;border-radius:50%;background:radial-gradient(#7dffb066,#0000 65%);animation:rfaura .9s ease-out forwards}
@keyframes rfaura{from{transform:scale(.6);opacity:1}to{transform:scale(1.4);opacity:0}}
.rf.frozen img{filter:drop-shadow(0 6px 6px #0009) hue-rotate(160deg) saturate(.5) brightness(1.2)}
.rf.acting{z-index:60}
.rf.ko{pointer-events:none}
/* compact card HUD over the scene */
.arena.real .bu{background:#08120ecc;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.arena.real .bu .bph{height:30px;background:var(--img) center 30%/cover;opacity:.85}
.arena.real .bu{min-height:0}.arena.real .bu.empty{min-height:62px}
.arena.real .mid,.arena.real .blog{text-shadow:0 1px 3px #000}
.arena.real .blog{background:#0008;border-radius:10px;padding:4px 0}
.rs.low .rs-bg{animation:none;transform:scale(1.06)}.rs.low .rs-light,.rs.low .rs-water{display:none}
.rs.low .rf img{filter:none}.rs.low .rf .rf-sh{animation:none}
.arena.real.low .bu{backdrop-filter:none}
.rs.rm *{animation:none!important}
@media (prefers-reduced-motion:reduce){.rs *{animation:none!important}}

/* face-off FX */
.rs-dmg{position:absolute;z-index:60;transform:translate(-50%,-50%);font:900 26px/1 system-ui,sans-serif;color:#fff;-webkit-text-stroke:1.5px #000;text-shadow:0 3px 0 #0008;pointer-events:none;animation:rsdmg 1.3s ease-out forwards;white-space:nowrap}
.rs-dmg.crit{font-size:38px;color:#ffd23f}.rs-dmg.mv{font-size:15px;color:#bff6ff;letter-spacing:.06em;animation-duration:1s}
.rs-dmg.dodge{color:#7de3ff}.rs-dmg.block{color:#c9d6ff}.rs-dmg.bleed{color:#ff4b5c}.rs-dmg.poison{color:#9dff5c}.rs-dmg.ko{font-size:46px;color:#ff3b30;animation-duration:1.6s}
@keyframes rsdmg{0%{opacity:0;scale:.4}15%{opacity:1;scale:1.25}30%{scale:1}100%{opacity:0;translate:0 -46px}}
.rf.shield .rf-body::after{content:"";position:absolute;inset:-6% -4%;border-radius:50%;border:3px solid #9fd0ffcc;box-shadow:0 0 24px #7fb8ff,inset 0 0 24px #7fb8ff88;animation:rfshield .8s ease-out forwards}
@keyframes rfshield{0%{opacity:0;scale:.7}25%{opacity:1;scale:1}100%{opacity:0;scale:1.15}}
.rf.roar .rf-body::before{content:"";position:absolute;inset:-20%;border-radius:50%;border:3px solid #fff8;animation:rfroar .8s ease-out forwards}
@keyframes rfroar{0%{opacity:.9;scale:.5}100%{opacity:0;scale:1.6}}
.rs-vs{position:absolute;inset:0;display:grid;place-items:center;z-index:65;pointer-events:none}
.rs-vs b{font:italic 900 84px/1 system-ui,sans-serif;color:#ffd23f;-webkit-text-stroke:3px #000;text-shadow:0 6px 0 #000a;animation:rsvs 2.2s ease-out forwards}
@keyframes rsvs{0%{opacity:0;scale:3}20%{opacity:1;scale:1}75%{opacity:1;scale:1.05}100%{opacity:0;scale:.8}}

/* cinematic pose-swap layer (matches approved videos) */
.rf-body.pose{display:block}
.rf-body.pose .rp{position:absolute;left:50%;bottom:0;max-width:100%;max-height:100%;translate:-50% 0;opacity:0;transition:opacity 50ms linear;filter:drop-shadow(0 6px 6px #0009);animation:none;object-fit:contain;transform-origin:50% 100%}
.rf-body.pose .rp.on{opacity:1;animation:rfbreath 2.6s ease-in-out infinite}
.rf.posed{width:calc(170px*var(--sc));height:calc(120px*var(--sc))}
.rf.posed.far .rp{filter:drop-shadow(0 4px 4px #0008) saturate(.92) brightness(.94)}
.rf.hitflash .rp.on{animation:rfflash .45s}
.rs-ghost{position:absolute;z-index:45;pointer-events:none;object-fit:contain;filter:brightness(1.6) hue-rotate(160deg) saturate(2)}
.rs-fg{position:absolute;left:-8%;right:-8%;bottom:-2%;height:30%;background:center bottom/cover no-repeat;-webkit-mask:linear-gradient(#0000,#000 60%);mask:linear-gradient(#0000,#000 60%);opacity:.55;animation:rsfg 16s ease-in-out infinite alternate;will-change:transform;pointer-events:none;filter:brightness(.55)}
@keyframes rsfg{from{transform:translate3d(3%,0,0) scale(1.15)}to{transform:translate3d(-3%,0,0) scale(1.15)}}
.rs.slowmo .rs-bg,.rs.slowmo .rs-figs{filter:saturate(.55) contrast(1.1)}
.rs.slowmo::after{content:"";position:absolute;inset:0;z-index:62;pointer-events:none;box-shadow:inset 0 46px 0 #000,inset 0 -46px 0 #000;transition:box-shadow .3s}
.rs-mute{position:absolute!important;top:6px;right:6px;z-index:80!important;width:36px;height:36px;border-radius:50%;border:1px solid #fff4;background:#0008;color:#fff;font-size:17px;cursor:pointer}
.rs.low .rs-fg{display:none}
.rf img.nofig.anime{width:82%;aspect-ratio:3/4;border-radius:14px;object-fit:cover;object-position:center 35%;border:2px solid #ffe6a0cc;box-shadow:0 0 22px #ffd36a88,0 6px 14px #0008}