*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --page:#0f172a;
    --card:#1e293b;
    --card-light:#283548;
    --panel:#334155;
    --border:rgba(148,163,184,.13);

    --text:#f8fafc;
    --muted:#94a3b8;
    --muted-light:#cbd5e1;

    --blue:#60a5fa;
    --blue-dark:#2563eb;
    --green:#22c55e;
    --yellow:#facc15;
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;

    font-family:Arial, sans-serif;

    color:var(--text);

    background:
        radial-gradient(
            circle at top right,
            rgba(37,99,235,.13),
            transparent 28%
        ),
        var(--page);
}

button,
a{
    font:inherit;
}

.profile-wrap{
    width:92%;
    max-width:1150px;

    margin:auto;
    padding:34px 0 70px;
}

/* =========================
   NAVIGATION
========================= */

.profile-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    margin-bottom:28px;
}

.home-button,
.settings-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    padding:12px 21px;

    color:white;
    text-decoration:none;
    font-weight:bold;

    border-radius:12px;

    transition:
        transform .22s,
        background .22s,
        box-shadow .22s;
}

.home-button{
    background:var(--blue-dark);
    box-shadow:0 8px 22px rgba(0,0,0,.28);
}

.home-button img{
    width:22px;
    height:22px;
    object-fit:contain;
}

.settings-button{
    background:var(--card);
    border:1px solid var(--border);
}

.home-button:hover,
.settings-button:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(0,0,0,.32);
}

.home-button:hover{
    background:#3b82f6;
}

.settings-button:hover{
    background:var(--panel);
}

/* =========================
   SHARED CARDS
========================= */

.profile-hero,
.latest-card,
.section-card{
    border:1px solid var(--border);
    box-shadow:0 16px 38px rgba(0,0,0,.28);
}

.profile-hero,
.section-card{
    background:rgba(30,41,59,.96);
    border-radius:24px;
}

.section-card{
    padding:30px;
    margin-bottom:28px;
}

.section-label,
.profile-label{
    color:var(--blue);
    font-size:.78rem;
    font-weight:bold;
    letter-spacing:.12em;
}

.section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;

    margin-bottom:24px;
}

.section-heading h2{
    margin-top:6px;
    font-size:1.65rem;
}

.progress-note{
    color:var(--muted);
    font-size:.86rem;
}

/* =========================
   PROFILE HERO
========================= */

.profile-hero{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:34px;

    padding:38px;
    margin-bottom:22px;

    overflow:hidden;
    position:relative;
}

.profile-hero::before{
    content:"";

    position:absolute;
    width:280px;
    height:280px;

    top:-150px;
    right:-100px;

    border-radius:50%;

    background:rgba(37,99,235,.13);
    filter:blur(2px);
}

.avatar-wrap{
    position:relative;
    z-index:1;
}

.avatar{
    display:flex;
    align-items:center;
    justify-content:center;

    width:132px;
    height:132px;

    font-size:4.4rem;

    background:
        linear-gradient(
            145deg,
            #3b4b62,
            #263347
        );

    border:4px solid rgba(96,165,250,.28);
    border-radius:50%;

    box-shadow:
        0 14px 32px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.level-badge{
    display:flex;
    align-items:center;
    justify-content:center;

    position:absolute;
    right:-3px;
    bottom:2px;

    width:42px;
    height:42px;

    color:#052e16;
    background:var(--green);

    border:4px solid var(--card);
    border-radius:50%;

    font-weight:bold;
}

.profile-main{
    position:relative;
    z-index:1;
    min-width:0;
}

.profile-main h1{
    margin:6px 0 8px;

    font-size:clamp(2.3rem, 6vw, 3.6rem);
    line-height:1;
    overflow-wrap:anywhere;
}

.profile-rank-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;

    margin-bottom:14px;
}

#playerTitle,
#level{
    display:inline-flex;
    align-items:center;

    padding:7px 12px;

    border-radius:999px;

    font-size:.92rem;
    font-weight:bold;
}

#playerTitle{
    color:#422006;
    background:var(--yellow);
}

#level{
    color:#dbeafe;
    background:rgba(37,99,235,.3);
    border:1px solid rgba(96,165,250,.28);
}

#xp{
    color:var(--muted-light);
    margin-bottom:11px;
}

.xp-bar,
.progress-bar{
    width:100%;

    overflow:hidden;

    background:var(--panel);
    border-radius:999px;
}

.xp-bar{
    position:relative;
    height:22px;
}

#xpFill,
.progress-bar > div{
    height:100%;
    width:0%;

    background:
        linear-gradient(
            90deg,
            #16a34a,
            #4ade80
        );

    border-radius:999px;

    transition:width .65s ease;
}

.xp-bar::after{
    content:"";

    position:absolute;
    top:0;
    left:-60%;

    width:40%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.38),
            transparent
        );

    animation:xpShimmer 2.5s infinite;
}

.xp-details{
    display:flex;
    justify-content:space-between;
    gap:14px;

    margin-top:9px;

    color:var(--muted);
    font-size:.88rem;
}

/* =========================
   LATEST ACHIEVEMENT
========================= */

.latest-card{
    display:flex;
    align-items:center;
    gap:18px;

    padding:22px 25px;
    margin-bottom:28px;

    background:
        linear-gradient(
            135deg,
            rgba(76,59,8,.9),
            rgba(30,41,59,.96)
        );

    border-color:rgba(250,204,21,.24);
    border-radius:20px;
}

.latest-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:58px;
    height:58px;
    flex-shrink:0;

    font-size:1.8rem;

    background:rgba(250,204,21,.13);
    border-radius:16px;
}

