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


/* =========================================================
   GRADE 3 — LESSON 18
   BIG REVIEW III
========================================================= */


/* =========================================================
   1. LESSON PALETTE + BACKGROUND
========================================================= */

.lesson-body {
    --emerald-900: #205f54;
    --emerald-800: #287665;
    --emerald-700: #328f7b;
    --emerald-600: #3ca68f;
    --emerald-500: #55b8a1;
    --emerald-400: #75cbb7;
    --emerald-300: #9edccc;
    --emerald-200: #c9eee4;
    --emerald-100: #effaf7;

    --text-dark: #205f54;
    --text-main: #315e56;
    --text-soft: #66827c;

    min-height: 100vh;
    margin: 0;

    background:
        radial-gradient(
            circle at 10% 8%,
            rgba(122, 210, 187, 0.26),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 12%,
            rgba(140, 210, 220, 0.22),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #f5fcfa 0%,
            #fbfefd 45%,
            #f1faf7 100%
        );

    color: var(--text-main);

    overflow-x: hidden;

    position: relative;
}


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

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

.lesson-body .shape-one {
    background:
        linear-gradient(
            145deg,
            rgba(115, 203, 181, 0.31),
            rgba(207, 242, 233, 0.16)
        );
}

.lesson-body .shape-two {
    background:
        linear-gradient(
            145deg,
            rgba(107, 194, 178, 0.20),
            rgba(194, 236, 227, 0.10)
        );
}

.lesson-body .shape-three {
    background:
        linear-gradient(
            145deg,
            rgba(140, 216, 199, 0.18),
            rgba(227, 247, 241, 0.10)
        );
}

.lesson-body .floating-symbol {
    color: rgba(45, 133, 113, 0.14);

    pointer-events: none;

    user-select: none;
}


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

.lesson-body .lesson-navigation {
    border:
        1px solid
        rgba(65, 157, 136, 0.12);

    box-shadow:
        0 15px 36px
        rgba(33, 104, 90, 0.08);
}

.lesson-body .lesson-logo {
    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #67c8b1
        );

    box-shadow:
        0 8px 18px
        rgba(43, 139, 118, 0.18);
}

.lesson-body .chapter-number {
    color: #328f7b;
}

.lesson-body .chapter-name {
    color: #205f54;
}

.lesson-body .close-lesson-button {
    color: #287665;

    background:
        rgba(218, 244, 237, 0.72);
}

.lesson-body .close-lesson-button:hover {
    background: #caeee4;

    color: #205f54;
}


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

.lesson-body .lesson-progress-track {
    background:
        rgba(91, 177, 156, 0.14);
}

.lesson-body .lesson-progress-fill {
    background:
        linear-gradient(
            90deg,
            #3ca68f,
            #72cbb7
        );

    box-shadow:
        0 4px 12px
        rgba(49, 144, 123, 0.20);
}

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


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

.lesson-screen {
    display: none;
}

.lesson-screen.active-screen {
    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;
}


/* =========================================================
   6. MAIN PANELS
========================================================= */

.lesson-body .lesson-panel {
    border:
        1px solid
        rgba(67, 157, 137, 0.12);

    box-shadow:
        0 25px 60px
        rgba(36, 103, 89, 0.10);
}

.lesson-body .screen-label {
    color: #328f7b;
}

.lesson-body h1,
.lesson-body h2,
.lesson-body h3 {
    color: #205f54;
}

.lesson-body .screen-introduction {
    color: #66827c;

    line-height: 1.65;
}

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


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

.lesson-body .intro-sun {
    background:
        linear-gradient(
            145deg,
            #d5f2e9,
            #a6dfd0
        );

    box-shadow:
        0 14px 28px
        rgba(51, 139, 120, 0.14);
}

.lesson-body .mission-card {
    border:
        1px solid
        rgba(65, 157, 136, 0.14);

    background:
        linear-gradient(
            145deg,
            #f8fdfb,
            #dcf4ed
        );

    box-shadow:
        0 12px 28px
        rgba(40, 112, 97, 0.08);
}

.lesson-body .mission-icon {
    background:
        linear-gradient(
            145deg,
            #c8ede3,
            #e8f8f3
        );
}

.lesson-body .mission-card strong {
    color: #205f54;
}

.lesson-body .mission-card p {
    color: #66827c;
}


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

