/* ==========================================================
   LESSON 8 — MY FAMILY
   Warm pastel style matching previous lessons
========================================================== */

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


/* ==========================================================
   VARIABLES
========================================================== */

:root {
    --family-text: #5d5665;
    --family-muted: #8d8692;

    --family-cream-1: #fffdf9;
    --family-cream-2: #fff8ef;

    --family-border: #e7ddd2;
    --family-border-bottom: #d8cbbd;

    --family-purple-1: #f7f3fa;
    --family-purple-2: #eee9f4;
    --family-purple-border: #ded6e7;
    --family-purple-bottom: #c9bed7;

    --family-blue-1: #a9ddf1;
    --family-blue-2: #86cbe5;
    --family-blue-bottom: #67a9c2;

    --family-next-1: #fff4c8;
    --family-next-2: #e8efc6;
    --family-next-bottom: #cbd5a8;

    --family-pink-1: #fff2f4;
    --family-pink-2: #f9e7eb;

    --family-green-1: #f2f7e8;
    --family-green-2: #e5efd5;

    --family-shadow:
        0 14px 32px
        rgba(95, 78, 62, 0.07);
}


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

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

    color: var(--family-text);
}


/* ==========================================================
   BACKGROUND DECORATIONS
========================================================== */

.family-background-decoration {
    position: fixed;

    z-index: -1;

    pointer-events: none;

    opacity: 0.08;

    user-select: none;
}


.family-decoration-one {
    top: 18%;
    left: 4%;

    font-size: 90px;

    transform: rotate(-12deg);
}


.family-decoration-two {
    right: 4%;
    top: 43%;

    font-size: 92px;

    transform: rotate(8deg);
}


.family-decoration-three {
    left: 8%;
    bottom: 7%;

    font-size: 75px;

    transform: rotate(14deg);
}


/* ==========================================================
   COMMON SCREEN
========================================================== */

.family-intro-page,
.family-vocabulary-page,
.family-house-page,
.family-tree-page,
.family-photo-page,
.family-games-page,
.family-challenge-page,
.family-task-page,
.family-finish-page {
    width: min(1000px, calc(100% - 32px));

    min-height: 720px;

    margin: 0 auto;

    padding:
        52px
        42px
        58px;

    position: relative;

    background:
        linear-gradient(
            180deg,
            #fffdfa 0%,
            #fbf7f1 100%
        );

    border: 2px solid #e9e0d7;

    border-radius: 30px;

    box-shadow:
        0 20px 55px
        rgba(105, 89, 90, 0.07);

    text-align: center;
}


/* ==========================================================
   COMMON LABEL
========================================================== */

.screen-label {
    width: fit-content;

    margin:
        0
        auto
        10px;

    padding:
        7px
        12px;

    background: #f7efc9;

    border-radius: 11px;

    color: #85764c;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


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

.little-title-line {
    width: 76px;
    height: 5px;

    margin:
        18px
        auto
        18px;

    background:
        linear-gradient(
            90deg,
            #9675dc,
            #d7a8bb,
            #f1c64d
        );

    border-radius: 999px;
}


/* ==========================================================
   SECTION HEADING
========================================================== */

.family-section-heading {
    width: min(720px, 100%);

    margin:
        0
        auto
        30px;

    text-align: center;
}


.family-section-heading h2 {
    margin: 0;

    color: #554e5d;

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

    line-height: 1.05;
}


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

    color: var(--family-muted);

    font-size: 15px;

    line-height: 1.55;
}


/* ==========================================================
   MAIN YELLOW-GREEN BUTTON
========================================================== */

.family-next-button,
.family-finish-link {
    min-width: 250px;
    min-height: 58px;

    padding:
        0
        24px;

    display: inline-flex;

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

    background:
        linear-gradient(
            180deg,
            var(--family-next-1),
            var(--family-next-2)
        );

    border: 0;

    border-bottom:
        6px solid
        var(--family-next-bottom);

    border-radius: 19px;

    box-shadow:
        0 8px 17px
        rgba(155, 167, 105, 0.12);

    color: #626553;

    font-family: inherit;

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

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.16s ease,
        filter 0.16s ease;
}


.family-next-button:hover,
.family-finish-link:hover {
    transform: translateY(-2px);

    filter: brightness(1.01);
}


