/* ==========================================================
   LESSON 17 — WEATHER & SEASONS
   SAME BASE SYSTEM AS OTHER LESSONS
========================================================== */

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


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

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


/* ==========================================================
   FLOATING SYMBOLS
========================================================== */

.floating-weather-one {
    top: 17%;
    left: 5%;

    transform: rotate(-7deg);
}

.floating-weather-two {
    top: 44%;
    right: 5%;

    transform: rotate(7deg);
}

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

    transform: rotate(-5deg);
}


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

.weather-intro-page .story-book-icon {
    width: 116px;
    height: 116px;

    margin: 0 auto 22px;

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

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            #e7f6ff,
            #d7ecf8
        );

    border: 2px solid
        rgba(93, 169, 210, 0.16);

    box-shadow:
        0 15px 30px
        rgba(78, 132, 165, 0.09);

    font-size: 61px;
}

.weather-intro-page .mission-icon {
    background:
        linear-gradient(
            145deg,
            #fff6d9,
            #f8e9b9
        );
}


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

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


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

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

    margin: 0 auto 30px;

    padding: 23px 24px;

    border-radius: 26px;

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

    border: 2px solid #d8e8f0;
    border-bottom: 7px solid #bfd3de;

    box-shadow:
        0 12px 28px
        rgba(63, 104, 127, 0.07);

    text-align: center;
}


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

.weather-progress-icons {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    margin-bottom: 20px;
}

.weather-progress-icon {
    width: 96px;
    min-height: 92px;

    padding: 12px 7px;

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

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #eef2f4,
            #e7ecef
        );

    border: 2px solid #d6e0e5;

    opacity: 0.46;

    filter: grayscale(0.5);

    font-size: 39px;

    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;
}

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

    filter: none;

    transform: translateY(-3px);

    box-shadow:
        0 9px 18px
        rgba(82, 123, 144, 0.09);
}

.weather-progress-icon:nth-child(1).completed {
    background:
        linear-gradient(
            145deg,
            #e7f6ff,
            #d7ebf6
        );

    border-color: #b9d8e8;
}

.weather-progress-icon:nth-child(2).completed {
    background:
        linear-gradient(
            145deg,
            #fff2dc,
            #f3e4bd
        );

    border-color: #e4d3a4;
}

.weather-progress-icon:nth-child(3).completed {
    background:
        linear-gradient(
            145deg,
            #f1edfb,
            #e5ddf3
        );

    border-color: #d1c4e5;
}


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

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

    margin-bottom: 9px;

    color: #71828c;

    font-size: 12px;
}

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

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

    margin-top: 14px;

    overflow: hidden;

    border-radius: 999px;

    background: #e3edf2;
}

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

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #8fc9e7,
            #f0c96f,
            #bdaae0
        );

    transition: width 0.4s ease;
}

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

    color: #79868d;

    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;
}


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

.weather-part-card {
    width: 100%;
    min-height: 345px;

    padding: 24px 22px 20px;

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

    border: 2px solid #dce8ee;
    border-bottom: 7px solid #c7d6dd;

    border-radius: 27px;

    color: inherit;

    text-align: center;

    cursor: pointer;

    box-shadow:
        0 12px 28px
        rgba(63, 98, 118, 0.07);

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


/* part colors */

.weather-part-card:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            #e7f6ff,
            #f4fbff
        );

    border-color: #d3e7f1;
    border-bottom-color: #b8d3e0;
}

.weather-part-card:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #fff3df,
            #fffaf2
        );

    border-color: #efe1bd;
    border-bottom-color: #dcc89a;
}

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

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

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

    box-shadow:
        0 17px 34px
        rgba(63, 94, 112, 0.11);
}


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

.weather-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.72);

    color: #728591;

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


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

.weather-part-card .part-card-icon {
    width: 74px;
    height: 74px;

    margin: 18px auto 15px;

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

    flex: 0 0 auto;

    border-radius: 23px;

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

    box-shadow:
        0 8px 18px
        rgba(66, 95, 111, 0.07);

    font-size: 39px;
}


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

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

    margin: 0 0 8px;

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

    color: #4f5d64;

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

    line-height: 1.18;

    text-align: center;
}


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

