/* VOCABULARIA v1.9.126 · Weapon-grade attack effects. All nodes live inside #effectLayer. */
.wfx{position:absolute;pointer-events:none;will-change:transform,opacity;--wfx-color:#cfd9e6;transform:translate(-50%,-50%)}
.wfx b,.wfx u,.wfx i{position:absolute;display:block;pointer-events:none}

/* ---- Ranger: arrows → glowing bolts → volley → golden piercing beam ---- */
.wfx-ranger{width:124px;height:7px;border-radius:4px;
  background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--wfx-color) 45%,transparent) 30%,#fff 70%,var(--wfx-color) 100%);
  box-shadow:0 0 14px color-mix(in srgb,var(--wfx-color) 70%,transparent)}
.wfx-ranger::after{content:"";position:absolute;right:-6px;top:50%;width:14px;height:14px;transform:translateY(-50%) rotate(45deg);
  background:linear-gradient(135deg,#fff,var(--wfx-color));border-radius:2px;box-shadow:0 0 10px var(--wfx-color)}
.wfx-ranger b{left:-10px;top:50%;width:26px;height:3px;border-radius:2px;transform:translate(calc(var(--n)*-18px),-50%);
  background:var(--wfx-color);opacity:calc(.55 - var(--n)*.1);filter:blur(1px)}
.wfx-ranger.wfx-tier2{height:8px}.wfx-ranger.wfx-tier3{height:9px;width:128px}
.wfx-ranger.wfx-tier4{height:12px;width:150px;box-shadow:0 0 26px var(--wfx-color),0 0 50px color-mix(in srgb,var(--wfx-color) 50%,transparent)}
.wfx-ranger.wfx-tier4::after{width:20px;height:20px}

/* ---- Mage: ember orb → twin orbs → spiralling comet → meteor ---- */
.wfx-mage{width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 18%,var(--wfx-color) 40%,color-mix(in srgb,var(--wfx-color) 35%,transparent) 62%,transparent 74%);
  box-shadow:0 0 24px var(--wfx-color),0 0 48px color-mix(in srgb,var(--wfx-color) 45%,transparent)}
.wfx-mage b{left:50%;top:50%;width:18px;height:18px;border-radius:50%;background:var(--wfx-color);
  transform:translate(calc(-50% - var(--n)*16px),-50%) scale(calc(1 - var(--n)*.15));opacity:calc(.5 - var(--n)*.08);filter:blur(2px)}
.wfx-mage u{left:50%;top:50%;width:160%;height:160%;border-radius:50%;border:2px solid color-mix(in srgb,var(--wfx-color) 70%,#fff);
  border-left-color:transparent;border-right-color:transparent;transform:translate(-50%,-50%);animation:wfxSpin .5s linear infinite}
.wfx-mage.wfx-tier2{width:52px;height:52px}.wfx-mage.wfx-tier3{width:62px;height:62px}
.wfx-mage.wfx-tier4{width:78px;height:78px;box-shadow:0 0 34px var(--wfx-color),0 0 80px color-mix(in srgb,var(--wfx-color) 60%,transparent),0 0 120px rgba(255,200,80,.35)}
@keyframes wfxSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---- Warrior: travelling crescent sword wave ---- */
.wfx-warrior{width:84px;height:130px;border-radius:50%;border:5px solid var(--wfx-color);border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;
  box-shadow:6px 0 18px color-mix(in srgb,var(--wfx-color) 70%,transparent),inset -6px 0 14px color-mix(in srgb,var(--wfx-color) 40%,transparent)}
.wfx-warrior::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #fff;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;opacity:.8}
.wfx-warrior b{left:-14px;top:50%;width:16px;height:70%;border-radius:50%;transform:translate(calc(var(--n)*-14px),-50%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--wfx-color) 60%,transparent));opacity:calc(.6 - var(--n)*.12);filter:blur(2px)}
.wfx-warrior.wfx-tier2{border-width:6px}.wfx-warrior.wfx-tier3{border-width:7px;width:80px;height:124px}
.wfx-warrior.wfx-tier4{border-width:9px;width:96px;height:150px;box-shadow:10px 0 30px var(--wfx-color),inset -8px 0 22px color-mix(in srgb,var(--wfx-color) 55%,transparent)}

