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


/* =========================================================
   GRADE 4 — LESSON 4
   MUST & HAVE TO
========================================================= */


/* =========================================================
   1. LESSON PALETTE
========================================================= */

.lesson-body {

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

    --time-dark: #4f3b78;
    --time-main: #655181;
    --time-soft: #81748f;

    min-height: 100vh;
    margin: 0;

    color: var(--time-main);

    background:
        radial-gradient(
            circle at 10% 8%,
            rgba(181, 154, 219, 0.25),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 12%,
            rgba(210, 190, 236, 0.24),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #faf8fd 0%,
            #fefcff 45%,
            #f7f3fb 100%
        );

    overflow-x: hidden;
    position: relative;
}


/* =========================================================
   2. BACKGROUND
========================================================= */

.lesson-body .background-shape {
    pointer-events: none;
}

.lesson-body .shape-one {
    background:
        linear-gradient(
            145deg,
            rgba(177, 145, 217, 0.29),
            rgba(232, 221, 246, 0.16)
        );
}

.lesson-body .shape-two {
    background:
        linear-gradient(
            145deg,
            rgba(163, 137, 203, 0.20),
            rgba(226, 214, 242, 0.10)
        );
}

.lesson-body .shape-three {
    background:
        linear-gradient(
            145deg,
            rgba(196, 171, 226, 0.19),
            rgba(240, 233, 248, 0.11)
        );
}

.lesson-body .floating-symbol {
    color: rgba(104, 76, 148, 0.13);
    pointer-events: none;
    user-select: none;
}


/* =========================================================
   3. HEADER
========================================================= */

.lesson-body .lesson-navigation {

    border:
        1px solid
        rgba(123, 91, 169, 0.12);

    box-shadow:
        0 15px 36px
        rgba(83, 59, 119, 0.08);
}

.lesson-body .lesson-logo {

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

    box-shadow:
        0 8px 18px
        rgba(104, 76, 148, 0.19);
}

.lesson-body .chapter-number {
    color: #8968bb;
}

.lesson-body .chapter-name {
    color: #4f3b78;
}

.lesson-body .close-lesson-button {

    color: #7557a6;

    background:
        rgba(235, 226, 247, 0.78);
}

.lesson-body .close-lesson-button:hover {

    color: #4f3b78;
    background: #e2d5f2;
}


/* =========================================================
   4. PROGRESS
========================================================= */

.lesson-body .lesson-progress-track {
    background: rgba(143, 110, 188, 0.14);
}

.lesson-body .lesson-progress-fill {

    background:
        linear-gradient(
            90deg,
            #8968bb,
            #b293d6
        );

    box-shadow:
        0 4px 12px
        rgba(112, 80, 157, 0.20);
}

.lesson-body .lesson-progress-number {
    color: #7557a6;
}


/* =========================================================
   5. SCREENS
========================================================= */

.lesson-screen {
    display: none;
}

