/* Ícones dos clãs nas cartas do combate (Leo, 01/10/2026).
   No combate o NOME do clã some da carta e entra um emblema no canto superior direito (.clanIcon, criado em card() do ui.js).
   Fora do combate (coleção, loja) a carta continua como era: o emblema fica escondido e o nome do clã aparece.
   O emblema mostra a cor do clã (--clan, de collection.css). "Clã ativo" = anel brilhante; inativo = apagado.

   COMO COLOCAR OS ÍCONES FINAIS: salve a arte em assets/clas/<chave>.webp (ou .png), com fundo transparente e quadrada,
   e descomente/adicione a linha do clã no fim deste arquivo. Chaves: corte, horizonte, oficina, orquestra, bosque, expedicao. */

/* Cor de cada clã na carta (mesma paleta dos pontinhos da coleção; --clan só existia em .clanDot). */
.card.clan-corte { --clan: #e2607d; } .card.clan-horizonte { --clan: #6fb6f0; } .card.clan-oficina { --clan: #e9b35a; }
.card.clan-orquestra { --clan: #c79af5; } .card.clan-bosque { --clan: #7fd68f; } .card.clan-expedicao { --clan: #5fd6cf; }

.card.duel .clanIcon { display: none; }
:is(.duelHand, .duelFighter, .ciCard) .card.duel .clanIcon {
  display: block; position: absolute; z-index: 3;
  border-radius: 50%; pointer-events: auto;
  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(--clanShadow, 0 2px 6px #000a, inset 0 -2px 3px #0006);
  filter: grayscale(.55) brightness(.8);
  transition: filter .25s, box-shadow .25s, transform .25s;
}
/* Clã ativo (2 ou mais cartas do clã): colorido, com anel e brilho. */
:is(.duelHand, .duelFighter, .ciCard) .card.duel .clanIcon.on {
  filter: none; box-shadow: var(--clanShadowOn, 0 0 0 2px #fff9, 0 0 12px var(--clan, #e8c98b), 0 2px 6px #000a);
}
/* O nome do clã sai da carta no combate. */
:is(.duelHand, .duelFighter, .ciCard) .card.duel .cardText > small.clanName { display: none !important; }
/* O selo de estado (VOCÊ, A CORTE, VENCEU…) desce para não ficar embaixo do emblema. */
:is(.duelHand, .duelFighter, .ciCard) .card.duel .art .state { top: 13cqw; right: 2.6cqw; }
/* O nome da carta fica centralizado, com folga dos dois lados para não encostar no emblema. */
:is(.duelHand, .duelFighter, .ciCard) .card.duel .art h4.cardName { padding-inline: max(11cqw, calc(8.4cqw * var(--clanK, 1) + 2cqw)); }
@media (prefers-reduced-motion: reduce) { :is(.duelHand, .duelFighter, .ciCard) .card.duel .clanIcon { transition: none; } }

/* ---- ÍCONES FINAIS (descomente quando os arquivos existirem em assets/clas/) ----
.clan-corte     { --clanImg: url('assets/clas/corte.webp');     --clanBorder: 0 solid transparent; --clanShadow: drop-shadow(0 2px 4px #000a); --clanShadowOn: none; }
.clan-horizonte { --clanImg: url('assets/clas/horizonte.webp'); --clanBorder: 0 solid transparent; --clanShadow: none; --clanShadowOn: none; }
.clan-oficina   { --clanImg: url('assets/clas/oficina.webp');   --clanBorder: 0 solid transparent; --clanShadow: none; --clanShadowOn: none; }
.clan-orquestra { --clanImg: url('assets/clas/orquestra.webp'); --clanBorder: 0 solid transparent; --clanShadow: none; --clanShadowOn: none; }
.clan-bosque    { --clanImg: url('assets/clas/bosque.webp');    --clanBorder: 0 solid transparent; --clanShadow: none; --clanShadowOn: none; }
.clan-expedicao { --clanImg: url('assets/clas/expedicao.webp'); --clanBorder: 0 solid transparent; --clanShadow: none; --clanShadowOn: none; }
*/