/* =========================
QUIZ PAGE
========================= */

.quiz-page{

    min-height:100vh;

    padding:
    clamp(4rem, 8vw, 8rem)
    clamp(1rem, 3vw, 2rem)
    clamp(4rem, 6vw, 6rem);

    display:flex;

    justify-content:center;

    position:relative;
}

.quiz-page .app{

    width:min(100%, 58rem);

    position:relative;

    z-index:2;

    margin-inline:auto;
}

/* =========================
TOPBAR
========================= */

.topbar{

    display:grid;

    grid-template-columns:
    1fr auto 1fr;

    align-items:start;

    gap:1.5rem;

    width:min(100%, 54rem);

    margin:
    0 auto clamp(2.5rem, 6vw, 5rem);

    padding-top:4rem;
}

.topbar-left{

    display:flex;

    flex-direction:column;

    gap:0.3rem;
}

.learn-text{

    margin:0;

    padding-bottom:0.2rem;

    font-size:0.76rem;

    font-weight:700;

    letter-spacing:0.28em;

    text-transform:uppercase;

    color:var(--orange);
}

.page-title{

    justify-self:center;
}

.topbar-right{

    justify-self:end;
}
/* =========================
BACK BUTTON
========================= */

.back-btn{

    color:var(--paper);

    font-weight:700;

    display:flex;

    align-items:center;

    gap:0.7rem;

    width:fit-content;

    transition:0.15s ease;

    opacity:0.95;

    transform:rotate(-2deg);

    font-size:clamp(0.95rem, 1vw, 1rem);
}

.back-btn:hover{

    transform:
    translateX(-0.15rem)
    rotate(-5deg);
}

.back-btn svg{

    width:1.3rem;
    height:1.3rem;

    stroke-width:2.7;
}

/* =========================
TITLE
========================= */

.page-title{

    font-family:'Fredoka', sans-serif;

    font-size:
    clamp(2rem, 4vw, 2.5rem);

    letter-spacing:-0.04em;

    color:var(--paper);

    transform:
    rotate(-1deg);
}

/* =========================
TOPBAR RIGHT
========================= */

.topbar-right{

    display:flex;

    align-items:center;

    gap:1rem;
}

/* =========================
STREAK / SCORE
========================= */

.streak-box,
.score-box{

    display:flex;

    align-items:center;

    gap:0.5rem;

    padding:
    0.7rem 1rem;

    font-weight:700;

    backdrop-filter:blur(0.4rem);

    box-shadow:
    0.3rem 0.35rem 0
    rgba(0,0,0,0.18);

    font-size:
    clamp(0.9rem, 1vw, 1rem);
}

.streak-box{

    background:
    rgba(255,174,129,0.14);

    border:
    0.12rem solid rgba(255,174,129,0.18);

    color:#FFD8BF;

    border-radius:
    1.2rem 1.5rem 1rem 1.4rem;

    transform:
    rotate(-3deg);
}

.score-box{

    background:
    rgba(241,68,149,0.12);

    border:
    0.12rem solid rgba(241,68,149,0.18);

    color:#FFD9DC;

    border-radius:
    1.5rem 1.1rem 1.4rem 1rem;

    transform:
    rotate(3deg);
}

.streak-box svg{

    color:#FFAE81;
}

.score-box svg{

    color:#FF6A72;
}

/* =========================
NOTEBOOK CARD
========================= */

.card{

    background:
    rgba(255,248,242,0.07);

    border:
    0.12rem solid rgba(255,255,255,0.07);

    border-radius:
    2.3rem 2rem 2.6rem 1.8rem;

    padding:
    clamp(1.8rem, 4vw, 3.2rem);

    backdrop-filter:blur(0.7rem);

    box-shadow:
    0.8rem 0.9rem 0
    rgba(15,18,26,0.38);

    position:relative;

    overflow:hidden;

    transform:
    rotate(-0.8deg);

    width:min(100%, 54rem);

    margin-inline:auto;
}

/* =========================
HAND DRAWN BORDER
========================= */

