/* ==================================================
   LESSON 4 — AGE & BIRTHDAY
   Uses Lesson 3 visual system
================================================== */

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


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

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


/* ==================================================
   GOAL ICON
================================================== */

.birthday-goal-icon {
    background:
        linear-gradient(
            135deg,
            #fff1e7,
            #fff8ef
        );
}


/* ==================================================
   PARTS HEADING
================================================== */

.parts-heading {
    max-width: 700px;

    margin:
        0
        auto
        30px;

    text-align: center;
}


.parts-heading-icon {
    width: 86px;
    height: 86px;

    margin:
        0
        auto
        16px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #f4eef9,
            #fff4e9
        );

    border: 2px solid #e5dbea;
    border-bottom: 6px solid #d2c4dd;
    border-radius: 27px;

    box-shadow:
        0 10px 24px
        rgba(112, 89, 131, 0.08);

    font-size: 45px;
}


.parts-heading h2 {
    margin:
        0
        0
        10px;

    color: #514b59;

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


.parts-heading > p:last-child {
    margin: 0;

    color: #817b87;

    font-size: 15px;
    line-height: 1.5;
}


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

.birthday-present-progress {
    width: min(640px, 100%);

    margin:
        0
        auto
        32px;

    padding:
        22px;

    background:
        linear-gradient(
            135deg,
            #fff8ee,
            #f5f0fa
        );

    border: 2px solid #eadfd5;
    border-bottom: 6px solid #d8c9bd;
    border-radius: 26px;

    box-shadow:
        0 12px 28px
        rgba(109, 87, 69, 0.07);

    text-align: center;
}


.birthday-present {
    margin-bottom: 12px;

    position: relative;

    display: inline-block;

    animation:
        presentFloat
        2.4s
        ease-in-out
        infinite;
}


.present-bow {
    position: absolute;

    top: -14px;
    left: 50%;

    transform:
        translateX(-50%);

    font-size: 32px;

    z-index: 2;
}


.present-box {
    font-size: 74px;
}


@keyframes presentFloat {

    50% {
        transform:
            translateY(-6px);
    }

}


.present-progress-info {
    margin-bottom: 12px;
}


.present-progress-info span {
    display: block;

    color: #8b8290;

    font-size: 11px;
}


.present-progress-info strong {
    display: block;

    margin-top: 2px;

    color: #625a69;

    font-size: 19px;
}


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

.lesson-parts-map {
    width: min(820px, 100%);

    margin: 0 auto;

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

    gap: 22px;
}


/* ==================================================
   PART CARD EXTRA
================================================== */

.lesson-part-card {
    min-height: 330px;

    display: flex;
    flex-direction: column;
}


.lesson-part-card .lesson-part-icon {
    margin:
        20px
        auto
        12px;
}


.lesson-part-card h3 {
    margin:
        0
        20px
        8px;

    color: #554f5c;

    font-size: 24px;

    text-align: center;
}


.lesson-part-card > p {
    margin:
        0
        20px
        14px;

    color: #817a84;

    font-size: 14px;
    line-height: 1.45;

    text-align: center;
}


.lesson-part-example {
    margin:
        auto
        18px
        18px;

    padding:
        11px
        12px;

    background:
        #f7f3f8;

    border-radius: 13px;

    color: #6d6379;

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

    line-height: 1.45;

    text-align: center;
}


/* Part accents */

#partMyAge {
    border-color: #e5ddeb;
    border-bottom-color: #d1c6dd;
}


#partAskAge {
    border-color: #dbe6eb;
    border-bottom-color: #c9d8df;
}


#partHappyBirthday {
    border-color: #eadfd1;
    border-bottom-color: #d9cbbb;
}


#partBirthdayWords {
    border-color: #e1e7d8;
    border-bottom-color: #cdd8bf;
}


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

.birthday-unlock-button {
    margin:
        32px
        auto
        0;
}


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

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

    margin:
        0
        auto
        24px;

    text-align: center;
}


