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


/* =========================================================
   GRADE 3 — LESSON 17
   COMPARATIVES VS SUPERLATIVES
========================================================= */


/* =========================================================
   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;

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

    --white: #ffffff;

    min-height: 100vh;

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

.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 {
    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #63c5ad
        );

    box-shadow:
        0 13px 26px
        rgba(43, 139, 118, 0.22);

    color: white;

    border: none;

    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;

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

.lesson-body .main-action-button span {
    display: inline-block;

    transition:
        transform 0.2s ease;
}

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

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


/* =========================================================
   9. COMPARISON CHOICE
========================================================= */

.comparison-choice-grid {
    width: 100%;

    margin-top: 26px;

    display: grid;

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

    gap: 18px;
}

.comparison-type-card {
    min-height: 360px;

    padding:
        25px 20px;

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

    border-radius: 25px;

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

.comparison-type-card:hover {
    transform:
        translateY(-4px);

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

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

.featured-type-card {
    background:
        linear-gradient(
            145deg,
            #f9fdfc,
            #d6f1e9
        );
}

.comparison-type-icon {
    min-height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 45px;

    line-height: 1.1;
}

.comparison-type-label {
    margin-top: 8px;

    padding:
        7px 12px;

    border-radius: 999px;

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

    color: #328f7b;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.12em;
}

.comparison-type-card h3 {
    margin:
        14px 0 8px;

    font-size: 24px;
}

.comparison-formula {
    margin-bottom: 15px;

    padding:
        10px 15px;

    border-radius: 14px;

    background: white;

    color: #287665;

    font-weight: 800;

    box-shadow:
        0 7px 16px
        rgba(40, 112, 97, 0.06);
}

.comparison-type-card > p {
    margin:
        0 0 18px;

    color: #66827c;

    line-height: 1.65;
}

.comparison-type-card > p strong {
    color: #287665;
}

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

    margin-top: auto;

    padding:
        15px 16px;

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

    border-radius: 17px;

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

    color: #486e66;

    line-height: 1.55;

    cursor: pointer;

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

.example-sentence-card:hover {
    transform:
        translateY(-2px);

    background: white;

    box-shadow:
        0 8px 18px
        rgba(40, 112, 97, 0.07);
}

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


/* =========================================================
   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. BIG RULE CARDS
========================================================= */

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

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

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

    flex-direction: column;

    gap: 6px;
}

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

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.12em;
}

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

    font-size: 22px;
}

.superlative-rule-card {
    background:
        linear-gradient(
            145deg,
            #f9fdfc,
            #d8f2eb
        );
}


/* =========================================================
   12. EXAMPLE STACK
========================================================= */

.example-stack {
    width: 100%;

    margin-top: 20px;

    display: grid;

    gap: 13px;
}

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

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

    background: white;

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

.example-row > span {
    min-width: 100px;

    font-size: 31px;

    text-align: center;
}

.example-row p {
    margin: 0;

    color: #55766f;

    font-size: 16px;

    line-height: 1.5;
}

.example-row strong {
    color: #287665;
}


/* =========================================================
   13. 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;
}


/* =========================================================
   14. FORM PAIRS
========================================================= */

.form-pairs-grid {
    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 16px;
}

