/* Notification toasts. Shared by the tracker and the TCG page; the markup
   is created on demand by toast.js, so neither page needs a #toast div. */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--bg3, #161b26);
  border: 1px solid var(--border2, #2a2f3a);
  border-left: 3px solid var(--text3, #8b90a0);
  color: var(--text, #e6e8ee);
  font-size: 0.8rem;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 9999;
  /* Was nowrap with no max-width, so a two-sentence toast ran off the
     screen on mobile. Short toasts are unaffected by the cap. */
  max-width: min(90vw, 400px);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast-icon {
  flex-shrink: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 700;
  color: var(--text3, #8b90a0);
}
.toast-msg { min-width: 0; }

/* Type accents. The icon and the left border carry the tone, so message
   text needs no emoji or exclamation marks. */
#toast.toast--success { border-left-color: var(--green, #4ade80); }
#toast.toast--success .toast-icon { color: var(--green, #4ade80); }
#toast.toast--error   { border-left-color: var(--red, #f87171); }
#toast.toast--error   .toast-icon { color: var(--red, #f87171); }
#toast.toast--info    { border-left-color: var(--gold, #e8b84b); }
#toast.toast--info    .toast-icon { color: var(--gold, #e8b84b); }