/* ==========================================
   COLLECTOR ACHIEVEMENTS
========================================== */

.achievements-page .main-content{
    min-width:0;
}

.achievements-scroll{
    padding:26px;
}

.achievements-shell{
    width:100%;
    max-width:1500px;
    margin:0 auto;
}

/* Level hero */

.achievement-hero{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:26px;
    padding:26px 28px;
    border:1px solid var(--border);
    border-radius:20px;
    background:
        linear-gradient(120deg,rgba(124,92,252,.16),transparent 46%),
        var(--panel);
}

.achievement-level-emblem{
    width:132px;
    height:132px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    border:1px solid rgba(244,183,64,.34);
    border-radius:50%;
    background:linear-gradient(145deg,rgba(244,183,64,.14),rgba(124,92,252,.12));
}

.achievement-level-emblem span{
    color:var(--text-light);
    font-size:12px;
    font-weight:600;
}

.achievement-level-emblem strong{
    margin-top:3px;
    color:var(--warning);
    font-size:42px;
    line-height:1;
}

.achievement-hero-copy h2{
    margin:5px 0 7px;
    color:var(--text);
    font-size:28px;
    line-height:1.25;
}

.achievement-hero-copy > p{
    margin:0;
    color:var(--text-light);
    font-size:13px;
    line-height:1.65;
}

.achievement-xp-row{
    max-width:680px;
    margin-top:18px;
}

.achievement-xp-row > div:first-child{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:7px;
}

.achievement-xp-row span,
.achievement-xp-row strong{
    color:var(--text-light);
    font-size:12px;
}

.achievement-xp-row strong{
    color:var(--text);
}

.achievement-xp-track{
    height:8px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.07);
}

.achievement-xp-track div{
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--primary),var(--warning));
    transition:width .45s ease;
}

.achievement-total-xp{
    display:flex;
    align-items:flex-end;
    flex-direction:column;
    min-width:125px;
}

.achievement-total-xp span,
.achievement-total-xp small{
    color:var(--text-light);
    font-size:12px;
}

.achievement-total-xp strong{
    margin:2px 0;
    color:var(--text);
    font-size:30px;
}

/* KPIs */

.achievement-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-top:18px;
}

.achievement-kpi{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
    padding:18px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--panel);
}

.achievement-kpi > i{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:12px;
    background:rgba(124,92,252,.12);
    color:var(--primary-hover);
    font-size:15px;
}

.achievement-kpi div{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.achievement-kpi span,
.achievement-kpi small{
    overflow:hidden;
    color:var(--text-light);
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.achievement-kpi strong{
    margin:2px 0;
    overflow:hidden;
    color:var(--text);
    font-size:20px;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Next objectives */

.achievement-objectives-panel,
.achievement-library-panel{
    margin-top:18px;
    padding:22px;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--panel);
}

.achievement-panel-heading,
.achievement-library-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.achievement-panel-heading h3,
.achievement-library-header h3{
    margin:4px 0 0;
    color:var(--text);
    font-size:19px;
}

.achievement-panel-heading a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--text-light);
    font-size:12px;
    font-weight:600;
    text-decoration:none;
}

.achievement-panel-heading a:hover{
    color:var(--primary-hover);
}

.achievement-objective-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:18px;
}

.achievement-objective{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:15px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.025);
}

.achievement-objective > span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:rgba(244,183,64,.1);
    color:var(--warning);
    font-size:14px;
}

.achievement-objective > div{
    min-width:0;
}

.achievement-objective strong,
.achievement-objective small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.achievement-objective strong{
    color:var(--text);
    font-size:13px;
}

.achievement-objective small{
    margin-top:2px;
    color:var(--text-light);
    font-size:12px;
}

.achievement-objective > b{
    color:var(--warning);
    font-size:12px;
    white-space:nowrap;
}

.achievement-objective-track{
    height:5px;
    margin-top:8px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.07);
}

.achievement-objective-track div{
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--primary),var(--warning));
}

.achievement-objectives-complete{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:90px;
    color:var(--success);
    font-size:14px;
}

/* Library */

.achievement-library-header p{
    margin:6px 0 0;
    color:var(--text-light);
    font-size:12px;
}

.achievement-filter-group{
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--panel-light);
}

.achievement-filter-group button{
    min-height:34px;
    padding:7px 11px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--text-light);
    font-family:inherit;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