.active-part-icon {
    width: 88px;
    height: 88px;

    margin:
        0
        auto
        16px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #f3eef9,
            #fff4e8
        );

    border: 2px solid #e4dbea;
    border-bottom: 6px solid #d1c5dc;
    border-radius: 27px;

    font-size: 44px;
}


.active-part-heading h2 {
    margin:
        0
        0
        8px;

    color: #524b59;

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


.active-part-heading > p:last-child {
    margin: 0;

    color: #817a85;

    font-size: 15px;
}


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

.back-to-parts-button {
    margin-bottom: 24px;

    padding:
        10px
        15px;

    background: #f4f0f7;

    border: 2px solid #ded6e6;
    border-bottom: 4px solid #cbc0d5;
    border-radius: 14px;

    color: #746a80;

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

    cursor: pointer;
}


/* ==================================================
   AGE EXPLANATION
================================================== */

.age-explanation-card {
    width: min(670px, 100%);

    margin:
        0
        auto
        22px;

    padding:
        18px
        20px;

    display: flex;
    align-items: center;
    gap: 15px;

    background:
        linear-gradient(
            135deg,
            #fff8e8,
            #f5f1fa
        );

    border: 2px solid #eadfbd;
    border-bottom: 5px solid #d7c99f;
    border-radius: 21px;
}


.age-explanation-card[hidden] {
    display: none;
}


.age-explanation-icon {
    width: 54px;
    height: 54px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    background: #fff;

    border-radius: 16px;

    font-size: 28px;
}


.age-explanation-card strong {
    display: block;

    margin-bottom: 3px;

    color: #71654d;

    font-size: 14px;
}


.age-explanation-card p {
    margin: 0;

    color: #807665;

    font-size: 13px;
    line-height: 1.5;
}


/* ==================================================
   ACTIVE PART PROGRESS
================================================== */

.active-part-progress {
    width: min(620px, 100%);

    margin:
        0
        auto
        22px;

    padding:
        15px
        17px;

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

    align-items: center;

    gap: 16px;

    background: #faf7f2;

    border: 2px solid #e9e2d9;
    border-radius: 19px;
}


.active-part-progress span {
    display: block;

    color: #8b8490;

    font-size: 11px;
}


.active-part-progress strong {
    color: #655e6c;

    font-size: 17px;
}


.active-part-progress-track {
    height: 12px;

    padding: 2px;

    background: #e8e3eb;

    border-radius: 999px;
}


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

    background:
        linear-gradient(
            90deg,
            #b9a9cf,
            #d3c5df
        );

    border-radius: inherit;

    transition:
        width
        0.35s
        ease;
}


/* ==================================================
   LEARNING CARD
================================================== */

.birthday-learning-card {
    width: min(620px, 100%);

    min-height: 390px;

    margin: 0 auto;

    padding:
        25px
        28px
        28px;

    background:
        linear-gradient(
            180deg,
            #fffefb,
            #faf7f2
        );

    border: 2px solid #e7dfd6;
    border-bottom: 7px solid #d7cdc0;
    border-radius: 29px;

    box-shadow:
        0 14px 32px
        rgba(96, 78, 61, 0.07);

    text-align: center;
}


.birthday-learning-emoji {
    margin:
        15px
        auto
        12px;

    font-size:
        clamp(
            72px,
            10vw,
            105px
        );

    animation:
        birthdayEmojiFloat
        2.2s
        ease-in-out
        infinite;
}


@keyframes birthdayEmojiFloat {

    50% {
        transform:
            translateY(-5px)
            rotate(2deg);
    }

}


.birthday-learning-main {
    margin-bottom: 8px;

    color: #5e5668;

    font-size:
        clamp(
            34px,
            5vw,
            48px
        );

    font-weight: 700;
    line-height: 1.1;
}


.birthday-learning-translation {
    margin-bottom: 24px;

    color: #8a8290;

    font-size: 16px;
}