.lesson-body .main-action-button {
    border: none;

    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #63c5ad
        );

    color: #ffffff;

    box-shadow:
        0 13px 26px
        rgba(43, 139, 118, 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(43, 139, 118, 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;
}


/* =========================================================
   9. REVIEW TOPICS
========================================================= */

.review-topics-grid {
    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 13px;
}

.review-topic-card {
    min-height: 230px;

    padding:
        20px 13px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #dff5ef
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.07);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

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

.review-topic-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(58, 151, 131, 0.25);

    box-shadow:
        0 15px 28px
        rgba(38, 105, 91, 0.12);
}

.review-topic-icon {
    min-height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 38px;
}

.review-topic-card > span {
    margin-top: 9px;

    color: #55a995;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.11em;
}

.review-topic-card h3 {
    margin:
        10px 0 8px;

    font-size: 17px;
}

.review-topic-card p {
    margin: 0;

    color: #66827c;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   10. REMEMBER STRIP
========================================================= */

.remember-strip {
    width: 100%;

    margin-top: 22px;

    padding:
        18px 20px;

    border:
        1px solid
        rgba(61, 157, 136, 0.12);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #f7fcfa,
            #dff5ef
        );

    display: flex;

    align-items: center;

    gap: 15px;

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

.remember-strip > span {
    flex: 0 0 auto;

    font-size: 28px;
}

.remember-strip p {
    margin: 0;

    color: #55766f;

    line-height: 1.55;
}

.remember-strip strong,
.remember-strip b {
    color: #287665;
}


/* =========================================================
   11. HABITAT REVIEW
========================================================= */

.habitat-review-grid {
    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}

.habitat-review-card {
    min-height: 205px;

    padding:
        20px 14px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #dff5ef
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.07);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    cursor: pointer;

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

.habitat-review-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(58, 151, 131, 0.25);

    box-shadow:
        0 15px 28px
        rgba(38, 105, 91, 0.12);
}

.habitat-review-card.speaking {
    border-color:
        rgba(60, 166, 143, 0.38);

    background:
        linear-gradient(
            145deg,
            #f5fcfa,
            #d0efe6
        );
}

.habitat-animal {
    margin-bottom: 11px;

    font-size: 50px;

    line-height: 1;
}

.habitat-review-card strong {
    color: #205f54;

    font-size: 19px;
}

.habitat-review-card > span {
    margin-top: 7px;

    padding:
        6px 11px;

    border-radius: 999px;

    background:
        rgba(60, 166, 143, 0.10);

    color: #328f7b;

    font-size: 12px;

    font-weight: 800;
}


/* =========================================================
   12. GRAMMAR EXPLANATION
========================================================= */

.grammar-explanation-card {
    width: 100%;

    margin-top: 21px;

    padding:
        19px 21px;

    border:
        1px solid
        rgba(61, 157, 136, 0.12);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #f7fcfa,
            #dff5ef
        );

    display: flex;

    align-items: center;

    gap: 17px;
}

.grammar-card-icon {
    width: 55px;

    height: 55px;

    flex:
        0 0 55px;

    border-radius: 18px;

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

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;
}

.grammar-explanation-card strong {
    color: #205f54;
}

.grammar-explanation-card p {
    margin:
        5px 0 0;

    color: #66827c;

    line-height: 1.55;
}

.grammar-explanation-card b {
    color: #287665;
}


/* =========================================================
   13. ADJECTIVES
========================================================= */

.adjective-review-grid {
    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}

.adjective-review-card {
    min-height: 190px;

    padding:
        19px 14px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #fbfefd,
            #e2f6f0
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.07);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    cursor: pointer;

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

.adjective-review-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 15px 28px
        rgba(38, 105, 91, 0.12);
}

.adjective-review-card.speaking {
    border-color:
        rgba(60, 166, 143, 0.38);

    background:
        #d9f3ec;
}

.adjective-review-card > span {
    margin-bottom: 10px;

    font-size: 46px;
}

.adjective-review-card strong {
    color: #205f54;

    font-size: 20px;
}

.adjective-review-card small {
    margin-top: 6px;

    color: #78918b;

    font-size: 12px;
}


/* =========================================================
   14. EXAMPLE SENTENCE
========================================================= */

.example-sentence-box {
    width: 100%;

    margin-top: 20px;

    padding:
        18px 20px;

    border:
        1px solid
        rgba(58, 151, 131, 0.13);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #e8f7f3
        );

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 17px;
}

.example-sentence-box > span {
    font-size: 36px;
}

.example-sentence-box p {
    margin: 0;

    color: #55766f;

    font-size: 17px;
}

