/* =========================================================
   YEW — GRADE 4 — LESSON 1
   PREPOSITIONS OF TIME
   IN · ON · BEFORE · AFTER
========================================================= */


/* Основное оформление берём из Grade 2 Lesson 1 */

@import url("../Grade-2/grade-2-lesson-1.css");


/* =========================================================
   PURPLE PALETTE
========================================================= */

.lesson-body {
    --gold-900: #4f3b78;
    --gold-800: #60478d;
    --gold-700: #7557a6;
    --gold-600: #8968bb;
    --gold-500: #9d7dcc;
    --gold-400: #b49adb;
    --gold-300: #cbb8e8;
    --gold-200: #e0d5f2;
    --gold-100: #f4f0fa;

    --purple-900: #4f3b78;
    --purple-800: #60478d;
    --purple-700: #7557a6;
    --purple-600: #8968bb;
    --purple-500: #9d7dcc;
    --purple-400: #b49adb;
    --purple-300: #cbb8e8;
    --purple-200: #e0d5f2;
    --purple-100: #f4f0fa;

    --purple-extra-light: #faf7fd;
    --purple-text: #62576e;
    --purple-muted: #81768c;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(181, 154, 219, 0.28),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(203, 184, 232, 0.26),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #f8f4fc 0%,
            #fdfbff 48%,
            #f4eef9 100%
        );

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


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

.time-body .shape-one {
    background:
        linear-gradient(
            145deg,
            rgba(181, 154, 219, 0.32),
            rgba(224, 213, 242, 0.16)
        );
}

.time-body .shape-two {
    background:
        linear-gradient(
            145deg,
            rgba(157, 125, 204, 0.20),
            rgba(203, 184, 232, 0.12)
        );
}

.time-body .shape-three {
    background:
        linear-gradient(
            145deg,
            rgba(203, 184, 232, 0.23),
            rgba(244, 240, 250, 0.10)
        );
}

.time-body .floating-symbol {
    color:
        rgba(79, 59, 120, 0.15);
}


/* =========================================================
   HEADER
========================================================= */

.time-body .lesson-navigation {
    border-color:
        rgba(117, 87, 166, 0.13);

    box-shadow:
        0 13px 35px
        rgba(79, 59, 120, 0.08);
}

.time-body .lesson-logo {
    background:
        linear-gradient(
            135deg,
            var(--purple-700),
            var(--purple-500)
        );

    box-shadow:
        0 8px 18px
        rgba(117, 87, 166, 0.24);
}

.time-body .chapter-number {
    color:
        var(--purple-700);
}

.time-body .chapter-name {
    color:
        var(--purple-900);
}

.time-body .close-lesson-button {
    background:
        var(--purple-100);

    color:
        var(--purple-900);
}

.time-body .close-lesson-button:hover {
    background:
        var(--purple-200);
}


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

.time-body .lesson-progress-track {
    border-color:
        rgba(117, 87, 166, 0.11);
}

.time-body .lesson-progress-fill {
    background:
        linear-gradient(
            90deg,
            var(--purple-600),
            var(--purple-400)
        );

    box-shadow:
        0 0 14px
        rgba(137, 104, 187, 0.30);
}

.time-body .lesson-progress-number {
    color:
        var(--purple-900);
}


/* =========================================================
   MAIN LESSON PANELS
========================================================= */

.time-body .lesson-panel {
    border-color:
        rgba(117, 87, 166, 0.10);

    box-shadow:
        0 22px 55px
        rgba(79, 59, 120, 0.10);
}

.time-body .screen-label {
    color:
        var(--purple-700);
}

.time-body .lesson-panel h1,
.time-body .lesson-panel h2 {
    color:
        #35313f;
}

.time-body .screen-introduction {
    color:
        var(--purple-muted);
}

.time-body .screen-introduction strong {
    color:
        var(--purple-900);
}


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

.time-body .intro-sun {
    background:
        linear-gradient(
            145deg,
            #efe5f7,
            #dac7eb
        );

    box-shadow:
        0 14px 30px
        rgba(79, 59, 120, 0.11);
}