.family-next-button:active {
    transform: translateY(2px);
}


/* ==========================================================
   SCREEN 1 — INTRO
========================================================== */

.family-intro-page {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


.family-intro-house {
    margin-bottom: 16px;

    font-size: 105px;

    animation:
        familyHouseFloat
        2.6s
        ease-in-out
        infinite;
}


@keyframes familyHouseFloat {

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

}


.family-intro-page h1 {
    max-width: 760px;

    margin: 0;

    color: #554e5d;

    font-size:
        clamp(
            42px,
            6vw,
            62px
        );

    line-height: 1.05;
}


.family-intro-text {
    margin:
        0
        auto
        22px;

    color: var(--family-muted);

    font-size: 17px;

    line-height: 1.55;
}


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

.family-intro-preview {
    margin:
        5px
        auto
        25px;

    display: flex;

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

    gap: 8px;

    font-size: 50px;
}


.family-intro-preview span {
    display: inline-block;

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


.family-intro-preview span:nth-child(2) {
    animation-delay: 0.1s;
}

.family-intro-preview span:nth-child(3) {
    animation-delay: 0.2s;
}

.family-intro-preview span:nth-child(4) {
    animation-delay: 0.3s;
}

.family-intro-preview span:nth-child(5) {
    animation-delay: 0.4s;
}

.family-intro-preview span:nth-child(6) {
    animation-delay: 0.5s;
}

.family-intro-preview span:nth-child(7) {
    animation-delay: 0.6s;
}


@keyframes familyPersonWave {

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

}


/* ==========================================================
   MISSION CARD
========================================================== */

.family-mission-card {
    width: min(610px, 100%);

    margin:
        0
        auto
        28px;

    padding:
        18px
        20px;

    display: flex;

    align-items: center;

    gap: 17px;

    background:
        linear-gradient(
            135deg,
            #fff7ea,
            #f5effc,
            #eef8ff
        );

    border: 2px solid #e2d8e8;

    border-bottom:
        5px solid #cec0d8;

    border-radius: 20px;

    text-align: left;
}


.family-mission-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: grid;
    place-items: center;

    background: #ffffff;

    border-radius: 17px;

    font-size: 29px;
}


.family-mission-card small {
    display: block;

    margin-bottom: 3px;

    color: #9a819d;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.family-mission-card strong {
    display: block;

    margin-bottom: 4px;

    color: #5d5665;

    font-size: 18px;
}


.family-mission-card p {
    margin: 0;

    color: #817985;

    font-size: 13px;

    line-height: 1.45;
}


/* ==========================================================
   SCREEN 2 — VOCABULARY
========================================================== */

.family-vocabulary-page {
    text-align: center;
}


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

.family-word-progress {
    width: min(674px, 100%);

    min-height: 96px;

    margin:
        0
        auto
        24px;

    padding:
        17px
        18px;

    display: grid;

    grid-template-columns:
        55px
        1fr;

    gap: 14px;

    align-items: center;

    background:
        rgba(255, 252, 247, 0.8);

    border: 2px solid #e8dfd4;

    border-radius: 19px;
}


.family-progress-info {
    text-align: left;
}


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

    color: #8b8490;

    font-size: 11px;
}


.family-progress-info strong {
    color: #6d6575;

    font-size: 13px;
}


.family-progress-info strong span {
    display: inline;

    color: inherit;

    font-size: inherit;
}


.family-word-progress-track {
    height: 13px;

    overflow: hidden;

    background: #ebe6ef;

    border-radius: 999px;
}


.family-word-progress-fill {
    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #9578db,
            #d6a6bd,
            #efc752
        );

    border-radius: inherit;

    transition:
        width
        0.35s
        ease;
}


/* ==========================================================
   FAMILY LEARNING CARD
   SAME VISUAL SYSTEM AS COLORS / TOYS
========================================================== */

.family-learning-card {
    width: min(674px, 100%);

    min-height: 475px;

    margin: 0 auto;

    padding:
        28px
        30px
        30px;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #fffdf9 0%,
            #fffaf3 100%
        );

    border:
        2px solid
        var(--family-border);

    border-bottom:
        7px solid
        var(--family-border-bottom);

    border-radius: 29px;

    box-shadow:
        var(--family-shadow);

    text-align: center;
}


