.account-avatar-settings{grid-template-columns:minmax(190px,.38fr) minmax(0,1fr)}
.avatar-picker{grid-template-columns:minmax(180px,.4fr) minmax(0,1fr)}
.avatar-collection-groups{display:grid;gap:1rem;margin-bottom:1rem}
.avatar-collection-group{padding:1rem;border:1px solid #ffffff14;border-radius:18px;background:#ffffff06}
.achievement-avatar-group{border-color:#fbbf2430;background:radial-gradient(circle at 100% 0,#f59e0b18,transparent 40%),#ffffff05}
.avatar-group-heading{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.avatar-group-heading>span{display:grid;width:35px;height:35px;place-items:center;flex:0 0 35px;border-radius:11px;background:#8b5cf624;color:#ddd6fe}
.achievement-avatar-group .avatar-group-heading>span{background:#f59e0b1f;color:#fde68a}
.avatar-group-heading h3{margin:0;font-size:.98rem}
.avatar-group-heading p{margin:.12rem 0 0;color:#95a4ba;font-size:.78rem}
.avatar-collection-group .account-avatar-grid,.avatar-collection-group .avatar-grid{margin-bottom:0}
.avatar-choice{position:relative;display:block}
.avatar-choice i{position:absolute;right:-2px;bottom:-2px;display:grid;width:18px;height:18px;place-items:center;border:1px solid #ffffff35;border-radius:50%;background:#111827;color:#fbbf24;font-size:10px;font-style:normal}
.avatar-choice.is-locked span{filter:grayscale(.75);opacity:.4;cursor:not-allowed}
.avatar-choice.is-locked:hover span{opacity:.58}
.avatar-choice.is-unlocked:hover span{transform:translateY(-2px);box-shadow:0 8px 18px #0006;transition:.16s ease}
.achievement-avatar-group .avatar-choice:after{content:attr(data-avatar-tooltip);position:absolute;z-index:20;right:0;bottom:calc(100% + 10px);width:max-content;max-width:220px;padding:.5rem .65rem;border:1px solid #fbbf2440;border-radius:10px;background:linear-gradient(145deg,#211a37,#101728);box-shadow:0 12px 30px #000a;color:#f8fafc;font-size:.7rem;font-weight:750;line-height:1.3;text-align:center;opacity:0;pointer-events:none;transform:translateY(5px);transition:.16s ease}.achievement-avatar-group .avatar-choice:hover:after,.achievement-avatar-group .avatar-choice:focus-within:after{opacity:1;transform:translateY(0)}
/* On tablets keep usable targets instead of twelve fixed-minimum columns. */
@media(min-width:761px) and (max-width:1000px){.account-avatar-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:760px){.account-avatar-settings,.avatar-picker{grid-template-columns:1fr}.account-avatar-grid{grid-template-columns:repeat(7,1fr)}.achievement-avatar-group .avatar-choice:after{display:none}}
@media(max-width:650px){.avatar-collection-group{padding:.8rem}.avatar-group-heading p{font-size:.72rem}}
@media(max-width:390px){.account-avatar-grid{grid-template-columns:repeat(6,1fr)}}