.card .sketch-line{

    position:absolute;

    inset:0.5rem;

    border:
    0.12rem solid rgba(255,255,255,0.08);

    border-radius:
    2rem 2.3rem 1.9rem 2.5rem;

    pointer-events:none;

    transform:
    rotate(0.5deg);
}

/* =========================
TOP COLOR STRIP
========================= */

.card::after{

    content:"";

    position:absolute;

    inset:0 auto auto 0;

    width:100%;

    height:0.7rem;

    background:
    linear-gradient(
        90deg,
        var(--red),
        var(--orange),
        var(--sand)
    );
}

/* =========================
PAPER TEXTURE
========================= */

.card::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:0.04;

    background-image:
    radial-gradient(
        rgba(255,255,255,0.9) 0.05rem,
        transparent 0.05rem
    );

    background-size:
    0.7rem 0.7rem;

    pointer-events:none;
}

/* =========================
QUESTION AREA
========================= */

.question-area{

    margin-bottom:
    clamp(2rem, 4vw, 3rem);

    position:relative;

    z-index:2;

    transform:
    rotate(0.5deg);
}

.question-area,
.answers,
.recent-section{

    margin-inline:auto;
}

.question-header{

    display:grid;

    grid-template-columns:
    1fr auto;

    gap:
    clamp(1rem, 3vw, 2rem);

    margin-bottom:
    clamp(1.5rem, 3vw, 2.5rem);
}

.label{

    color:var(--muted);

    font-size:
    clamp(0.7rem, 0.8vw, 0.8rem);

    letter-spacing:0.35em;

    font-weight:700;

    margin-bottom:1rem;

    opacity:0.8;
}

/* =========================
QUESTION
========================= */

#question{

    font-family:'Fredoka', sans-serif;

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

    line-height:0.9;

    letter-spacing:-0.06em;

    color:#FF5B63;

    text-shadow:
    0.25rem 0.3rem 0
    rgba(0,0,0,0.12);

    transform:
    rotate(-2deg);

    display:inline-block;
}

/* =========================
SOUND BUTTON
========================= */

.sound-btn{

    width:
    clamp(4rem, 7vw, 5rem);

    aspect-ratio:1;

    border-radius:
    1.4rem 1.1rem 1.8rem 1rem;

    background:#FFAE81;

    color:#212934;

    cursor:pointer;

    transition:0.15s ease;

    box-shadow:
    0.35rem 0.4rem 0
    rgba(0,0,0,0.24);

    transform:
    rotate(6deg);

    flex-shrink:0;

    position:relative;
        display:flex;

    align-items:center;

    justify-content:center;
}

.sound-btn::before{

    content:"";

    position:absolute;

    inset:0.3rem;

    border:
    0.12rem solid rgba(33,41,52,0.12);

    border-radius:
    1rem 0.8rem 1.2rem 0.9rem;
}

.sound-btn:hover{

    transform:
    rotate(-2deg)
    translateY(-0.2rem);
}

.sound-btn svg{

    width:38%;
    height:38%;

    stroke-width:2.6;
    
    width:1.7rem;
    height:1.7rem;

    stroke-width:2.3;

    transform:
    translateX(0.02rem)
    translateY(0.02rem);
}

/* =========================
ANSWERS
========================= */

.answers{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(15rem, 1fr)
    );

    gap:1.2rem;

    width:min(100%, 44rem);

    position:relative;

    z-index:2;
}

/* =========================
ANSWER BUTTONS
========================= */

.answer-btn{

    padding:
    1.3rem 1.5rem;

    border-radius:
    1.4rem 1.7rem 1.3rem 1.6rem;

    border:
    0.12rem solid rgba(255,248,242,0.8);

    background:
    rgba(255,255,255,0.08);

    color:var(--paper);

    font-size:
    clamp(1rem, 1.5vw, 1.35rem);

    font-weight:700;

    cursor:pointer;

    transition:0.14s ease;

    text-align:left;

    position:relative;

    backdrop-filter:blur(0.3rem);

    box-shadow:
    0.3rem 0.35rem 0
    rgba(15,18,26,0.62);

    min-height:5.5rem;

    overflow:hidden;
}