.weather-part-card > p {
    width: 100%;
    min-height: 68px;

    margin: 0 auto 16px;

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

    color: #758188;

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

    text-align: center;
}


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

.weather-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(198, 212, 219, 0.72);

    color: #7b888f;

    font-size: 10px;
}

.weather-part-card
.part-card-footer strong {
    color: #607580;

    font-size: 11px;
}


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

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

    filter: grayscale(0.18);

    cursor: not-allowed;
}

.weather-part-card.completed-part {
    border-color: #c8dabf;
    border-bottom-color: #afc09f;
}

.weather-part-card.completed-part
.part-card-label {
    background: #edf4e8;

    color: #68765b;
}


/* ==========================================================
   WEATHER WORDS PAGE
========================================================== */

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

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

    margin: 0 auto 27px;

    text-align: center;
}

.weather-learning-page
.active-part-icon {
    width: 84px;
    height: 84px;

    margin: 0 auto 17px;

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

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            #e7f6ff,
            #d7ecf7
        );

    border: 2px solid #cce1eb;

    font-size: 44px;
}

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

    color: #4f5a60;

    font-size: 36px;
}


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

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

    margin: 0 auto 22px;

    padding: 16px 19px;

    border-radius: 19px;

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

    border: 2px solid #dce9ef;

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

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

    margin-bottom: 9px;

    color: #74838b;

    font-size: 12px;
}

.weather-part-progress-info strong {
    color: #5a7280;
}

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

    overflow: hidden;

    border-radius: 999px;

    background: #e4edf2;
}

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

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #8fc9e7,
            #f1cf78
        );

    transition: width 0.35s ease;
}


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

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

    margin: 0 auto 20px;

    padding: 25px 27px 28px;

    border: 2px solid #dce8ee;
    border-bottom: 7px solid #c5d5dd;

    border-radius: 30px;

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

    box-shadow:
        0 14px 30px
        rgba(62, 98, 118, 0.07);

    text-align: center;
}

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

    gap: 12px;

    color: #89969c;

    font-size: 11px;
}

.weather-status {
    padding: 7px 11px;

    border-radius: 999px;

    background: #e6f3fa;

    color: #5f8195;

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


/* ==========================================================
   WEATHER DEMO
========================================================== */

.weather-demo {
    width: 290px;
    height: 180px;

    margin: 24px auto 17px;

    position: relative;
    overflow: hidden;

    border-radius: 29px;

    background:
        linear-gradient(
            180deg,
            #cceeff,
            #ecf8ff 70%,
            #b7d69e 70%,
            #9bc781 100%
        );

    border: 2px solid #cfe3ed;
    border-bottom: 6px solid #b9ccd5;

    box-shadow:
        0 10px 22px
        rgba(65, 102, 121, 0.07);
}

.weather-demo-sun {
    position: absolute;

    right: 23px;
    top: 18px;

    font-size: 55px;

    z-index: 3;

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

.weather-demo-cloud {
    position: absolute;

    left: 28px;
    top: 24px;

    font-size: 67px;

    z-index: 4;

    transition:
        opacity 0.35s ease,
        left 0.5s ease,
        transform 0.4s ease;
}

.weather-demo-effect {
    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 5;
}


/* states */

.weather-demo.sunny
.weather-demo-cloud {
    opacity: 0.25;
}

.weather-demo.sunny
.weather-demo-sun {
    opacity: 1;
}

.weather-demo.rainy {
    background:
        linear-gradient(
            180deg,
            #9fbfd2,
            #dceaf2 70%,
            #9ebe8d 70%,
            #87a978 100%
        );
}

.weather-demo.cloudy
.weather-demo-sun {
    opacity: 0.3;
}

.weather-demo.cloudy
.weather-demo-cloud {
    opacity: 1;

    transform: scale(1.15);
}

.weather-demo.snowy {
    background:
        linear-gradient(
            180deg,
            #c9dce8,
            #f1f7fa 70%,
            #e7eef1 70%,
            #d8e3e8 100%
        );
}

.weather-demo.hot
.weather-demo-sun {
    transform: scale(1.18);

    filter: saturate(1.2);
}

.weather-demo.cold {
    background:
        linear-gradient(
            180deg,
            #c8e1ee,
            #eff7fa 70%,
            #d7e3e7 70%,
            #c5d5dc 100%
        );
}


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

.weather-learning-card
.color-learning-main {
    margin: 4px 0 3px;

    color: #4f6875;

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

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

    color: #87949a;

    font-size: 14px;
}

.weather-example {
    width: fit-content;

    max-width: 100%;

    margin: 0 auto 18px;

    padding: 10px 16px;

    border-radius: 14px;

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

    border: 2px solid #e1eaef;

    color: #65757d;

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

.weather-learned-message {
    margin: 15px auto 0;

    color: #687d5b;

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


/* ==========================================================
   WEATHER NAV
========================================================== */

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

    margin: 0 auto;

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

    gap: 12px;
}

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

    border-radius: 15px;
}

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

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

    color: #7e8a90;

    font-size: 12px;

    text-align: center;
}


/* ==========================================================
   SEASONS PAGE
========================================================== */

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


/* ==========================================================
   SEASON STAGE
========================================================== */

.season-stage {
    width: min(680px, 100%);
    height: 330px;

    margin: 0 auto 22px;

    position: relative;
    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            180deg,
            #dff3ff 0%,
            #f7fbfd 70%,
            #bcdca3 70%,
            #9bc47f 100%
        );

    border: 2px solid #d6e5ec;
    border-bottom: 7px solid #c1d2da;

    box-shadow:
        0 13px 28px
        rgba(64, 98, 117, 0.08);

    transition:
        background 0.45s ease;
}

