body {
      margin: 0;
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      background: linear-gradient(135deg, #fff7df, #eaf3ff);
    }

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

    .game-card {
      max-width: 860px;
      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: 28px;
      margin-bottom: 8px;
    }

    .subtitle {
      text-align: center;
      color: #234aa5;
      font-size: 16px;
      margin-bottom: 24px;
      line-height: 1.5;
    }

    /* --- Language selection --- */
    .lang-row {
      display: flex;
      gap: 16px;
      justify-content: center;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .lang-btn {
      flex: 1;
      max-width: 220px;
      padding: 18px 12px;
      border: 3px solid #234aa5;
      border-radius: 20px;
      background: #eaf3ff;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      color: #234aa5;
      text-align: center;
      transition: 0.2s;
    }

    .lang-btn:hover {
      background: #d0e4ff;
      transform: scale(1.03);
    }

    .lang-btn.active {
      background: #234aa5;
      color: white;
    }

    .lang-flag {
      font-size: 32px;
      display: block;
      margin-bottom: 6px;
    }

    .lang-sub {
      font-size: 12px;
      font-weight: normal;
      opacity: 0.8;
      display: block;
      margin-top: 3px;
    }

    /* --- Name input --- */
    .name-section {
      text-align: center;
      margin-bottom: 24px;
    }

    .name-section label {
      display: block;
      color: #234aa5;
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 10px;
    }

    .name-section input {
      font-size: 22px;
      padding: 10px 18px;
      border: 3px solid #234aa5;
      border-radius: 14px;
      text-align: center;
      letter-spacing: 0.1em;
      width: 100%;
      max-width: 340px;
      outline: none;
      color: #234aa5;
      font-weight: bold;
    }

    .name-section input:focus {
      border-color: #d69a00;
    }

    .name-hint {
      font-size: 13px;
      color: #888;
      margin-top: 6px;
    }

    .start-btn {
      margin-top: 14px;
      padding: 12px 30px;
      background: #d69a00;
      color: white;
      border: none;
      border-radius: 20px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.2s;
    }

    .start-btn:hover {
      background: #b37e00;
      transform: scale(1.03);
    }

    /* --- Score row --- */
    .score-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .score-pill {
      background: #fff7df;
      border: 2px solid #d69a00;
      border-radius: 18px;
      padding: 8px 16px;
      font-weight: bold;
      color: #234aa5;
      font-size: 15px;
    }

    /* --- Character tabs --- */
    .char-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 20px;
      justify-content: center;
    }

    .char-tab {
      padding: 8px 16px;
      border-radius: 20px;
      border: 2px solid #234aa5;
      background: #eaf3ff;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      color: #234aa5;
      transition: 0.15s;
    }

    .char-tab:hover {
      background: #d0e4ff;
    }

    .char-tab.active {
      background: #234aa5;
      color: white;
    }

    .char-tab.done {
      border-color: #16a34a;
      color: #16a34a;
      background: #dcfce7;
    }

    .char-tab.done.active {
      background: #16a34a;
      color: white;
    }

    /* --- Encode card --- */
    .encode-card {
      background: #f9f9fb;
      border: 2px solid #234aa5;
      border-radius: 20px;
      padding: 24px;
    }

    .encode-letter {
      font-size: 64px;
      font-weight: bold;
      text-align: center;
      color: #234aa5;
      margin-bottom: 8px;
    }

    .encode-info-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 6px 0;
      font-size: 15px;
    }

    .encode-info-row .lbl {
      color: #666;
      min-width: 110px;
      font-weight: bold;
    }

    .encode-info-row .val {
      font-family: 'Courier New', monospace;
      font-size: 17px;
      font-weight: bold;
      color: #234aa5;
    }

    .divider {
      border: none;
      border-top: 1px solid #e0e0e0;
      margin: 14px 0;
    }

    .step-hint {
      font-size: 14px;
      color: #555;
      line-height: 1.7;
      background: #fff7df;
      border-left: 4px solid #d69a00;
      padding: 10px 14px;
      border-radius: 0 10px 10px 0;
      margin-bottom: 16px;
    }

    /* --- Bit input cells --- */
    .bits-row {
      display: flex;
      gap: 5px;
      justify-content: center;
      flex-wrap: wrap;
      margin: 14px 0;
    }

    .bit-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    .bit-pos {
      font-size: 10px;
      color: #aaa;
      font-family: 'Courier New', monospace;
    }

    .bit-input {
      width: 38px;
      height: 38px;
      border: 2px solid #234aa5;
      border-radius: 8px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      font-family: 'Courier New', monospace;
      background: white;
      color: #234aa5;
      outline: none;
      transition: 0.15s;
    }

    .bit-input:focus {
      border-color: #d69a00;
      background: #fff7df;
    }

    .bit-input.correct {
      background: #dcfce7;
      border-color: #16a34a;
      color: #16a34a;
    }

    .bit-input.wrong {
      background: #fee2e2;
      border-color: #dc2626;
      color: #dc2626;
    }

    /* --- Buttons --- */
    .btn-row {
      display: flex;
      gap: 10px;
      margin-top: 14px;
      flex-wrap: wrap;
    }

    .check-btn {
      padding: 10px 22px;
      background: #234aa5;
      color: white;
      border: none;
      border-radius: 16px;
      font-size: 15px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.2s;
    }

    .check-btn:hover {
      background: #1a3880;
      transform: scale(1.03);
    }

    .reveal-btn {
      padding: 10px 22px;
      background: white;
      color: #666;
      border: 2px solid #ccc;
      border-radius: 16px;
      font-size: 15px;
      cursor: pointer;
      transition: 0.2s;
    }

    .reveal-btn:hover {
      background: #f0f0f0;
    }

    .next-btn {
      padding: 10px 22px;
      background: #d69a00;
      color: white;
      border: none;
      border-radius: 16px;
      font-size: 15px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.2s;
    }

    .next-btn:hover {
      background: #b37e00;
      transform: scale(1.03);
    }

    /* --- Feedback --- */
    .feedback {
      margin-top: 12px;
      padding: 10px 16px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: bold;
      line-height: 1.5;
    }

    .feedback.ok {
      background: #dcfce7;
      color: #16a34a;
      border: 2px solid #16a34a;
    }

    .feedback.err {
      background: #fee2e2;
      color: #dc2626;
      border: 2px solid #dc2626;
    }

    /* --- Summary --- */
    .summary-box {
      background: #eaf3ff;
      border: 3px solid #234aa5;
      border-radius: 20px;
      padding: 24px;
      text-align: center;
    }

    .summary-box h2 {
      color: #234aa5;
      font-size: 22px;
      margin-bottom: 10px;
    }

    .summary-table {
      margin: 16px auto;
      border-collapse: collapse;
      font-size: 14px;
    }

    .summary-table th {
      color: #666;
      font-weight: bold;
      padding: 6px 12px;
      border-bottom: 2px solid #234aa5;
    }

    .summary-table td {
      padding: 6px 12px;
      font-family: 'Courier New', monospace;
      color: #234aa5;
      font-weight: bold;
      border-bottom: 1px solid #e0e0e0;
    }

    .binary-result {
      font-family: 'Courier New', monospace;
      font-size: 13px;
      color: #234aa5;
      word-break: break-all;
      line-height: 2;
      background: white;
      border: 2px solid #234aa5;
      border-radius: 12px;
      padding: 12px;
      margin-top: 12px;
    }

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

    .hidden { display: none; }

    @media (max-width: 600px) {
      .game-card { padding: 20px 14px; }
      .title { font-size: 22px; }
      .encode-letter { font-size: 48px; }
      .bit-input { width: 32px; height: 32px; font-size: 15px; }
    }