/* ==================================================
   EARNED STAR
================================================== */

.earned-present-star {
    margin:
        12px
        0
        16px;

    font-size: 52px;

    animation:
        earnedStarPop
        0.55s
        ease;
}


@keyframes earnedStarPop {

    0% {
        opacity: 0;
        transform:
            scale(0.4)
            rotate(-20deg);
    }

    70% {
        transform:
            scale(1.18)
            rotate(7deg);
    }

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

}


/* ==================================================
   BIRTHDAY PARTY PAGE
================================================== */

.birthday-party-page {
    min-height: 760px;

    padding:
        52px
        42px
        55px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #fffaf2,
            #f8f3fa
        );

    border: 2px solid #eadfd7;
    border-radius: var(--card-radius);

    box-shadow:
        0 20px 55px
        rgba(115, 89, 68, 0.08);

    text-align: center;
}


.party-confetti {
    position: absolute;

    top: 20px;
    left: 0;
    right: 0;

    display: flex;
    justify-content: space-around;

    pointer-events: none;

    font-size: 24px;

    opacity: 0.7;
}


.party-present-open {
    margin:
        10px
        auto
        12px;

    font-size: 80px;

    animation:
        partyPresentPop
        0.7s
        ease;
}


@keyframes partyPresentPop {

    0% {
        opacity: 0;
        transform:
            scale(0.5)
            rotate(-10deg);
    }

    70% {
        transform:
            scale(1.12)
            rotate(4deg);
    }

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

}


.birthday-party-page h2 {
    margin:
        0
        0
        12px;

    color: #554e5c;

    font-size:
        clamp(
            39px,
            5vw,
            54px
        );
}


.party-description {
    max-width: 650px;

    margin:
        0
        auto
        28px;

    color: #817985;

    font-size: 15px;
    line-height: 1.55;
}


/* ==================================================
   PARTY INVITATION
================================================== */

.party-invitation-card {
    width: min(650px, 100%);

    margin:
        0
        auto
        28px;

    padding:
        19px
        21px;

    display: flex;
    align-items: center;
    gap: 17px;

    background:
        linear-gradient(
            135deg,
            #fff6ea,
            #f2eef8
        );

    border: 2px solid #eadccf;
    border-bottom: 6px solid #d7c6b6;
    border-radius: 24px;

    text-align: left;
}


.party-character {
    width: 76px;
    height: 76px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    background: #fff;

    border-radius: 22px;

    font-size: 42px;
}


