/* ==========================================================
   LESSON 15 — MY HOUSE
   SAME VISUAL SYSTEM AS OTHER LESSONS
========================================================== */

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


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

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


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

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

.floating-house-two {
    top: 43%;
    right: 5%;
    transform: rotate(9deg);
}

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


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

.house-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,
            #fff2df,
            #f4dfc7
        );

    border: 2px solid rgba(166, 117, 75, 0.12);

    box-shadow:
        0 15px 30px
        rgba(107, 77, 53, 0.10);

    font-size: 58px;
}


.house-intro-page .mission-icon {
    background:
        linear-gradient(
            145deg,
            #fff7e7,
            #f0eadb
        );
}


/* ==========================================================
   HOUSE MAP
========================================================== */

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


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

.house-key-progress-card {
    width: min(720px, 100%);

    margin:
        0 auto
        30px;

    padding:
        23px
        24px;

    border-radius: 26px;

    background:
        linear-gradient(
            180deg,
            #fffefd,
            #fff8ee
        );

    border: 2px solid #e8ddd0;
    border-bottom: 7px solid #d5c3ae;

    box-shadow:
        0 12px 28px
        rgba(96, 71, 48, 0.07);

    text-align: center;
}


/* ==========================================================
   KEYS
========================================================== */

.key-collection {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    margin-bottom: 20px;
}


.key-slot {
    width: 92px;
    min-height: 92px;

    padding:
        12px
        8px;

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

    gap: 5px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f3ede5,
            #ece5dd
        );

    border: 2px solid #dfd5c9;

    opacity: 0.48;

    filter: grayscale(0.55);

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


.key-slot span {
    font-size: 38px;
}


.key-slot small {
    color: #877a6f;

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

    letter-spacing: 0.8px;
}


.key-slot.completed {
    opacity: 1;

    filter: none;

    background:
        linear-gradient(
            145deg,
            #fff2c7,
            #f6dfa0
        );

    border-color: #e3c67b;

    transform: translateY(-3px);

    box-shadow:
        0 9px 18px
        rgba(137, 105, 46, 0.11);
}


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

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

    margin-top: 14px;

    overflow: hidden;

    border-radius: 999px;

    background: #eee6dd;
}


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

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #deb97e,
            #e5ca8d,
            #b7c99b
        );

    transition: width 0.4s ease;
}


/* ==========================================================
   PARTS MAP
========================================================== */

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

    margin:
        28px auto
        0;

    display: grid;

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

    gap: 18px;

    align-items: stretch;
}


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

.house-part-card {
    width: 100%;
    min-height: 360px;

    padding:
        24px
        22px
        20px;

    display: flex;
    flex-direction: column;
    align-items: center;

    border: 2px solid #e7ddd2;
    border-bottom: 7px solid #d5c5b4;
    border-radius: 27px;

    color: inherit;

    text-align: center;

    cursor: pointer;

    box-shadow:
        0 12px 28px
        rgba(96, 72, 50, 0.07);

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


.house-part-card:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            #fff5e8,
            #f8ead7
        );
}


.house-part-card:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #edf3ee,
            #fbfaf5
        );
}


.house-part-card:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            #f1edfb,
            #fffaf2
        );
}


.house-part-card:not(:disabled):hover {
    transform: translateY(-5px);

    box-shadow:
        0 17px 34px
        rgba(96, 72, 50, 0.11);
}


.house-part-card h3 {
    min-height: 58px;

    margin:
        0 0
        8px;

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

    color: #5d554e;

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

    line-height: 1.15;
}


.house-part-card > p {
    min-height: 62px;

    margin:
        0 auto
        15px;

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

    color: #817970;

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


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

    width: 72px;
    height: 72px;

    margin:
        18px auto
        15px;

    border-radius: 22px;

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

    box-shadow:
        0 8px 18px
        rgba(101, 78, 56, 0.07);

    font-size: 37px;
}


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

.house-example-row {
    min-height: 44px;

    margin:
        4px 0
        18px;

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

    gap: 8px;
}


.house-example-row span {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border-radius: 14px;

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

    border: 2px solid rgba(215, 202, 188, 0.65);

    font-size: 22px;
}


/* ==========================================================
   PART FOOTER
========================================================== */

.house-part-card .part-card-footer {
    width: 100%;

    margin-top: auto;
    padding-top: 14px;

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

    gap: 10px;

    border-top:
        2px solid
        rgba(221, 210, 197, 0.75);

    color: #8a8179;

    font-size: 10px;
}