/* BINARY_NAMES_FIRST_BACK_BUTTON_V1_START */


/* ==========================================================
   FIRST SCREEN — BACK TO CHAPTER

   Compact warm-orange pill matching the standardized
   activity navigation style.
========================================================== */


.binary-first-back-row {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    box-sizing:
        border-box;

    margin:
        4px auto 0;

    padding:
        0 8px;
}


.binary-first-back-btn {

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        max-content !important;

    min-height:
        0 !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        7px !important;


    margin:
        0 !important;

    padding:
        10px 20px !important;


    box-sizing:
        border-box !important;


    border:
        0 !important;

    border-radius:
        999px !important;


    background:
        linear-gradient(
            135deg,
            #f6ba63 0%,
            #eea64d 100%
        ) !important;


    color:
        #063c78 !important;


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

    font-size:
        14px !important;

    line-height:
        1.2 !important;

    font-weight:
        800 !important;

    letter-spacing:
        0 !important;


    text-align:
        center !important;

    text-decoration:
        none !important;

    white-space:
        nowrap !important;


    box-shadow:
        0 5px 12px
        rgba(
            126,
            82,
            22,
            .16
        ) !important;


    cursor:
        pointer !important;


    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease !important;
}


.binary-first-back-arrow {

    flex:
        0 0 auto;

    color:
        #063c78;

    font-size:
        15px;

    line-height:
        1;

    font-weight:
        900;
}


