/* ATAQUE e DANO com fundo próprio (pedido do gab, 01/10/2026): ataque em âmbar, dano em carmim.
   Vale para toda carta (coleção, mão e cena do combate) e para o modal de escolha. Só estilo; carregar por último. */
:root{--atkBg:linear-gradient(180deg,#ffd77a,#e0a43a 55%,#a86c17);--atkInk:#2a1606;--atkEdge:#ffe7a8;--dmgBg:linear-gradient(180deg,#f0566a,#c22541 55%,#7e1128);--dmgInk:#fff4f2;--dmgEdge:#ff9aa8}
.card .cardStats{gap:6px}
.card .cardStats .atk,.card .cardStats .dmg,.pickNumbers .atk,.pickNumbers .dmg{border-radius:9px;padding:4px 9px 5px;line-height:1.05;text-shadow:none;box-shadow:inset 0 1px 0 #ffffff59,0 2px 6px #0008}
.card .cardStats .atk,.pickNumbers .atk{background:var(--atkBg);color:var(--atkInk);border:1px solid var(--atkEdge)}
.card .cardStats .dmg,.pickNumbers .dmg{background:var(--dmgBg);color:var(--dmgInk);border:1px solid var(--dmgEdge)}
.card .cardStats .atk small,.pickNumbers .atk small{color:#4a2b0c;opacity:.85}
.card .cardStats .dmg small,.pickNumbers .dmg small{color:#ffd9de;opacity:.9}
.card .cardStats .dmg{text-align:right}
/* Cartas pequenas da mão e da cena: selo compacto, proporcional à carta. */
:is(.duelHand, .duelFighter, .ciCard) .card.duel .cardStats .atk,:is(.duelHand, .duelFighter, .ciCard) .card.duel .cardStats .dmg{padding:1.4cqw 3cqw 1.6cqw;border-radius:2.6cqw}
/* Modal: selos lado a lado com o rótulo embaixo do número. */
.pickNumbers .atk,.pickNumbers .dmg{padding:7px 12px 8px;min-width:76px;border-radius:12px}

/* Layout da carta (pedido do gab, 01/10/2026): nome centralizado no topo da arte; estrelas no centro, entre ATAQUE e DANO;
   fontes de estrelas, ataque e dano um pouco maiores. */
.card.duel .art h4.cardName{display:block;position:absolute;z-index:2;top:0;left:0;right:0;margin:0;min-height:0;padding:3cqw 6cqw 7cqw;text-align:center;
 font:700 max(12px,7.6cqw)/1.15 Georgia,serif;color:#fff6e3;text-shadow:0 1px 3px #000,0 0 10px #000;background:linear-gradient(180deg,#0b0810e6 0%,#0b0810a6 55%,transparent);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
#colGrid .card.duel .art h4.cardName{font-size:max(15px,8cqw);padding-top:4cqw}
.card.duel .art .state{top:13cqw;right:4cqw}
#colGrid .card.duel .art .state{top:auto;bottom:4cqw}
@media(max-width:760px){.card.duel .art .state{top:calc(13px + 4cqw)}}
/* Fileira ATAQUE / estrelas / DANO. As estrelas encolhem conforme o máximo do personagem (--n) para a fileira sempre caber na carta. */
.card .cardStats{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"a s d";align-items:center;column-gap:2cqw}
.card .cardStats :is(.atk,.dmg){white-space:nowrap}
.card .cardStats .ico{font-style:normal}
.card .cardStats .atk{grid-area:a;justify-self:start}.card .cardStats .dmg{grid-area:d;justify-self:end}
.card.duel .cardStats :is(.atk,.dmg){font-size:clamp(12px,9cqw,26px);padding:1.2cqw 2.6cqw 1.4cqw;border-radius:2.6cqw}
#colGrid .card.duel .cardStats :is(.atk,.dmg),.poFront .card.duel .cardStats :is(.atk,.dmg){font-size:clamp(11px,8.4cqw,24px)}
.card.duel .cardStats .stars{grid-area:s;justify-self:center;min-width:0;display:flex;flex-direction:column;align-items:center;position:static;line-height:1;letter-spacing:0;
 padding:1.2cqw 1.6cqw;border-radius:2.4cqw;background:#15101ed9;border:1px solid #e8c98b40;text-shadow:none;font-size:min(6.6cqw,calc(26cqw / var(--n,5)))!important}
.card.duel .cardStats .stars b{display:flex;gap:.04em;font-weight:400;white-space:nowrap}
.card.duel .cardStats .stars small{display:none}
:is(.duelHand, .duelFighter, .ciCard) .card.duel .cardStats{left:3cqw;right:3cqw;display:grid;align-items:center}
:is(.duelHand, .duelFighter, .ciCard) .card.duel .cardStats .stars{font-size:min(8cqw,calc(33cqw / var(--n,5)))!important}

/* Estrela completa (pedido do gab, 01/10/2026): as conquistadas são douradas, metálicas, com brilho e um pulso leve em sequência;
   as que faltam até o máximo ficam vazadas. Evolução no máximo ganha um halo a mais. */
.stars .st{font-size:inherit!important;font-weight:400!important;line-height:1;display:inline-block;color:transparent;-webkit-text-stroke:.075em #cdb88c99;text-shadow:none}
.stars .st.on{-webkit-text-stroke:0;background:linear-gradient(160deg,#fffbe0 0%,#ffe08a 28%,#f2b33d 52%,#fff0b8 70%,#c4801a 100%);background-size:100% 240%;
 -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 .12em #ffc94dcc);animation:starFull 3.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * .18s)}
.stars.max{border-color:#ffd76a99!important;box-shadow:0 0 10px #ffc94d55,inset 0 0 6px #ffc94d33}
.stars.max .st.on{filter:drop-shadow(0 0 .16em #ffd76a) drop-shadow(0 0 .38em #ff9d2e88)}
@keyframes starFull{0%,100%{background-position:0 0;transform:scale(1)}45%{background-position:0 100%;transform:scale(1.14)}60%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.stars .st.on{animation:none}}
.reduced .stars .st.on{animation:none}

/* Modal da mana: estrelas no centro, entre os selos. */
.pickNumbers .lvl.stars{position:static;background:none;border:0;box-shadow:none;padding:0;color:inherit}
.pickNumbers .lvl{align-self:center;display:flex;flex-direction:column;align-items:center;font-size:27px}
.pickNumbers .lvl b{display:flex;gap:2px;font-size:22px;font-weight:400}
.pickNumbers .lvl small{white-space:nowrap}
.pickNumbers span{font-size:27px}
/* Carta bem estreita (mão no celular): as estrelas sobem para uma linha própria, centralizada sobre ATAQUE e DANO. */
@container (max-width:110px){
 .card.duel .cardStats,:is(.duelHand, .duelFighter, .ciCard) .card.duel .cardStats{grid-template-columns:auto 1fr auto;grid-template-areas:"s s s" "a . d";row-gap:2px;align-items:end}
 .card.duel .cardStats .stars,:is(.duelHand, .duelFighter, .ciCard) .card.duel .cardStats .stars{font-size:min(12px,calc(72cqw / var(--n,5)))!important;padding:1px 3px;max-width:100%;overflow:hidden}
 .card.duel .cardStats .ico{display:none}
}
@media(max-width:760px){
 :is(.duelHand, .duelFighter, .ciCard) .card.duel .cardStats{left:2px;right:2px}
 :is(.duelHand, .duelFighter, .ciCard) .card.duel .cardStats :is(.atk,.dmg){font-size:12px;padding:1px 4px 2px;border-radius:5px}
 .card.duel .art h4.cardName{font-size:max(10px,7.6cqw);padding:2cqw 3cqw 5cqw}
 .pickNumbers span{font-size:21px}.pickNumbers .lvl b{font-size:17px}
}
/* Cartas grandes (cena do duelo, coleção larga): nome longo quebra em duas linhas em vez de cortar. */
@container (min-width:200px){.card.duel .art h4.cardName{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.card.duel .art .state{top:22cqw}#colGrid .card.duel .art .state{top:auto}}
#colGrid .card.duel .art h4.cardName{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
@container (max-width:199px){#colGrid .card.duel .art .state{bottom:auto;top:25cqw}}
/* Carta estreita (booster no celular): selos sem o rótulo, para as estrelas caberem no meio. */
@container (max-width:170px){.card.duel .cardStats :is(.atk,.dmg) small{display:none}}
/* Nome sempre colado no topo da carta, igual em todas as telas (Leo, 01/10/2026): sobrescreve os ajustes por tela. */
.card.duel .art h4.cardName,#colGrid .card.duel .art h4.cardName,.poFront .card .art h4.cardName,.cxCard .card .art h4.cardName{position:absolute!important;top:0!important;bottom:auto!important;margin:0!important;padding-top:2.5cqw!important;transform:none!important;align-self:flex-start}
/* Coleção: só o ícone e o valor, sem os textos ATAQUE e DANO; o número cresce para compensar (Leo, 02/10/2026) */
#colGrid .card.duel .cardStats :is(.atk,.dmg) small{display:none}
#colGrid .card.duel .cardStats :is(.atk,.dmg){font-size:clamp(14px,11.5cqw,30px);padding:1cqw 3cqw 1.2cqw}

/* Evolução que o jogador ainda não tem (deck online): estrela apagada e sem brilho. */
.cxPips button.locked{opacity:.35;filter:grayscale(1)}

.cxAct.evo{background:linear-gradient(180deg,#ff7ab8,#d62f86)!important;color:#2a0618!important;border-color:#ff9ccc!important}