/* ── Achievements sheet ─────────────────────────────────────────────────────
   The list opened from the trophy button (per game) or the hub (all games),
   plus the celebratory toast variant. Composes the shared sheet/eyebrow/h2. */

.ach-summary {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 2px 0 var(--space-6);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); color: var(--mute);
}
.ach-tro svg { width: 16px; height: 16px; stroke: var(--accent); vertical-align: middle; }

.ach-scroll { max-height: min(60vh, 560px); overflow-y: auto; margin: 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2); }

.ach-group { margin-bottom: var(--space-6); }
.ach-group:last-child { margin-bottom: 0; }

.ach-ghead {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.ach-ghead strong { font-size: var(--text-md); }
.ach-gic { width: 26px; height: 26px; display: grid; place-items: center; }
.ach-gic svg, .ach-gic img { width: 26px; height: 26px; border-radius: var(--radius-sm); }
.ach-gcount {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--mute); letter-spacing: var(--tracking-wide);
}

.ach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.ach {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.ach-ic { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.ach-ic svg { width: 20px; height: 20px; }
.ach-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ach-txt strong { font-size: var(--text-sm); }
.ach-txt small { font-size: var(--text-2xs); color: var(--mute); }
.ach-state { margin-left: auto; flex: none; width: 18px; }
.ach-state svg { width: 18px; height: 18px; stroke: var(--success-text); }

/* Earned: warm accent edge + solid icon; locked: dimmed. */
.ach.is-on { border-color: var(--accent-line); }
.ach.is-on .ach-ic svg { stroke: var(--accent); }
.ach.is-off { opacity: 0.62; }
.ach.is-off .ach-ic svg { stroke: var(--mute); }

/* Celebratory unlock toast: an accent-tinted variant of the base toast. */
.toast.achievement {
  border-color: var(--accent-line);
  color: var(--accent-hi);
}