/* Achievement pops and the achievements page (achievement-ui.js). The page reuses the leaderboard dialog's frame. */
#achievement-pops{position:fixed;inset:auto 16px 16px auto;margin:0;padding:0;border:0;background:none;overflow:visible;z-index:1000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.achievement-pop{display:grid;gap:2px;min-width:240px;max-width:min(340px,calc(100vw - 32px));padding:10px 14px;border:2px solid #b9ff2c;border-radius:4px;background:#12161e;color:#f1f3df;box-shadow:4px 5px 0 #ff5fa8,0 0 24px #b9ff2c55;font-family:var(--font-body);animation:achievement-pop 6s ease forwards}
.achievement-pop span{color:#ff5fa8;font:800 10px/1.2 var(--font-body);letter-spacing:1.5px}
.achievement-pop b{color:#d0ff42;font:400 22px/1 var(--font-stencil);letter-spacing:.5px}
.achievement-pop small{color:#c9d2b8;font:600 12px/1.3 var(--font-body)}
@keyframes achievement-pop{0%{opacity:0;transform:translateY(16px)}6%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.achievement-pop{animation:none}}
/* The page (achievement-ui.js, less-scrolling): tabs, a grid of tiles, and the selected tile's ladders beside it (below on
   phones). Dark fills everywhere; the selected and hover states are an accent border and glow, never a pale fill. */
.achievements-dialog{width:min(980px,calc(100vw - 32px))}
.achievements-dialog .achievements-body{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 200px);min-height:0}
.ach-tabs{display:flex;gap:6px}
.ach-tabs button{flex:1;padding:8px 10px;border:2px solid #2d3a26;border-radius:4px;background:#191f27;color:#c9d2b8;font:400 18px/1 var(--font-stencil);letter-spacing:.5px;cursor:pointer}
.ach-tabs button small{color:#9aa58c;font:700 11px/1 var(--font-body)}
.ach-tabs button:hover,.ach-tabs button:focus-visible{border-color:#b9ff2c;background:#1d2530;color:#f1f3df}
.ach-tabs button[aria-selected="true"]{border-color:#ff5fa8;background:#221a26;color:#ff5fa8;box-shadow:0 0 12px #ff5fa855}
.ach-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;min-height:0;flex:1}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:5px;align-content:start;overflow:auto;min-height:0;padding:2px}
.ach-tile{display:grid;justify-items:center;gap:1px;padding:4px 3px;border:2px solid #2d3a26;border-radius:4px;background:#191f27;color:#f1f3df;cursor:pointer;min-width:0}
.ach-tile b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 12px/1.2 var(--font-body)}
.ach-tile small{color:#9aa58c;font:700 11px/1 var(--font-body)}
.ach-tile.complete{border-color:#7bd31f}
.ach-tile:hover,.ach-tile:focus-visible{border-color:#b9ff2c;background:#1d2530}
.ach-tile.selected{border-color:#ff5fa8;background:#221a26;box-shadow:0 0 12px #ff5fa855}
.ach-tile-icon{width:32px;height:32px;image-rendering:pixelated}
.ach-tile-star{display:grid;place-items:center;color:#d0ff42;font-size:26px}
.ach-detail{overflow:auto;min-height:0;padding:10px 12px;border:2px solid #2d3a26;border-radius:4px;background:#151a22}
.ach-detail h3{margin:0 0 8px;color:#ff5fa8;font:400 22px/1 var(--font-stencil);letter-spacing:.5px}
.ach-detail ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ach-ladder{display:grid;gap:4px;padding:8px 10px;border:2px solid #2d3a26;border-radius:4px;background:#191f27}
.ach-ladder.complete{border-color:#b9ff2c}
.ach-ladder-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ach-ladder-head b{color:#f1f3df;font:800 14px/1.2 var(--font-body)}
.ach-ladder p{margin:0;color:#c9d2b8;font:600 12px/1.3 var(--font-body)}
.ach-ladder p em{color:#d0ff42;font-style:normal;font-weight:800}
.ach-ladder small{color:#9aa58c;font:600 11px/1.3 var(--font-body)}
.achievements-classic{margin:10px 0 0;color:#c9d2b8;font:600 12px/1.4 var(--font-body)}
.achievements-classic b{color:#ff5fa8;margin-right:6px}
.achievement-tiers{display:flex;gap:3px;align-items:center}
.achievement-tiers i{width:9px;height:9px;border:2px solid #b9ff2c;border-radius:50%}
.achievement-tiers i.on{background:#b9ff2c}
.achievement-bar{height:8px;border-radius:4px;background:#0b0e13;overflow:hidden}
.achievement-bar span{display:block;height:100%;background:linear-gradient(90deg,#7bd31f,#d0ff42)}
/* Short screens: the rules line goes, the page keeps the room. */
@media (max-height:720px){.achievements-dialog .leaderboard-rules{display:none}.achievements-dialog .achievements-body{max-height:calc(100vh - 140px)}}
/* Phones: the dialog fills the screen, the tiles become a compact strip of icons, the ladders fill the rest. */
@media (max-width:700px),(max-height:500px){
  .achievements-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:10px 12px;border-radius:0}
  .achievements-dialog .leaderboard-rules{display:none}
  .achievements-dialog h2{font-size:22px}
  .achievements-dialog .achievements-body{max-height:none;height:calc(100dvh - 70px)}
  .ach-tabs button{padding:8px 4px;font-size:15px}
  .ach-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .ach-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));max-height:30dvh}
  .ach-tile{padding:4px 2px}
  .ach-tile b{font-size:10px}
  .ach-tile-icon{width:32px;height:32px}
}
@media (max-height:500px) and (min-width:701px){.ach-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:none}.ach-grid{max-height:none}}
.achievements-guest{margin:12px 0 0;padding:8px 12px;border-left:4px solid #ff5fa8;background:#1d1520;color:#f1f3df;font:700 13px/1.4 var(--font-body)}