.season-sky {
    position: absolute;

    inset: 0;

    z-index: 1;

    transition:
        background 0.4s ease;
}

.season-sun {
    position: absolute;

    top: 25px;
    right: 40px;

    font-size: 60px;

    z-index: 3;

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

.season-tree {
    position: absolute;

    left: 50%;
    bottom: 25px;

    transform: translateX(-50%);

    font-size: 160px;

    z-index: 5;

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

.season-effect-layer {
    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 6;
}

.season-ground {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 30%;

    z-index: 2;
}


/* season states */

.season-stage.spring {
    background:
        linear-gradient(
            180deg,
            #daf2ff 0%,
            #f9fcff 70%,
            #b8dfa1 70%,
            #9dcb85 100%
        );
}

.season-stage.summer {
    background:
        linear-gradient(
            180deg,
            #bfe8ff 0%,
            #eefaff 70%,
            #94cf79 70%,
            #76b65f 100%
        );
}

.season-stage.autumn {
    background:
        linear-gradient(
            180deg,
            #dce9f0 0%,
            #f4f1e7 70%,
            #d6b17f 70%,
            #bb8d5e 100%
        );
}

.season-stage.winter {
    background:
        linear-gradient(
            180deg,
            #cbdde8 0%,
            #edf4f7 70%,
            #edf2f4 70%,
            #dbe5ea 100%
        );
}


/* ==========================================================
   SEASON INFO
========================================================== */

.season-info-card {
    width: min(560px, 100%);

    margin: 0 auto 20px;

    padding: 21px 22px;

    border-radius: 23px;

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

    border: 2px solid #dfe8ec;
    border-bottom: 6px solid #c9d6dc;

    text-align: center;
}

.season-info-card h3 {
    margin: 4px 0 3px;

    color: #52626b;

    font-size: 31px;
}

.season-info-card > p {
    margin: 0 0 13px;

    color: #879198;

    font-size: 14px;
}

.season-weather-example {
    width: fit-content;

    margin: 0 auto 16px;

    padding: 10px 15px;

    border-radius: 14px;

    background: #f7fafc;

    border: 2px solid #e2eaee;

    color: #65747c;

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


/* ==========================================================
   SEASON BUTTONS
========================================================== */

.season-buttons {
    width: min(680px, 100%);

    margin: 0 auto;

    display: grid;

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

    gap: 10px;
}

.season-choice-button {
    min-height: 55px;

    padding: 10px 11px;

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

    border-radius: 16px;

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

    color: #586970;

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

    cursor: pointer;

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

.season-choice-button:hover {
    transform: translateY(-2px);

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

.season-choice-button.active {
    background:
        linear-gradient(
            145deg,
            #e8f5ff,
            #edf7ed
        );

    border-color: #c6dce5;
    border-bottom-color: #adc6d1;

    color: #4f6976;
}

.season-progress-message {
    margin: 17px auto 0;

    color: #7d898f;

    font-size: 12px;

    text-align: center;
}


/* ==========================================================
   WEATHER QUESTION PAGE
========================================================== */

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


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

.weather-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;
}

.weather-question-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px;
}

.weather-question-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;
}

.weather-question-formula
.formula-main {
    background: #e5f3fa;

    border-color: #cadee8;

    color: #58758a;
}

.weather-question-formula
.formula-weather {
    background: #fff4d7;

    border-color: #ecdcae;

    color: #836e3d;
}

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

    color: #758188;

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

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

    border-color: #ede1bc;
    border-bottom-color: #d8c79b;
}


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

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

    margin: 24px auto 0;

    padding: 24px 25px 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.06);

    text-align: center;
}

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

    color: #738690;

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