.house-part-card
.part-card-footer strong {
    color: #756b63;

    font-size: 11px;
}


/* ==========================================================
   LOCKED / COMPLETED
========================================================== */

.house-part-card.locked-part {
    opacity: 0.46;

    filter: grayscale(0.18);

    cursor: not-allowed;
}


.house-part-card.completed-part {
    border-color: #d8dfbf;
    border-bottom-color: #bdc99a;
}


.house-part-card.completed-part
.part-card-label {
    background: #eef3e3;

    color: #6d7956;
}


.house-part-card.completed-part
.part-card-footer strong {
    color: #6d7956;
}


.house-unlock-button {
    margin-top: 30px;
}


/* ==========================================================
   LEARNING PAGE
========================================================== */

.house-learning-page {
    max-width: 900px;
}


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

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

    margin:
        0 auto
        27px;

    text-align: center;
}


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

    margin:
        0 auto
        17px;

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

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #fff3df,
            #f4e2cc
        );

    border: 2px solid #ead9c4;

    font-size: 43px;
}


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

    color: #544e49;

    font-size: 36px;
}


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

    max-width: 580px;

    color: #837a73;

    font-size: 14px;
    line-height: 1.6;
}


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

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

    margin:
        0 auto
        22px;

    padding:
        16px
        19px;

    border-radius: 19px;

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

    border: 2px solid #ebe2d8;

    box-shadow:
        0 8px 20px
        rgba(91, 69, 50, 0.05);
}


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

    margin-bottom: 9px;

    color: #7b736c;

    font-size: 12px;
}


.house-part-progress-information strong {
    color: #665d55;
}


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

    overflow: hidden;

    border-radius: 999px;

    background: #eee7df;
}


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

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #dfbd86,
            #bfcda1
        );

    transition: width 0.35s ease;
}


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

.house-learning-card {
    width: min(610px, 100%);

    min-height: 430px;

    margin:
        0 auto
        20px;

    padding:
        25px
        27px
        28px;

    border: 2px solid #e8ded3;
    border-bottom: 7px solid #d6c6b5;
    border-radius: 30px;

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

    box-shadow:
        0 14px 30px
        rgba(97, 74, 51, 0.07);

    text-align: center;
}


/* ==========================================================
   CARD TOP
========================================================== */

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

    gap: 12px;
}


.house-status-badge {
    padding:
        7px
        11px;

    border-radius: 999px;

    background: #f4e8db;

    color: #96724e;

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

    letter-spacing: 0.7px;
}


