@import url("grade-3-lesson-14.css");

/* ==================================================
   GRADE 3 — LESSON 15
   COMPARATIVES
   EMERALD / TURQUOISE THEME
================================================== */


/* ==================================================
   LESSON COLORS
================================================== */

.comparatives-body {
    --lesson-primary: #3ca68f;
    --lesson-primary-dark: #247b6a;
    --lesson-primary-deep: #205f54;
    --lesson-secondary: #63c5ad;
    --lesson-secondary-soft: #8bd6c4;

    --lesson-mint: #d9f3eb;
    --lesson-mint-light: #e8f7f2;
    --lesson-mint-pale: #f1faf7;
    --lesson-mint-soft: #edf9f5;

    --lesson-white: #ffffff;
    --lesson-text: #2f3e3c;
    --lesson-muted: #6c837e;

    --lesson-border: rgba(60, 166, 143, 0.16);
    --lesson-shadow: rgba(35, 102, 91, 0.10);

    background:
        radial-gradient(
            circle at 10% 12%,
            rgba(99, 197, 173, 0.18),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 18%,
            rgba(60, 166, 143, 0.13),
            transparent 26%
        ),
        radial-gradient(
            circle at 80% 86%,
            rgba(139, 214, 196, 0.15),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f4fcf9 0%,
            #eaf8f4 48%,
            #f9fdfc 100%
        ) !important;

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


/* ==================================================
   BACKGROUND SHAPES
================================================== */

.comparatives-body .shape-one {
    background:
        rgba(99, 197, 173, 0.15) !important;
}

.comparatives-body .shape-two {
    background:
        rgba(60, 166, 143, 0.11) !important;
}

.comparatives-body .shape-three {
    background:
        rgba(139, 214, 196, 0.13) !important;
}

.comparatives-body .floating-symbol {
    filter:
        drop-shadow(
            0 8px 14px
            rgba(35, 102, 91, 0.10)
        );
}


/* ==================================================
   NAVIGATION
   KEEP INHERITED GEOMETRY
================================================== */

.comparatives-body .lesson-navigation {
    background:
        rgba(255, 255, 255, 0.88) !important;

    border:
        1px solid
        rgba(60, 166, 143, 0.13) !important;

    box-shadow:
        0 15px 38px
        rgba(35, 102, 91, 0.09) !important;
}

.comparatives-body .lesson-logo {
    background:
        linear-gradient(
            135deg,
            #63c5ad,
            #3ca68f
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 8px 20px
        rgba(60, 166, 143, 0.24) !important;
}

.comparatives-body .chapter-number {
    color:
        #32947f !important;
}

.comparatives-body .chapter-name {
    color:
        #205f54 !important;
}

.comparatives-body .close-lesson-button {
    color:
        #247b6a !important;

    background:
        #e8f7f2 !important;
}

.comparatives-body
.close-lesson-button:hover {
    background:
        #d9f3eb !important;

    color:
        #205f54 !important;
}


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

.comparatives-body
.lesson-progress-track {
    background:
        rgba(60, 166, 143, 0.11) !important;
}

.comparatives-body
.lesson-progress-fill {
    background:
        linear-gradient(
            90deg,
            #8bd6c4 0%,
            #63c5ad 40%,
            #3ca68f 72%,
            #247b6a 100%
        ) !important;

    box-shadow:
        0 5px 15px
        rgba(60, 166, 143, 0.22);
}

.comparatives-body
.lesson-progress-number {
    color:
        #5d7771 !important;
}

.comparatives-body
.lesson-progress-number strong {
    color:
        #247b6a !important;
}


/* ==================================================
   PANELS
================================================== */

.comparatives-body .lesson-panel {
    background:
        rgba(255, 255, 255, 0.94) !important;

    border:
        1px solid
        rgba(60, 166, 143, 0.12) !important;

    box-shadow:
        0 22px 55px
        rgba(35, 102, 91, 0.09) !important;
}


/* ==================================================
   GENERAL HEADINGS
================================================== */

.comparatives-body .screen-label {
    color:
        #32947f !important;
}

.comparatives-body h1,
.comparatives-body h2,
.comparatives-body h3 {
    color:
        #205f54 !important;
}

.comparatives-body
.page-heading .heading-icon {
    background:
        linear-gradient(
            145deg,
            #d9f3eb,
            #edf9f5
        ) !important;

    color:
        #247b6a !important;

    box-shadow:
        0 9px 22px
        rgba(35, 102, 91, 0.08) !important;
}


/* ==================================================
   MAIN BUTTON
================================================== */

.comparatives-body
.main-action-button {
    background:
        linear-gradient(
            135deg,
            #63c5ad 0%,
            #3ca68f 58%,
            #32947f 100%
        ) !important;

    color:
        #ffffff !important;

    border:
        none !important;

    box-shadow:
        0 12px 28px
        rgba(60, 166, 143, 0.25) !important;
}

.comparatives-body
.main-action-button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 17px 34px
        rgba(60, 166, 143, 0.30) !important;
}

.comparatives-body
.main-action-button span {
    color:
        #ffffff !important;
}


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

.comparatives-body .intro-sun {
    background:
        linear-gradient(
            145deg,
            #d9f3eb,
            #f4fcf9
        ) !important;

    box-shadow:
        0 15px 35px
        rgba(60, 166, 143, 0.14) !important;
}

.comparatives-body
.intro-page h1 {
    color:
        #205f54 !important;
}

.comparatives-body
.mission-card {
    background:
        linear-gradient(
            135deg,
            #e3f7f1,
            #f8fdfb
        ) !important;

    border:
        1px solid
        rgba(60, 166, 143, 0.14) !important;
}

.comparatives-body
.mission-icon {
    background:
        #ffffff !important;

    box-shadow:
        0 8px 20px
        rgba(35, 102, 91, 0.08) !important;
}

.comparatives-body
.mission-card strong {
    color:
        #247b6a !important;
}

.comparatives-body
.mission-card p {
    color:
        #607873 !important;
}


/* ==================================================
   SHARED TEXT
================================================== */

.comparatives-body
.activity-instruction {
    max-width: 760px;
    margin:
        0 auto 28px;

    text-align:
        center;

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

    font-size:
        16px;

    line-height:
        1.7;

    color:
        #526864;
}

.comparatives-body
.ukrainian-instruction {
    display:
        block;

    margin-top:
        5px;

    color:
        #78918c;

    font-size:
        14px;

    font-weight:
        600;
}


/* ==================================================
   SCREEN 1
   DEFINITION
================================================== */

.comparative-definition-card {
    width:
        min(820px, 100%);

    margin:
        0 auto 28px;

    padding:
        24px 26px;

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    border-radius:
        25px;

    background:
        linear-gradient(
            135deg,
            #e3f7f1 0%,
            #f5fcfa 48%,
            #ffffff 100%
        );

    border:
        1px solid
        var(--lesson-border);

    box-shadow:
        0 16px 35px
        rgba(35, 102, 91, 0.08);
}

.comparative-definition-icon {
    flex:
        0 0 auto;

    min-width:
        130px;

    min-height:
        88px;

    padding:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        21px;

    background:
        #ffffff;

    box-shadow:
        0 10px 25px
        rgba(35, 102, 91, 0.09);

    font-size:
        34px;
}

.comparative-definition-card small {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #32947f;

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

    font-size:
        11px;

    font-weight:
        800;
}

.comparative-definition-card strong {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #205f54;

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

    font-size:
        22px;

    font-weight:
        700;
}

.comparative-definition-card p {
    margin:
        0;

    color:
        #5b706c;

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

    font-size:
        15px;

    line-height:
        1.65;
}


/* ==================================================
   COMPARISON SCENE
================================================== */

.comparison-scene {
    width:
        min(720px, 100%);

    margin:
        0 auto 24px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        18px;
}

.comparison-scene article {
    min-height:
        180px;

    padding:
        24px 18px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        26px;

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

    border:
        1px solid
        rgba(60, 166, 143, 0.15);

    box-shadow:
        0 15px 34px
        rgba(35, 102, 91, 0.08);

    text-align:
        center;
}

.comparison-scene article > span {
    margin-bottom:
        10px;

    font-size:
        58px;
}

.comparison-scene article small {
    margin-bottom:
        4px;

    color:
        #78918c;

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

    font-size:
        10px;

    font-weight:
        800;
}

.comparison-scene article strong {
    color:
        #247b6a;

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

    font-size:
        24px;
}

.comparison-arrow {
    width:
        60px;

    height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

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

    color:
        #ffffff;

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

    font-size:
        16px;

    font-weight:
        700;

    box-shadow:
        0 11px 25px
        rgba(60, 166, 143, 0.24);
}


/* ==================================================
   COMPARISON RESULT
================================================== */

.comparison-result {
    width:
        min(820px, 100%);

    margin:
        0 auto 30px;

    padding:
        20px 24px;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #d9f3eb,
            #f7fcfa
        );

    border:
        1px solid
        rgba(60, 166, 143, 0.17);
}

