/* ==========================================================
   LESSON 16 — WHERE IS IT?
   Uses the same base system as the older lessons
========================================================== */

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


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

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


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

.floating-where-one {
    top: 18%;
    left: 5%;

    transform: rotate(-8deg);
}

.floating-where-two {
    top: 43%;
    right: 5%;

    transform: rotate(8deg);
}

.floating-where-three {
    bottom: 12%;
    left: 8%;

    transform: rotate(-5deg);
}


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

.where-intro-page .story-book-icon {
    width: 112px;
    height: 112px;

    margin: 0 auto 22px;

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

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            #edf7ff,
            #dcecf8
        );

    border: 2px solid
        rgba(98, 143, 176, 0.14);

    box-shadow:
        0 15px 30px
        rgba(74, 109, 135, 0.09);

    font-size: 58px;
}

.where-intro-page .mission-icon {
    background:
        linear-gradient(
            145deg,
            #eff8f0,
            #e1efdf
        );
}


/* ==========================================================
   MAP PAGE
========================================================== */

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


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

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

    margin: 0 auto 30px;

    padding: 23px 24px;

    border-radius: 26px;

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

    border: 2px solid #dce7ed;
    border-bottom: 7px solid #c3d3dc;

    box-shadow:
        0 12px 28px
        rgba(65, 91, 108, 0.07);

    text-align: center;
}


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

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

    gap: 15px;

    margin-bottom: 20px;
}

.clue-slot {
    width: 100px;
    min-height: 96px;

    padding: 12px 7px;

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

    gap: 5px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #eef1f2,
            #e7ebed
        );

    border: 2px solid #d7dfe3;

    opacity: 0.46;

    filter: grayscale(0.55);

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

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

.clue-slot small {
    color: #738089;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.6px;

    text-align: center;
}

.clue-slot.completed {
    opacity: 1;

    filter: none;

    transform: translateY(-3px);

    box-shadow:
        0 9px 18px
        rgba(83, 119, 77, 0.09);
}

.clue-slot:nth-child(1).completed {
    background:
        linear-gradient(
            145deg,
            #edf7ff,
            #dbeaf5
        );

    border-color: #bad2e2;
}

.clue-slot:nth-child(2).completed {
    background:
        linear-gradient(
            145deg,
            #eef6e9,
            #dfead7
        );

    border-color: #c5d4b8;
}

.clue-slot:nth-child(3).completed {
    background:
        linear-gradient(
            145deg,
            #f2edfb,
            #e7dff5
        );

    border-color: #d0c2e5;
}


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

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

    margin-bottom: 9px;

    color: #71808a;

    font-size: 12px;
}

.rainbow-progress-information strong {
    color: #5c7280;
}

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

    margin-top: 14px;

    overflow: hidden;

    border-radius: 999px;

    background: #e5edf1;
}

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

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #8fbdd8,
            #b4cfaa,
            #bea9db
        );

    transition: width 0.4s ease;
}

.where-clue-progress-card
.rainbow-progress-message {
    margin: 13px 0 0;

    color: #77838a;

    font-size: 12px;
}


/* ==========================================================
   PARTS GRID
========================================================== */

.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
========================================================== */

.where-part-card {
    width: 100%;
    min-height: 365px;

    padding: 24px 22px 20px;

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

    border: 2px solid #dfe7eb;
    border-bottom: 7px solid #cbd6dc;

    border-radius: 27px;

    color: inherit;

    text-align: center;

    cursor: pointer;

    box-shadow:
        0 12px 28px
        rgba(65, 89, 105, 0.07);

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


/* part colors */

.where-part-card:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            #edf7ff,
            #dfeef8
        );

    border-color: #d3e4ef;
    border-bottom-color: #b8cfde;
}

.where-part-card:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #eef6e9,
            #f9faf4
        );

    border-color: #dce8d6;
    border-bottom-color: #c3d2b8;
}

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

    border-color: #e2d9ef;
    border-bottom-color: #cabce0;
}

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

    box-shadow:
        0 17px 34px
        rgba(64, 87, 103, 0.11);
}


/* ==========================================================
   PART LABEL
========================================================== */

