/* Emblema do clã na carta: FONTE ÚNICA de tamanho e posição (Leo, 05/10/2026: "altere em TODOS os lugares").
   Vale para toda carta (combate, mão, coleção, ficha, Coleção PRO, booster, Novas Cartas, mercado, site e admin).
   Para mudar, edite só as variáveis abaixo; não coloque tamanho/posição do emblema em outro CSS.
   Os ícones da cabeça de ficha/seleção (.inspHead, .pickHead) não são da carta e têm tamanho próprio. */
:root {
  --clanBase: 19cqw;   /* lado do emblema padrão (sem imagem própria), em % da largura da carta */
  --clanScale: 1;        /* multiplicador dos clãs com imagem própria enviada no admin (a imagem já é cortada e centralizada) */
  --clanUp: 0cqw;       /* sobe o emblema por cada +1 de escala (0: ele fica inteiro dentro da carta, sem ser cortado pela borda) */
  --clanRight: 0cqw;   /* distância da borda direita da carta (nunca negativo: a carta corta o que passa da borda) */
  --clanTop: 0cqw;     /* 0 = colado no topo da carta, na altura da plaqueta do nome (a plaqueta tem ~11cqw) */
}
:root:root :is(.card.duel, .card, .newCard) .clanIcon {
  top: var(--clanTop) !important; right: var(--clanRight) !important; left: auto !important; bottom: auto !important; translate: none !important;
  margin-top: calc((var(--clanK, 1) - 1) * -1 * var(--clanUp)) !important;
  width: calc(var(--clanBase) * var(--clanK, 1)) !important; height: calc(var(--clanBase) * var(--clanK, 1)) !important;
  min-width: calc(15px * var(--clanK, 1)) !important; min-height: calc(15px * var(--clanK, 1)) !important;
}
/* o nome da carta deixa folga para o emblema, qualquer que seja o tamanho dele */
:is(#colGrid, #colInspect, #pickDialog, #cardInfo, .poFront, .cxCard, #pickCard, .ciCard, .duelHand, .duelFighter, .newCard, .tc, .gc) .card.duel .art h4.cardName {
  padding-inline: max(11cqw, calc(var(--clanBase) * var(--clanK, 1) * .72)) !important;
}

/* Referências ao clã em listas, filtros, etiquetas e títulos (.clanDot): usam o mesmo ícone enviado no admin.
   Clãs sem imagem continuam como bolinha colorida. As variáveis --clanImg/--clanDotBg/--clanDotK vêm do CSS por clã
   gerado ao carregar o catálogo (online.js no jogo, site.js no site). */
.clanDot {
  display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 5px;
  background-color: var(--clanDotBg, var(--clan, #e8c98b));
  background-image: var(--clanImg, radial-gradient(circle at 35% 30%, #fff8, transparent 42%));
  background-position: center; background-repeat: no-repeat; background-size: contain;
  scale: var(--clanDotK, 1);
}

/* Medalhão do emblema: a moldura é a arte do Leo (assets/moldura-cla.webp, aro dourado com 4 estrelas), com o fundo branco
   no furo e o ícone do clã por cima do fundo e por baixo da moldura. Camadas, de cima para baixo: moldura, ícone, fundo neon.
   O furo da moldura ocupa ~46% da largura: o ícone fica a 54% e o fundo branco num círculo de 46%. */
:root:root :is(.card.duel, .card, .newCard) .clanIcon {
  background:
    url('assets/moldura-cla.webp') 50% 50% / 100% 100% no-repeat,
    var(--clanImg, none) 50% 50% / 64% auto no-repeat,
    radial-gradient(circle at 50% 50%, #ffffff 0, #ffffff 46%, transparent 46.8%) 50% 50% / 100% 100% no-repeat !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; box-sizing: border-box;
  filter: drop-shadow(0 0 calc(var(--clanBase) * .12) color-mix(in srgb, var(--clan, #e8c98b) 85%, transparent)) !important; opacity: 1 !important;
  background-origin: padding-box !important; background-repeat: no-repeat !important;
}

/* O medalhão aparece em TODA carta do jogo (mão, campo, resultado, coleção, ficha, loja, booster, Novas Cartas, mercado,
   Coleção PRO, evolução, site, admin e a página pública /carta/ID), não só onde o CSS antigo o mostrava. */
:root:root :is(.card.duel, .card, .newCard) .clanIcon { display: block !important; position: absolute !important; z-index: 6; pointer-events: none; }