.binary-first-back-btn:hover {

    color:
        #063c78 !important;

    text-decoration:
        none !important;

    background:
        linear-gradient(
            135deg,
            #ffc974 0%,
            #f2ad53 100%
        ) !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 15px
        rgba(
            126,
            82,
            22,
            .20
        ) !important;
}


.binary-first-back-btn:active {

    transform:
        translateY(0);

    box-shadow:
        0 3px 8px
        rgba(
            126,
            82,
            22,
            .15
        ) !important;
}


.binary-first-back-btn:focus-visible {

    outline:
        3px solid
        rgba(
            35,
            74,
            165,
            .28
        );

    outline-offset:
        3px;
}


/* Slightly tighter first screen so the button stays
   comfortably inside the white card. */

#stepLang .lang-row {

    margin-bottom:
        16px !important;
}


@media (
    max-width: 600px
) {

    .binary-first-back-row {

        justify-content:
            center;

        padding:
            0;
    }


    .binary-first-back-btn {

        font-size:
            13px !important;

        padding:
            9px 16px !important;
    }

}


/* BINARY_NAMES_FIRST_BACK_BUTTON_V1_END */



/* BINARY_NAMES_NAME_BACK_V2_START */


/* ==========================================================
   NAME ENTRY SCREEN
   STANDARD BACK TO CHAPTER BUTTON

   Shared by both:
   - English
   - Kyrgyz
========================================================== */


.binary-name-back-row {

    width:
        100% !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    box-sizing:
        border-box !important;

    margin:
        8px auto 0 !important;

    padding:
        0 8px !important;
}


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

.binary-name-back-btn {

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        max-content !important;

    min-height:
        0 !important;

    height:
        auto !important;


    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        7px !important;


    margin:
        0 !important;


    padding:
        10px 20px !important;


    box-sizing:
        border-box !important;


    border:
        0 !important;

    border-radius:
        999px !important;


    background:
        linear-gradient(
            135deg,
            #f6ba63 0%,
            #eea64d 100%
        ) !important;


    color:
        #063c78 !important;


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

    font-size:
        14px !important;

    line-height:
        1.2 !important;

    font-weight:
        800 !important;

    letter-spacing:
        0 !important;


    text-align:
        center !important;

    text-decoration:
        none !important;

    white-space:
        nowrap !important;


    box-shadow:
        0 5px 12px
        rgba(
            126,
            82,
            22,
            .16
        ) !important;


    cursor:
        pointer !important;


    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease !important;
}


/* ----------------------------------------------------------
   ARROW
---------------------------------------------------------- */

.binary-name-back-arrow {

    flex:
        0 0 auto !important;

    color:
        #063c78 !important;

    font-size:
        15px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;
}


/* ----------------------------------------------------------
   HOVER
---------------------------------------------------------- */

.binary-name-back-btn:hover {

    color:
        #063c78 !important;

    text-decoration:
        none !important;

    background:
        linear-gradient(
            135deg,
            #ffc974 0%,
            #f2ad53 100%
        ) !important;

    transform:
        translateY(-1px) !important;

    box-shadow:
        0 7px 15px
        rgba(
            126,
            82,
            22,
            .20
        ) !important;
}


/* ----------------------------------------------------------
   ACTIVE
---------------------------------------------------------- */

.binary-name-back-btn:active {

    transform:
        translateY(0) !important;

    box-shadow:
        0 3px 8px
        rgba(
            126,
            82,
            22,
            .15
        ) !important;
}


/* ----------------------------------------------------------
   KEYBOARD ACCESSIBILITY
---------------------------------------------------------- */

.binary-name-back-btn:focus-visible {

    outline:
        3px solid
        rgba(
            35,
            74,
            165,
            .28
        ) !important;

    outline-offset:
        3px !important;
}


/* ----------------------------------------------------------
   REDUCE LARGE EMPTY GAP UNDER START BUTTON
---------------------------------------------------------- */