.time-body .intro-page::before {
    background:
        radial-gradient(
            circle,
            rgba(181, 154, 219, 0.30),
            transparent 70%
        );
}

.time-body .mission-card {
    border:
        1px solid
        rgba(117, 87, 166, 0.13);

    background:
        linear-gradient(
            145deg,
            #faf7fd,
            #f0e8f7
        );
}

.time-body .mission-card strong {
    color:
        var(--purple-900);
}

.time-body .mission-card p {
    color:
        var(--purple-muted);
}


/* =========================================================
   MAIN BUTTONS
========================================================= */

.time-body .main-action-button {
    background:
        linear-gradient(
            135deg,
            var(--purple-700),
            var(--purple-500)
        );

    color: #ffffff;

    box-shadow:
        0 13px 27px
        rgba(117, 87, 166, 0.24);
}

.time-body .main-action-button:hover {
    box-shadow:
        0 17px 32px
        rgba(117, 87, 166, 0.30);
}

.time-body .secondary-link-button {
    background:
        var(--purple-100);

    color:
        var(--purple-900);
}


/* =========================================================
   GRAMMAR HERO CARD
   BIG CLEAR RULE
========================================================= */

.grammar-hero-card {
    width: 100%;
    max-width: 780px;

    margin:
        28px auto 24px;

    padding:
        25px 28px;

    display: flex;

    align-items: center;

    gap: 22px;

    border:
        2px solid
        rgba(117, 87, 166, 0.14);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7f2fb 100%
        );

    box-shadow:
        0 12px 28px
        rgba(79, 59, 120, 0.07);
}


/* icon */

.grammar-hero-icon {
    width: 76px;
    height: 76px;

    flex:
        0 0 76px;

    display: grid;

    place-items: center;

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #eee4f7,
            #ddccec
        );

    font-size: 37px;

    box-shadow:
        0 9px 20px
        rgba(79, 59, 120, 0.08);
}


/* content */

.grammar-hero-content {
    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 5px;
}

.grammar-word {
    color:
        var(--purple-700);

    font-family:
        "Fredoka",
        sans-serif;

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

    letter-spacing: 0.16em;
}

.grammar-hero-content > strong {
    color:
        var(--purple-900);

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        clamp(
            20px,
            2.2vw,
            26px
        );

    line-height: 1.25;
}

.grammar-hero-content p {
    margin:
        4px 0 0;

    color:
        var(--purple-muted);

    font-size: 14px;

    line-height: 1.55;
}


/* =========================================================
   EXAMPLE SENTENCES
   TEXT + SOUND BESIDE IT
========================================================= */

.example-sentence-box {
    width: 100%;
    max-width: 780px;

    margin:
        12px auto;

    padding:
        17px 19px;

    display: flex;

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

    gap: 18px;

    border:
        1px solid
        rgba(117, 87, 166, 0.12);

    border-radius: 19px;

    background:
        #ffffff;

    box-shadow:
        0 7px 18px
        rgba(79, 59, 120, 0.045);
}

.example-sentence-box > div {
    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;
}

.example-sentence-box strong {
    color:
        #3f374a;

    font-family:
        "Fredoka",
        sans-serif;

    font-size: 17px;

    line-height: 1.4;
}

.example-sentence-box span {
    color:
        var(--purple-muted);

    font-size: 13px;

    line-height: 1.45;
}


/* =========================================================
   SOUND BUTTON
========================================================= */

.time-body .speak-button {
    width: 45px;
    height: 45px;

    flex:
        0 0 45px;

    margin: 0;

    padding: 0;

    display: grid;

    place-items: center;

    cursor: pointer;

    border:
        1px solid
        rgba(117, 87, 166, 0.12);

    border-radius: 14px;

    background:
        var(--purple-100);

    color:
        var(--purple-900);

    font-size: 18px;

    box-shadow:
        0 6px 15px
        rgba(79, 59, 120, 0.06);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.time-body .speak-button:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--purple-300);

    background:
        var(--purple-200);
}