/* ==========================================================
   NEW WORD LABEL
========================================================== */

.family-new-word-label {
    position: absolute;

    top: 28px;
    left: 30px;

    padding:
        8px
        13px;

    background: #f7efc9;

    border-radius: 12px;

    color: #85764c;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    line-height: 1;
}


/* ==========================================================
   WORD POSITION
========================================================== */

.family-card-position {
    position: absolute;

    top: 28px;
    right: 30px;

    padding:
        8px
        13px;

    background: #f2eefb;

    border-radius: 13px;

    color: #756796;

    font-size: 12px;

    font-weight: 700;

    line-height: 1;
}


/* ==========================================================
   PERSON
========================================================== */

.family-person {
    margin:
        52px
        auto
        13px;

    font-size: 116px;

    line-height: 1;

    animation:
        familyPersonPop
        0.42s
        ease;
}


.family-person.family-person-pop {
    animation:
        familyPersonPop
        0.42s
        ease;
}


@keyframes familyPersonPop {

    0% {
        opacity: 0;

        transform:
            scale(0.78);
    }

    70% {
        transform:
            scale(1.08);
    }

    100% {
        opacity: 1;

        transform:
            scale(1);
    }

}


/* ==========================================================
   FAMILY WORD
========================================================== */

.family-learning-main {
    margin:
        4px
        0
        0;

    color: #5d5565;

    font-size:
        clamp(
            40px,
            6vw,
            52px
        );

    font-weight: 700;

    line-height: 1.05;
}


.family-learning-translation {
    margin:
        12px
        0
        23px;

    color: #918995;

    font-size: 16px;
}


/* ==========================================================
   LISTEN BUTTON — BLUE
========================================================== */

.family-listen-button {
    min-width: 208px;
    min-height: 58px;

    padding:
        0
        24px;

    display: inline-flex;

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

    background:
        linear-gradient(
            180deg,
            var(--family-blue-1),
            var(--family-blue-2)
        );

    border: 0;

    border-bottom:
        6px solid
        var(--family-blue-bottom);

    border-radius: 18px;

    box-shadow:
        0 7px 15px
        rgba(91, 172, 203, 0.14);

    color: #ffffff;

    font-family: inherit;

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

    cursor: pointer;

    transition:
        transform
        0.15s
        ease;
}


.family-listen-button:hover {
    transform: translateY(-2px);
}


.family-listen-button:active {
    transform: translateY(2px);
}


/* ==========================================================
   LISTENED
========================================================== */

.family-listened-message {
    min-height: 18px;

    margin-top: 11px;

    color: #7f9874;

    font-size: 12px;

    font-weight: 600;

    opacity: 0;

    transition:
        opacity
        0.2s
        ease;
}


.family-listened-message.visible {
    opacity: 1;
}


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

.family-card-navigation {
    width: min(674px, 100%);

    margin:
        18px
        auto
        0;

    display: flex;

    justify-content: center;

    gap: 12px;
}


.family-back-button {
    width: 58px;
    min-width: 58px;
    height: 58px;

    padding: 0;

    background:
        linear-gradient(
            180deg,
            #faf8fd,
            #f2eef7
        );

    border: 2px solid #e5dfea;

    border-bottom:
        5px solid #d6cddd;

    border-radius: 17px;

    color: #aaa3af;

    font-family: inherit;

    font-size: 20px;

    cursor: pointer;
}


.family-card-navigation .family-next-button {
    width: 274px;
}


.family-finish-vocabulary {
    margin-top: 18px;
}


.family-finish-vocabulary[hidden] {
    display: none !important;
}


/* ==========================================================
   SCREEN 3 — FAMILY HOUSE
========================================================== */

.house-game-status {
    width: fit-content;

    margin:
        0
        auto
        20px;

    padding:
        9px
        15px;

    background: #f2eefb;

    border-radius: 999px;

    color: #756796;

    font-size: 12px;

    font-weight: 600;
}


.family-house-game {
    width: min(860px, 100%);

    margin:
        0
        auto
        28px;

    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    gap: 28px;

    align-items: center;
}


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

.house-question-card {
    min-height: 390px;

    padding:
        25px
        22px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #fffdf9,
            #fff8ef
        );

    border: 2px solid var(--family-border);

    border-bottom:
        7px solid
        var(--family-border-bottom);

    border-radius: 27px;

    box-shadow:
        var(--family-shadow);
}


