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

.quiz-page {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 100px 25px;
}


/* =========================
   BACK LINK
========================= */

.quiz-page .back-link {
    position: fixed;

    top: 30px;
    left: 35px;

    z-index: 100;

    color: var(--text, #342d28);

    font-size: 14px;

    text-decoration: none;

    opacity: 0.6;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.quiz-page .back-link:hover {
    opacity: 1;

    transform: translateX(-4px);
}

.back-to-quiz {
    display: inline-block;

    margin-top: 25px;

    padding: 11px 22px;

    border: 1px solid #8b7162;

    color: #342d28;

    text-decoration: none;

    font-family:
        "Playfair Display",
        serif;

    font-size: 14px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.2s ease;
}

.back-to-quiz:hover {
    background: #342d28;

    color: #f4eee4;

    transform: translateY(-2px);
}
/* =========================
   SCREEN
========================= */

.quiz-screen {
    width: min(100%, 760px);

    margin: 0 auto;

    text-align: center;

    animation: quizFadeIn 0.7s ease;
}


/* =========================
   INTRO
========================= */

.quiz-intro h1 {
    margin-bottom: 30px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: clamp(
        55px,
        9vw,
        95px
    );

    font-weight: 500;

    line-height: 0.9;
}

.quiz-description {
    max-width: 520px;

    margin: 0 auto 55px;

    color: var(--muted, #81766d);

    font-size: 17px;

    line-height: 1.8;
}

.quiz-text-answer {
    width: 100%;
    max-width: 600px;

    min-height: 160px;

    padding: 18px;

    resize: vertical;

    border: 1px solid #ddd2c4;
    border-radius: 4px;

    background: #fffdf8;
    color: #342d28;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 20px;
    line-height: 1.6;

    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.quiz-text-answer:focus {
    border-color: #8b7162;

    box-shadow:
        0 0 0 3px rgba(139, 113, 98, 0.08);
}


.text-answer-submit {
    margin-top: 15px;

    padding: 12px 25px;

    border: 1px solid #8b7162;
    border-radius: 3px;

    background: #8b7162;
    color: white;

    font-family:
        "Playfair Display",
        serif;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.2s ease;
}

.text-answer-submit:hover {
    background: #6f594d;

    transform: translateY(-2px);
}

.text-answer-submit:disabled {
    opacity: 0.6;

    cursor: wait;

    transform: none;
}

/* =========================
   LEVEL CARD
========================= */

.level-card {
    width: min(100%, 420px);

    margin: 0 auto 40px;

    padding: 35px 30px;

    background:
        var(--paper, #fffdf8);

    border:
        1px solid
        var(--border, #ddd2c4);

    box-shadow:
        0 15px 35px
        rgba(50, 40, 30, 0.10);

    transform: rotate(-1deg);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.level-card:hover {
    transform:
        rotate(0deg)
        translateY(-4px);

    box-shadow:
        0 20px 45px
        rgba(50, 40, 30, 0.15);
}

.level-number {
    display: block;

    margin-bottom: 12px;

    color:
        var(--muted, #81766d);

    font-size: 11px;

    letter-spacing: 4px;

    text-transform: uppercase;
}

.level-card h2 {
    margin-bottom: 10px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 42px;

    font-weight: 500;
}

.level-card p {
    color:
        var(--muted, #81766d);

    font-size: 13px;
}


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

.quiz-button {
    display: inline-flex;

    justify-content: center;
    align-items: center;

    min-width: 150px;

    padding: 13px 28px;

    border:
        1px solid
        var(--accent, #8b7162);

    border-radius: 3px;

    background:
        var(--accent, #8b7162);

    color: white;

    font-family:
        "Playfair Display",
        serif;

    font-size: 14px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.quiz-button:hover {
    background:
        var(--accent-dark, #6f594d);

    border-color:
        var(--accent-dark, #6f594d);

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 20px
        rgba(50, 40, 30, 0.12);
}

.quiz-button:active {
    transform:
        translateY(-1px);
}

.text-answer-submit {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: auto;

    margin-top: 12px;

    padding: 7px 14px;

    border: 1px solid var(--accent);

    border-radius: 3px;

    background: var(--accent);

    color: white;

    font-family:
        "Playfair Display",
        serif;

    font-size: 0.75rem;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.text-answer-submit:hover {
    background: var(--accent-dark);

    border-color: var(--accent-dark);

    transform: translateY(-1px);
}


.text-answer-submit:disabled {
    opacity: 0.6;

    cursor: default;

    transform: none;
}

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

.question-screen {
    width: min(100%, 800px);
}


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

.quiz-progress {
    width: 100%;

    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 25px;

    padding: 0 5px;

    color:
        var(--muted, #81766d);

    font-size: 12px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.question-card {
    padding: 60px 55px;

    background:
        var(--paper, #fffdf8);

    border:
        1px solid
        var(--border, #ddd2c4);

    box-shadow:
        0 20px 50px
        rgba(50, 40, 30, 0.10);
}

.question-card .section-label {
    margin-bottom: 25px;
}

.question-card h2 {
    max-width: 650px;

    margin: 0 auto 45px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            38px,
            5vw,
            58px
        );

    font-weight: 500;

    line-height: 1.05;
}


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

.answers-container {
    width: 100%;

    display: grid;

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

    gap: 14px;
}

.answer-option {
    position: relative;

    min-height: 65px;

    padding: 15px 20px;

    border:
        1px solid
        var(--border, #ddd2c4);

    border-radius: 3px;

    background:
        transparent;

    color:
        var(--text, #342d28);

    font-family:
        "Playfair Display",
        serif;

    font-size: 15px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.answer-option:hover {
    background:
        rgba(139, 113, 98, 0.08);

    border-color:
        var(--accent, #8b7162);

    transform:
        translateY(-2px);
}

.answer-option:disabled {
    cursor: default;
}


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

.answer-option.correct {
    background:
        rgba(101, 123, 104, 0.14);

    border-color:
        var(--success, #657b68);

    color:
        var(--success, #657b68);
}

.answer-option.wrong {
    background:
        rgba(154, 98, 93, 0.12);

    border-color:
        var(--danger, #9a625d);

    color:
        var(--danger, #9a625d);
}

.answer-option.correct:hover,
.answer-option.wrong:hover {
    transform: none;
}


/* =========================
   FEEDBACK
========================= */

.answer-feedback {
    min-height: 30px;

    margin-top: 25px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 21px;

    opacity: 0;

    transition:
        opacity 0.3s ease;
}

.answer-feedback.visible {
    opacity: 1;
}

.answer-feedback.correct {
    color:
        var(--success, #657b68);
}

.answer-feedback.wrong {
    color:
        var(--danger, #9a625d);
}


/* =========================
   RESULT
========================= */

.quiz-result {
    max-width: 700px;
}

.result-score {
    margin-bottom: 25px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            75px,
            12vw,
            120px
        );

    font-weight: 500;

    line-height: 0.9;
}

.quiz-result h1 {
    margin-bottom: 25px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            50px,
            8vw,
            80px
        );

    font-weight: 500;
}

.result-text {
    max-width: 520px;

    margin: 0 auto 40px;

    color:
        var(--muted, #81766d);

    font-size: 17px;

    line-height: 1.8;
}


/* =========================
   RESULT ACTIONS
========================= */

.result-actions {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 25px;
}

.quiz-button.secondary {
    background:
        transparent;

    color:
        var(--text, #342d28);
}

.quiz-button.secondary:hover {
    background:
        var(--text, #342d28);

    border-color:
        var(--text, #342d28);

    color:
        var(--background, #f4eee4);
}

.quiz-link {
    color:
        var(--text, #342d28);

    font-size: 14px;

    text-decoration: none;

    border-bottom:
        1px solid
        var(--border, #ddd2c4);

    padding-bottom: 5px;

    opacity: 0.65;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.quiz-link:hover {
    opacity: 1;

    transform:
        translateX(4px);
}


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

@keyframes quizFadeIn {

    from {
        opacity: 0;

        transform:
            translateY(18px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


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

@media (max-width: 700px) {

    .quiz-page {
        padding:
            100px 18px 60px;
    }


    .quiz-page .back-link {
        top: 20px;
        left: 20px;

        font-size: 13px;
    }


    .quiz-description {
        font-size: 15px;

        line-height: 1.7;

        margin-bottom: 40px;
    }


    .level-card {
        padding:
            30px 22px;
    }


    .question-card {
        padding:
            45px 22px;
    }


    .question-card h2 {
        font-size:
            clamp(
                34px,
                9vw,
                48px
            );

        margin-bottom: 35px;
    }


    .answers-container {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .answer-option {
        min-height: 58px;

        padding:
            13px 15px;

        font-size: 14px;
    }


    .quiz-progress {
        font-size: 10px;

        letter-spacing: 1.5px;
    }


    .result-actions {
        flex-direction: column;

        gap: 18px;
    }

}


@media (max-width: 400px) {

    .quiz-page {
        padding-left: 14px;
        padding-right: 14px;
    }


    .quiz-intro h1 {
        font-size: 52px;
    }


    .level-card h2 {
        font-size: 36px;
    }


    .question-card {
        padding:
            40px 18px;
    }

}