/* /achievements (templates/achievements.html). */
.ach{--t-common:#8fa3b8;--t-rare:#5cb8ff;--t-epic:#b983ff;--t-legendary:#ffcc4d;--t-shame:#ff7a8a}
.ach-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;margin-bottom:16px;align-items:start}
.ach-board{list-style:none;margin:0;padding:6px 10px 10px}
.ach-row{border-bottom:1px solid var(--fp-line)}
.ach-row summary{display:grid;grid-template-columns:32px minmax(0,1fr) auto 70px;gap:12px;align-items:center;min-height:56px;padding:6px 8px;cursor:pointer;list-style:none;border-radius:10px}
.ach-row summary::-webkit-details-marker{display:none}
.ach-row summary:hover{background:#142436}
.ach-row[open] summary,.ach-row.is-mine summary{background:#10302f}
.ach-rank{font-weight:900;font-size:18px;color:var(--fp-accent);text-align:center}
.ach-name{display:grid;min-width:0}
.ach-name b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ach-name small{font-size:11px;color:var(--fp-faint)}
.ach-icons{display:flex;gap:2px}
.ach-icons i{font-style:normal;font-size:18px;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--fp-panel-2);border:1px solid var(--fp-line-2)}
.ach-icons i.t-legendary{border-color:var(--t-legendary)}
.ach-icons i.t-epic{border-color:var(--t-epic)}
.ach-score{font-size:22px;font-weight:900;text-align:right}
.ach-score small{font-size:10px;color:var(--fp-faint);margin-left:2px}
.ach-shelf{list-style:none;margin:6px 0 4px;padding:0 8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.ach-shelf li,.ach-recent li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--fp-panel-2);border-left:3px solid var(--t-common)}
.ach-shelf li i,.ach-recent li i,.ach-badge>i{font-style:normal;font-size:22px;text-align:center}
.ach-shelf div,.ach-recent div{display:grid;min-width:0}
.ach-shelf b,.ach-recent b{font-size:13px}
.ach-shelf b small{color:var(--fp-accent)}
.ach-shelf span,.ach-recent span{font-size:12px;color:var(--fp-dim)}
.ach-shelf div>small,.ach-recent small{font-size:10px;color:var(--fp-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ach-shelf em{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fp-faint)}
.t-rare{border-left-color:var(--t-rare)!important}.t-epic{border-left-color:var(--t-epic)!important}.t-legendary{border-left-color:var(--t-legendary)!important}.t-shame{border-left-color:var(--t-shame)!important}
.ach-shelf li.t-legendary em{color:var(--t-legendary)}.ach-shelf li.t-epic em{color:var(--t-epic)}.ach-shelf li.t-rare em{color:var(--t-rare)}.ach-shelf li.t-shame em{color:var(--t-shame)}
.ach-links{margin:4px 8px 12px;font-size:12px}
.ach-recent{list-style:none;margin:0;padding:10px 12px 12px;display:grid;gap:6px}
.ach-recent li{grid-template-columns:34px minmax(0,1fr)}
.ach-new{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#10302f;background:var(--fp-accent);padding:1px 6px;border-radius:6px;margin-left:4px}
.ach-catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;padding:12px 14px 16px}
.ach-badge{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;padding:12px 12px 16px;border-radius:12px;background:var(--fp-panel-2);border:1px solid var(--fp-line-2);border-left:4px solid var(--t-common);overflow:hidden}
.ach-badge>i{font-size:28px}
.ach-badge div{display:grid;gap:2px;min-width:0}
.ach-badge b{font-size:15px}
.ach-badge span{font-size:12px;color:var(--fp-dim)}
.ach-badge small{font-size:10px;font-weight:700;color:var(--fp-faint);text-transform:uppercase;letter-spacing:.06em}
.ach-badge.t-legendary small{color:var(--t-legendary)}.ach-badge.t-epic small{color:var(--t-epic)}.ach-badge.t-rare small{color:var(--t-rare)}.ach-badge.t-shame small{color:var(--t-shame)}
.ach-holders{margin:4px 0 0;font-size:11px;color:var(--fp-dim);line-height:1.4}
.ach-rarity{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--fp-line)}
.ach-rarity span{display:block;height:100%;background:var(--fp-accent)}
@media (max-width:1000px){.ach-layout{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.ach-row summary{grid-template-columns:26px minmax(0,1fr) 54px}.ach-icons{display:none}}