.time-body .speak-button.speaking {
    background:
        var(--purple-300);

    transform:
        scale(1.06);
}


/* =========================================================
   IMPORTANT NOTE
========================================================= */

.time-body .important-note {
    width: 100%;
    max-width: 780px;

    margin:
        22px auto 0;

    padding:
        17px 20px;

    display: flex;

    align-items: center;

    gap: 13px;

    border:
        1px solid
        rgba(117, 87, 166, 0.13);

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #f4eff9,
            #e9ddf3
        );
}

.time-body .important-note > span {
    flex: 0 0 auto;

    font-size: 26px;
}

.time-body .important-note p {
    margin: 0;

    color:
        var(--purple-text);

    font-size: 14px;

    line-height: 1.55;
}

.time-body .important-note strong {
    color:
        var(--purple-900);
}


/* =========================================================
   QUICK GUIDE
========================================================= */

.four-time-grid {
    width: 100%;
    max-width: 820px;

    margin:
        27px auto 0;

    display: grid;

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

    gap: 15px;
}

.four-time-grid .formula-info-card {
    min-height: 190px;

    padding:
        23px 18px;

    display: flex;

    flex-direction: column;

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

    border:
        1px solid
        rgba(117, 87, 166, 0.13);

    border-radius: 23px;

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

    text-align: center;

    box-shadow:
        0 9px 22px
        rgba(79, 59, 120, 0.05);
}

.four-time-grid .formula-info-card > span {
    margin-bottom: 8px;

    font-size: 32px;
}

.four-time-grid .formula-info-card > strong {
    color:
        var(--purple-900);

    font-family:
        "Fredoka",
        sans-serif;

    font-size: 23px;
}

.four-time-grid .formula-info-card > p {
    margin:
        7px 0 8px;

    color:
        var(--purple-text);

    line-height: 1.45;
}

.four-time-grid .formula-info-card > small {
    padding:
        7px 11px;

    border-radius: 10px;

    background:
        var(--purple-100);

    color:
        var(--purple-800);

    font-weight: 800;
}


/* =========================================================
   GOLDEN TIP — PURPLE VERSION
========================================================= */

.time-body .golden-tip {
    width: 100%;
    max-width: 820px;

    margin:
        22px auto 0;

    padding:
        18px 20px;

    display: flex;

    align-items: center;

    gap: 13px;

    border:
        1px solid
        rgba(117, 87, 166, 0.14);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #f4eff9,
            #e8dcf2
        );
}

.time-body .golden-tip > span {
    flex: 0 0 auto;

    font-size: 27px;
}

.time-body .golden-tip p {
    margin: 0;

    color:
        var(--purple-text);

    line-height: 1.55;
}

.time-body .golden-tip strong {
    color:
        var(--purple-900);
}


/* =========================================================
   ACTIVITY PANEL
========================================================= */

.time-body .activity-panel {
    max-width: 940px;
}


/* =========================================================
   PURPLE ACTIVITY MACHINE
   SAME STRUCTURE AS GRADE 2 MACHINE
========================================================= */

.purple-activity-machine {
    width: 100%;
    max-width: 750px;

    margin:
        29px auto 0;

    padding:
        28px;

    border:
        2px solid
        rgba(157, 125, 204, 0.25);

    border-radius: 31px;

    background:
        linear-gradient(
            145deg,
            #f4eef9 0%,
            #e5d8f1 100%
        );

    box-shadow:
        inset 0 0 38px
        rgba(117, 87, 166, 0.05),
        0 12px 30px
        rgba(79, 59, 120, 0.06);
}


/* =========================================================
   ACTIVITY PROGRESS
========================================================= */

.purple-activity-machine .activity-progress {
    margin:
        0 0 16px;

    color:
        var(--purple-800);

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

    text-align: center;
}


/* =========================================================
   WHITE QUESTION CARD
========================================================= */

