/* achievements.css — the achievements panel below the board and the moment
   one is earned (achievements.js).

   The moment shares the toast's line over the stage: its element wears
   .gm-toast, so styles.css and coins.css place it, and achievements.js takes
   turns on that line with coins.js rather than stacking under it. The panel
   is the last thing in the Play tab, so it may grow as it fills and nothing
   above it moves; it opens and shuts like the planner's short version. Every
   moving part is a transform or an opacity, and nothing moves for
   prefers-reduced-motion beyond a fade. */

.ga-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- the moment ----------
   The coins' pill in shape and size (coins.css .cn-toast), so the two read
   as one voice, but a trophy's: a gold rim and a warm ground, the name in
   white. Its time on the line is SHOW_MS in achievements.js. */
.ga-pop {
  display: inline-block; max-width: min(92%, 420px); padding: 7px 16px; border-radius: 999px;
  font-weight: 800; font-size: 1rem; line-height: 1.3; color: #ffd955; text-wrap: balance;
  background: linear-gradient(180deg, rgba(48, 36, 6, .88), rgba(18, 14, 4, .88));
  border: 1px solid rgba(255, 217, 85, .85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 0 0 3px rgba(240, 196, 25, .14), 0 0 22px rgba(240, 196, 25, .28);
  animation: ga-pop 2.6s ease both;
}
.ga-pop b { color: #fff8e1; }
@keyframes ga-pop {
  0% { opacity: 0; transform: translateY(10px) scale(.9); }
  10% { opacity: 1; transform: scale(1.05); }
  17% { transform: none; }
  84% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes ga-fade { 0%, 100% { opacity: 0; } 8%, 86% { opacity: 1; } }
/* the purse's bounce as an achievement's coins come in (coins.css bounces
   its own the same way); a transform, so nothing round it moves */
.gm-purse.ga-bump { animation: ga-bump .55s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes ga-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.14); box-shadow: 0 0 0 4px rgba(240, 196, 25, .22); }
  100% { transform: scale(1); }
}

/* ---------- the panel ---------- */
.gm-ach[hidden] { display: none; }
.ga > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 32px; -webkit-tap-highlight-color: transparent;
}
.ga > summary::-webkit-details-marker { display: none; }
.ga > summary::before { content: '▸'; color: var(--gold); transition: transform .15s ease; }
.ga[open] > summary::before { transform: rotate(90deg); }
.ga > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.ga-h { margin: 0; font-size: 1.08rem; color: var(--gold); }
.ga-of { color: var(--muted); font-weight: 650; font-size: .9rem; }
/* what is newly earned, counted in the heading so it is seen shut */
.ga-new {
  padding: 1px 9px; border-radius: 999px; font-size: .74rem; font-weight: 750; color: #241c02;
  background: linear-gradient(180deg, #ffd955, var(--gold)); box-shadow: 0 0 12px rgba(240, 196, 25, .45);
}
.ga-new[hidden] { display: none; }
.ga-note { margin: 8px 0 10px; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.ga-note b { color: #c3cdd8; }

.ga-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px;
}
.ga-b {
  display: flex; gap: 10px; align-items: flex-start; min-width: 0; padding: 9px 11px 9px 9px; border-radius: 12px;
  background: var(--g-in-fill); border: 1px solid var(--g-in-line);
  transition: border-color 1.2s ease, box-shadow 1.2s ease;
}
/* not yet: the icon in grey, the words quieter; earned: in colour */
.ga-i {
  flex: 0 0 auto; width: 1.6em; padding-top: 2px; text-align: center; font-size: 1.45rem; line-height: 1;
  filter: grayscale(1); opacity: .42;
}
.ga-b.got .ga-i { filter: none; opacity: 1; }
.ga-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ga-n { font-size: .88rem; line-height: 1.25; color: #c3cdd8; }
.ga-b.got .ga-n { color: var(--ink); }
.ga-b.secret .ga-n { letter-spacing: .12em; color: var(--muted); }
.ga-d { font-size: .76rem; line-height: 1.35; color: var(--muted); }
.ga-f { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: .74rem; color: var(--muted); }
.ga-c { font: 650 .74rem var(--mono); color: rgba(240, 196, 25, .62); white-space: nowrap; }
.ga-b.got .ga-c { color: var(--gold); }
.ga-b.got .ga-w { color: #c3cdd8; }
/* a counted one's way there */
.ga-bar { flex: 1 1 auto; min-width: 40px; height: 6px; border-radius: 999px; overflow: hidden; background: var(--g-well); border: 1px solid var(--g-in-line); }
.ga-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c9922e, var(--gold)); }
.ga-p { font: 650 .72rem var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* newly earned: gold until it has been on screen a moment, then it fades */
.ga-b.new { border-color: rgba(240, 196, 25, .75); box-shadow: 0 0 0 1px rgba(240, 196, 25, .3), 0 0 20px rgba(240, 196, 25, .22); }
.ga-b.new .ga-i { animation: ga-glow 1.6s ease-in-out infinite; }
@keyframes ga-glow {
  0%, 100% { transform: none; }
  50% { transform: scale(1.12); }
}

@media (max-width: 560px) {
  .ga-grid { grid-template-columns: 1fr; gap: 6px; }
  .ga-h { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ga-pop { animation-name: ga-fade; }
  .ga-b.new .ga-i, .gm-purse.ga-bump { animation: none; }
  .ga > summary::before, .ga-b { transition: none; }
}