/* Eclipse: molduras e brilho por raridade (rarities.js). Comum, Incomum, Rara, Lendária, Collector.
   Na arena o efeito é discreto para não competir com o combate; na coleção, na loja e no booster ele aparece inteiro.
   Raridade também tem nome escrito (.rarTag), nunca só cor. */
.rt-comum, .rar-comum { --r: #b9b3c2; --r2: #6f6878; }
.rt-incomum, .rar-incomum { --r: #7fd68f; --r2: #2f7a45; }
.rt-rara, .rar-rara { --r: #6fb6f0; --r2: #2d5f9a; }
.rt-lendaria, .rar-lendaria { --r: #ffd36b; --r2: #b9771f; }
.rt-collector, .rar-collector { --r: #ff7ad9; --r2: #7a3cff; }

/* Etiqueta no canto da arte */
.rarTag { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 3px 8px 2px; border-radius: 6px; font: 800 11px/1.2 system-ui, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #120e18; background: var(--r); box-shadow: 0 2px 8px #0008; pointer-events: none; }
.rarTag.rt-collector { color: #fff; background: linear-gradient(100deg, #ff7ad9, #7a3cff, #5fd6cf, #ffd36b, #ff7ad9); background-size: 300% 100%; animation: holoSlide 3s linear infinite; text-shadow: 0 1px 2px #0008; }

/* Moldura: todas as cartas ganham a cor da raridade na borda */
.card.duel.rar-incomum, .card.duel.rar-rara, .card.duel.rar-lendaria, .card.duel.rar-collector { border-color: color-mix(in srgb, var(--r) 70%, transparent); }
.card.duel.rar-lendaria, .card.duel.rar-collector { box-shadow: 0 0 0 1px color-mix(in srgb, var(--r) 45%, transparent), 0 0 18px color-mix(in srgb, var(--r) 25%, transparent); }

/* Coleção, booster e loja: brilho mais forte */
.colGrid .card.duel.rar-rara, .poFront .card.duel.rar-rara { box-shadow: 0 0 0 2px color-mix(in srgb, var(--r) 70%, transparent), 0 0 22px color-mix(in srgb, var(--r) 30%, transparent); }
.colGrid .card.duel.rar-lendaria, .poFront .card.duel.rar-lendaria { box-shadow: 0 0 0 2px var(--r), 0 0 30px color-mix(in srgb, var(--r) 45%, transparent), inset 0 0 18px color-mix(in srgb, var(--r) 20%, transparent); }
/* Collector: moldura holográfica que gira */
.card.duel.rar-collector { border: 2px solid transparent; background: linear-gradient(#19141f, #19141f) padding-box, conic-gradient(from var(--holo, 0deg), #ff7ad9, #7a3cff, #5fd6cf, #ffd36b, #ff7ad9) border-box; animation: holoSpin 4s linear infinite; }
.colGrid .card.duel.rar-collector, .poFront .card.duel.rar-collector { box-shadow: 0 0 0 2px #ff7ad9aa, 0 0 34px #ff7ad966, 0 0 60px #7a3cff44; }
/* Carta ainda bloqueada na coleção: a raridade aparece, sem brilho */
.colGrid .card.duel.locked { box-shadow: none; }

/* ---------- Acabamento da arte por raridade (pedido do gab, 01/10/2026; mapeamento PROVISÓRIO) ----------
   Comum: textura · Incomum: shimmer · Rara: foil + holográfico · Lendária: rainbow foil + prismatic foil · Collector: foil iridescente.
   Só CSS (gradientes, blend modes, máscaras). Duas camadas por arte: ::before é a película colorida, ::after é o reflexo.
   O brilho segue o mouse pelas variáveis da carta: --mx/--my (inclinação 3D da thread de combate, se existir) ou
   --light-x/--light-y (camada de profundidade de ui.js). Sem mouse em cima, um brilho animado passa de tempos em tempos.
   Só transform e opacity são animados (rodam na GPU); 10 cartas na tela continuam leves. */
.card.duel { --fx: var(--mx, var(--light-x, 50%)); --fy: var(--my, var(--light-y, 30%)); }
.card.duel .art { position: relative; overflow: hidden; }
.card.duel .art::before, .card.duel .art::after { content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: -100%; right: -100%; pointer-events: none; }
/* Cada raridade escolhe a mistura (--b1 película, --b2 reflexo) e a força (--o1, --o2).
   Blend modes custam caro com muitas cartas na tela (no teste, a coleção caía de 60 para ~40 quadros por segundo).
   Por isso, parada, a película usa mistura normal e mais fraca; a mistura de verdade liga só na carta sob o mouse e no booster. */
.card.duel .art::before { opacity: calc(var(--o1, .3) * .5); animation: foilDrift 9s ease-in-out infinite alternate; }
.card.duel .art::after { opacity: calc(var(--o2, 1) * .6); animation: foilSweep 6s ease-in-out infinite; }
.poFront .card.duel .art::before { mix-blend-mode: var(--b1, normal); opacity: var(--o1, .3); }
.poFront .card.duel .art::after { mix-blend-mode: var(--b2, normal); opacity: var(--o2, 1); }
/* Com o mouse: película e reflexo seguem o cursor em sentidos opostos (parece que a luz bate no foil). */
.card.duel:is(:hover, .depth-active, :focus-visible) .art::before { animation: none; mix-blend-mode: var(--b1, normal); opacity: var(--o1, .3); transform: translateX(calc((50% - var(--fx)) / 3)); transition: transform .12s linear, opacity .2s; }
.card.duel:is(:hover, .depth-active, :focus-visible) .art::after { animation: none; mix-blend-mode: var(--b2, normal); opacity: var(--o2, 1); transform: translateX(calc((var(--fx) - 50%) / 3)); transition: transform .08s linear, opacity .2s; }

/* Comum: textura de linho/papel, parada. Reflexo suave só com o mouse. */
.card.duel.rar-comum { --b1: overlay; --o1: .55; --b2: soft-light; --o2: 1; }
.card.duel.rar-comum .art::before { left: 0; right: 0; animation: none;
  background: repeating-linear-gradient(45deg, #ffffff1c 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, #00000026 0 1px, transparent 1px 5px), radial-gradient(circle at 30% 20%, #ffffff14, transparent 60%); }
.card.duel.rar-comum .art::after { left: 0; right: 0; animation: none; opacity: 0; background: radial-gradient(circle at var(--fx) var(--fy), #ffffff40, transparent 45%); }
.card.duel.rar-comum:is(:hover, .depth-active, :focus-visible) .art::before, .card.duel.rar-comum:is(:hover, .depth-active, :focus-visible) .art::after { transform: none; }

/* Incomum: shimmer, uma faixa de brilho que passa. */
.card.duel.rar-incomum { --b2: screen; --o2: .7; }
.card.duel.rar-incomum .art::before { display: none; }
.card.duel.rar-incomum .art::after { background: linear-gradient(105deg, transparent 39%, #e9fff01c 45%, #ffffff78 50%, #e9fff01c 55%, transparent 61%); }

/* Rara: foil (reflexo metálico) + holográfico (faixas finas de arco-íris em diagonal). */
.card.duel.rar-rara { --b1: color-dodge; --o1: .16; --b2: overlay; --o2: 1; }
.card.duel.rar-rara .art::before { background: repeating-linear-gradient(115deg, #ff3ca0 0, #ffd23c 2.2%, #3cffa0 4.4%, #3cc8ff 6.6%, #a03cff 8.8%, #ff3ca0 11%);
  -webkit-mask: linear-gradient(115deg, transparent 20%, #000 40%, #000 60%, transparent 80%); mask: linear-gradient(115deg, transparent 20%, #000 40%, #000 60%, transparent 80%); }
.card.duel.rar-rara .art::after { background: linear-gradient(110deg, transparent 38%, #cfe9ff33 46%, #ffffffaa 50%, #cfe9ff33 54%, transparent 62%); }

/* Lendária: rainbow foil (arco-íris largo) + prismatic foil (estilhaços de prisma). */
.card.duel.rar-lendaria { --b1: color-dodge; --o1: .24; --b2: overlay; --o2: 1; }
.card.duel.rar-lendaria .art::before { background: repeating-conic-gradient(from 10deg at 50% 50%, #ffffff40 0 3deg, transparent 3deg 11deg), linear-gradient(115deg, #ff4d6d, #ffb84d 12%, #f6ff4d 22%, #4dff9a 34%, #4dd2ff 46%, #9a4dff 58%, #ff4dd8 70%, #ff4d6d 82%, #ffb84d 94%); }
.card.duel.rar-lendaria .art::after { background: linear-gradient(110deg, transparent 36%, #fff3c433 45%, #ffffffcc 50%, #fff3c433 55%, transparent 64%); }

/* Collector: foil iridescente, o mais exagerado (película rosa, violeta, ciano e dourado, purpurina e reflexo duplo). */
.card.duel.rar-collector { --b1: color-dodge; --o1: .36; --b2: overlay; --o2: 1; }
.card.duel.rar-collector .art::before { animation-duration: 5s;
  background: radial-gradient(circle, #ffffffd0 0 .6px, transparent 1.4px) 0 0 / 13px 13px, radial-gradient(circle, #ffe9fa 0 .5px, transparent 1.2px) 6px 7px / 19px 19px,
    linear-gradient(125deg, #ff7ad9, #7a3cff 14%, #5fd6cf 28%, #ffd36b 42%, #ff7ad9 56%, #7a3cff 70%, #5fd6cf 84%, #ffd36b); }
.card.duel.rar-collector .art::after { animation-duration: 3.6s;
  background: linear-gradient(110deg, transparent 30%, #ff7ad944 42%, #ffffffdd 48%, #5fd6cf66 52%, #ffd36b44 56%, transparent 68%), linear-gradient(110deg, transparent 70%, #ffffff55 74%, transparent 78%); }
.card.duel.rar-collector .cardText { background: linear-gradient(120deg, #ff7ad914, #7a3cff12 35%, #5fd6cf12 65%, #ffd36b14), linear-gradient(180deg, #211b2680, #17131d); }

/* Na arena o acabamento fica mais fraco, para o combate continuar legível.
   Na arena nada anima sozinho (10 cartas com camadas de blend animadas derrubavam o quadro de 60 para ~33 por segundo no teste):
   a película fica parada e o reflexo só aparece na carta sob o mouse. */
.arena .card.duel .art::before, .arena .card.duel .art::after { animation: none; }
.arena .card.duel:not(:hover):not(.depth-active) .art::after { opacity: 0; }
.arena .card.duel.zone-used .art::before, .arena .card.duel.zone-used .art::after { display: none; }
/* Carta ainda bloqueada na coleção: a raridade aparece, sem brilho. */
.colGrid .card.duel.locked .art::before, .colGrid .card.duel.locked .art::after { display: none; }

@keyframes foilDrift { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
@keyframes foilSweep { 0%, 55% { transform: translateX(-34%); opacity: 0; } 60%, 95% { opacity: calc(var(--o2, 1) * .6); } 100% { transform: translateX(34%); opacity: 0; } }

/* Verso da carta no booster: o brilho já entrega um pouco da raridade */
.poCard.rt-rara .poBack { animation: hintPulse 1.8s ease-in-out infinite; box-shadow: 0 0 22px color-mix(in srgb, var(--r) 55%, transparent); }
.poCard.rt-lendaria .poBack { animation: hintPulse 1s ease-in-out infinite; border-color: var(--r); box-shadow: 0 0 34px var(--r); }
.poCard.rt-collector .poBack { animation: hintPulse .7s ease-in-out infinite; border-color: var(--r); box-shadow: 0 0 40px #ff7ad9, 0 0 70px #7a3cff88; }
.poCard.flipped .rarityTag { color: var(--r); text-shadow: 0 0 12px var(--r); }
.poCard.rt-collector.flipped .rarityTag { background: linear-gradient(100deg, #ff7ad9, #ffd36b, #5fd6cf, #ff7ad9); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: holoSlide 2s linear infinite; font-size: 18px; }
.poCard.rt-comum.isNew::before { opacity: .3; }

@property --holo { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes holoSpin { to { --holo: 360deg; } }
@keyframes holoSlide { to { background-position: 300% 0; } }

@media (prefers-reduced-motion: reduce) {
  .rarTag.rt-collector, .card.duel.rar-collector, .card.duel .art::before, .card.duel .art::after, .poCard .poBack, .poCard .rarityTag { animation: none !important; }
  .card.duel .art::after { opacity: 0; }
}
.reduced .rarTag.rt-collector, .reduced .card.duel.rar-collector, .reduced .card.duel .art::before, .reduced .card.duel .art::after, .reduced .poCard .poBack, .reduced .poCard .rarityTag { animation: none !important; }
.reduced .card.duel .art::after { opacity: 0; }

/* Correção das faixas verticais pretas nas laterais do foil ao balançar a carta (Leo, 05/10/2026): as camadas do foil têm 300% de largura e usam
   mix-blend-mode; sem isolamento, a mistura pegava o fundo escuro fora da arte e o 3D da inclinação deixava as bordas da camada aparecerem como
   faixas pretas. A arte agora é um grupo isolado e recortado: o foil mistura só com a própria arte. */
.card.duel .art { isolation: isolate; contain: paint; }
.card.duel.rar-rara .art::before, .card.duel.rar-rara .art::after { backface-visibility: hidden; }