.example-sentence-box strong {
    color: #287665;
}


/* =========================================================
   15. REVIEW RULE CARD
========================================================= */

.review-rule-card {
    width: 100%;

    margin-top: 25px;

    padding:
        23px 25px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #fbfefd,
            #dff5ef
        );

    display: flex;

    align-items: center;

    gap: 20px;

    box-shadow:
        0 11px 25px
        rgba(38, 105, 91, 0.07);
}

.review-rule-icon {
    width: 68px;

    height: 68px;

    flex:
        0 0 68px;

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #c8ede3,
            #e9f8f4
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 33px;
}

.review-rule-card > div:last-child {
    display: flex;

    flex-direction: column;

    gap: 6px;
}

.review-rule-card > div:last-child > span {
    color: #55a995;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.12em;
}

.review-rule-card > div:last-child > strong {
    color: #205f54;

    font-size: 22px;
}


/* =========================================================
   16. COMPARISON EXAMPLES
========================================================= */

.comparison-review-examples {
    width: 100%;

    margin-top: 20px;

    display: grid;

    gap: 13px;
}

.comparison-review-row {
    width: 100%;

    padding:
        17px 19px;

    border:
        1px solid
        rgba(58, 151, 131, 0.13);

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #e8f7f3
        );

    display: flex;

    align-items: center;

    gap: 18px;

    cursor: pointer;

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

.comparison-review-row:hover {
    transform:
        translateY(-2px);

    background: #ffffff;

    box-shadow:
        0 10px 22px
        rgba(38, 105, 91, 0.08);
}

.comparison-review-row.speaking {
    border-color:
        rgba(60, 166, 143, 0.36);

    background:
        #dcf4ed;
}

.comparison-review-row > span {
    min-width: 115px;

    font-size: 31px;

    text-align: center;
}

.comparison-review-row p {
    margin: 0;

    color: #55766f;

    font-size: 16px;

    line-height: 1.5;
}

.comparison-review-row strong {
    color: #287665;
}


/* =========================================================
   17. COMPARATIVE VS SUPERLATIVE SUMMARY
========================================================= */

.comparative-superlative-summary {
    width: 100%;

    margin-top: 22px;

    padding:
        19px;

    border:
        1px solid
        rgba(58, 151, 131, 0.13);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #f8fdfb,
            #ddf4ed
        );

    display: grid;

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

    align-items: center;

    gap: 17px;
}

.summary-side {
    min-height: 130px;

    padding:
        14px;

    border-radius: 18px;

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

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}

.summary-side > span {
    margin-bottom: 8px;

    font-size: 32px;
}

.summary-side small {
    color: #55a995;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.12em;
}

.summary-side strong {
    margin-top: 7px;

    color: #287665;

    font-size: 17px;
}

.summary-divider {
    width: 48px;

    height: 48px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #63c5ad
        );

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    font-weight: 900;

    box-shadow:
        0 8px 17px
        rgba(43, 139, 118, 0.16);
}


/* =========================================================
   18. SPECIAL FORM REMINDER
========================================================= */

.special-form-reminder {
    width: 100%;

    margin-top: 18px;

    padding:
        17px 19px;

    border:
        1px solid
        rgba(61, 157, 136, 0.13);

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #f4fbf8,
            #d7f1e9
        );

    display: flex;

    align-items: center;

    gap: 14px;
}

.special-form-reminder > span {
    font-size: 27px;
}

.special-form-reminder p {
    margin: 0;

    color: #55766f;

    line-height: 1.55;
}

.special-form-reminder strong {
    color: #287665;
}


/* =========================================================
   19. ACTIVITY PANEL
========================================================= */

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

.activity-progress {
    width: 100%;

    margin:
        18px 0 17px;

    display: flex;

    justify-content: center;
}

.activity-progress span {
    padding:
        8px 14px;

    border-radius: 999px;

    background: #e1f5ef;

    color: #287665;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.06em;
}


/* =========================================================
   20. REVIEW QUESTION CARDS
========================================================= */

.review-question-card,
.grammar-mix-card {
    width: 100%;

    min-height: 185px;

    padding:
        25px 20px;

    border:
        1px solid
        rgba(58, 151, 131, 0.14);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #fbfefd,
            #dff5ef
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.07);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}

.review-question-icon {
    margin-bottom: 14px;

    font-size: 50px;

    line-height: 1.2;
}

