/* Efeitos visuais de combate (src/vfx.js). Palco temporário, sem eventos de toque, removido ao fim de cada efeito. */
.vfx-stage { position: absolute; inset: 0; z-index: 19; pointer-events: none; overflow: hidden; contain: layout style; }
.vfx-stage.fixo { position: fixed; z-index: 60; }
.vfx-box { position: absolute; --vc: #b3121f; }
.vx { position: absolute; display: block; pointer-events: none; will-change: transform, opacity; }
.vx-svg svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vx-eixo { width: 0; height: 0; overflow: visible; }
.vx-clip { overflow: hidden; }

/* Luz e véus de cor sobre o retrato */
.vx-clarao { background: radial-gradient(circle at 50% 45%, rgba(255, 250, 240, 0.95), rgba(255, 220, 200, 0.35) 40%, transparent 70%); mix-blend-mode: screen; }
.vx-clarao-prata { background: radial-gradient(circle at 50% 50%, rgba(235, 242, 255, 0.95), rgba(160, 185, 225, 0.3) 40%, transparent 70%); mix-blend-mode: screen; }
.vx-clarao-rubro { background: radial-gradient(circle at 50% 42%, rgba(255, 70, 60, 0.75), rgba(140, 0, 10, 0.3) 45%, transparent 72%); mix-blend-mode: screen; }
.vx-clarao-ouro { background: radial-gradient(circle at 50% 30%, rgba(255, 244, 210, 0.85), rgba(230, 190, 110, 0.25) 50%, transparent 75%); mix-blend-mode: screen; }
.vx-vinheta { background: radial-gradient(ellipse at 50% 45%, transparent 25%, rgba(6, 3, 14, 0.55) 60%, rgba(2, 1, 6, 0.92)); }
.vx-vinheta-sangue { background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(90, 0, 8, 0.45) 72%, rgba(40, 0, 4, 0.85)); mix-blend-mode: multiply; }
.vx-carvao { background: radial-gradient(ellipse at 50% 30%, rgba(60, 20, 4, 0.55), rgba(18, 6, 2, 0.9)); mix-blend-mode: multiply; }
.vx-brilho-fogo { background: linear-gradient(to top, rgba(255, 120, 30, 0.75), rgba(200, 50, 0, 0.25) 45%, transparent 75%); mix-blend-mode: screen; }
.vx-tinta-peste { background: radial-gradient(ellipse at 50% 60%, rgba(120, 140, 50, 0.55), rgba(40, 50, 20, 0.85)); mix-blend-mode: multiply; }
.vx-gelo { background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(160, 205, 255, 0.35) 68%, rgba(225, 242, 255, 0.7)); mix-blend-mode: screen; }
.vx-luz-dourada { background: radial-gradient(ellipse at 50% 20%, rgba(255, 225, 150, 0.6), transparent 70%); mix-blend-mode: screen; }
.vx-aura-rubra { box-shadow: inset 0 0 calc(var(--s, 60px) * 0.6) rgba(220, 10, 30, 0.85), inset 0 0 12px rgba(255, 60, 60, 0.9); background: radial-gradient(ellipse, transparent 45%, rgba(170, 0, 20, 0.4)); mix-blend-mode: screen; }
.vx-brilho-base { background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--vc) 75%, transparent), transparent 70%); mix-blend-mode: screen; }
.vx-halo-osso { box-shadow: inset 0 0 26px rgba(240, 225, 180, 0.75); background: linear-gradient(to top, rgba(240, 225, 180, 0.35), transparent 60%); mix-blend-mode: screen; }
.vx-moldura-aco { box-shadow: inset 0 0 0 2px rgba(220, 228, 240, 0.85), inset 0 0 18px rgba(190, 205, 225, 0.6); }
.vx-brilho-aco { background: linear-gradient(90deg, transparent, rgba(235, 240, 250, 0.75) 50%, transparent); mix-blend-mode: overlay; filter: blur(2px); }

