.profile-page{

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

}

.profile-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);

}

.profile-loading,
.profile-error{

    margin:0;
    color:var(--text-muted);
    text-align:center;

}

.profile-header{

    padding-bottom:30px;
    border-bottom:1px solid var(--border);
    text-align:center;

}

.profile-eyebrow{

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

}

.profile-header h1,
.profile-section-heading h2,
.profile-rank-card h2,
.profile-blessing-card h2,
.profile-achievement-summary h2{

    margin:0;

}

.profile-header h1{

    font-size:clamp(2.4rem, 6vw, 4rem);

}

.profile-session,
.profile-rank-card > p,
.profile-blessing-card > p,
.profile-rank-card small,
.profile-distribution > p,
.profile-summary-message{

    color:var(--text-muted);

}

.profile-overview{

    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:16px;
    margin:30px 0;

}

.profile-rank-card,
.profile-blessing-card,
.profile-section,
.profile-achievement-summary{

    padding:24px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--radius-medium);
    background:rgba(2,11,22,.34);

}

.profile-rank-card{

    background:linear-gradient(135deg, rgba(75,163,255,.16), rgba(2,11,22,.34));

}

.profile-rank-card > p,
.profile-blessing-card > p{

    margin:10px 0 16px;

}

.profile-rank-progress{

    height:8px;
    overflow:hidden;
    margin:18px 0 10px;
    border-radius:999px;
    background:rgba(255,255,255,.1);

}

.profile-rank-progress span{

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

}

.profile-section,
.profile-achievement-summary{

    margin-top:16px;

}

.profile-section-heading{

    margin-bottom:20px;

}

.profile-stats{

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

}

.profile-stats--axisdle{

    grid-template-columns:repeat(5, minmax(0, 1fr));

}

.profile-stats div{

    min-width:0;
    padding:15px;
    border-radius:var(--radius-small);
    background:rgba(75,163,255,.09);

}

.profile-stats dt{

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

}

.profile-stats dd{

    margin:6px 0 0;
    font-size:1.08rem;
    font-weight:bold;

}

.profile-distribution{

    margin-top:24px;

}

.profile-distribution > p{

    margin:0 0 10px;
    font-size:.85rem;

}

.profile-distribution ol{

    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;

}

.profile-distribution li{

    display:grid;
    gap:4px;
    padding:10px;
    border-radius:var(--radius-small);
    background:rgba(255,255,255,.06);
    text-align:center;

}

.profile-distribution li span{

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

}

.profile-achievement-summary{

    background:linear-gradient(135deg, rgba(139,233,255,.1), rgba(2,11,22,.34));

}

.profile-achievement-list{

    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;

}

.profile-achievement{

    padding:8px 10px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    color:var(--text-muted);
    font-size:.84rem;

}

.profile-achievement--unlocked{

    border-color:rgba(139,233,255,.35);
    color:var(--text);

}

.profile-achievements-link{

    display:block;
    width:max-content;
    max-width:100%;
    margin:24px auto 0;
    padding:0;
    border:0;
    background:transparent;
    color:var(--secondary);
    font:inherit;
    cursor:pointer;
    text-align:center;
    text-decoration:none;

}

.profile-achievements-link:hover,
.profile-achievements-link:focus-visible{

    color:var(--text);

}

@media (max-width:800px){

    .profile-stats--axisdle{

        grid-template-columns:repeat(3, minmax(0, 1fr));

    }

}

@media (max-width:600px){

    .profile-page{

        padding:112px 12px 42px;

    }

    .profile-panel{

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

    }

    .profile-overview,
    .profile-stats,
    .profile-stats--axisdle{

        grid-template-columns:1fr;

    }

    .profile-distribution ol{

        grid-template-columns:repeat(3, 1fr);

    }

}