.where-part-card .part-card-label {
    min-height: 28px;

    padding: 6px 11px;

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

    border-radius: 999px;

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

    color: #738691;

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


/* ==========================================================
   PART ICON
========================================================== */

.where-part-card .part-card-icon {
    width: 72px;
    height: 72px;

    margin: 18px auto 15px;

    flex: 0 0 auto;

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

    border-radius: 22px;

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

    box-shadow:
        0 8px 18px
        rgba(68, 91, 104, 0.07);

    font-size: 37px;
}


/* ==========================================================
   CARD TITLE
========================================================== */

.where-part-card h3 {
    width: 100%;
    min-height: 58px;

    margin: 0 0 8px;

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

    color: #4f5c63;

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

    line-height: 1.18;

    text-align: center;
}


/* ==========================================================
   CARD DESCRIPTION
========================================================== */

.where-part-card > p {
    width: 100%;
    min-height: 78px;

    margin: 0 auto 14px;

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

    color: #758087;

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

    text-align: center;
}

/* ==========================================================
   CARD FOOTER
========================================================== */

.where-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(199, 211, 218, 0.72);

    color: #7c888e;

    font-size: 10px;
}

.where-part-card
.part-card-footer span,
.where-part-card
.part-card-footer strong {
    min-height: 22px;

    display: flex;
    align-items: center;
}

.where-part-card
.part-card-footer strong {
    color: #61737c;

    font-size: 11px;

    text-align: right;
}


/* ==========================================================
   LOCKED / COMPLETE
========================================================== */

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

    filter: grayscale(0.18);

    cursor: not-allowed;
}

.where-part-card.completed-part {
    border-color: #c7d9be;
    border-bottom-color: #aebf9e;
}

.where-part-card.completed-part
.part-card-label {
    background: #edf4e7;

    color: #677758;
}

.where-part-card.completed-part
.part-card-footer strong {
    color: #677758;
}

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


/* ==========================================================
   PART 1 — PLACE WORDS
========================================================== */

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

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

    margin: 0 auto 27px;

    text-align: center;
}

.where-learning-page
.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,
            #edf7ff,
            #dcecf7
        );

    border: 2px solid #d0e2ec;

    font-size: 43px;
}

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

    color: #4f5a60;

    font-size: 36px;
}

.where-learning-page
.active-part-heading > p:last-child {
    max-width: 580px;

    margin: 0 auto;

    color: #7b858a;

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


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

.where-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 #dde8ed;

    box-shadow:
        0 8px 20px
        rgba(65, 88, 101, 0.05);
}

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

    margin-bottom: 9px;

    color: #748087;

    font-size: 12px;
}

.where-part-progress-information strong {
    color: #596d77;
}

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

    overflow: hidden;

    border-radius: 999px;

    background: #e5edf0;
}

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

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #8fbdd8,
            #b8cea9
        );

    transition: width 0.35s ease;
}


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

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

    margin: 0 auto 20px;

    padding: 25px 27px 28px;

    border: 2px solid #dfe8ec;
    border-bottom: 7px solid #c7d5dc;

    border-radius: 30px;

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

    box-shadow:
        0 14px 30px
        rgba(63, 88, 103, 0.07);

    text-align: center;
}

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

    gap: 12px;
}

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

    border-radius: 999px;

    background: #e7f2f8;

    color: #60829a;

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

    letter-spacing: 0.7px;
}

.where-card-position {
    color: #89969c;

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


/* ==========================================================
   PLACE DEMO
========================================================== */

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

.place-demo {
    width: 270px;
    height: 175px;

    margin: 0 auto;

    position: relative;
    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            180deg,
            #edf8ff 0%,
            #f7fbfd 68%,
            #ead8c1 68%,
            #e1c8aa 100%
        );

    border: 2px solid #d8e5eb;
    border-bottom: 6px solid #c4d2d9;

    box-shadow:
        0 11px 23px
        rgba(68, 92, 105, 0.07);
}

.place-demo::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 68%;

    height: 3px;

    background:
        rgba(181, 149, 116, 0.18);
}

.place-demo-object {
    position: absolute;

    left: 50%;
    top: 57%;

    transform:
        translate(-50%, -50%);

    font-size: 74px;

    z-index: 3;
}

.place-demo-object-second {
    position: absolute;

    left: 69%;
    top: 57%;

    transform:
        translate(-50%, -50%);

    font-size: 68px;

    z-index: 3;
}

.place-demo-teddy {
    position: absolute;

    left: 50%;
    top: 48%;

    transform:
        translate(-50%, -50%);

    font-size: 48px;

    z-index: 5;

    transition:
        left 0.48s cubic-bezier(.2, .8, .2, 1),
        top 0.48s cubic-bezier(.2, .8, .2, 1),
        transform 0.48s cubic-bezier(.2, .8, .2, 1);
}