.form-pair-card {
    overflow: hidden;

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

    border-radius: 23px;

    background: white;

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

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

.form-pair-card:hover {
    transform:
        translateY(-4px);

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

.pair-word {
    padding:
        13px 15px;

    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #68c8b2
        );

    color: white;

    text-align: center;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 0.14em;
}

.pair-comparative,
.pair-superlative {
    min-height: 85px;

    padding:
        15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;

    text-align: center;

    cursor: pointer;
}

.pair-comparative {
    background: #f9fdfc;

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

.pair-superlative {
    background: #e9f7f3;
}

.pair-comparative strong,
.pair-superlative strong {
    color: #287665;

    font-size: 16px;
}


/* =========================================================
   15. GOOD → BETTER → THE BEST
========================================================= */

.good-form-road {
    width: 100%;

    margin-top: 28px;

    display: grid;

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

    align-items: center;

    gap: 12px;
}

.good-form-card {
    min-height: 185px;

    padding:
        21px 15px;

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

    border-radius: 23px;

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

    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.2s ease,
        box-shadow 0.2s ease;
}

.good-form-card:hover {
    transform:
        translateY(-4px);

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

.good-form-card > span {
    font-size: 40px;

    margin-bottom: 12px;
}

.good-form-card small {
    color: #55a995;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.12em;
}

.good-form-card strong {
    margin-top: 8px;

    color: #205f54;

    font-size: 20px;
}

.comparative-good {
    background:
        linear-gradient(
            145deg,
            #f9fdfc,
            #daf3ec
        );
}

.superlative-good {
    background:
        linear-gradient(
            145deg,
            #f7fcfa,
            #cfeee5
        );
}

.road-arrow {
    color: #55b8a1;

    font-size: 26px;

    font-weight: 900;
}


/* =========================================================
   16. CORRECT / WRONG EXAMPLES
========================================================= */

.correct-wrong-grid {
    width: 100%;

    margin-top: 20px;

    display: grid;

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

    gap: 14px;
}

.grammar-example {
    padding:
        17px 18px;

    border-radius: 19px;

    display: flex;

    align-items: center;

    gap: 13px;
}

.correct-example {
    border:
        1px solid
        rgba(63, 162, 139, 0.16);

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

.wrong-example {
    border:
        1px solid
        rgba(214, 111, 111, 0.15);

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

.grammar-example > span {
    width: 32px;

    height: 32px;

    flex:
        0 0 32px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 900;
}

.correct-example > span {
    background: #c9eee4;

    color: #287665;
}

.wrong-example > span {
    background: #f6dede;

    color: #a34f4f;
}

.grammar-example p {
    margin: 0;

    color: #55766f;

    line-height: 1.5;
}

.grammar-example strong {
    color: #287665;
}


/* =========================================================
   17. 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;
}


/* =========================================================
   18. CHOICE SITUATION
========================================================= */

.choice-situation-card,
.comparison-question-card,
.detective-card {
    width: 100%;

    min-height: 180px;

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

.choiceSituationIcons,
.comparisonQuestionIcons {
    margin-bottom: 14px;

    font-size: 48px;

    line-height: 1.2;
}

.choice-situation-card p,
.comparison-question-card p,
.detective-card p {
    margin: 0;

    color: #315e56;

    font-size: 19px;

    font-weight: 700;

    line-height: 1.5;
}

.detective-icon {
    margin-bottom: 12px;

    font-size: 42px;
}


/* =========================================================
   19. 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: white;

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

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

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

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

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

    text-align: left;
}


/* =========================================================
   20. CORRECT / WRONG OPTION STATES
========================================================= */

.activity-options .correct-option,
.activity-options button.correct,
.activity-option.correct,
.option-button.correct,
.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 .wrong-option,
.activity-options button.wrong,
.activity-option.wrong,
.option-button.wrong,
.wrong-answer {
    border-color:
        rgba(209, 104, 104, 0.28) !important;

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

    color: #934b4b !important;
}

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

    background:
        #e2f6f0;

    color: #205f54;
}


/* =========================================================
   21. FEEDBACK
========================================================= */

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

    margin-top: 15px;

    color: #55766f;

    font-size: 14px;

    font-weight: 700;

    text-align: center;
}

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

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


/* =========================================================
   22. CHECKPOINT
========================================================= */

.checkpoint-grid {
    width: 100%;

    margin-top: 26px;

    display: grid;

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

    gap: 15px;
}

.checkpoint-card {
    min-height: 260px;

    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;

    text-align: center;

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

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

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

.checkpoint-icon {
    font-size: 40px;

    margin-bottom: 11px;
}

.checkpoint-card > span {
    color: #55a995;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.12em;
}

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

    font-size: 20px;
}

.checkpoint-card > strong {
    color: #287665;

    font-size: 16px;
}

.checkpoint-card p {
    margin:
        12px 0 0;

    color: #66827c;

    line-height: 1.5;
}

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


/* =========================================================
   23. DECISION GUIDE
========================================================= */

.decision-guide {
    width: 100%;

    margin-top: 23px;

    padding:
        21px;

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

    border-radius: 23px;

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

.decision-guide-title {
    margin-bottom: 15px;

    color: #205f54;

    font-size: 17px;

    font-weight: 800;
}

.decision-step {
    padding:
        12px 13px;

    border-radius: 15px;

    display: grid;

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

    align-items: center;

    gap: 12px;
}

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

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

.decision-step > span {
    width: 34px;

    height: 34px;

    border-radius: 50%;

    background:
        #c9eee4;

    color: #287665;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 900;
}

.decision-step p {
    margin: 0;

    color: #55766f;
}

.decision-step b {
    color: #287665;
}


/* =========================================================
   24. 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;
}


/* =========================================================
   25. 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;
}


/* =========================================================
   26. 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: white;

    transform:
        translateY(-2px);

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


/* =========================================================
   27. 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;
}


/* =========================================================
   28. 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);
}


/* =========================================================
   29. 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: white;

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


/* =========================================================
   30. 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;
}


/* =========================================================
   31. FINISH SCREEN
========================================================= */

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


/* =========================================================
   32. 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;
}


/* =========================================================
   33. 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;
}


/* =========================================================
   34. 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);
}


/* =========================================================
   35. 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;
}


/* =========================================================
   36. 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;
}


/* =========================================================
   37. 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;
}


/* =========================================================
   38. ANIMATIONS
========================================================= */

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


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


/* =========================================================
   39. TABLET
========================================================= */

@media (max-width: 900px) {

    .comparison-choice-grid,
    .form-pairs-grid,
    .external-games-grid {
        grid-template-columns: 1fr;
    }


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


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


    .good-form-road {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .road-arrow {
        transform:
            rotate(90deg);

        text-align: center;
    }


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


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

}


/* =========================================================
   40. MOBILE
========================================================= */

@media (max-width: 680px) {

    .comparison-choice-grid,
    .form-pairs-grid,
    .correct-wrong-grid,
    .activity-options,
    .mode-options,
    .checkpoint-grid,
    .external-games-grid,
    .final-result-grid,
    .game-options,
    .workspace-options {
        grid-template-columns: 1fr;
    }


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


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


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


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


    .example-row {
        flex-direction: column;

        text-align: center;
    }


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


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


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

        width: fit-content;
    }


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


    .decision-step > b {
        grid-column:
            2;
    }


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


    .achievement-toast {
        right: 16px;

        bottom: 16px;
    }

}


/* =========================================================
   41. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

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


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


    .choiceSituationIcons,
    .comparisonQuestionIcons {
        font-size: 39px;
    }


    .comparison-type-icon {
        font-size: 38px;
    }


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

}


/* =========================================================
   42. 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;
    }

}