/* Apex Faceoff polish: battle focus mode, action sheet, HP numbers, telegraphs, impact FX, arena lighting. leafactivity.com */
/* ---- focus mode: fold page chrome away during a battle so the fight fits one phone screen ---- */
body.lf-battle .tabs,body.lf-battle .cardhero,body.lf-battle .cnav,body.lf-battle .foot{display:none!important}
@media (max-height:920px){body.lf-battle header.top{display:none!important}}
body.lf-battle #app{padding-top:0!important;margin-top:0!important}
body.lf-battle .arena{margin-top:0!important;min-height:100svh;padding-bottom:12px}
body.lf-battle .rfield{height:clamp(190px,calc(100svh - 470px),330px)}
body.lf-battle .rs-figs{height:clamp(190px,calc(100svh - 470px),330px)}
/* ---- GAME AD HERO: fight preview on top of app ---- */
.gamead{margin:0 0 12px;border-radius:18px;overflow:hidden;box-shadow:0 12px 40px #0008}
.fightpreview{position:relative;height:220px;background:#0a0a0a;overflow:hidden}
.fslide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:fightCycle 12s infinite}
.fslide:nth-child(1){animation-delay:0s}
.fslide:nth-child(2){animation-delay:3s}
.fslide:nth-child(3){animation-delay:6s}
.fslide:nth-child(4){animation-delay:9s}
@keyframes fightCycle{0%{opacity:0;transform:scale(1.05)}8%{opacity:1;transform:scale(1)}25%{opacity:1;transform:scale(1.02)}33%{opacity:0;transform:scale(1.08)}100%{opacity:0}}
.foverlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:16px;background:linear-gradient(#0000 40%,#000c 85%,#000e);pointer-events:none;z-index:5}
.foverlay b{font:900 28px/1 Poppins,Inter,sans-serif;letter-spacing:.14em;color:#fff;text-shadow:0 0 20px #ffd76a,0 2px 8px #000}
.foverlay span{margin-top:4px;font:600 13px Inter,sans-serif;color:#ffe2c7;letter-spacing:.04em}
@media (max-width:480px){.fightpreview{height:180px}.foverlay b{font-size:22px}}
/* ---- bottom action sheet (thumb zone) ---- */
.actsheet{animation:ashin .22s cubic-bezier(.2,.9,.3,1)}
@keyframes ashin{from{transform:translateY(24px);opacity:0}}
body.lf-battle .arena.real>.actsheet{margin:0 auto 6px;width:calc(100% - 16px);max-width:540px;box-sizing:border-box;padding:8px 10px 10px;background:linear-gradient(#0b1512e8,#050a08f5);border-top:1px solid #ffffff22;border-radius:16px;box-shadow:0 8px 24px #000a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.actsheet .ashd{margin:0 0 6px;text-align:center;font:700 13px Inter,sans-serif;color:#e8f3ec}.actsheet .ashd small{opacity:.7;margin-left:4px}
body.lf-battle .actsheet .acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
body.lf-battle .actsheet .acts .btn{margin:0;min-height:42px;padding:6px;font-size:14px}
body.lf-battle .actsheet .acts .ult,body.lf-battle .actsheet .acts .ft{grid-column:1/-1}
body.lf-battle .actsheet .skills{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
body.lf-battle .actsheet .sktxt{margin:6px 0 0;font-size:12px;line-height:1.3;opacity:.85;text-align:center}
body:has(.tmeter) .actsheet{opacity:.15;pointer-events:none;transition:opacity .15s}
.act.ult{animation:ultbtn 1s ease-in-out infinite}
@keyframes ultbtn{50%{box-shadow:0 0 0 2px #ffb36b,0 0 22px #ff6a00}}
/* ---- HP numbers, low-HP danger, rage-full glow ---- */
.hpb{position:relative;overflow:visible!important}
.hpb .hpn{position:absolute;right:2px;top:50%;transform:translateY(-50%);z-index:2;font:800 9px/1 Inter,sans-serif;font-style:normal;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none}
.arena .hpb{height:11px!important}
.hpb.low i{animation:hplow .8s ease-in-out infinite}
@keyframes hplow{50%{filter:brightness(1.6);box-shadow:0 0 10px #ff2a2a}}
.bu.me .hpb.low{outline:1px solid #ff4d4d88;outline-offset:1px}
.bu.ragefull .rgb{box-shadow:0 0 10px #ff7a1a}.bu.ragefull .rgb i{background:linear-gradient(90deg,#ffb36b,#ff3d00)!important;animation:hplow .7s ease-in-out infinite}
.bu.foe.ragefull{box-shadow:0 0 0 2px #ff5a1f,0 0 18px #ff3d00aa!important}
.fwarn{margin:6px 10px;padding:7px 10px;border-radius:12px;background:#3a0d00d9;border:1px solid #ff7a1a;color:#ffe2c7;font:600 12.5px/1.35 Inter,sans-serif;text-align:center;animation:fwarn 1.2s ease-in-out infinite}
@keyframes fwarn{50%{box-shadow:0 0 16px #ff5a1f99}}
/* ---- round card + result stats ---- */
.rcard{position:absolute;left:0;right:0;top:38%;z-index:65;text-align:center;pointer-events:none}
.rcard b{display:inline-block;padding:6px 26px;font:900 28px/1 Poppins,Inter,sans-serif;letter-spacing:.12em;color:#fff;background:linear-gradient(90deg,#0000,#000b 20%,#000b 80%,#0000);text-shadow:0 0 18px #ffd76a;animation:rcard 1.05s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes rcard{0%{transform:translateX(-60%) skewX(-12deg);opacity:0}25%{transform:none;opacity:1}75%{transform:none;opacity:1}100%{transform:translateX(60%) skewX(12deg);opacity:0}}
.bstats{display:flex;gap:8px;justify-content:center;margin:10px 0 4px}
.bstats span{display:flex;flex-direction:column;align-items:center;min-width:86px;padding:8px 6px;border-radius:12px;background:#ffffff12;border:1px solid #ffffff22;color:#fff}
.bstats b{font:900 22px/1.1 Poppins,Inter,sans-serif;color:#ffd76a}.bstats small{font-size:10.5px;opacity:.75}
/* ---- scene impact FX ---- */
.rs-ring{position:absolute;z-index:45;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 14px #ffd76a,inset 0 0 10px #ffd76a;pointer-events:none;animation:rsring .5s ease-out forwards}
.rs-ring.big{border-color:#ffd23f;border-width:5px;animation-duration:.6s}
@keyframes rsring{from{transform:scale(.3);opacity:1}to{transform:scale(5.5);opacity:0}}
.rs-ring.big{animation-name:rsringb}@keyframes rsringb{from{transform:scale(.3);opacity:1}to{transform:scale(8);opacity:0}}
.rs.critfx:after{content:"";position:absolute;inset:0;z-index:44;pointer-events:none;background:radial-gradient(circle at 50% 50%,#fff8 0,#ffd76a33 30%,#0000 65%);mix-blend-mode:screen;animation:critfx .5s ease-out forwards}
.rs.critfx .rs-bg{filter:saturate(1.6) contrast(1.15)}
@keyframes critfx{from{opacity:1}to{opacity:0}}
.rs-speed{position:absolute;inset:-20%;z-index:42;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 55%,#fff0 0deg 5deg,#ffffff38 5.6deg,#fff0 6.4deg 11deg);-webkit-mask:radial-gradient(circle at 50% 55%,#0000 24%,#000 62%);mask:radial-gradient(circle at 50% 55%,#0000 24%,#000 62%);animation:rsspeed 1.5s linear forwards}
@keyframes rsspeed{0%{opacity:0;transform:rotate(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:rotate(14deg)}}
.rs-dmg.mv{padding:3px 9px;border-radius:999px;background:#0009;-webkit-text-stroke:0;font:800 13px Poppins,Inter,sans-serif!important;letter-spacing:.08em}
/* ---- FULLY ANIMATED FIGHTS ---- */
.bu{animation:idleBreath 2.2s ease-in-out infinite}
@keyframes idleBreath{0%,100%{transform:translateY(0) scale(1) rotate(0)}40%{transform:translateY(-4px) scale(1.02) rotate(0.5deg)}70%{transform:translateY(-1px) scale(1.01) rotate(-0.4deg)}}
.bu.me{animation:idleBreath 2.4s ease-in-out infinite}
.bu.foe{animation:idleBreath 2s ease-in-out infinite}
.bu.atk{animation:none}
/* Attack lunges by motion type - stronger and more visible */
.bu.mv-bite{animation:lungeBite .5s cubic-bezier(.2,.9,.3,1)}
@keyframes lungeBite{0%{transform:translateX(0) scale(1)}25%{transform:translateX(calc(var(--dir,1) * 36px)) scale(1.12) rotate(calc(var(--dir,1) * -6deg))}55%{transform:translateX(calc(var(--dir,1) * 16px)) scale(1.06)}100%{transform:translateX(0) scale(1)}}
.bu.mv-swipe{animation:lungeSwipe .48s cubic-bezier(.2,.9,.3,1)}
@keyframes lungeSwipe{0%{transform:translateX(0)}20%{transform:translateX(calc(var(--dir,1) * 28px)) rotate(calc(var(--dir,1) * -8deg))}50%{transform:translateX(calc(var(--dir,1) * 10px))}100%{transform:translateX(0)}}
.bu.mv-dash{animation:lungeDash .42s cubic-bezier(.2,.9,.3,1)}
@keyframes lungeDash{0%{transform:translateX(0) scale(1)}30%{transform:translateX(calc(var(--dir,1) * 48px)) scale(1.14)}100%{transform:translateX(0) scale(1)}}
.bu.mv-slam{animation:lungeSlam .55s cubic-bezier(.2,.9,.3,1)}
@keyframes lungeSlam{0%{transform:translateY(0) scale(1)}25%{transform:translateY(-12px) scale(1.08)}50%{transform:translateY(8px) scale(1.16)}100%{transform:translateY(0) scale(1)}}
.bu.mv-strike{animation:lungeStrike .45s cubic-bezier(.2,.9,.3,1)}
@keyframes lungeStrike{0%{transform:translateX(0)}35%{transform:translateX(calc(var(--dir,1) * 24px)) rotate(calc(var(--dir,1) * -5deg))}100%{transform:translateX(0)}}
.bu.mv-dive{animation:lungeDive .5s cubic-bezier(.2,.9,.3,1)}
@keyframes lungeDive{0%{transform:translateY(0)}25%{transform:translateY(-22px) scale(1.08)}55%{transform:translateY(6px)}100%{transform:translateY(0)}}
.bu.mv-hop{animation:lungeHop .48s cubic-bezier(.2,.9,.3,1)}
@keyframes lungeHop{0%{transform:translateY(0)}35%{transform:translateY(-18px)}100%{transform:translateY(0)}}
/* Stronger hit reactions */
.bu.recoil{animation:recoilHit .38s cubic-bezier(.2,.9,.3,1)}
@keyframes recoilHit{0%{transform:translateX(0) scale(1)}15%{transform:translateX(18px) scale(.92) rotate(3deg)}45%{transform:translateX(-8px) scale(1.04)}100%{transform:translateX(0) scale(1)}}
.arena.punch{animation:screenPunch .28s cubic-bezier(.2,.8,.3,1)}
@keyframes screenPunch{0%{transform:translate(0,0)}18%{transform:translate(5px,-4px)}40%{transform:translate(-5px,4px)}65%{transform:translate(2px,1px)}100%{transform:translate(0,0)}}
/* Adults mode blood splash on hit */
body.adults .bu.recoil::after{content:"";position:absolute;left:50%;top:40%;width:36px;height:36px;margin:-18px 0 0 -18px;background:radial-gradient(circle,#ff2a2a,#8b0000 55%,transparent 78%);border-radius:50%;pointer-events:none;animation:bloodSplash .45s ease-out forwards;z-index:5}
@keyframes bloodSplash{0%{transform:scale(.12);opacity:1}100%{transform:scale(3.2);opacity:0}}
/* Kids mode clean impact (dust only) */
body:not(.adults) .bu.recoil::after{content:"";position:absolute;left:50%;top:45%;width:28px;height:28px;margin:-14px 0 0 -14px;background:radial-gradient(circle,#ffffffaa,#c8b090 50%,transparent 75%);border-radius:50%;pointer-events:none;animation:dustHit .35s ease-out forwards;z-index:5}
@keyframes dustHit{0%{transform:scale(.15);opacity:.95}100%{transform:scale(2.5);opacity:0}}
/* Persistent wound on bleeding animals (Adults only) */
body.adults .bu.bleeding .bph{box-shadow:inset 0 0 14px #c00,0 0 10px #a00}
/* Clearer status badges */
.bu.bleeding .st.sb{animation:pulseStatus .7s ease-in-out infinite}
.bu.venom .st{animation:pulseStatus .9s ease-in-out infinite}
@keyframes pulseStatus{50%{transform:scale(1.2);filter:brightness(1.4)}}
/* Crowd reaction on big hits / finishers */
.arena.crowd-roar{animation:crowdRoar .55s ease-out}
@keyframes crowdRoar{0%{filter:brightness(1)}25%{filter:brightness(1.2)}100%{filter:brightness(1)}}
.rs-crowd{position:absolute;inset:0;pointer-events:none;z-index:40;opacity:0;background:radial-gradient(ellipse at 50% 20%,#ffffff22,transparent 50%);animation:none}
.arena.crowd-roar .rs-crowd{animation:crowdFlash .5s ease-out}
@keyframes crowdFlash{0%{opacity:0}35%{opacity:.8}100%{opacity:0}}
/* Camera zoom on ultimates / specials */
.arena.cam-zoom{animation:camZoom 1.4s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes camZoom{0%{transform:scale(1)}20%{transform:scale(1.1)}70%{transform:scale(1.07)}100%{transform:scale(1)}}
.arena.cam-zoom .rfield,.arena.cam-zoom .rs-figs{transform-origin:center 60%}
/* Perfect hit slow-mo feel */
.arena.perfect-hit{animation:perfectHit .4s cubic-bezier(.2,.8,.3,1)}
@keyframes perfectHit{0%{filter:brightness(1) saturate(1)}35%{filter:brightness(1.3) saturate(1.5)}100%{filter:brightness(1) saturate(1)}}
.tmeter.perfect p{color:#ffd76a;text-shadow:0 0 12px #ffd76a;font-size:28px}
/* Combo chains */
.arena.combo-x2,.arena.combo-x3,.arena.combo-x4,.arena.combo-x5{position:relative}
.arena.combo-x2:after,.arena.combo-x3:after,.arena.combo-x4:after,.arena.combo-x5:after{content:attr(data-combo);position:absolute;top:18%;left:50%;transform:translateX(-50%);font:900 32px Poppins,Inter,sans-serif;color:#ffd76a;text-shadow:0 0 16px #ff6a00;pointer-events:none;z-index:70;animation:comboPop .65s cubic-bezier(.2,1.4,.3,1) forwards}
.arena.combo-x2:after{content:"COMBO x2"}
.arena.combo-x3:after{content:"COMBO x3"}
.arena.combo-x4:after{content:"COMBO x4"}
.arena.combo-x5:after{content:"COMBO x5"}
@keyframes comboPop{0%{transform:translateX(-50%) scale(.35);opacity:0}35%{transform:translateX(-50%) scale(1.2);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:0}}
/* Clearer your-turn indicator */
body.lf-battle .actsheet{box-shadow:0 -4px 24px #ffd76a33,0 8px 24px #000a}
body.lf-battle .ashd{animation:turnPulse 1.4s ease-in-out infinite}
@keyframes turnPulse{50%{text-shadow:0 0 8px #ffd76a}}
/* Living arena dust + continuous motion */
.rs-figs:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 80%,#c8b09022,transparent 50%);animation:dustDrift 3.5s ease-in-out infinite}
@keyframes dustDrift{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:.75;transform:translateY(-6px)}}
.rs-bg{animation:bgPulse 8s ease-in-out infinite}
@keyframes bgPulse{0%,100%{filter:saturate(1.25) contrast(1.08) brightness(1.05)}50%{filter:saturate(1.35) contrast(1.12) brightness(1.08)}}
/* ---- arena lighting: warm torches in the colosseum, cold rim light on ice, sun haze on savanna ---- */
.rs[data-hab=savanna] .rs-light{background:radial-gradient(ellipse 80% 45% at 75% 8%,#ffd49a66,transparent 70%)}
.rs[data-hab=arctic] .rs-light{background:radial-gradient(ellipse 80% 45% at 30% 6%,#bfe8ff66,transparent 70%)}
.rs.art[data-hab=savanna]:not([data-x]) .rs-light{animation:torch 2.2s ease-in-out infinite alternate}
@keyframes torch{0%{opacity:.8}30%{opacity:1}55%{opacity:.7}80%{opacity:.95}100%{opacity:.75}}
.rs-vig{background:linear-gradient(#000a,#0000 22%,#0000 60%,#000c 84%,#000e),radial-gradient(ellipse at 50% 55%,#0000 50%,#000a)!important}
/* featured faceoff: pose frames swap on top of the hero art */
.rf.featfig .rf-body.pose .rp{max-width:100%;max-height:100%}
.rf.featfig .rf-body.pose .rp:not(.rp-idle){max-height:92%}
@media (prefers-reduced-motion:reduce){.rs-ring,.rs-speed,.rcard,.fwarn,.hpb.low i,.act.ult,.bu.recoil,.arena.punch,.arena.crowd-roar,.arena.cam-zoom,.arena.perfect-hit,.bu.bleeding .st.sb,.bu.venom .st,.arena.combo-x2:after,.arena.combo-x3:after,.arena.combo-x4:after,.arena.combo-x5:after,.ashd,.bu,.rs-figs:after,.fslide,.rs-bg{animation:none!important}.rs-speed,.rs-ring{display:none}}
/* bug fix: the lux theme's generic ".on" (green button fill) was painting a green box behind every posed animal figure */
body.luxl .rf .rp.on,body.lux .rf .rp.on{background:none!important;box-shadow:none!important;color:inherit!important}
/* ---- v2: vivid look + easier to understand ---- */
.rs-bg{filter:saturate(1.25) contrast(1.08) brightness(1.05)}
.rf img,.rf-body.pose .rp.on{filter:drop-shadow(0 6px 6px #0009) saturate(1.15) contrast(1.05)}
.rs-light{mix-blend-mode:screen;opacity:1}
.bst span{position:relative;display:inline-flex;flex-direction:column;align-items:center;line-height:1.05}
.bst span:after{font:700 7.5px/1 Inter,sans-serif;letter-spacing:.06em;opacity:.7;margin-top:1px}
.bst span:nth-child(1):after{content:"ATTACK"}.bst span:nth-child(2):after{content:"HEALTH"}.bst span:nth-child(3):after{content:"SPEED"}
.arena .hpb:before{content:"HP";position:absolute;left:3px;top:50%;transform:translateY(-50%);z-index:2;font:800 8px/1 Inter,sans-serif;color:#fff;text-shadow:0 1px 2px #000}
.bhr{display:inline-flex;gap:10px;align-items:center}.hbtn{text-decoration:none;font-size:15px}
.howto{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000b;backdrop-filter:blur(3px);animation:ashin .25s}
.hbox{width:min(340px,88vw);padding:20px 18px 14px;border-radius:20px;text-align:center;color:#fff;background:linear-gradient(160deg,#173a2a,#0a1712);border:1px solid #d4af3799;box-shadow:0 20px 50px #000c}
.hbox small{opacity:.7;font-size:12px}.hic{font-size:54px;margin:6px 0;animation:hic 1.4s ease-in-out infinite}@keyframes hic{50%{transform:scale(1.12)}}
.hbox h3{margin:4px 0 6px;font:800 21px Poppins,Inter,sans-serif;color:#ffd76a}.hbox p{margin:0 0 12px;font-size:15px;line-height:1.4}
.hdots{display:flex;gap:6px;justify-content:center;margin-bottom:12px}.hdots i{width:8px;height:8px;border-radius:50%;background:#fff4}.hdots i.on{background:#ffd76a}
.hbox .btn{display:block;width:100%;margin:6px 0 0;min-height:44px}
.bwin .nextb{font-size:19px;min-width:220px;min-height:52px;animation:ultbtn 1.2s ease-in-out infinite}
.bwin.won{background:radial-gradient(circle at 50% 35%,#ffd76a55,#0b3a22cc 45%,#000e)!important}
.bwin.won:before{content:"";position:absolute;inset:-30%;z-index:-1;background:repeating-conic-gradient(from 0deg,#ffe9a022 0 8deg,#0000 8deg 20deg);animation:wrays 14s linear infinite;pointer-events:none}
@keyframes wrays{to{transform:rotate(360deg)}}
.bwin{overflow:hidden;isolation:isolate}
.bwin.lost{background:radial-gradient(circle,#3a0b0baa,#000e)!important}.bwin.lost h1{background:linear-gradient(#ffd0c0,#ff6a4a);-webkit-background-clip:text;background-clip:text}
.wfig{width:112px;height:112px;border-radius:50%;background:center/cover;border:3px solid #ffd76a;box-shadow:0 0 30px #ffd76aaa;margin-bottom:8px;animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
.bwin.lost .wfig{border-color:#ff6a4a;box-shadow:0 0 24px #ff3b30aa}
@media (prefers-reduced-motion:reduce){.bwin.won:before,.hic,.bwin .nextb{animation:none}}
/* Daily challenges */
.daily{margin:0 0 14px;padding:12px;border-radius:14px;background:linear-gradient(#1a2a22,#0d1712);border:1px solid #ffd76a44}
.daily h3{margin:0 0 8px;font:800 16px Poppins,Inter,sans-serif;color:#ffd76a}
.dch{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #ffffff11;font-size:13.5px}
.dch.done{opacity:.65}
.dch .rew{margin-left:auto;font-size:11px;color:#a8e6cf}
.dch .ok{color:#4ad17a;font-weight:700}
/* Power level badge */
.st.pw{background:#ff6a00!important;color:#fff;font-size:10px;padding:1px 4px;border-radius:6px}
.bu.power-3,.bu.power-4,.bu.power-5{box-shadow:0 0 12px #ffd76a66}
.bu.power-5{animation:powerGlow 1.6s ease-in-out infinite}
@keyframes powerGlow{50%{box-shadow:0 0 20px #ff6a00aa}}