/* Efeitos de ataque (só CSS). O ponto (0,0) do elemento é o centro do efeito; a cor vem de `--cor`. */
.ef { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; will-change: transform, opacity; width: 0; height: 0; }
/* flecha em camadas: rastro (fade), haste (madeira), penas (empenamento) e ponta (metal com brilho) */
.ef--flecha { filter: drop-shadow(0 0 5px rgba(255, 236, 170, .55)); }
.ef--flecha i { position: absolute; display: block; }
.ef--flecha .rastro { left: -120px; top: -3px; width: 100px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(255, 244, 214, .6)); filter: blur(2px); }
.ef--flecha .haste { left: -28px; top: -1.6px; width: 52px; height: 3.2px; border-radius: 2px; background: linear-gradient(180deg, #f6dca4, #a56a2e 45%, #5b3416); }
.ef--flecha .penas { left: -34px; top: -6.5px; width: 18px; height: 13px; clip-path: polygon(0 0, 68% 0, 100% 50%, 68% 100%, 0 100%, 30% 50%); background: linear-gradient(90deg, #5fd6c0, #eafffa); }
.ef--flecha .ponta { left: 22px; top: -6px; width: 17px; height: 12px; clip-path: polygon(0 0, 100% 50%, 0 100%, 24% 50%); background: linear-gradient(135deg, #fff, #b9c7d8 55%, #6d7f96); filter: drop-shadow(0 0 4px #bfe9ff); }
.ef--fagulha::before { content: ''; position: absolute; left: -5px; top: -1.5px; width: 10px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff, var(--cor)); box-shadow: 0 0 5px var(--cor); }
.ef--bolaDeFogo::before { content: ''; position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff6c8, var(--cor) 45%, #b02a00 100%); box-shadow: 0 0 14px 4px var(--cor), 0 0 26px 8px #ff5a0066; }
.ef--orbe::before { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--cor) 50%, #12071f 100%); box-shadow: 0 0 12px 3px var(--cor); }
.ef--raio { height: 3px; margin-top: -1.5px; transform-origin: 0 50%; background: linear-gradient(90deg, #fff, var(--cor) 40%, #fff); box-shadow: 0 0 8px 2px var(--cor); border-radius: 2px; }
.ef--corte::before { content: ''; position: absolute; left: -38px; top: -2px; width: 76px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--cor) 30% 70%, transparent); box-shadow: 0 0 8px 2px var(--cor); }
.ef--onda::before { content: ''; position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; border: 4px solid var(--cor); box-shadow: 0 0 10px var(--cor), inset 0 0 8px var(--cor); }
.ef--faisca::before { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, var(--cor) 55%, transparent 72%); }
.ef::before, .ef::after { scale: 1.5; } /* maior na tela sem esticar o deslocamento do elemento */