/*   CSS FILE HEADER #
 *
 *   File:         [fx.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['06.10.2026']
 *   Version:      ['0.3.0']
 *   Description:  ['Per-effect cast animations: DOM overlays drawn on the spell card (frost, scorch, wings, shields...), drips and floating combat text. WebGL particles live in comum/palco.js.']
 */


/* =====================================================================
   PER-EFFECT CAST ANIMATIONS (animacoes.js)
   ===================================================================== */
.fx-camada { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 2; }
.fx-brasa { box-shadow: inset 0 -40px 60px -20px rgba(255, 110, 20, .55), 0 0 30px rgba(255, 120, 30, .45); animation: fx-some 1.7s ease-out forwards; }
.fx-clarao { background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); animation: fx-clarao .6s ease-out forwards; }
.fx-clarao.fx-azul { background: radial-gradient(circle at 50% 40%, rgba(200, 240, 255, .9), rgba(120, 200, 255, 0) 70%); }
.fx-clarao.fx-dourado { background: radial-gradient(circle at 80% 15%, rgba(255, 236, 170, .9), rgba(255, 210, 90, 0) 70%); animation-duration: .9s; }
.fx-clarao.fx-prisma { background: conic-gradient(from 0deg, rgba(255, 120, 120, .35), rgba(255, 220, 120, .35), rgba(140, 255, 160, .35), rgba(120, 200, 255, .35), rgba(210, 140, 255, .35), rgba(255, 120, 120, .35)); animation-duration: .9s; }
.fx-geada {
    box-shadow: inset 0 0 0 2px rgba(200, 240, 255, .8), inset 0 0 38px 8px rgba(170, 225, 255, .75);
    background: linear-gradient(135deg, rgba(220, 245, 255, .55), transparent 30%, transparent 70%, rgba(220, 245, 255, .55));
    animation: fx-geada 2.2s ease-out forwards;
}
.fx-geada.fx-longa { animation-duration: 3s; }
.fx-necro { box-shadow: inset 0 0 50px 10px rgba(20, 40, 25, .65); background: radial-gradient(ellipse at 50% 100%, rgba(40, 80, 50, .35), transparent 70%); animation: fx-some 2s ease-out forwards; }
.fx-cura { box-shadow: inset 0 0 40px 6px rgba(110, 220, 140, .45), 0 0 26px rgba(110, 220, 140, .4); animation: fx-some 1.6s ease-out forwards; }
.fx-veneno { box-shadow: inset 0 0 40px 6px rgba(80, 180, 50, .4); }
.fx-sombra { background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(10, 5, 20, .55) 100%); animation: fx-some 2s ease-out forwards; }
.fx-cego { background: rgba(8, 6, 4, .82); animation: fx-cego 2.2s ease-in-out forwards; }
.fx-lento { background: radial-gradient(circle, rgba(120, 170, 255, .2), transparent 70%); filter: blur(1px); animation: fx-some 2.4s ease-out forwards; }
.fx-paralisado { box-shadow: inset 0 0 0 2px rgba(240, 225, 120, .8), inset 0 0 30px rgba(240, 225, 120, .35); animation: fx-pisca 2s steps(8) forwards; }
.fx-frenesi { box-shadow: inset 0 0 40px 8px rgba(220, 40, 40, .5), 0 0 30px rgba(220, 40, 40, .5); animation: fx-pulso-vermelho .4s ease-in-out 4 alternate; }
@keyframes fx-some { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-clarao { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-geada { 0% { opacity: 0; clip-path: inset(0 0 100% 0); } 25% { opacity: 1; clip-path: inset(0 0 0 0); } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-cego { 0% { opacity: 0; } 20%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-pisca { 0%, 100% { opacity: 0; } 10%, 30%, 50%, 70%, 90% { opacity: 1; } 20%, 40%, 60%, 80% { opacity: .2; } }
@keyframes fx-pulso-vermelho { from { opacity: .2; } to { opacity: 1; } }

/* the card blurs while its effect plays, so the animation and the floating text stand out */
.magia > :not(.fx-camada) { transition: filter .35s, opacity .35s; }
.magia.fx-foco > :not(.fx-camada) { filter: blur(2.5px) saturate(.7); opacity: .5; }
.magia.fx-sumir > :not(.fx-camada) { opacity: .04; filter: blur(6px); }

/* building blocks: drawings in card pixels and moving pieces */
.fx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-peca { position: absolute; display: block; pointer-events: none; }
.fx-peca > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx-recorte, .fx-janela { overflow: hidden; }
.fx-clarao.fx-amarelo { background: radial-gradient(circle at 50% 30%, rgba(255, 245, 170, .95), rgba(255, 220, 60, 0) 70%); animation-duration: .8s; }
.fx-clarao.fx-vermelho { background: radial-gradient(circle at 50% 50%, rgba(255, 90, 90, .7), rgba(255, 40, 40, 0) 70%); }
@keyframes fx-aparece { 0% { opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes girar-fx { to { transform: rotate(360deg); } }

/* Congelado / Alterar II: spikes growing from the edges */
.fx-gelo .espinho { transform-box: fill-box; transform-origin: 50% 100%; animation: gelo-cresce 2.9s cubic-bezier(.2, .9, .3, 1) both; }
.fx-gelo polygon { stroke: rgba(255, 255, 255, .9); stroke-width: 1; }
.fx-gelo path { stroke: rgba(255, 255, 255, .75); stroke-width: .9; fill: none; }
.fx-gelo .fx-svg { filter: drop-shadow(0 0 4px rgba(160, 220, 255, .9)); }
.fx-gelo.fx-cristal .fx-svg { filter: drop-shadow(0 0 6px rgba(180, 110, 255, .9)); }
@keyframes gelo-cresce { 0% { transform: scaleY(0); opacity: 0; } 20% { transform: scaleY(1); opacity: 1; } 78% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Lento: anchor on a chain */
.fx-ancora .ancora { transform-origin: 50% 0; animation: ancora-cai 2.9s both; }
.fx-ancora .ferro { fill: none; stroke: #2c3138; stroke-width: 4.5; stroke-linecap: round; filter: drop-shadow(0 0 1px #c3d2e2) drop-shadow(0 0 6px rgba(110, 160, 255, .85)); }
.fx-ancora .ferro ellipse { stroke-width: 2.6; }
.fx-ancora .ferro rect, .fx-ancora .ponta { fill: #2c3138; stroke: none; }
@keyframes ancora-cai {
    0% { transform: translateY(-100%); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
    18% { transform: translateY(0); }
    23% { transform: translateY(-9px); }
    28% { transform: translateY(0) rotate(0); }
    45% { transform: rotate(5deg); }
    62% { transform: rotate(-4deg); }
    78% { transform: rotate(2deg); opacity: 1; }
    100% { transform: rotate(0); opacity: 0; }
}

/* Paralisado: electric chains */
.fx-correntes .fx-svg { filter: drop-shadow(0 0 3px #ffd83a) drop-shadow(0 0 9px rgba(255, 200, 40, .75)); }
.fx-correntes .elo { fill: none; stroke: #fff6b8; stroke-width: 2.6; opacity: 0; animation: elo-pisca 2.6s both; }
@keyframes elo-pisca { 0% { opacity: 0; } 6% { opacity: 1; stroke: #fff; } 25% { opacity: .55; stroke: #ffd83a; } 28% { opacity: 1; stroke: #fff; } 50% { opacity: .6; stroke: #ffd83a; } 53% { opacity: 1; stroke: #fff6b8; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* Fortificado: wall + shield */
.fx-muralha .muralha { animation: muralha-sobe 2.9s cubic-bezier(.2, .8, .3, 1) both; filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, .35)); }
@keyframes muralha-sobe { 0% { transform: translateY(100%); } 25% { transform: translateY(0); } 82% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
.fx-escudo .escudo { animation: escudo-bate 2.9s both; filter: drop-shadow(0 0 10px rgba(255, 210, 90, .8)) drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }
.fx-escudo .reflexo { animation: reflexo-passa 2.9s ease-in-out both; }
@keyframes escudo-bate { 0%, 22% { transform: scale(2.2); opacity: 0; } 32% { transform: scale(1); opacity: 1; } 36% { transform: scale(1.07); } 40% { transform: scale(1); } 82% { transform: scale(1); opacity: 1; } 100% { transform: scale(.96); opacity: 0; } }
@keyframes reflexo-passa { 0%, 40% { transform: skewX(-20deg) translateX(0); } 60%, 100% { transform: skewX(-20deg) translateX(170px); } }

/* Alado: wings */
.fx-asas .asa { animation: asa-bate 2.9s ease-in-out both; filter: drop-shadow(0 0 8px rgba(255, 240, 200, .9)); }
@keyframes asa-bate {
    0% { transform: scale(.1) rotate(calc(var(--lado) * 30deg)); opacity: 0; }
    15% { transform: scale(1) rotate(0); opacity: 1; }
    30% { transform: rotate(calc(var(--lado) * -20deg)); }
    45% { transform: rotate(calc(var(--lado) * 10deg)); }
    60% { transform: rotate(calc(var(--lado) * -20deg)); }
    75% { transform: rotate(calc(var(--lado) * 6deg)); opacity: 1; }
    100% { transform: scale(.9) rotate(0); opacity: 0; }
}

/* Inspirado / Brilho II: golden sunburst */
.fx-inspira { background: radial-gradient(ellipse at 50% 30%, rgba(255, 220, 120, .45), transparent 65%); animation: fx-aparece 2.7s both; }
.raios-sol {
    position: absolute; left: 50%; top: 30%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%;
    background: repeating-conic-gradient(rgba(255, 215, 110, .5) 0 6deg, transparent 6deg 18deg);
    -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
    animation: girar-fx 9s linear infinite;
}

/* Moral: banner */
.fx-bandeira .bandeira { transform-origin: 14% 98.5%; animation: bandeira-sobe 2.9s cubic-bezier(.2, .8, .3, 1) both; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45)); }
.fx-bandeira .bandeira.caindo { animation-name: bandeira-cai; animation-timing-function: ease-in; }
.fx-bandeira .mastro { stroke: #5a3a1e; stroke-width: 3.5; stroke-linecap: round; }
.fx-bandeira .ponteira, .fx-bandeira .emblema { fill: #f2c94c; }
.fx-bandeira .pano { animation: pano-ondula .8s ease-in-out infinite; }
@keyframes pano-ondula {
    0%, 100% { d: path("M16,12 Q38,4 58,12 T96,12 L96,54 Q76,46 56,54 T16,54 Z"); }
    50% { d: path("M16,12 Q38,20 58,12 T96,12 L96,54 Q76,62 56,54 T16,54 Z"); }
}
@keyframes bandeira-sobe { 0% { transform: translateY(70px); opacity: 0; } 25% { transform: translateY(0); opacity: 1; } 82% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes bandeira-cai { 0% { transform: translateY(20px); opacity: 0; } 15% { transform: translateY(0); opacity: 1; } 35% { transform: rotate(0); } 70% { transform: translateY(30px) rotate(-70deg); opacity: 1; } 100% { transform: translateY(60px) rotate(-80deg); opacity: 0; } }

/* Atento: eye */
.fx-olho .olho { animation: olho-abre 2.8s both; filter: drop-shadow(0 0 10px rgba(255, 200, 90, .85)); }
.fx-olho .contorno { fill: none; stroke: #b8862a; stroke-width: 3; }
.fx-olho .cilios { stroke: #b8862a; stroke-width: 2.4; stroke-linecap: round; }
.fx-olho .pupila { animation: olho-olha 2.8s ease-in-out both; }
@keyframes olho-abre { 0%, 8% { transform: scaleY(.05); opacity: 0; } 12% { opacity: 1; } 24% { transform: scaleY(1); } 70% { transform: scaleY(1); } 74% { transform: scaleY(.08); } 79% { transform: scaleY(1); opacity: 1; } 100% { transform: scale(1.12); opacity: 0; } }
@keyframes olho-olha { 0%, 30% { transform: translateX(0); } 40% { transform: translateX(-16px); } 54% { transform: translateX(16px); } 64%, 100% { transform: translateX(0); } }

/* Honrado: laurel wreath */
.fx-louro .louro { animation: louro-surge 2.8s cubic-bezier(.2, .8, .3, 1) both; filter: drop-shadow(0 0 8px rgba(255, 210, 90, .9)); }
.fx-louro .folhas { fill: #e2bd52; stroke: #7a5a12; stroke-width: .8; }
.fx-louro .fita { fill: #b3202a; stroke: #5e0e14; stroke-width: 1; }
@keyframes louro-surge { 0% { transform: scale(.3) rotate(-40deg); opacity: 0; } 22% { transform: scale(1.1) rotate(4deg); opacity: 1; } 30% { transform: scale(1) rotate(0); } 82% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.05); opacity: 0; } }

/* Precavido: lattice ward */
.fx-redoma { box-shadow: inset 0 0 0 2px rgba(120, 230, 255, .8), inset 0 0 30px rgba(120, 230, 255, .4), 0 0 18px rgba(120, 230, 255, .5); animation: fx-aparece 2.7s both; }
.fx-redoma .trama {
    position: absolute; inset: 0; border-radius: inherit;
    background:
        repeating-linear-gradient(0deg, rgba(140, 235, 255, .55) 0 1px, transparent 1px 19px),
        repeating-linear-gradient(60deg, rgba(140, 235, 255, .55) 0 1px, transparent 1px 19px),
        repeating-linear-gradient(-60deg, rgba(140, 235, 255, .55) 0 1px, transparent 1px 19px);
    animation: trama-abre 2.7s ease-out both;
}
@keyframes trama-abre { 0% { clip-path: circle(0% at 50% 50%); opacity: 1; } 30% { clip-path: circle(75% at 50% 50%); } 40% { opacity: .35; } 44% { opacity: 1; } 100% { clip-path: circle(75% at 50% 50%); opacity: .2; } }

/* Imortal: infinity sign */
.fx-imortal .infinito { animation: fx-aparece 2.9s both; }
.fx-imortal path { fill: none; stroke-linecap: round; stroke-dasharray: 1; animation: escrever 2.9s ease-in-out both; }
.fx-imortal .aura { stroke: rgba(255, 190, 70, .45); stroke-width: 12; filter: blur(3px); }
.fx-imortal .nucleo { stroke: #fff4cc; stroke-width: 3.5; filter: drop-shadow(0 0 6px #ffc94a); }
@keyframes escrever { 0% { stroke-dashoffset: 1; } 40%, 100% { stroke-dashoffset: 0; } }

/* Fraco: breaking sword, colour drains */
.fx-desbota { -webkit-backdrop-filter: grayscale(.85) brightness(.9); backdrop-filter: grayscale(.85) brightness(.9); animation: fx-aparece 2.8s both; }
.fx-espada .espada { animation: fx-aparece 2.8s both; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.fx-espada .metade-cima, .fx-espada .metade-baixo { transform-box: fill-box; transform-origin: 50% 0; }
.fx-espada .metade-cima { animation: espada-cede 2.8s ease-in both; }
.fx-espada .metade-baixo { animation: espada-cai 2.8s ease-in both; }
.fx-espada .fenda { fill: none; stroke: #fff; stroke-width: 2; opacity: 0; animation: fenda-brilha 2.8s both; filter: drop-shadow(0 0 4px #fff); }
@keyframes espada-cede { 0%, 32% { transform: none; } 60%, 100% { transform: translateY(8px) rotate(-10deg); } }
@keyframes espada-cai { 0%, 32% { transform: none; opacity: 1; } 70% { transform: translate(14px, 70px) rotate(35deg); opacity: 0; } 100% { opacity: 0; } }
@keyframes fenda-brilha { 0%, 22% { opacity: 0; } 28% { opacity: 1; } 34%, 100% { opacity: 0; } }

/* Sensível / Demolir: cracks */
.fx-ferida { box-shadow: inset 0 0 40px 6px rgba(200, 30, 50, .5); animation: fx-pulso-vermelho .45s ease-in-out 5 alternate both; }
.fx-rachas path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: rachar 2.7s ease-out both; }
.fx-rachas .racha path { stroke: #2a0d0d; stroke-width: 2.2; }
.fx-rachas .racha-brilho path { stroke: rgba(230, 50, 70, .6); stroke-width: 6; filter: blur(2px); }
.fx-rachas.fx-pedra .racha path { stroke: #3a2c20; }
.fx-rachas.fx-pedra .racha-brilho path { stroke: rgba(240, 210, 160, .5); }
@keyframes rachar { 0% { stroke-dashoffset: 1; opacity: 1; } 20% { stroke-dashoffset: 0; } 80% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Vulnerável: crosshair */
.fx-mira-camada { background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(120, 0, 10, .35) 100%); animation: fx-aparece 2.7s both; }
.fx-mira-camada .mira { animation: mira-trava 2.7s cubic-bezier(.2, .8, .3, 1) both; filter: drop-shadow(0 0 6px rgba(255, 40, 60, .9)); }
.fx-mira-camada svg { fill: none; stroke: #ff3b47; stroke-width: 3; }
.fx-mira-camada .ponto { fill: #ff3b47; }
@keyframes mira-trava { 0% { transform: scale(2.6) rotate(-90deg); opacity: 0; } 26% { transform: scale(1) rotate(0); opacity: 1; } 30% { transform: scale(.88); } 34% { transform: scale(1); } 50% { transform: scale(1.06); } 54% { transform: scale(1); } 82% { opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }

/* removing a condition: cleansing sweep */
.fx-purifica { background: linear-gradient(0deg, transparent 0%, rgba(255, 250, 225, .8) 45%, transparent 60%) 0 0 / 100% 250% no-repeat; animation: purifica-sobe 1.8s ease-in-out both; }
@keyframes purifica-sobe { from { background-position: 0 0; opacity: 1; } to { background-position: 0 100%; opacity: .2; } }

/* ---------- Ambientes ---------- */
.fx-luz { background: radial-gradient(circle at 50% 45%, rgba(255, 250, 225, .95), rgba(255, 230, 150, .35) 35%, transparent 70%); animation: luz-acende 2.6s ease-out both; }
.fx-luz.forte { background: radial-gradient(circle at 50% 40%, #fffdf2, rgba(255, 235, 160, .7) 40%, rgba(255, 220, 120, .15) 80%); box-shadow: 0 0 60px 20px rgba(255, 230, 150, .55); }
.fx-luz.forte .raios-sol { top: 40%; width: 520px; height: 520px; margin: -260px 0 0 -260px; }
@keyframes luz-acende { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

.fx-calor { background: radial-gradient(ellipse at 50% 100%, rgba(255, 130, 30, .55), transparent 60%); animation: fx-aparece 2.8s both; }
.fx-calor.forte { background: radial-gradient(ellipse at 50% 100%, rgba(255, 110, 20, .8), rgba(255, 60, 0, .2) 55%, transparent 80%); box-shadow: 0 0 40px rgba(255, 120, 30, .5); }
.fx-calor .lenha { filter: drop-shadow(0 0 6px rgba(255, 140, 40, .9)); }

.fx-noite { background: radial-gradient(ellipse at 50% 50%, rgba(10, 15, 45, .45), rgba(5, 8, 25, .85)); animation: fx-aparece 2.8s both; }
.fx-noite .lua { animation: lua-nasce 2.8s ease-out both; filter: drop-shadow(0 0 10px rgba(240, 230, 190, .9)); }
@keyframes lua-nasce { 0% { transform: translateY(24px); opacity: 0; } 30% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-4px); } }

.fx-frio { background: linear-gradient(180deg, rgba(200, 235, 255, .45), transparent 55%); box-shadow: inset 0 0 26px rgba(190, 230, 255, .6); animation: fx-aparece 2.8s both; }

.fx-copias { z-index: 1; }
.fx-copia { position: absolute !important; inset: 0; margin: 0; pointer-events: none; transition: none !important; animation: none !important; box-shadow: none; }

.fx-miragem { background: linear-gradient(110deg, rgba(255, 150, 220, .25), rgba(150, 220, 255, .25), rgba(220, 255, 160, .25), rgba(255, 150, 220, .25)) 0 0 / 300% 100%; animation: miragem-cintila 2.6s linear both; }
@keyframes miragem-cintila { 0% { background-position: 0 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { background-position: 100% 0; opacity: 0; } }

.fx-oficina .engrenagem { animation: girar-fx var(--giro, 2s) linear infinite; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); }
.fx-oficina { animation: fx-aparece 2.7s both; }
.fx-oficina .dentes { fill: #b08d57; stroke: #5a4320; stroke-width: 1.5; }
.fx-oficina .aro { fill: none; stroke: #6e5530; stroke-width: 2; }
.fx-oficina .eixo { fill: #3a2a14; }

.fx-memoria { -webkit-backdrop-filter: sepia(.7); backdrop-filter: sepia(.7); animation: fx-aparece 2.6s both; }
.fx-glitch::after {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(255, 0, 80, .18) 0 3px, transparent 3px 9px, rgba(0, 220, 255, .18) 9px 11px, transparent 11px 17px);
    animation: glitch-corre .25s steps(3) infinite;
}
@keyframes glitch-corre { to { transform: translateY(17px); } }

.fx-teleporte .pilar {
    background: linear-gradient(0deg, rgba(var(--cor-pilar), .95), rgba(var(--cor-pilar), .4) 60%, rgba(var(--cor-pilar), 0));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
    animation: pilar-abre 2.6s ease-out both;
}
@keyframes pilar-abre { 0% { transform: scaleX(0); opacity: 0; } 18% { transform: scaleX(1); opacity: 1; } 70% { opacity: .9; } 100% { transform: scaleX(.3); opacity: 0; } }

.fx-transporte .caixote { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.fx-transporte .caixote.sai { animation: caixote-sai 2.6s both; }
.fx-transporte .caixote.chega { animation: caixote-chega 2.6s both; }
@keyframes caixote-sai { 0% { transform: scale(.6); opacity: 0; } 10%, 32% { transform: scale(1); opacity: 1; filter: none; } 46%, 100% { transform: scale(.3); opacity: 0; filter: blur(4px) brightness(2); } }
@keyframes caixote-chega { 0%, 50% { transform: scale(.3); opacity: 0; filter: blur(4px) brightness(2); } 62% { transform: scale(1.1); opacity: 1; filter: none; } 68% { transform: scale(1); } 86% { opacity: 1; } 100% { opacity: 0; } }

.fx-peca.agua { left: 0; right: 0; bottom: 0; height: 42%; animation: nivel-sobe 2.8s ease-in-out both; }
.fx-peca.onda { left: 0; top: -12px; width: 200%; height: calc(100% + 12px); animation: onda-corre 1.4s linear infinite; }
.fx-peca.terra { left: 0; right: 0; bottom: 0; height: 34%; animation: nivel-sobe 2.8s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes nivel-sobe { 0% { transform: translateY(100%); } 30% { transform: translateY(0); } 78% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(100%); opacity: .6; } }
@keyframes onda-corre { to { transform: translateX(-50%); } }
/* reduced motion: the water stands still (27/10) */
@media (prefers-reduced-motion: reduce) { .fx-peca.onda { animation: none; } }

.fx-lingote .lingote { animation: lingote-cai 2.6s both; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .45)); }
@keyframes lingote-cai { 0% { transform: translateY(-170px); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .9, .5); } 6% { opacity: 1; } 26% { transform: translateY(0); } 31% { transform: translateY(-10px); } 36% { transform: translateY(0); } 85% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }

.fx-carne { box-shadow: inset 0 0 50px 10px rgba(150, 20, 40, .55); animation: carne-pulsa .7s ease-in-out 4 both; }
@keyframes carne-pulsa { 0%, 100% { opacity: .3; } 20% { opacity: 1; } 40% { opacity: .5; } 55% { opacity: .9; } }

.fx-flores .vinha { fill: none; stroke: #4f8a2f; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; animation: escrever 2.9s ease-out both, fx-aparece 2.9s both; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.fx-flores .flor { transform-box: fill-box; transform-origin: 50% 50%; animation: flor-abre 2.4s cubic-bezier(.2, .9, .3, 1.3) both; }
.fx-flores .folha { fill: #6aa83c; }
@keyframes flor-abre { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 25% { transform: scale(1) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

.fx-transmuta .circulo-runas {
    position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%;
    border: 2px dashed rgba(220, 200, 150, .9); box-shadow: 0 0 0 10px rgba(220, 200, 150, .12), 0 0 20px rgba(255, 220, 150, .5), inset 0 0 20px rgba(255, 220, 150, .4);
    animation: girar-fx 3s linear infinite, fx-aparece 2.4s both;
}

.fx-broquel .broquel { animation: escudo-bate 2.6s both; animation-name: broquel-surge; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
@keyframes broquel-surge { 0% { transform: scale(.4); opacity: 0; } 18% { transform: scale(1.05); opacity: 1; } 24% { transform: scale(1); } 40% { transform: rotate(-4deg); } 52% { transform: rotate(3deg); } 64% { transform: rotate(-2deg); } 82% { transform: rotate(0); opacity: 1; } 100% { opacity: 0; } }

.fx-direcao .fx-svg { filter: drop-shadow(0 0 5px rgba(95, 224, 200, .9)); }
.fx-direcao .reta { fill: none; stroke: rgba(95, 224, 200, .5); stroke-width: 3; stroke-dasharray: 6 8; animation: fx-aparece 2.6s both; }
.fx-direcao .curva { fill: none; stroke: #5fe0c8; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; animation: escrever 2.6s ease-in-out both, fx-aparece 2.6s both; }
.fx-direcao .cabeca { fill: #5fe0c8; animation: cabeca-surge 2.6s both; }
@keyframes cabeca-surge { 0%, 36% { opacity: 0; } 42%, 82% { opacity: 1; } 100% { opacity: 0; } }

.fx-runas .fx-svg { filter: drop-shadow(0 0 6px rgba(150, 210, 255, .9)); }
.fx-runas .aro { fill: none; stroke: rgba(170, 220, 255, .8); stroke-width: 2; animation: fx-aparece 2.7s both; }
.fx-runas .runa { fill: none; stroke: #dff1ff; stroke-width: 2.2; stroke-linecap: round; opacity: 0; animation: runa-acende 2.7s both; }
@keyframes runa-acende { 0% { opacity: 0; } 8% { opacity: 1; stroke: #fff; } 20% { opacity: .7; stroke: #9fd4ff; } 82% { opacity: .9; } 100% { opacity: 0; } }

.fx-portal .portal { border-radius: 50%; overflow: hidden; box-shadow: 0 0 30px 6px rgba(150, 100, 255, .7), inset 0 0 30px rgba(20, 0, 50, .9); animation: portal-abre 2.8s cubic-bezier(.2, .8, .3, 1) both; }
.fx-portal .vortice {
    position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px;
    background: radial-gradient(circle, #0b0420 0 12%, transparent 45%), conic-gradient(#7a3cff, #3cc8ff, #b06bff, #1a0b45, #7a3cff, #3cc8ff, #b06bff, #7a3cff);
    animation: girar-fx 1.2s linear infinite;
}
@keyframes portal-abre { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }

.fx-imagem .pintura { animation: pintura-surge 2.7s ease-out both; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
@keyframes pintura-surge { 0% { clip-path: inset(0 100% 0 0); transform: scale(.95); } 28% { clip-path: inset(0 0 0 0); transform: scale(1); opacity: 1; } 82% { opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }

.fx-encanto { box-shadow: inset 0 0 40px 8px rgba(255, 120, 170, .45), 0 0 24px rgba(255, 120, 170, .4); animation: fx-aparece 2.4s both; }
.fx-encanto.fx-lilas { box-shadow: inset 0 0 36px 6px rgba(200, 160, 255, .4); }

.fx-pincel { background: linear-gradient(120deg, transparent 30%, rgba(255, 170, 190, .55) 45%, rgba(255, 210, 180, .55) 55%, transparent 70%) 0 0 / 300% 100% no-repeat; animation: pincel-passa 1.9s ease-in-out both; }
@keyframes pincel-passa { 0% { background-position: 100% 0; opacity: 1; } 70% { background-position: 0 0; opacity: 1; } 100% { background-position: 0 0; opacity: 0; } }

.fx-medico { box-shadow: inset 0 0 30px rgba(90, 220, 130, .35); animation: fx-aparece 2.7s both; }
.fx-medico .cruz { animation: cruz-pulsa 2.7s ease-in-out both; filter: drop-shadow(0 0 10px rgba(90, 230, 130, .9)); }
.fx-medico .varredura { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #7dffa8; box-shadow: 0 0 12px 4px rgba(90, 240, 140, .7); animation: varre 1.2s ease-in-out 2 alternate both; }
@keyframes cruz-pulsa { 0% { transform: scale(.3); opacity: 0; } 18% { transform: scale(1.1); opacity: 1; } 28%, 60% { transform: scale(1); } 44% { transform: scale(1.08); } 82% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes varre { from { top: 0; } to { top: calc(100% - 3px); } }

.fx-pulso-vital .coracao { animation: coracao-bate 2.8s ease-in-out both; filter: drop-shadow(0 0 10px rgba(255, 60, 90, .8)); }
@keyframes coracao-bate { 0% { transform: scale(.3); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 20% { transform: scale(1.2); } 26% { transform: scale(1); } 32% { transform: scale(1.14); } 40% { transform: scale(1); } 52% { transform: scale(1.2); } 58% { transform: scale(1); } 64% { transform: scale(1.14); } 72% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.fx-ecg path { fill: none; stroke: #ff4d5e; stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; animation: escrever 2.8s linear both, fx-aparece 2.8s both; filter: drop-shadow(0 0 4px #ff4d5e); }

.fx-espiritual { box-shadow: inset 0 0 50px 10px rgba(140, 210, 240, .4); background: radial-gradient(ellipse at 50% 100%, rgba(160, 220, 255, .3), transparent 70%); animation: fx-aparece 2.6s both; }

.fx-radar .radar {
    border-radius: 50%; border: 2px solid rgba(90, 255, 190, .8); box-shadow: 0 0 14px rgba(90, 255, 190, .5);
    background: conic-gradient(from 0deg, rgba(90, 255, 190, .6), rgba(90, 255, 190, 0) 70deg, transparent), repeating-radial-gradient(circle, transparent 0 26px, rgba(90, 255, 190, .45) 27px 28px), rgba(5, 30, 25, .45);
    animation: girar-fx 1.1s linear infinite, fx-aparece 2.7s both;
}

.fx-bandagem .faixa {
    position: absolute; left: -10%; width: 120%; height: 26px; transform: rotate(var(--ang));
    background: repeating-linear-gradient(90deg, rgba(120, 100, 70, .12) 0 2px, transparent 2px 7px), linear-gradient(#fdfaf2, #e6dcc6);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3); animation: faixa-enrola 2.7s ease-out both;
}
@keyframes faixa-enrola { 0% { clip-path: inset(0 100% 0 0); } 30% { clip-path: inset(0 0 0 0); } 82% { opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }

.fx-acalento { background: radial-gradient(ellipse at 50% 60%, rgba(255, 200, 170, .55), transparent 70%); animation: acalento-respira 1.4s ease-in-out 2 both; }
@keyframes acalento-respira { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

.fx-sutura .corte { fill: none; stroke: #9b1a24; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; animation: escrever 2.8s ease-out both, sutura-cura 2.8s both; }
.fx-sutura .ponto { stroke: #f1e4c8; stroke-width: 2.4; stroke-linecap: round; opacity: 0; animation: ponto-surge 2.8s both; }
@keyframes sutura-cura { 0%, 55% { stroke: #9b1a24; opacity: 1; } 75% { stroke: #6fdc8c; opacity: 1; filter: drop-shadow(0 0 6px #6fdc8c); } 100% { stroke: #6fdc8c; opacity: 0; } }
@keyframes ponto-surge { 0% { opacity: 0; } 6%, 75% { opacity: 1; } 100% { opacity: 0; } }

.fx-entropia { -webkit-backdrop-filter: sepia(.9) contrast(.9); backdrop-filter: sepia(.9) contrast(.9); animation: fx-aparece 2.8s both; }
.fx-entropia .relogio { animation: fx-aparece 2.8s both; filter: drop-shadow(0 0 8px rgba(230, 190, 110, .8)); }
.fx-entropia .mostrador { fill: rgba(250, 238, 210, .92); stroke: #b8862a; stroke-width: 4; }
.fx-entropia .marcas { stroke: #5a3d0b; stroke-width: 2.5; }
.fx-entropia .ponteiro { stroke: #3a2a10; stroke-linecap: round; transform-box: view-box; transform-origin: 60px 60px; }
.fx-entropia .horas { stroke-width: 4.5; animation: ponteiro-horas 2.8s ease-in-out both; }
.fx-entropia .minutos { stroke-width: 3; animation: ponteiro-minutos 2.8s ease-in-out both; }
@keyframes ponteiro-horas { 0% { transform: rotate(0); } 50% { transform: rotate(150deg); } 100% { transform: rotate(0); } }
@keyframes ponteiro-minutos { 0% { transform: rotate(0); } 50% { transform: rotate(1800deg); } 100% { transform: rotate(0); } }

.texto-flutuante.rotulo-condicao.rotulo-ambiente::before { content: '✦ '; }

/* drips hanging from the bottom of the card (blood, poison, acid) */
.fx-escorrer i {
    position: absolute; top: calc(100% - 3px); width: 7px; height: 0; border-radius: 0 0 6px 6px;
    background: linear-gradient(180deg, var(--cor-gota), color-mix(in srgb, var(--cor-gota) 70%, #000));
    animation: fx-pinga 2.4s ease-in forwards;
}
.fx-escorrer i::after { content: ''; position: absolute; left: -2px; bottom: -6px; width: 11px; height: 11px; border-radius: 50%; background: var(--cor-gota); }
@keyframes fx-pinga { 0% { height: 0; opacity: 1; } 55% { height: var(--alt, 24px); opacity: 1; } 100% { height: var(--alt, 24px); opacity: 0; } }


/* floating combat text */
.texto-flutuante {
    position: absolute; z-index: 905; pointer-events: none; transform: translate(-50%, -50%); white-space: nowrap; opacity: 0;
    font: 700 calc(1.15em * var(--tamanho, 1)) var(--titulo); color: var(--cor-fx);
    text-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 0 14px var(--cor-fx);
    animation: flutua 2s cubic-bezier(.2, .8, .3, 1) forwards;
}
/* light paper: a dark halo instead of an outline keeps pale colors readable */
[data-tom="claro"] .texto-flutuante { text-shadow: 0 0 3px rgba(40, 20, 5, .75), 0 0 10px rgba(40, 20, 5, .5), 0 0 18px var(--cor-fx); }
.texto-flutuante.numero-dano { font-size: calc(3.2em * var(--tamanho, 1)); animation-name: numero-salta; animation-duration: 2.3s; }
.texto-flutuante.rotulo-dano { font-size: 1em; letter-spacing: .2em; text-transform: uppercase; }
.texto-flutuante.rotulo-condicao { font-size: 1.15em; letter-spacing: .06em; padding: .15em .7em; border-radius: 3px; background: rgba(20, 12, 30, .72); border: 1px solid color-mix(in srgb, var(--cor-fx) 60%, transparent); text-shadow: 0 0 8px var(--cor-fx); }
.texto-flutuante.rotulo-condicao.bonus::before { content: '▲ '; }
.texto-flutuante.rotulo-condicao.penal::before { content: '▼ '; }
@keyframes flutua { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
@keyframes numero-salta { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 14% { opacity: 1; transform: translate(-50%, -60%) scale(1.35); } 24% { transform: translate(-50%, -55%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%) scale(.95); } }