.purple-question-card {
    width: 100%;

    min-height: 230px;

    padding:
        28px 32px;

    display: flex;

    flex-direction: column;

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

    border:
        4px solid
        rgba(255, 255, 255, 0.96);

    border-radius: 26px;

    background:
        #ffffff;

    box-shadow:
        0 15px 31px
        rgba(79, 59, 120, 0.09);
}


/* =========================================================
   ACTIVITY EMOJI
========================================================= */

.purple-question-card .activity-question-icon {
    width: auto;
    height: auto;

    margin:
        0 0 18px;

    padding: 0;

    display: block;

    background:
        transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;

    font-size: 57px;

    line-height: 1;
}


/* =========================================================
   QUESTION + AUDIO ON ONE LINE
========================================================= */

.question-sentence-row {
    width: 100%;

    display: flex;

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

    gap: 13px;
}

.question-sentence-row .activity-question {
    width: auto;

    margin: 0;

    color:
        #3e3748;

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        clamp(
            27px,
            3vw,
            37px
        );

    font-weight: 700;

    line-height: 1.25;

    text-align: center;
}

.question-speak-button {
    width: 45px !important;
    height: 45px !important;

    flex:
        0 0 45px !important;

    margin:
        0 0 0 3px !important;
}


/* =========================================================
   ANSWER OPTIONS
========================================================= */

.purple-activity-machine .activity-options {
    width: 100%;

    margin-top: 20px;

    display: grid;

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

    gap: 12px;
}


/* 2 OPTIONS */

.purple-activity-machine
.activity-options:has(button:nth-child(2):last-child) {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}


/* 3 OPTIONS */

.purple-activity-machine
.activity-options:has(button:nth-child(3):last-child) {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}


/* 4 OPTIONS */

.purple-activity-machine
.activity-options:has(button:nth-child(4):last-child) {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}


/* ANSWER BUTTON */

.purple-activity-machine .activity-options button,
.purple-activity-machine .answer-option,
.purple-activity-machine .time-option {
    min-width: 0;
    min-height: 66px;

    padding:
        14px 15px;

    cursor: pointer;

    border:
        2px solid
        transparent;

    border-radius: 17px;

    background:
        #ffffff;

    color:
        var(--purple-900);

    font-family:
        "Fredoka",
        sans-serif;

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

    line-height: 1.25;

    text-align: center;

    box-shadow:
        0 9px 20px
        rgba(79, 59, 120, 0.085);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.purple-activity-machine .activity-options button:hover,
.purple-activity-machine .answer-option:hover,
.purple-activity-machine .time-option:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--purple-400);

    background:
        #fdfbff;

    box-shadow:
        0 12px 23px
        rgba(79, 59, 120, 0.11);
}


/* =========================================================
   CORRECT ANSWER
========================================================= */

.purple-activity-machine
.activity-options button.correct-choice,
.purple-activity-machine
.answer-option.correct-choice,
.purple-activity-machine
.time-option.correct-choice,
.purple-activity-machine
.correct-choice {
    border-color:
        #71ad86 !important;

    background:
        #eaf8ef !important;

    color:
        #36724d !important;
}


/* =========================================================
   WRONG ANSWER
========================================================= */

.purple-activity-machine
.activity-options button.wrong-choice,
.purple-activity-machine
.answer-option.wrong-choice,
.purple-activity-machine
.time-option.wrong-choice,
.purple-activity-machine
.wrong-choice {
    border-color:
        #d97979 !important;

    background:
        #fff0f0 !important;

    color:
        #a43e3e !important;
}


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

.purple-activity-machine .activity-feedback {
    min-height: 27px;

    margin:
        14px 0 0;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.4;

    text-align: center;
}


/* =========================================================
   LISTENING
========================================================= */

.listening-question-card {
    min-height: 210px;
}

.wide-speak-button {
    width: auto !important;
    height: auto !important;

    min-width: 145px;

    padding:
        13px 20px !important;

    border-radius:
        16px !important;

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        17px !important;

    font-weight: 700;
}


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

.time-body .video-frame {
    border-color:
        rgba(117, 87, 166, 0.15);

    background:
        linear-gradient(
            145deg,
            #f6f1fa,
            #e7daf2
        );

    box-shadow:
        0 16px 38px
        rgba(79, 59, 120, 0.10);
}

