/* MindTCG · ícones próprios (família mtg-*) — caixa 256, traço 16, cantos/pontas redondos.
   Uso: <svg class="mtg-ic" aria-hidden="true"><use href="#mtg-estoque" xlink:href="#mtg-estoque"/></svg>
   O tamanho segue o font-size (1em), a cor segue `color` (currentColor) — igual ao <i class="ph">. */
.mtg-ic {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  overflow: visible;
}
/* Ponto de ouro (cerebelo): por padrão acompanha a cor do ícone; ouro só em destaque.
   Custom property atravessa o <use> (também no Safari 12). */
.ic-ponto { fill: var(--mtg-ponto, currentColor); }
.mtg-ic--ouro { --mtg-ponto: #F2B632; }
.mtg-ic--sem-ponto { --mtg-ponto: transparent; }
/* item ativo do menu: ponto em ouro */
.is-active .mtg-ic, [aria-current="page"] .mtg-ic { --mtg-ponto: #F2B632; }
/* giro do botão (mtg-carregando): <svg class="mtg-ic mtg-ic--gira"> */
@keyframes mtg-gira { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.mtg-ic--gira { -webkit-animation: mtg-gira .9s linear infinite; animation: mtg-gira .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .mtg-ic--gira { -webkit-animation: none; animation: none; } }

/* ---- Adições do código (etapa 6 da marca v2, 01/11/2026) — não fazem parte do pacote do designer ---- */
/* Equivalente ao peso "fill" do Phosphor (estrela de favorito marcada, bolinhas de status): o desenho
   ganha preenchimento na cor do ícone. A regra casa com o <g> do sprite e a variável atravessa o <use>
   (mesmo mecanismo do --mtg-ponto acima). Sem a classe, nada muda (fill: none). */
symbol[id^="mtg-"] > g { fill: var(--mtg-fill, none); }
.mtg-ic--cheio { --mtg-fill: currentColor; }
/* O clique cai no <svg> (e no botão em volta), nunca no <use> interno: e.target.closest(...) e
   dataset continuam funcionando como no <i> do Phosphor. */
.mtg-ic use { pointer-events: none; }
/* O <i> do Phosphor não tinha largura própria: padding (ex.: .sx-cs-btn .car) somava por fora do glifo. O SVG tem
   1em × 1em; com content-box o padding continua somando por fora, em vez de espremer o desenho (o Tailwind põe
   border-box em tudo). */
svg.mtg-ic { box-sizing: content-box; }   /* (0,1,1): ganha de ".sx *" e do "*" do Tailwind */
/* Ponto do item ATIVO do menu: o pacote pede ouro (regra acima), mas hoje o ativo já leva o filete dourado e a
   regra do dourado do dono é "um ouro por bloco" — AGUARDA o dono (CLAUDE.md: conflito com o que o sistema faz
   hoje = perguntar antes). Até lá o ponto acompanha a cor do ícone. Para ligar o ouro, apague esta regra. */
.is-active .mtg-ic, [aria-current="page"] .mtg-ic { --mtg-ponto: currentColor; }