.house-question-label {
    width: fit-content;

    margin:
        0
        auto
        12px;

    padding:
        7px
        11px;

    background: #f7efc9;

    border-radius: 10px;

    color: #85764c;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;
}


.house-question-person {
    margin:
        5px
        auto
        10px;

    font-size: 92px;
}


.house-question-card > p {
    margin:
        0
        0
        15px;

    color: #8c8490;

    font-size: 13px;
}


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

.house-answer-grid {
    display: grid;

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

    gap: 10px;
}


.house-answer-grid button {
    min-height: 48px;

    padding:
        10px
        12px;

    background:
        linear-gradient(
            180deg,
            var(--family-purple-1),
            var(--family-purple-2)
        );

    border:
        2px solid
        var(--family-purple-border);

    border-bottom:
        5px solid
        var(--family-purple-bottom);

    border-radius: 14px;

    color: #675f73;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;
}


.house-answer-grid button.correct {
    background: #edf6e7;

    border-color: #bdd1ae;
}


.house-answer-grid button.wrong {
    background: #faecec;

    border-color: #ddb1b1;
}


.house-feedback {
    min-height: 22px;

    margin-top: 12px;

    color: #7f9874;

    font-size: 12px;

    font-weight: 600;
}


/* ==========================================================
   THE HOUSE
========================================================== */

.family-house {
    width: min(410px, 100%);

    margin: 0 auto;

    filter:
        drop-shadow(
            0 16px 18px
            rgba(95, 78, 62, 0.09)
        );
}


.house-roof {
    width: 0;
    height: 0;

    margin: 0 auto -2px;

    position: relative;

    border-left:
        205px solid transparent;

    border-right:
        205px solid transparent;

    border-bottom:
        130px solid #e9b7b2;
}


.house-roof span {
    position: absolute;

    top: 65px;
    left: -16px;

    color: #fff7f4;

    font-size: 35px;
}


.house-body {
    min-height: 330px;

    padding:
        35px
        30px
        0;

    display: grid;

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

    gap:
        25px
        34px;

    background:
        linear-gradient(
            180deg,
            #fff0d7,
            #f6dfbd
        );

    border:
        4px solid #e2c99f;

    border-radius:
        0
        0
        20px
        20px;
}


/* ==========================================================
   HOUSE WINDOWS
========================================================== */

.house-window,
.house-door {
    display: grid;

    place-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #dff2f8,
            #c8e5ef
        );

    border:
        5px solid #ffffff;

    box-shadow:
        0 0 0 3px #d8c6ab;

    color: #a5a0a4;

    font-size: 34px;

    font-weight: 700;
}


.house-window {
    width: 105px;
    height: 90px;

    margin: 0 auto;

    border-radius:
        14px
        14px
        5px
        5px;
}


.house-door {
    width: 90px;
    height: 115px;

    grid-column:
        1 / 3;

    margin:
        -3px
        auto
        0;

    align-self: end;

    background:
        linear-gradient(
            180deg,
            #d7b79d,
            #c99e7e
        );

    border-radius:
        12px
        12px
        0
        0;

    color: #f8eadc;
}


.house-window span,
.house-door span {
    font-size: 50px;
}


.house-window.filled,
.house-door.filled {
    animation:
        familyHousePersonIn
        0.5s
        ease;
}


@keyframes familyHousePersonIn {

    0% {
        transform:
            scale(0.6);

        opacity: 0;
    }

    70% {
        transform:
            scale(1.12);
    }

    100% {
        transform:
            scale(1);

        opacity: 1;
    }

}


/* ==========================================================
   SCREEN 4 — FAMILY TREE
========================================================== */

.family-tree-card {
    width: min(780px, 100%);

    margin:
        0
        auto
        20px;

    padding:
        35px
        30px;

    background:
        linear-gradient(
            180deg,
            #fffdf9,
            #fff8ef
        );

    border: 2px solid var(--family-border);

    border-bottom:
        7px solid
        var(--family-border-bottom);

    border-radius: 29px;

    box-shadow:
        var(--family-shadow);
}


.tree-generation {
    position: relative;

    z-index: 2;

    display: flex;

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

    gap: 14px;
}


