/* Toast — bottom-centre note; add .is-visible to show.
   Markup: <div class="toast-stack"><div class="toast toast--success is-visible">
             <svg class="toast__icon">…</svg><div class="toast__text"><b>Captured</b> Black takes a piece.</div></div></div> */

.toast-stack {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--space-5) + var(--safe-bottom));
  z-index: 1100;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: min(100%, var(--toast-w));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--wood-900);
  border-left: 4px solid var(--gold-500);
  background: var(--surface-wood-dark);
  background-color: var(--wood-800);
  color: var(--fg-on-dark);
  box-shadow: var(--shadow-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(var(--space-3)) scale(0.98);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-spring);
}
.toast.is-visible { opacity: 1; transform: none; }
.toast__icon { width: var(--icon-size); height: var(--icon-size); flex: none; fill: currentColor; color: var(--gold-300); }
.toast__text { flex: 1; min-width: 0; }
.toast__text b { color: var(--fg-on-dark); font-weight: var(--fw-semibold); }
.toast__text { color: var(--cream-300); }
.toast .btn { margin-left: auto; }

.toast--success { border-left-color: var(--success-500); }
.toast--success .toast__icon { color: var(--success-100); }
.toast--warning { border-left-color: var(--warning-500); }
.toast--warning .toast__icon { color: var(--warning-100); }
.toast--danger { border-left-color: var(--danger-500); }
.toast--danger .toast__icon { color: var(--danger-100); }

/* Reward toast — parchment with gold trim, for achievements */
.toast--reward {
  background: var(--surface-parchment);
  background-color: var(--parchment-50);
  color: var(--fg);
  border: 1px solid var(--gold-500);
  border-left-width: 4px;
  box-shadow: 0 0 0 1px var(--gold-200) inset, var(--shadow-3);
}
.toast--reward .toast__icon { color: var(--gold-500); }
.toast--reward .toast__text { color: var(--fg); }
.toast--reward .toast__text b { color: var(--fg-strong); }