/* ==========================================================
   LESSON 12 — MY BODY & FACE
   Same visual system as previous lessons
========================================================== */

@import url("lesson-5.css");


/* ==========================================================
   BODY
========================================================== */

.body-lesson-body {
    font-family: "Fredoka", sans-serif;
}


/* ==========================================================
   FLOATING DECORATIONS
========================================================== */

.floating-body-one {
    top: 18%;
    left: 5%;
    transform: rotate(-10deg);
}

.floating-body-two {
    top: 42%;
    right: 5%;
    transform: rotate(8deg);
}

.floating-body-three {
    bottom: 12%;
    left: 8%;
    transform: rotate(-5deg);
}


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

.body-intro-page .story-book-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 112px;
    height: 112px;

    margin: 0 auto 22px;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            #fff8eb,
            #f5e7d3
        );

    border: 2px solid rgba(165, 126, 88, 0.13);

    box-shadow:
        0 15px 30px rgba(109, 81, 57, 0.10);

    font-size: 58px;
}


/* ==========================================================
   PART MAP
========================================================== */

.body-map-page {
    position: relative;
}

.body-progress-card {
    margin-bottom: 30px;
}


/* ==========================================================
   PART PROGRESS ICONS
========================================================== */

.body-progress-preview {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-bottom: 18px;
}

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

    width: 52px;
    height: 52px;

    border-radius: 16px;

    background: #f5eee5;

    border: 2px solid rgba(130, 102, 76, 0.08);

    font-size: 26px;

    opacity: 0.55;

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

.body-progress-icon.completed {
    opacity: 1;

    background: #fff8e9;

    transform: translateY(-2px);

    box-shadow:
        0 7px 15px rgba(110, 82, 56, 0.10);
}


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

.body-overall-progress-track {
    width: 100%;
    height: 10px;

    margin-top: 14px;

    overflow: hidden;

    border-radius: 999px;

    background: #eee5da;
}

.body-overall-progress-fill {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #e6caa7,
            #d9b990
        );

    transition: width 0.4s ease;
}


/* ==========================================================
   PART CARDS
========================================================== */

.body-part-card {
    cursor: pointer;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        opacity 0.22s ease;
}

.body-part-card:not(:disabled):hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 30px rgba(96, 72, 50, 0.10);
}

.body-part-card.locked-part {
    cursor: default;
    opacity: 0.58;
}

.body-part-card.completed-part {
    border-color: rgba(181, 153, 111, 0.35);
}


/* ==========================================================
   BODY EXAMPLE ROW
========================================================== */

.body-example-row {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin: 18px 0;
}

.body-example-row span {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 46px;
    height: 42px;

    padding: 0 10px;

    border-radius: 13px;

    background: #faf4eb;

    border: 1px solid rgba(133, 105, 80, 0.08);

    font-size: 21px;
}


/* ==========================================================
   MAP FINISH BUTTON
========================================================== */

.body-map-finish-button {
    margin-top: 30px;
}


/* ==========================================================
   ACTIVE PART HEADING
========================================================== */

.active-part-heading {
    max-width: 700px;

    margin: 0 auto 28px;

    text-align: center;
}

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

    width: 82px;
    height: 82px;

    margin: 0 auto 17px;

    border-radius: 25px;

    background: #fff7e9;

    border: 2px solid rgba(153, 117, 81, 0.10);

    box-shadow:
        0 10px 22px rgba(100, 75, 53, 0.08);

    font-size: 42px;
}

.active-part-heading h2 {
    margin:
        7px 0
        10px;
}

.active-part-heading p:last-child {
    max-width: 570px;

    margin:
        0 auto;

    line-height: 1.65;
}


/* ==========================================================
   PART WORD PROGRESS
========================================================== */

.body-part-progress-card {
    max-width: 650px;

    margin:
        0 auto
        22px;

    padding:
        17px
        20px;

    border-radius: 20px;

    background: rgba(255, 251, 244, 0.94);

    border: 1px solid rgba(137, 104, 74, 0.09);

    box-shadow:
        0 8px 20px rgba(101, 76, 52, 0.06);
}

.body-part-progress-information {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 11px;

    font-size: 14px;
}

.body-part-progress-information span {
    color: #857466;
}

.body-part-progress-information strong {
    color: #625348;
}

.body-part-progress-track {
    width: 100%;
    height: 9px;

    overflow: hidden;

    border-radius: 999px;

    background: #eee6dc;
}

.body-part-progress-fill {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #e7c9a4,
            #d9b58b
        );

    transition: width 0.35s ease;
}


/* ==========================================================
   BODY WORD CARD
========================================================== */

.body-learning-card {
    position: relative;

    max-width: 650px;

    margin:
        0 auto;

    text-align: center;
}

.body-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 15px;
}

.body-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;

    padding:
        6px
        12px;

    border-radius: 999px;

    background: #f3e6d7;

    color: #786555;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.06em;
}

.body-card-position {
    color: #9a897b;

    font-size: 13px;
    font-weight: 600;
}


/* ==========================================================
   WORD VISUAL
========================================================== */