.achievement-filter-group button:hover,
.achievement-filter-group button.active{
    background:rgba(124,92,252,.16);
    color:var(--text);
}

.achievement-card-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:20px;
}

.achievement-card{
    position:relative;
    min-width:0;
    padding:17px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:15px;
    background:linear-gradient(145deg,rgba(37,44,60,.9),rgba(27,32,45,.9));
}

.achievement-card.unlocked{
    border-color:rgba(244,183,64,.34);
}

.achievement-card.locked{
    opacity:.82;
}

.achievement-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.achievement-card-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:rgba(124,92,252,.12);
    color:var(--primary-hover);
    font-size:15px;
}

.achievement-card.unlocked .achievement-card-icon{
    background:rgba(244,183,64,.12);
    color:var(--warning);
}

.achievement-card-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    color:var(--text-light);
    font-size:12px;
    font-weight:600;
}

.achievement-card.unlocked .achievement-card-status{
    background:rgba(66,211,146,.1);
    color:var(--success);
}

.achievement-card-category{
    display:block;
    margin-top:16px;
    color:var(--text-light);
    font-size:12px;
    font-weight:600;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.achievement-card h4{
    margin:5px 0;
    color:var(--text);
    font-size:17px;
}

.achievement-card > p{
    min-height:40px;
    margin:0;
    color:var(--text-light);
    font-size:12px;
    line-height:1.6;
}

.achievement-card-progress{
    margin-top:15px;
}

.achievement-card-progress > div:first-child{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.achievement-card-progress span,
.achievement-card-progress strong{
    color:var(--text-light);
    font-size:12px;
}

.achievement-card-progress strong{
    color:var(--text);
}

.achievement-card-track{
    height:6px;
    margin-top:8px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.07);
}

.achievement-card-track div{
    height:100%;
    border-radius:inherit;
    background:var(--primary);
}

.achievement-card.unlocked .achievement-card-track div{
    background:linear-gradient(90deg,var(--warning),var(--success));
}

.achievement-card-reward{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:15px;
    padding-top:13px;
    border-top:1px solid var(--border);
}

.achievement-card-reward span,
.achievement-card-reward strong{
    color:var(--text-light);
    font-size:12px;
}

.achievement-card-reward strong{
    color:var(--warning);
}

.achievement-empty{
    min-height:190px;
    place-items:center;
    align-content:center;
    gap:7px;
    color:var(--text-light);
    text-align:center;
}

.achievement-empty:not([hidden]){
    display:grid;
}

.achievement-empty i{
    color:var(--warning);
    font-size:28px;
}

.achievement-empty strong{
    color:var(--text);
    font-size:14px;
}

.achievement-empty span{
    font-size:12px;
}

.achievement-method-panel{
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin-top:18px;
    padding:17px 19px;
    border:1px solid rgba(82,168,255,.22);
    border-radius:15px;
    background:rgba(82,168,255,.055);
}

.achievement-method-panel > i{
    margin-top:2px;
    color:#52a8ff;
    font-size:15px;
}

.achievement-method-panel strong{
    color:var(--text);
    font-size:13px;
}

.achievement-method-panel p{
    margin:4px 0 0;
    color:var(--text-light);
    font-size:12px;
    line-height:1.6;
}

@media (max-width:1250px){
    .achievement-kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .achievement-objective-grid,
    .achievement-card-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:820px){
    .achievements-scroll{
        padding:18px;
    }

    .achievement-hero{
        grid-template-columns:1fr;
    }

    .achievement-level-emblem{
        margin:0 auto;
    }

    .achievement-total-xp{
        align-items:flex-start;
    }

    .achievement-library-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .achievement-filter-group{
        width:100%;
        overflow-x:auto;
    }

    .achievement-filter-group button{
        flex:1 0 auto;
    }
}

@media (max-width:620px){
    .achievement-kpi-grid,
    .achievement-objective-grid,
    .achievement-card-grid{
        grid-template-columns:1fr;
    }

    .achievement-hero,
    .achievement-objectives-panel,
    .achievement-library-panel{
        padding:18px;
    }

    .achievement-hero-copy h2{
        font-size:23px;
    }

    .achievement-panel-heading{
        align-items:flex-start;
        flex-direction:column;
    }
}