/* Lâminas e cortes */
.vx-lamina { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.vx-rastro { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5)); border-radius: 50%; filter: blur(1.5px); mix-blend-mode: screen; }
.vx-corte { background: linear-gradient(90deg, transparent, #fff 18%, #ffe0d4 50%, #fff 82%, transparent); border-radius: 50%;
  box-shadow: 0 0 6px #ff3a2a, 0 0 16px rgba(170, 0, 10, 0.85); mix-blend-mode: screen; }
.vx-ferida { background: linear-gradient(90deg, transparent, #4a0006 20%, #7a000c 50%, #4a0006 80%, transparent); border-radius: 50%; mix-blend-mode: multiply; filter: blur(0.6px); }
.vx-estrela { background: linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, 0.95) 50%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, 0.95) 50%, transparent 54%),
  radial-gradient(circle, rgba(255, 245, 235, 0.9), rgba(255, 120, 90, 0.35) 25%, transparent 55%); mix-blend-mode: screen; }
.vx-furo { border-radius: 50%; background: radial-gradient(circle, #120002 30%, #6a0008 60%, transparent 72%); mix-blend-mode: multiply; }
.vx-arco path { fill: none; stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 240, 220, 0.8)); }
.vx-arco-sombra { filter: blur(4px); opacity: 0.7; } .vx-arco-sombra path { fill: none; stroke: #7a0a12; stroke-width: 16; stroke-linecap: round; }
.vx-talho { border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 225, 210, 0.9) 0%, #8a0a12 18%, rgba(50, 0, 5, 0.85) 42%, transparent 68%); mix-blend-mode: multiply; filter: blur(0.5px); }
.vx-talho::after { content: ''; position: absolute; left: 8%; right: 8%; top: 46%; height: 8%; border-radius: 50%; background: linear-gradient(90deg, transparent, #fff 50%, transparent); mix-blend-mode: screen; }

/* Sangue */
.vx-sangue { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 40% 35%, #b8202c, #6a000a 50%, #2a0004); }
.vx-mancha { background: radial-gradient(ellipse, rgba(110, 0, 10, 0.95), rgba(60, 0, 6, 0.8) 60%, transparent 75%); mix-blend-mode: multiply; }
.vx-gota { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--vc) 70%, #fff), var(--vc) 40%, color-mix(in srgb, var(--vc) 30%, #000));
  box-shadow: 0 0 5px color-mix(in srgb, var(--vc) 70%, transparent); filter: blur(0.4px); }
.vx-nevoa-sangue { border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--vc) 55%, transparent), transparent 65%); filter: blur(4px); mix-blend-mode: screen; }
.vx-absorve { border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--vc) 50%, #fff), color-mix(in srgb, var(--vc) 50%, transparent) 35%, transparent 68%); mix-blend-mode: screen; }
.vx-escorre { border-radius: 0 0 50% 50% / 0 0 6px 6px; background: linear-gradient(to bottom, rgba(70, 0, 6, 0.4), #8a0010 40%, #b3121f 92%, #5a0008); box-shadow: 0 0 2px rgba(80, 0, 8, 0.8); }

/* Fogo */
.vx-chama { border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse at 50% 85%, #fff6d0 0%, #ffc04a 16%, #ff6a12 40%, rgba(170, 25, 0, 0.6) 60%, transparent 72%);
  filter: blur(1.5px); mix-blend-mode: screen; }
.vx-brasa { border-radius: 50%; background: #ffcf7a; box-shadow: 0 0 4px #ff8a2a, 0 0 9px rgba(255, 90, 20, 0.8); }
.vx-fumaca { border-radius: 50%; background: radial-gradient(circle, rgba(30, 24, 22, 0.75), transparent 68%); filter: blur(5px); }

/* Ossos */
.vx-lasca { background: linear-gradient(135deg, #efe4c8, #b3a47f 40%, #5c513f 80%, #2e271d); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)); }
.vx-po { border-radius: 50%; background: radial-gradient(ellipse, rgba(215, 200, 170, 0.7), rgba(150, 135, 110, 0.25) 50%, transparent 70%); filter: blur(3px); }
.vx-costela { filter: brightness(0.82) contrast(1.15) drop-shadow(2px 0 3px rgba(0, 0, 0, 0.9)); }
.vx-racha path { fill: none; stroke: rgba(20, 12, 6, 0.9); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: bevel; filter: drop-shadow(0 0 1px rgba(240, 225, 190, 0.7)); }
.vx-racha-sangue path { fill: none; stroke: #ff2a3a; stroke-width: 1.4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(255, 30, 40, 0.9)); mix-blend-mode: screen; }
.vx-racha-brasa path { fill: none; stroke: #ffb060; stroke-width: 1.8; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px #ff5a10) drop-shadow(0 0 1px #000); }

/* Cura e luz */
.vx-coluna { background: linear-gradient(to top, color-mix(in srgb, var(--vc) 60%, transparent), color-mix(in srgb, var(--vc) 20%, transparent) 55%, transparent); mix-blend-mode: screen; }
.vx-box:has(.vx-coluna) { --vc: #a6d468; }
.vx-centelha { border-radius: 50%; background: color-mix(in srgb, var(--vc) 45%, #fff); box-shadow: 0 0 4px var(--vc), 0 0 9px color-mix(in srgb, var(--vc) 70%, transparent); }
.vx-anel-chao { border-radius: 50%; border: 2px solid color-mix(in srgb, var(--vc) 80%, #fff); box-shadow: 0 0 10px var(--vc); }
.vx-anel-ouro { border-color: #f4dc9a; box-shadow: 0 0 12px #e9c46a; }
.vx-pilar { background: linear-gradient(to bottom, transparent, rgba(255, 245, 215, 0.85) 30%, rgba(255, 230, 170, 0.55) 80%, transparent); filter: blur(3px); mix-blend-mode: screen; }
.vx-raio { background: linear-gradient(to top, rgba(255, 236, 180, 0.55), rgba(240, 190, 90, 0.18) 50%, transparent); border-radius: 50%; mix-blend-mode: screen; filter: blur(2px); }
.vx-aureola { border-radius: 50%; border: 2px solid #f6e2a6; box-shadow: 0 0 10px #e9c46a, inset 0 0 6px #e9c46a; }
.vx-luz-pura { background: linear-gradient(to bottom, transparent, rgba(255, 248, 225, 0.8) 50%, transparent); filter: blur(4px); mix-blend-mode: screen; }

/* Vazio, sino, runas */
.vx-olho { filter: drop-shadow(0 0 10px rgba(160, 185, 230, 0.85)); }
.vx-onda { border-radius: 50%; border: 1.5px solid rgba(200, 215, 240, 0.75); box-shadow: 0 0 8px rgba(160, 185, 230, 0.6), inset 0 0 8px rgba(160, 185, 230, 0.4); }
.vx-onda-vazio { border-color: rgba(185, 160, 235, 0.7); box-shadow: 0 0 10px rgba(130, 90, 210, 0.6), inset 0 0 10px rgba(130, 90, 210, 0.4); }
.vx-onda-bronze { border-color: rgba(232, 190, 110, 0.85); box-shadow: 0 0 10px rgba(200, 140, 50, 0.7), inset 0 0 6px rgba(200, 140, 50, 0.5); }
.vx-onda-rubra { border-color: rgba(230, 60, 70, 0.8); box-shadow: 0 0 10px rgba(180, 0, 20, 0.7); }
.vx-sino { filter: drop-shadow(0 0 6px rgba(230, 180, 90, 0.6)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.8)); }
.vx-sigilo { --sc: color-mix(in srgb, var(--vc) 55%, #fff); filter: drop-shadow(0 0 4px var(--vc)) drop-shadow(0 0 10px color-mix(in srgb, var(--vc) 70%, transparent)); mix-blend-mode: screen; }
.vx-box:has(.vx-sigilo) { --vc: #c7d4e8; }
.vx-sigilo .tr { fill: none; stroke: var(--sc); stroke-width: 1.4; }
.vx-sigilo .tr.fino { stroke-width: 0.7; }
.vx-sigilo .rn path { fill: none; stroke: var(--sc); stroke-width: 0.9; stroke-linecap: round; }

/* Estados */
.vx-corrente { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 3px rgba(200, 210, 225, 0.35)); }
.vx-cristal path { fill: none; stroke: #eef8ff; stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linecap: round; filter: drop-shadow(0 0 2px #9fd2ff); }
.vx-brilho { background: linear-gradient(90deg, transparent 45%, #fff 50%, transparent 55%), linear-gradient(0deg, transparent 45%, #fff 50%, transparent 55%), radial-gradient(circle, rgba(220, 240, 255, 0.9), transparent 30%); mix-blend-mode: screen; }
.vx-trevas { --r: 80%; background: radial-gradient(circle at 50% 42%, transparent var(--r), rgba(4, 0, 8, 0.94) calc(var(--r) + 35%)); }
.vx-tentaculo { border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.95), rgba(10, 0, 20, 0.6) 50%, transparent 70%); filter: blur(3px); }
.vx-olhos { border-radius: 50%; background: radial-gradient(ellipse, #fff4e0, #e04030 50%, transparent 75%); box-shadow: 0 0 6px #ff3a2a; }
.vx-veu { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 9px, rgba(255, 255, 255, 0) 9px 21px),
  linear-gradient(180deg, rgba(200, 192, 232, 0), rgba(190, 182, 228, 0.45) 25%, rgba(150, 140, 195, 0.3) 70%, rgba(150, 140, 195, 0));
  filter: blur(1px); mix-blend-mode: screen; border-radius: 0 0 40% 40% / 0 0 12% 12%; }
.vx-espinho { filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 4px rgba(160, 20, 20, 0.5)); }
.vx-mira svg { stroke: #e3262f; stroke-width: 2.4; filter: drop-shadow(0 0 4px rgba(255, 40, 40, 0.9)); }
.vx-mira .fino { stroke-width: 1; stroke-dasharray: 4 3; }
.vx-mira .cheio { fill: #ff4a4a; stroke: none; }
.vx-miasma { border-radius: 50%; background: radial-gradient(circle, rgba(150, 170, 80, 0.6), rgba(80, 95, 35, 0.35) 45%, transparent 70%); filter: blur(4px); }
.vx-foice { filter: drop-shadow(0 0 5px rgba(190, 220, 200, 0.45)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.9)); }

/* Relíquias e tabuleiro */
.vx-espectro { border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 30%, rgba(225, 245, 245, 0.85), rgba(150, 200, 210, 0.35) 45%, transparent 70%); filter: blur(2.5px); mix-blend-mode: screen; }
.vx-ampulheta { filter: drop-shadow(0 0 8px rgba(230, 190, 110, 0.6)); }
.vx-areia { border-radius: 50%; background: #e7c27a; box-shadow: 0 0 5px #d9a94a; }
.vx-mare-rubra { background: linear-gradient(to top, rgba(120, 0, 12, 0.85), rgba(180, 10, 25, 0.5) 55%, transparent); filter: blur(2px); mix-blend-mode: hard-light; border-radius: 40% 40% 0 0 / 12% 12% 0 0; }
.vx-lapide { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.85)); }
.vx-cascalho { background: #4a4440; clip-path: polygon(20% 0, 100% 30%, 80% 100%, 0 70%); }