/* position classes added by JS */

.place-demo-teddy.demo-in {
    left: 50%;
    top: 59%;

    transform:
        translate(-50%, -50%)
        scale(0.65);

    z-index: 2;
}

.place-demo-teddy.demo-on {
    left: 50%;
    top: 18%;

    transform:
        translate(-50%, 0);
}

.place-demo-teddy.demo-under {
    left: 50%;
    top: 82%;

    transform:
        translate(-50%, -50%)
        scale(0.82);
}

.place-demo-teddy.demo-behind {
    left: 50%;
    top: 56%;

    transform:
        translate(-50%, -50%)
        scale(0.78);

    z-index: 2;
}

.place-demo-teddy.demo-next {
    left: 79%;
    top: 59%;

    transform:
        translate(-50%, -50%);
}

.place-demo-teddy.demo-between {
    left: 50%;
    top: 59%;

    transform:
        translate(-50%, -50%);
}


/* ==========================================================
   WORD TEXT
========================================================== */

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

    color: #4f5e66;

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

.where-learning-card
.color-learning-translation {
    margin-bottom: 11px;

    color: #87939a;

    font-size: 14px;
}

.where-word-example {
    width: fit-content;

    max-width: 100%;

    margin: 0 auto 18px;

    padding: 10px 16px;

    border-radius: 14px;

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

    border: 2px solid #e2eaee;

    color: #65747c;

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

.where-learning-card
.listen-button {
    border: 2px solid #d7e5eb;
    border-bottom: 4px solid #bfd0d9;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #eef7fb
        );

    color: #567384;
}

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

    color: #6d805e;

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


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

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

    margin: 0 auto;

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

    gap: 12px;
}

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

    border-radius: 15px;
}

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

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

    color: #7e898f;

    font-size: 12px;

    text-align: center;
}

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


/* ==========================================================
   SHARED RULE CARD
========================================================== */

.where-rule-card {
    width: min(670px, 100%);

    margin: 0 auto 18px;

    padding: 24px 25px;

    border-radius: 25px;

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

    border: 2px solid #dce7ed;
    border-bottom: 6px solid #c4d4dc;

    box-shadow:
        0 10px 24px
        rgba(65, 89, 102, 0.06);

    text-align: center;
}

.rule-small-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #748791;

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

.where-sentence-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px;
}

.where-sentence-formula span {
    min-height: 43px;

    padding: 9px 13px;

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

    border-radius: 13px;

    background: white;

    border: 2px solid #e0e8ec;

    color: #596970;

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

.where-sentence-formula
.formula-subject {
    background: #e7f2f8;

    border-color: #cadee8;

    color: #58758a;
}

.where-sentence-formula
.formula-place {
    background: #eef5e8;

    border-color: #d3e1c8;

    color: #637454;
}

.where-sentence-formula
.formula-question {
    background: #eee8f7;

    border-color: #d8caea;

    color: #705d8d;
}

.where-rule-card > p {
    margin: 17px 0 0;

    color: #758188;

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


/* ==========================================================
   PART 2 — SENTENCE PAGE
========================================================== */

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

.sentence-part-icon {
    background:
        linear-gradient(
            145deg,
            #eef6e9,
            #dfead7
        ) !important;

    border-color: #ccdcbc !important;
}


/* explanation */

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

    margin: 20px auto 24px;

    padding: 20px;

    display: grid;

    gap: 11px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #f3f7ed,
            #fffefd
        );

    border: 2px solid #dce6d4;
    border-bottom: 6px solid #c4d0b9;
}

.sentence-explanation-step {
    min-height: 68px;

    padding: 12px 14px;

    display: grid;

    grid-template-columns:
        42px 1fr;

    align-items: center;

    gap: 12px;

    border-radius: 17px;

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

    border: 2px solid #e1e8dd;

    text-align: left;
}

.sentence-explanation-step > span {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: #e7f0df;

    color: #65775a;

    font-weight: 700;
}

.sentence-explanation-step strong {
    color: #596450;

    font-size: 13px;
}

.sentence-explanation-step p {
    margin: 3px 0 0;

    color: #7a8376;

    font-size: 12px;
    line-height: 1.4;
}


/* ==========================================================
   SENTENCE BUILDER
========================================================== */

