/* Spezialaktionen auf der Kampfbühne (battle-special-fx.js): Ebene über der Bühne, Positionen kommen aus dem Skript. */
#bxSfxLayer { position: absolute; z-index: 7; pointer-events: none; overflow: visible; }
#bxSfxLayer .bxs-glyph { position: absolute; line-height: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35)); white-space: nowrap; }
#bxSfxLayer .bxs-banner {
  position: absolute; left: 50%; top: 4px; transform: translate(-50%, 0); max-width: 92%; background: #fffdf6; color: #2b1a0e;
  border: 3px solid var(--cs-ink, #2b1a0e); border-radius: 12px; box-shadow: 3px 3px 0 var(--cs-ink, #2b1a0e); padding: 6px 16px; font: 900 1rem/1.2 inherit; white-space: nowrap;
}
#bxSfxLayer .bxs-note {
  position: absolute; transform: translate(-50%, 0); max-width: 90%; font: 900 0.82rem/1.15 inherit; color: #fff; background: rgba(30, 22, 50, 0.88);
  border: 2px solid #fff3b0; border-radius: 8px; padding: 3px 9px; white-space: nowrap; text-shadow: 0 1px 0 #000;
}
#bxSfxLayer .bxs-ring { position: absolute; border: 3px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); }
#bxSfxLayer .bxs-glow { position: absolute; border-radius: 50%; transform: translate(-50%, -60%); }
#bxSfxLayer .bxs-fig { position: absolute; width: 54px; height: 74px; transform-origin: 0 100%; }
#bxSfxLayer .bxs-fig .pixel-avatar { position: relative; margin: 0; }
#bxSfxLayer .bxs-dome { position: absolute; border: 3px solid; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform-origin: 50% 100%; }
#bxSfxLayer .bxs-slash { position: absolute; height: 7px; background: linear-gradient(90deg, transparent, #fff, #ffe27a, transparent); border-radius: 4px; transform-origin: 50% 50%; }
#bxSfxLayer .bxs-ghost { position: absolute; pointer-events: none; filter: brightness(0.3) saturate(0.4); }
#bxSfxLayer .bxs-clock { position: absolute; line-height: 1; transform: translate(-50%, -50%); }
#bxSfxLayer .bxs-dl { position: absolute; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 6px; background: #10203a; color: #fff; font: 800 0.8rem/1 inherit; padding: 5px 9px; border-radius: 8px; border: 2px solid #7ab8ff; white-space: nowrap; }
#bxSfxLayer .bxs-dl .trk { display: block; width: 84px; height: 8px; background: #335; border-radius: 4px; overflow: hidden; }
#bxSfxLayer .bxs-dl i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #5ad, #8f8); }
#bxSfxLayer .bxs-wheel {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(70%, 300px); background: rgba(20, 16, 36, 0.86);
  border: 3px solid #fff3b0; border-radius: 16px; padding: 10px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}
@media (prefers-reduced-motion: reduce) { #bxSfxLayer * { animation-duration: 0.01s !important; } }