/* =====================================================
           PAGE
        ===================================================== */

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;

            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

            background:
                linear-gradient(
                    135deg,
                    #fff8e8,
                    #edf6ff
                );

            color: #29445f;
        }


        .game-page {
            min-height: 100vh;

            padding:
                30px
                20px
                45px;
        }


        .game-card {
            max-width: 940px;

            margin: auto;

            padding: 30px;

            background: #ffffff;

            border: 5px solid #17478f;
            border-radius: 28px;

            box-shadow:
                0 15px 35px
                rgba(31, 72, 125, 0.14);
        }


        /* =====================================================
           TITLE
        ===================================================== */

        .title {
            margin:
                0
                0
                8px;

            text-align: center;

            color: #103a78;

            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

            font-size:
                clamp(
                    27px,
                    3.4vw,
                    38px
                );

            font-weight: 700;

            line-height: 1.18;

            letter-spacing: -0.5px;
        }


        .title-en {
            display: block;

            margin-top: 6px;

            color: #103a78;

            font-size: 0.69em;

            font-weight: 650;
        }


        .subtitle {
            margin:
                0
                auto
                25px;

            text-align: center;

            color: #6e8196;

            font-size: 15px;

            line-height: 1.45;
        }


        /* =====================================================
           MICROSOFT LEARNING CARD
        ===================================================== */

        .learning-card {
            position: relative;

            margin:
                20px
                0
                28px;

            padding:
                24px
                25px;

            overflow: hidden;

            background:
                linear-gradient(
                    135deg,
                    #f2fbf9,
                    #f8fcff
                );

            border: 2px solid #9edbd5;
            border-radius: 22px;
        }


        .learning-label {
            display: inline-block;

            margin-bottom: 10px;

            padding:
                5px
                11px;

            background: #e8f8f5;

            border: 1px solid #9fdcd5;
            border-radius: 999px;

            color: #087d75;

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

            letter-spacing: 0.3px;

            text-transform: uppercase;
        }


        .learning-title {
            margin:
                0
                0
                10px;

            color: #103a78;

            font-size:
                clamp(
                    20px,
                    2.5vw,
                    25px
                );

            line-height: 1.3;
        }


        .learning-title .english {
            display: block;

            margin-top: 4px;

            color: #536e8b;

            font-size: 0.72em;
            font-weight: 600;
        }


        .learning-text {
            margin:
                0
                0
                16px;

            color: #385777;

            font-size: 15px;

            line-height: 1.65;
        }


        .learning-text .english {
            display: block;

            margin-top: 8px;

            color: #6f8195;

            font-size: 14px;
        }


        .microsoft-btn {
            display: inline-block;

            padding:
                11px
                18px;

            background: #087d75;

            color: white;

            border-radius: 14px;

            text-decoration: none;

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

            line-height: 1.35;

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


        .microsoft-btn:hover {
            transform: translateY(-1px);

            box-shadow:
                0 7px 16px
                rgba(8, 125, 117, 0.18);
        }


        .source-note {
            margin:
                12px
                0
                0;

            color: #7b8999;

            font-size: 12px;

            line-height: 1.45;
        }


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

        .quiz-intro {
            margin:
                0
                0
                22px;

            padding:
                20px
                22px;

            text-align: center;

            background: #fff9e9;

            border:
                2px solid
                #f1d68f;

            border-radius: 20px;
        }


        .quiz-intro h2 {
            margin:
                0
                0
                8px;

            color: #103a78;

            font-size:
                clamp(
                    21px,
                    2.5vw,
                    27px
                );

            line-height: 1.3;
        }


        .quiz-intro p {
            margin:
                6px
                0;

            color: #526e88;

            font-size: 14px;

            line-height: 1.55;
        }


        .quiz-intro .english {
            color: #78899a;

            font-size: 13px;
        }


        /* =====================================================
           BUTTONS
        ===================================================== */

        .start-btn,
        .next-btn,
        .restart-btn {
            display: block;

            margin:
                18px
                auto
                0;

            padding:
                12px
                25px;

            border: none;
            border-radius: 16px;

            background: #17478f;

            color: white;

            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

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

            cursor: pointer;

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


        .start-btn:hover,
        .next-btn:hover,
        .restart-btn:hover {
            transform: translateY(-1px);

            box-shadow:
                0 7px 16px
                rgba(23, 71, 143, 0.18);
        }


        .next-btn {
            display: none;
        }


        .restart-btn {
            display: none;

            background: #087d75;
        }


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

        .quiz-section {
            display: none;
        }


        .progress-wrap {
            margin:
                5px
                0
                18px;
        }


        .progress-text {
            margin-bottom: 8px;

            text-align: center;

            color: #17478f;

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


        .progress-track {
            height: 8px;

            overflow: hidden;

            background: #e5edf6;

            border-radius: 999px;
        }


        .progress-bar {
            width: 0;
            height: 100%;

            background:
                linear-gradient(
                    90deg,
                    #14998f,
                    #17478f
                );

            border-radius: 999px;

            transition:
                width 0.25s ease;
        }


        /* =====================================================
           QUESTION CARD
        ===================================================== */

        .question-card {
            padding:
                25px;

            background: #f9fbfe;

            border:
                2px solid
                #c8dbf2;

            border-radius: 22px;
        }


        .question-number {
            margin-bottom: 8px;

            color: #c47d00;

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

            letter-spacing: 0.3px;
        }


        .question-ky {
            margin-bottom: 5px;

            color: #203e5f;

            font-size:
                clamp(
                    18px,
                    2.4vw,
                    21px
                );

            font-weight: 700;

            line-height: 1.48;
        }


        .question-en {
            margin-bottom: 22px;

            color: #6d7f92;

            font-size:
                clamp(
                    14px,
                    2vw,
                    16px
                );

            font-weight: 500;

            line-height: 1.45;
        }


        /* =====================================================
           SHORTCUT OPTIONS
        ===================================================== */

        .options {
            display: grid;

            gap: 11px;
        }


        .option {
            display: flex;

            align-items: center;

            min-height: 54px;

            padding:
                12px
                15px;

            background: white;

            border:
                2px solid
                #b8d2ee;

            border-radius: 15px;

            cursor: pointer;

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


        .option:hover {
            background: #eef6ff;

            border-color: #639bd5;

            transform: translateY(-1px);
        }


        .option.correct {
            background: #e8f8ef;

            border-color: #4cb77a;
        }


        .option.wrong {
            background: #fff0f0;

            border-color: #e25e68;
        }


        .option.disabled {
            cursor: default;

            pointer-events: none;
        }


        .shortcut {
            display: inline-flex;

            flex-wrap: wrap;

            align-items: center;

            gap: 5px;

            color: #173d68;

            font-size: 15px;
            font-weight: 750;
        }


        kbd {
            display: inline-block;

            min-width: 31px;

            padding:
                6px
                9px;

            text-align: center;

            background:
                linear-gradient(
                    180deg,
                    #ffffff,
                    #edf2f7
                );

            border:
                1px solid
                #aebdcb;

            border-bottom:
                3px solid
                #94a6b7;

            border-radius: 7px;

            box-shadow:
                0 1px 1px
                rgba(0, 0, 0, 0.06);

            color: #173d68;

            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

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

            line-height: 1.1;
        }


        .plus {
            color: #7b8da0;

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


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

        .feedback {
            display: none;

            margin-top: 18px;

            padding:
                16px
                18px;

            border-radius: 15px;

            line-height: 1.55;
        }


        .feedback.correct-feedback {
            display: block;

            background: #e8f8ef;

            border: 1px solid #a9ddbd;

            color: #246943;
        }


        .feedback.wrong-feedback {
            display: block;

            background: #fff1f1;

            border: 1px solid #efb0b5;

            color: #93404a;
        }


        .feedback-title {
            margin-bottom: 7px;

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


        .feedback-explanation {
            color: #405d77;

            font-size: 14px;
        }


        .feedback-explanation .english {
            display: block;

            margin-top: 5px;

            color: #728396;
        }


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

        .score-box {
            display: none;

            padding:
                28px
                24px;

            text-align: center;

            background:
                linear-gradient(
                    135deg,
                    #fff9e8,
                    #f3fbfa
                );

            border:
                2px solid
                #e5c979;

            border-radius: 22px;
        }


        .result-eyebrow {
            color: #c47d00;

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

            letter-spacing: 0.6px;

            text-transform: uppercase;
        }


        .score-box h2 {
            margin:
                8px
                0;

            color: #103a78;

            font-size: 25px;

            line-height: 1.35;
        }


        .score-number {
            margin:
                14px
                0;

            color: #087d75;

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


        .final-message {
            max-width: 620px;

            margin:
                0
                auto;

            color: #536e88;

            font-size: 14px;

            line-height: 1.6;
        }


        /* =====================================================
           BACK BUTTON
        ===================================================== */

        .back-btn {
            display: block;

            width: fit-content;

            margin:
                28px
                auto
                0;

            padding:
                11px
                22px;

            background: #17478f;

            color: white;

            border-radius: 16px;

            text-decoration: none;

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

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


        .back-btn:hover {
            transform: translateY(-1px);

            box-shadow:
                0 7px 16px
                rgba(23, 71, 143, 0.18);
        }


        /* =====================================================
           MOBILE
        ===================================================== */

        @media (max-width: 700px) {

            .game-page {
                padding:
                    15px
                    10px
                    30px;
            }


            .game-card {
                padding:
                    22px
                    15px;

                border-width: 4px;

                border-radius: 22px;
            }


            .learning-card,
            .quiz-intro,
            .question-card {
                padding:
                    19px
                    16px;
            }


            .microsoft-btn {
                display: block;

                text-align: center;
            }


            .option {
                min-height: 51px;

                padding:
                    11px
                    12px;
            }


            kbd {
                padding:
                    5px
                    7px;

                font-size: 12px;
            }

        }



/* WINDOWS_SHORT_CHILD_TEXT_V1_START */


/* ==========================================================
   CHILD-FRIENDLY WINDOWS SHORTCUT RESOURCE
========================================================== */


/* ----------------------------------------------------------
   LEARNING CARD
---------------------------------------------------------- */

.learning-card {

    padding:
        18px 24px !important;

    margin-bottom:
        18px !important;
}


.learning-label {

    font-size:
        11px !important;

    padding:
        4px 10px !important;
}


.learning-title {

    margin:
        10px 0 7px !important;

    font-size:
        23px !important;

    line-height:
        1.15 !important;
}


.learning-title .english {

    display:
        block !important;

    margin-top:
        3px !important;

    font-size:
        16px !important;

    line-height:
        1.15 !important;
}


.learning-text {

    margin:
        7px 0 11px !important;

    font-size:
        13px !important;

    line-height:
        1.3 !important;
}


.learning-text .english {

    display:
        block !important;

    margin-top:
        3px !important;

    font-size:
        12px !important;
}


.microsoft-btn {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        9px 16px !important;

    font-size:
        12px !important;

    font-weight:
        800 !important;
}


.source-note {

    margin-top:
        8px !important;

    font-size:
        10px !important;

    opacity:
        .7;
}


/* ----------------------------------------------------------
   QUIZ INTRO
---------------------------------------------------------- */

.quiz-intro {

    padding:
        17px 22px !important;
}


.quiz-intro h2 {

    margin:
        0 0 12px !important;

    font-size:
        23px !important;

    line-height:
        1.15 !important;
}


/* Remove spacing inherited from old paragraph layout */

.quiz-intro > p {

    display:
        none !important;
}


/* ----------------------------------------------------------
   TWO QUICK FACTS
---------------------------------------------------------- */

.quiz-facts {

    width:
        min(
            600px,
            100%
        );

    margin:
        0 auto 14px !important;

    display:
        grid;

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

    gap:
        12px;
}


.quiz-fact {

    padding:
        10px 12px;

    border:
        1px solid #e6c477;

    border-radius:
        10px;

    background:
        rgba(
            255,
            255,
            255,
            .72
        );

    text-align:
        center;
}


.quiz-fact strong,
.quiz-fact span,
.quiz-fact small {

    display:
        block;
}


.quiz-fact strong {

    font-size:
        15px;

    line-height:
        1.2;
}


.quiz-fact span {

    margin-top:
        4px;

    font-size:
        12px;

    font-weight:
        700;
}


.quiz-fact small {

    margin-top:
        2px;

    font-size:
        10.5px;

    color:
        #5c6c7d;
}


/* ----------------------------------------------------------
   START BUTTON
---------------------------------------------------------- */

.start-btn {

    padding:
        10px 24px !important;

    font-size:
        14px !important;

    font-weight:
        800 !important;
}


/* ----------------------------------------------------------
   LAPTOP SCREEN
---------------------------------------------------------- */

@media (
    min-width: 1100px
) and (
    max-height: 950px
) {

    .learning-card {

        padding:
            15px 22px !important;
    }


    .learning-title {

        font-size:
            21px !important;
    }


    .quiz-intro {

        padding:
            14px 20px !important;
    }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (
    max-width: 700px
) {

    .quiz-facts {

        grid-template-columns:
            1fr;
    }

}


/* WINDOWS_SHORT_CHILD_TEXT_V1_END */



/* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_START */


/* ==========================================================
   GLOBAL E-BOOK ACTIVITY TYPOGRAPHY

   Unified Kyrgyz-friendly font rendering.

   Supports Kyrgyz Cyrillic clearly:
       Ө ө
       Ү ү
       Ң ң

   Intentionally protects programming / keyboard typography.
========================================================== */


:root {

    --ebook-kyrgyz-font:
        "Segoe UI",
        "Noto Sans",
        "DejaVu Sans",
        Arial,
        sans-serif;
}


/* ----------------------------------------------------------
   BASE TEXT

   This becomes the normal inherited font for each activity.
---------------------------------------------------------- */

html,
body {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}


/* ----------------------------------------------------------
   MAIN EDUCATIONAL TEXT

   Override old Georgia / Times / decorative serif styles
   where they were being used for Kyrgyz text.
---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,

p,

button,
input,
textarea,
select,

label,

a,

li,

th,
td,

strong,
small,
em {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}


/* ----------------------------------------------------------
   COMMON ACTIVITY QUESTION / ANSWER ELEMENTS

   These selectors cover the different activity generations
   already used throughout the e-book.
---------------------------------------------------------- */

.question,
.question-text,
.question-title,
.question-heading,
.question-kicker,

.question-ky,
.question-kyrgyz,
.ky-question,

.challenge-question,
.challenge-title,

.prompt,
.prompt-text,

.instruction,
.instructions,
.instruction-text,

.scenario,

.feedback,
.explanation,

.answer,
.answer-text,
.answer-option,

.option,
.option-btn,
.choice,
.choice-btn,

.quiz-question,
.quiz-option,

.task-title,
.task-question,

.result-title,
.result-message,

.card-title,
.card-text,

.game-title,
.game-question {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}


/* ----------------------------------------------------------
   KYRGYZ TYPOGRAPHY DETAILS

   Slightly softer weight and natural spacing improve
   Cyrillic letters such as ө, ү and ң.
---------------------------------------------------------- */

h1,
h2,
h3,
.question,
.question-text,
.question-title,
.question-ky,
.question-kyrgyz,
.ky-question,
.challenge-question,
.quiz-question,
.task-question {

    font-kerning:
        normal;

    font-variant-ligatures:
        common-ligatures;

    letter-spacing:
        .002em;

    word-spacing:
        .02em;

    text-rendering:
        optimizeLegibility;
}


/* ----------------------------------------------------------
   QUESTION HEADINGS
---------------------------------------------------------- */

.question-ky,
.question-kyrgyz,
.ky-question,
.question-text,
.challenge-question,
.quiz-question {

    font-weight:
        750;
}


/* ----------------------------------------------------------
   ANSWERS

   Keep Kyrgyz choices clean and readable rather than
   excessively heavy.
---------------------------------------------------------- */

.option-btn,
.option,
.answer-option,
.choice,
.choice-btn {

    font-weight:
        650;
}


/* ----------------------------------------------------------
   FEEDBACK / EXPLANATIONS
---------------------------------------------------------- */

.feedback,
.explanation {

    line-height:
        1.4;
}


/* ==========================================================
   DO NOT CHANGE PROGRAMMING / KEYBOARD / TECHNICAL FONTS
========================================================== */

code,
pre,
kbd,
samp,

.code,
.code-block,
.code-output,
.console,
.terminal,
.keyboard-key,
.key,
.shortcut-key {

    font-family:
        ui-monospace,
        "Cascadia Code",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace !important;

}


/* ==========================================================
   PROTECT COMMON ICON FONTS
========================================================== */

.material-icons,
.material-symbols-outlined,
.material-symbols-rounded,

.fa,
.fas,
.far,
.fal,
.fab,

[class^="fa-"],
[class*=" fa-"] {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}


/* ==========================================================
   EMOJI

   Browser will naturally fall back to the operating
   system emoji font where necessary.
========================================================== */


/* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_END */


/* FINAL_UNIFORM_ACTIVITY_FONT_V2_START */

/*
    FINAL UNIFORM E-BOOK ACTIVITY TYPOGRAPHY

    Standard typography:
        Arial, "Helvetica Neue", Helvetica, sans-serif

    Applies to normal Kyrgyz and English interface text,
    including Back to Chapter buttons.

    Font sizes, weights, colors, spacing and layouts
    are intentionally NOT changed.
*/


:root {
    --ebook-kyrgyz-font:
        Arial, "Helvetica Neue", Helvetica, sans-serif;

    --ebook-activity-font:
        Arial, "Helvetica Neue", Helvetica, sans-serif;
}


html,
body {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   TITLES AND NORMAL TEXT
---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
li,
a,
strong,
b,
em,
small,
th,
td {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   BUTTONS AND FORM ELEMENTS

   Includes every Back to Chapter button regardless of
   whether it is an <a> or <button>.
---------------------------------------------------------- */

button,
input,
textarea,
select,
option {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   COMMON BACK-TO-CHAPTER CLASSES
---------------------------------------------------------- */

.back-to-chapter,
.back-to-chapter *,
.back-btn,
.back-btn *,
.back-button,
.back-button *,
.chapter-back,
.chapter-back *,
.activity-back,
.activity-back *,
.activity2-bottom-back,
.activity2-bottom-back * {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   PRESERVE PROGRAMMING TYPOGRAPHY
---------------------------------------------------------- */

code,
pre,
kbd,
samp,
.code,
.code *,
.code-block,
.code-block *,
.code-editor,
.code-editor *,
.editor-code,
.editor-code *,
.python-code,
.python-code *,
.terminal,
.terminal *,
.console,
.console * {
    font-family:
        "Courier New",
        Courier,
        monospace !important;
}

/* FINAL_UNIFORM_ACTIVITY_FONT_V2_END */