.comparison-result > span {
    flex:
        0 0 auto;

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        17px;

    background:
        #ffffff;

    font-size:
        27px;
}

.comparison-result small {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #32947f;

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

    font-size:
        10px;

    font-weight:
        800;
}

.comparison-result strong {
    display:
        block;

    color:
        #247b6a;

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

    font-size:
        21px;
}

.comparison-result p {
    margin:
        5px 0 0;

    color:
        #657c77;

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

    font-size:
        14px;
}


/* ==================================================
   SCREEN 2
   FORMULA
================================================== */

.comparative-formula {
    width:
        min(780px, 100%);

    margin:
        0 auto 26px;

    padding:
        24px;

    display:
        flex;

    align-items:
        stretch;

    justify-content:
        center;

    gap:
        12px;

    border-radius:
        27px;

    background:
        linear-gradient(
            135deg,
            #e8f7f2,
            #ffffff
        );

    border:
        1px solid
        rgba(60, 166, 143, 0.15);
}

.comparative-formula > div {
    min-width:
        145px;

    padding:
        19px 20px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        19px;

    background:
        #ffffff;

    box-shadow:
        0 8px 22px
        rgba(35, 102, 91, 0.07);

    text-align:
        center;
}

.comparative-formula > span {
    display:
        flex;

    align-items:
        center;

    color:
        #63a997;

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

    font-size:
        25px;

    font-weight:
        700;
}

.comparative-formula small {
    margin-bottom:
        5px;

    color:
        #78918c;

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

    font-size:
        9px;

    font-weight:
        800;
}

.comparative-formula strong {
    color:
        #2f3e3c;

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

    font-size:
        24px;
}