.time-body .video-play-icon {
    background:
        linear-gradient(
            135deg,
            var(--purple-700),
            var(--purple-500)
        );

    color: #ffffff;
}

.time-body .video-note {
    border-color:
        rgba(117, 87, 166, 0.13);

    background:
        var(--purple-100);
}


/* =========================================================
   EXTERNAL PRACTICE GAMES
========================================================= */

.time-body .external-games-grid {
    gap: 15px;
}

.time-body .external-game-card {
    border-color:
        rgba(117, 87, 166, 0.13);

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

    box-shadow:
        0 10px 24px
        rgba(79, 59, 120, 0.055);
}

.time-body .external-game-card:hover {
    border-color:
        var(--purple-400);

    box-shadow:
        0 14px 29px
        rgba(79, 59, 120, 0.09);
}

.time-body .external-game-card strong {
    color:
        var(--purple-900);
}

.time-body .external-game-card p {
    color:
        var(--purple-muted);
}

.time-body .external-game-card > span {
    color:
        var(--purple-700);
}


/* =========================================================
   ADVENTURE MAP
========================================================= */

.adventure-map {
    width: 100%;
    max-width: 760px;

    margin:
        28px auto 0;

    display: flex;

    flex-direction: column;

    gap: 14px;
}

.map-level {
    width: 100%;

    padding:
        16px 18px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 15px;

    cursor: pointer;

    border:
        2px solid
        rgba(117, 87, 166, 0.10);

    border-radius: 21px;

    background:
        #ffffff;

    color:
        var(--purple-text);

    text-align: left;

    box-shadow:
        0 8px 20px
        rgba(79, 59, 120, 0.055);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

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

    border-color:
        var(--purple-400);
}

.map-level:disabled {
    cursor: default;

    opacity: 0.56;
}

