.spell-scene{position:absolute;inset:0;z-index:3;pointer-events:none;display:grid;place-items:center;color:var(--spell-color);background:radial-gradient(ellipse,color-mix(in srgb,var(--spell-color) 18%,transparent),transparent 70%);animation:spell-scene-in calc(var(--event-ms,2000ms)*.8) both}.spell-scene>svg{width:82%;height:90%;max-width:230px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px var(--spell-color))}.spell-source{opacity:.65}.spell-source>svg{width:55%;height:65%}.spell-scene .fangs-upper,.spell-flight .fangs-upper{fill:#fce8d5;stroke:#e07d9b;animation:fangs-close-upper .8s ease-in-out both}.spell-scene .fangs-lower,.spell-flight .fangs-lower{fill:#fce8d5;stroke:#e07d9b;animation:fangs-close-lower .8s ease-in-out both}.spell-blood{fill:currentColor;stroke:none;animation:blood-return 1.3s .4s both}.water-stream{stroke-width:4;stroke-dasharray:140;stroke-dashoffset:140;animation:stream-flow 1.5s ease-out both}.stream-two{stroke-width:2;animation-delay:.18s}.water-drop{fill:#d7fff0;stroke:none;animation:water-rise 1.2s .3s both}.drop-two{animation-delay:.5s}.spell-shield{fill:color-mix(in srgb,var(--spell-color) 15%,transparent);stroke-width:3;stroke-dasharray:280;stroke-dashoffset:280;animation:ward-forge 1s .1s both}.stone-facets{stroke-width:1.2;animation:ward-forge 1s .3s both}.shadow-copy{fill:#a893e644;stroke:#e0d1ff;transform-origin:50% 70%}.shadow-left{animation:double-left 1.4s both}.shadow-right{animation:double-right 1.4s both}.spell-arc{stroke-width:5;stroke-dasharray:200;stroke-dashoffset:200;animation:cleave-draw .9s ease-out both}.arc-two{stroke-width:2;animation-delay:.2s}.cracked-ward{stroke-width:3;opacity:.7;animation:ward-break 1.1s both}.fracture-crack{stroke:#f8d9ff;stroke-width:4;stroke-dasharray:140;animation:cleave-draw .7s .3s both}.wound-cut{stroke-width:5;stroke-dasharray:130;stroke-dashoffset:130;animation:cleave-draw .6s both}.cut-one{animation-delay:.12s}.lunge-point,.weapon-slash{fill:color-mix(in srgb,var(--spell-color) 60%,transparent);stroke-width:2;animation:lunge-cut .65s .2s both}.doom-star{fill:#b7295155;stroke-width:2.5;transform-origin:center;animation:doom-flare 1.3s both}.spell-orbit{stroke-width:1.6;stroke-dasharray:7 9;transform-origin:50% 50%;animation:rune-orbit 2s linear both}.orbit-two{animation-direction:reverse}.hunt-mark{stroke-width:3;animation:doom-flare 1s both}.rage-flame{fill:#d97c2444;stroke-width:2.5;animation:flame-rise 1s both}.rage-core{fill:#ffeac7;stroke:none;animation:flame-rise 1.2s .2s both}.formation-link{stroke-width:4;stroke-dasharray:4 6;animation:stream-flow 1s both}.ward-rune{stroke-width:3;stroke-dasharray:250;stroke-dashoffset:250;animation:cleave-draw 1s both}.impact-burst{stroke-width:3;transform-origin:center;animation:impact-spread .6s .2s both}.spell-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--spell-color);box-shadow:0 0 10px var(--spell-color);animation:spell-sparks 1.3s both}.spark-one{left:30%;top:45%;--spark-x:-27px;--spark-y:-35px}.spark-two{left:65%;top:40%;--spark-x:24px;--spark-y:-47px;animation-delay:.18s}.spark-three{left:55%;top:70%;--spark-x:20px;--spark-y:-55px;animation-delay:.32s}.spell-flight{color:var(--spell-color);fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px var(--spell-color))}.arena-flight .spell-trail{stroke:currentColor;stroke-width:3;stroke-dasharray:12 8;opacity:.7;animation:flight-stream 1s linear both}.arena-flight .trail-echo{stroke-width:8;opacity:.14;animation-delay:.1s}.spell-flight-water .spell-trail{stroke-width:5;stroke-dasharray:20 7}.spell-flight-bite .spell-trail{stroke-width:2;stroke-dasharray:4 10}.spell-arrival{stroke-width:2;transform-box:fill-box;transform-origin:center;animation:arrival-ring .7s .75s both}.spell-traveller{stroke-width:3}.arena-spotlight-art>.spell-scene{z-index:2}.impact-overlay,.arena-spell-float{z-index:5}.arena-spotlight-art>.arena-spotlight-rune{z-index:4;background:transparent}.arena-flight{z-index:6!important}.spell-flight .spell-traveller .water-stream{stroke-width:6}.spell-flight .spell-traveller .fangs-upper,.spell-flight .spell-traveller .fangs-lower{stroke-width:3}
@keyframes spell-scene-in{0%{opacity:0}12%,75%{opacity:1}100%{opacity:.7}}@keyframes fangs-close-upper{0%{transform:translateY(-28px);opacity:0}40%{transform:translateY(-8px);opacity:1}65%,100%{transform:translateY(0)}}@keyframes fangs-close-lower{0%{transform:translateY(28px);opacity:0}40%{transform:translateY(8px);opacity:1}65%,100%{transform:translateY(0)}}@keyframes blood-return{0%{opacity:0;transform:translateY(10px)}35%{opacity:1}100%{opacity:0;transform:translateY(-25px)}}@keyframes stream-flow{0%{stroke-dashoffset:140;opacity:0}25%{opacity:1}100%{stroke-dashoffset:0;opacity:.8}}@keyframes water-rise{0%{opacity:0;transform:translateY(20px)}30%{opacity:1}100%{opacity:0;transform:translateY(-24px)}}@keyframes ward-forge{0%{stroke-dashoffset:280;opacity:0}25%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}@keyframes double-left{0%{opacity:0;transform:translateX(10px)}50%,100%{opacity:.8;transform:translateX(-8px)}}@keyframes double-right{0%{opacity:0;transform:translateX(-10px)}50%,100%{opacity:.5;transform:translateX(8px)}}@keyframes cleave-draw{0%{stroke-dashoffset:200;opacity:0}15%{opacity:1}100%{stroke-dashoffset:0;opacity:.8}}@keyframes ward-break{0%{opacity:0;transform:scale(.8)}30%{opacity:1;transform:scale(1)}100%{opacity:.25;transform:scale(1.13)}}@keyframes lunge-cut{0%{opacity:0;transform:translate(-20px,20px)}45%,100%{opacity:1;transform:translate(0)}}@keyframes doom-flare{0%{opacity:0;transform:scale(.4) rotate(-20deg)}40%{opacity:1;transform:scale(1.1)}100%{opacity:.7;transform:scale(1)}}@keyframes rune-orbit{0%{opacity:0;transform:rotate(-40deg)}20%{opacity:1}100%{transform:rotate(40deg);opacity:.7}}@keyframes flame-rise{0%{opacity:0;transform:translateY(20px) scaleY(.6)}60%,100%{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes impact-spread{0%{opacity:0;transform:scale(.5)}30%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.35)}}@keyframes spell-sparks{0%{opacity:0;transform:translate(0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--spark-x),var(--spark-y))}}@keyframes flight-stream{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}@keyframes arrival-ring{0%{transform:scale(.1);opacity:0}30%{opacity:1}100%{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.spell-scene,.spell-scene *,.spell-flight,.spell-flight *{animation:none!important}.spell-spark,.spell-arrival,.spell-traveller{display:none}.water-stream,.spell-shield,.wound-cut,.spell-arc,.ward-rune{stroke-dashoffset:0}.spell-scene{opacity:.55}.arena-flight .spell-trail{stroke-dasharray:none;opacity:.35}}

.spell-preview-dialog{width:min(720px,calc(100vw - 32px));max-height:90vh;box-sizing:border-box;overflow:auto;border:1px solid #a5b18d;border-radius:12px;background:#13241d;color:#ecdfc4;padding:24px;box-shadow:0 30px 100px #000c}.spell-preview-dialog::backdrop{background:#06110bce;backdrop-filter:blur(4px)}.spell-preview-dialog h2{font-size:28px;margin:0}.spell-preview-dialog p{font-size:17px;line-height:1.65}.spell-preview-dialog>small{display:block;color:#bacbbc;margin-bottom:20px}.spell-preview-stage{display:flex;align-items:center;justify-content:space-around;position:relative;min-height:210px;margin:20px 0 30px;background:radial-gradient(ellipse,#294335,#0c1813 75%);border-radius:8px}.spell-preview-face{position:relative;width:28%;height:170px;border:1px solid #aaae84;border-radius:7px}.spell-preview-face>img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:6px}.spell-preview-face>b{position:absolute;top:100%;left:0;right:0;text-align:center;padding-top:6px;font-size:13px}.spell-preview-flight{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}.spell-preview-dialog button{cursor:pointer}.codex-preview-button{font-size:15px;color:#eddaaa;border-bottom:1px dashed #bdb28b88;padding:6px 0}.codex-preview-button:hover{color:#fff0c9}.spell-preview-dialog .spell-scene{overflow:hidden;border-radius:6px}@media(max-width:760px){.spell-preview-dialog{padding:16px}.spell-preview-dialog h2{font-size:23px}.spell-preview-dialog p{font-size:16px}.spell-preview-stage{min-height:180px}.spell-preview-face{width:30%;height:125px}}
/* Skills have different silhouettes, motion and material; colour is secondary. */
.iron-plate{fill:#819aab33;stroke-width:3;transform-origin:50% 90%;animation:plate-lock .9s both}.plate-ribs{stroke-width:3;stroke-dasharray:180;animation:plate-ribs .9s .18s both}.plate-rivets{fill:currentColor;stroke:none;animation:plate-lock .7s .25s both}
.thread-hand{stroke-width:3;fill:#124d3b99}.living-thread{stroke-width:2.5;stroke-dasharray:220;stroke-dashoffset:220;animation:thread-weave 1.6s both}.thread-beads{fill:#e5ffe4;stroke:none;animation:thread-heart 1.5s both}
.ward-knot{stroke-width:4;fill:#55784d55;transform-origin:50% 50%;animation:knot-unfold 1.2s both}.ward-cord{stroke-width:2}.cleanse-dust{stroke-width:3;animation:cleanse-drift 1.4s .1s both}
.breach-left,.breach-right{fill:#bb815744;stroke-width:2;transform-origin:center}.breach-left{animation:breach-left 1.3s both}.breach-right{animation:breach-right 1.3s both}.breach-arrow{fill:#ffd49b99;stroke-width:2;animation:breach-through 1s .15s both}
.wrath-fist{fill:#a6402977;stroke-width:3;transform-origin:50% 90%;animation:fist-rise 1.2s both}.wrath-beats{stroke-width:4;animation:wrath-beat 1.2s both}
.discord-half{fill:#9375cf22;stroke-width:3}.discord-left{animation:discord-left 1.3s both}.discord-right{animation:discord-right 1.3s both}.discord-link{stroke-width:4;animation:link-snap 1.3s both}
.wild-bolts{stroke:#fff0c7;stroke-width:3;animation:wild-flash 1.1s both}.rend-jaw{fill:#fce8d544;stroke-width:3;animation:rend-close .9s both}.rend-tears{stroke-width:5;stroke-dasharray:60;stroke-dashoffset:60;animation:tear-draw 1s .25s both}
.thorn-shell{stroke-width:3;fill:#a8b28133;transform-origin:50% 50%;animation:thorns-grow 1.3s both}.thorn-core{stroke-width:2}.whirl-ring{stroke-width:4;stroke-dasharray:420;stroke-dashoffset:420;transform-origin:center;animation:whirl-turn 1.5s both}
.doom-eclipse{fill:#52172699;stroke-width:2;animation:eclipse-darken 1.3s both}.doom-blade{fill:#f5c7cc99;stroke-width:3;animation:doom-descend 1.1s both}
.guard-ring{stroke-width:3;stroke-dasharray:270;stroke-dashoffset:270;transform-origin:center;animation:guard-close 1.4s both}.inner-ring{stroke-width:1.5;animation-delay:.18s}.circle-guard{fill:#6a8cbe77;stroke-width:2;animation:guard-appear 1s .3s both}.circle-stop{stroke-width:4;animation:guard-appear 1s .5s both}
.formation-stakes{fill:#74583e99;stroke-width:2.5;animation:stakes-rise .8s both}.formation-bar{fill:#bea37966;stroke-width:2.5;animation:bar-lock 1.2s both}
.arena-flight .spell-flight-thread .spell-trail{stroke-width:2;stroke-dasharray:3 6}.arena-flight .spell-flight-pressure .spell-trail{stroke-width:9;stroke-dasharray:30 6;opacity:.45}.arena-flight .spell-flight-lunge .spell-trail{stroke-width:2;stroke-dasharray:50 7}.arena-flight .spell-flight-water .spell-trail,.arena-flight .spell-flight-streams .spell-trail{stroke-linecap:round;stroke-dasharray:25 6 5 6}.spell-flight-double .spell-trail{opacity:.25;stroke-dasharray:2 14}.spell-flight-formation .spell-trail{stroke-dasharray:2 8;stroke-width:5}
.spell-stone .spell-spark,.spell-stance .spell-spark,.spell-formation .spell-spark{border-radius:0;width:7px;height:5px;--spark-y:28px}.spell-thread .spell-spark,.spell-water .spell-spark,.spell-streams .spell-spark{width:4px;height:8px}.spell-double .spell-spark,.spell-doom .spell-spark{display:none}
/* Static icons use exactly the cast silhouette, never an animated placeholder. */
.skill-illustration.spell-icon{color:var(--spell-color);stroke-width:4;padding:7px}.skill-illustration.spell-icon *{animation:none!important;stroke-dashoffset:0!important;stroke-dasharray:none;opacity:1;stroke-width:3.5;filter:none}.skill-illustration.spell-icon .formation-bar,.skill-illustration.spell-icon .thread-beads,.skill-illustration.spell-icon .plate-rivets{fill:currentColor}.skill-illustration.spell-icon .spell-blood{fill:currentColor}.effect-tooltip .skill-illustration.spell-icon,.arena-skill-status .skill-illustration.spell-icon{padding:2px}
@keyframes plate-lock{0%{opacity:0;transform:translateY(20px) scaleX(.75)}40%{opacity:1;transform:translateY(-3px)}100%{transform:none;opacity:1}}@keyframes plate-ribs{from{stroke-dashoffset:180;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes thread-weave{0%{stroke-dashoffset:220;opacity:0}20%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}@keyframes thread-heart{0%,20%{opacity:0}40%,80%{opacity:1}60%,100%{opacity:.5}}
@keyframes knot-unfold{0%{transform:scale(.35) rotate(-45deg);opacity:0}70%{transform:scale(1.07);opacity:1}100%{transform:none;opacity:1}}@keyframes cleanse-drift{0%{opacity:0;transform:translateY(-10px)}30%{opacity:1}100%{opacity:.15;transform:translateY(9px)}}
@keyframes breach-left{0%{opacity:0}20%{opacity:1;transform:none}100%{opacity:.4;transform:translate(-9px,5px) rotate(-8deg)}}@keyframes breach-right{0%{opacity:0}20%{opacity:1;transform:none}100%{opacity:.4;transform:translate(9px,5px) rotate(8deg)}}@keyframes breach-through{0%{opacity:0;transform:translateX(-35px)}50%,100%{opacity:1;transform:none}}
@keyframes fist-rise{0%{opacity:0;transform:translateY(28px) scale(.8)}55%{opacity:1;transform:translateY(-4px)}100%{opacity:1;transform:none}}@keyframes wrath-beat{0%,20%{opacity:0}40%,80%{opacity:1}60%,100%{opacity:.45}}
@keyframes discord-left{0%{opacity:0;transform:translateX(10px)}30%{opacity:1}100%{opacity:1;transform:translateX(-3px) rotate(-3deg)}}@keyframes discord-right{0%{opacity:0;transform:translateX(-10px)}30%{opacity:1}100%{opacity:1;transform:translateX(3px) rotate(3deg)}}@keyframes link-snap{0%,20%{opacity:0}35%,60%{opacity:1}100%{opacity:.3}}
@keyframes wild-flash{0%,15%{opacity:0}35%{opacity:1;transform:translateX(-2px)}50%{opacity:.4;transform:translateX(2px)}75%,100%{opacity:1;transform:none}}@keyframes rend-close{0%{opacity:0;transform:translateY(-20px)}55%{opacity:1;transform:translateY(3px)}100%{opacity:1;transform:none}}@keyframes tear-draw{from{stroke-dashoffset:60;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes thorns-grow{0%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(.85)}70%{transform:scale(1.08)}100%{opacity:1;transform:none}}@keyframes whirl-turn{0%{stroke-dashoffset:420;transform:rotate(-50deg);opacity:0}15%{opacity:1}100%{stroke-dashoffset:0;transform:rotate(35deg);opacity:1}}
@keyframes eclipse-darken{0%{opacity:0}80%,100%{opacity:1}}@keyframes doom-descend{0%{opacity:0;transform:translateY(-20px)}60%,100%{opacity:1;transform:none}}@keyframes guard-close{0%{stroke-dashoffset:270;opacity:0}15%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}@keyframes guard-appear{from{opacity:0}to{opacity:1}}@keyframes stakes-rise{0%{opacity:0;transform:translateY(35px)}65%,100%{opacity:1;transform:none}}@keyframes bar-lock{0%,25%{opacity:0;transform:translateX(-30px)}65%,100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.spell-scene *,.spell-flight *{animation:none!important;stroke-dashoffset:0!important}.spell-spark{display:none}}