/* ---- Impact burst, shockwave, flash ---- */
.wfx-burst{width:var(--wfx-size,60px);height:var(--wfx-size,60px);border-radius:50%;
  background:radial-gradient(circle,#fff 0 12%,var(--wfx-color) 30%,transparent 66%);opacity:0;animation:wfxBurst .9s ease-out forwards}
.wfx-burst i{left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 8px var(--wfx-color);
  animation:wfxSpark .85s cubic-bezier(.1,.7,.3,1) var(--delay,0ms) forwards}
.wfx-burst.wfx-tier3 i,.wfx-burst.wfx-tier4 i{width:9px;height:9px}
@keyframes wfxBurst{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}18%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
@keyframes wfxSpark{0%{transform:translate(-50%,-50%);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2);opacity:0}}
.wfx-shockwave{width:40px;height:40px;border-radius:50%;border:4px solid var(--wfx-color);box-shadow:0 0 24px var(--wfx-color);opacity:0;animation:wfxWave .85s ease-out forwards}
.wfx-shockwave.wfx-tier4{border-width:6px}
@keyframes wfxWave{0%{transform:translate(-50%,-50%) scale(.4);opacity:.95}100%{transform:translate(-50%,-50%) scale(6);opacity:0}}
.wfx-flash{inset:0;transform:none;background:radial-gradient(circle at 70% 40%,color-mix(in srgb,var(--wfx-color) 45%,transparent),transparent 60%);
  animation:wfxFlash .6s ease-out forwards;mix-blend-mode:screen}
.wfx-linger{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--wfx-color) 55%,transparent),transparent 65%);animation:wfxLinger 1.15s ease-out forwards;mix-blend-mode:screen}
.wfx-linger.wfx-tier4{width:210px;height:210px}
@keyframes wfxLinger{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
@keyframes wfxFlash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}

/* ---- Grade tag shown above the hero on the first attack of each wave (Advanced+) ---- */
.wfx-grade{padding:4px 10px;border-radius:999px;font:800 10px/1 "Segoe UI",system-ui,sans-serif;letter-spacing:.16em;color:#0b1020;
  background:var(--wfx-color);box-shadow:0 0 18px var(--wfx-color);white-space:nowrap;animation:wfxTag 1.05s ease-out forwards}
.wfx-grade.wfx-tier4{background:linear-gradient(90deg,#ffe9a6,#ffd45a,#ffb347);text-shadow:0 1px 0 #fff6}
@keyframes wfxTag{0%{transform:translate(-50%,-30%) scale(.7);opacity:0}15%{transform:translate(-50%,-50%) scale(1.08);opacity:1}75%{opacity:1}100%{transform:translate(-50%,-110%) scale(1);opacity:0}}

/* ---- Hero card: idle weapon-tier aura so the pull result is visible before the first hit ---- */
#heroFighter[data-weapon-tier="2"]{box-shadow:0 0 0 1px rgba(115,188,255,.5),0 0 22px rgba(115,188,255,.35)}
#heroFighter[data-weapon-tier="3"]{box-shadow:0 0 0 1px rgba(201,154,255,.6),0 0 28px rgba(201,154,255,.45)}
#heroFighter[data-weapon-tier="4"]{box-shadow:0 0 0 1px rgba(255,212,90,.75),0 0 34px rgba(255,212,90,.55),0 0 70px rgba(255,180,60,.25);animation:wfxLegendPulse 2.4s ease-in-out infinite}
@keyframes wfxLegendPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,212,90,.75),0 0 30px rgba(255,212,90,.5)}50%{box-shadow:0 0 0 1px rgba(255,212,90,.95),0 0 48px rgba(255,212,90,.7),0 0 90px rgba(255,180,60,.3)}}
@media (prefers-reduced-motion:reduce){.wfx{display:none}#heroFighter[data-weapon-tier="4"]{animation:none}}