/* Efeitos da gamificação (aviso, confete, +XP) — usados no site e nos slides.
   Os avisos imitam as notificações de uma IDE. Cores de tema.css. */

.jg-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1000; display: grid; gap: 8px; justify-items: end; pointer-events: none; max-width: calc(100vw - 32px); }
.jg-toast {
  display: flex; align-items: center; gap: 12px; min-width: 260px; padding: 10px 14px 10px 10px; border-radius: var(--radius, 8px);
  background: var(--surface, #181b21); color: var(--text, #d6d9df); border: 1px solid var(--line, #2a2f38);
  border-left: 3px solid var(--accent, #4c9aff);
  box-shadow: var(--shadow-up, 0 8px 24px rgba(0, 0, 0, .35)); font: 400 13.5px/1.4 var(--font, system-ui, sans-serif);
  animation: jg-entra .25s cubic-bezier(.2, .8, .2, 1) both;
}
.jg-toast.sai { animation: jg-sai .3s ease forwards; }
.jg-toast strong { display: block; font: 600 13.5px/1.35 var(--mono, monospace); color: var(--text-strong, #f3f5f8); }
.jg-toast small { display: block; color: var(--muted, #8b929e); font-size: 12.5px; }
.jg-toast-i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-s, 6px); background: var(--surface-2, #20242c); font-size: 18px; flex: none; }
.jg-toast--conquista { border-left-color: var(--gold, #e3b341); }
.jg-toast--conquista .jg-toast-i { background: color-mix(in srgb, var(--gold, #e3b341) 18%, transparent); }
.jg-toast--nivel { border-left-color: var(--ok, #3fb950); }
.jg-toast--nivel .jg-toast-i { background: color-mix(in srgb, var(--ok, #3fb950) 18%, transparent); }

.jg-confete { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 999; }

.jg-pop {
  position: fixed; z-index: 1001; pointer-events: none; transform: translate(-50%, 0);
  font: 700 14px var(--mono, monospace); color: var(--gold, #e3b341);
  animation: jg-sobe 1s ease-out forwards;
}

@keyframes jg-entra { from { opacity: 0; transform: translateY(10px); } }
@keyframes jg-sai { to { opacity: 0; transform: translateX(20px); } }
@keyframes jg-sobe { 0% { opacity: 0; transform: translate(-50%, 0); } 20% { opacity: 1; transform: translate(-50%, -10px); } 100% { opacity: 0; transform: translate(-50%, -44px); } }

@media (prefers-reduced-motion: reduce) {
  .jg-toast, .jg-toast.sai, .jg-pop { animation-duration: .01s !important; }
}
@media print { .jg-toasts, .jg-confete, .jg-pop { display: none !important; } }