.answer-btn::before{

    content:"";

    position:absolute;

    inset:0.3rem;

    border:
    0.08rem solid rgba(255,255,255,0.08);

    border-radius:
    1.1rem 1.4rem 1rem 1.3rem;

    pointer-events:none;
}

.answer-btn:nth-child(1){

    transform:rotate(-1deg);
}

.answer-btn:nth-child(2){

    transform:rotate(0.8deg);
}

.answer-btn:nth-child(3){

    transform:rotate(-0.5deg);
}

.answer-btn:nth-child(4){

    transform:rotate(1deg);
}

.answer-btn:hover{

    transform:
    translateY(-0.2rem)
    rotate(-2deg);

    border-color:#FFAE81;

    background:
    rgba(255,255,255,0.12);
}

/* =========================
ANSWER LETTER
========================= */

.answer-letter{

    opacity:0.42;

    margin-right:0.9rem;

    font-size:0.8rem;

    font-weight:700;

    letter-spacing:0.15em;
}

/* =========================
CORRECT / WRONG
========================= */

.correct{

    background:#69D58A !important;

    border-color:#8BE3A6 !important;

    color:#1D2A22 !important;
}

.wrong{

    background:
    rgba(241,68,78,0.24) !important;

    border:
    0.12rem solid rgba(241,68,78,0.72) !important;

    color:
    rgba(255,255,255,0.65);
}

/* =========================
RECENT WORDS
========================= */

.recent-section{

    margin-top:
    clamp(2rem, 4vw, 3.5rem);

    width:min(100%, 44rem);

    position:relative;

    z-index:2;

    transform:
    rotate(-0.5deg);
}

.recent-header{

    color:var(--paper);

    font-size:0.8rem;

    letter-spacing:0.3em;

    text-transform:uppercase;

    margin-bottom:1rem;

    opacity:0.72;

    font-weight:700;
}

.recent-words{

    display:flex;

    flex-wrap:wrap;

    gap:0.8rem;
}

.recent-word{

    background:
    rgba(255,255,255,0.07);

    border:
    0.08rem solid rgba(255,255,255,0.08);

    color:var(--paper);

    padding:
    0.8rem 1rem;

    border-radius:
    1rem 1.2rem 0.9rem 1.1rem;

    font-size:0.95rem;

    display:flex;

    align-items:center;

    gap:0.6rem;

    backdrop-filter:blur(0.4rem);

    transform:rotate(-1deg);

    animation:
    recentWordIn 0.2s ease;
}

.recent-word span{

    opacity:0.55;
}

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

@keyframes recentWordIn{

    from{

        opacity:0;

        transform:
        translateY(0.5rem)
        rotate(-4deg);
    }

    to{

        opacity:1;

        transform:
        translateY(0)
        rotate(-1deg);
    }
}

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

@media(max-width:48rem){

    .topbar{

        flex-direction:column;

        align-items:flex-start;
    }

    .topbar-right{

        align-self:flex-end;
    }

    .question-header{

        grid-template-columns:1fr;
    }

    .sound-btn{

        justify-self:start;
    }
}

.recent-word{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:1rem;
}

.mastery-badge{

    font-size:0.72rem;

    padding:
    0.35rem 0.7rem;

    border-radius:999rem;

    font-weight:700;

    letter-spacing:0.03em;

    flex-shrink:0;
}

/* =========================
STATES
========================= */

.mastery-new{

    background:
    rgba(255,255,255,0.08);

    color:#ddd;
}

.mastery-learning{

    background:
    rgba(255,190,90,0.16);

    color:#FFD27A;
}

.mastery-familiar{

    background:
    rgba(120,210,255,0.16);

    color:#8FDBFF;
}

.mastery-mastered{

    background:
    rgba(120,255,170,0.16);

    color:#8DFFB2;
}

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