.tree-children {
    gap: 20px;
}


.tree-person-card {
    width: 165px;
    min-height: 160px;

    padding:
        14px
        10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    background: #ffffff;

    border: 2px solid #e4dde7;

    border-bottom:
        5px solid #d1c7d8;

    border-radius: 20px;

    font-family: inherit;

    cursor: pointer;

    transition:
        transform
        0.16s
        ease;
}


.tree-person-card:hover {
    transform: translateY(-3px);
}


.tree-person-card > span {
    margin-bottom: 7px;

    font-size: 50px;
}


.tree-person-card strong {
    color: #5d5665;

    font-size: 15px;
}


.tree-person-card small {
    margin-top: 3px;

    color: #918995;

    font-size: 11px;
}


.tree-person-card i {
    margin-top: 8px;

    font-size: 13px;

    font-style: normal;
}


.tree-family-link {
    color: #d7a6b1;

    font-size: 25px;
}


.tree-line {
    width: 4px;
    height: 42px;

    margin: 0 auto;

    background: #d8cddc;

    border-radius: 999px;
}


.tree-tip {
    width: fit-content;

    margin:
        0
        auto
        25px;

    padding:
        10px
        14px;

    background:
        linear-gradient(
            135deg,
            #fff7ea,
            #f5effc
        );

    border: 2px solid #e2d8e8;

    border-radius: 14px;

    color: #817985;

    font-size: 11px;
}


/* ==========================================================
   SCREEN 5 — FAMILY PHOTO
========================================================== */

.family-photo-card {
    width: min(820px, 100%);

    margin:
        0
        auto
        28px;

    display: grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    gap: 26px;

    align-items: center;
}


/* ==========================================================
   PHOTO FRAME
========================================================== */

.photo-frame {
    padding:
        18px
        18px
        15px;

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

    border: 2px solid #e3d8cc;

    border-bottom:
        8px solid #d2c2b3;

    border-radius: 10px;

    box-shadow:
        0 15px 30px
        rgba(95, 78, 62, 0.08);

    transform: rotate(-1deg);
}


.photo-family {
    min-height: 285px;

    padding:
        25px
        18px;

    display: flex;

    flex-wrap: wrap;

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

    gap: 8px;

    background:
        linear-gradient(
            180deg,
            #dff2fa 0%,
            #edf7f7 55%,
            #e6efd5 56%,
            #d9e7c2 100%
        );

    border-radius: 4px;

    font-size: 64px;
}


.empty-photo-person {
    width: 64px;
    height: 80px;

    display: grid;
    place-items: center;

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

    border:
        2px dashed
        rgba(104, 97, 110, 0.22);

    border-radius: 999px;

    color:
        rgba(104, 97, 110, 0.28);

    font-size: 25px;
}


.photo-frame-bottom {
    padding-top: 13px;

    color: #857c84;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


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

.photo-question {
    min-height: 300px;

    padding:
        25px
        22px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #fffdf9,
            #fff8ef
        );

    border: 2px solid var(--family-border);

    border-bottom:
        7px solid
        var(--family-border-bottom);

    border-radius: 26px;
}


.photo-question-number {
    width: fit-content;

    margin:
        0
        auto
        14px;

    padding:
        7px
        11px;

    background: #f2eefb;

    border-radius: 999px;

    color: #756796;

    font-size: 11px;

    font-weight: 700;
}


.photo-question h3 {
    margin:
        0
        0
        18px;

    color: #5d5665;

    font-size: 26px;
}


.photo-options {
    display: grid;

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

    gap: 10px;
}


.photo-options button {
    min-height: 75px;

    padding: 10px;

    background:
        linear-gradient(
            180deg,
            var(--family-purple-1),
            var(--family-purple-2)
        );

    border:
        2px solid
        var(--family-purple-border);

    border-bottom:
        5px solid
        var(--family-purple-bottom);

    border-radius: 15px;

    font-family: inherit;

    font-size: 37px;

    cursor: pointer;
}


.photo-options button.correct {
    background: #edf6e7;

    border-color: #bdd1ae;
}


.photo-options button.wrong {
    background: #faecec;

    border-color: #ddb1b1;
}