.lesson-screen.active-screen {

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   6. LESSON PANEL
========================================================= */

.lesson-body .lesson-panel {

    border:
        1px solid
        rgba(126, 95, 171, 0.12);

    box-shadow:
        0 25px 60px
        rgba(75, 53, 107, 0.10);
}

.lesson-body .screen-label {
    color: #8968bb;
}

.lesson-body h1,
.lesson-body h2,
.lesson-body h3 {
    color: #4f3b78;
}

.lesson-body .screen-introduction {

    color: #81748f;
    line-height: 1.65;
}

.lesson-body .screen-introduction strong {
    color: #7557a6;
}


/* =========================================================
   7. INTRO
========================================================= */

.lesson-body .intro-sun {

    background:
        linear-gradient(
            145deg,
            #eee5f7,
            #cdb7e7
        );

    box-shadow:
        0 14px 28px
        rgba(105, 77, 145, 0.14);
}

.lesson-body .mission-card {

    border:
        1px solid
        rgba(127, 96, 171, 0.14);

    background:
        linear-gradient(
            145deg,
            #fdfbff,
            #eee5f7
        );

    box-shadow:
        0 12px 28px
        rgba(81, 57, 114, 0.08);
}

.lesson-body .mission-icon {

    background:
        linear-gradient(
            145deg,
            #dfd1ef,
            #f3edf9
        );
}

.lesson-body .mission-card strong {
    color: #4f3b78;
}

.lesson-body .mission-card p {
    color: #81748f;
}


/* =========================================================
   8. MAIN BUTTON
========================================================= */

.lesson-body .main-action-button {

    border: none;

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

    color: #ffffff;

    box-shadow:
        0 13px 26px
        rgba(104, 76, 148, 0.22);

    cursor: pointer;

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

.lesson-body .main-action-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 17px 32px
        rgba(104, 76, 148, 0.29);
}

.lesson-body .main-action-button:active {
    transform: translateY(0);
}

.lesson-body .main-action-button:disabled {

    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.lesson-body .main-action-button span {

    display: inline-block;

    transition:
        transform 0.2s ease;
}

.lesson-body .main-action-button:hover span {
    transform: translateX(3px);
}

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

.hidden-button.show-button {
    display: inline-flex !important;
}


/* =========================================================
   9. GRAMMAR HERO
========================================================= */

.grammar-hero-card {

    width: 100%;
    margin-top: 25px;

    padding: 24px 22px;

    border:
        1px solid
        rgba(124, 93, 168, 0.14);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #fefcff,
            #eee5f7
        );

    box-shadow:
        0 10px 23px
        rgba(79, 55, 112, 0.07);

    display: flex;
    align-items: center;

    gap: 18px;
}

.grammar-hero-icon {

    width: 76px;
    height: 76px;
    min-width: 76px;

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #dfd1ef,
            #f4eef9
        );

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

    font-size: 39px;
}

.grammar-hero-content {

    flex: 1;
    min-width: 0;
}

.grammar-word {

    display: block;
    margin-bottom: 6px;

    color: #8968bb;

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

    letter-spacing: 0.12em;
}

.grammar-hero-content strong {

    color: #4f3b78;
    font-size: 21px;
}

.grammar-hero-content p {

    margin: 7px 0 0;

    color: #81748f;

    line-height: 1.6;
}


/* =========================================================
   10. EXAMPLE SENTENCES
========================================================= */

.example-sentence-box {

    width: 100%;
    min-height: 118px;

    margin-top: 15px;

    padding: 17px 19px;

    border:
        1px solid
        rgba(124, 93, 168, 0.14);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #fffefe,
            #f1eaf8
        );

    box-shadow:
        0 9px 21px
        rgba(79, 55, 112, 0.06);

    display: grid;

    grid-template-columns:
        55px 1fr;

    align-items: center;

    gap: 16px;
}

.example-sentence-box strong {

    color: #4f3b78;
    font-size: 17px;
}

.example-sentence-box div > span {

    display: block;
    margin-top: 5px;

    color: #81748f;

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


/* =========================================================
   11. SPEAK BUTTON
========================================================= */

.lesson-body .speak-button {

    width: 48px;
    height: 48px;

    padding: 0;

    border:
        1px solid
        rgba(125, 94, 169, 0.14);

    border-radius: 15px;

    background: #ffffff;

    color: #8968bb;

    display: inline-flex;

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

    font: inherit;

    cursor: pointer;

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

.lesson-body .speak-button:hover {

    background: #eee5f7;
    color: #4f3b78;

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(79, 55, 112, 0.08);
}

.lesson-body .speak-button.speaking {

    background: #dfd1ef;
    color: #4f3b78;
}


/* =========================================================
   12. IMPORTANT NOTE
========================================================= */

.lesson-body .important-note {

    width: 100%;

    margin-top: 22px;

    padding: 18px 20px;

    border:
        1px solid
        rgba(125, 94, 169, 0.12);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #fbf9fd,
            #eee5f7
        );

    display: flex;

    align-items: center;

    gap: 15px;

    box-shadow:
        0 8px 20px
        rgba(79, 55, 112, 0.05);
}

.lesson-body .important-note > span {

    flex: 0 0 auto;
    font-size: 28px;
}

.lesson-body .important-note p {

    margin: 0;

    color: #766982;

    line-height: 1.55;
}

.lesson-body .important-note strong {
    color: #7557a6;
}


/* =========================================================
   13. GOLDEN TIP
========================================================= */

.lesson-body .golden-tip {

    width: 100%;

    margin-top: 22px;

    padding: 18px 20px;

    border:
        1px solid
        rgba(125, 94, 169, 0.13);

    border-radius: 20px;

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

    display: flex;

    align-items: center;

    gap: 15px;
}

.lesson-body .golden-tip > span {
    font-size: 28px;
}

.lesson-body .golden-tip p {

    margin: 0;

    color: #766982;

    line-height: 1.55;
}

.lesson-body .golden-tip strong {
    color: #7557a6;
}


/* =========================================================
   14. MUST / HAVE TO SENTENCE BUILDER
========================================================= */

.past-form-builder {

    width: 100%;

    margin-top: 26px;

    padding: 24px 20px;

    border:
        1px solid
        rgba(124, 93, 168, 0.14);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #fefcff,
            #eee5f7
        );

    box-shadow:
        0 10px 23px
        rgba(79, 55, 112, 0.07);

    display: flex;

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

    gap: 13px;
}

