/* Ícones de Ouro e Diamante (arte enviada pelo Leo, 01/10/2026). Carregado por último: troca o desenho antigo (círculo e losango em CSS)
   pelas imagens assets/moeda.webp e assets/diamante.webp em todo lugar que usa .coin e .gem, sem mexer no HTML de cada tela. */
:root { --iconCoin: url('assets/moeda.webp'); --iconGem: url('assets/diamante.webp'); }
.coin, .gem {
  color: transparent !important; text-shadow: none; font-size: .8em; width: 1.5em; height: 1.5em; flex: none;
  border-radius: 0; box-shadow: none; clip-path: none;
  background: center / contain no-repeat var(--iconCoin); filter: drop-shadow(0 2px 3px #0009);
}
.gem { background-image: var(--iconGem); font-size: .8em; filter: drop-shadow(0 0 5px #6fd3f5aa) drop-shadow(0 2px 3px #0009); }
.coin.dim { filter: grayscale(.8) brightness(.7); }
/* Moedas e diamantes que voam até o contador. */
.flyCoin, .flyCoin.gem { display: block; width: 26px; height: 26px; font-size: 0; color: transparent; text-shadow: none; clip-path: none; background: center / contain no-repeat var(--iconCoin); filter: drop-shadow(0 0 6px #ffd36baa); }
.flyCoin.gem { background-image: var(--iconGem); filter: drop-shadow(0 0 6px #6fd3f5aa); }
/* Pilha de diamantes dos pacotes (--n diamantes). */
.gemStack { display: block; width: calc(var(--n, 1) * 30px); height: 34px; margin-inline: auto; font-size: 0; letter-spacing: 0; color: transparent; text-shadow: none;
  background: left center / 30px 34px repeat-x var(--iconGem); filter: drop-shadow(0 0 8px #6fd3f5aa); }
/* Nos textos corridos (botões, recompensas) o ícone acompanha a altura da letra. */
:is(button, b, span, small, p) > i.coin, :is(button, b, span, small, p) > i.gem { display: inline-block; vertical-align: -.3em; width: 1.2em; height: 1.2em; }