.body-learning-visual {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 145px;

    margin:
        5px 0
        13px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #fff9ee,
            #f7ecdd
        );

    border: 1px solid rgba(142, 107, 75, 0.08);
}

.body-learning-emoji {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 105px;
    height: 105px;

    font-size: 69px;

    transition:
        transform 0.2s ease;
}

.body-learning-card:hover .body-learning-emoji {
    transform: scale(1.04);
}


/* ==========================================================
   WORD + TRANSLATION
========================================================== */

.body-learning-card .color-learning-main {
    margin-top: 12px;

    font-size: clamp(35px, 6vw, 52px);
    font-weight: 700;

    color: #55493f;

    text-transform: lowercase;
}

.body-learning-card .color-learning-translation {
    margin-top: 6px;

    color: #958375;

    font-size: 17px;
    font-weight: 500;
}


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

.body-learning-card .listen-button {
    margin-top: 22px;
}


/* ==========================================================
   LEARNED MESSAGE
========================================================== */

.body-learned-message {
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 15px;

    color: #708269;

    font-size: 13px;
    font-weight: 600;
}

.body-learned-message:not([hidden]) {
    display: flex;
}

.body-learned-message span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #e4ecda;
}


/* ==========================================================
   BODY WORD NAVIGATION
========================================================== */

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

    gap: 12px;

    max-width: 650px;

    margin:
        20px auto
        0;
}

.body-navigation .letter-navigation-button {
    flex: 0 0 auto;
}

.body-navigation .next-letter-button {
    flex: 1;
    max-width: 280px;
}


/* ==========================================================
   PART HINT
========================================================== */

.body-part-hint {
    max-width: 600px;

    margin:
        16px auto
        0;

    padding:
        11px
        15px;

    border-radius: 14px;

    background: #fff6e8;

    color: #87705d;

    text-align: center;

    font-size: 13px;
    font-weight: 500;
}

.body-part-hint:not([hidden]) {
    display: block;
}


/* ==========================================================
   PART FINISH
========================================================== */

.body-part-finish-button {
    margin-top: 22px;
}


/* ==========================================================
   WHAT DO WE DO
========================================================== */

.body-use-page {
    max-width: 900px;
}

.body-use-grid {
    display: grid;

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

    gap: 16px;

    margin:
        25px auto;

    max-width: 800px;
}

.body-use-card {
    padding:
        24px
        20px;

    border-radius: 24px;

    background: rgba(255, 251, 244, 0.96);

    border: 1px solid rgba(138, 105, 75, 0.09);

    box-shadow:
        0 10px 24px rgba(98, 73, 51, 0.07);

    text-align: center;
}

.body-use-card:last-child {
    grid-column: 1 / -1;

    max-width: 390px;

    width: 100%;

    justify-self: center;
}

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

    width: 68px;
    height: 68px;

    margin:
        0 auto
        14px;

    border-radius: 21px;

    background: #faf0e3;

    font-size: 37px;
}

.body-use-card strong {
    display: block;

    color: #5e5147;

    font-size: 18px;
    line-height: 1.45;
}

.body-use-card p {
    margin:
        8px 0
        0;

    color: #948174;

    font-size: 14px;
}


/* ==========================================================
   MEMORY CARD
========================================================== */

.body-memory-card {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    max-width: 650px;

    margin:
        24px auto;

    padding:
        19px
        21px;

    border-radius: 20px;

    background: #fff7e8;

    border: 1px solid rgba(155, 119, 83, 0.10);

    color: #6f5d4f;
}

.body-memory-card > div {
    flex: 0 0 auto;

    font-size: 27px;
}

.body-memory-card p {
    margin: 0;

    line-height: 1.65;
}


/* ==========================================================
   BODY DOCTOR
========================================================== */

.body-doctor-page {
    max-width: 850px;
}

.body-doctor-card {
    max-width: 650px;

    margin:
        25px auto
        0;

    text-align: center;
}

.doctor-person {
    margin-top: 8px;

    font-size: 73px;
}

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

    width: 92px;
    height: 92px;

    margin:
        12px auto
        15px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #fff6e8,
            #f4e4d0
        );

    border: 2px solid rgba(153, 113, 76, 0.10);

    box-shadow:
        0 9px 20px rgba(101, 73, 49, 0.07);

    font-size: 54px;
}

.doctor-question {
    margin:
        7px 0
        20px;

    color: #5a4d43;

    font-size: 25px;
}


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

.doctor-choice-grid {
    display: grid;

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

    gap: 10px;

    margin-top: 18px;
}

