/* src/ui-toast-loot.css
 * UI-FEEDBACK-10 (#2792) — Loot toast styles.
 * Slides in from right; upper-right fixed stack.
 * Structural only — visual tokens deferred to Sprint 3B.
 */

/* ── Container ────────────────────────────────────────────────────────────── */

/* LOOT-TOAST-PLACEMENT-01 #3443: moved off the dead bottom-right corner into the
 * upper-third right side (foveal/parafoveal zone) so transient loot/salvage
 * feedback is actually seen — the eye is locked center-screen on the avatar, not
 * the bottom corner (2026 game-HUD research). Stacks DOWNWARD from the anchor.
 * Panel-aware anchoring (hug an open panel's right gutter) is a v2 follow-up. */
#loot-toast-container {
  position: fixed;
  top: 26%;            /* upper third — in the line of sight, off the bottom corner */
  right: 2vw;          /* right side, slightly inward toward the panel/centre */
  z-index: 400;        /* Z_MODAL tier — above panels */
  display: flex;
  flex-direction: column;   /* newest stacks below; never grows off-screen-top */
  gap: 6px;
  pointer-events: none;
  max-width: 280px;
}

/* ── Individual card ──────────────────────────────────────────────────────── */

.loot-toast {
  background: rgba(10, 10, 20, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  color: #e2e8f0;
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.loot-toast--visible {
  opacity: 1;
  transform: translateX(0);
}

.loot-toast--leaving {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ── Source label ─────────────────────────────────────────────────────────── */

.loot-toast__source {
  font-size: 10px;
  color: #94a3b8;
  margin-bottom: 4px;
}

/* ── Item row ─────────────────────────────────────────────────────────────── */

.loot-toast__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border-left: 3px solid transparent;
  padding-left: 6px;
}

.loot-toast__name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Quality tier accent borders ──────────────────────────────────────────── */

.loot-toast__tier--common   { border-left-color: #64748b; }
.loot-toast__tier--uncommon { border-left-color: #4caf50; }
.loot-toast__tier--rare     { border-left-color: #2196f3; }
.loot-toast__tier--epic     { border-left-color: #9c27b0; }

/* ── Quantity badge ───────────────────────────────────────────────────────── */

.loot-toast__qty {
  font-size: 11px;
  color: #94a3b8;
  flex-shrink: 0;
}

/* ── First-encounter badge ────────────────────────────────────────────────── */

.loot-toast__new {
  font-size: 9px;
  font-weight: 700;
  color: #fbbf24;
  border: 1px solid #fbbf24;
  border-radius: 2px;
  padding: 0 3px;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}