.map-level.unlocked {
    border-color:
        var(--purple-300);

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

.map-level.completed-level {
    border-color:
        #8dc59e;

    background:
        #f1faf4;
}

.level-icon {
    width: 53px;
    height: 53px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    background:
        var(--purple-100);

    font-size: 27px;
}

.level-text {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.level-text strong {
    color:
        var(--purple-900);

    font-family:
        "Fredoka",
        sans-serif;

    font-size: 17px;
}

.level-text small {
    color:
        var(--purple-muted);
}

.level-status {
    min-width: 39px;
    height: 39px;

    padding:
        0 10px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
        var(--purple-100);

    color:
        var(--purple-900);

    font-weight: 800;
}

.completed-level .level-status {
    background:
        #d9f1e0;

    color:
        #39724e;
}

.map-message {
    min-height: 25px;

    margin-top: 15px;

    color:
        var(--purple-800);

    font-weight: 800;

    text-align: center;
}


/* =========================================================
   MAP GAME
========================================================= */

.map-game-level-label {
    width: fit-content;

    margin:
        0 auto 12px;

    padding:
        8px 14px;

    border-radius: 999px;

    background:
        var(--purple-100);

    color:
        var(--purple-700);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.08em;
}


/* =========================================================
   FINAL REVIEW
========================================================= */

.final-review-grid {
    width: 100%;
    max-width: 820px;

    margin:
        27px auto 0;

    display: grid;

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

    gap: 15px;
}

.final-review-card {
    padding:
        23px 18px;

    display: flex;

    flex-direction: column;

    align-items: center;

    border:
        1px solid
        rgba(117, 87, 166, 0.13);

    border-radius: 23px;

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

    text-align: center;

    box-shadow:
        0 9px 22px
        rgba(79, 59, 120, 0.05);
}

.final-review-card > span {
    margin-bottom: 8px;

    font-size: 32px;
}

.final-review-card > strong {
    color:
        var(--purple-900);

    font-family:
        "Fredoka",
        sans-serif;

    font-size: 22px;
}

.final-review-card p {
    margin:
        8px 0;

    color:
        var(--purple-text);

    line-height: 1.45;
}

.final-review-card small {
    padding:
        7px 11px;

    border-radius: 10px;

    background:
        var(--purple-100);

    color:
        var(--purple-800);

    font-weight: 800;
}


/* =========================================================
   COMPLETION
========================================================= */

.time-body .completion-trophy {
    background:
        linear-gradient(
            145deg,
            #eee4f7,
            #d9c6e9
        );

    box-shadow:
        0 14px 30px
        rgba(79, 59, 120, 0.11);
}

.time-body .achievement-card {
    border-color:
        rgba(117, 87, 166, 0.14);

    background:
        linear-gradient(
            145deg,
            #faf7fd,
            #e9def3
        );
}

.time-body .achievement-card span {
    color:
        var(--purple-700);
}

.time-body .achievement-card strong {
    color:
        var(--purple-900);
}

.time-body .lesson-score-card {
    border-color:
        rgba(117, 87, 166, 0.13);

    background:
        var(--purple-100);
}

.time-body .lesson-score-card strong {
    color:
        var(--purple-900);
}


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

.time-body .achievement-toast {
    border-color:
        rgba(117, 87, 166, 0.16);

    box-shadow:
        0 18px 45px
        rgba(79, 59, 120, 0.17);
}

.time-body .achievement-toast small {
    color:
        var(--purple-700);
}


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

.time-body .hidden-button {
    display: none;
}

.time-body .hidden-button.show-button {
    display: inline-flex;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 820px) {

    .four-time-grid,
    .final-review-grid {
        grid-template-columns:
            1fr;
    }


    .purple-activity-machine {
        max-width:
            680px;
    }


    .purple-activity-machine .activity-options {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .purple-activity-machine
    .activity-options:has(button:nth-child(3):last-child),
    .purple-activity-machine
    .activity-options:has(button:nth-child(4):last-child) {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


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

@media (max-width: 570px) {

    .grammar-hero-card {
        padding:
            21px 17px;

        flex-direction:
            column;

        gap:
            14px;

        text-align:
            center;
    }


    .grammar-hero-icon {
        width:
            67px;

        height:
            67px;

        flex-basis:
            67px;

        font-size:
            32px;
    }


    .grammar-hero-content {
        align-items:
            center;
    }


    .example-sentence-box {
        padding:
            15px;

        gap:
            10px;
    }


    .example-sentence-box strong {
        font-size:
            15px;
    }


    .time-body .speak-button {
        width:
            41px;

        height:
            41px;

        flex-basis:
            41px;
    }


    .time-body .important-note,
    .time-body .golden-tip {
        align-items:
            flex-start;

        padding:
            16px;
    }


    .purple-activity-machine {
        padding:
            17px;

        border-radius:
            25px;
    }


    .purple-question-card {
        min-height:
            195px;

        padding:
            23px 15px;

        border-radius:
            22px;
    }


    .purple-question-card
    .activity-question-icon {
        margin-bottom:
            15px;

        font-size:
            48px;
    }


    .question-sentence-row {
        gap:
            9px;
    }


    .question-sentence-row
    .activity-question {
        font-size:
            24px;
    }


    .question-speak-button {
        width:
            40px !important;

        height:
            40px !important;

        flex-basis:
            40px !important;
    }


    .purple-activity-machine
    .activity-options,
    .purple-activity-machine
    .activity-options:has(button:nth-child(2):last-child),
    .purple-activity-machine
    .activity-options:has(button:nth-child(3):last-child),
    .purple-activity-machine
    .activity-options:has(button:nth-child(4):last-child) {
        grid-template-columns:
            1fr;
    }


    .purple-activity-machine
    .activity-options button,
    .purple-activity-machine
    .answer-option,
    .purple-activity-machine
    .time-option {
        min-height:
            58px;

        font-size:
            18px;
    }


    .adventure-map {
        gap:
            11px;
    }


    .map-level {
        padding:
            14px;

        grid-template-columns:
            auto 1fr auto;

        gap:
            10px;
    }


    .level-icon {
        width:
            45px;

        height:
            45px;

        font-size:
            23px;
    }


    .level-text strong {
        font-size:
            15px;
    }


    .level-text small {
        font-size:
            11px;
    }


    .level-status {
        min-width:
            34px;

        height:
            34px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .question-sentence-row {
        flex-wrap:
            wrap;
    }


    .question-speak-button {
        margin:
            5px auto 0 !important;
    }


    .map-level {
        grid-template-columns:
            auto 1fr;
    }


    .level-status {
        grid-column:
            1 / -1;

        width:
            100%;
    }

}
/* =========================================================
   CORRECT ANSWER CONFETTI
========================================================= */

.answer-confetti {
    position: fixed;

    z-index: 999999;

    display: block;

    pointer-events: none;

    user-select: none;

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

    animation:
        answer-confetti-burst
        1s
        cubic-bezier(.15,.7,.25,1)
        forwards;

    will-change:
        transform,
        opacity;
}


@keyframes answer-confetti-burst {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            translate(0, 0)
            rotate(0deg)
            scale(0.4);
    }


    12% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            translate(
                calc(var(--confetti-x) * 0.18),
                calc(var(--confetti-y) * 0.18)
            )
            rotate(
                calc(
                    var(--confetti-rotation) * 0.18
                )
            )
            scale(1.15);
    }


    70% {
        opacity: 1;
    }


    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            translate(
                var(--confetti-x),
                calc(
                    var(--confetti-y) + 80px
                )
            )
            rotate(
                var(--confetti-rotation)
            )
            scale(0.8);
    }
}


/* correct feedback */

.activity-feedback.correct {
    color: #36724d;

    font-weight: 800;
}


/* wrong feedback */

.activity-feedback.wrong {
    color: #a43e3e;

    font-weight: 800;
}
/* =========================================================
   LESSON 1 — VIDEO SECTION
   IN / ON + BEFORE / AFTER
========================================================= */

.video-panel {
    max-width: 980px;
    margin: 0 auto;
}


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

.lesson-video-block {
    width: 100%;
    max-width: 860px;

    margin: 30px auto 0;
    padding: 26px;

    background:
        linear-gradient(
            145deg,
            #f8f4fc 0%,
            #f1eafa 100%
        );

    border:
        2px solid #e0d5f2;

    border-radius: 28px;

    box-shadow:
        0 12px 30px
        rgba(79, 59, 120, 0.08);
}


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

.video-title-row {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 20px;

    text-align: left;
}


.video-number {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

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

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #8968bb,
            #a98bd3
        );

    color: #ffffff;

    font-size: 21px;
    font-weight: 900;

    box-shadow:
        0 7px 16px
        rgba(117, 87, 166, 0.22);
}


.video-title-row strong {
    display: block;

    margin-bottom: 4px;

    color: #4f3b78;

    font-size: 22px;
    font-weight: 900;

    line-height: 1.2;
}


.video-title-row p {
    margin: 0;

    color: #81768c;

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

    line-height: 1.45;
}


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

.video-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #ffffff;

    border:
        3px solid #ffffff;

    border-radius: 22px;

    box-shadow:
        0 10px 25px
        rgba(79, 59, 120, 0.12);
}


.video-frame iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    border-radius: 19px;
}


