.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#battle-fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:8;isolation:isolate}
.fx{position:absolute;pointer-events:none;--ink:#f1d391;color:var(--ink);contain:layout style}
.fx.school-iron{--ink:#c4def8}.fx.school-ember{--ink:#ff9958}.fx.school-tide{--ink:#7ce8ed}.fx.school-shade{--ink:#d6a0ff}.fx.school-lotus{--ink:#a5f0c0}.fx.school-thunder{--ink:#b4bcff}.fx.school-star{--ink:#f6dfab}.fx.school-enemy{--ink:#ff9b8b}
.fx-tablet{z-index:2;filter:drop-shadow(0 0 17px var(--ink));will-change:transform,translate,opacity}
.fx-tablet>.cast-tablet{display:block!important;width:100%!important;margin:0!important;transform:none!important;opacity:1!important;pointer-events:none!important;filter:brightness(1.1);box-shadow:0 0 25px color-mix(in srgb,var(--ink) 55%,transparent)}
.fx-tablet .cast-tablet .card-school-icon{display:none}.fx-tablet:after{content:'';position:absolute;inset:5%;background:linear-gradient(110deg,transparent 25%,#fff2cb88 50%,transparent 75%);mix-blend-mode:screen;animation:tablet-gleam .52s ease-out both;pointer-events:none}
@keyframes tablet-gleam{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 100%)}}
.fx-signature{width:clamp(155px,22vw,280px);height:clamp(155px,22vw,280px);translate:-50% -50%;z-index:3;filter:drop-shadow(0 0 8px var(--ink));animation:signature-arrival .82s cubic-bezier(.18,.8,.2,1) both}
.fx-signature>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:50% 50%}.fx-signature path,.fx-signature circle,.fx-signature rect{vector-effect:non-scaling-stroke}
.fx-signature .legendary-corona{color:#fff0b9;fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:3 6;animation:celestial-orbit 1.3s linear both}
.fx-signature.grade-rare{filter:drop-shadow(0 0 11px var(--ink))}.fx-signature.grade-legendary{filter:drop-shadow(0 0 14px var(--ink));width:clamp(180px,25vw,310px);height:clamp(180px,25vw,310px)}
@keyframes signature-arrival{0%{opacity:0;scale:.25}24%{opacity:.9;scale:1.04}65%{opacity:.8;scale:1.1}100%{opacity:0;scale:1.32}}
@keyframes celestial-orbit{from{rotate:0deg}to{rotate:120deg}}
@keyframes stroke-reveal{0%{stroke-dashoffset:650;opacity:0}18%{opacity:1}72%,100%{stroke-dashoffset:0;opacity:1}}
.type-strike{--ink:#ffe6bb;animation-duration:.62s}.type-strike .slash{stroke-width:10;stroke-dasharray:650;animation:stroke-reveal .46s ease-out both;filter:drop-shadow(0 0 3px #ff9b72)}.type-strike .slash-two{animation-delay:.075s;stroke-width:6}.type-strike .slash-three{animation-delay:.14s;stroke-width:3}
.type-ward{animation-duration:.88s}.shield-shell{stroke:#c4ffe0;stroke-width:4;fill:#8ce9bd18;animation:shield-assemble .62s cubic-bezier(.14,.8,.25,1) both}.shield-seams{stroke:#e9fff4;stroke-width:2;stroke-dasharray:650;animation:stroke-reveal .6s .08s both}.shield-core{fill:#c9ffe544;animation:shield-heart .75s ease-out both}
@keyframes shield-assemble{0%{scale:.3 1.3;translate:0 32px;opacity:0}45%{scale:1.04 .95;translate:0 0;opacity:1}100%{scale:1;opacity:.8}}
@keyframes shield-heart{0%,20%{opacity:0;scale:.1}55%{opacity:1;scale:1.15}100%{opacity:.2;scale:1.3}}
.type-mantra .orbit{transform-origin:128px 128px}.orbit-one{animation:scripture-orbit .9s ease-out both}.orbit-two{animation:scripture-counter .9s ease-out both;stroke-dasharray:5 4}.mantra-core{fill:#fff0b822;stroke-width:3;animation:mantra-breathe .7s ease-out both}
@keyframes scripture-orbit{from{rotate:-95deg;scale:.4}to{rotate:75deg;scale:1.05}}@keyframes scripture-counter{from{rotate:125deg;scale:1.5}to{rotate:-50deg;scale:1}}@keyframes mantra-breathe{0%{scale:.1}45%{scale:1.25}100%{scale:1}}
.type-remedy{--ink:#b7ffd0;animation-duration:.92s}.lotus-petal{stroke:#cfffe0;fill:#74dba225;transform-origin:128px 143px;animation:lotus-open .66s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--petal)*20ms)}.lotus-heart{fill:#e8ffd055;animation:lotus-heart .8s ease-out both}.lotus-water{stroke-width:3;animation:lotus-wave .85s ease-out both}
@keyframes lotus-open{0%{scale:.1 .2;opacity:0}45%{opacity:.9}100%{scale:1;opacity:.7}}@keyframes lotus-heart{from{scale:.1;opacity:0}50%{opacity:1}to{scale:1.2;opacity:.2}}@keyframes lotus-wave{from{translate:0 -25px;opacity:0}to{translate:0 20px;opacity:.7}}
.type-hex{--ink:#d2a1ff;animation-duration:.95s}.hex-eye{stroke-width:4;fill:#6a2b811f;animation:hex-open .7s ease-out both}.hex-pupil{fill:#e6b7ff55;stroke:#f5deff;animation:hex-watch .8s ease-out both}.hex-tendril{stroke-dasharray:650;animation:stroke-reveal .8s .09s both}
@keyframes hex-open{0%{scale:1.1 .03;opacity:0}40%{scale:1 1;opacity:1}100%{scale:1.05 .8;opacity:.3}}@keyframes hex-watch{0%{scale:.1}40%{scale:1.3}100%{scale:.8}}
.type-formation{width:clamp(210px,31vw,380px);height:clamp(210px,31vw,380px);animation-duration:1s}.array-ground{transform-origin:128px 128px;animation:array-unfold .9s ease-out both;stroke:#d4f9d2;fill:#a9f6d00b}.array-pillar{stroke-width:3;stroke-dasharray:130;animation:pillar-rise .62s .18s ease-out both}.pillar-1,.pillar-4{animation-delay:.24s}.pillar-2,.pillar-5{animation-delay:.3s}
@keyframes array-unfold{0%{translate:0 58px;scale:.1 .1;rotate:-50deg}60%,100%{translate:0 40px;scale:1 .5;rotate:0deg}}@keyframes pillar-rise{from{stroke-dashoffset:130;opacity:0;translate:0 35px}to{stroke-dashoffset:0;opacity:.9;translate:0 0}}
.type-stance .stance-coil{transform-origin:128px 128px;animation:stance-circle .9s cubic-bezier(.18,.65,.2,1) both}.stance-spiral{stroke-width:5;stroke-dasharray:650;animation:stroke-reveal .7s both}
@keyframes stance-circle{0%{rotate:-150deg;scale:.2}60%{scale:1.05}100%{rotate:100deg;scale:1.15}}
.type-counter .counter-in,.type-counter .counter-out{stroke-width:5;stroke-dasharray:650;animation:stroke-reveal .52s ease-out both}.type-counter .counter-out{animation-delay:.2s;stroke:#fff0ba}.counter-stop{fill:#9dd6f82b;stroke-width:4;animation:counter-stop .55s ease-out both}
@keyframes counter-stop{0%{translate:45px 0;scale:.6;opacity:0}40%{translate:-10px 0;scale:1.1;opacity:1}100%{translate:0 0;scale:1;opacity:.6}}
.type-pact{--ink:#ff8f9b;animation-duration:.98s}.pact-seal{stroke-dasharray:8 5;animation:celestial-orbit .95s both}.pact-flame{fill:#e34e6a33;stroke-width:3;animation:pact-pulse .8s ease-out both}.pact-tether{stroke-width:4;stroke-dasharray:650;animation:stroke-reveal .72s both}
@keyframes pact-pulse{0%{scale:.1;opacity:0}30%{scale:1;opacity:1}55%{scale:.85}80%{scale:1.1}100%{scale:1.2;opacity:.4}}
.type-ritual{animation-duration:1.02s}.chrono-ring{transform-origin:128px 128px;animation:chrono-turn 1s cubic-bezier(.25,.05,.2,1) both}.ritual-glass{stroke-width:4;animation:glass-appear .85s both}.ritual-sand{fill:#ffdf9f66;animation:sand-fall .82s .1s both}
@keyframes chrono-turn{0%{rotate:-180deg;scale:.5}70%{rotate:0deg;scale:1}100%{rotate:15deg;scale:1.08}}@keyframes glass-appear{0%{scale:1 .05;opacity:0}50%{scale:1 1;opacity:1}100%{opacity:.65}}@keyframes sand-fall{0%{translate:0 -22px;opacity:0}40%{opacity:1}100%{translate:0 18px;opacity:.3}}
.type-transmute{animation-duration:1s}.transmute-wheel{stroke-dasharray:2 10;animation:celestial-orbit 1s both}.crucible{stroke:#d9ffe1;stroke-width:3;fill:#84e7bd15;animation:crucible-rise .8s both}.matter-shard{fill:#e5ffcb88;transform-origin:128px 128px;animation:matter-reform .85s both;animation-delay:calc(var(--shard)*8ms)}
@keyframes crucible-rise{from{translate:0 38px;opacity:0}50%,to{translate:0 0;opacity:.8}}@keyframes matter-reform{0%{translate:0 -45px;scale:1.5;opacity:0}35%{translate:0 0;scale:.2;opacity:1}75%{translate:0 25px;scale:1;opacity:.8}100%{translate:0 -8px;scale:.1;opacity:0}}
.type-finisher{--ink:#ffe1a3;width:clamp(230px,35vw,420px);height:clamp(230px,35vw,420px);animation-duration:1.13s}.finisher-heaven{transform-origin:128px 128px;animation:verdict-heaven 1s ease-out both}.heaven-sword{fill:#fff3ce44;stroke:#fff9e5;stroke-width:5;animation:heavenfall .7s cubic-bezier(.4,0,.9,.3) both}.finisher-fracture{stroke:#fff5d4;stroke-width:4;animation:fracture .75s .28s both}
@keyframes verdict-heaven{0%{scale:.15;rotate:-35deg;opacity:0}45%{opacity:.85}100%{scale:1.25;rotate:18deg;opacity:.2}}@keyframes heavenfall{0%{translate:0 -135px;scale:.6;opacity:0}38%{opacity:1}66%{translate:0 14px;scale:1.08}100%{translate:0 0;scale:1;opacity:.6}}@keyframes fracture{0%{scale:.1 1;opacity:0}40%{scale:1 1;opacity:1}100%{scale:1.3 1;opacity:0}}
.fx-impact{width:125px;height:125px;translate:-50% -50%;border:2px solid var(--ink);border-radius:50%;background:radial-gradient(circle,#fff5dd33,transparent 58%);box-shadow:inset 0 0 18px color-mix(in srgb,var(--ink) 60%,transparent),0 0 17px color-mix(in srgb,var(--ink) 50%,transparent);animation:impact-bloom .5s ease-out both}
.impact-hit:after{content:'';position:absolute;left:-15%;right:-15%;top:46%;height:7px;border-radius:50%;background:#fff5e7;rotate:-34deg;box-shadow:0 0 12px var(--ink)}.impact-guard{--ink:#a1e6f4;border-radius:25% 25% 45% 45%;border-width:4px}.impact-restore{--ink:#aff8c4;border:4px double var(--ink)}.impact-curse{--ink:#d3a3ed;border:3px dashed var(--ink)}
@keyframes impact-bloom{from{scale:.2;opacity:0}35%{opacity:.8}to{scale:var(--impact-scale,1.25);opacity:0}}
.fx-particles{width:0;height:0}.fx-particles i{position:absolute;width:5px;height:8px;border-radius:50%;background:var(--ink);box-shadow:0 0 8px var(--ink);animation:impact-spark .55s ease-out both;animation-delay:var(--stagger)}.fx-particles.petals i{width:9px;height:13px;border-radius:80% 0 80% 0;background:#c7ffce}
@keyframes impact-spark{0%{transform:rotate(var(--angle)) translateX(5px);opacity:0}20%{opacity:.9}100%{transform:rotate(var(--angle)) translateX(var(--travel)) scale(.1);opacity:0}}
.fx-spirit-bolt{width:58px;height:8px;border-radius:100%;transform-origin:center;background:linear-gradient(90deg,transparent,var(--ink),#fff7dc);box-shadow:0 0 15px var(--ink)}
.fx-hit-streak{width:130px;height:3px;translate:-50% -50%;rotate:-35deg;background:#fff4da;box-shadow:0 0 10px var(--ink);animation:hit-streak .25s both}.streak-2{rotate:30deg}.streak-3{rotate:-65deg}@keyframes hit-streak{0%{scale:.1 1;opacity:0}30%{opacity:1}100%{scale:1.2 1;opacity:0}}
.fx-shield-break{width:0;height:0}.fx-shield-break i{position:absolute;width:30px;height:42px;border:2px solid #c8ecff;background:#8fbddc22;clip-path:polygon(0 0,100% 20%,75% 100%,25% 65%);animation:shield-shatter .5s both;--shard-x:-45px;--shard-y:-20px}.fx-shield-break i:nth-child(2){--shard-x:45px;--shard-y:-28px}.fx-shield-break i:nth-child(3){--shard-x:-35px;--shard-y:45px}.fx-shield-break i:nth-child(4){--shard-x:40px;--shard-y:47px}@keyframes shield-shatter{0%{translate:0 0;opacity:.9}to{translate:var(--shard-x) var(--shard-y);rotate:42deg;opacity:0}}
.fx-result{z-index:6;display:grid;justify-items:center;gap:1px;translate:-50% -50%;animation:result-rise .53s ease-out both;filter:drop-shadow(0 2px 3px #080b16);margin-top:calc(var(--result-row,0)*27px - 40px)}.fx-result>b{color:#ffe8ce;font:900 clamp(23px,3.1vw,45px)/1 var(--serif);text-shadow:-1px -1px 0 #402a24,1px 1px 0 #402a24,0 0 14px #fda46b55}.fx-result>small{padding:3px 6px;border:1px solid #b1a17a88;border-radius:5px;background:#111925e8;color:#f9eac9;font-size:10px;font-weight:650;white-space:nowrap}.result-guard>b,.result-ward>b,.result-seal>b{color:#b4edff}.result-heal>b,.result-cleanse>b{color:#bcf7c2}.result-tick>b,.result-sacrifice>b{color:#f4a9b7}.result-caption>b{font:700 clamp(10px,1.2vw,15px)/1.2 var(--serif);color:var(--ink);padding:5px 8px;border:1px solid color-mix(in srgb,var(--ink) 60%,transparent);border-radius:7px;background:#121724ed;white-space:nowrap}.result-strike>b{letter-spacing:-1px}
@keyframes result-rise{0%{opacity:0;scale:.55;translate:-50% -25%}23%{opacity:1;scale:1.16}65%{opacity:1;scale:1}100%{opacity:0;translate:-50% -110%}}
.fx-notice{z-index:5;max-width:calc(100vw - 30px);translate:-50% -50%;padding:6px 15px;color:var(--ink);background:linear-gradient(90deg,#121524dd,#252735ef,#121524dd);border-block:1px solid color-mix(in srgb,var(--ink) 70%,transparent);font:650 clamp(11px,1.5vw,17px)/1.3 var(--serif);text-align:center;text-shadow:0 1px 4px #000;white-space:nowrap;animation:notice-arrival .55s both}.notice-resonance,.notice-phase{font-size:clamp(14px,2vw,24px);letter-spacing:1px}.notice-pet-passive{font-size:11px}.notice-condition{color:#e7c3fa}
@keyframes notice-arrival{0%{opacity:0;scale:.85;translate:-50% -30%}25%,70%{opacity:1;scale:1;translate:-50% -50%}100%{opacity:0;translate:-50% -75%}}
.fx-reduced{animation:none!important;opacity:1}.fx-signature.fx-reduced{width:95px;height:95px;filter:none;opacity:.3}.fx-reduced *{animation:none!important}.fx-result.fx-reduced{scale:1;translate:-50% -50%}.fx-result.fx-reduced>b{font-size:25px}.fx-notice.fx-reduced{translate:-50% -50%}
.action-feedback{min-height:34px;display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 9px;margin:0 0 10px;padding:7px 9px;border-inline-start:2px solid #97728c;border-radius:4px;background:#221d29;color:#cdc0cf;font-size:.76rem}.action-feedback b{color:var(--gold-bright)}.outcome .action-feedback{justify-content:center;margin:12px auto;border:1px solid var(--line)}
.screen-enter{animation:screen-in .22s ease-out}.dialog[open]{animation:panel-in .22s ease-out}.outcome-arrive,.outcome-defeat{animation:panel-in .39s cubic-bezier(.2,.75,.3,1) both}.outcome-arrive .outcome-icon{animation:outcome-emblem .55s ease-out both}.outcome-defeat{border-color:#694652}
@keyframes screen-in{from{opacity:.56;transform:translateY(5px)}}@keyframes panel-in{from{opacity:0;transform:translateY(8px) scale(.985)}}@keyframes outcome-emblem{from{transform:scale(.8);box-shadow:0 0 27px #d6a77677}}
@media(max-width:670px){.fx-signature{width:155px;height:155px}.fx-signature.grade-legendary{width:175px;height:175px}.type-finisher{width:230px;height:230px}.type-formation{width:210px;height:210px}.fx-impact{width:85px;height:85px}.fx-result>small{font-size:8px}.fx-notice{white-space:normal;min-width:135px}.fx-particles i{--travel:40px!important}.fx-tablet{max-width:118px}}
@media(prefers-reduced-motion:reduce){.fx:not(.fx-reduced){animation:none!important}.screen-enter,.dialog[open],.outcome-arrive,.outcome-defeat,.outcome-arrive .outcome-icon{animation:none}}
.impact-aura{border-width:4px;border-style:double;background:radial-gradient(transparent 30%,#f3dd9a22,transparent 65%)}
.type-finisher .heaven-sword{animation-duration:.6s}
.fx-signature.type-strike{--ink:#ffe5a9}.fx-signature.type-ward{--ink:#9df4d3}.fx-signature.type-mantra{--ink:#e1b6ff}.fx-signature.type-remedy{--ink:#afffca}.fx-signature.type-hex{--ink:#db9bff}.fx-signature.type-formation{--ink:#e9d38d}.fx-signature.type-stance{--ink:#9be2eb}.fx-signature.type-counter{--ink:#b9d7ff}.fx-signature.type-pact{--ink:#ff8699}.fx-signature.type-ritual{--ink:#d8b9ff}.fx-signature.type-transmute{--ink:#9df3dc}.fx-signature.type-finisher{--ink:#ffdf91}
.fx-signature.type-finisher .heaven-sword{fill:#ffdb7c55;stroke:#fff5cf;stroke-width:4;filter:drop-shadow(0 0 7px #ffce66)}.heaven-core{fill:#ffe09577;stroke:#ffeac0;stroke-width:14;filter:blur(7px);animation:heavenfall .6s cubic-bezier(.4,0,.9,.3) both;opacity:.5}
.fx.fx-verdict-wave{width:340px;height:110px;translate:-50% -50%;--ink:#ffe1a0;border:3px double var(--ink);border-radius:50%;background:radial-gradient(ellipse,#ffe1a01a,transparent 65%);box-shadow:0 0 25px #ffe1a044,inset 0 0 16px #ffe1a022;animation:verdict-groundwave .65s ease-out both}.fx-verdict-wave:before,.fx-verdict-wave:after{content:'';position:absolute;inset:13%;border:1px solid #ffe4ad88;border-radius:50%}.fx-verdict-wave:after{inset:28%;border-style:dashed}@keyframes verdict-groundwave{0%{scale:.15;opacity:0}24%{opacity:.7}100%{scale:1.4;opacity:0}}@media(max-width:670px){.fx.fx-verdict-wave{width:230px;height:76px}}
.result-blocked>b{color:#b5edff;font-size:clamp(19px,2.3vw,30px);letter-spacing:.5px}