.party-small-label {
    display: block;

    margin-bottom: 3px;

    color: #987d65;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}


.party-invitation-card strong {
    display: block;

    margin-bottom: 5px;

    color: #655a53;

    font-size: 18px;
}


.party-invitation-card p {
    margin: 0;

    color: #81766e;

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


/* ==================================================
   PARTY CHALLENGE AREA
================================================== */

.party-challenge-area {
    width: min(680px, 100%);

    margin:
        0
        auto
        25px;
}


.party-challenge-card {
    padding:
        24px
        22px;

    background:
        linear-gradient(
            180deg,
            #fffefc,
            #faf7f2
        );

    border: 2px solid #e8e0d7;
    border-bottom: 6px solid #d8cdc0;
    border-radius: 25px;

    box-shadow:
        0 10px 24px
        rgba(96, 77, 59, 0.06);
}


.party-challenge-emoji {
    margin-bottom: 10px;

    font-size: 58px;
}


.party-challenge-card h3 {
    margin:
        0
        0
        8px;

    color: #5d5664;

    font-size: 25px;
}


.party-challenge-card p {
    color: #817a85;

    font-size: 14px;
}


.party-continue-button[hidden] {
    display: none;
}


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

.party-choice-grid {
    margin-top: 18px;

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

    gap: 11px;
}


.party-choice {
    padding:
        13px
        14px;

    background:
        linear-gradient(
            180deg,
            #f7f3fa,
            #eee9f4
        );

    border: 2px solid #ded6e7;
    border-bottom: 5px solid #c9bed7;
    border-radius: 15px;

    color: #675f73;

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

    cursor: pointer;
}


.party-choice.correct {
    background: #eef6e8;
    border-color: #bfd1ae;
}


.party-choice.wrong {
    background: #faecec;
    border-color: #ddb1b1;
}


/* ==================================================
   VIDEO CARD EXTRA
================================================== */

.birthday-words-video-card
.video-card-illustration {
    background:
        linear-gradient(
            135deg,
            #f3f7ed,
            #fff5e8
        );
}


/* ==================================================
   PRACTICE MAP — 5 LEVELS
================================================== */

.practice-map {
    width: min(760px, 100%);

    margin-left: auto;
    margin-right: auto;
}


/* ==================================================
   BIRTHDAY GAME HELPERS
================================================== */

.birthday-question-card {
    width: min(650px, 100%);

    margin: 0 auto;

    padding:
        24px
        22px;

    background:
        linear-gradient(
            180deg,
            #fffefb,
            #faf7f2
        );

    border: 2px solid #e8e0d7;
    border-bottom: 6px solid #d8cdc0;
    border-radius: 25px;

    text-align: center;
}


.birthday-question-emoji {
    margin-bottom: 14px;

    font-size: 65px;
}


.birthday-question-card h3 {
    color: #5e5765;

    font-size: 25px;
}


/* ==================================================
   CANDLES
================================================== */

.candle-cake {
    width: min(580px, 100%);

    margin:
        22px
        auto;

    padding: 20px;

    background:
        linear-gradient(
            180deg,
            #fff9ed,
            #f8f3ed
        );

    border: 2px solid #eadfce;
    border-radius: 24px;

    text-align: center;
}


.candle-cake-icon {
    font-size: 70px;
}


.candle-row {
    margin-top: 12px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;

    font-size: 27px;
}


/* ==================================================
   BIRTHDAY WORD GRID
================================================== */

.birthday-word-grid {
    margin:
        22px
        auto;

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

    gap: 11px;
}


.birthday-word-card {
    min-height: 90px;

    padding: 12px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            180deg,
            #fffefb,
            #f6f2ed
        );

    border: 2px solid #e4ddd4;
    border-bottom: 5px solid #d3c8bb;
    border-radius: 17px;

    color: #645d6b;

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

    cursor: pointer;
}


.birthday-word-card.correct {
    background: #eef6e8;
    border-color: #bed1ad;
}


.birthday-word-card.wrong {
    background: #faecec;
    border-color: #ddb1b1;
}


/* ==================================================
   TYPE INPUT
================================================== */

.birthday-text-input {
    width: min(260px, 100%);

    margin:
        15px
        auto;

    padding:
        12px
        14px;

    display: block;

    background: #fff;

    border: 2px solid #dad2e3;
    border-bottom: 5px solid #c8bdd5;
    border-radius: 15px;

    color: #5f5868;

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

    text-align: center;

    outline: none;
}


.birthday-text-input:focus {
    border-color: #b7a8ca;

    box-shadow:
        0 0 0 5px
        rgba(181, 166, 207, 0.12);
}


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

@media (max-width: 760px) {

    .lesson-parts-map {
        grid-template-columns: 1fr;
    }


    .lesson-part-card {
        min-height: 0;
    }


    .birthday-word-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 560px) {

    .birthday-party-page {
        padding:
            38px
            14px
            42px;
    }


    .party-invitation-card {
        flex-direction: column;

        text-align: center;
    }


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


    .active-part-progress {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .age-explanation-card {
        align-items: flex-start;

        padding:
            15px;
    }


    .birthday-learning-card {
        padding:
            20px
            15px
            24px;
    }


    .birthday-learning-main {
        font-size: 35px;
    }


    .birthday-learning-emoji {
        font-size: 75px;
    }


    .birthday-word-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}