.house-card-position {
    color: #9a9189;

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


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

.house-learning-visual {
    margin:
        25px auto
        16px;
}


.house-learning-emoji {
    width: 130px;
    height: 130px;

    margin: 0 auto;

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

    border-radius: 38px;

    background:
        linear-gradient(
            145deg,
            #fff4e3,
            #f5e6d2
        );

    border: 2px solid #ead9c3;

    box-shadow:
        0 11px 23px
        rgba(105, 80, 53, 0.07);

    font-size: 72px;
}


.house-learning-card
.color-learning-main {
    margin:
        5px 0
        3px;

    color: #554d47;

    font-size: 38px;
    font-weight: 700;
}


.house-learning-card
.color-learning-translation {
    margin-bottom: 20px;

    color: #91867c;

    font-size: 14px;
}


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

.house-learned-message {
    margin:
        16px auto
        0;

    color: #73805d;

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


/* ==========================================================
   LEARNING NAVIGATION
========================================================== */

.house-navigation {
    width: min(610px, 100%);

    margin: 0 auto;

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

    gap: 12px;
}


.house-navigation
.letter-navigation-button {
    width: 48px;
    height: 48px;

    border-radius: 15px;
}


.house-navigation
.next-letter-button {
    min-width: 150px;
}


.house-part-hint {
    margin:
        16px auto
        0;

    color: #8b8178;

    font-size: 12px;

    text-align: center;
}


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


/* ==========================================================
   HOUSE UNLOCKED
========================================================== */

.house-unlocked-page {
    text-align: center;
}


.unlock-house-icon {
    width: 130px;
    height: 130px;

    margin:
        0 auto
        18px;

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

    border-radius: 38px;

    background:
        linear-gradient(
            145deg,
            #fff0cf,
            #f1d898
        );

    border: 2px solid #dfc276;

    box-shadow:
        0 14px 30px
        rgba(117, 89, 40, 0.10);

    font-size: 70px;
}


.unlocked-keys-row {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin:
        20px 0
        26px;

    font-size: 40px;
}


/* ==========================================================
   FAMILY HOUSE
========================================================== */

.family-house-page,
.moved-house-page {
    max-width: 960px;
}


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

.house-mission-card {
    width: min(760px, 100%);

    margin:
        0 auto
        22px;

    padding:
        16px
        18px;

    display: grid;

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

    align-items: center;

    gap: 14px;

    border-radius: 20px;

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

    border: 2px solid #e6dbcd;
    border-bottom: 5px solid #d1c0ad;

    box-shadow:
        0 9px 21px
        rgba(94, 69, 47, 0.06);
}


.mission-number {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: #fff;

    font-size: 24px;
}


.house-mission-card > div:nth-child(2) {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.house-mission-card span {
    color: #a17e5b;

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

    letter-spacing: 0.8px;
}


.house-mission-card strong {
    color: #5c524a;

    font-size: 17px;
}


.house-mission-card small {
    color: #8a8179;

    font-size: 11px;
}


.mission-progress {
    min-width: 56px;

    padding:
        8px
        10px;

    border-radius: 13px;

    background: #fff;

    color: #7c6f64;

    font-size: 12px;
    font-weight: 700;
}


/* ==========================================================
   INTERACTIVE HOUSE
========================================================== */

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

    margin: 0 auto;

    overflow: hidden;

    border: 3px solid #c8a882;
    border-bottom: 9px solid #aa8965;

    border-radius:
        42px
        42px
        28px
        28px;

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

    box-shadow:
        0 18px 38px
        rgba(103, 74, 46, 0.10);
}


.house-roof {
    min-height: 74px;

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

    background:
        linear-gradient(
            145deg,
            #c78266,
            #b86f59
        );

    color: #fffaf4;

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

    letter-spacing: 1.5px;
}


.house-room-grid {
    display: grid;

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


/* ==========================================================
   INTERACTIVE ROOMS
========================================================== */

.interactive-room {
    min-height: 210px;

    padding:
        16px;

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

    position: relative;

    border: 1px solid rgba(138, 103, 67, 0.25);

    color: inherit;

    font-family: inherit;

    cursor: pointer;

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


.interactive-room:hover {
    filter: brightness(1.03);

    box-shadow:
        inset 0 0 0 3px
        rgba(255, 255, 255, 0.42);
}


.interactive-room.correct-room {
    box-shadow:
        inset 0 0 0 5px
        #a9bf89;

    background:
        #edf4df !important;
}


.interactive-room.wrong-room {
    box-shadow:
        inset 0 0 0 5px
        #d7aaa1;

    background:
        #f5e1dc !important;
}


/* ==========================================================
   ROOM COLORS
========================================================== */

.bedroom-room {
    background:
        linear-gradient(
            145deg,
            #f7e9f0,
            #fff7fa
        );
}


.bathroom-room {
    background:
        linear-gradient(
            145deg,
            #e7f2f5,
            #f7fcfc
        );
}


.kitchen-room {
    background:
        linear-gradient(
            145deg,
            #fff0d9,
            #fffaf2
        );
}


.living-room {
    background:
        linear-gradient(
            145deg,
            #edf0df,
            #fafbf5
        );
}


.hall-room {
    background:
        linear-gradient(
            145deg,
            #f2ebe4,
            #fffaf6
        );
}


.garden-room {
    background:
        linear-gradient(
            145deg,
            #e8f2df,
            #f7fbf1
        );
}


/* ==========================================================
   ROOM NAME
   Room names stay visible because the task is to choose room
========================================================== */

.room-name {
    position: absolute;

    top: 13px;
    left: 14px;

    padding:
        5px
        8px;

    border-radius: 999px;

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

    color: #766a61;

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

    letter-spacing: 0.7px;
}


/* ==========================================================
   ROOM FURNITURE
========================================================== */

.room-furniture {
    margin-bottom: 10px;

    font-size: 48px;
}


/* ==========================================================
   FAMILY CHARACTER
========================================================== */

.room-person {
    min-height: 64px;

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

    gap: 2px;

    font-size: 48px;
}


/* ==========================================================
   IMPORTANT:
   HIDE PERSON NAMES IN THE INTERACTIVE GAME

   Mum / Dad / Sister / Brother are NOT written underneath.
   The child must recognise the character and look at the map.
========================================================== */

.room-person small {
    display: none !important;
}


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

.family-house-feedback {
    min-height: 28px;

    margin-top: 14px;

    text-align: center;
}


.family-map-complete {
    width: min(560px, 100%);

    margin:
        22px auto
        0;

    padding:
        24px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #f2f6e7,
            #fffaf0
        );

    border: 2px solid #d7dfbe;
    border-bottom: 6px solid #bcc99c;

    text-align: center;
}


.family-map-complete > div {
    margin-bottom: 6px;

    font-size: 40px;
}


.family-map-complete strong {
    display: block;

    color: #5c6650;

    font-size: 21px;
}


.family-map-complete p {
    color: #7b8470;

    font-size: 13px;
}


/* ==========================================================
   MOVED STORY
========================================================== */

.moved-story-page {
    text-align: center;
}


.moved-story-icon {
    margin-bottom: 10px;

    font-size: 70px;
}


.moving-family-row {
    margin:
        21px 0
        26px;

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

    gap: 11px;

    font-size: 34px;
}


/* ==========================================================
   HOUSE DETECTIVE
========================================================== */

.detective-page {
    max-width: 900px;
}


.detective-mission-card {
    width: min(700px, 100%);

    margin:
        25px auto
        0;

    padding:
        24px;

    border: 2px solid #e5dad0;
    border-bottom: 7px solid #d0bdab;
    border-radius: 29px;

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

    box-shadow:
        0 14px 30px
        rgba(95, 70, 48, 0.07);

    text-align: center;
}


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

    gap: 10px;

    margin-bottom: 13px;
}


.detective-badge {
    padding:
        6px
        10px;

    border-radius: 999px;

    background: #f3e8dc;

    color: #8b6f57;

    font-size: 9px;
    font-weight: 700;
}


.detective-top > span:last-child {
    color: #8c8279;

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


.detective-mission-card h3 {
    margin:
        4px 0
        18px;

    color: #5a5048;

    font-size: 26px;
}


/* ==========================================================
   DETECTIVE ROOM
========================================================== */

.detective-room-scene {
    min-height: 350px;

    padding: 24px;

    display: grid;

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

    gap: 14px;

    position: relative;

    border: 3px solid #d7c4ae;
    border-bottom: 8px solid #bda489;

    border-radius: 27px;

    background:
        linear-gradient(
            180deg,
            #f7ead8,
            #ead6bd
        );
}


/* ==========================================================
   DETECTIVE OBJECTS
========================================================== */

.room-object {
    min-height: 110px;

    padding: 10px;

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

    gap: 3px;

    border:
        2px solid
        rgba(167, 136, 101, 0.18);

    border-bottom:
        5px solid
        rgba(149, 116, 80, 0.25);

    border-radius: 19px;

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

    color: #6c6158;

    font-family: inherit;

    cursor: pointer;

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


.room-object:not(:disabled):hover {
    transform: translateY(-2px);

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


.room-object span {
    font-size: 48px;
}


/* ==========================================================
   IMPORTANT:
   HIDE OBJECT NAMES

   bed / lamp / chair / table / door / sofa
   are NOT shown under the pictures.
========================================================== */

.room-object small {
    display: none !important;
}


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

.room-object.correct {
    background: #edf3df;

    border-color: #bfce9f;
    border-bottom-color: #a9ba88;

    box-shadow:
        0 7px 16px
        rgba(96, 117, 72, 0.08);
}


.room-object.wrong {
    background: #f5e2dd;

    border-color: #d7b4aa;
    border-bottom-color: #c69d92;
}


/* ==========================================================
   EXTRA ROOM OBJECTS
========================================================== */

.detective-book,
.detective-cat {
    position: absolute;

    font-size: 28px;

    pointer-events: none;
}


.detective-book {
    right: 26%;
    bottom: 18px;
}


.detective-cat {
    left: 7%;
    bottom: 14px;
}


/* ==========================================================
   DETECTIVE COMPLETE
========================================================== */

.detective-complete-card {
    width: min(600px, 100%);

    margin:
        25px auto
        0;

    padding:
        30px
        24px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #f2f5e8,
            #fff8ed
        );

    border: 2px solid #d8dfc0;
    border-bottom: 7px solid #bdc99d;

    text-align: center;
}


.detective-complete-card > div {
    margin-bottom: 7px;

    font-size: 58px;
}


.detective-complete-card h3 {
    margin:
        5px 0
        9px;

    color: #5d6651;

    font-size: 27px;
}


.detective-complete-card p {
    color: #7e8572;

    font-size: 13px;
}


/* ==========================================================
   VIDEO
========================================================== */

.house-lesson-body
.video-card-grid
.learning-video-card:nth-child(1)
.video-card-illustration {
    background:
        linear-gradient(
            145deg,
            #fff1dd,
            #f4dfc4
        );
}


.house-lesson-body
.video-card-grid
.learning-video-card:nth-child(2)
.video-card-illustration {
    background:
        linear-gradient(
            145deg,
            #eef2df,
            #e6ecd1
        );
}


.house-lesson-body
.video-card-grid
.learning-video-card:nth-child(3)
.video-card-illustration {
    background:
        linear-gradient(
            145deg,
            #eee9f7,
            #e5dff2
        );
}


/* ==========================================================
   PRACTICE
========================================================== */

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


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

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

    margin: 0 auto;

    padding:
        28px
        24px;

    border-radius: 27px;

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

    border: 2px solid #e7ddd1;
    border-bottom: 6px solid #d2c0ac;

    box-shadow:
        0 11px 26px
        rgba(95, 71, 48, 0.07);

    text-align: center;
}


.house-question-emoji {
    width: 92px;
    height: 92px;

    margin:
        0 auto
        13px;

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

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            #fff2de,
            #f4e2ca
        );

    font-size: 54px;
}


.house-question-card h3 {
    margin:
        9px 0
        18px;

    color: #594f47;

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


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

.house-answer-grid {
    display: grid;

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

    gap: 11px;

    margin-top: 18px;
}


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

    padding:
        12px
        14px;

    border: 2px solid #e1d6c9;
    border-bottom: 5px solid #cbb9a5;
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #fffefd,
            #f8eee2
        );

    color: #685d54;

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

    cursor: pointer;

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


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

    box-shadow:
        0 7px 15px
        rgba(94, 69, 46, 0.06);
}


.house-answer-button.correct {
    background: #eaf1dc;

    border-color: #c3d0a4;
    border-bottom-color: #aabb86;

    color: #637251;
}


.house-answer-button.wrong {
    background: #f5e1dd;

    border-color: #dcb9b0;
    border-bottom-color: #c99c91;

    color: #91665d;
}


.house-answer-button:disabled {
    cursor: default;
}


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

.house-lesson-body .game-feedback {
    min-height: 24px;

    margin-top: 14px;

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


.house-lesson-body .correct-feedback {
    color: #687a58;
}


.house-lesson-body .wrong-feedback {
    color: #966b62;
}


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

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


.house-lesson-body
.finish-badge {
    background:
        linear-gradient(
            145deg,
            #fff5e2,
            #eef2df
        );
}


/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes housePop {

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

    70% {
        opacity: 1;
        transform: scale(1.05);
    }

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


.house-pop {
    animation:
        housePop
        0.3s ease;
}


@keyframes goldenKey {

    0% {
        transform:
            scale(0.7)
            rotate(-15deg);
    }

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

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


.key-slot.completed span {
    animation:
        goldenKey
        0.45s ease;
}


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

@media (max-width: 850px) {

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

        max-width: 520px;
    }


    .house-part-card {
        min-height: auto;
    }


    .house-part-card h3,
    .house-part-card > p {
        min-height: auto;
    }

}


@media (max-width: 760px) {

    .interactive-house {
        max-width: 560px;
    }


    .house-room-grid {
        grid-template-columns: 1fr;
    }


    .interactive-room {
        min-height: 170px;
    }


    .detective-room-scene {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


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

}


@media (max-width: 560px) {

    .key-collection {
        gap: 8px;
    }


    .key-slot {
        width: 76px;
        min-height: 80px;
    }


    .key-slot span {
        font-size: 32px;
    }


    .house-learning-card {
        padding:
            21px
            17px
            24px;
    }


    .house-learning-emoji {
        width: 108px;
        height: 108px;

        font-size: 61px;
    }


    .house-learning-card
    .color-learning-main {
        font-size: 33px;
    }


    .house-mission-card {
        grid-template-columns:
            42px
            1fr;

        text-align: left;
    }


    .mission-progress {
        grid-column: 1 / -1;

        width: fit-content;

        justify-self: center;
    }


    .detective-room-scene {
        grid-template-columns: 1fr;
    }


    .detective-book,
    .detective-cat {
        display: none;
    }

}


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

[hidden] {
    display: none !important;
}