/* NEON SURVIVOR — achievements.css : the high-fidelity Achievement Gallery + in-game unlock toast.
 * Loaded as a separate <link> after css/style.css so the core stylesheet stays modular.
 * Reuses the root palette (--ink/--muted/--gold/--mint/--pink) defined in style.css. */

/* #boot "Connecting…" animated ellipsis */
.bootdots::after{content:'';animation:bootdots 1.3s steps(4,end) infinite}
@keyframes bootdots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* empty state when no achievements are unlocked in the active filter */
.ach-empty{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--muted);padding:10px 2px}

/* host override: #achlist still carries the legacy .achlist class (display:flex; max-height:200px;
 * overflow:auto). The gallery is ONE scroll region — so neutralise the flex+cap here (id beats class)
 * and let #achlist itself scroll. Without this the nested .ach-grid scroller collapses to a sliver. */
#achlist{display:block;max-height:300px;overflow-y:auto;padding-right:4px}
.ach-tabs{position:sticky;top:0;z-index:1;background:#0a0b14;padding:2px 0 8px;margin-bottom:4px;display:flex;gap:6px;flex-wrap:wrap}
.ach-tab{flex:1 1 auto;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;cursor:pointer;pointer-events:auto;
  padding:5px 8px;border-radius:7px;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);transition:.15s}
.ach-tab:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.ach-tab.on{color:#0b0c12;background:var(--gold);border-color:var(--gold)}

/* ===== gallery: cosmetics showcase strip ===== */
.ach-showcase{margin-bottom:12px}
.cos-title{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);margin-bottom:7px}
.cos-row{display:flex;gap:7px;flex-wrap:wrap}
.cos-chip{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:9px;font-family:var(--mono);font-size:11px;
  color:var(--muted);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);opacity:.55;transition:.2s}
.cos-chip.got{opacity:1;color:#0b0c12;background:linear-gradient(135deg,#ffe79a,#ffd95e);border-color:#ffd95e;
  box-shadow:0 0 12px rgba(255,217,94,.45)}
.cos-chip .cos-ico{font-size:14px}

/* ===== gallery: tiered cards ===== */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.ach-card{--tier-glow:#d9875a;position:relative;display:flex;flex-direction:column;gap:7px;padding:11px 12px;border-radius:12px;
  background:rgba(10,12,22,.6);border:1px solid var(--tier-glow);transition:opacity .2s,box-shadow .25s,border-color .25s}
.ach-card.tier-bronze{--tier-glow:#d9875a}
.ach-card.tier-silver{--tier-glow:#cfd6e6}
.ach-card.tier-gold{--tier-glow:#ffd95e}
.ach-card.locked{opacity:.5}
.ach-card.got{opacity:1;box-shadow:0 0 10px -1px var(--tier-glow)}
.ach-card.tier-gold.got{box-shadow:0 0 16px -1px var(--tier-glow),inset 0 0 22px -12px var(--tier-glow)}
.ach-card.is-near{opacity:.9;animation:achNeonPulse 1.4s ease-in-out infinite}
.ach-card.secret{opacity:.6;border-style:dashed}

.ach-head{display:flex;align-items:center;gap:7px}
.ach-head .ach-ico{font-size:18px}
.ach-head .ach-tier{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--tier-glow);
  border:1px solid var(--tier-glow);border-radius:5px;padding:1px 5px;opacity:.85}
.ach-head .ach-mark{margin-left:auto;font-size:13px;color:var(--tier-glow)}
.ach-body b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.25}
.ach-body span{display:block;font-size:10.5px;color:var(--muted);line-height:1.3;margin-top:2px}

/* progress bar — smooth fill, tier-tinted */
.ach-prog{height:6px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.ach-prog-fill{height:100%;border-radius:4px;background:var(--tier-glow);
  box-shadow:0 0 8px var(--tier-glow);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.ach-prog-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--muted);text-align:right}
.ach-card.got .ach-prog-label{color:var(--tier-glow)}

@keyframes achNeonPulse{0%,100%{box-shadow:0 0 4px var(--tier-glow);border-color:var(--tier-glow)}
  50%{box-shadow:0 0 16px var(--tier-glow),0 0 28px -6px var(--tier-glow);border-color:#fff}}

/* ===== in-game "new unlock" toast — slides from the right, never pauses the run ===== */
#achtoast{position:fixed;top:120px;right:0;z-index:18;pointer-events:none;
  display:flex;align-items:center;gap:11px;max-width:330px;padding:12px 18px 12px 16px;
  border-radius:14px 0 0 14px;opacity:0;transform:translateX(110%);
  background:rgba(10,12,24,.92);border:1px solid var(--ac,#ffd95e);border-right:none;
  box-shadow:0 0 26px -6px var(--ac,#ffd95e);backdrop-filter:blur(7px);
  transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .42s;will-change:transform,opacity}
#achtoast.show{opacity:1;transform:translateX(0)}
#achtoast.glitch{animation:achGlitch .22s steps(2) 1}
#achtoast .at-ico{font-size:24px;filter:drop-shadow(0 0 6px var(--ac,#ffd95e))}
#achtoast .at-text b{display:block;font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.04em;color:var(--ac,#ffd95e)}
#achtoast .at-text span{display:block;font-family:var(--mono);font-size:12.5px;color:var(--ink);margin-top:2px}
@keyframes achGlitch{0%{filter:none;transform:translateX(0)}
  33%{filter:hue-rotate(90deg) saturate(1.6);transform:translate(-3px,1px)}
  66%{filter:hue-rotate(-60deg);transform:translate(3px,-1px)}
  100%{filter:none;transform:translateX(0)}}

@media (prefers-reduced-motion:reduce){
  .ach-card.is-near{animation:none}
  #achtoast.glitch{animation:none}
  .ach-prog-fill{transition:none}}