.verb-piece,
.past-result {

    min-height: 82px;

    padding: 15px 20px;

    border:
        1px solid
        rgba(124, 93, 168, 0.14);

    border-radius: 19px;

    background: #ffffff;

    display: flex;

    flex-direction: column;

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

    text-align: center;
}

.verb-piece span,
.past-result strong {

    color: #4f3b78;

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

.verb-piece small,
.past-result small {

    margin-top: 4px;

    color: #81748f;

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

.ed-piece {

    min-height: 82px;

    padding: 15px 21px;

    border-radius: 19px;

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

    color: #ffffff;

    display: flex;

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

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

    box-shadow:
        0 8px 18px
        rgba(104, 76, 148, 0.18);
}

.builder-plus {

    color: #9d7dcc;

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


/* =========================================================
   15. SAME FORM CARD
========================================================= */

.same-form-card {

    width: 100%;

    margin-top: 18px;

    padding: 18px;

    border:
        1px solid
        rgba(124, 93, 168, 0.14);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #fdfbff,
            #eee5f7
        );

    display: flex;

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

    flex-wrap: wrap;

    gap: 10px;

    box-shadow:
        0 8px 20px
        rgba(79, 55, 112, 0.05);
}

.same-form-card span {

    padding: 8px 12px;

    border-radius: 12px;

    background: #ffffff;

    color: #60478d;

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

.same-form-card strong {

    margin-left: 5px;

    color: #7557a6;

    font-size: 15px;
}


/* =========================================================
   16. MUST VS HAVE TO COMPARISON
========================================================= */

.time-comparison {

    width: 100%;

    margin-top: 26px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        50px
        minmax(0, 1fr);

    align-items: stretch;

    gap: 13px;
}

.time-side {

    min-height: 220px;

    padding: 24px 20px;

    border:
        1px solid
        rgba(124, 93, 168, 0.14);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #fefcff,
            #eee5f7
        );

    box-shadow:
        0 10px 23px
        rgba(79, 55, 112, 0.07);

    display: flex;

    flex-direction: column;

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

    text-align: center;
}

.time-side > span {

    margin-bottom: 12px;

    font-size: 42px;
}

.time-side small {

    margin-bottom: 7px;

    color: #8968bb;

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

    letter-spacing: 0.10em;
}

.time-side strong {

    color: #4f3b78;

    font-size: 19px;
}

.time-side p {

    margin: 9px 0 0;

    color: #81748f;

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

.now-side {

    background:
        linear-gradient(
            145deg,
            #fefcff,
            #f2ebf8
        );
}

.past-side {

    background:
        linear-gradient(
            145deg,
            #fdfbff,
            #e9def5
        );
}

.time-arrow {

    display: flex;

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

    color: #8968bb;

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


/* =========================================================
   17. CORRECT / WRONG EXAMPLES
========================================================= */

.verb-change-grid {

    width: 100%;

    margin-top: 18px;

    display: grid;

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

    gap: 13px;
}

.verb-change-card {

    min-height: 85px;

    padding: 15px 17px;

    border:
        1px solid
        rgba(124, 93, 168, 0.14);

    border-radius: 19px;

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

    display: flex;

    align-items: center;

    gap: 11px;

    box-shadow:
        0 7px 17px
        rgba(79, 55, 112, 0.05);
}

.verb-change-card > span {

    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    border-radius: 10px;

    background: #eee5f7;

    color: #7557a6;

    display: flex;

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

    font-weight: 900;
}

.verb-change-card b {

    color: #b49adb;

    font-size: 16px;
}

.verb-change-card strong {

    color: #4f3b78;

    font-size: 14px;
}


/* =========================================================
   18. ACTIVITY PANEL
========================================================= */

.activity-panel {
    text-align: center;
}

.activity-progress {

    width: fit-content;

    margin: 18px auto 0;

    padding: 7px 13px;

    border-radius: 999px;

    background: #eee5f7;

    color: #7557a6;

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

.activity-question-icon {

    width: 88px;
    height: 88px;

    margin: 27px auto 18px;

    border-radius: 28px;

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

    display: flex;

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

    font-size: 46px;

    box-shadow:
        0 12px 25px
        rgba(79, 55, 112, 0.08);
}

.activity-question {

    max-width: 720px;

    margin: 0 auto 24px;

    color: #4f3b78;

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

    line-height: 1.5;
}

.activity-options {

    width: 100%;
    max-width: 720px;

    margin: 0 auto;

    display: grid;

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

    gap: 13px;
}

.activity-option {

    min-height: 62px;

    padding: 13px 16px;

    border:
        1px solid
        rgba(125, 94, 169, 0.15);

    border-radius: 18px;

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

    color: #5f4a79;

    font: inherit;

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

    cursor: pointer;

    box-shadow:
        0 7px 17px
        rgba(79, 55, 112, 0.05);

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

.activity-option:hover:not(:disabled) {

    transform: translateY(-2px);

    border-color:
        rgba(126, 95, 171, 0.30);

    box-shadow:
        0 11px 22px
        rgba(79, 55, 112, 0.09);
}

.activity-option.correct {

    border-color:
        rgba(64, 167, 112, 0.30);

    background: #eaf8f0;

    color: #2f7650;
}

.activity-option.wrong {

    border-color:
        rgba(205, 92, 105, 0.27);

    background: #fff0f2;

    color: #a94f5b;
}

.activity-option:disabled {
    cursor: default;
}

.large-options {
    grid-template-columns: 1fr;
}

.activity-feedback {

    min-height: 30px;

    margin-top: 19px;

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

    line-height: 1.5;
}

.activity-feedback.correct,
.activity-feedback.correct-feedback {
    color: #39815a;
}

.activity-feedback.wrong,
.activity-feedback.wrong-feedback {
    color: #ad5360;
}


/* =========================================================
   19. LISTENING
========================================================= */

.listening-illustration {

    width: 100px;
    height: 100px;

    margin: 24px auto 18px;

    border-radius: 31px;

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

    display: flex;

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

    font-size: 52px;

    box-shadow:
        0 13px 27px
        rgba(79, 55, 112, 0.09);
}

.listen-button {

    min-width: 145px;
    min-height: 52px;

    margin: 8px auto 25px;

    padding: 12px 20px;

    border: none;

    border-radius: 17px;

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

    color: #ffffff;

    display: inline-flex;

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

    gap: 9px;

    font: inherit;

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

    cursor: pointer;

    box-shadow:
        0 10px 21px
        rgba(104, 76, 148, 0.20);

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

.listen-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 27px
        rgba(104, 76, 148, 0.27);
}


/* =========================================================
   20. VIDEO
========================================================= */

.video-frame {

    width: 100%;
    max-width: 780px;

    aspect-ratio: 16 / 9;

    margin: 28px auto 0;

    padding: 10px;

    border:
        1px solid
        rgba(125, 94, 169, 0.14);

    border-radius: 28px;

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

    box-shadow:
        0 15px 32px
        rgba(79, 55, 112, 0.10);
}

.video-placeholder {

    width: 100%;
    height: 100%;

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #5d477d,
            #8d6fba
        );

    color: #ffffff;

    display: flex;

    flex-direction: column;

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

    gap: 8px;
}

.video-play-icon {

    width: 76px;
    height: 76px;

    margin-bottom: 7px;

    border-radius: 50%;

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

    display: flex;

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

    font-size: 29px;

    padding-left: 5px;

    backdrop-filter: blur(5px);
}

.video-placeholder strong {
    font-size: 24px;
}

.video-placeholder p {

    margin: 0;

    color:
        rgba(255, 255, 255, 0.78);
}


/* =========================================================
   21. EXTERNAL GAMES
========================================================= */

.external-games-grid {

    width: 100%;

    margin-top: 28px;

    display: grid;

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

    gap: 16px;
}

.external-game-card {

    min-height: 240px;

    padding: 23px 18px;

    border:
        1px solid
        rgba(125, 94, 169, 0.14);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #fefcff,
            #eee5f7
        );

    color: inherit;

    text-decoration: none;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    box-shadow:
        0 10px 23px
        rgba(79, 55, 112, 0.07);

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

.external-game-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 16px 30px
        rgba(79, 55, 112, 0.12);
}

.external-game-icon {

    width: 68px;
    height: 68px;

    margin-bottom: 14px;

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #dfd1ef,
            #f4eef9
        );

    display: flex;

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

    font-size: 34px;
}

.external-game-card strong {

    color: #4f3b78;
    font-size: 18px;
}

.external-game-card p {

    margin: 8px 0 13px;

    color: #81748f;

    font-size: 13px;

    line-height: 1.5;
}

.external-game-card > span {

    color: #8968bb;

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


/* =========================================================
   22. QUICK REVIEW
========================================================= */

.past-steps-grid {

    width: 100%;

    margin-top: 28px;

    display: grid;

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

    gap: 14px;
}

.past-step-card {

    min-height: 210px;

    padding: 21px 16px;

    border:
        1px solid
        rgba(125, 94, 169, 0.14);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #fefcff,
            #eee5f7
        );

    display: flex;

    flex-direction: column;

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

    text-align: center;

    box-shadow:
        0 9px 22px
        rgba(79, 55, 112, 0.06);
}

.past-step-card > span {

    width: 30px;
    height: 30px;

    margin-bottom: 10px;

    border-radius: 10px;

    background: #8968bb;

    color: #ffffff;

    display: flex;

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

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

.past-step-card > div {

    margin-bottom: 10px;

    font-size: 38px;
}

.past-step-card strong {

    color: #4f3b78;

    font-size: 18px;
}

.past-step-card p {

    margin: 8px 0 0;

    color: #81748f;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   23. ADVENTURE MAP
========================================================= */

.map-panel {
    text-align: center;
}

.adventure-map {

    width: 100%;
    max-width: 760px;

    margin: 29px auto 0;

    display: flex;

    flex-direction: column;

    gap: 13px;
}

.map-level {

    width: 100%;
    min-height: 88px;

    padding: 14px 17px;

    border:
        1px solid
        rgba(125, 94, 169, 0.13);

    border-radius: 22px;

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

    display: grid;

    grid-template-columns:
        62px 1fr 45px;

    align-items: center;

    gap: 14px;

    text-align: left;

    font: inherit;

    box-shadow:
        0 8px 20px
        rgba(79, 55, 112, 0.06);

    cursor: pointer;

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

.map-level:not(:disabled):hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(79, 55, 112, 0.10);
}

.map-level:disabled {

    opacity: 0.58;
    cursor: default;
}

.map-level.unlocked {

    border-color:
        rgba(137, 104, 187, 0.27);
}

.map-level.completed {

    background:
        linear-gradient(
            145deg,
            #f4fbf7,
            #e7f5ed
        );

    border-color:
        rgba(70, 158, 108, 0.22);
}

.level-icon {

    width: 58px;
    height: 58px;

    border-radius: 18px;

    background: #eee5f7;

    display: flex;

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

    font-size: 30px;
}

.level-text {
    min-width: 0;
}

.level-text strong {

    display: block;

    color: #4f3b78;

    font-size: 16px;
}

.level-text small {

    display: block;

    margin-top: 5px;

    color: #81748f;

    font-size: 12px;
}

.level-status {

    display: flex;

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

    color: #8968bb;

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

.map-message {

    min-height: 28px;

    margin-top: 18px;

    color: #7557a6;

    font-weight: 800;
}


/* =========================================================
   24. MAP GAME
========================================================= */

.map-game-level-label {

    width: fit-content;

    margin: 18px auto 0;

    padding: 7px 15px;

    border-radius: 999px;

    background: #eee5f7;

    color: #7557a6;

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

    letter-spacing: 0.08em;
}


/* =========================================================
   25. COMPLETION
========================================================= */

.completion-panel {
    text-align: center;
}

.completion-trophy {

    width: 105px;
    height: 105px;

    margin: 0 auto 20px;

    border-radius: 32px;

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

    display: flex;

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

    font-size: 57px;

    box-shadow:
        0 15px 30px
        rgba(79, 55, 112, 0.10);
}

.completion-text {

    max-width: 680px;

    margin: 0 auto;

    color: #81748f;

    line-height: 1.65;
}

.completion-text strong {
    color: #7557a6;
}

.achievement-card {

    width: 100%;
    max-width: 620px;

    margin: 28px auto 0;

    padding: 20px;

    border:
        1px solid
        rgba(125, 94, 169, 0.14);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #fdfbff,
            #e9def5
        );

    display: flex;

    align-items: center;

    gap: 18px;

    text-align: left;

    box-shadow:
        0 10px 24px
        rgba(79, 55, 112, 0.07);
}

.achievement-icon {

    width: 75px;
    height: 75px;
    min-width: 75px;

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #d8c5eb,
            #f3ecf9
        );

    display: flex;

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

    font-size: 39px;
}

.achievement-card small {

    display: block;

    margin-bottom: 4px;

    color: #8968bb;

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

    letter-spacing: 0.10em;
}

.achievement-card strong {

    color: #4f3b78;

    font-size: 21px;
}

.achievement-card p {

    margin: 6px 0 0;

    color: #81748f;

    line-height: 1.5;
}


/* =========================================================
   26. SMALL ANIMATIONS
========================================================= */

@keyframes timePop {

    0% {

        transform:
            scale(0.94);

        opacity: 0;
    }

    100% {

        transform:
            scale(1);

        opacity: 1;
    }
}

.lesson-screen.active-screen .lesson-panel {

    animation:
        timePop 0.32s ease both;
}

@keyframes timeSparkle {

    0% {

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

        opacity: 1;
    }

    100% {

        transform:
            translate(
                calc(-50% + var(--sparkle-x)),
                calc(-50% + var(--sparkle-y))
            )
            scale(1.15)
            rotate(150deg);

        opacity: 0;
    }
}

.answer-sparkle {

    position: fixed;

    z-index: 9999;

    pointer-events: none;

    font-size: 17px;

    animation:
        timeSparkle 0.75s ease-out forwards;
}


/* =========================================================
   27. RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

    .external-games-grid {

        grid-template-columns:
            1fr;
    }

    .external-game-card {
        min-height: 190px;
    }

    .past-steps-grid {

        grid-template-columns:
            1fr;
    }
}


/* =========================================================
   28. RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 650px) {

    .grammar-hero-card {

        flex-direction: column;
        text-align: center;
    }

    .example-sentence-box {

        grid-template-columns:
            48px 1fr;

        padding: 15px;
    }

    .activity-options {

        grid-template-columns:
            1fr;
    }

    .activity-question {
        font-size: 19px;
    }

    .time-comparison {

        grid-template-columns:
            1fr;

        gap: 10px;
    }

    .time-arrow {

        min-height: 35px;

        transform:
            rotate(90deg);
    }

    .past-form-builder {

        flex-direction: column;
    }

    .builder-plus {

        transform:
            rotate(90deg);
    }

    .verb-piece,
    .ed-piece,
    .past-result {

        width: 100%;
    }

    .verb-change-grid {

        grid-template-columns:
            1fr;
    }

    .map-level {

        grid-template-columns:
            52px 1fr 32px;

        padding: 12px;
    }

    .level-icon {

        width: 50px;
        height: 50px;

        font-size: 26px;
    }

    .achievement-card {

        flex-direction: column;

        text-align: center;
    }

    .video-frame {

        border-radius: 22px;

        padding: 7px;
    }

    .video-placeholder {
        border-radius: 17px;
    }

    .video-play-icon {

        width: 60px;
        height: 60px;

        font-size: 23px;
    }

    .video-placeholder strong {
        font-size: 19px;
    }
}


/* =========================================================
   29. VERY SMALL SCREENS
========================================================= */

@media (max-width: 420px) {

    .grammar-hero-icon {

        width: 65px;
        height: 65px;
        min-width: 65px;

        font-size: 33px;
    }

    .activity-question-icon {

        width: 76px;
        height: 76px;

        font-size: 39px;
    }

    .external-game-card {
        min-height: 175px;
    }

    .completion-trophy {

        width: 90px;
        height: 90px;

        font-size: 49px;
    }

    .time-side {

        min-height: 190px;

        padding:
            20px 16px;
    }

    .same-form-card {

        flex-direction: column;
    }

    .same-form-card strong {
        margin-left: 0;
    }
}