/* =========================================================
   NOTE UNDER VIDEO
========================================================= */

.video-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 18px;
    padding: 16px 18px;

    background: #ffffff;

    border:
        1px solid #e4d9f2;

    border-radius: 18px;

    text-align: left;
}


.video-note > span {
    flex: 0 0 auto;

    font-size: 24px;

    line-height: 1.2;
}


.video-note p {
    margin: 0;

    color: #62576e;

    font-size: 15px;
    font-weight: 650;

    line-height: 1.6;
}


.video-note strong {
    color: #7557a6;

    font-weight: 900;
}


/* =========================================================
   SECOND VIDEO — EXTERNAL CARD
========================================================= */

.video-external-card {
    display: flex;
    align-items: center;
    gap: 18px;

    width: 100%;

    padding: 22px;

    background: #ffffff;

    border:
        2px solid #e0d5f2;

    border-radius: 22px;

    box-shadow:
        0 8px 20px
        rgba(79, 59, 120, 0.07);

    text-align: left;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


.video-external-card:hover {
    transform:
        translateY(-3px);

    border-color:
        #cbb8e8;

    box-shadow:
        0 13px 28px
        rgba(79, 59, 120, 0.12);
}


/* =========================================================
   PLAY ICON
========================================================= */

.video-external-icon {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

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

    padding-left: 4px;

    background:
        linear-gradient(
            135deg,
            #8968bb,
            #a98bd3
        );

    border-radius: 50%;

    color: #ffffff;

    font-size: 23px;

    box-shadow:
        0 8px 18px
        rgba(117, 87, 166, 0.25);
}


/* =========================================================
   EXTERNAL VIDEO TEXT
========================================================= */

.video-external-text {
    flex: 1;
    min-width: 0;
}


.video-external-text strong {
    display: block;

    margin-bottom: 5px;

    color: #4f3b78;

    font-size: 19px;
    font-weight: 900;
}


.video-external-text p {
    margin: 0;

    color: #81768c;

    font-size: 14px;
    font-weight: 650;

    line-height: 1.5;
}


/* =========================================================
   WATCH BUTTON
========================================================= */

.video-external-button {
    flex: 0 0 auto;

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

    min-height: 48px;

    padding:
        0 20px;

    background:
        linear-gradient(
            135deg,
            #7557a6,
            #9d7dcc
        );

    border-radius: 15px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 7px 16px
        rgba(117, 87, 166, 0.20);

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


.video-external-button:hover {
    transform:
        translateY(-2px);

    color: #ffffff;

    box-shadow:
        0 10px 22px
        rgba(117, 87, 166, 0.28);
}


.video-external-button:active {
    transform:
        translateY(0);
}


/* =========================================================
   SPACE BEFORE CONTINUE BUTTON
========================================================= */

.video-panel >
.main-action-button {
    margin-top: 34px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .lesson-video-block {
        padding: 22px;

        border-radius: 24px;
    }


    .video-frame {
        border-radius: 19px;
    }


    .video-frame iframe {
        border-radius: 16px;
    }


    .video-external-card {
        gap: 15px;

        padding: 19px;
    }


    .video-external-icon {
        width: 56px;
        height: 56px;

        flex-basis: 56px;

        font-size: 20px;
    }

}


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

@media (max-width: 600px) {

    .lesson-video-block {
        margin-top: 22px;

        padding: 17px;

        border-radius: 21px;
    }


    .video-title-row {
        gap: 12px;

        margin-bottom: 16px;
    }


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

        flex-basis: 44px;

        border-radius: 13px;

        font-size: 18px;
    }


    .video-title-row strong {
        font-size: 18px;
    }


    .video-title-row p {
        font-size: 13px;
    }


    .video-frame {
        border-width: 2px;

        border-radius: 17px;
    }


    .video-frame iframe {
        border-radius: 15px;
    }


    .video-note {
        gap: 10px;

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

        border-radius: 15px;
    }


    .video-note > span {
        font-size: 21px;
    }


    .video-note p {
        font-size: 13px;

        line-height: 1.55;
    }


    .video-external-card {
        flex-direction: column;

        align-items: center;

        padding: 20px 16px;

        text-align: center;
    }


    .video-external-icon {
        width: 58px;
        height: 58px;

        flex-basis: 58px;
    }


    .video-external-text {
        width: 100%;
    }


    .video-external-text strong {
        font-size: 18px;
    }


    .video-external-text p {
        font-size: 13px;
    }


    .video-external-button {
        width: 100%;

        min-height: 50px;

        margin-top: 3px;
    }


    .video-panel >
    .main-action-button {
        margin-top: 27px;
    }

}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media (max-width: 380px) {

    .lesson-video-block {
        padding: 14px;
    }


    .video-number {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    .video-title-row strong {
        font-size: 16px;
    }


    .video-external-card {
        padding:
            18px 13px;
    }

}