.photo-feedback {
    min-height: 20px;

    margin-top: 12px;

    color: #7f9874;

    font-size: 12px;

    font-weight: 600;
}


/* ==========================================================
   SCREEN 6 — GAMES
========================================================== */

.family-games-grid {
    width: min(790px, 100%);

    margin:
        0
        auto
        28px;

    display: grid;

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

    gap: 22px;
}


.family-game-card {
    min-height: 315px;

    padding:
        25px
        22px;

    position: relative;

    background:
        linear-gradient(
            180deg,
            #fffdf9,
            #fff8ef
        );

    border: 2px solid var(--family-border);

    border-bottom:
        7px solid
        var(--family-border-bottom);

    border-radius: 26px;

    box-shadow:
        var(--family-shadow);
}


.family-game-number {
    position: absolute;

    top: 16px;
    right: 16px;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    background: #f2eefb;

    border-radius: 50%;

    color: #756796;

    font-size: 11px;

    font-weight: 700;
}


.family-game-icon {
    margin:
        10px
        0
        10px;

    font-size: 65px;
}


.family-game-card small {
    color: #987a9b;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.family-game-card h3 {
    margin:
        5px
        0
        8px;

    color: #5d5665;

    font-size: 24px;
}


.family-game-card p {
    min-height: 42px;

    margin:
        0
        0
        20px;

    color: #817a85;

    font-size: 13px;

    line-height: 1.5;
}


.family-game-button {
    min-width: 135px;

    padding:
        12px
        17px;

    display: inline-flex;

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

    background:
        linear-gradient(
            180deg,
            var(--family-purple-1),
            var(--family-purple-2)
        );

    border:
        2px solid
        var(--family-purple-border);

    border-bottom:
        5px solid
        var(--family-purple-bottom);

    border-radius: 15px;

    color: #675f73;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;
}


/* ==========================================================
   SCREEN 7 — CHALLENGE MAP
========================================================== */

.family-lock-note {
    width: fit-content;

    margin:
        0
        auto
        27px;

    padding:
        10px
        15px;

    background:
        linear-gradient(
            135deg,
            #fff7ea,
            #f5effc
        );

    border: 2px solid #e2d8e8;

    border-radius: 14px;

    color: #817985;

    font-size: 11px;
}


.family-challenge-map {
    width: min(620px, 100%);

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;
}


.family-level {
    width: min(500px, 100%);

    min-height: 90px;

    padding:
        15px
        18px;

    display: grid;

    grid-template-columns:
        60px
        1fr;

    grid-template-rows:
        auto
        auto;

    column-gap: 15px;

    align-items: center;

    background:
        linear-gradient(
            180deg,
            #fffdf9,
            #fff8ef
        );

    border: 2px solid var(--family-border);

    border-bottom:
        6px solid
        var(--family-border-bottom);

    border-radius: 22px;

    color: #5d5665;

    font-family: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        transform
        0.16s
        ease;
}


.family-level:not(:disabled):hover {
    transform: translateY(-2px);
}


.family-level-icon {
    width: 54px;
    height: 54px;

    grid-row:
        1 / 3;

    display: grid;
    place-items: center;

    background: #f2eefb;

    border-radius: 16px;

    font-size: 25px;
}


.family-level strong {
    align-self: end;

    font-size: 17px;
}


.family-level small {
    align-self: start;

    margin-top: 3px;

    color: #918995;

    font-size: 10px;
}


.family-level:disabled {
    opacity: 0.55;

    cursor: not-allowed;
}


.active-family-level {
    border-color: #ddd0a8;

    border-bottom-color: #cdbf8f;

    background:
        linear-gradient(
            180deg,
            #fffdf5,
            #fff7dc
        );
}


.family-path {
    width: 4px;
    height: 26px;

    background: #ddd5df;

    border-radius: 999px;
}


/* ==========================================================
   SCREEN 8 — TASK
========================================================== */

.family-task-back {
    position: absolute;

    top: 28px;
    left: 30px;

    padding:
        9px
        13px;

    background:
        linear-gradient(
            180deg,
            var(--family-purple-1),
            var(--family-purple-2)
        );

    border: 2px solid var(--family-purple-border);

    border-radius: 13px;

    color: #675f73;

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;
}


.family-task-page .family-section-heading {
    margin-top: 35px;
}


