/* Achievements page (/achievements). Tokens come from css/redesign.css (--rd-*). Everything is prefixed with ac-. */
.ac-page,.ac-page *,.ac-page *::before,.ac-page *::after{box-sizing:border-box}
.ac-page{max-width:1440px;margin:0 auto;padding:28px 28px 56px;display:flex;flex-direction:column;gap:24px;color:var(--rd-text,#e8eaf2);font-family:var(--rd-font-body,'Inter'),system-ui,sans-serif;font-size:16px;font-weight:400;line-height:normal;letter-spacing:normal;min-width:0}
.ac-page>*{min-width:0;max-width:100%}
.ac-page a,.ac-page a:hover{color:inherit;text-decoration:none}
.ac-page button{font-family:inherit;line-height:normal;margin:0;cursor:pointer}
body.redesign .ac-page h1{margin:0;font-family:var(--rd-font-head,"Exo 2",sans-serif);font-weight:900;font-size:32px;letter-spacing:0;line-height:normal;color:inherit}

.ac-sub{font-size:14px;color:var(--rd-muted,#8a92a8);line-height:1.45}
.ac-sub b{color:var(--rd-text,#e8eaf2)}
.ac-sub a:hover{color:var(--rd-accent-2,#f0952a)}

.ac-card{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:20px;background:var(--rd-bg-soft,#0c0f18);border:1px solid var(--rd-border,#1e2640)}
.ac-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ac-hero-text{flex:1;min-width:220px}

.ac-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:12px;background:transparent;border:1px solid #2c3050;color:var(--rd-text,#e8eaf2);font-weight:700;font-size:15px;white-space:nowrap;transition:.15s}
.ac-btn:hover{border-color:var(--rd-accent,#e8762a)}
.ac-page.is-picking .ac-btn{background:linear-gradient(135deg,var(--rd-accent,#e8762a),var(--rd-accent-2,#f0952a));border-color:transparent;color:#fff}

.ac-bar{height:8px;border-radius:99px;background:#1a2036;overflow:hidden}
.ac-bar i{display:block;height:100%;max-width:100%;border-radius:99px;background:linear-gradient(90deg,var(--rd-accent,#e8762a),var(--rd-accent-2,#f0952a))}
.ac-bar-lg{height:10px}

.ac-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.ac-chips::-webkit-scrollbar{display:none}
.ac-chip{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 14px;border-radius:999px;background:var(--rd-surface,#111520);border:1px solid var(--rd-border-2,#252d45);color:var(--rd-text,#e8eaf2);font-weight:700;font-size:14px;white-space:nowrap}
.ac-chip:hover{border-color:var(--rd-accent,#e8762a)}
.ac-chip.is-on{background:var(--rd-accent,#e8762a);border-color:var(--rd-accent,#e8762a);color:#fff}

.ac-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ac-tile{--ac-c:#b0c3d9;display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:18px;background:linear-gradient(180deg,#171a2a,#0e111b);border:1px solid #232b45;border-left:3px solid var(--ac-c)}
.ac-tile[hidden]{display:none}
.ac-tile-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.ac-tile-name{flex:1 1 auto;min-width:0;font-weight:700;font-size:16px;overflow-wrap:break-word}
.ac-tile-rarity{font-size:11px;font-weight:800;color:var(--ac-c);text-transform:uppercase}
.ac-tile .ac-bar i{background:var(--ac-c)}
.ac-tile-foot{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--rd-muted,#8a92a8)}
.ac-tile-foot b{color:var(--rd-text,#e8eaf2)}

.ac-pick{display:none;align-items:center;justify-content:center;min-height:44px;margin-top:auto;padding:0 12px;border-radius:10px;border:1px solid var(--rd-border-2,#252d45);background:var(--rd-surface,#111520);color:var(--rd-text,#e8eaf2);font-weight:700;font-size:13px}
.ac-pick:hover{border-color:var(--ac-c)}
.ac-pick.is-on{border-color:var(--ac-c);color:var(--ac-c)}
.ac-page.is-picking .ac-pick{display:flex}

.ac-empty{display:none;padding:44px 16px;border:1px solid var(--rd-border,#1e2640);border-radius:18px;background:var(--rd-bg-soft,#0c0f18);color:var(--rd-faint,#555e78);text-align:center}
.ac-empty.is-shown{display:block}

@media(max-width:1100px){.ac-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.ac-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .ac-page{padding:16px 14px 40px;gap:18px}
 .ac-card{padding:16px;border-radius:18px}
 .ac-grid{gap:12px}
}