/* ═══════════════════════════════════════════════════════════════
   QUACK — Ícones do jogo (qk-)
   Desenhos em design/quack-icons/; ficheiros gerados por
   scripts/icons/build_icons.py. Não editar os .svg à mão.
   Carregar DEPOIS do Bootstrap e do style.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Cores do pacote ────────────────────────────────────────────
   Os desenhos trazem três cores-tweak do canvas, expostas como custom
   properties para poderem seguir o tema. Os valores por omissão são os da
   tela, para o ícone nunca aparecer a preto quando ninguém os define. */
:root {
    --qk-icon-duck: #FFEB1A;   /* corpo do pato */
    --qk-icon-bg:   #1D5FB5;   /* fundos e detalhes */
    --qk-icon-ring: #F5C518;   /* anéis e realces dos talentos */
}

/* ── O ícone ────────────────────────────────────────────────────
   Como .bi: tamanho pelo font-size, cor herdada do texto no conjunto de
   traço (sys-*), que é desenhado com stroke="currentColor". */
.qk {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    flex-shrink: 0;
}

/* Tamanhos fixos, iguais aos que as telas do canvas mostram. */
.qk-16 { width: 16px; height: 16px; }
.qk-20 { width: 20px; height: 20px; }
.qk-24 { width: 24px; height: 24px; }
.qk-32 { width: 32px; height: 32px; }
.qk-48 { width: 48px; height: 48px; }

/* Escalas relativas, para acompanhar o texto do sítio onde entram. */
.qk-sm { font-size: .875em; }
.qk-lg { font-size: 1.5em; }
.qk-xl { font-size: 2.25em; }

/* ── Sobre fundos de cor sólida ─────────────────────────────────
   O amarelo e o azul do pacote desaparecem sobre botões e badges cheios.
   Aí o ícone passa a usar a cor do texto, como os ícones de fonte. */
.btn:not(.btn-light):not(.btn-outline-secondary) .qk,
.badge .qk,
.text-white .qk,
.navbar-dark .qk {
    --qk-icon-duck: currentColor;
    --qk-icon-bg:   currentColor;
    --qk-icon-ring: currentColor;
}

/* ── Medalhas do ranking ────────────────────────────────────────
   Os três patos de medalha são maiores que o texto que acompanham. */
.qk-medal { width: 1.75em; height: 1.75em; vertical-align: -.35em; }