/* Fight FX overlay (js/ui/fx). One .fx-layer inside .battlefield; transient pooled .fx-node, persistent .fx-held.
   Only transform / opacity / filter animate. Shake goes on .bf-ground or .stage, NEVER on .hero (the :has(.m3d.live) trap).
   PERF: no mix-blend-mode on any fx node (a blend over the WebGL hero canvas re-reads the backdrop every frame), glows are
   static box-shadows rasterised once on the node's own layer, never animated; the layer is its own paint/layout island. */
.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; contain: strict; }
.fx-node, .fx-held { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; transform-origin: 50% 50%;
  backface-visibility: hidden; }

/* school tokens: --fx-c is the colour a primitive tints with */
.fx-layer [data-school] { --fx-c: #ffd27a; }
.fx-layer [data-school="fire"] { --fx-c: #ff7a1a; }
.fx-layer [data-school="frost"] { --fx-c: #7ab8ff; }
.fx-layer [data-school="shadow"] { --fx-c: #9a4cff; }
.fx-layer [data-school="holy"] { --fx-c: #ffe58a; }
.fx-layer [data-school="nature"] { --fx-c: #5fe36a; }
.fx-layer [data-school="magic"] { --fx-c: #c58bff; }
.fx-layer [data-school="poison"] { --fx-c: #8fe03a; }

/* real WoW spell icon in a round mask; static school glow on full, flat on lite */
.fx-glyph { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 10px 2px var(--fx-c, #ffd27a), inset 0 0 6px rgba(0,0,0,.6); }
.fx-glyph.lite { box-shadow: 0 0 0 1px #000; }
.fx-glyph img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.fx-clone { filter: drop-shadow(0 6px 6px rgba(0,0,0,.55)); }
.fx-clone > * { width: 100%; height: 100%; }
.fx-trail { height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--fx-c, #dfe6ef)); opacity: .8; }
.fx-ring { width: 80px; height: 26px; margin: -13px 0 0 -40px; border-radius: 50%; border: 2px solid var(--fx-c, #9fd0ff);
  box-shadow: 0 0 10px var(--fx-c, #9fd0ff); }
.fx-beam { height: 10px; margin-top: -5px; transform-origin: 0 50%; border-radius: 5px;
  background: linear-gradient(90deg, transparent, var(--fx-c, #ff3b3b) 30%, #fff 50%, var(--fx-c, #ff3b3b) 70%, transparent); }
.fx-pillar { width: 46px; margin-left: -23px; border-radius: 23px 23px 4px 4px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--fx-c, #ffe58a) 70%, transparent) 40%, color-mix(in srgb, var(--fx-c, #ffe58a) 45%, #fff3) 90%); }
.fx-orbit { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.fx-aura { border-radius: 50%; }
.fx-counter { font-family: var(--font-head); font-size: 26px; color: #ffd34a; text-shadow: 2px 2px 0 #000, 0 0 8px #000; white-space: nowrap; }
.fx-vignette { inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s ease-out;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(60, 0, 0, .9) 100%); }

/* board piece states the glow / lift primitives toggle */
.piece.fx-spent { opacity: .35; }
.piece.fx-charge .sprite-holder, .piece.fx-charge .icon { filter: brightness(1.6) drop-shadow(0 0 6px var(--fx-c, #ffd27a)); }
.piece.fx-droop .sprite-holder, .piece.fx-droop .icon { transform: rotate(-8deg); filter: grayscale(.8) brightness(.7); }

/* shake: the primitive sets --fx-px and restarts the class on .bf-ground or a .stage */
.bf-ground.fx-shake, .stage.fx-shake { animation: fx-shake .3s ease-out; }
@keyframes fx-shake { 20% { transform: translate(calc(var(--fx-px, 4px) * -1), 1px); } 45% { transform: translate(var(--fx-px, 4px), -1px); }
  70% { transform: translate(calc(var(--fx-px, 4px) * -.4), 0); } 100% { transform: none; } }

/* impact-timed floaters added by the director */
.floater.blocked { color: #b9c3cf; font-size: 20px; }
.floater.heal.clutch { color: #fff2b0; font-size: 40px; text-shadow: 0 0 10px #ffd34a, 2px 2px 0 #000; }

/* settings: Fight effects row (+ the tier the fight is running at right now) */
.set-row.set-fx .set-fx-now { grid-column: 1 / -1; font-size: 12px; color: #b9a983; }
.set-row.set-fx .set-fx-now b { color: #f3e6c4; font-weight: 600; }
.set-row.set-fx select { grid-area: r; justify-self: start; min-width: 120px; padding: 3px 8px; background: #1c160e; color: #f3e6c4;
  border: 1px solid #4a3b26; border-radius: 4px; font: inherit; }

@media (prefers-reduced-motion: reduce) {
  .bf-ground.fx-shake, .stage.fx-shake { animation: none; }
  .fx-orbit, .fx-aura { animation: none !important; }
}