/* Cartas padronizadas na abertura de booster, na coleção e no Collector (Leo, 02/10/2026).
   1) A arte nunca é cortada: a carta da abertura passa a ter a proporção da própria arte (2:3) e a arte ocupa a carta inteira.
   2) Nome no topo, centralizado, em até 2 linhas (nunca "…"), igual ao da página Novas Cartas.
   3) Sem o nome do clã: o emblema do clã fica no canto superior direito, como no combate.
   4) Habilidades legíveis: branco e creme sobre uma faixa escura, texto curto, até 2 linhas cada.
   Carregado depois de shop.css e cardstats.css; usa !important porque aqueles arquivos já trazem !important. */

/* ---- 1. Proporção da carta = proporção da arte (768 × 1152) ---- */
.poCard { aspect-ratio: 2 / 3 !important; }
.poFront .card.duel, .cxCard > .card.duel { display: block !important; position: relative !important; overflow: hidden !important; container-type: inline-size; }
.poFront .card.duel .art, .cxCard > .card.duel .art { position: absolute !important; inset: 0 !important; height: 100% !important; flex: none !important; background-size: 100% 100% !important; background-position: center !important; }

/* ---- 2. Nome ---- */
.poFront .card.duel .art h4.cardName, .cxCard > .card.duel .art h4.cardName {
  font: 700 max(14px, 7.6cqw)/1.12 'Grenze Gotisch', Georgia, serif !important; letter-spacing: .01em; padding: 3cqw 13cqw 8cqw !important;
  white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden !important; text-overflow: clip !important;
  color: #fff6e3; text-shadow: 0 2px 3px #000, 0 0 14px #000, 0 0 3px #000; background: linear-gradient(180deg, #0b0810f2 0%, #0b0810b8 60%, transparent) !important;
}

/* ---- 3. Emblema do clã no canto superior direito (o nome do clã some) ---- */
.poFront .card.duel .cardText > small.clanName, .cxCard > .card.duel .cardText > small.clanName { display: none !important; }
.poFront .card.duel .clanIcon, .cxCard > .card.duel .clanIcon, #colGrid .card.duel .clanIcon {
  display: block !important; position: absolute; z-index: 4; border-radius: 50%;
  background: var(--clanImg, radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--clan, #e8c98b) 45%, #fff) 0 14%, var(--clan, #e8c98b) 48%, color-mix(in srgb, var(--clan, #e8c98b) 55%, #000) 100%)) center / contain no-repeat;
  border: var(--clanBorder, 1.5px solid color-mix(in srgb, var(--clan, #e8c98b) 60%, #fff)); box-shadow: var(--clanShadowOn, 0 0 0 2px #fff9, 0 0 12px var(--clan, #e8c98b), 0 2px 6px #000a); filter: none !important; pointer-events: none;
}

/* Etiqueta de raridade logo abaixo do nome */
.poFront .card.duel .rarTag, .cxCard > .card.duel .rarTag { left: 50% !important; right: auto !important; top: 19cqw !important; bottom: auto !important; transform: translateX(-50%) !important; z-index: 3; font-size: max(9px, 3.8cqw) !important; }

/* ---- 4. Habilidades: faixa escura, texto claro e curto ---- */
.poFront .card.duel .cardText, .cxCard > .card.duel .cardText {
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; z-index: 3;
  padding: 16cqw 4cqw 3.4cqw !important; background: linear-gradient(0deg, #09070df5 0%, #09070de6 62%, transparent 100%) !important;
}
.poFront .card.duel .cardText p, .cxCard > .card.duel .cardText p {
  font: 500 max(11px, 5.5cqw)/1.3 'Alegreya Sans', system-ui, sans-serif !important; letter-spacing: 0; text-transform: none; font-style: normal !important; opacity: 1 !important;
  margin: 0 0 1.6cqw !important; text-shadow: 0 1px 2px #000; -webkit-line-clamp: 2;
}
.poFront .card.duel .cardText p.ability, .cxCard > .card.duel .cardText p.ability { color: #fff !important; }
.poFront .card.duel .cardText p.ability.locked, .cxCard > .card.duel .cardText p.ability.locked { color: #e9e1f0 !important; }
.poFront .card.duel .cardText p.clanAbility, .cxCard > .card.duel .cardText p.clanAbility { color: #ffe9b0 !important; }
.poFront .card.duel .cardStats, .cxCard > .card.duel .cardStats { margin-top: 2cqw !important; }
.poFront .card.duel .cardStats :is(.atk, .dmg), .cxCard > .card.duel .cardStats :is(.atk, .dmg) { font-size: clamp(14px, 11cqw, 30px) !important; }

@media (max-width: 760px) { .poCard { aspect-ratio: 2 / 3 !important; } }