.sentence-builder-card {
    width: min(630px, 100%);

    margin: 0 auto;

    padding: 24px 25px 27px;

    border-radius: 28px;

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

    border: 2px solid #dce6d5;
    border-bottom: 7px solid #c4d0b9;

    box-shadow:
        0 12px 27px
        rgba(69, 91, 61, 0.06);

    text-align: center;
}

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

    color: #718069;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.sentence-builder-question {
    margin: 21px 0;

    padding: 15px 17px;

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

    gap: 10px;

    border-radius: 16px;

    background: white;

    border: 2px solid #e1e8dd;

    color: #596450;
}

.sentence-builder-question > span {
    font-size: 27px;
}

.sentence-builder-question strong {
    font-size: 15px;
}

.sentence-build-zone {
    min-height: 75px;

    padding: 12px;

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

    gap: 8px;

    border-radius: 17px;

    background: #fbfdf9;

    border: 2px dashed #cfdcc7;
}

.empty-sentence-text {
    color: #98a096;

    font-size: 12px;
}

.sentence-word-bank {
    margin-top: 18px;

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

    gap: 8px;
}

.sentence-word-button,
.built-word {
    min-height: 43px;

    padding: 9px 13px;

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

    border-radius: 13px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
}

.sentence-word-button {
    border: 2px solid #dbe5d6;
    border-bottom: 4px solid #c2d0ba;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f1f7ed
        );

    color: #617057;

    cursor: pointer;

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

.sentence-word-button:not(:disabled):hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 14px
        rgba(70, 91, 62, 0.06);
}

.sentence-word-button:disabled {
    opacity: 0.35;

    cursor: default;
}

.built-word {
    border: 2px solid #c7d7bc;

    background: #e7f0df;

    color: #607054;
}

.small-reset-button {
    margin: 15px auto 0;

    padding: 8px 12px;

    border: 0;

    background: transparent;

    color: #7d8778;

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

    cursor: pointer;
}


/* ==========================================================
   SENTENCE COMPLETE
========================================================== */

.sentence-part-complete {
    width: min(560px, 100%);

    margin: 24px auto 0;

    padding: 25px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #eff6e9,
            #fbfcf8
        );

    border: 2px solid #d7e3cc;
    border-bottom: 6px solid #bdceae;

    text-align: center;
}

.sentence-part-complete > div {
    font-size: 46px;
}

.sentence-part-complete h3 {
    margin: 5px 0 7px;

    color: #586451;

    font-size: 27px;
}

.sentence-part-complete
> p:not(.screen-label) {
    color: #778171;

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


/* ==========================================================
   PART 3 — QUESTION PAGE
========================================================== */

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

.question-part-icon {
    background:
        linear-gradient(
            145deg,
            #f2edfb,
            #e7dff5
        ) !important;

    border-color: #d5c9e8 !important;
}

.question-rule-card {
    background:
        linear-gradient(
            180deg,
            #fffefd,
            #f4f0fa
        );

    border-color: #e0d8eb;
    border-bottom-color: #c9bcdd;
}

.answer-rule-card {
    background:
        linear-gradient(
            180deg,
            #fffefd,
            #f3f8ee
        );

    border-color: #dce6d5;
    border-bottom-color: #c4d0b9;
}


/* ==========================================================
   QUESTION CHALLENGE
========================================================== */

.question-challenge-card {
    width: min(620px, 100%);

    margin: 24px auto 0;

    padding: 24px 25px 27px;

    border-radius: 28px;

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

    border: 2px solid #e0d9eb;
    border-bottom: 7px solid #c9bdde;

    box-shadow:
        0 12px 27px
        rgba(91, 70, 116, 0.06);

    text-align: center;
}

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

    color: #7c6c94;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.question-challenge-object {
    width: 110px;
    height: 110px;

    margin: 22px auto 15px;

    display: grid;
    place-items: center;

    border-radius: 29px;

    background:
        linear-gradient(
            145deg,
            #eee8f7,
            #f8f5fb
        );

    border: 2px solid #ddd2eb;

    font-size: 54px;
}

.question-challenge-label {
    margin: 0 0 17px;

    color: #70667f;

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

.question-answer-grid {
    display: grid;

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

    gap: 10px;
}

.question-answer-button {
    min-height: 54px;

    padding: 11px 13px;

    border: 2px solid #e0d9e9;
    border-bottom: 5px solid #cbbfda;

    border-radius: 16px;

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

    color: #665a77;

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

    cursor: pointer;

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

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

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

.question-answer-button.correct {
    background: #eaf2e1;

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

    color: #637251;
}

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

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

    color: #91665d;
}


/* ==========================================================
   QUESTION COMPLETE
========================================================== */

.question-part-complete {
    width: min(560px, 100%);

    margin: 24px auto 0;

    padding: 25px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #f2edfb,
            #fffaf2
        );

    border: 2px solid #e1d7ec;
    border-bottom: 6px solid #cabce0;

    text-align: center;
}

