/* Notificações globais (src/shared/notificacoes.js). Fila fixa que não recebe clique nem bloqueia nada.
   Celular: topo, centralizada, abaixo da HUD. Tablet/desktop: canto superior direito, abaixo do menu.
   Cada página ajusta a altura com --notificacoes-topo (mundo: hud.css; Lojinha: lojinha.css). */

.notificacoes {
  position: fixed; z-index: 40; top: var(--notificacoes-topo, 16px); left: 50%; transform: translateX(-50%);
  width: min(22rem, calc(100% - 32px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.notificacao {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 11px 14px 11px 11px;
  border: 1px solid rgb(var(--color-text-rgb) / .08); border-radius: 18px; color: var(--ink);
  background: rgb(255 253 252 / .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 2px 6px rgb(var(--color-text-rgb) / .05), 0 14px 36px rgb(var(--color-text-rgb) / .1);
  animation: notificacao-entrar .28s ease-out both;
  transition: opacity .32s ease, transform .32s ease;
}
.notificacao.is-saindo { opacity: 0; transform: translateY(-6px); }

.notificacao-icone {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 1.05rem; line-height: 1;
  background: rgb(var(--color-text-rgb) / .05);
}
.is-gain .notificacao-icone, .is-achievement .notificacao-icone { background: rgba(228, 193, 112, .3); box-shadow: inset 0 0 0 1px rgba(181, 140, 60, .18); }
.is-insufficient .notificacao-icone, .is-error .notificacao-icone, .is-denied .notificacao-icone { background: var(--color-danger-soft); color: var(--color-danger); font: 600 1rem var(--font-sans); }
/* Progressão: XP e nível em dourado claro; desbloqueio, compra e traje em tons calmos. */
.is-xp .notificacao-icone, .is-level .notificacao-icone { background: rgba(228, 193, 112, .3); box-shadow: inset 0 0 0 1px rgba(181, 140, 60, .18); }
.is-level .notificacao-titulo, .is-xp .notificacao-titulo { color: #6f531c; }
.is-unlock .notificacao-icone, .is-success .notificacao-icone { background: var(--color-success-soft); }
.is-purchase .notificacao-icone, .is-equip .notificacao-icone, .is-info .notificacao-icone { background: var(--color-bg-secondary); }
.is-care .notificacao-icone { background: var(--color-primary-tint); }
.is-boost .notificacao-icone { background: rgba(228, 193, 112, .3); box-shadow: inset 0 0 0 1px rgba(181, 140, 60, .18); }
.is-boost .notificacao-titulo { color: #6f531c; }
.is-journey .notificacao-icone { background: var(--color-primary-tint); box-shadow: inset 0 0 0 1px rgb(var(--color-primary-rgb) / .25); }
.is-journey .notificacao-destaque { color: var(--color-primary-ink); }
.is-purchase .notificacao-destaque { color: var(--suave, var(--color-text-secondary)); }

.notificacao-corpo { min-width: 0; }
.notificacao-corpo p { margin: 0; }
.notificacao-titulo { font: 500 .92rem/1.3 var(--font-sans); font-variant-numeric: tabular-nums; }
.is-gain .notificacao-titulo { color: #6f531c; }
.notificacao-destaque { margin-top: 1px !important; font: 500 .85rem/1.3 var(--font-sans); color: #7d5f22; }
.notificacao-texto { margin-top: 2px !important; font-size: .8rem; line-height: 1.4; color: var(--suave, var(--color-text-secondary)); }
.notificacao-rodape { margin-top: 4px !important; font: .6rem var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--suave, var(--color-text-secondary)); }

@keyframes notificacao-entrar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Celular: mais compacta; o saldo já aparece na carteira logo acima. */
@media (max-width: 639px) {
  .notificacoes { gap: 6px; }
  .notificacao { gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; }
  .notificacao-icone { width: 30px; height: 30px; font-size: .9rem; }
  .notificacao-titulo { font-size: .86rem; }
  .notificacao-destaque { font-size: .8rem; }
  .notificacao-texto { margin-top: 0 !important; font-size: .76rem; }
  .notificacao-rodape { display: none; }
}
@media (min-width: 640px) {
  .notificacoes { left: auto; right: var(--notificacoes-direita, 24px); transform: none; width: 19.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .notificacao { animation-name: notificacao-aparecer; }
  .notificacao.is-saindo { transform: none; }
  @keyframes notificacao-aparecer { from { opacity: 0; } to { opacity: 1; } }
}