.weather-question-scene {
    width: 120px;
    height: 120px;

    margin: 22px auto 15px;

    display: grid;
    place-items: center;

    border-radius: 31px;

    background:
        linear-gradient(
            145deg,
            #e7f6ff,
            #fff7d8
        );

    border: 2px solid #d5e5ec;

    font-size: 62px;
}

.weather-question-challenge h3 {
    margin: 0 0 18px;

    color: #52616a;

    font-size: 22px;
}

.weather-question-answer-grid {
    display: grid;

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

    gap: 10px;
}

.weather-question-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: 13px;
    font-weight: 600;

    cursor: pointer;

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

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

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

.weather-question-answer-button.correct {
    background: #eaf3e3;

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

    color: #637454;
}

.weather-question-answer-button.wrong {
    background: #f5e3df;

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

    color: #90685f;
}


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

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

    margin: 24px auto 0;

    padding: 25px;

    border-radius: 25px;

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

    border: 2px solid #d8e4ce;
    border-bottom: 6px solid #becfaf;

    text-align: center;
}

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

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

    color: #596651;

    font-size: 27px;
}


/* ==========================================================
   WEATHER STATION UNLOCK
========================================================== */

.weather-station-unlocked-page {
    text-align: center;
}

.weather-station-unlock-icon {
    width: 132px;
    height: 132px;

    margin: 0 auto 18px;

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

    border-radius: 39px;

    background:
        linear-gradient(
            145deg,
            #e4f5ff,
            #cde7f3
        );

    border: 2px solid #b7d7e6;

    box-shadow:
        0 14px 30px
        rgba(64, 104, 126, 0.10);

    font-size: 71px;
}

.weather-reporter-badge {
    width: min(430px, 100%);

    margin: 22px auto 27px;

    padding: 17px 20px;

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

    gap: 14px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #fff7d9,
            #f5f8eb
        );

    border: 2px solid #e7dfbd;
    border-bottom: 5px solid #d0c49e;

    text-align: left;
}

.weather-reporter-badge > span {
    font-size: 37px;
}