.comparative-formula
.formula-highlight {
    background:
        linear-gradient(
            145deg,
            #d6f2e8,
            #f4fcf9
        );
}

.comparative-formula
.formula-highlight strong {
    color:
        #247b6a;
}


/* ==================================================
   FORMULA RESULT
================================================== */

.formula-result-card {
    width:
        min(720px, 100%);

    margin:
        0 auto 22px;

    padding:
        20px 24px;

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    border-radius:
        23px;

    background:
        #ffffff;

    border:
        1px solid
        rgba(60, 166, 143, 0.15);

    box-shadow:
        0 14px 32px
        rgba(35, 102, 91, 0.07);
}

.formula-result-card > span {
    font-size:
        52px;
}

.formula-result-card small {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #32947f;

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

    font-size:
        10px;

    font-weight:
        800;
}

.formula-result-card strong {
    display:
        block;

    color:
        #247b6a;

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

    font-size:
        21px;
}

.formula-result-card p {
    margin:
        5px 0 0;

    color:
        #738a85;

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

    font-size:
        14px;
}


/* ==================================================
   UKRAINIAN RULE CARD
================================================== */

.ukrainian-rule-card {
    width:
        min(820px, 100%);

    margin:
        0 auto 18px;

    padding:
        21px 24px;

    display:
        flex;

    gap:
        18px;

    border-radius:
        22px;

    background:
        #edf9f5;

    border:
        1px solid
        rgba(60, 166, 143, 0.14);
}

.ukrainian-rule-card > span {
    flex:
        0 0 auto;

    font-size:
        28px;
}

.ukrainian-rule-card strong {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #205f54;

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

    font-size:
        19px;
}

.ukrainian-rule-card p {
    margin:
        0;

    color:
        #617772;

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

    font-size:
        14px;

    line-height:
        1.65;
}

.mini-rule-examples {
    margin-top:
        14px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;
}

.mini-rule-examples span {
    padding:
        8px 13px;

    border-radius:
        999px;

    background:
        #d9f3eb;

    color:
        #247b6a;

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

    font-size:
        13px;

    font-weight:
        700;
}


/* ==================================================
   IMPORTANT THAN CARD
================================================== */

.important-than-card,
.than-warning {
    width:
        min(820px, 100%);

    margin:
        0 auto 28px;

    padding:
        18px 21px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #dff4ee,
            #f7fcfa
        );

    border:
        1px solid
        rgba(60, 166, 143, 0.17);
}

.important-than-card > span,
.than-warning > span {
    font-size:
        26px;
}

.important-than-card p,
.than-warning p {
    margin:
        0;

    color:
        #4f6963;

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

    font-size:
        14px;

    line-height:
        1.6;
}

.important-than-card strong,
.than-warning strong {
    color:
        #247b6a;
}


/* ==================================================
   SCREEN 3
   WORD CARDS
================================================== */

.comparative-word-grid {
    width:
        min(900px, 100%);

    margin:
        0 auto 25px;

    display:
        grid;

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

    gap:
        14px;
}