.review-question-card p,
.grammar-mix-card p {
    margin: 0;

    color: #315e56;

    font-size: 19px;

    font-weight: 700;

    line-height: 1.5;
}

.grammar-mix-icon {
    margin-bottom: 13px;

    font-size: 44px;
}


/* =========================================================
   21. ACTIVITY OPTIONS
========================================================= */

.activity-options {
    width: 100%;

    margin-top: 18px;

    display: grid;

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

    gap: 13px;
}

.activity-options button,
.activity-option,
.option-button {
    width: 100%;

    min-height: 62px;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(58, 151, 131, 0.16);

    border-radius: 17px;

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

    color: #315e56;

    font: inherit;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 7px 17px
        rgba(38, 105, 91, 0.05);

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

.activity-options button:hover:not(:disabled),
.activity-option:hover:not(:disabled),
.option-button:hover:not(:disabled) {
    transform:
        translateY(-2px);

    border-color:
        rgba(58, 151, 131, 0.30);

    background: #ffffff;

    box-shadow:
        0 10px 22px
        rgba(38, 105, 91, 0.09);
}

.activity-options button:disabled,
.activity-option:disabled,
.option-button:disabled {
    cursor: default;
}

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

.sentence-options button,
.sentence-options .activity-option,
.sentence-options .option-button {
    min-height: 68px;

    text-align: left;
}


/* =========================================================
   22. ANSWER STATES
========================================================= */

.activity-options button.correct,
.activity-option.correct,
.option-button.correct,
.activity-options .correct-option,
.correct-answer {
    border-color:
        rgba(54, 156, 132, 0.38) !important;

    background:
        linear-gradient(
            145deg,
            #eefbf7,
            #cdeee5
        ) !important;

    color:
        #205f54 !important;

    box-shadow:
        0 8px 20px
        rgba(46, 139, 118, 0.10);
}

.activity-options button.wrong,
.activity-option.wrong,
.option-button.wrong,
.activity-options .wrong-option,
.wrong-answer {
    border-color:
        rgba(209, 104, 104, 0.28) !important;

    background:
        linear-gradient(
            145deg,
            #fffafa,
            #f9e5e5
        ) !important;

    color:
        #934b4b !important;
}

.activity-options button.selected,
.activity-option.selected,
.option-button.selected,
.selected-option {
    border-color:
        #75cbb7;

    background:
        #e2f6f0;

    color:
        #205f54;
}


/* =========================================================
   23. ACTIVITY FEEDBACK
========================================================= */

.activity-feedback {
    min-height: 28px;

    margin-top: 15px;

    color: #55766f;

    font-size: 14px;

    font-weight: 700;

    text-align: center;
}

.activity-feedback.correct,
.activity-feedback.success,
.activity-feedback.correct-feedback,
.feedback-correct {
    color: #287665;
}

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


/* =========================================================
   24. CHECKPOINT
========================================================= */

.checkpoint-review-grid {
    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 12px;
}

.checkpoint-review-card {
    min-height: 210px;

    padding:
        18px 12px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #dff5ef
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.07);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

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

.checkpoint-review-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 15px 28px
        rgba(38, 105, 91, 0.12);
}

.checkpoint-review-card > span {
    margin-bottom: 11px;

    font-size: 37px;
}

.checkpoint-review-card strong {
    color: #205f54;

    font-size: 16px;
}

.checkpoint-review-card p {
    margin:
        10px 0 0;

    color: #66827c;

    font-size: 12px;

    line-height: 1.5;
}

.checkpoint-review-card b {
    color: #287665;
}


/* =========================================================
   25. REVIEW DECISION CARD
========================================================= */

.review-decision-card {
    width: 100%;

    margin-top: 22px;

    padding:
        20px;

    border:
        1px solid
        rgba(61, 157, 136, 0.12);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f7fcfa,
            #dff5ef
        );
}

.review-decision-title {
    margin-bottom: 14px;

    color: #205f54;

    font-size: 17px;

    font-weight: 800;
}

.review-decision-row {
    padding:
        11px 12px;

    border-radius: 15px;

    display: grid;

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

    align-items: center;

    gap: 12px;

    transition:
        background 0.2s ease;
}

.review-decision-row + .review-decision-row {
    margin-top: 7px;
}

.review-decision-row:hover {
    background:
        rgba(255, 255, 255, 0.58);
}

.review-decision-row > span {
    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #c9eee4;

    color: #287665;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 900;
}

.review-decision-row p {
    margin: 0;

    color: #55766f;
}