.weather-reporter-badge > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.weather-reporter-badge small {
    color: #91825d;

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

.weather-reporter-badge strong {
    color: #625d4d;

    font-size: 15px;
}


/* ==========================================================
   WEATHER STATION
========================================================== */

.weather-station-page {
    max-width: 960px;
}


/* ==========================================================
   MAIN WEATHER SCENE
========================================================== */

.interactive-weather-scene {
    width: min(760px, 100%);
    height: 430px;

    margin: 0 auto 22px;

    position: relative;
    overflow: hidden;

    border-radius: 31px;

    background:
        linear-gradient(
            180deg,
            #bfe9ff 0%,
            #eaf8ff 68%,
            #a9d68e 68%,
            #8fc578 100%
        );

    border: 2px solid #cfe3ed;
    border-bottom: 8px solid #b8ccd5;

    box-shadow:
        0 14px 30px
        rgba(63, 101, 121, 0.09);

    transition:
        background 0.5s ease;
}

.station-sun {
    position: absolute;

    top: 28px;
    right: 55px;

    font-size: 72px;

    z-index: 3;

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

.station-cloud {
    position: absolute;

    font-size: 80px;

    z-index: 4;

    transition:
        left 0.55s ease,
        right 0.55s ease,
        opacity 0.4s ease,
        transform 0.4s ease;
}

.station-cloud-one {
    left: 70px;
    top: 48px;
}

.station-cloud-two {
    right: 145px;
    top: 95px;

    font-size: 67px;
}

.station-weather-effects {
    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 7;
}

.station-house {
    position: absolute;

    left: 17%;
    bottom: 7%;

    font-size: 115px;

    z-index: 5;
}

.station-tree {
    position: absolute;

    right: 16%;
    bottom: 5%;

    font-size: 118px;

    z-index: 5;
}

.station-ground {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 32%;

    z-index: 2;

    background:
        linear-gradient(
            #9dcb82,
            #84bb6e
        );
}


/* scene states */

.interactive-weather-scene.station-sunny {
    background:
        linear-gradient(
            180deg,
            #b8e9ff 0%,
            #eefaff 68%,
            #a4d587 68%,
            #89c372 100%
        );
}

.interactive-weather-scene.station-rainy {
    background:
        linear-gradient(
            180deg,
            #91b7cb 0%,
            #cbdde7 68%,
            #93b881 68%,
            #779d67 100%
        );
}

.interactive-weather-scene.station-cloudy {
    background:
        linear-gradient(
            180deg,
            #aebfc8 0%,
            #dce5e9 68%,
            #a2c089 68%,
            #87a875 100%
        );
}

.interactive-weather-scene.station-snowy {
    background:
        linear-gradient(
            180deg,
            #cadce6 0%,
            #edf4f7 68%,
            #e9eff2 68%,
            #d9e5ea 100%
        );
}


/* ==========================================================
   WEATHER REPORT
========================================================== */

.weather-report-card {
    width: min(560px, 100%);

    margin: 0 auto 20px;

    padding: 20px 22px;

    border-radius: 23px;

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

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

    text-align: center;
}

.weather-report-card h3 {
    margin: 5px 0 14px;

    color: #52636c;

    font-size: 28px;
}


/* ==========================================================
   CONTROL PANEL
========================================================== */

.weather-control-panel {
    width: min(760px, 100%);

    margin: 0 auto;

    display: grid;

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

    gap: 10px;
}

.weather-control-button {
    min-height: 58px;

    padding: 10px 8px;

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

    border-radius: 17px;

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

    color: #596970;

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

    cursor: pointer;

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

.weather-control-button:hover {
    transform: translateY(-2px);

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

.weather-control-button.active {
    background:
        linear-gradient(
            145deg,
            #e6f5ff,
            #fff3d2
        );

    border-color: #cbdde6;
    border-bottom-color: #afc6d2;

    color: #4f6976;
}

.weather-station-progress {
    margin: 17px auto 0;

    color: #7c898f;

    font-size: 12px;

    text-align: center;
}


/* ==========================================================
   REPORTER PAGE
========================================================== */

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

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

    margin: 0 auto;

    padding: 24px 25px 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;
}

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

    color: #72848e;

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

.reporter-weather-scene {
    width: 140px;
    height: 140px;

    margin: 22px auto 16px;

    display: grid;
    place-items: center;

    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            #e5f4ff,
            #fff5d6
        );

    border: 2px solid #d3e4eb;

    font-size: 72px;
}

.reporter-challenge-card h3 {
    margin: 0 0 18px;

    color: #52616a;

    font-size: 22px;
}

.reporter-answer-grid {
    display: grid;

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

    gap: 10px;
}

.reporter-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: 13px;
    font-weight: 600;

    cursor: pointer;
}

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

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

    color: #637454;
}

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

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

    color: #90685f;
}


