.achievements-page{

    min-height:100vh;
    padding:150px 24px 72px;

}

.achievements-panel{

    width:min(1060px, 100%);
    margin:auto;
    padding:clamp(28px, 5vw, 52px);
    border:1px solid var(--border);
    border-radius:var(--radius-large);
    background:rgba(8, 26, 44, .78);
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(14px);

}

.achievements-header{

    margin-bottom:34px;
    text-align:center;

}

.achievements-eyebrow,
.achievement-category{

    color:var(--secondary);
    font-size:.78rem;
    letter-spacing:.12em;
    text-transform:uppercase;

}

.achievements-header h1{

    margin:6px 0 10px;
    font-size:clamp(2.4rem, 6vw, 4rem);

}

.achievements-header > p:last-child,
.achievements-loading,
.achievements-error{

    color:var(--text-muted);

}

.achievements-loading,
.achievements-error{

    margin:0;
    text-align:center;

}

.achievements-grid{

    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;

}

.achievement-card{

    display:flex;
    gap:18px;
    padding:22px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--radius-medium);
    background:rgba(2,11,22,.34);
    opacity:.68;
    transition:transform var(--transition-fast), border-color var(--transition-normal), opacity var(--transition-normal);

}

.achievement-card--unlocked{

    border-color:rgba(139,233,255,.4);
    background:linear-gradient(135deg, rgba(75,163,255,.16), rgba(2,11,22,.34));
    box-shadow:0 0 26px rgba(75,163,255,.1);
    opacity:1;

}

.achievement-card:hover{

    transform:translateY(-2px);

}

.achievement-icon{

    display:grid;
    flex:0 0 48px;
    height:48px;
    place-items:center;
    border:1px solid rgba(139,233,255,.22);
    border-radius:50%;
    background:rgba(75,163,255,.12);
    font-size:1.35rem;

}

.achievement-copy{

    min-width:0;

}

.achievement-category{

    margin:0 0 5px;

}

.achievement-copy h2{

    margin:0;
    font-size:1.2rem;

}

.achievement-copy > p:not(.achievement-category){

    margin:8px 0 14px;
    color:var(--text-muted);
    font-size:.92rem;

}

.achievement-progress{

    position:relative;
    height:7px;
    overflow:hidden;
    margin:16px 0 14px;
    border-radius:999px;
    background:rgba(255,255,255,.1);

}

.achievement-progress span{

    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, var(--primary), var(--secondary));

}

.achievement-progress small{

    position:absolute;
    top:11px;
    right:0;
    color:var(--text-muted);
    font-size:.72rem;

}

.achievement-status{

    color:var(--text-muted);
    font-size:.75rem;

}

@media (max-width:700px){

    .achievements-page{

        padding:112px 12px 42px;

    }

    .achievements-panel{

        padding:28px 18px;
        border-radius:var(--radius-medium);

    }

    .achievements-grid{

        grid-template-columns:1fr;

    }

}