/* Poderes do combate (attacks.js + vfx.js, refeitos em 04/10/2026): canvas de efeitos, campo escurecido, nome do golpe,
   faixa CRÍTICO/GOLPE FINAL, número de dano e clarões.
   Tipografia dos títulos do jogo (Georgia itálico); nenhum emoji. Nada aqui recebe cliques. */
#fx .vfxCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none}
/* Nome do golpe: plaqueta sobre a carta que ataca, na borda oposta ao alvo. */
#fx .moveCaption{position:absolute;z-index:12;pointer-events:none;white-space:nowrap;text-align:center;padding:.35em .9em .4em;border-radius:6px;
 background:linear-gradient(180deg,#1c1426f2,#0f0a16f2);border:1px solid #e8c98b99;box-shadow:0 8px 20px #000b,inset 0 1px 0 #ffffff14;
 font:italic 800 clamp(13px,1.15vw,19px) Georgia,serif;letter-spacing:.5px;color:#f6e7c4;text-shadow:0 1px 0 #000}
#fx .moveCaption small{display:block;font:600 clamp(9px,.7vw,11px) system-ui,sans-serif;font-style:normal;letter-spacing:2px;color:#b9a4c7;text-transform:uppercase;margin-bottom:1px}
/* Número de dano: algarismos grandes com contorno escuro, degradê e rótulo pequeno embaixo. */
#fx .dmgNumber{position:absolute;z-index:13;pointer-events:none;text-align:center;line-height:.9;will-change:transform,opacity}
#fx .dmgNumber b{display:block;font:italic 900 clamp(40px,4.4vw,76px) Georgia,serif;letter-spacing:-1px;
 background:linear-gradient(180deg,#fffaf0 0%,#ffe2a0 45%,#e8a64a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
 -webkit-text-stroke:2px #2a1408;filter:drop-shadow(0 3px 0 #1a0c06) drop-shadow(0 0 14px #f5b94199)}
#fx .dmgNumber.onPlayer b{background-image:linear-gradient(180deg,#fff0f2 0%,#ff9fb0 45%,#e0405f 100%);-webkit-text-stroke-color:#2a0b18;filter:drop-shadow(0 3px 0 #1a060e) drop-shadow(0 0 14px #ff4d6d99)}
#fx .dmgNumber.crit b{font-size:clamp(30px,3vw,52px);-webkit-text-stroke-width:1.5px}
#fx .dmgNumber small{display:block;margin-top:2px;font:800 clamp(10px,.8vw,13px) system-ui,sans-serif;letter-spacing:4px;color:#f6e7c4;text-shadow:0 1px 3px #000,0 0 8px #000}
#fx .dmgNumber.tie b{font-size:clamp(30px,3vw,52px);letter-spacing:3px;background-image:linear-gradient(180deg,#f2fdff,#8fe7fa 60%,#3fa9c9);-webkit-text-stroke-color:#06222c;filter:drop-shadow(0 3px 0 #041419) drop-shadow(0 0 12px #6fdcff88)}
/* Clarão: só em golpes fortes, e só com "Clarões de impacto" ligado nas opções. */
#fx .impactFlash{position:absolute;inset:0;z-index:9;pointer-events:none;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--c,#fff) 45%,#fff) 0%,transparent 70%);mix-blend-mode:screen}
.reduced #fx .dmgNumber,.reduced #fx .moveCaption{transition:none}
/* Campo escurecido durante o poder: vinheta com o centro entre as duas cartas um pouco mais claro e tingido. */
#fx .powerDim{position:absolute;inset:0;z-index:9;pointer-events:none;
 background:radial-gradient(ellipse 46% 40% at var(--x,50%) var(--y,50%),color-mix(in srgb,var(--c,#000) 14%,transparent),#05030a99 55%,#020105e6 100%)}
/* Nome do golpe, mais forte: letras grandes com brilho na cor do tema. */
#fx .moveCaption{font-size:clamp(16px,1.6vw,26px);padding:.4em 1.1em .45em;border-color:#e8c98bcc;box-shadow:0 10px 30px #000c,0 0 24px #e8c98b33,inset 0 1px 0 #ffffff1a;text-transform:none}
/* Faixa do golpe forte: atravessa a tela por um instante. */
#fx .powerBanner{position:absolute;left:0;right:0;top:13%;z-index:15;pointer-events:none;transform-origin:50% 50%;margin-top:-.75em;text-align:center;
 font:italic 900 clamp(32px,4.6vw,84px)/1.4 Georgia,serif;letter-spacing:.08em;
 background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c,#f1cf84) 55%,#000) 18%,color-mix(in srgb,var(--c,#f1cf84) 55%,#000) 82%,transparent)}
#fx .powerBanner span{background:linear-gradient(180deg,#fffaf0 10%,#ffe2a0 55%,#e8a64a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #2a1408;filter:drop-shadow(0 4px 0 #1a0c06) drop-shadow(0 0 22px var(--c,#f5b941))}
#fx .powerBanner.final span{background-image:linear-gradient(180deg,#fff0f2 10%,#ff9fb0 55%,#e0405f);-webkit-text-stroke-color:#2a0b18}
/* Quadro de impacto (golpe forte, com clarões ligados): um instante em negativo, como nos animes. */
#fx .impactFrame{position:absolute;inset:0;z-index:14;pointer-events:none;background:#fff;mix-blend-mode:difference}