#stepName .name-section {

    margin-bottom:
        8px !important;
}


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

@media (
    max-width: 600px
) {

    .binary-name-back-row {

        justify-content:
            center !important;

        padding:
            0 !important;
    }


    .binary-name-back-btn {

        padding:
            9px 16px !important;

        font-size:
            13px !important;
    }

}


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

/* BINARY_MATCH_ACTIVITY1_TYPOGRAPHY_V1_START */


/* ==========================================================
   BINARY ACTIVITY
   TYPOGRAPHY MATCHED TO CHAPTER I — ACTIVITY 1
   ========================================================== */


/* ----------------------------------------------------------
   1. BASE NORMAL TEXT
   ---------------------------------------------------------- */

html,
body,
.game-page,
.game-card {

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

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}


/* ----------------------------------------------------------
   2. NORMAL INTERFACE ELEMENTS
   ---------------------------------------------------------- */

.game-card h1,
.game-card h2,
.game-card h3,
.game-card p,
.game-card span,
.game-card label,
.game-card a,
.game-card button,
.game-card strong,
.game-card small,

.title,
.subtitle,

.lang-btn,
.lang-sub,

.name-section label,
.name-hint,

.start-btn,

.score-pill,

.char-tab,

.encode-letter,
.encode-info-row,
.encode-info-row .lbl,

.step-hint,

.check-btn,
.reveal-btn,
.next-btn,

.feedback,

.summary-box,
.summary-box h2,
.summary-table th {

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


/* ----------------------------------------------------------
   3. KYRGYZ / NORMAL TEXT RENDERING
   Activity 1 character treatment.
   ---------------------------------------------------------- */

.title,
.subtitle,

.lang-btn,

.name-section label,

.step-hint,

.feedback,

.summary-box h2,
.summary-table th {

    font-kerning:
        normal !important;

    font-variant-ligatures:
        common-ligatures !important;

    letter-spacing:
        .002em !important;

    word-spacing:
        .02em !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ----------------------------------------------------------
   4. MAIN TITLE

   Activity 1's heading appearance is normal bold,
   not extra-heavy.
   ---------------------------------------------------------- */

.title {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   5. NORMAL BOLD INTERFACE TEXT

   Replace the unnecessarily heavy appearance with
   Activity 1's standard bold weight.
   ---------------------------------------------------------- */

.lang-btn,
.name-section label,
.start-btn,
.score-pill,
.char-tab,

.encode-letter,
.encode-info-row .lbl,

.check-btn,
.next-btn,

.feedback,

.summary-table th {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   6. ORDINARY PARAGRAPH / HELP TEXT

   Preserve existing sizes and colours.
   ---------------------------------------------------------- */

.subtitle,
.name-hint,
.step-hint,
.encode-info-row {

    font-weight:
        400 !important;
}


/* ----------------------------------------------------------
   7. BACK TO CHAPTER
   EXACT TYPOGRAPHY REFERENCE FROM ACTIVITY 1

       Arial / Helvetica
       14px
       700
       line-height 1.15

   Position, shape, colour and gradients remain unchanged.
   ---------------------------------------------------------- */

.back-btn,

.binary-first-back-btn,
.binary-first-back-btn *,

.binary-name-back-btn,
.binary-name-back-btn * {

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;
}


/* ----------------------------------------------------------
   8. BACK ARROWS

   Existing CSS used 900.
   Match Activity 1's normal bold treatment instead.
   ---------------------------------------------------------- */

.binary-first-back-arrow,
.binary-name-back-arrow {

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;
}


/* ==========================================================
   9. PROTECT BINARY / TECHNICAL TYPOGRAPHY

   These are NOT ordinary Kyrgyz/English text.
   Their monospace appearance is intentional.
   ========================================================== */

.encode-info-row .val,

.bit-pos,
.bit-input,

.summary-table td,

.binary-result,

code,
pre,
kbd,
samp {

    font-family:
        "Courier New",
        Courier,
        monospace !important;
}


/* ----------------------------------------------------------
   Binary values should retain their existing strong,
   technical appearance.
   ---------------------------------------------------------- */

.encode-info-row .val,
.bit-input,
.summary-table td {

    font-weight:
        700 !important;
}


/* BINARY_MATCH_ACTIVITY1_TYPOGRAPHY_V1_END */