/* ==========================================================
   REPORTER COMPLETE
========================================================== */

.reporter-complete-card {
    width: min(560px, 100%);

    margin: 24px auto 0;

    padding: 25px;

    border-radius: 25px;

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

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

    text-align: center;
}

.reporter-complete-card > div {
    font-size: 47px;
}

.reporter-complete-card h3 {
    margin: 5px 0 7px;

    color: #596651;

    font-size: 27px;
}


/* ==========================================================
   SEASON MACHINE
========================================================== */

.season-machine-page {
    max-width: 900px;
}

.season-machine-card {
    width: min(650px, 100%);

    margin: 0 auto;

    padding: 24px 25px 27px;

    border-radius: 29px;

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

    border: 2px solid #ede2c2;
    border-bottom: 7px solid #d7c79e;

    box-shadow:
        0 12px 27px
        rgba(111, 91, 50, 0.06);

    text-align: center;
}

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

    color: #8b7b58;

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

.season-machine-clue {
    width: 130px;
    height: 130px;

    margin: 22px auto 8px;

    display: grid;
    place-items: center;

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            #fff5d8,
            #f3f4e5
        );

    border: 2px solid #e5dcb9;

    font-size: 68px;
}

.season-machine-text {
    margin: 0 0 19px;

    color: #73694f;

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

.season-machine-buttons {
    display: grid;

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

    gap: 10px;
}

.season-machine-button {
    min-height: 88px;

    padding: 12px 8px;

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

    gap: 4px;

    border: 2px solid #e2ded0;
    border-bottom: 5px solid #cec5ae;

    border-radius: 18px;

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

    color: #665f4e;

    font-family: inherit;
    font-weight: 600;

    cursor: pointer;

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

.season-machine-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 14px
        rgba(99, 84, 50, 0.06);
}

.season-machine-button {
    font-size: 30px;
}

.season-machine-button span {
    font-size: 12px;
}

.season-machine-button.correct {
    background: #eaf3e3;

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

.season-machine-button.wrong {
    background: #f5e3df;

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


/* ==========================================================
   SEASON MACHINE COMPLETE
========================================================== */

.season-machine-complete {
    width: min(560px, 100%);

    margin: 24px auto 0;

    padding: 25px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #f3f0fb,
            #fff8e7
        );

    border: 2px solid #e1d8ec;
    border-bottom: 6px solid #cabbe0;

    text-align: center;
}

.season-machine-complete > div {
    font-size: 48px;
}

.season-machine-complete h3 {
    margin: 5px 0 7px;

    color: #655b72;

    font-size: 27px;
}


/* ==========================================================
   PRACTICE COLOR TOUCH
========================================================== */

.weather-lesson-body
.practice-heading-icon {
    background:
        linear-gradient(
            145deg,
            #e5f5ff,
            #fff3d5
        );

    border-color: #d5e3e6;
    border-bottom-color: #bdcdd2;
}

.weather-lesson-body
.active-practice-level {
    border-color: #cfdfe7;
    border-bottom-color: #b7cad4;

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


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

.weather-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;
}

.weather-question-visual {
    width: 120px;
    min-height: 105px;

    margin: 0 auto 15px;

    display: grid;
    place-items: center;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #e4f4ff,
            #fff6d8
        );

    border: 2px solid #d4e3e9;

    font-size: 58px;
}

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

    color: #505f67;

    font-size: 21px;
}

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

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

    gap: 10px;
}

.practice-weather-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-weather-answer:not(:disabled):hover {
    transform: translateY(-2px);

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

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

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

    color: #637251;
}

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

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

    color: #91665d;
}


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

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

    margin-top: 14px;

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

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

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


/* ==========================================================
   WEATHER EFFECT PIECES
========================================================== */

