.game-page {
            min-height: 100vh;
            padding: 30px 20px;
        }

        .game-card {
            max-width: 1100px;
            margin: auto;
            background: white;
            border: 6px solid #234aa5;
            border-radius: 30px;
            padding: 30px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
        }

        .title {
            text-align: center;
            color: #d69a00;
            font-size: 31px;
            margin-bottom: 10px;
        }

        .instruction {
            text-align: center;
            color: #234aa5;
            font-size: 18px;
            line-height: 1.6;
            font-weight: bold;
            margin-bottom: 22px;
        }

        .back-btn {
            display: block;
            width: fit-content;
            margin: 30px auto 0;
            padding: 12px 25px;
            background: #234aa5;
            color: white;
            text-decoration: none;
            border-radius: 20px;
            font-weight: bold;
        }

        #result {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
            line-height: 1.5;
        }



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

/* DAY_NIGHT_RESPONSIVE_GAME_LAYOUT_V3_START */

/* Controls */
#controls {
    text-align: center;
}

#controls > p {
    margin: 0 0 14px;
    color: #173f73;
    font-size: 18px;
}

.difficulty-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.btn {
    appearance: none;
    border: 2px solid #2452a4;
    border-radius: 999px;
    padding: 10px 20px;
    background: #ffffff;
    color: #173f73;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(36, 82, 164, 0.22);
}

.difficulty-buttons .btn.active {
    border-color: #e1a400;
    background: #ffc21a;
    color: #173f73;
    box-shadow: 0 0 0 4px rgba(255, 194, 26, 0.22);
}

.start-btn,
.ready-btn,
.submit-btn {
    border-color: #2452a4;
    background: #2452a4;
    color: #ffffff;
}

.start-btn {
    min-width: 190px;
}

/* Game grid */
#game {
    position: relative;
    text-align: center;
}

#items-container {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 6px auto 16px;
}

.item {
    min-width: 0;
    padding: 10px 8px;
    overflow: hidden;
    border: 2px solid #d6e0e7;
    border-radius: 16px;
    background: #f7fbff;
    box-shadow: 0 4px 10px rgba(23, 63, 115, 0.08);
}

.item img {
    display: block;
    width: 100%;
    height: 82px;
    margin: 0 auto 7px;
    object-fit: contain;
}

.item p {
    min-height: 34px;
    margin: 0;
    color: #173f73;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.device-name-ky,
.device-name-en {
    display: inline;
}

.device-name-divider {
    color: #e1a400;
}

/* Answers */
#input-area {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    background: #f5f8fc;
}

#input-area > p {
    margin: 0 0 12px;
    color: #173f73;
    font-weight: 700;
}

#inputs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.answer {
    width: min(220px, 100%);
    box-sizing: border-box;
    border: 2px solid #9bb6c7;
    border-radius: 12px;
    padding: 10px 12px;
    color: #173a5d;
    background: #ffffff;
    font-size: 16px;
}

.answer:focus {
    border-color: #2452a4;
    outline: 3px solid rgba(36, 82, 164, 0.16);
}

/* Night transition */
#overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(7, 19, 49, 0.9);
    color: #ffffff;
    font-size: clamp(34px, 7vw, 72px);
    font-weight: 800;
}

/* Result */
#result {
    color: #173f73;
    text-align: center;
}

#result h3 {
    margin-bottom: 8px;
    color: #e1a400;
}

/* Keep the complete activity usable on a normal laptop screen */
@media (min-width: 901px) and (max-height: 850px) {
    .game-page {
        padding: 18px;
    }

    .game-card {
        padding: 20px 28px;
    }

    .title {
        margin: 0 0 6px;
        font-size: 28px;
    }

    .instruction {
        margin-bottom: 14px;
        font-size: 16px;
        line-height: 1.4;
    }

    .item img {
        height: 68px;
    }

    .item {
        padding: 7px 6px;
    }

    .back-btn {
        margin-top: 16px;
    }
}

/* Tablet */
@media (max-width: 900px) {
    #items-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Phone */
@media (max-width: 560px) {
    .game-page {
        padding: 12px;
    }

    .game-card {
        padding: 18px 12px;
        border-width: 4px;
        border-radius: 22px;
    }

    .title {
        font-size: 25px;
    }

    .instruction {
        font-size: 15px;
    }

    #items-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .item img {
        height: 72px;
    }

    .difficulty-buttons {
        gap: 8px;
    }

    .btn {
        padding: 9px 13px;
        font-size: 14px;
    }
}

/* DAY_NIGHT_RESPONSIVE_GAME_LAYOUT_V3_END */