.question-part-complete > div {
    font-size: 46px;
}

.question-part-complete h3 {
    margin: 5px 0 7px;

    color: #655875;

    font-size: 27px;
}

.question-part-complete
> p:not(.screen-label) {
    color: #81758c;

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


/* ==========================================================
   TEDDY ROOM UNLOCK
========================================================== */

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

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

    margin: 0 auto 18px;

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

    border-radius: 38px;

    background:
        linear-gradient(
            145deg,
            #e9f6ff,
            #cfe5f2
        );

    border: 2px solid #bcd8e6;

    box-shadow:
        0 14px 30px
        rgba(64, 101, 123, 0.10);

    font-size: 70px;
}

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

    gap: 12px;

    margin: 20px 0 26px;

    font-size: 40px;
}


/* ==========================================================
   TEDDY ROOM
========================================================== */

.teddy-room-page {
    max-width: 960px;
}


/* mission */

.where-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,
            #edf7ff,
            #f5fafc
        );

    border: 2px solid #d9e7ed;
    border-bottom: 5px solid #c1d2da;

    box-shadow:
        0 9px 21px
        rgba(64, 89, 103, 0.06);
}

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

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: white;

    border: 2px solid #dbe7ec;

    font-size: 22px;
}

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

    gap: 2px;
}

.where-mission-card
div:nth-child(2) > span {
    color: #7390a0;

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

.where-mission-card strong {
    color: #4d5b63;

    font-size: 16px;
}

.where-mission-card small {
    color: #88949a;

    font-size: 11px;
}

.mission-progress {
    color: #637984;

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


/* ==========================================================
   INTERACTIVE ROOM
========================================================== */

.interactive-teddy-room {
    width: min(760px, 100%);
    height: 470px;

    margin: 0 auto;

    position: relative;
    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            180deg,
            #e9f5fb 0%,
            #f7fbfc 67%,
            #ead7bd 67%,
            #dfc4a3 100%
        );

    border: 2px solid #d5e3e8;
    border-bottom: 8px solid #bdcdd4;

    box-shadow:
        0 14px 30px
        rgba(61, 87, 101, 0.09);
}

.interactive-teddy-room::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 67%;

    height: 4px;

    background:
        rgba(173, 140, 106, 0.16);

    z-index: 1;
}


/* window */

.teddy-room-window {
    width: 112px;
    height: 105px;

    position: absolute;

    left: 8%;
    top: 8%;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #bce1f6,
            #e9f7ff
        );

    border: 7px solid #f8f3e9;

    box-shadow:
        0 7px 14px
        rgba(69, 97, 112, 0.07);

    font-size: 36px;

    z-index: 2;
}


/* rug */

.teddy-room-rug {
    width: 270px;
    height: 95px;

    position: absolute;

    left: 50%;
    bottom: 1%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            #d8cde7,
            #c7b9da
        );

    opacity: 0.72;

    z-index: 2;
}


/* bed */

.teddy-room-bed {
    position: absolute;

    left: 6%;
    bottom: 11%;

    font-size: 102px;

    z-index: 4;
}


/* table */

.teddy-room-table {
    width: 145px;
    height: 115px;

    position: absolute;

    left: 40%;
    bottom: 11%;

    z-index: 4;
}

.teddy-table-top {
    width: 145px;
    height: 25px;

    position: absolute;

    top: 0;

    border-radius: 8px;

    background:
        linear-gradient(
            #ba8961,
            #aa7954
        );
}

.teddy-table-leg {
    width: 14px;
    height: 89px;

    position: absolute;

    top: 22px;

    border-radius:
        0 0 5px 5px;

    background: #987052;
}

.teddy-leg-one {
    left: 21px;
}

.teddy-leg-two {
    right: 21px;
}


/* sofa */

.teddy-room-sofa {
    position: absolute;

    right: 5%;
    bottom: 12%;

    font-size: 103px;

    z-index: 4;
}


/* box */

.teddy-room-box {
    position: absolute;

    right: 24%;
    bottom: 5%;

    font-size: 63px;

    z-index: 5;
}


