/* Carteira de cookies (src/shared/carteira-view.js), usada pela HUD do mundo e pela Lojinha.
   Só o conteúdo e as animações; o invólucro (pill, vidro, tamanho) é de cada página. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.carteira { position: relative; display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
/* Símbolo num pequeno disco dourado discreto: o cookie é a moeda. */
.carteira-simbolo {
  display: grid; place-items: center; flex: none; width: 1.55em; height: 1.55em; border-radius: 50%;
  background: rgba(228, 193, 112, .28); box-shadow: inset 0 0 0 1px rgba(181, 140, 60, .18);
  font-size: .8em; line-height: 1;
}
.carteira-valor { font: 500 1em/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.carteira-nome { font-size: .82em; color: var(--suave, var(--color-text-secondary)); }

/* "+50 🍪" / "−890 🍪": aparece logo abaixo da carteira, sobe um pouco e some. */
.carteira-delta {
  position: absolute; top: calc(100% + 6px); left: 50%; z-index: 1; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; pointer-events: none; font: 500 .78rem var(--font-sans); font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px rgb(var(--color-text-rgb) / .08); animation: carteira-delta 1.9s ease-out forwards;
}
.carteira-delta.is-ganho { background: #fbf3df; color: #7d5f22; }
.carteira-delta.is-gasto { background: var(--color-bg-secondary); color: var(--suave, var(--color-text-secondary)); }
.carteira.is-ganhou .carteira-simbolo { animation: carteira-ganhou .7s ease-out; }
.carteira.is-gastou .carteira-simbolo { animation: carteira-gastou .5s ease-out; }

@keyframes carteira-delta {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  15% { opacity: 1; transform: translate(-50%, 0); }
  70% { opacity: 1; transform: translate(-50%, -4px); }
  100% { opacity: 0; transform: translate(-50%, -12px); }
}
@keyframes carteira-delta-fixo { 0% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(-50%); } }
@keyframes carteira-ganhou { 0%, 100% { transform: none; } 35% { transform: translateY(-2px) scale(1.12); background: rgba(228, 193, 112, .5); } }
@keyframes carteira-gastou { 0%, 100% { transform: none; } 40% { transform: scale(.92); } }

@media (prefers-reduced-motion: reduce) {
  .carteira-delta { animation: carteira-delta-fixo 1.8s steps(1, end) forwards; } /* aparece parado e some, sem deslizar */
  .carteira.is-ganhou .carteira-simbolo, .carteira.is-gastou .carteira-simbolo { animation: none; }
}