.rain-drop {
    width: 3px;
    height: 18px;

    position: absolute;

    top: -25px;

    border-radius: 999px;

    background:
        rgba(82, 139, 175, 0.65);

    animation:
        rainFall
        1s linear infinite;
}

@keyframes rainFall {

    from {
        transform:
            translateY(-20px)
            rotate(8deg);
    }

    to {
        transform:
            translateY(470px)
            rotate(8deg);
    }
}


.snow-flake {
    position: absolute;

    top: -25px;

    color: white;

    text-shadow:
        0 2px 3px
        rgba(84, 117, 137, 0.18);

    animation:
        snowFall
        3.4s linear infinite;
}

@keyframes snowFall {

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

    to {
        transform:
            translateY(470px)
            translateX(35px)
            rotate(240deg);
    }
}


.wind-leaf {
    position: absolute;

    left: -40px;

    animation:
        windMove
        2.2s linear infinite;
}

@keyframes windMove {

    from {
        transform:
            translateX(-30px)
            translateY(0)
            rotate(0deg);
    }

    to {
        transform:
            translateX(850px)
            translateY(40px)
            rotate(480deg);
    }
}


/* ==========================================================
   SEASON EFFECT PIECES
========================================================== */

.spring-flower-piece,
.autumn-leaf-piece,
.winter-snow-piece {
    position: absolute;

    top: -30px;

    pointer-events: none;
}

.spring-flower-piece {
    animation:
        seasonFloat
        4s linear infinite;
}

.autumn-leaf-piece {
    animation:
        seasonFloat
        3.2s linear infinite;
}

.winter-snow-piece {
    animation:
        seasonSnow
        4s linear infinite;
}

@keyframes seasonFloat {

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

    to {
        transform:
            translateY(380px)
            translateX(35px)
            rotate(400deg);
    }
}

@keyframes seasonSnow {

    from {
        transform:
            translateY(-20px)
            translateX(0);
    }

    to {
        transform:
            translateY(380px)
            translateX(20px);
    }
}


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

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

.weather-lesson-body
.finish-badge {
    background:
        linear-gradient(
            145deg,
            #e9f6ff,
            #fff6d8
        );
}


/* ==========================================================
   SMALL POP
========================================================== */

@keyframes weatherPop {

    0% {
        transform: scale(0.86);
    }

    65% {
        transform: scale(1.08);
    }

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

.weather-pop {
    animation:
        weatherPop
        0.35s ease;
}


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

@media (max-width: 850px) {

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

        max-width: 520px;
    }

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

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

    .weather-control-panel {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .weather-control-button:last-child {
        grid-column: 1 / -1;
    }

    .season-buttons,
    .season-machine-buttons {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 760px) {

    .interactive-weather-scene {
        height: 380px;
    }

    .weather-question-answer-grid,
    .reporter-answer-grid,
    .practice-weather-answer-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 620px) {

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

    .weather-progress-icons {
        gap: 8px;
    }

    .weather-progress-icon {
        width: 83px;
        min-height: 83px;

        font-size: 31px;
    }


    /* weather words */

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

        padding:
            21px
            17px
            24px;
    }

    .weather-demo {
        width: 245px;
        height: 160px;
    }


    /* season stage */

    .season-stage {
        height: 280px;
    }

    .season-tree {
        font-size: 125px;
    }

    .season-sun {
        font-size: 50px;
    }


    /* station */

    .interactive-weather-scene {
        height: 330px;
    }

    .station-sun {
        font-size: 55px;

        right: 28px;
    }

    .station-cloud-one {
        left: 28px;
    }

    .station-cloud-two {
        right: 75px;
    }

    .station-cloud {
        font-size: 61px;
    }

    .station-cloud-two {
        font-size: 53px;
    }

    .station-house {
        font-size: 85px;

        left: 9%;
    }

    .station-tree {
        font-size: 91px;

        right: 9%;
    }


    /* season machine */

    .season-machine-card,
    .reporter-challenge-card,
    .weather-question-challenge,
    .weather-rule-card {
        padding:
            21px
            16px
            24px;
    }


    /* practice */

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