.comparative-word-card {
    min-height:
        170px;

    padding:
        20px 14px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        23px;

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

    border:
        1px solid
        rgba(60, 166, 143, 0.15);

    box-shadow:
        0 11px 26px
        rgba(35, 102, 91, 0.07);

    text-align:
        center;

    cursor:
        pointer;

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

.comparative-word-card:hover,
.comparative-word-card:focus-visible {
    transform:
        translateY(-5px);

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

    box-shadow:
        0 17px 32px
        rgba(35, 102, 91, 0.12);

    outline:
        none;
}

.comparative-word-card > span {
    margin-bottom:
        9px;

    font-size:
        42px;
}

.comparative-word-card small {
    margin-bottom:
        3px;

    color:
        #78918c;

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

    font-size:
        13px;

    font-weight:
        700;
}

.comparative-word-card strong {
    color:
        #247b6a;

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

    font-size:
        23px;

    font-weight:
        700;
}


/* ==================================================
   MEMORY TIP
================================================== */

.comparative-memory-tip {
    width:
        min(780px, 100%);

    margin:
        0 auto 28px;

    padding:
        18px 21px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    border-radius:
        20px;

    background:
        #dff4ee;

    border:
        1px solid
        rgba(60, 166, 143, 0.13);
}

.comparative-memory-tip > span {
    font-size:
        27px;
}

.comparative-memory-tip p {
    margin:
        0;

    color:
        #4d6963;

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

    font-size:
        14px;

    line-height:
        1.6;
}

.comparative-memory-tip strong {
    color:
        #247b6a;
}


/* ==================================================
   SCREEN 4
   SPECIAL FORMS
================================================== */

.special-comparative-board {
    width:
        min(900px, 100%);

    margin:
        0 auto 24px;

    display:
        grid;

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

    gap:
        16px;
}

.special-comparative-board article {
    padding:
        23px;

    border-radius:
        24px;

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

    border:
        1px solid
        rgba(60, 166, 143, 0.14);

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

.special-word-icon {
    width:
        52px;

    height:
        52px;

    margin-bottom:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        17px;

    background:
        #d9f3eb;

    font-size:
        27px;
}

.special-comparative-board
article > small {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #78918c;

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

    font-size:
        10px;

    font-weight:
        800;
}

.word-change {
    margin-bottom:
        10px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #667d78;

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

    font-size:
        19px;

    font-weight:
        600;
}

.word-change span {
    color:
        #63a997;
}

.word-change strong {
    color:
        #247b6a;

    font-size:
        25px;
}

.special-comparative-board p {
    margin:
        0;

    color:
        #657c77;

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

    font-size:
        14px;

    line-height:
        1.55;
}

.special-comparative-board
.irregular-comparative {
    background:
        linear-gradient(
            145deg,
            #dff4ee,
            #ffffff
        );

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


/* ==================================================
   SIMPLE EXPLANATION
================================================== */

.simple-explanation-card {
    width:
        min(840px, 100%);

    margin:
        0 auto 28px;

    padding:
        20px 23px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;

    border-radius:
        21px;

    background:
        #e8f7f2;

    border:
        1px solid
        rgba(60, 166, 143, 0.14);
}

.simple-explanation-card > span {
    font-size:
        27px;
}

.simple-explanation-card strong {
    display:
        block;

    margin-bottom:
        6px;

    color:
        #205f54;

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

    font-size:
        18px;
}

.simple-explanation-card p {
    margin:
        0;

    color:
        #617772;

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

    font-size:
        14px;

    line-height:
        1.65;
}


/* ==================================================
   SCREEN 5
   SENTENCE FORMULA
================================================== */

.sentence-formula-board {
    width:
        min(950px, 100%);

    margin:
        0 auto 26px;

    padding:
        20px;

    display:
        flex;

    align-items:
        stretch;

    justify-content:
        center;

    gap:
        8px;

    border-radius:
        26px;

    background:
        #e8f7f2;

    border:
        1px solid
        rgba(60, 166, 143, 0.14);
}

.sentence-formula-board > span {
    display:
        flex;

    align-items:
        center;

    color:
        #63a997;

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

    font-size:
        19px;

    font-weight:
        700;
}

.sentence-formula-part {
    min-width:
        120px;

    padding:
        16px 12px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        17px;

    background:
        #ffffff;

    text-align:
        center;

    box-shadow:
        0 7px 18px
        rgba(35, 102, 91, 0.06);
}

.sentence-formula-part small {
    margin-bottom:
        5px;

    color:
        #78918c;

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

    font-size:
        8px;

    font-weight:
        800;
}

.sentence-formula-part strong {
    color:
        #364a46;

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

    font-size:
        17px;
}

.sentence-formula-part
.formula-main-part {
    background:
        #d6f2e8;
}

.sentence-formula-part
.formula-main-part strong {
    color:
        #247b6a;
}


/* ==================================================
   FULL COMPARISON RESULT
================================================== */

.full-comparison-result {
    width:
        min(760px, 100%);

    margin:
        0 auto 24px;

    padding:
        20px;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        18px;

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #dff4ee,
            #ffffff
        );

    border:
        1px solid
        rgba(60, 166, 143, 0.17);

    box-shadow:
        0 13px 30px
        rgba(35, 102, 91, 0.07);

    text-align:
        center;
}

.full-comparison-result > span {
    font-size:
        43px;
}

.full-comparison-result strong {
    color:
        #247b6a;

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

    font-size:
        20px;
}


/* ==================================================
   EXAMPLE GRID
================================================== */

.comparison-example-grid {
    width:
        min(880px, 100%);

    margin:
        0 auto 22px;

    display:
        grid;

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

    gap:
        13px;
}

.comparison-example-grid article {
    padding:
        18px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    border-radius:
        19px;

    background:
        #edf9f5;

    border:
        1px solid
        rgba(60, 166, 143, 0.12);
}

.comparison-example-grid
article > span {
    flex:
        0 0 auto;

    font-size:
        26px;
}

.comparison-example-grid strong {
    color:
        #41625b;

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

    font-size:
        13px;

    line-height:
        1.5;
}


/* ==================================================
   INTERACTIVE ACTIVITY CONTAINERS
================================================== */

.comparative-lab,
.comparison-arena,
.repair-machine {
    width:
        min(780px, 100%);

    margin:
        0 auto 20px;

    padding:
        25px;

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            #dff4ee,
            #f7fcfa 55%,
            #ffffff
        );

    border:
        1px solid
        rgba(60, 166, 143, 0.17);

    box-shadow:
        0 16px 36px
        rgba(35, 102, 91, 0.09);
}

.machine-progress,
.arena-progress {
    margin-bottom:
        20px;

    text-align:
        center;

    color:
        #32947f;

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

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* ==================================================
   COMPARATIVE LAB
================================================== */

.comparative-lab-display {
    width:
        min(450px, 100%);

    margin:
        0 auto 22px;

    padding:
        23px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    border-radius:
        23px;

    background:
        #ffffff;

    border:
        1px solid
        rgba(60, 166, 143, 0.10);

    text-align:
        center;

    box-shadow:
        0 10px 26px
        rgba(35, 102, 91, 0.07);
}

.comparative-lab-icon {
    margin-bottom:
        9px;

    font-size:
        42px;
}

.comparative-lab-display small {
    margin-bottom:
        6px;

    color:
        #78918c;

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

    font-size:
        9px;

    font-weight:
        800;
}

.comparative-lab-display strong {
    color:
        #205f54;

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

    font-size:
        29px;
}

.lab-arrow {
    margin:
        5px 0;

    color:
        #63c5ad;

    font-size:
        23px;
}

.lab-question {
    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:
        #d9f3eb;

    color:
        #247b6a;

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

    font-size:
        26px;

    font-weight:
        700;
}


/* ==================================================
   INTERACTIVE OPTIONS
================================================== */

.comparative-lab-options,
.arena-options,
.repair-options,
.map-question-options {
    display:
        grid;

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

    gap:
        11px;
}

.comparative-lab-options button,
.arena-options button,
.repair-options button,
.map-question-options button {
    min-height:
        54px;

    padding:
        12px 14px;

    border:
        1px solid
        rgba(60, 166, 143, 0.20);

    border-radius:
        16px;

    background:
        #ffffff;

    color:
        #3d5852;

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

    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 7px 18px
        rgba(35, 102, 91, 0.05);

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

.comparative-lab-options
button:hover:not(:disabled),
.arena-options
button:hover:not(:disabled),
.repair-options
button:hover:not(:disabled),
.map-question-options
button:hover:not(:disabled) {
    transform:
        translateY(-3px);

    background:
        #edf9f5;

    border-color:
        #63c5ad;

    color:
        #247b6a;

    box-shadow:
        0 11px 22px
        rgba(35, 102, 91, 0.10);
}


/* ==================================================
   CORRECT / WRONG
================================================== */

.comparatives-body
.activity-correct {
    background:
        #d9f3eb !important;

    border-color:
        #3ca68f !important;

    color:
        #205f54 !important;
}

.comparatives-body
.activity-wrong {
    background:
        #fff0ef !important;

    border-color:
        #e4aaa5 !important;

    color:
        #a85f5a !important;
}


/* ==================================================
   ARENA
================================================== */

.arena-stage {
    width:
        min(600px, 100%);

    margin:
        0 auto 22px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        14px;
}

.arena-stage article {
    min-height:
        145px;

    padding:
        18px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        22px;

    background:
        #ffffff;

    border:
        1px solid
        rgba(60, 166, 143, 0.12);

    box-shadow:
        0 9px 24px
        rgba(35, 102, 91, 0.06);
}

.arena-stage article > span {
    margin-bottom:
        7px;

    font-size:
        49px;
}

.arena-stage article strong {
    color:
        #247b6a;

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

    font-size:
        18px;

    text-transform:
        capitalize;
}

.arena-vs {
    width:
        50px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

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

    color:
        #ffffff;

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

    font-size:
        14px;

    font-weight:
        700;

    box-shadow:
        0 9px 20px
        rgba(60, 166, 143, 0.22);
}

.arena-question {
    margin:
        0 auto 20px;

    padding:
        16px 18px;

    border-radius:
        18px;

    background:
        #dff4ee;

    color:
        #205f54;

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

    font-size:
        20px;

    font-weight:
        600;

    text-align:
        center;
}


/* ==================================================
   REPAIR
================================================== */

.repair-display {
    width:
        min(620px, 100%);

    margin:
        0 auto 21px;

    padding:
        22px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    border-radius:
        22px;

    background:
        #ffffff;

    border:
        1px solid
        rgba(60, 166, 143, 0.11);

    text-align:
        center;

    box-shadow:
        0 9px 24px
        rgba(35, 102, 91, 0.06);
}

.repair-icon {
    width:
        55px;

    height:
        55px;

    margin-bottom:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;

    background:
        #d9f3eb;

    font-size:
        30px;
}

.repair-display small {
    margin-bottom:
        6px;

    color:
        #78918c;

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

    font-size:
        9px;

    font-weight:
        800;
}

.repair-display strong {
    color:
        #205f54;

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

    font-size:
        20px;
}

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

.repair-options button {
    padding-left:
        18px;

    text-align:
        left;
}


/* ==================================================
   CHECKPOINT TOOLKIT
================================================== */

.comparative-toolkit {
    width:
        min(900px, 100%);

    margin:
        0 auto 24px;

    display:
        grid;

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

    gap:
        14px;
}

.comparative-toolkit article {
    padding:
        20px;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    border-radius:
        21px;

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

    border:
        1px solid
        rgba(60, 166, 143, 0.14);

    box-shadow:
        0 10px 25px
        rgba(35, 102, 91, 0.06);
}

.comparative-toolkit
article > span {
    flex:
        0 0 auto;

    width:
        50px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        16px;

    background:
        #d9f3eb;

    font-size:
        26px;
}

.comparative-toolkit small {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #78918c;

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

    font-size:
        9px;

    font-weight:
        800;
}

.comparative-toolkit strong {
    display:
        block;

    color:
        #247b6a;

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

    font-size:
        18px;
}

.comparative-toolkit p {
    margin:
        3px 0 0;

    color:
        #728984;

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

    font-size:
        13px;
}

.comparative-checkpoint-rule {
    width:
        min(820px, 100%);

    margin:
        0 auto 28px;

    padding:
        19px 22px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #d6f2e8,
            #edf9f5
        );

    border:
        1px solid
        rgba(60, 166, 143, 0.14);
}

.comparative-checkpoint-rule > span {
    font-size:
        28px;
}

.comparative-checkpoint-rule p {
    margin:
        0;

    color:
        #4d6963;

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

    font-size:
        14px;

    line-height:
        1.6;
}


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

.comparatives-body
.video-intro,
.comparatives-body
.games-intro {
    max-width:
        720px;

    margin:
        0 auto 24px;

    color:
        #607873;

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

    line-height:
        1.65;

    text-align:
        center;
}

.comparatives-body
.video-intro strong {
    color:
        #247b6a;
}

.comparatives-body
.video-frame-wrap {
    width:
        min(850px, 100%);

    margin:
        0 auto 30px;
}

.comparatives-body
.video-placeholder {
    min-height:
        390px;

    padding:
        35px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            #d9f3eb,
            #edf9f5 55%,
            #ffffff
        ) !important;

    border:
        2px dashed
        rgba(60, 166, 143, 0.30) !important;

    text-align:
        center;
}

.comparatives-body
.video-placeholder > span {
    margin-bottom:
        13px;

    font-size:
        58px;
}

.comparatives-body
.video-placeholder strong {
    color:
        #205f54 !important;

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

    font-size:
        25px;
}

.comparatives-body
.video-placeholder p {
    margin:
        7px 0 0;

    color:
        #748b86;

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

    font-size:
        14px;
}


/* ==================================================
   EXTRA PRACTICE
================================================== */

.comparatives-body
.external-games-grid {
    width:
        min(850px, 100%);

    margin:
        0 auto 30px;

    display:
        grid;

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

    gap:
        18px;
}

.comparatives-body
.external-game-card {
    min-height:
        290px;

    padding:
        27px;

    display:
        flex;

    flex-direction:
        column;

    border-radius:
        25px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #e8f7f2
        ) !important;

    border:
        1px solid
        rgba(60, 166, 143, 0.16) !important;

    box-shadow:
        0 14px 32px
        rgba(35, 102, 91, 0.07) !important;
}

