.wow-spell {
  position: fixed;
  left: 20px;
  bottom: 24px;
  width: 200px;
  height: 232px;
  z-index: 5;
  pointer-events: none;
  contain: layout style;
  filter: drop-shadow(0 8px 18px #000b);
  --charge: 0;
  --turn: 0deg;
  --burst: 0;
}

.wow-spell svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wow-spell .spell-halo {
  transform-origin: 100px 92px;
  transform: rotate(var(--turn));
}

.wow-spell .spell-charge {
  stroke-dasharray: 414.7;
  stroke-dashoffset: calc(414.7 * (1 - var(--charge)));
  filter: drop-shadow(0 0 5px #f8d784);
}

.wow-spell .spell-shield {
  position: absolute;
  left: 24%;
  top: 17.2%;
  width: 52%;
  height: auto;
  transform: scale(calc(0.88 + var(--charge) * 0.12));
  opacity: calc(0.6 + var(--charge) * 0.4);
  filter: drop-shadow(0 0 calc(3px + var(--charge) * 15px) #5fc9ff80);
}

.wow-spell .spell-letter {
  fill: #071b29;
  stroke: #8a7344;
  stroke-width: 1;
}

.wow-spell .spell-glyph {
  fill: #bca986;
  font:
    700 16px Cinzel,
    Georgia,
    serif;
  text-anchor: middle;
  dominant-baseline: central;
}

.wow-spell .is-charged .spell-letter {
  fill: #614419;
  stroke: #ffe39a;
  filter: drop-shadow(0 0 4px #ffbd4c88);
}

.wow-spell .is-charged .spell-glyph {
  fill: #fff0bc;
}

.wow-spell .spell-link {
  stroke-dasharray: 142;
  stroke-dashoffset: calc(142 * (1 - var(--charge)));
}

.wow-spell .spell-burst {
  opacity: var(--burst);
}

@media (max-width: 700px) {
  .wow-spell {
    left: 10px;
    bottom: 76px;
    width: 132px;
    height: 153px;
  }
}