.doctor-choice-button {
    min-height: 54px;

    padding:
        11px
        12px;

    font-family: inherit;

    font-weight: 600;

    cursor: pointer;

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

.doctor-choice-button:not(:disabled):hover {
    transform: translateY(-2px);
}


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

.doctor-choice-button.correct,
.body-answer-button.correct {
    background: #e5eedb !important;

    border-color: #b8cba8 !important;

    color: #607056 !important;
}

.doctor-choice-button.wrong,
.body-answer-button.wrong {
    background: #f5dfdc !important;

    border-color: #dbb2ad !important;

    color: #8a625d !important;
}

.doctor-choice-button:disabled,
.body-answer-button:disabled {
    cursor: default;
}


/* ==========================================================
   DOCTOR COMPLETE
========================================================== */

.body-doctor-complete {
    max-width: 620px;

    margin:
        25px auto
        0;

    padding:
        34px
        25px;

    border-radius: 28px;

    background: rgba(255, 250, 242, 0.97);

    border: 1px solid rgba(139, 105, 73, 0.09);

    box-shadow:
        0 12px 28px rgba(101, 74, 50, 0.08);

    text-align: center;
}

.body-doctor-complete:not([hidden]) {
    display: block;
}

.body-doctor-complete-icon {
    margin-bottom: 12px;

    font-size: 55px;
}

.body-doctor-complete h3 {
    margin:
        0 0
        8px;

    color: #5a4c42;
}

.body-doctor-complete p {
    max-width: 430px;

    margin:
        0 auto
        22px;

    color: #8d7a6b;

    line-height: 1.6;
}


/* ==========================================================
   GAME WORKSPACE — BODY QUESTIONS
========================================================== */

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

    margin:
        0 auto;

    padding:
        30px
        25px;

    border-radius: 28px;

    background: rgba(255, 251, 244, 0.97);

    border: 1px solid rgba(137, 104, 75, 0.09);

    box-shadow:
        0 12px 28px rgba(99, 74, 51, 0.07);

    text-align: center;
}

.body-question-emoji {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 90px;
    height: 90px;

    margin:
        0 auto
        14px;

    border-radius: 27px;

    background: #fff5e7;

    font-size: 55px;
}

.body-question-card h3 {
    margin:
        10px auto
        20px;

    max-width: 520px;

    color: #594d43;

    font-size: 23px;
    line-height: 1.45;
}


/* ==========================================================
   GAME ANSWER GRID
========================================================== */

.body-answer-grid {
    display: grid;

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

    gap: 11px;

    margin-top: 20px;
}

.body-answer-button {
    min-height: 58px;

    padding:
        12px
        15px;

    border: 2px solid rgba(132, 101, 73, 0.10);

    border-radius: 17px;

    background: #fffaf3;

    color: #625347;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

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

.body-answer-button:not(:disabled):hover {
    transform: translateY(-2px);

    background: #fff5e8;

    border-color: rgba(156, 119, 82, 0.20);

    box-shadow:
        0 7px 15px rgba(97, 72, 49, 0.06);
}


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

.body-question-card .game-feedback,
.body-doctor-card .game-feedback {
    min-height: 28px;

    margin-top: 17px;

    font-size: 14px;
    font-weight: 600;
}

.body-question-card .correct-feedback,
.body-doctor-card .correct-feedback {
    color: #687b5e;
}

.body-question-card .wrong-feedback,
.body-doctor-card .wrong-feedback {
    color: #966b65;
}


/* ==========================================================
   PRACTICE MAP SMALL ADJUSTMENTS
========================================================== */

.body-lesson-body .practice-heading-icon {
    background:
        linear-gradient(
            145deg,
            #fff7e9,
            #f2e2ce
        );
}


/* ==========================================================
   FINISH
========================================================== */

.body-lesson-body .finish-main-icon {
    background:
        linear-gradient(
            145deg,
            #fff6e5,
            #f0ddc4
        );
}

.body-lesson-body .finish-badge {
    background:
        linear-gradient(
            145deg,
            #fff9ee,
            #f5e8d6
        );
}


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

.body-lesson-body .achievement-toast {
    border-color:
        rgba(145, 109, 75, 0.12);
}


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

@keyframes bodyWordPop {

    0% {
        transform: scale(0.94);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.body-word-pop {
    animation:
        bodyWordPop
        0.28s ease;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 760px) {

    .body-use-grid {
        grid-template-columns: 1fr;
    }

    .body-use-card:last-child {
        grid-column: auto;

        max-width: none;
    }

    .doctor-choice-grid {
        grid-template-columns: 1fr;
    }

    .body-answer-grid {
        grid-template-columns: 1fr;
    }

    .body-learning-visual {
        min-height: 125px;
    }

    .body-learning-emoji {
        width: 90px;
        height: 90px;

        font-size: 60px;
    }

}


@media (max-width: 520px) {

    .body-progress-preview {
        gap: 9px;
    }

    .body-progress-icon {
        width: 46px;
        height: 46px;

        font-size: 23px;
    }

    .body-part-progress-card {
        padding:
            15px
            16px;
    }

    .body-learning-card {
        padding:
            22px
            17px;
    }

    .body-navigation {
        gap: 8px;
    }

    .body-use-card {
        padding:
            21px
            16px;
    }

    .body-question-card {
        padding:
            25px
            17px;
    }

    .doctor-person {
        font-size: 63px;
    }

    .doctor-highlight {
        width: 82px;
        height: 82px;

        font-size: 48px;
    }

}


/* ==========================================================
   HIDDEN SAFETY
========================================================== */

[hidden] {
    display: none !important;
}