.comparatives-body
.game-number {
    margin-bottom:
        16px;

    color:
        #32947f !important;

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

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}

.comparatives-body
.external-game-icon {
    width:
        60px;

    height:
        60px;

    margin-bottom:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        19px;

    background:
        #d9f3eb !important;

    font-size:
        31px;
}

.comparatives-body
.external-game-card h3 {
    margin:
        0 0 7px;

    color:
        #205f54 !important;

    font-size:
        21px;
}

.comparatives-body
.external-game-card p {
    margin:
        0 0 20px;

    color:
        #6a817c;

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

    font-size:
        14px;

    line-height:
        1.55;
}

.comparatives-body
.external-game-card a {
    margin-top:
        auto;

    align-self:
        flex-start;

    padding:
        10px 16px;

    border-radius:
        999px;

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

    color:
        #ffffff !important;

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

    font-size:
        13px;

    font-weight:
        800;

    text-decoration:
        none;

    box-shadow:
        0 8px 18px
        rgba(60, 166, 143, 0.20);

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

.comparatives-body
.external-game-card a:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 12px 24px
        rgba(60, 166, 143, 0.26);
}


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

.comparison-progress-card {
    width:
        min(760px, 100%);

    margin:
        0 auto 25px;

    padding:
        17px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #d9f3eb,
            #edf9f5
        );

    border:
        1px solid
        rgba(60, 166, 143, 0.15);
}

