/* achievements.css — split out of style.css on 2026-09-02 so a feature's styles live
   with the feature and parallel sessions stop colliding in one 4,600-line
   file. The 🏅 achievements screen and the unlock toast (achievements.js).
   Loads AFTER style.css (index.html), so the cascade order the rules had
   inside it is preserved: nothing here was moved relative to what follows it. */

/* ------------------------------- achievements ------------------------------ */
/* unlock toasts: queued top-right, over any screen (game included) */
#achv-toasts {
  position: fixed; top: 14px; right: 14px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.achv-toast {
  display: flex; align-items: center; gap: 12px;
  background: rgba(8, 10, 22, 0.92); color: #fff;
  border: 1px solid #ffd257; border-radius: 14px;
  padding: 10px 18px 10px 12px; max-width: 320px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  animation: achv-in 0.3s ease;
}
.achv-toast.out { opacity: 0; transform: translateX(24px); transition: opacity .4s, transform .4s; }
@keyframes achv-in { from { opacity: 0; transform: translateY(-12px); } }
.achv-toast .at-ico { font-size: 28px; line-height: 1; }
.achv-toast .at-txt { display: flex; flex-direction: column; text-align: left; gap: 2px; }
.achv-toast .at-txt b { color: #ffd257; font-size: 13px; letter-spacing: .5px; }
.achv-toast .at-txt small { font-size: 12.5px; color: #d7e0ea; }
/* the 🏅 screen */
#achv-screen .panel.wide { width: min(96vw, 980px); max-width: 980px; }
.achv-body { max-height: 68vh; overflow-y: auto; padding: 4px 6px; text-align: left; }
.achv-sum {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 15px; margin: 4px 2px 10px;
}
.achv-sum-coins { color: #ffd257; font-weight: 800; }
.achv-bar { flex: 1; min-width: 140px; height: 10px; }
.achv-cat {
  font-size: 15px; letter-spacing: .5px; margin: 14px 2px 8px;
  border-bottom: 1px solid rgba(215, 224, 234, 0.18); padding-bottom: 4px;
}
.achv-cat small { color: #8b93a7; font-weight: 600; margin-left: 8px; }
.achv-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}
.achv-card {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(215, 224, 234, 0.06); border: 1px solid rgba(215, 224, 234, 0.14);
  border-radius: 12px; padding: 10px 12px;
}
.achv-card.got { background: rgba(255, 210, 87, 0.08); border-color: rgba(255, 210, 87, 0.55); }
.achv-card.locked { opacity: 0.72; }
.achv-card .ac-ico { font-size: 24px; line-height: 1.2; width: 30px; text-align: center; flex: none; }
.achv-card .ac-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.achv-card .ac-body b { font-size: 14px; }
.achv-card.got .ac-body b { color: #ffd257; }
.achv-card .ac-body small { font-size: 12px; color: #a9b3c2; line-height: 1.35; }
.achv-card .ac-meta { display: flex; gap: 10px; align-items: center; font-size: 11px; margin-top: 2px; flex-wrap: wrap; }
.achv-card .ac-tier { text-transform: uppercase; letter-spacing: .6px; font-weight: 800; color: #8b93a7; }
.achv-card.t-bronze .ac-tier { color: #c98a5b; }
.achv-card.t-silver .ac-tier { color: #b9c4d4; }
.achv-card.t-gold .ac-tier { color: #ffd257; }
.achv-card.t-plat .ac-tier { color: #9be8ff; }
.achv-card .ac-coins { color: #ffd257; font-weight: 800; }
.achv-card .ac-date { color: #7fd98b; font-weight: 700; }