.family-task-workspace {
    width: min(690px, 100%);

    min-height: 350px;

    margin:
        0
        auto;

    padding:
        28px
        25px;

    background:
        linear-gradient(
            180deg,
            #fffdf9,
            #fff8ef
        );

    border: 2px solid var(--family-border);

    border-bottom:
        7px solid
        var(--family-border-bottom);

    border-radius: 27px;

    box-shadow:
        var(--family-shadow);
}


/* ==========================================================
   DYNAMIC TASK ELEMENTS
========================================================== */

.family-task-question {
    margin:
        0
        0
        20px;

    color: #5d5665;

    font-size: 24px;

    font-weight: 700;
}


.family-task-emoji {
    margin-bottom: 15px;

    font-size: 90px;
}


.family-task-options {
    display: grid;

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

    gap: 11px;

    margin-top: 18px;
}


.family-task-option {
    min-height: 55px;

    padding:
        11px
        14px;

    background:
        linear-gradient(
            180deg,
            var(--family-purple-1),
            var(--family-purple-2)
        );

    border:
        2px solid
        var(--family-purple-border);

    border-bottom:
        5px solid
        var(--family-purple-bottom);

    border-radius: 15px;

    color: #675f73;

    font-family: inherit;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;
}


.family-task-option.correct {
    background: #edf6e7;

    border-color: #bdd1ae;
}


.family-task-option.wrong {
    background: #faecec;

    border-color: #ddb1b1;
}


.family-task-input {
    width: min(320px, 100%);

    margin:
        18px
        auto;

    padding:
        13px
        15px;

    display: block;

    background: #ffffff;

    border: 2px solid #dad2e3;

    border-bottom:
        5px solid #c8bdd5;

    border-radius: 15px;

    color: #5f5868;

    font-family: inherit;

    font-size: 19px;

    font-weight: 600;

    text-align: center;

    outline: none;
}


