/* ============================================================================
   LUSKI ARCADE — Achievement toast ("+N LUSKI STARS" confirmation)

   Dark HUD-chrome treatment (near-black, sharp corners, pink accent bar) --
   deliberately NOT the parchment "case file" card language used elsewhere
   (dossier.css, dialogue-box.css). This is a system confirmation, not
   content, so it borrows the nav/HUD's own visual register instead.

   Design provenance: houndarchives.com's one real toast component
   (.performance-mode-popup) slides straight up from a fixed corner with no
   bounce/scale, auto-dismissed or closed by hand, wrapped in
   aria-live="polite" -- copied here. HOUND has no stacking (single-instance
   only) and no prefers-reduced-motion handling anywhere on the site; both
   gaps are deliberately NOT repeated below.
   ============================================================================ */

.luski-toast-stack {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  pointer-events: none;
  max-width: min(320px, calc(100vw - 2rem));
}

.luski-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #0a0a0c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--accent, #f3037e);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(243, 3, 126, 0.08);
  padding: 0.7rem 0.85rem;
  opacity: 0;
}

.luski-toast__icon {
  flex: none;
  font-size: 15px;
  line-height: 1;
  color: var(--accent, #f3037e);
  margin-top: 2px;
}

.luski-toast__body {
  flex: 1 1 auto;
  min-width: 0;
}

.luski-toast__label {
  font-family: var(--arc-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.45);
}

.luski-toast__amount {
  font-family: var(--arc-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--accent, #f3037e);
  line-height: 1.3;
}

.luski-toast__reason {
  font-family: var(--arc-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.35);
  margin-top: 2px;
}

.luski-toast__close {
  flex: none;
  background: none;
  border: none;
  color: rgba(245, 245, 247, 0.4);
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}
.luski-toast__close:hover {
  color: rgba(245, 245, 247, 0.8);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes luski-toast-in {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  @keyframes luski-toast-out {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(10px); }
  }
  @keyframes luski-star-pop {
    0%   { transform: scale(0.85); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  .luski-toast.is-visible {
    animation: 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards luski-toast-in;
  }
  .luski-toast.is-hiding {
    animation: 220ms ease-in forwards luski-toast-out;
  }
  .luski-toast.is-visible .luski-toast__amount {
    animation: 260ms cubic-bezier(0.34, 1.56, 0.64, 1) 80ms both luski-star-pop;
  }
}

@media (prefers-reduced-motion: reduce) {
  .luski-toast.is-visible { opacity: 1; }
  .luski-toast.is-hiding { opacity: 0; }
}

@media (max-width: 480px) {
  .luski-toast-stack { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
}