.review-decision-row strong {
    color: #287665;

    font-size: 13px;
}


/* =========================================================
   26. VIDEO
========================================================= */

.video-lesson-card {
    width: 100%;

    margin-top: 25px;

    padding: 9px;

    border:
        1px solid
        rgba(58, 151, 131, 0.13);

    border-radius: 25px;

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

    box-shadow:
        0 12px 28px
        rgba(38, 105, 91, 0.07);
}

.video-placeholder {
    min-height: 310px;

    padding: 25px;

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #e5f6f1,
            #c9eee4
        );

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}

.video-play-icon {
    width: 74px;

    height: 74px;

    margin-bottom: 17px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #63c5ad
        );

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-left: 4px;

    font-size: 26px;

    box-shadow:
        0 12px 25px
        rgba(43, 139, 118, 0.20);
}

.video-placeholder strong {
    color: #205f54;

    font-size: 21px;
}

.video-placeholder > span {
    margin-top: 7px;

    color: #66827c;
}

.video-tip-card {
    width: 100%;

    margin-top: 17px;

    padding:
        17px 19px;

    border:
        1px solid
        rgba(61, 157, 136, 0.12);

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #f7fcfa,
            #e3f6f0
        );

    display: flex;

    align-items: center;

    gap: 14px;
}

.video-tip-card > span {
    font-size: 26px;
}

.video-tip-card p {
    margin: 0;

    color: #66827c;

    line-height: 1.5;
}

.video-tip-card strong {
    color: #287665;
}


/* =========================================================
   27. EXTERNAL GAMES
========================================================= */

.external-games-grid {
    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}

.external-game-card {
    min-height: 145px;

    padding:
        19px 18px;

    border:
        1px solid
        rgba(58, 151, 131, 0.14);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #e2f6f0
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.07);

    display: grid;

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

    align-items: center;

    gap: 14px;

    text-decoration: none;

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

.external-game-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 15px 28px
        rgba(38, 105, 91, 0.12);
}

.external-game-icon {
    width: 53px;

    height: 53px;

    border-radius: 17px;

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

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;
}

.game-type {
    display: block;

    margin-bottom: 5px;

    color: #55a995;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.12em;
}

.external-game-card strong {
    color: #205f54;

    font-size: 16px;
}

.external-game-card p {
    margin:
        5px 0 0;

    color: #66827c;

    font-size: 13px;
}

.external-arrow {
    color: #3ca68f;

    font-size: 23px;

    font-weight: 900;
}


/* =========================================================
   28. BADGES
========================================================= */

.badge-row {
    width: 100%;

    margin:
        24px 0 21px;

    display: flex;

    justify-content: center;

    gap: 11px;
}

.badge-row i {
    width: 44px;

    height: 44px;

    border:
        1px solid
        rgba(58, 151, 131, 0.14);

    border-radius: 50%;

    background: #edf9f6;

    color: #78aa9e;

    display: flex;

    align-items: center;

    justify-content: center;

    font-style: normal;

    font-weight: 900;

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

.badge-row i.completed,
.badge-row i.earned,
.badge-row i.active-badge {
    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #69c9b3
        );

    color: #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 16px
        rgba(43, 139, 118, 0.18);
}


/* =========================================================
   29. PRACTICE MAP
========================================================= */

.practice-map {
    width: 100%;

    display: grid;

    gap: 12px;
}

.practice-level {
    width: 100%;

    min-height: 92px;

    padding:
        14px 17px;

    border:
        1px solid
        rgba(58, 151, 131, 0.14);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #e6f7f2
        );

    display: grid;

    grid-template-columns:
        40px 55px 1fr auto;

    align-items: center;

    gap: 13px;

    color: #315e56;

    font: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 8px 19px
        rgba(38, 105, 91, 0.05);

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

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

    border-color:
        rgba(58, 151, 131, 0.27);

    box-shadow:
        0 12px 24px
        rgba(38, 105, 91, 0.09);
}

.level-number {
    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: #d7f2ea;

    color: #287665;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 900;
}

.level-icon {
    font-size: 30px;

    text-align: center;
}

.level-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.level-copy strong {
    color: #205f54;
}

.level-copy small {
    color: #7b938e;
}

.level-status {
    padding:
        7px 10px;

    border-radius: 999px;

    background: #dff5ef;

    color: #328f7b;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.08em;
}

.active-practice-level {
    border-color:
        rgba(60, 166, 143, 0.28);

    background:
        linear-gradient(
            145deg,
            #f9fdfc,
            #d5f1e9
        );
}