@media(max-width:58rem){

    .quiz-page{

        padding:
        1.6rem 1rem 4rem;
    }

    .topbar{

        flex-direction:column;

        align-items:flex-start;

        gap:1.6rem;

        margin-bottom:2rem;

        padding-top:1rem;
    }

    .topbar-right{

        align-self:flex-end;

        gap:0.7rem;
    }

    .page-title{

        font-size:2.6rem;

        line-height:0.92;
            width:100%;

    text-align:center;
    }

    .card{

        padding:
        1.3rem 1rem 1.6rem;

        border-radius:
        2rem 1.7rem 2.3rem 1.8rem;
    }

    .question-header{

        grid-template-columns:1fr;

        gap:1.4rem;

        margin-bottom:1.5rem;
    }

    #question{

        font-size:
        clamp(3.2rem, 15vw, 5rem);

        line-height:0.88;
    }

    .sound-btn{

        justify-self:center;

        width:4.2rem;
        
    }

    .answers{

        grid-template-columns:1fr;

        gap:1rem;

        width:100%;
    }

    .answer-btn{

        min-height:5.2rem;

        padding:
        1.15rem 1.2rem;

        font-size:1rem;
    }

    .recent-section{

        width:100%;

        margin-top:2rem;
    }

    .recent-words{

        gap:0.7rem;
    }

    .recent-word{

        width:100%;
    }
    .topbar{

    padding-left:1rem;
}
.question-area,
.question-header,

.answer-btn{

    text-align:center;

    justify-items:center;

    justify-content:center;

    align-items:center;
}

}

.quiz-controls {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.mode-btn {
    display: flex;
    align-items: center;
    gap: 8px;

    border: none;
    border-radius: 14px;

    padding: 12px 16px;

    background: rgba(255,255,255,0.06);

    color: white;

    font-family: inherit;
    cursor: pointer;

    transition: 0.2s;
}

.mode-btn:hover {
    transform: translateY(-2px);
}

.mode-btn.active {
    background: linear-gradient(
        135deg,
        #8b5cf6,
        #6366f1
    );
}

.typing-area {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.typing-area input {
    flex: 1;

    border: none;
    outline: none;

    padding: 14px;
    border-radius: 14px;

    background: rgba(255,255,255,0.08);

    color: white;

    font-size: 1rem;
}

.submit-btn {
    border: none;
    border-radius: 14px;

    padding: 14px 18px;

    background: #8b5cf6;

    color: white;

    cursor: pointer;
}

.hidden {
    display: none;
}

.highscore-box{

    display:flex;

    align-items:center;

    gap:0.7rem;

    padding:
    1rem 1rem;

    font-weight:700;

    backdrop-filter:blur(0.4rem);

    box-shadow:
    0.3rem 0.35rem 0
    rgba(0,0,0,0.18);

    font-size:
    clamp(0.9rem, 1vw, 1rem);

    background:
    rgba(139,92,246,0.14);

    border:
    0.12rem solid rgba(139,92,246,0.18);

    color:#E9DDFF;

    border-radius:
    1.4rem 1rem 1.6rem 1.2rem;

    transform:
    rotate(-.1deg);
    margin-top:0.6rem;}

.highscore-box svg{

    color:#B892FF;
}

#highscore{

    font-weight:800;

    font-size:1.05rem;
}

@keyframes highscoreGlow{

    0%{

        transform:
        rotate(-2deg)
        scale(1);

        background:
        rgba(139,92,246,0.14);

        border-color:
        rgba(139,92,246,0.18);
    }

    35%{

        transform:
        rotate(-1deg)
        scale(1.03);

        background:
        #ffad81d0;

        border-color:
        rgba(255, 173, 129, 0.527);
    }

    100%{

        transform:
        rotate(-2deg)
        scale(1);

        background:
        rgba(139,92,246,0.14);

        border-color:
        rgba(139,92,246,0.18);
    }
}

.highscore-box.new-highscore{

    animation:
    highscoreGlow 0.9s ease;
}