.vortex-combat-canvas { position:fixed; inset:0; width:100vw; height:100vh; z-index:1200; pointer-events:none; }
.vortex-shock-field { position:absolute; z-index:1; pointer-events:none; overflow:hidden; border-radius:30px; contain:layout paint; }
.vortex-shock-field[data-compact="true"] { z-index:-1; }
.vortex-field-nebula { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 95%,#9945ff55,transparent 70%),repeating-conic-gradient(from 0deg at 50% 110%,transparent 0deg 13deg,#7733cc22 15deg 18deg,transparent 20deg 40deg); animation:vortex-nebula 4s ease-in-out infinite alternate; }
.vortex-field-ring { position:absolute; left:5%; bottom:2%; width:90%; height:32%; border:2px solid #bd8bff; border-radius:50%; box-shadow:0 0 18px #9647ff,inset 0 0 20px #7338dd; animation:vortex-field-breath 3s ease-in-out infinite; }
.vortex-shock-field>svg { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#c992ff; stroke-width:2; filter:drop-shadow(0 0 5px #a357ff); opacity:.65; stroke-dasharray:70 16 10 8; animation:vortex-field-current 1.8s linear infinite; }
.vortex-field-mote { position:absolute; left:var(--x); top:var(--y); width:5px; height:12px; background:#e9c9ff; box-shadow:0 0 12px #a962ff; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); animation:vortex-mote-rise 4s var(--d) ease-in-out infinite; }
.vortex-stone-guardians { position:fixed; inset:0; z-index:1150; pointer-events:none; }
.vortex-stone { position:absolute; animation:vortex-stone-float 3s var(--d) ease-in-out infinite; filter:drop-shadow(0 0 9px #9c4cff88); }
.vortex-stone>svg { display:block; width:100%; overflow:visible; }
.vortex-rock { fill:#282137; stroke:#ad96cb; stroke-width:1.7; }
.vortex-facet { fill:none; stroke:#5b536d; stroke-width:1.5; }
.vortex-rune { fill:none; stroke:#edc8ff; stroke-width:2.4; filter:drop-shadow(0 0 4px #af49ff); }
.vortex-arcs { fill:none; stroke:#d8ffff; stroke-width:2; stroke-dasharray:18 7 6 12; filter:drop-shadow(0 0 3px #b55bff); animation:vortex-stone-current .85s linear infinite; }
.vortex-stone-hp { display:block; height:6px; margin:0 2px; border:1px solid #c5a0e6; border-radius:5px; overflow:hidden; background:#120e20; box-shadow:0 0 7px #a962ff; }
.vortex-stone-hp i { display:block; height:100%; background:linear-gradient(90deg,#7438ce,#bd88ff,#d7ffff); transition:width .25s ease; }
.vortex-stone small { display:block; margin-top:3px; text-align:center; color:#f4e4ff; font:600 9px/1.25 system-ui,sans-serif; text-shadow:0 1px 3px #000,0 0 5px #000; white-space:nowrap; }
.vortex-stone.is-fractured .vortex-rock { fill:#3a183d; stroke:#ee83cb; }
.vortex-stone.is-fractured .vortex-stone-hp i { background:linear-gradient(90deg,#b22b7d,#ffa9ec); }
@keyframes vortex-nebula { to { opacity:.55; transform:scale(1.05); } }
@keyframes vortex-field-breath { 50% { opacity:.5; transform:scale(.95); } }
@keyframes vortex-field-current { to { stroke-dashoffset:-104; } }
@keyframes vortex-mote-rise { 0%,100% { opacity:0; transform:translateY(22px) rotate(0); } 50% { opacity:.85; transform:translateY(-28px) rotate(100deg); } }
@keyframes vortex-stone-float { 50% { transform:translateY(-9px) rotate(3deg); } }
@keyframes vortex-stone-current { 0%,100% { opacity:.65; } 50% { opacity:1; } to { stroke-dashoffset:-43; } }
@media (prefers-reduced-motion:reduce) {
    .vortex-shock-field *, .vortex-stone, .vortex-stone * { animation:none!important; transition:none!important; }
    .vortex-shock-field>svg { opacity:.35; }
}