/* chairs */

.teddy-room-chair {
    position: absolute;

    bottom: 5%;

    font-size: 64px;

    z-index: 5;
}

.teddy-chair-one {
    left: 27%;
}

.teddy-chair-two {
    left: 36%;
}


/* ==========================================================
   MOVING TEDDY
========================================================== */

.moving-teddy {
    position: absolute;

    left: 50%;
    top: 35%;

    transform:
        translate(-50%, -50%);

    font-size: 57px;

    z-index: 8;

    transition:
        left 0.58s cubic-bezier(.2, .8, .2, 1),
        top 0.58s cubic-bezier(.2, .8, .2, 1),
        transform 0.58s cubic-bezier(.2, .8, .2, 1);

    will-change:
        left,
        top,
        transform;
}

.moving-teddy.teddy-on {
    left: 17%;
    top: 64%;

    transform:
        translate(-50%, -100%);
}

.moving-teddy.teddy-under {
    left: 47%;
    top: 83%;

    transform:
        translate(-50%, -50%)
        scale(0.82);
}

.moving-teddy.teddy-in {
    left: 73%;
    top: 86%;

    transform:
        translate(-50%, -50%)
        scale(0.64);

    z-index: 4;
}

.moving-teddy.teddy-behind {
    left: 86%;
    top: 70%;

    transform:
        translate(-50%, -50%)
        scale(0.80);

    z-index: 3;
}

.moving-teddy.teddy-next {
    left: 22%;
    top: 83%;

    transform:
        translate(-50%, -50%)
        scale(0.84);
}

.moving-teddy.teddy-between {
    left: 33%;
    top: 83%;

    transform:
        translate(-50%, -50%)
        scale(0.81);
}


/* ==========================================================
   CLICK ZONES
========================================================== */

.teddy-place-zone {
    position: absolute;

    z-index: 12;

    border: 0;

    border-radius: 15px;

    background: transparent;

    cursor: pointer;

    transition:
        background 0.18s ease,
        outline 0.18s ease;
}

.teddy-place-zone:hover {
    background:
        rgba(255, 255, 255, 0.12);

    outline:
        2px dashed
        rgba(91, 130, 151, 0.20);
}

.zone-on {
    width: 150px;
    height: 76px;

    left: 5%;
    bottom: 27%;
}

.zone-under {
    width: 138px;
    height: 77px;

    left: 40%;
    bottom: 3%;
}

.zone-in {
    width: 78px;
    height: 67px;

    right: 22%;
    bottom: 3%;
}

.zone-behind {
    width: 130px;
    height: 105px;

    right: 4%;
    bottom: 18%;
}

.zone-next {
    width: 72px;
    height: 98px;

    left: 19%;
    bottom: 2%;
}

.zone-between {
    width: 65px;
    height: 91px;

    left: 31%;
    bottom: 2%;
}

.teddy-place-zone.correct-zone {
    background:
        rgba(150, 193, 137, 0.20);

    outline:
        3px solid
        rgba(104, 154, 91, 0.40);
}

.teddy-place-zone.wrong-zone {
    background:
        rgba(205, 126, 116, 0.14);

    outline:
        3px solid
        rgba(188, 103, 94, 0.30);
}


/* ==========================================================
   TEDDY ROOM FINISH
========================================================== */

.teddy-room-finish-card {
    width: min(590px, 100%);

    margin: 26px auto 0;

    padding: 25px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #f0f6e9,
            #fbfcf8
        );

    border: 2px solid #d7e3cc;
    border-bottom: 6px solid #bdceae;

    box-shadow:
        0 10px 23px
        rgba(72, 101, 65, 0.06);

    text-align: center;
}

.teddy-room-finish-icon {
    font-size: 50px;
}

.teddy-room-finish-card h3 {
    margin: 5px 0 7px;

    color: #586451;

    font-size: 27px;
}

.teddy-room-finish-card
> p:not(.screen-label) {
    color: #778171;

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


/* ==========================================================
   WHERE IS TEDDY
========================================================== */

.teddy-find-page {
    max-width: 900px;
}

.teddy-find-card {
    width: min(610px, 100%);

    margin: 0 auto;

    padding: 24px 26px 27px;

    border-radius: 29px;

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

    border: 2px solid #dce7ed;
    border-bottom: 7px solid #c4d4dc;

    box-shadow:
        0 13px 28px
        rgba(63, 88, 103, 0.07);

    text-align: center;
}

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

    color: #70828c;

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

    letter-spacing: 0.8px;
}