.latest-card h2{
    margin:4px 0 5px;
    font-size:1.25rem;
}

#latestAchievementTime{
    color:var(--muted-light);
    font-size:.9rem;
}

/* =========================
   STATISTICS
========================= */

.stats-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:15px;
}

.stat{
    min-width:0;
    padding:20px 15px;

    text-align:center;

    background:var(--panel);

    border:1px solid rgba(148,163,184,.08);
    border-radius:17px;

    transition:
        transform .22s,
        background .22s;
}

.stat:hover{
    transform:translateY(-3px);
    background:#3b4a5e;
}

.stat-icon{
    display:block;
    margin-bottom:9px;
    font-size:1.45rem;
}

.stat h3{
    margin-bottom:8px;

    color:var(--muted-light);

    font-size:.9rem;
    font-weight:normal;
}

.stat p{
    color:var(--blue);
    font-size:1.85rem;
    font-weight:bold;
}

/* =========================
   QUIZ PROGRESS
========================= */

.quiz-progress-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:12px;
}

.quiz-progress-item{
    min-width:0;
    padding:16px 14px;

    background:var(--panel);

    border:1px solid rgba(148,163,184,.08);
    border-radius:16px;

    transition:
        transform .22s,
        background .22s;
}

.quiz-progress-item:hover{
    transform:translateY(-3px);
    background:#3b4a5e;
}

.quiz-progress-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;

    margin-bottom:12px;
}

.quiz-name{
    display:flex;
    align-items:center;
    gap:9px;

    min-width:0;
}

.quiz-name > span{
    flex-shrink:0;
    font-size:1.45rem;
}

.quiz-name h3{
    margin:0;

    font-size:.95rem;
    line-height:1.15;
}

.quiz-name p{
    display:none;
}

.quiz-progress-top > strong{
    flex-shrink:0;

    color:var(--blue);
    font-size:.95rem;
}

.quiz-progress-item > p{
    margin-bottom:8px;

    color:var(--muted-light);
    font-size:.82rem;
}

.progress-bar{
    height:10px;
}
/* =========================
   ACHIEVEMENTS
========================= */

#achievementCounter{
    color:var(--yellow);
    font-weight:bold;
}

.achievement-grid{
    display:grid;
    grid-template-columns:repeat(
        auto-fit,
        minmax(230px, 1fr)
    );

    gap:15px;
}

.achievement-tile{
    position:relative;

    min-height:122px;
    padding:18px;

    background:var(--panel);

    border:2px solid transparent;
    border-radius:17px;

    overflow:hidden;

    transition:
        transform .22s,
        border-color .22s,
        opacity .22s;
}

.achievement-tile:hover{
    transform:translateY(-3px);
}

.achievement-tile.unlocked{
    background:
        linear-gradient(
            145deg,
            rgba(22,101,52,.38),
            var(--panel)
        );

    border-color:rgba(74,222,128,.65);
}

.achievement-tile.locked{
    opacity:.48;
    filter:grayscale(.75);
}

.achievement-tile h3{
    margin-bottom:9px;
    font-size:1rem;
}

.achievement-tile p{
    color:var(--muted-light);
    font-size:.87rem;
    line-height:1.45;
}

.achievement-category{
    display:block;

    margin-top:14px;

    color:var(--muted);
    font-size:.74rem;
    font-weight:bold;
    letter-spacing:.08em;
}

/* =========================
   LEVEL ANIMATION
========================= */

.profile-hero.level-glow{
    animation:profileLevelGlow 1.2s ease;
}

@keyframes xpShimmer{
    from{
        left:-60%;
    }

    to{
        left:120%;
    }
}

@keyframes profileLevelGlow{
    0%{
        box-shadow:0 16px 38px rgba(0,0,0,.28);
        transform:scale(1);
    }

    40%{
        box-shadow:0 0 40px rgba(34,197,94,.75);
        transform:scale(1.015);
    }

    100%{
        box-shadow:0 16px 38px rgba(0,0,0,.28);
        transform:scale(1);
    }
}

/* =========================
   TABLET
========================= */

@media(max-width:1050px){

    .quiz-progress-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

@media(max-width:850px){

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

    .quiz-progress-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

/* =========================
   MOBILE
========================= */

@media(max-width:650px){

    .profile-wrap{
        width:94%;
        padding-top:22px;
    }

    .profile-nav{
        align-items:stretch;
    }

    .home-button,
    .settings-button{
        padding:11px 15px;
    }

    .profile-hero{
        grid-template-columns:1fr;
        gap:22px;

        padding:27px 20px;

        text-align:center;
    }

    .avatar-wrap{
        width:max-content;
        margin:auto;
    }

    .avatar{
        width:112px;
        height:112px;
        font-size:3.6rem;
    }

    .profile-rank-row{
        justify-content:center;
    }

    .xp-details{
        font-size:.78rem;
    }

    .latest-card{
        align-items:flex-start;
    }

    .section-card{
        padding:22px 17px;
    }

    .section-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .stats-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
    }

    .stat{
        padding:17px 8px;
    }

    .stat p{
        font-size:1.5rem;
    }

    .quiz-progress-top{
        align-items:flex-start;
    }

    .quiz-progress-grid{
    grid-template-columns:1fr;
}

.quiz-progress-item{
    padding:15px;
}

.quiz-name p{
    display:block;
}
}

@media(max-width:420px){

    .profile-nav{
        flex-direction:column;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }

    .latest-card{
        flex-direction:column;
    }
}