/* Achievements window, HUD button and unlock notification. Pixel look, theme variables only. */
.game-hud .hud-achievements{display:inline-flex;align-items:center;gap:6px}
.game-hud .hud-achievements::before{content:"";width:14px;height:20px;background:url(/pixel/achievements/gold.png) center/14px 20px no-repeat;image-rendering:pixelated;flex:none}
@media(max-width:600px){.game-hud .hud-achievements{grid-column:1 / -1;grid-row:4;justify-content:center}}

.ach-window{display:flex;flex-direction:column;gap:14px;max-width:1500px;margin:0 auto;width:100%}
.ach-summary{margin:0;color:var(--muted-strong,var(--ink));font-size:14px}
.ach-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin;border-bottom:3px solid var(--game-frame)}
.ach-tabs button{display:flex;align-items:center;gap:8px;flex:none;min-height:48px;padding:4px 12px 4px 6px;border-radius:0;border:0;background:var(--game-control);color:var(--game-ui-ink);box-shadow:inset 0 -3px var(--game-frame);font:inherit;cursor:pointer;transform:none}
.ach-tabs button:hover{background:var(--game-control-hover)}
.ach-tabs button[aria-selected="true"]{background:var(--game-hud);box-shadow:inset 0 0 0 3px var(--game-frame)}
.ach-tabs button:focus-visible{outline:3px solid var(--game-focus);outline-offset:2px}
.ach-tab-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.ach-tab-text strong{font-family:var(--font-game);font-size:10px;font-weight:400}
.ach-tab-text small{font-size:12px;color:var(--game-ui-muted)}
.ach-avatar{display:block;width:40px;height:40px;overflow:hidden;flex:none;background:var(--game-paper,#fff8e8);box-shadow:inset 0 0 0 2px var(--game-frame);position:relative}
/* Share one face crop at both portrait sizes, including Niko's wider head. */
.ach-avatar img{position:absolute;width:140%;height:210%;left:-20%;top:0;max-width:none;image-rendering:pixelated}
.ach-avatar-icon img{width:20px;height:29px;left:10px;top:5px}
.ach-panel-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ach-panel-head .ach-avatar{width:56px;height:56px}
.ach-panel-head .ach-avatar-icon img{width:40px;height:58px;left:8px;top:-1px}
.ach-panel-head h3{font-family:var(--font-game);font-size:13px;font-weight:400;margin:0 0 4px}
.ach-panel-head p{margin:0;font-size:14px;color:var(--muted-strong,var(--ink))}
.ach-grid{list-style:none;margin:0;padding:0 0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.ach-card{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--surface,var(--bg));color:var(--ink);border:3px solid var(--game-frame);box-shadow:3px 3px 0 var(--game-frame);min-width:0}
.ach-card.is-locked{border-style:dashed;box-shadow:none;background:var(--surface-2,var(--surface))}
.ach-card.is-locked .ach-medal{opacity:.85}
.ach-medal{flex:none;width:40px;height:58px;image-rendering:pixelated}
.ach-body{flex:1;min-width:0}
.ach-title{font-family:var(--font-game);font-size:10px;font-weight:400;line-height:1.6;margin:0 0 4px;overflow-wrap:anywhere}
.ach-desc{margin:0 0 4px;font-size:13px;line-height:1.4}
.ach-task{margin:0 0 6px;font-size:13px;line-height:1.35;color:var(--muted-strong,var(--ink))}
.ach-locked-label{margin:0 0 2px;font-family:var(--font-game);font-size:9px;color:var(--muted,var(--game-ui-muted))}
.ach-card.is-locked .ach-task{color:var(--ink);font-weight:600}
.ach-progress{height:8px;background:var(--surface-2,var(--line));box-shadow:inset 0 0 0 2px var(--game-frame);overflow:hidden}
.ach-progress span{display:block;height:100%;background:var(--muted,#8c8c8c)}
.ach-card.is-unlocked .ach-progress span{background:var(--accent-fill,#166534)}
.tier-bronze .ach-progress span{background:#b06a34}
.tier-silver .ach-progress span{background:#8f9aa6}
.tier-gold .ach-progress span{background:#d9a521}
.tier-platinum .ach-progress span{background:#9fb3c4}
.tier-diamond .ach-progress span{background:#3fb5d9}
.ach-count{margin:4px 0 0;font-size:12px;color:var(--muted,var(--game-ui-muted));font-variant-numeric:tabular-nums;text-transform:capitalize}

.ach-toast{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:400;display:flex;align-items:center;gap:12px;width:min(380px,calc(100vw - 24px));padding:10px 14px;background:var(--game-hud);color:var(--game-ui-ink);border:3px solid var(--game-frame);box-shadow:4px 4px 0 var(--game-frame);cursor:pointer;animation:ach-drop .35s steps(4) both}
.ach-toast img{width:40px;height:58px;image-rendering:pixelated;flex:none}
.ach-toast div{min-width:0;display:flex;flex-direction:column;gap:3px}
.ach-toast-kicker{margin:0;font-family:var(--font-game);font-size:9px;line-height:1.5;color:var(--game-ui-muted)}
.ach-toast strong{font-family:var(--font-game);font-size:12px;font-weight:400;line-height:1.5;overflow-wrap:anywhere}
.ach-toast small{font-size:13px}
.ach-toast.leaving{animation:ach-lift .3s steps(3) both}
@keyframes ach-drop{from{transform:translate(-50%,-24px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes ach-lift{to{transform:translate(-50%,-24px);opacity:0}}
@media(max-width:600px){.ach-grid{grid-template-columns:1fr}.ach-tabs button{padding-right:8px}.ach-toast{top:12px}}
@media(prefers-reduced-motion:reduce){.ach-toast,.ach-toast.leaving{animation:none}}

.ach-avatar-big-m img{width:240%;height:240%;left:-70%;top:-12%}