.family-task-input:focus {
    border-color: #b7a8ca;

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


.family-task-feedback {
    min-height: 24px;

    margin-top: 13px;

    font-size: 13px;

    font-weight: 600;
}


/* ==========================================================
   SCREEN 9 — FINISH
========================================================== */

.family-finish-page {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


.family-finish-house {
    margin-bottom: 15px;

    font-size: 105px;

    animation:
        finishFamilyHouse
        2.5s
        ease-in-out
        infinite;
}


@keyframes finishFamilyHouse {

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

}


.family-finish-page h2 {
    margin: 0;

    color: #554e5d;

    font-size:
        clamp(
            42px,
            6vw,
            60px
        );
}


.family-finish-text {
    max-width: 540px;

    margin:
        0
        auto
        20px;

    color: #8d8692;

    font-size: 16px;

    line-height: 1.55;
}


.family-finish-photo {
    margin-bottom: 27px;

    padding:
        16px
        20px;

    display: flex;

    justify-content: center;

    gap: 4px;

    background:
        linear-gradient(
            180deg,
            #fffdf9,
            #fff8ef
        );

    border: 2px solid var(--family-border);

    border-bottom:
        6px solid
        var(--family-border-bottom);

    border-radius: 22px;

    font-size: 46px;
}


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

.family-finish-statistics {
    width: min(620px, 100%);

    margin:
        0
        auto
        27px;

    display: grid;

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

    gap: 12px;
}


.family-finish-statistics > div {
    min-height: 125px;

    padding:
        15px
        10px;

    display: flex;

    flex-direction: column;

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

    background:
        linear-gradient(
            180deg,
            #fffdf9,
            #fff8ef
        );

    border: 2px solid var(--family-border);

    border-bottom:
        5px solid
        var(--family-border-bottom);

    border-radius: 20px;
}


.family-finish-statistics span {
    margin-bottom: 4px;

    font-size: 26px;
}


.family-finish-statistics strong {
    color: #5d5665;

    font-size: 23px;
}


.family-finish-statistics small {
    margin-top: 3px;

    color: #918995;

    font-size: 10px;
}


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

.family-achievement-toast {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 1000;

    width: min(340px, calc(100% - 32px));

    padding:
        15px
        17px;

    display: flex;

    align-items: center;

    gap: 13px;

    background:
        linear-gradient(
            180deg,
            #fffdf7,
            #fff6dc
        );

    border: 2px solid #eadcb2;

    border-bottom:
        6px solid #d5c38f;

    border-radius: 19px;

    box-shadow:
        0 18px 40px
        rgba(80, 70, 50, 0.15);

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(25px);

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


.family-achievement-toast.show {
    opacity: 1;

    transform:
        translateY(0);
}


.family-achievement-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: grid;
    place-items: center;

    background: #ffffff;

    border-radius: 15px;

    font-size: 27px;
}


.family-achievement-toast small {
    display: block;

    color: #a18c54;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}


.family-achievement-toast strong {
    display: block;

    color: #625c50;

    font-size: 16px;
}


.family-achievement-toast p {
    margin:
        2px
        0
        0;

    color: #8b8272;

    font-size: 11px;
}


/* ==========================================================
   CONFETTI
========================================================== */

.family-confetti-layer {
    position: fixed;

    inset: 0;

    z-index: 999;

    overflow: hidden;

    pointer-events: none;
}


.family-confetti-piece {
    position: absolute;

    top: -25px;

    width: 11px;
    height: 15px;

    border-radius: 3px;

    animation:
        familyConfettiFall
        2.3s
        linear
        forwards;
}


@keyframes familyConfettiFall {

    0% {
        opacity: 1;

        transform:
            translateY(-20px)
            rotate(0deg);
    }

    100% {
        opacity: 0;

        transform:
            translateY(105vh)
            rotate(650deg);
    }

}


/* ==========================================================
   UTILITY STATES FOR JS
========================================================== */

.family-correct {
    color: #719166;
}


.family-wrong {
    color: #b06f6f;
}


.family-hidden {
    display: none !important;
}


button:disabled {
    cursor: not-allowed;
}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 820px) {

    .family-house-game,
    .family-photo-card {
        grid-template-columns: 1fr;
    }


    .family-house {
        margin-top: 10px;
    }


    .family-games-grid {
        grid-template-columns: 1fr;
    }


    .family-game-card {
        width: min(500px, 100%);

        margin: 0 auto;
    }


    .tree-person-card {
        width: 145px;
    }

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 620px) {

    .family-intro-page,
    .family-vocabulary-page,
    .family-house-page,
    .family-tree-page,
    .family-photo-page,
    .family-games-page,
    .family-challenge-page,
    .family-task-page,
    .family-finish-page {
        width: calc(100% - 18px);

        padding:
            38px
            15px
            42px;

        border-radius: 23px;
    }


    .family-intro-preview {
        flex-wrap: wrap;

        font-size: 42px;
    }


    .family-mission-card {
        align-items: flex-start;
    }


    .family-learning-card {
        min-height: 440px;

        padding:
            24px
            18px
            26px;
    }


    .family-new-word-label {
        top: 22px;
        left: 20px;
    }


    .family-card-position {
        top: 22px;
        right: 20px;
    }


    .family-person {
        font-size: 98px;
    }


    .family-card-navigation .family-next-button {
        flex: 1;

        min-width: 0;
    }


    .house-answer-grid,
    .photo-options,
    .family-task-options {
        grid-template-columns: 1fr;
    }


    .house-roof {
        border-left-width: 155px;
        border-right-width: 155px;
        border-bottom-width: 105px;
    }


    .house-roof span {
        top: 52px;
    }


    .family-house {
        width: 310px;
        max-width: 100%;
    }


    .house-body {
        padding:
            28px
            15px
            0;

        gap:
            22px
            12px;
    }


    .house-window {
        width: 88px;
        height: 78px;
    }


    .tree-generation {
        gap: 7px;
    }


    .tree-children {
        gap: 7px;
    }


    .tree-person-card {
        width: 30%;

        min-width: 0;

        min-height: 140px;

        padding:
            10px
            5px;
    }


    .tree-person-card > span {
        font-size: 40px;
    }


    .tree-person-card strong {
        font-size: 11px;
    }


    .tree-family-link {
        font-size: 17px;
    }


    .family-finish-photo {
        flex-wrap: wrap;
    }


    .family-finish-statistics {
        grid-template-columns: 1fr;
    }


    .family-task-back {
        position: static;

        margin:
            0
            auto
            25px;

        display: block;
    }


    .family-task-page .family-section-heading {
        margin-top: 0;
    }

}