.comparison-progress-card > span {
    color:
        #247b6a;

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

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.07em;
}

.comparison-badges {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}

.comparison-badges i {
    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        #63a997;

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

    font-size:
        16px;

    font-style:
        normal;

    font-weight:
        700;

    box-shadow:
        0 5px 13px
        rgba(35, 102, 91, 0.07);
}

.comparison-badges
i.earned-badge {
    background:
        linear-gradient(
            145deg,
            #63c5ad,
            #3ca68f
        );

    color:
        #ffffff;

    transform:
        scale(1.08);

    box-shadow:
        0 8px 18px
        rgba(60, 166, 143, 0.22);
}


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

.comparison-map {
    width:
        min(780px, 100%);

    margin-left:
        auto;

    margin-right:
        auto;
}

.comparatives-body
.practice-level {
    width:
        100%;

    border-color:
        rgba(60, 166, 143, 0.15) !important;

    text-align:
        left;
}

.comparatives-body
.practice-level:not(.locked-level) {
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #e8f7f2
        ) !important;
}

.comparatives-body
.practice-level.active-practice-level {
    border-color:
        #63c5ad !important;

    background:
        linear-gradient(
            135deg,
            #d9f3eb,
            #ffffff
        ) !important;

    box-shadow:
        0 12px 28px
        rgba(60, 166, 143, 0.12) !important;
}

.comparatives-body
.practice-level-icon {
    background:
        #d9f3eb !important;
}

.comparatives-body
.practice-level strong {
    color:
        #205f54 !important;
}

.comparatives-body
.practice-level small {
    color:
        #32947f !important;
}

.comparatives-body
.practice-level p {
    color:
        #708681 !important;
}

.comparatives-body
.practice-level
.level-status {
    color:
        #32947f !important;
}

.comparatives-body
.practice-level.locked-level {
    background:
        #f5faf8 !important;

    opacity:
        0.62;
}

.comparatives-body
.practice-level.locked-level
.practice-level-icon {
    background:
        #edf3f1 !important;
}

.comparatives-body
.practice-level.locked-level
.level-status {
    color:
        #94a7a3 !important;
}

.comparatives-body
.practice-level.completed-practice-level {
    border-color:
        rgba(60, 166, 143, 0.34) !important;

    background:
        linear-gradient(
            135deg,
            #d6f2e8,
            #ffffff
        ) !important;
}

.comparatives-body
.practice-level.completed-practice-level
.level-status {
    color:
        #247b6a !important;
}

.comparatives-body
.practice-path-line {
    background:
        linear-gradient(
            180deg,
            #8bd6c4,
            #3ca68f
        ) !important;
}

