/* ---------- Tier colors ---------- */
.achv-tier-bronze { --tier-color: #CD7F32; }
.achv-tier-silver { --tier-color: #C7CDD6; }
.achv-tier-gold { --tier-color: var(--gold); }
.achv-tier-diamond { --tier-color: #6FD8E8; }
.achv-tier-secret { --tier-color: #C98BF0; }
.achv-tier-daily { --tier-color: #6FE8A3; }

/* ---------- Header menu + hover/tap panel ---------- */
.achv-menu {
  position: relative;
}
.achv-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, 86vw);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
  padding: 14px 14px 16px;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms;
}
.achv-menu:hover .achv-panel,
.achv-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.achv-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.achv-panel-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0;
}
.achv-panel-count {
  font-family: var(--font-data);
  font-weight: 700;
  color: var(--felt);
  font-size: 0.85rem;
}
.achv-tier-section + .achv-tier-section { margin-top: 12px; }
.achv-tier-heading {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--tier-color, var(--ink));
  margin-bottom: 6px;
}
.achv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-radius: 8px;
  border-left: 3px solid var(--tier-color, transparent);
}
.achv-row + .achv-row { margin-top: 2px; }
.achv-row.achv-unlocked { background: rgba(0,0,0,0.03); }
.achv-row.achv-locked { opacity: 0.45; }
.achv-row-icon { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.achv-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.achv-row-name { font-size: 0.85rem; font-weight: 700; }
.achv-row-desc { font-size: 0.74rem; color: var(--ink-soft); }
.achv-row-rarity {
  font-family: var(--font-data);
  font-size: 0.68rem;
  color: var(--ink-soft);
  flex-shrink: 0;
}

/* ---------- Slide-in unlock toasts (Steam-like, card-themed) ---------- */
.achv-toast-stack {
  position: fixed;
  bottom: 22px;
  right: 18px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 100;
  pointer-events: none;
}
.achv-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 300px;
  background: linear-gradient(135deg, var(--felt-deep), var(--felt));
  border: 1px solid var(--tier-color, var(--gold));
  border-left: 5px solid var(--tier-color, var(--gold));
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
  transform: translateX(130%);
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 380ms var(--ease);
}
.achv-toast.in { transform: translateX(0); opacity: 1; }
.achv-toast.out { transform: translateX(130%); opacity: 0; }
.achv-toast-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(201,162,39,0.5));
}
.achv-toast-body { display: flex; flex-direction: column; min-width: 0; }
.achv-toast-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tier-color, var(--gold));
  font-weight: 700;
}
.achv-toast-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--cream);
  font-size: 0.98rem;
  line-height: 1.25;
}
.achv-toast-desc {
  font-size: 0.74rem;
  color: rgba(251,247,238,0.7);
}