.locked-level {
    opacity: 0.52;

    cursor: not-allowed;
}

.locked-level .level-status {
    background: #edf2f1;

    color: #899a96;
}

.practice-level.completed-level,
.practice-level.level-complete {
    border-color:
        rgba(60, 166, 143, 0.26);

    background:
        linear-gradient(
            145deg,
            #f5fcfa,
            #caeee4
        );
}

.map-message {
    margin:
        19px 0 0;

    color: #66827c;

    text-align: center;

    font-weight: 700;
}


/* =========================================================
   30. GAME WORKSPACE
========================================================= */

.game-workspace-panel {
    position: relative;
}

.game-back-button {
    margin-bottom: 21px;

    padding:
        9px 13px;

    border:
        1px solid
        rgba(58, 151, 131, 0.13);

    border-radius: 12px;

    background: #edf9f6;

    color: #287665;

    font: inherit;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.game-back-button:hover {
    background: #dff5ef;

    transform:
        translateX(-2px);
}

.game-heading {
    text-align: center;
}

.game-label {
    display: inline-flex;

    padding:
        7px 12px;

    border-radius: 999px;

    background: #dff5ef;

    color: #328f7b;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.12em;
}

.game-heading h2 {
    margin:
        12px 0 6px;
}

.game-heading p {
    margin: 0;

    color: #66827c;
}

.game-status-bar {
    width: 100%;

    margin-top: 21px;

    padding:
        13px 16px;

    border:
        1px solid
        rgba(58, 151, 131, 0.12);

    border-radius: 16px;

    background: #f3fbf8;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    color: #66827c;

    font-size: 13px;
}

.game-status-bar strong {
    color: #287665;
}

.game-workspace {
    width: 100%;

    min-height: 260px;

    margin-top: 17px;

    padding: 22px;

    border:
        1px solid
        rgba(58, 151, 131, 0.13);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #fbfefd,
            #e4f6f1
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.06);
}


/* =========================================================
   31. DYNAMIC GAME ELEMENTS
========================================================= */

.game-workspace button {
    font: inherit;
}

.game-question,
.map-game-question,
.workspace-question {
    margin:
        0 0 18px;

    color: #205f54;

    font-size: 20px;

    font-weight: 800;

    line-height: 1.45;

    text-align: center;
}

.game-icons,
.workspace-icons {
    margin-bottom: 16px;

    font-size: 45px;

    line-height: 1.2;

    text-align: center;
}

.game-options,
.workspace-options {
    display: grid;

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

    gap: 12px;
}

.game-options button,
.workspace-options button,
.game-option {
    min-height: 60px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(58, 151, 131, 0.16);

    border-radius: 16px;

    background: #ffffff;

    color: #315e56;

    font: inherit;

    font-weight: 700;

    cursor: pointer;

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

.game-options button:hover:not(:disabled),
.workspace-options button:hover:not(:disabled),
.game-option:hover:not(:disabled) {
    transform:
        translateY(-2px);

    background: #f5fcfa;

    border-color:
        rgba(58, 151, 131, 0.28);
}

.game-option.correct,
.game-options button.correct,
.workspace-options button.correct {
    background: #d9f3ec;

    border-color: #75cbb7;

    color: #205f54;
}

.game-option.wrong,
.game-options button.wrong,
.workspace-options button.wrong {
    background: #f9e6e6;

    border-color: #e5b4b4;

    color: #954e4e;
}


/* =========================================================
   32. FINAL REVIEW
========================================================= */

.final-review-grid {
    width: 100%;

    margin-top: 26px;

    display: grid;

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

    gap: 12px;
}

.final-review-card {
    min-height: 205px;

    padding:
        18px 12px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #dff5ef
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.07);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

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

.final-review-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 15px 28px
        rgba(38, 105, 91, 0.12);
}

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

    font-size: 35px;
}

.final-review-card > strong {
    color: #205f54;

    font-size: 18px;
}

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

    color: #66827c;

    font-size: 13px;
}

.final-review-card b {
    color: #287665;

    font-size: 13px;
}

.final-rule-card {
    width: 100%;

    margin-top: 22px;

    padding:
        19px 21px;

    border:
        1px solid
        rgba(61, 157, 136, 0.12);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #f7fcfa,
            #dff5ef
        );

    display: flex;

    align-items: center;

    gap: 17px;
}

.final-rule-card > span {
    font-size: 32px;
}