.comparatives-body
.map-message {
    width:
        min(720px, 100%);

    margin:
        23px auto 22px;

    color:
        #56716a;

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

    font-size:
        14px;

    font-weight:
        700;

    text-align:
        center;
}


/* ==================================================
   GAME WORKSPACE
================================================== */

.comparatives-body
.game-back-button {
    margin-bottom:
        22px;

    color:
        #247b6a !important;

    background:
        #e8f7f2 !important;

    border-color:
        rgba(60, 166, 143, 0.17) !important;
}

.comparatives-body
.game-back-button:hover {
    background:
        #d9f3eb !important;
}

.comparatives-body
.game-description {
    width:
        min(700px, 100%);

    margin:
        0 auto 20px;

    color:
        #687f7a;

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

    font-size:
        14px;

    line-height:
        1.6;

    text-align:
        center;
}

.comparatives-body
.game-progress-row {
    width:
        min(760px, 100%);

    margin:
        0 auto 18px;

    padding:
        13px 17px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    border-radius:
        16px;

    background:
        #dff4ee !important;

    color:
        #4e6a64;

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

    font-size:
        12px;

    font-weight:
        700;
}

.comparatives-body
.game-progress-row strong {
    color:
        #247b6a;
}

.comparatives-body
.game-workspace {
    width:
        min(780px, 100%);

    margin:
        0 auto;
}

.comparatives-body
.map-question-card {
    padding:
        25px;

    border-radius:
        25px;

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

    border:
        1px solid
        rgba(60, 166, 143, 0.16);

    box-shadow:
        0 13px 30px
        rgba(35, 102, 91, 0.08);
}

.comparatives-body
.map-question-text {
    margin:
        0 0 21px;

    color:
        #205f54;

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

    font-size:
        21px;

    font-weight:
        600;

    text-align:
        center;
}


/* ==================================================
   LEVEL COMPLETE
================================================== */

.comparatives-body
.map-level-complete-card {
    padding:
        35px 25px;

    border-radius:
        26px;

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

    text-align:
        center;

    border:
        1px solid
        rgba(60, 166, 143, 0.17);
}

.comparatives-body
.map-level-complete-icon {
    width:
        74px;

    height:
        74px;

    margin:
        0 auto 13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        23px;

    background:
        #ffffff;

    font-size:
        42px;

    box-shadow:
        0 10px 24px
        rgba(35, 102, 91, 0.08);
}

.comparatives-body
.map-level-complete-card small {
    color:
        #32947f;

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

    font-size:
        10px;

    font-weight:
        800;
}

.comparatives-body
.map-level-complete-card h3 {
    margin:
        6px 0 8px;

    color:
        #205f54;

    font-size:
        24px;
}

.comparatives-body
.map-level-complete-card p {
    margin:
        0 0 20px;

    color:
        #647b76;

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

    font-size:
        14px;
}

.comparatives-body
.map-return-button {
    padding:
        12px 19px;

    border:
        0;

    border-radius:
        999px;

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

    color:
        #ffffff;

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

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 9px 20px
        rgba(60, 166, 143, 0.22);
}


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

.comparative-final-review {
    width:
        min(880px, 100%);

    margin:
        0 auto 24px;

    display:
        grid;

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

    gap:
        14px;
}

.comparative-final-review article {
    padding:
        20px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    border-radius:
        21px;

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

    border:
        1px solid
        rgba(60, 166, 143, 0.14);

    box-shadow:
        0 9px 24px
        rgba(35, 102, 91, 0.06);
}

.comparative-final-review
article > span {
    width:
        50px;

    height:
        50px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        16px;

    background:
        #d9f3eb;

    font-size:
        26px;
}

.comparative-final-review strong {
    display:
        block;

    color:
        #247b6a;

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

    font-size:
        18px;
}

.comparative-final-review p {
    margin:
        3px 0 0;

    color:
        #718883;

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

    font-size:
        13px;
}


/* ==================================================
   FINAL RULE
================================================== */

.final-comparative-rule {
    width:
        min(800px, 100%);

    margin:
        0 auto 29px;

    padding:
        22px 24px;

    display:
        flex;

    align-items:
        center;

    gap:
        17px;

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #d6f2e8,
            #edf9f5
        );

    border:
        1px solid
        rgba(60, 166, 143, 0.17);
}

.final-comparative-rule > span {
    font-size:
        36px;
}

.final-comparative-rule small {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #32947f;

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

    font-size:
        9px;

    font-weight:
        800;
}

.final-comparative-rule strong {
    display:
        block;

    color:
        #247b6a;

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

    font-size:
        20px;
}

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

    color:
        #667e78;

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

    font-size:
        14px;
}


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

.comparatives-body
.activity-feedback {
    width:
        min(780px, 100%);

    min-height:
        28px;

    margin:
        15px auto 18px;

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

    font-size:
        14px;

    font-weight:
        700;

    text-align:
        center;
}

.comparatives-body
.correct-feedback {
    color:
        #247b6a !important;
}

.comparatives-body
.wrong-feedback {
    color:
        #a85f5a !important;
}


/* ==================================================
   FINISH SCREEN
================================================== */

.comparatives-body
.finish-trophy {
    background:
        linear-gradient(
            145deg,
            #d9f3eb,
            #f4fcf9
        ) !important;

    box-shadow:
        0 14px 32px
        rgba(60, 166, 143, 0.13) !important;
}

