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


/* =========================================================
   GRADE 3 — LESSON 20
   MUST & MUSTN'T
========================================================= */


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

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

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

    min-height: 100vh;

    margin: 0;

    color: var(--rules-main);

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

    overflow-x: hidden;

    position: relative;
}


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

.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
   SAME STRUCTURE AS LESSON 19
========================================================= */

.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 {

    color: #205f54;

    background: #caeee4;
}


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

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

.grammar-hero-card {

    width: 100%;

    margin-top: 25px;

    padding:
        24px 22px;

    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;

    align-items: center;

    gap: 18px;
}


.grammar-hero-card.mustnt-card {

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


.grammar-hero-icon {

    width: 76px;

    height: 76px;

    min-width: 76px;

    border-radius: 23px;

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

    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: #328f7b;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.12em;
}


.grammar-hero-content strong {

    color: #205f54;

    font-size: 21px;
}


.grammar-hero-content p {

    margin:
        7px 0 0;

    color: #66827c;

    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(58, 151, 131, 0.14);

    border-radius: 21px;

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

    box-shadow:
        0 9px 21px
        rgba(38, 105, 91, 0.06);

    display: grid;

    grid-template-columns:
        55px 1fr;

    align-items: center;

    gap: 16px;
}


.example-sentence-box strong {

    color: #205f54;

    font-size: 17px;
}


.example-sentence-box div > span {

    display: block;

    margin-top: 5px;

    color: #66827c;

    font-size: 13px;

    line-height: 1.45;
}


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

.lesson-body .speak-button {

    width: 48px;

    height: 48px;

    padding: 0;

    border:
        1px solid
        rgba(64, 159, 138, 0.14);

    border-radius: 15px;

    background: #ffffff;

    color: #328f7b;

    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: #e2f6f0;

    color: #205f54;

    transform:
        translateY(-2px);

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


.lesson-body .speak-button.speaking {

    background: #c9eee4;

    color: #205f54;
}


.wide-speak-button {

    width: auto !important;

    height: auto !important;

    min-height: 48px;

    margin:
        15px auto 0 !important;

    padding:
        11px 17px !important;

    display: flex !important;

    gap: 7px;
}


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

.lesson-body .important-note {

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


.lesson-body .important-note > span {

    flex: 0 0 auto;

    font-size: 28px;
}


.lesson-body .important-note p {

    margin: 0;

    color: #55766f;

    line-height: 1.55;
}


.lesson-body .important-note strong {

    color: #287665;
}


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

.lesson-body .golden-tip {

    width: 100%;

    margin-top: 22px;

    padding:
        18px 20px;

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

    border-radius: 20px;

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

    display: flex;

    align-items: center;

    gap: 15px;
}


.lesson-body .golden-tip > span {

    font-size: 28px;
}


.lesson-body .golden-tip p {

    margin: 0;

    color: #55766f;

    line-height: 1.55;
}


.lesson-body .golden-tip strong {

    color: #287665;
}


/* =========================================================
   14. GRAMMAR FORMULA
========================================================= */

.grammar-formula-card {

    width: 100%;

    margin-top: 25px;

    padding:
        21px 20px;

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

    border-radius: 23px;

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

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

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;
}


.formula-part {

    padding:
        10px 14px;

    border-radius: 13px;

    background: #ffffff;

    color: #205f54;

    font-weight: 800;

    line-height: 1.4;

    text-align: center;
}


.formula-part.modal {

    background: #c9eee4;
}


.formula-part.verb {

    background: #effaf7;
}


.formula-plus {

    color: #55a995;

    font-size: 20px;

    font-weight: 900;
}


/* =========================================================
   15. FORMULA EXPLANATION
========================================================= */

.formula-explanation {

    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}


.formula-info-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;

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


.formula-info-card:hover {

    transform:
        translateY(-4px);

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


.formula-info-card > span {

    min-height: 62px;

    margin-bottom: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 48px;

    line-height: 1;
}


.formula-info-card strong {

    color: #205f54;

    font-size: 19px;
}


.formula-info-card p {

    margin:
        7px 0 0;

    color: #78918b;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   16. SENTENCE BUILD
========================================================= */

.sentence-build-example {

    width: 100%;

    margin-top: 25px;

    padding:
        21px 20px;

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

    border-radius: 23px;

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

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

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;
}


.sentence-build-example > span:not(.sentence-plus) {

    padding:
        10px 14px;

    border-radius: 13px;

    background: #ffffff;

    color: #205f54;

    font-weight: 800;
}


.sentence-plus {

    color: #55a995;

    font-size: 20px;

    font-weight: 900;
}


/* =========================================================
   17. IMPORTANT GRAMMAR
========================================================= */

.important-grammar-card {

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


.important-grammar-icon {

    flex: 0 0 auto;

    font-size: 28px;
}


.important-grammar-card strong {

    color: #287665;
}


.important-grammar-card p {

    margin:
        5px 0 0;

    color: #55766f;

    line-height: 1.55;
}


/* =========================================================
   18. CORRECT / WRONG GRID
========================================================= */

.correct-wrong-grid {

    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}


.grammar-answer-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;
}


.grammar-answer-card .answer-mark {

    width: 48px;

    height: 48px;

    margin-bottom: 13px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;

    font-weight: 900;
}


.grammar-answer-card.correct-card .answer-mark {

    color: #287665;

    background: #c9eee4;
}


.grammar-answer-card.wrong-card .answer-mark {

    color: #7c655f;

    background: #f3e9e5;
}


.grammar-answer-card strong {

    color: #205f54;

    font-size: 17px;
}


.grammar-answer-card p {

    margin:
        8px 0 0;

    color: #78918b;

    font-size: 13px;
}

/* =========================================================
   19. RULES IN REAL LIFE
========================================================= */

.rules-place-grid {

    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}


.rules-place-card {

    min-width: 0;

    padding:
        20px 16px;

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

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


.rules-place-card:hover {

    transform:
        translateY(-4px);

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

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


.rules-place-icon {

    min-height: 62px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 48px;

    line-height: 1;
}


.place-label {

    display: block;

    margin-bottom: 6px;

    color: #55a995;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.10em;

    text-align: center;
}


.rules-place-card h3 {

    margin:
        0 0 15px;

    color: #205f54;

    font-size: 19px;

    text-align: center;
}


.rule-example-row {

    width: 100%;

    min-height: 76px;

    margin-top: 9px;

    padding:
        12px 13px;

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

    border-radius: 16px;

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

    display: grid;

    grid-template-columns:
        35px 1fr;

    align-items: center;

    gap: 10px;

    color: #315e56;

    font: inherit;

    text-align: left;

    cursor: pointer;

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


.rule-example-row:hover {

    transform:
        translateY(-2px);

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

    background: #ffffff;

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


.rule-example-row.speaking {

    background: #dff5ef;

    border-color:
        rgba(60, 166, 143, 0.35);
}


.rule-example-row > span {

    font-size: 24px;

    text-align: center;
}


.rule-example-row p {

    margin: 0;

    color: #55766f;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.45;
}


/* =========================================================
   20. ACTIVITY PANEL
========================================================= */

.activity-panel {

    position: relative;
}


.activity-progress {

    width: 100%;

    margin:
        22px 0 15px;

    display: flex;

    justify-content: flex-end;
}


.activity-progress span {

    min-width: 68px;

    padding:
        8px 12px;

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

    border-radius: 999px;

    background: #effaf7;

    color: #328f7b;

    font-size: 12px;

    font-weight: 900;

    text-align: center;

    letter-spacing: 0.04em;
}


/* =========================================================
   21. ACTIVITY QUESTION
========================================================= */

.review-question-card,
.grammar-mix-card {

    width: 100%;

    min-height: 165px;

    padding:
        24px 22px;

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

    border-radius: 23px;

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

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

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.question-emoji,
.grammar-mix-icon {

    min-height: 56px;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 46px;

    line-height: 1;
}


.review-question-card p,
.grammar-mix-card p {

    max-width: 650px;

    margin: 0;

    color: #205f54;

    font-size: 19px;

    font-weight: 800;

    line-height: 1.55;
}


/* =========================================================
   22. ACTIVITY OPTIONS
========================================================= */

.activity-options {

    width: 100%;

    margin-top: 17px;

    display: grid;

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

    gap: 13px;
}


.activity-option,
.option-button {

    width: 100%;

    min-height: 72px;

    padding:
        15px 17px;

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

    border-radius: 18px;

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

    color: #315e56;

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

    font: inherit;

    font-size: 15px;

    font-weight: 800;

    line-height: 1.45;

    text-align: center;

    cursor: pointer;

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


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

    transform:
        translateY(-3px);

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

    background: #ffffff;

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


.activity-option:disabled,
.option-button:disabled {

    cursor: default;
}


/* =========================================================
   23. ANSWER STATES
========================================================= */

.activity-option.correct-answer,
.option-button.correct-answer,
.activity-option.correct,
.option-button.correct {

    border-color:
        rgba(50, 143, 123, 0.38);

    background:
        linear-gradient(
            145deg,
            #eaf9f4,
            #ccefe5
        );

    color: #205f54;

    box-shadow:
        0 8px 20px
        rgba(49, 144, 123, 0.12);
}


.activity-option.wrong-answer,
.option-button.wrong-answer,
.activity-option.wrong,
.option-button.wrong {

    border-color:
        rgba(173, 113, 98, 0.25);

    background:
        linear-gradient(
            145deg,
            #fffafa,
            #f5e9e5
        );

    color: #785f59;

    box-shadow:
        0 8px 20px
        rgba(140, 93, 82, 0.08);
}


.activity-option.selected-option,
.option-button.selected-option {

    border-color:
        rgba(60, 166, 143, 0.34);

    background: #e4f6f1;
}


/* =========================================================
   24. ACTIVITY FEEDBACK
========================================================= */

.activity-feedback {

    width: 100%;

    min-height: 0;

    margin-top: 14px;

    padding: 0;

    border-radius: 16px;

    color: #55766f;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.5;

    text-align: center;

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


.activity-feedback:not(:empty) {

    min-height: 50px;

    padding:
        14px 16px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.activity-feedback.feedback-correct,
.activity-feedback.correct-feedback {

    border:
        1px solid
        rgba(50, 143, 123, 0.16);

    background: #e6f7f1;

    color: #287665;
}


.activity-feedback.feedback-wrong,
.activity-feedback.wrong-feedback {

    border:
        1px solid
        rgba(173, 113, 98, 0.14);

    background: #f8efec;

    color: #785f59;
}


.activity-panel > .main-action-button {

    margin-top: 20px;
}


/* =========================================================
   25. CHECKPOINT
========================================================= */

.checkpoint-review-grid {

    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}


.checkpoint-review-card {

    min-height: 210px;

    padding:
        20px 17px;

    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;

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


.checkpoint-review-card:hover {

    transform:
        translateY(-4px);

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


.checkpoint-icon {

    min-height: 55px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 43px;

    line-height: 1;
}


.checkpoint-review-card strong {

    color: #205f54;

    font-size: 18px;
}


.checkpoint-review-card p {

    margin:
        8px 0 0;

    color: #66827c;

    font-size: 13px;

    line-height: 1.5;
}


.checkpoint-example {

    margin-top: 13px;

    padding:
        8px 11px;

    border-radius: 11px;

    background: #ffffff;

    color: #328f7b;

    font-size: 12px;

    font-weight: 800;
}


/* =========================================================
   26. REVIEW DECISION
========================================================= */

.review-decision-card {

    width: 100%;

    margin-top: 22px;

    padding:
        20px;

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

    border-radius: 22px;

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

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


.review-decision-card h3 {

    margin:
        0 0 15px;

    text-align: center;
}


.decision-row {

    width: 100%;

    min-height: 64px;

    padding:
        10px 13px;

    border-bottom:
        1px solid
        rgba(58, 151, 131, 0.10);

    display: grid;

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

    align-items: center;

    gap: 12px;
}


.decision-row:last-child {

    border-bottom: none;
}


.decision-row > span {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: #c9eee4;

    color: #287665;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 900;
}


.decision-row p {

    margin: 0;

    color: #55766f;

    font-size: 13px;

    line-height: 1.45;
}


.decision-row strong {

    padding:
        7px 10px;

    border-radius: 10px;

    background: #ffffff;

    color: #287665;

    font-size: 12px;

    white-space: nowrap;
}


/* =========================================================
   27. VIDEO
========================================================= */

.video-panel {

    text-align: center;
}


.video-frame {

    width: 100%;

    margin-top: 25px;

    padding: 9px;

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

    border-radius: 25px;

    background: #ffffff;

    box-shadow:
        0 13px 29px
        rgba(38, 105, 91, 0.08);

    overflow: hidden;
}


.video-placeholder {

    width: 100%;

    min-height: 340px;

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(117, 203, 183, 0.23),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #effaf7,
            #d7f1e9
        );

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.video-play-icon {

    width: 76px;

    height: 76px;

    margin-bottom: 17px;

    border-radius: 50%;

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

    color: #ffffff;

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

    display: flex;

    align-items: center;

    justify-content: center;

    padding-left: 4px;

    font-size: 26px;
}


.video-placeholder strong {

    color: #205f54;

    font-size: 21px;
}


.video-placeholder p {

    margin:
        6px 0 0;

    color: #66827c;
}


.video-note {

    width: 100%;

    margin-top: 17px;

    padding:
        15px 18px;

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

    border-radius: 17px;

    background: #effaf7;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;
}


.video-note > span {

    font-size: 24px;
}


.video-note p {

    margin: 0;

    color: #55766f;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   28. EXTERNAL GAMES
========================================================= */

.external-games-grid {

    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}


.external-game-card {

    min-height: 230px;

    padding:
        21px 16px;

    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;

    color: #315e56;

    text-align: center;

    text-decoration: none;

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


.external-game-card:hover {

    transform:
        translateY(-4px);

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

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


.external-game-icon {

    min-height: 60px;

    margin-bottom: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 47px;
}


.external-game-card strong {

    color: #205f54;

    font-size: 18px;
}


.external-game-card p {

    margin:
        8px 0 13px;

    color: #78918b;

    font-size: 13px;

    line-height: 1.5;
}


.external-game-card > span {

    margin-top: auto;

    color: #328f7b;

    font-size: 12px;

    font-weight: 900;
}


/* =========================================================
   29. BADGES
========================================================= */

.badge-row {

    width: 100%;

    margin:
        24px 0 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;
}


.badge-row i {

    width: 39px;

    height: 39px;

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

    border-radius: 50%;

    background: #eff7f4;

    color: #9bb2ac;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-style: normal;

    font-weight: 900;

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


.badge-row i.earned,
.badge-row i.completed,
.badge-row i.active {

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

    color: #ffffff;

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

    transform:
        translateY(-2px);
}


/* =========================================================
   30. PRACTICE MAP
========================================================= */

.practice-map {

    width: 100%;

    display: grid;

    gap: 13px;
}


.practice-level {

    width: 100%;

    min-height: 94px;

    padding:
        14px 16px;

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

    border-radius: 20px;

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

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

    display: grid;

    grid-template-columns:
        44px 54px 1fr auto;

    align-items: center;

    gap: 13px;

    color: #315e56;

    font: inherit;

    text-align: left;

    cursor: pointer;

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


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

    transform:
        translateY(-3px);

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

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


.level-number {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: #c9eee4;

    color: #287665;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 900;
}


.level-icon {

    font-size: 34px;

    text-align: center;
}


.level-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.level-content strong {

    color: #205f54;

    font-size: 15px;
}


.level-content small {

    color: #78918b;

    font-size: 12px;

    line-height: 1.4;
}


.level-status {

    min-width: 60px;

    padding:
        7px 10px;

    border-radius: 999px;

    background: #ffffff;

    color: #328f7b;

    font-size: 11px;

    font-weight: 900;

    text-align: center;
}


.practice-level.locked,
.practice-level:disabled {

    opacity: 0.54;

    cursor: not-allowed;

    transform: none;
}


.practice-level.locked .level-number {

    background: #edf3f1;

    color: #9badA8;
}


.practice-level.active-practice-level,
.practice-level.active-level {

    border-color:
        rgba(60, 166, 143, 0.34);

    background:
        linear-gradient(
            145deg,
            #f7fdfb,
            #d7f2ea
        );
}


.practice-level.level-complete,
.practice-level.completed {

    border-color:
        rgba(60, 166, 143, 0.25);

    background:
        linear-gradient(
            145deg,
            #f4fcf9,
            #d2f0e7
        );
}


.practice-level.level-complete .level-status,
.practice-level.completed .level-status {

    background: #c9eee4;

    color: #287665;
}


/* =========================================================
   31. MAP MESSAGE
========================================================= */

.map-message {

    width: 100%;

    margin-top: 18px;

    padding:
        15px 17px;

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

    border-radius: 17px;

    background: #effaf7;

    color: #55766f;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.5;

    text-align: center;
}


.map-panel > .main-action-button {

    margin-top: 20px;
}

/* =========================================================
   32. GAME WORKSPACE
========================================================= */

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

.game-workspace-header {
    width: 100%;
    margin-top: 22px;
    padding: 19px 20px;

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

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

    display: flex;
    align-items: center;
    gap: 16px;

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

.game-workspace-icon {
    width: 67px;
    height: 67px;
    min-width: 67px;

    border-radius: 20px;

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

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

    font-size: 35px;
}

.game-level-label {
    display: block;

    margin-bottom: 4px;

    color: #328f7b;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.game-workspace-header h2 {
    margin: 0;

    font-size: 25px;
}


/* =========================================================
   33. GAME PROGRESS
========================================================= */

.game-progress-area {
    width: 100%;

    margin-top: 19px;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;

    gap: 13px;
}

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

    border-radius: 999px;

    background:
        rgba(91, 177, 156, 0.14);

    overflow: hidden;
}

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

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #3ca68f,
            #72cbb7
        );

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

    transition:
        width 0.35s ease;
}

#gameProgressText {
    min-width: 56px;

    color: #328f7b;

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

    text-align: right;
}


/* =========================================================
   34. GAME QUESTION
========================================================= */

.game-question-card {
    width: 100%;
    min-height: 175px;

    margin-top: 20px;

    padding: 24px 22px;

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

    border-radius: 23px;

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

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

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

    text-align: center;
}

.game-question-icon {
    min-height: 58px;

    margin-bottom: 12px;

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

    font-size: 48px;
    line-height: 1;
}

.game-question {
    max-width: 650px;

    margin: 0;

    color: #205f54;

    font-size: 19px;
    font-weight: 800;
    line-height: 1.55;
}


/* =========================================================
   35. GAME OPTIONS
========================================================= */

.game-options {
    width: 100%;

    margin-top: 17px;

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

    gap: 13px;
}

.game-option {
    width: 100%;
    min-height: 72px;

    padding: 15px 17px;

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

    border-radius: 18px;

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

    color: #315e56;

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

    font: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;

    text-align: center;

    cursor: pointer;

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

.game-option:hover:not(:disabled) {
    transform: translateY(-3px);

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

    background: #ffffff;

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

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

.game-option.correct,
.game-option.correct-answer {
    border-color:
        rgba(50, 143, 123, 0.38);

    background:
        linear-gradient(
            145deg,
            #eaf9f4,
            #ccefe5
        );

    color: #205f54;

    box-shadow:
        0 8px 20px
        rgba(49, 144, 123, 0.12);
}

.game-option.wrong,
.game-option.wrong-answer {
    border-color:
        rgba(173, 113, 98, 0.25);

    background:
        linear-gradient(
            145deg,
            #fffafa,
            #f5e9e5
        );

    color: #785f59;

    box-shadow:
        0 8px 20px
        rgba(140, 93, 82, 0.08);
}

#gameNextButton {
    margin-top: 20px;
}


/* =========================================================
   36. FINAL REVIEW GRID
========================================================= */

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

    margin-top: 25px;

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

    gap: 15px;
}

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

    padding: 20px 17px;

    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;

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

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

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

.final-review-card > span {
    min-height: 55px;

    margin-bottom: 10px;

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

    font-size: 43px;
}

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

    font-size: 18px;
}

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

    color: #66827c;

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

.final-review-card small {
    margin-top: 13px;

    padding: 8px 11px;

    border-radius: 11px;

    background: #ffffff;

    color: #328f7b;

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


/* =========================================================
   37. FINAL RULE CARD
========================================================= */

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

    margin-top: 22px;

    padding: 20px;

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

    border-radius: 22px;

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

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

.final-rule-card h3 {
    margin: 0 0 15px;

    text-align: center;
}

.final-rule-line {
    width: 100%;
    min-height: 60px;

    padding: 10px 13px;

    border-bottom:
        1px solid
        rgba(58, 151, 131, 0.10);

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

    gap: 15px;
}

.final-rule-line:last-child {
    border-bottom: none;
}

.final-rule-line > span {
    color: #55766f;

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

.final-rule-line strong {
    flex: 0 0 auto;

    padding: 7px 11px;

    border-radius: 10px;

    background: #ffffff;

    color: #287665;

    font-size: 12px;
}


/* =========================================================
   38. FINISH SCREEN
========================================================= */

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

.finish-celebration {
    width: 104px;
    height: 104px;

    margin:
        0 auto 17px;

    border-radius: 50%;

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

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

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

    font-size: 52px;

    animation:
        finishFloat 2.8s
        ease-in-out infinite;
}


/* =========================================================
   39. FINISH ACHIEVEMENT
========================================================= */

.finish-achievement {
    width: 100%;

    margin-top: 25px;

    padding: 21px 22px;

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

    border-radius: 23px;

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

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

    display: flex;
    align-items: center;

    gap: 17px;

    text-align: left;
}

.finish-badge {
    width: 76px;
    height: 76px;
    min-width: 76px;

    border-radius: 22px;

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

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

    font-size: 40px;
}

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

.finish-achievement span {
    display: block;

    margin-bottom: 4px;

    color: #55a995;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.finish-achievement strong {
    display: block;

    color: #205f54;

    font-size: 21px;
}

.finish-achievement p {
    margin: 6px 0 0;

    color: #66827c;

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


/* =========================================================
   40. FINISH SUMMARY
========================================================= */

.finish-summary {
    width: 100%;

    margin-top: 20px;

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

    gap: 12px;
}

.finish-summary-card {
    min-height: 145px;

    padding: 16px 10px;

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

    border-radius: 19px;

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

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

    text-align: center;
}

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

    font-size: 31px;
}

.finish-summary-card strong {
    color: #205f54;

    font-size: 13px;
}

.finish-summary-card small {
    margin-top: 5px;

    color: #78918b;

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


/* =========================================================
   41. FINAL RESULT
========================================================= */

.finish-result {
    width: 100%;

    margin-top: 20px;

    padding: 18px 20px;

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

    border-radius: 20px;

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

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

    gap: 15px;
}

.finish-result span {
    color: #66827c;

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

.finish-result strong {
    color: #205f54;

    font-size: 17px;
}


/* =========================================================
   42. FINISH ACTIONS
========================================================= */

.finish-actions {
    width: 100%;

    margin-top: 22px;

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

    gap: 13px;
}

.secondary-action-button {
    width: 100%;
    min-height: 52px;

    padding: 12px 17px;

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

    border-radius: 16px;

    background: #ffffff;

    color: #287665;

    font: inherit;
    font-weight: 800;

    cursor: pointer;

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

.secondary-action-button:hover {
    transform: translateY(-2px);

    background: #effaf7;

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

.finish-home-button {
    width: 100%;

    min-height: 52px;

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

    gap: 8px;

    text-decoration: none;
}


/* =========================================================
   43. ACHIEVEMENT TOAST
========================================================= */

.achievement-toast {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 1000;

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

    padding: 15px 17px;

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

    border-radius: 20px;

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

    box-shadow:
        0 18px 45px
        rgba(33, 104, 90, 0.16);

    display: flex;
    align-items: center;

    gap: 13px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(20px)
        scale(0.97);

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

    backdrop-filter: blur(10px);
}

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

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}

.achievement-toast-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;

    border-radius: 15px;

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

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

    font-size: 27px;
}

.achievement-toast-text {
    min-width: 0;
}

.achievement-toast-text span {
    display: block;

    margin-bottom: 3px;

    color: #55a995;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.achievement-toast-text strong {
    display: block;

    color: #205f54;

    font-size: 15px;
}


/* =========================================================
   44. SPARKLE / CONFETTI LAYERS
========================================================= */

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

    inset: 0;

    z-index: 999;

    overflow: hidden;

    pointer-events: none;
}

.sparkle {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #75cbb7;

    box-shadow:
        0 0 12px
        rgba(85, 184, 161, 0.40);

    animation:
        sparklePop 0.85s ease-out forwards;
}

.confetti-piece {
    position: absolute;

    top: -20px;

    width: 10px;
    height: 16px;

    border-radius: 3px;

    background: #75cbb7;

    animation:
        confettiFall 2.8s
        linear forwards;
}

.confetti-piece:nth-child(3n + 1) {
    background: #3ca68f;
}

.confetti-piece:nth-child(3n + 2) {
    background: #9edccc;
}

.confetti-piece:nth-child(3n + 3) {
    background: #c9eee4;
}


/* =========================================================
   45. GENERAL INTERACTIVE STATES
========================================================= */

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

    outline-offset: 3px;
}

.lesson-body button {
    -webkit-tap-highlight-color: transparent;
}

.lesson-body button:disabled {
    user-select: none;
}


/* =========================================================
   46. ANIMATIONS
========================================================= */

@keyframes finishFloat {

    0%,
    100% {
        transform: translateY(0);
    }

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


@keyframes sparklePop {

    0% {
        opacity: 0;

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

    35% {
        opacity: 1;

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

    100% {
        opacity: 0;

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


@keyframes confettiFall {

    0% {
        opacity: 1;

        transform:
            translateY(-10px)
            rotate(0deg);
    }

    100% {
        opacity: 0;

        transform:
            translateY(110vh)
            rotate(620deg);
    }
}


/* =========================================================
   47. TABLET
========================================================= */

@media (max-width: 900px) {

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


    .rules-place-card,
    .external-game-card {
        min-height: 0;
    }


    .formula-explanation {
        grid-template-columns: 1fr;
    }


    .formula-info-card {
        min-height: 170px;
    }


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


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

}


/* =========================================================
   48. MOBILE
========================================================= */

@media (max-width: 700px) {

    .grammar-hero-card {
        padding: 19px 16px;

        flex-direction: column;

        text-align: center;
    }


    .grammar-hero-icon {
        width: 68px;
        height: 68px;
        min-width: 68px;

        font-size: 34px;
    }


    .example-sentence-box {
        grid-template-columns: 48px 1fr;

        padding: 15px;

        gap: 12px;
    }


    .lesson-body .speak-button {
        width: 44px;
        height: 44px;
    }


    .grammar-formula-card,
    .sentence-build-example {
        padding: 17px 13px;
    }


    .formula-part {
        padding: 9px 10px;

        font-size: 12px;
    }


    .correct-wrong-grid,
    .checkpoint-review-grid,
    .final-review-grid {
        grid-template-columns: 1fr;
    }


    .grammar-answer-card,
    .checkpoint-review-card,
    .final-review-card {
        min-height: 175px;
    }


    .activity-options,
    .game-options {
        grid-template-columns: 1fr;
    }


    .review-question-card,
    .grammar-mix-card,
    .game-question-card {
        min-height: 150px;

        padding: 20px 16px;
    }


    .review-question-card p,
    .grammar-mix-card p,
    .game-question {
        font-size: 17px;
    }


    .practice-level {
        grid-template-columns:
            38px 44px 1fr;

        padding: 13px;
    }


    .level-number {
        width: 34px;
        height: 34px;
    }


    .level-icon {
        font-size: 29px;
    }


    .level-status {
        grid-column:
            2 / 4;

        justify-self: start;

        min-width: 0;

        margin-top: 2px;
    }


    .game-workspace-header {
        padding: 16px;

        gap: 13px;
    }


    .game-workspace-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;

        font-size: 31px;
    }


    .game-workspace-header h2 {
        font-size: 21px;
    }


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


    .video-play-icon {
        width: 65px;
        height: 65px;

        font-size: 23px;
    }


    .finish-achievement {
        padding: 18px 16px;
    }


    .finish-badge {
        width: 64px;
        height: 64px;
        min-width: 64px;

        font-size: 34px;
    }


    .finish-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .finish-summary-card {
        min-height: 130px;
    }


    .finish-actions {
        grid-template-columns: 1fr;
    }


    .finish-result {
        flex-direction: column;

        justify-content: center;

        gap: 5px;

        text-align: center;
    }


    .decision-row {
        grid-template-columns:
            32px 1fr;

        gap: 10px;
    }


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

        justify-self: start;
    }


    .final-rule-line {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;
    }


    .achievement-toast {
        right: 16px;
        bottom: 16px;
    }

}


/* =========================================================
   49. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .grammar-word {
        font-size: 9px;
    }


    .grammar-hero-content strong {
        font-size: 19px;
    }


    .example-sentence-box {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .example-sentence-box .speak-button {
        margin: 0 auto;
    }


    .important-note,
    .golden-tip,
    .important-grammar-card {
        align-items: flex-start;

        padding: 15px;
    }


    .formula-explanation {
        gap: 11px;
    }


    .rules-place-grid,
    .external-games-grid {
        gap: 11px;
    }


    .rule-example-row {
        grid-template-columns:
            31px 1fr;

        padding: 11px;
    }


    .activity-option,
    .game-option {
        min-height: 64px;

        padding: 13px;

        font-size: 14px;
    }


    .practice-level {
        grid-template-columns:
            34px 1fr;

        gap: 10px;
    }


    .practice-level .level-icon {
        display: none;
    }


    .level-status {
        grid-column: 2;
    }


    .game-progress-area {
        grid-template-columns: 1fr;
    }


    #gameProgressText {
        text-align: center;
    }


    .finish-achievement {
        flex-direction: column;

        text-align: center;
    }


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


    .finish-summary-card {
        min-height: 115px;
    }


    .badge-row {
        gap: 7px;
    }


    .badge-row i {
        width: 35px;
        height: 35px;
    }

}


/* =========================================================
   50. REDUCED MOTION
========================================================= */

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

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

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}