.final-rule-card strong {
    color: #205f54;
}

.final-rule-card p {
    margin:
        5px 0 0;

    color: #66827c;

    line-height: 1.55;
}

.final-rule-card b {
    color: #287665;
}


/* =========================================================
   33. FINISH
========================================================= */

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

.finish-trophy {
    width: 100px;

    height: 100px;

    margin:
        0 auto 20px;

    border-radius: 31px;

    background:
        linear-gradient(
            145deg,
            #d5f2e9,
            #a6dfd0
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 51px;

    box-shadow:
        0 14px 28px
        rgba(51, 139, 120, 0.14);
}

.finish-message {
    max-width: 560px;

    margin:
        15px auto 0;

    color: #66827c;

    line-height: 1.65;
}

.final-result-grid {
    width: 100%;

    max-width: 520px;

    margin:
        25px auto 0;

    display: grid;

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

    gap: 15px;
}

.final-result-card {
    min-height: 150px;

    padding: 19px;

    border:
        1px solid
        rgba(58, 151, 131, 0.14);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #dff5ef
        );

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.07);
}

.final-result-card > span {
    margin-bottom: 7px;

    font-size: 31px;
}

.final-result-card > strong {
    color: #205f54;

    font-size: 30px;
}

.final-result-card small {
    margin-top: 4px;

    color: #78918b;
}

.finish-achievement {
    width: 100%;

    max-width: 520px;

    margin:
        18px auto 0;

    padding:
        18px 20px;

    border:
        1px solid
        rgba(61, 157, 136, 0.13);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #f4fbf8,
            #d7f1e9
        );

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;
}

.finish-achievement > span {
    font-size: 32px;
}

.finish-achievement > div {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 3px;
}

.finish-achievement small {
    color: #55a995;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.12em;
}

.finish-achievement strong {
    color: #287665;
}

.lesson-home-button {
    width: fit-content;

    margin:
        25px auto 0;

    text-decoration: none;
}


/* =========================================================
   34. ACHIEVEMENT TOAST
========================================================= */

.achievement-toast {
    position: fixed;

    right: 24px;

    bottom: 24px;

    z-index: 1000;

    width:
        min(360px, calc(100vw - 32px));

    padding:
        16px 18px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 21px;

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

    box-shadow:
        0 20px 50px
        rgba(36, 103, 89, 0.17);

    display: flex;

    align-items: center;

    gap: 14px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(20px);

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

    backdrop-filter:
        blur(15px);
}

.achievement-toast.show,
.achievement-toast.visible,
.achievement-toast.show-toast {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}

.achievement-toast-icon {
    width: 52px;

    height: 52px;

    flex:
        0 0 52px;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #c9eee4,
            #e8f8f3
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;
}

.achievement-toast > div:last-child {
    min-width: 0;
}

.achievement-toast > div:last-child > span {
    color: #55a995;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.12em;
}

.achievement-toast strong {
    display: block;

    margin-top: 3px;

    color: #205f54;
}

.achievement-toast p {
    margin:
        3px 0 0;

    color: #78918b;

    font-size: 12px;
}


/* =========================================================
   35. EFFECT LAYERS
========================================================= */

.sparkle-layer,
.confetti-layer {
    position: fixed;

    inset: 0;

    z-index: 999;

    pointer-events: none;

    overflow: hidden;
}

.sparkle,
.confetti-piece {
    position: absolute;

    pointer-events: none;
}


/* =========================================================
   36. SPEAKABLE ELEMENTS
========================================================= */

[data-speak] {
    position: relative;
}

[data-speak].speaking {
    border-color:
        rgba(60, 166, 143, 0.34) !important;

    box-shadow:
        0 0 0 4px
        rgba(60, 166, 143, 0.07),
        0 12px 26px
        rgba(38, 105, 91, 0.09);
}


/* =========================================================
   37. GENERIC SPEAK BUTTON
========================================================= */