.comparatives-body
.finish-page h2 {
    color:
        #205f54 !important;
}

.comparatives-body
.finish-message {
    color:
        #647c76 !important;
}

.comparatives-body
.finish-statistic {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #e8f7f2
        ) !important;

    border:
        1px solid
        rgba(60, 166, 143, 0.14) !important;
}

.comparatives-body
.finish-statistic small {
    color:
        #32947f !important;
}

.comparatives-body
.finish-statistic strong {
    color:
        #247b6a !important;
}

.comparatives-body
.finish-badge {
    background:
        linear-gradient(
            135deg,
            #d6f2e8,
            #edf9f5
        ) !important;

    border:
        1px solid
        rgba(60, 166, 143, 0.17) !important;
}

.comparatives-body
.finish-badge-icon {
    background:
        #ffffff !important;
}

.comparatives-body
.finish-badge small {
    color:
        #32947f !important;
}

.comparatives-body
.finish-badge strong {
    color:
        #247b6a !important;
}


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

.comparatives-body
.achievement-toast {
    border-color:
        rgba(60, 166, 143, 0.18) !important;

    box-shadow:
        0 18px 45px
        rgba(35, 102, 91, 0.16) !important;
}

.comparatives-body
.achievement-toast-icon {
    background:
        #d9f3eb !important;
}

.comparatives-body
.achievement-toast small {
    color:
        #32947f !important;
}

.comparatives-body
.achievement-toast strong {
    color:
        #205f54 !important;
}


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

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


/* ==================================================
   FOCUS
================================================== */

.comparatives-body
button:focus-visible,
.comparatives-body
a:focus-visible,
.comparatives-body
[tabindex="0"]:focus-visible {
    outline:
        3px solid
        rgba(60, 166, 143, 0.32);

    outline-offset:
        3px;
}


/* ==================================================
   RESPONSIVE — 950PX
================================================== */

@media (max-width: 950px) {

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

    .sentence-formula-board {
        flex-wrap:
            wrap;
    }

    .sentence-formula-board > span {
        min-height:
            54px;
    }

    .sentence-formula-part {
        flex:
            1 1 140px;
    }
}


/* ==================================================
   RESPONSIVE — 760PX
================================================== */

@media (max-width: 760px) {

    .comparative-definition-card {
        flex-direction:
            column;

        text-align:
            center;
    }

    .comparative-definition-icon {
        min-width:
            110px;
    }


    .comparison-scene {
        grid-template-columns:
            1fr;
    }

    .comparison-arrow {
        margin:
            -3px auto;
    }


    .comparative-formula {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .comparative-formula > div {
        width:
            100%;

        min-width:
            0;
    }

    .comparative-formula > span {
        justify-content:
            center;
    }


    .special-comparative-board,
    .comparison-example-grid,
    .comparative-toolkit,
    .comparatives-body
    .external-games-grid,
    .comparative-final-review {
        grid-template-columns:
            1fr;
    }


    .full-comparison-result {
        grid-template-columns:
            1fr;
    }


    .comparative-lab-options,
    .arena-options,
    .map-question-options {
        grid-template-columns:
            1fr;
    }


    .arena-stage {
        grid-template-columns:
            1fr;
    }

    .arena-vs {
        margin:
            -2px auto;
    }


    .comparison-progress-card {
        flex-direction:
            column;

        text-align:
            center;
    }


    .comparison-badges {
        justify-content:
            center;

        flex-wrap:
            wrap;
    }
}


/* ==================================================
   RESPONSIVE — 520PX
================================================== */

@media (max-width: 520px) {

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

    .comparative-word-card {
        min-height:
            145px;
    }


    .comparative-definition-card,
    .comparative-formula,
    .comparative-lab,
    .comparison-arena,
    .repair-machine,
    .comparatives-body
    .map-question-card {
        padding:
            19px 16px;
    }


    .comparison-result,
    .formula-result-card,
    .ukrainian-rule-card,
    .simple-explanation-card,
    .comparative-memory-tip,
    .than-warning,
    .important-than-card,
    .comparative-checkpoint-rule,
    .final-comparative-rule {
        padding:
            17px;

        align-items:
            flex-start;
    }


    .special-comparative-board article {
        padding:
            19px;
    }


    .sentence-formula-board {
        padding:
            15px;
    }

    .sentence-formula-part {
        flex-basis:
            100%;
    }

    .sentence-formula-board > span {
        width:
            100%;

        min-height:
            20px;

        justify-content:
            center;
    }


    .comparatives-body
    .video-placeholder {
        min-height:
            300px;

        padding:
            25px 18px;
    }


    .comparatives-body
    .external-game-card {
        min-height:
            250px;

        padding:
            22px;
    }


    .comparative-toolkit article,
    .comparative-final-review article {
        align-items:
            flex-start;
    }


    .comparison-badges i {
        width:
            34px;

        height:
            34px;
    }


    .comparatives-body
    .game-progress-row {
        flex-direction:
            column;

        align-items:
            center;

        text-align:
            center;
    }
}


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

@media (max-width: 380px) {

    .comparative-word-card strong {
        font-size:
            21px;
    }

    .comparison-result strong,
    .formula-result-card strong,
    .full-comparison-result strong,
    .final-comparative-rule strong {
        font-size:
            18px;
    }

    .arena-question,
    .comparatives-body
    .map-question-text {
        font-size:
            18px;
    }
}