/* ==========================================================
   TEDDY FIND SCENE
========================================================== */

.teddy-find-scene {
    width: 330px;
    height: 210px;

    margin: 22px auto 18px;

    position: relative;
    overflow: hidden;

    border-radius: 27px;

    background:
        linear-gradient(
            180deg,
            #eaf6fc 0%,
            #f8fbfc 69%,
            #e9d5bc 69%,
            #dfc5a5 100%
        );

    border: 2px solid #d7e5eb;
    border-bottom: 6px solid #c3d2d9;

    box-shadow:
        0 9px 21px
        rgba(65, 90, 103, 0.07);
}

.find-scene-object {
    position: absolute;

    left: 50%;
    top: 57%;

    transform:
        translate(-50%, -50%);

    font-size: 82px;

    z-index: 4;
}

.find-scene-object-second {
    position: absolute;

    left: 68%;
    top: 57%;

    transform:
        translate(-50%, -50%);

    font-size: 75px;

    z-index: 4;
}

.find-scene-teddy {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    font-size: 48px;

    z-index: 6;

    transition:
        left 0.48s cubic-bezier(.2, .8, .2, 1),
        top 0.48s cubic-bezier(.2, .8, .2, 1),
        transform 0.48s ease;
}


/* positions */

.find-scene-teddy.find-in {
    left: 50%;
    top: 59%;

    transform:
        translate(-50%, -50%)
        scale(0.64);

    z-index: 3;
}

.find-scene-teddy.find-on {
    left: 50%;
    top: 19%;

    transform:
        translate(-50%, 0);
}

.find-scene-teddy.find-under {
    left: 50%;
    top: 82%;

    transform:
        translate(-50%, -50%)
        scale(0.80);
}

.find-scene-teddy.find-behind {
    left: 50%;
    top: 57%;

    transform:
        translate(-50%, -50%)
        scale(0.78);

    z-index: 3;
}

.find-scene-teddy.find-next {
    left: 78%;
    top: 59%;

    transform:
        translate(-50%, -50%);
}

.find-scene-teddy.find-between {
    left: 50%;
    top: 59%;

    transform:
        translate(-50%, -50%);
}

.teddy-find-card h3 {
    margin: 0 0 18px;

    color: #505d64;

    font-size: 24px;
}


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

.teddy-answer-grid {
    display: grid;

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

    gap: 10px;
}

.where-answer-button {
    min-height: 54px;

    padding: 11px 13px;

    border: 2px solid #dbe6eb;
    border-bottom: 5px solid #c6d3d9;

    border-radius: 16px;

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

    color: #576870;

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

    cursor: pointer;

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

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

    box-shadow:
        0 7px 15px
        rgba(65, 89, 101, 0.06);
}

.where-answer-button.correct {
    background: #eaf3e3;

    border-color: #c4d5b8;
    border-bottom-color: #aabd97;

    color: #637454;
}

.where-answer-button.wrong {
    background: #f5e3df;

    border-color: #dcbcb4;
    border-bottom-color: #c99f96;

    color: #90685f;
}


/* ==========================================================
   TEDDY FIND COMPLETE
========================================================== */

.teddy-find-complete {
    width: min(560px, 100%);

    margin: 24px auto 0;

    padding: 25px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #fff7e4,
            #f3f5e8
        );

    border: 2px solid #e4dec5;
    border-bottom: 6px solid #d0c6a8;

    text-align: center;
}

.teddy-find-complete > div {
    font-size: 48px;
}

.teddy-find-complete h3 {
    margin: 5px 0 7px;

    color: #625e4e;

    font-size: 27px;
}

.teddy-find-complete
> p:not(.screen-label) {
    color: #807b6c;

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


/* ==========================================================
   PRACTICE MAP — LESSON COLOR
========================================================== */

.where-lesson-body
.practice-heading-icon {
    background:
        linear-gradient(
            145deg,
            #eaf7ff,
            #dcecf5
        );

    border-color: #cfdee7;
    border-bottom-color: #b8cad4;
}

.where-lesson-body
.active-practice-level {
    border-color: #cfdfe7;
    border-bottom-color: #b8ccd5;

    background:
        linear-gradient(
            145deg,
            #f1f9fd,
            #ffffff
        );
}


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

.where-question-card {
    width: min(620px, 100%);

    margin: 0 auto;

    padding: 25px 26px 27px;

    border-radius: 28px;

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

    border: 2px solid #dce7ed;
    border-bottom: 7px solid #c4d4dc;

    box-shadow:
        0 12px 27px
        rgba(64, 89, 102, 0.07);

    text-align: center;
}

.where-question-visual {
    width: 120px;
    min-height: 100px;

    margin: 0 auto 15px;

    display: grid;
    place-items: center;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #eaf7ff,
            #dcecf5
        );

    border: 2px solid #d0e1e9;

    font-size: 55px;
}