.lesson-body .speak-button {
    border:
        1px solid
        rgba(64, 159, 138, 0.14);

    background: white;

    color: #328f7b;

    cursor: pointer;

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

.lesson-body .speak-button:hover {
    background: #e2f6f0;

    color: #205f54;

    transform:
        translateY(-2px);
}

.lesson-body .speak-button.speaking {
    background: #c9eee4;

    color: #205f54;
}


/* =========================================================
   38. IMPORTANT / TIP CARDS
========================================================= */

.lesson-body .important-note {
    border:
        1px solid
        rgba(61, 157, 136, 0.12);

    background:
        linear-gradient(
            145deg,
            #f7fcfa,
            #dff5ef
        );
}

.lesson-body .golden-tip {
    border:
        1px solid
        rgba(61, 157, 136, 0.13);

    background:
        linear-gradient(
            145deg,
            #f4fbf8,
            #d7f1e9
        );
}

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


/* =========================================================
   39. FOCUS
========================================================= */

.lesson-body button:focus-visible,
.lesson-body a:focus-visible,
.lesson-body [data-speak]:focus-visible {
    outline:
        3px solid
        rgba(60, 166, 143, 0.28);

    outline-offset: 3px;
}


/* =========================================================
   40. SCREEN ANIMATION
========================================================= */

@keyframes lessonSoftAppear {

    from {
        opacity: 0;

        transform:
            translateY(10px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}

.lesson-screen.active-screen .lesson-panel {
    animation:
        lessonSoftAppear
        0.32s ease both;
}


/* =========================================================
   41. TROPHY ANIMATION
========================================================= */

@keyframes trophyFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(2deg);
    }

}

.finish-trophy {
    animation:
        trophyFloat
        3.2s ease-in-out infinite;
}


/* =========================================================
   42. TABLET
========================================================= */

@media (max-width: 1000px) {

    .review-topics-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .review-topic-card:nth-child(4),
    .review-topic-card:nth-child(5) {
        min-height: 210px;
    }


    .checkpoint-review-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .final-review-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   43. TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 850px) {

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


    .review-topic-card:last-child {
        grid-column:
            1 / -1;
    }


    .habitat-review-grid,
    .adjective-review-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


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


    .checkpoint-review-card:last-child {
        grid-column:
            1 / -1;
    }


    .external-games-grid {
        grid-template-columns: 1fr;
    }


    .practice-level {
        grid-template-columns:
            38px 48px 1fr auto;
    }


    .final-review-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   44. MOBILE
========================================================= */

@media (max-width: 680px) {

    .review-topics-grid,
    .habitat-review-grid,
    .adjective-review-grid,
    .activity-options,
    .checkpoint-review-grid,
    .external-games-grid,
    .final-result-grid,
    .game-options,
    .workspace-options {
        grid-template-columns: 1fr;
    }


    .review-topic-card:last-child,
    .checkpoint-review-card:last-child {
        grid-column: auto;
    }


    .review-rule-card,
    .grammar-explanation-card,
    .final-rule-card {
        align-items: flex-start;
    }


    .comparison-review-row {
        flex-direction: column;

        text-align: center;
    }


    .comparison-review-row > span {
        min-width: 0;
    }


    .comparative-superlative-summary {
        grid-template-columns: 1fr;
    }


    .summary-divider {
        margin: auto;
    }


    .review-decision-row {
        grid-template-columns:
            34px 1fr;
    }


    .review-decision-row strong {
        grid-column:
            2;
    }


    .practice-level {
        grid-template-columns:
            36px 43px 1fr;
    }


    .practice-level .level-status {
        grid-column:
            3;

        width: fit-content;
    }


    .external-game-card {
        grid-template-columns:
            48px 1fr;
    }


    .external-arrow {
        display: none;
    }


    .video-placeholder {
        min-height: 240px;
    }


    .game-status-bar {
        align-items: flex-start;

        flex-direction: column;
    }


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


    .final-review-card:last-child {
        grid-column:
            1 / -1;
    }


    .achievement-toast {
        right: 16px;

        bottom: 16px;
    }

}


/* =========================================================
   45. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

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


    .final-review-card:last-child {
        grid-column: auto;
    }


    .review-question-icon {
        font-size: 42px;
    }


    .habitat-animal {
        font-size: 45px;
    }


    .adjective-review-card > span {
        font-size: 41px;
    }


    .badge-row {
        gap: 7px;
    }


    .badge-row i {
        width: 38px;

        height: 38px;
    }


    .practice-level {
        padding:
            13px 12px;

        gap: 9px;
    }


    .level-copy strong {
        font-size: 13px;
    }


    .level-copy small {
        font-size: 10px;
    }


    .finish-achievement {
        align-items: flex-start;

        text-align: left;
    }


    .special-form-reminder,
    .remember-strip,
    .video-tip-card {
        align-items: flex-start;
    }

}


/* =========================================================
   46. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .lesson-body *,
    .lesson-body *::before,
    .lesson-body *::after {
        scroll-behavior: auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}