/* toast.css — Toasts (XP, logros, nivel) y confeti. */

#toast-stack {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  display: grid;
  gap: var(--space-2);
  justify-items: end;
  pointer-events: none;
}
/* En móvil, por encima de la bottom-nav. */
@media (max-width: 560px) {
  #toast-stack {
    left: var(--space-4);
    bottom: calc(var(--bottom-nav-h) + var(--space-3) + env(safe-area-inset-bottom, 0px));
    justify-items: stretch;
  }
}

.toast {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--paper);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  border-left: 5px solid var(--brand);
  box-shadow: var(--shadow-ink);
  transform: skewX(calc(var(--skew) / 2));
  animation: toast-in 320ms var(--ease-snap);
  max-width: 340px;
}
.toast-out {
  animation: toast-out 280ms var(--ease) forwards;
}

.toast-xp {
  background: var(--brand);
  color: #fff;
  border-left-color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  letter-spacing: 0.03em;
}

.toast-level {
  background: var(--yellow);
  color: var(--ink);
  border-left-color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
}

.toast-achievement {
  background: var(--paper);
  color: var(--ink);
  border-left-color: var(--yellow);
}
.toast-ach-icon {
  font-size: 1.8rem;
}
.toast-ach-body {
  display: grid;
  line-height: 1.3;
}
.toast-ach-body b {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--brand-deep);
}
.toast-ach-body small {
  color: rgba(19, 26, 41, 0.65);
  font-weight: var(--fw-regular);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: skewX(calc(var(--skew) / 2)) translateX(40px);
  }
  to {
    opacity: 1;
    transform: skewX(calc(var(--skew) / 2)) translateX(0);
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    transform: skewX(calc(var(--skew) / 2)) translateY(8px);
  }
}

/* ---- Confeti ---- */
.confetti-box {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  overflow: hidden;
}
.confetti-box i {
  position: absolute;
  top: -14px;
  width: 9px;
  height: 13px;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(105vh) translateX(calc(var(--drift, 0) * 120px)) rotate(560deg);
    opacity: 0.7;
  }
}