.where-question-card h3 {
    margin: 7px 0 20px;

    color: #505c63;

    font-size: 21px;
}

.practice-where-answer-grid {
    display: grid;

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

    gap: 10px;
}

.practice-where-answer {
    min-height: 55px;

    padding: 11px 14px;

    border: 2px solid #dce6eb;
    border-bottom: 5px solid #c7d4da;

    border-radius: 16px;

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

    color: #566970;

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

    cursor: pointer;

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

.practice-where-answer:not(:disabled):hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 15px
        rgba(65, 89, 101, 0.06);
}

.practice-where-answer.correct {
    background: #eaf2e1;

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

    color: #637251;
}

.practice-where-answer.wrong {
    background: #f5e1dd;

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

    color: #91665d;
}


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

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

    margin-top: 14px;

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

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

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


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

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

.where-lesson-body
.finish-badge {
    background:
        linear-gradient(
            145deg,
            #edf7ff,
            #eef3df
        );
}


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

@keyframes cluePop {

    0% {
        opacity: 0.5;

        transform:
            scale(0.75)
            rotate(-8deg);
    }

    70% {
        opacity: 1;

        transform:
            scale(1.12)
            rotate(4deg);
    }

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

.clue-slot.completed span {
    animation:
        cluePop
        0.45s ease;
}


@keyframes teddyPop {

    0% {
        transform:
            translate(-50%, -50%)
            scale(0.8);
    }

    65% {
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }
}

.moving-teddy.teddy-pop {
    animation:
        teddyPop
        0.34s ease;
}


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

.where-lesson-body [hidden] {
    display: none !important;
}


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

@media (max-width: 850px) {

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

        max-width: 520px;
    }

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

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


@media (max-width: 760px) {

    .interactive-teddy-room {
        height: 430px;
    }

    .teddy-answer-grid,
    .question-answer-grid,
    .practice-where-answer-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 620px) {

    .where-clue-progress-card {
        padding: 20px 14px;
    }

    .clue-collection {
        gap: 8px;
    }

    .clue-slot {
        width: 88px;
        min-height: 88px;

        padding: 10px 5px;
    }

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

    .clue-slot small {
        font-size: 7px;
    }


    /* part cards */

    .where-part-card {
        padding:
            22px
            18px
            19px;
    }

    .where-example-row span {
        min-width: 48px;

        font-size: 9px;
    }


    /* place words */

    .where-learning-card {
        min-height: auto;

        padding:
            21px
            17px
            24px;
    }

    .place-demo {
        width: 235px;
        height: 155px;
    }


    /* sentence */

    .sentence-builder-card,
    .question-challenge-card,
    .where-rule-card {
        padding:
            21px
            16px
            24px;
    }

    .sentence-explanation-step {
        grid-template-columns:
            38px
            1fr;
    }

    .where-sentence-formula {
        gap: 6px;
    }

    .where-sentence-formula span {
        padding:
            8px
            9px;

        font-size: 11px;
    }


    /* room */

    .interactive-teddy-room {
        height: 350px;
    }

    .teddy-room-window {
        width: 85px;
        height: 80px;

        font-size: 28px;
    }

    .teddy-room-bed,
    .teddy-room-sofa {
        font-size: 72px;
    }

    .teddy-room-box {
        font-size: 46px;
    }

    .teddy-room-chair {
        font-size: 47px;
    }

    .teddy-room-table {
        transform:
            scale(0.75);

        transform-origin:
            bottom center;
    }

    .moving-teddy {
        font-size: 43px;
    }


    /* mission */

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

        gap: 10px;
    }

    .mission-progress {
        grid-column: 2;

        justify-self: start;
    }


    /* teddy answer */

    .teddy-find-scene {
        width: min(300px, 100%);
    }


    /* practice */

    .where-question-card {
        padding:
            21px
            15px
            24px;
    }
}

.where-part-card {
    min-height: 320px;
}

.where-part-card > p {
    min-height: 72px;

    margin-bottom: 20px;
}