:root {
    --navy: #123d73;
    --blue: #2467a8;
    --sky: #dff3ff;
    --ice: #f4fbff;
    --line: #cbddec;
    --text: #36536e;
    --muted: #72879a;

    --teal: #138f88;
    --teal-soft: #e9f8f6;

    --gold: #dca922;
    --gold-soft: #fff7dc;

    --red: #d84246;
    --red-soft: #fff0f1;

    --green: #24865c;
    --green-soft: #ebf8f1;

    --white: #ffffff;

    --shadow:
        0 18px 42px
        rgba(23, 58, 91, 0.13);
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    min-height: 100%;
}


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

    color: var(--text);

    background:
        linear-gradient(
            180deg,
            #edf8fd 0%,
            #f8fbfd 58%,
            #eef4f7 100%
        );
}


button,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


.hidden {
    display: none !important;
}


/* =========================================================
   SHELL
========================================================= */

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

    padding:
        18px clamp(18px, 3vw, 46px) 28px;
}


.top-header {
    max-width: 1480px;

    margin:
        0 auto 18px;

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 22px;
}


.title-group {
    display: flex;

    align-items: center;

    gap: 13px;
}


.mountain-mark {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    color: var(--white);

    background:
        linear-gradient(
            145deg,
            var(--blue),
            var(--navy)
        );

    font-size: 23px;

    box-shadow:
        0 8px 20px
        rgba(25, 70, 110, 0.16);
}


.title-group h1 {
    margin: 0;

    color: var(--navy);

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

    font-size:
        clamp(22px, 2.2vw, 31px);

    line-height: 1.05;
}


.title-group p {
    margin: 4px 0 0;

    color: var(--muted);

    font-size: 13px;
}


.summit-label {
    padding:
        9px 15px;

    border:
        1px solid #bed5e6;

    border-radius: 13px;

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

    text-align: right;
}


.summit-label strong,
.summit-label span {
    display: block;
}


.summit-label strong {
    color: var(--navy);

    font-size: 13px;
}


.summit-label span {
    margin-top: 2px;

    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   SCREENS
========================================================= */

.screen {
    display: none;

    max-width: 1480px;

    margin: auto;
}


.screen.active {
    display: block;
}


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

.intro-layout {
    min-height:
        calc(100vh - 115px);

    display: grid;

    grid-template-columns:
        minmax(420px, .88fr)
        minmax(520px, 1.12fr);

    gap: 26px;

    align-items: stretch;
}


.intro-card {
    padding:
        clamp(28px, 4vw, 52px);

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

    border-radius: 28px;

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

    box-shadow: var(--shadow);
}


.eyebrow {
    display: inline-block;

    margin-bottom: 11px;

    color: var(--teal);

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

    letter-spacing: 1.2px;
}


.intro-card h2,
.summit-card h2 {
    margin:
        0 0 6px;

    color: var(--navy);

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

    font-size:
        clamp(29px, 3.2vw, 45px);

    line-height: 1.05;
}


.intro-en,
.summit-en {
    margin:
        0 0 24px;

    color: var(--muted);

    font-size: 15px;
}


.intro-card > p:not(.intro-en) {
    font-size: 16px;

    line-height: 1.6;
}


.secondary-copy {
    color: #61798f;

    font-size: 14px !important;
}


.intro-features {
    display: grid;

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

    gap: 10px;

    margin:
        24px 0;
}


.intro-features div {
    padding:
        14px 10px;

    border:
        1px solid #d2e1ec;

    border-radius: 16px;

    background: #f8fbfd;

    text-align: center;
}


.intro-features strong,
.intro-features span {
    display: block;
}


.intro-features strong {
    color: var(--navy);

    font-size: 20px;
}


.intro-features span {
    margin-top: 3px;

    color: var(--muted);

    font-size: 11px;
}


.intro-rules {
    margin:
        8px 0 25px;

    padding:
        14px 18px;

    border-left:
        4px solid var(--gold);

    border-radius:
        0 12px 12px 0;

    background: var(--gold-soft);
}


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

    font-size: 12px;

    line-height: 1.45;
}


.primary-btn {
    min-width: 210px;

    padding:
        11px 20px;

    border: 0;

    border-radius: 14px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #176d9d,
            #124d80
        );

    box-shadow:
        0 8px 19px
        rgba(20, 76, 122, .2);
}


.primary-btn strong,
.primary-btn span {
    display: block;
}


.primary-btn strong {
    font-size: 13px;
}


.primary-btn span {
    margin-top: 2px;

    font-size: 10px;

    opacity: .82;
}


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


.primary-btn.compact {
    min-width: 154px;
}


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

.intro-mountain {
    position: relative;

    min-height: 600px;

    overflow: hidden;

    border:
        1px solid #bdd5e3;

    border-radius: 28px;

    background:
        linear-gradient(
            180deg,
            #ccecff 0%,
            #e8f5fa 42%,
            #d9e8ed 100%
        );

    box-shadow: var(--shadow);
}


.sun {
    position: absolute;

    top: 54px;
    right: 70px;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background:
        rgba(255, 231, 155, .88);

    box-shadow:
        0 0 60px
        rgba(255,226,137,.78);
}


.cloud {
    position: absolute;

    width: 115px;
    height: 24px;

    border-radius: 30px;

    background:
        rgba(255,255,255,.75);
}


.cloud::before,
.cloud::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    background: inherit;
}


.cloud::before {
    width: 42px;
    height: 42px;

    left: 18px;
    top: -20px;
}


.cloud::after {
    width: 52px;
    height: 52px;

    right: 17px;
    top: -27px;
}


.cloud-one {
    top: 110px;
    left: 12%;
}


.cloud-two {
    top: 170px;
    right: 9%;

    transform: scale(.72);
}


.mountain {
    position: absolute;

    left: 50%;

    width: 0;
    height: 0;

    transform: translateX(-50%);

    border-left:
        390px solid transparent;

    border-right:
        390px solid transparent;

    border-bottom:
        520px solid #718ca0;
}


.mountain-back {
    left: 26%;
    bottom: -55px;

    opacity: .43;

    transform:
        translateX(-50%)
        scale(.75);
}


.mountain-middle {
    left: 72%;
    bottom: -115px;

    opacity: .6;

    transform:
        translateX(-50%)
        scale(.86);
}


.mountain-front {
    bottom: -62px;

    border-bottom-color:
        #526f83;
}


.snow {
    position: absolute;

    left: 50%;

    width: 0;
    height: 0;

    transform: translateX(-50%);

    border-left:
        95px solid transparent;

    border-right:
        95px solid transparent;

    border-bottom:
        128px solid #f9fdff;
}


.snow-one {
    bottom: 337px;
}


.snow-two {
    bottom: 295px;

    transform:
        translateX(-36%)
        rotate(9deg)
        scale(.56);

    opacity: .85;
}


.summit-flag {
    position: absolute;

    left: 50%;
    bottom: 493px;

    transform: translateX(13px);
}


.flag-pole {
    display: block;

    width: 3px;
    height: 50px;

    background: #374d5f;
}


.flag-cloth {
    position: absolute;

    left: 3px;
    top: 2px;

    width: 48px;
    height: 27px;

    border-radius:
        2px 4px 4px 2px;

    background: #d83e45;
}


.intro-altitude {
    position: absolute;

    left: 50%;
    bottom: 538px;

    transform: translateX(-50%);

    padding:
        4px 9px;

    border-radius: 12px;

    color: var(--navy);

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

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


/* =========================================================
   GAME DASHBOARD
========================================================= */

.dashboard {
    min-height:
        calc(100vh - 118px);

    display: grid;

    grid-template-columns:
        minmax(320px, .78fr)
        minmax(540px, 1.22fr);

    gap: 20px;
}


.mountain-panel,
.challenge-panel {
    border:
        1px solid var(--line);

    border-radius: 24px;

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

    box-shadow:
        0 13px 34px
        rgba(25, 61, 95, .09);
}


.mountain-panel {
    padding: 19px;
}


.mountain-heading {
    display: flex;

    justify-content: space-between;
    align-items: end;
}


.small-label {
    display: block;

    margin-bottom: 3px;

    color: var(--muted);

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

    letter-spacing: .8px;
}


#altitude-value {
    color: var(--navy);

    font-size: 27px;
}


.altitude-target {
    padding-bottom: 3px;

    color: var(--muted);

    font-size: 12px;
}


.mountain-scene {
    position: relative;

    height:
        min(53vh, 510px);

    min-height: 370px;

    margin:
        13px 0;

    overflow: hidden;

    border-radius: 19px;

    background:
        linear-gradient(
            180deg,
            #bee7fa 0%,
            #e9f5f9 52%,
            #cbdde3 100%
        );
}


.scene-sky-glow {
    position: absolute;

    top: -65px;
    right: -70px;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background:
        rgba(255, 241, 188, .53);

    filter: blur(4px);
}


.scene-mountain {
    position: absolute;

    left: 50%;
    bottom: -10%;

    width: 0;
    height: 0;

    transform: translateX(-50%);

    border-left:
        245px solid transparent;

    border-right:
        245px solid transparent;

    border-bottom:
        440px solid #698699;
}


.scene-back {
    left: 18%;

    transform:
        translateX(-50%)
        scale(.72);

    opacity: .38;
}


.scene-mid {
    left: 83%;

    transform:
        translateX(-50%)
        scale(.8);

    opacity: .5;
}


.scene-main {
    border-bottom-color:
        #536f81;
}


.peak-flag {
    position: absolute;

    left: 51%;
    top: 6%;

    width: 3px;
    height: 42px;

    background: #263c4b;
}


.peak-flag span {
    position: absolute;

    left: 3px;
    top: 0;

    width: 38px;
    height: 22px;

    border-radius: 2px;

    background: var(--red);
}


.altitude-line {
    position: absolute;

    right: 15px;
    top: 7%;
    bottom: 7%;

    width: 6px;

    border-radius: 10px;

    background:
        rgba(255,255,255,.6);
}


.altitude-fill {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            180deg,
            var(--gold),
            var(--teal)
        );

    transition:
        height .65s ease;
}


.climber {
    position: absolute;

    z-index: 15;

    left: 48%;
    bottom: 5%;

    width: 32px;
    height: 50px;

    transition:
        bottom .8s cubic-bezier(.2,.8,.2,1),
        left .8s ease;
}


.climber-head {
    position: absolute;

    left: 10px;
    top: 0;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #e8b28e;
}


.climber-body {
    position: absolute;

    left: 7px;
    top: 12px;

    width: 18px;
    height: 26px;

    border-radius: 6px;

    background: #173f73;
}


.climber-pack {
    position: absolute;

    left: 1px;
    top: 14px;

    width: 10px;
    height: 20px;

    border-radius: 5px;

    background: var(--gold);
}


.camp-markers {
    position: absolute;

    inset: 0;
}


.camp-marker {
    position: absolute;

    left: 10px;

    display: flex;

    align-items: center;

    gap: 6px;

    color:
        rgba(34,68,91,.72);

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


.camp-marker::before {
    content: "";

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: white;

    border:
        2px solid var(--blue);
}


.camp-status {
    padding:
        11px 13px;

    border:
        1px solid #d2e1eb;

    border-radius: 13px;

    background: #f8fbfd;
}


.camp-status span,
.camp-status strong,
.camp-status small {
    display: block;
}


.camp-status span {
    color: var(--muted);

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.camp-status strong {
    margin-top: 3px;

    color: var(--navy);

    font-size: 15px;
}


.camp-status small {
    margin-top: 2px;

    color: #708498;
}


.mini-stats {
    display: grid;

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

    gap: 8px;

    margin-top: 10px;
}


.mini-stats div {
    padding: 8px;

    border:
        1px solid #d8e4ed;

    border-radius: 11px;

    text-align: center;
}


.mini-stats span,
.mini-stats strong {
    display: block;
}


.mini-stats span {
    color: var(--muted);

    font-size: 9px;
}


.mini-stats strong {
    margin-top: 2px;

    color: var(--navy);
}


/* =========================================================
   CHALLENGE PANEL
========================================================= */

.challenge-panel {
    padding:
        20px 22px;

    display: flex;

    flex-direction: column;
}


.challenge-topline {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-bottom: 12px;
}


.difficulty-badge,
.skill-badge {
    display: inline-block;

    padding:
        5px 9px;

    border-radius: 20px;

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

    letter-spacing: .45px;
}


.difficulty-badge {
    color: #8b6514;

    background: var(--gold-soft);
}


.skill-badge {
    color: #147169;

    background: var(--teal-soft);
}


.question-number {
    color: var(--muted);

    font-size: 11px;
}


.question-number strong {
    color: var(--navy);
}


.challenge-card {
    flex: 1;

    padding:
        clamp(18px, 2.4vw, 29px);

    border:
        1px solid #cfdeea;

    border-radius: 20px;

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


.scenario {
    margin:
        0 0 13px;

    color: var(--teal);

    font-size: 12px;
    font-weight: 650;
}


.challenge-card h2 {
    margin:
        9px 0 5px;

    color: var(--navy);

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

    font-size:
        clamp(20px, 2vw, 27px);

    line-height: 1.25;
}


.question-en {
    margin:
        0 0 19px;

    color: var(--muted);

    font-size: 12px;
}


.dataset-wrap {
    overflow-x: auto;

    margin:
        9px 0 18px;
}


.dataset-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 12px;
}


.dataset-table th,
.dataset-table td {
    padding:
        7px 10px;

    border:
        1px solid #ccdae5;

    text-align: left;
}


.dataset-table th {
    color: var(--navy);

    background: #eef6fb;
}


.answer-area {
    margin-top: 15px;
}


.answer-input {
    width: 100%;

    padding:
        12px 14px;

    border:
        2px solid #c4d8e7;

    border-radius: 12px;

    outline: none;

    color: var(--navy);

    background: white;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size: 15px;
}


.answer-input:focus {
    border-color: var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(47,114,164,.1);
}


.options-grid {
    display: grid;

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

    gap: 9px;
}


.option-btn {
    padding:
        11px 13px;

    border:
        1px solid #c7d8e5;

    border-radius: 12px;

    color: var(--text);

    background: white;

    text-align: left;

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


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

    border-color: var(--blue);
}


.option-btn.selected {
    border-color: var(--blue);

    background: #ecf6fd;

    color: var(--navy);

    font-weight: 700;
}


.feedback {
    min-height: 44px;

    margin-top: 17px;

    padding:
        0;

    border-radius: 11px;

    font-size: 13px;

    line-height: 1.4;
}


.feedback.success,
.feedback.error,
.feedback.info {
    padding:
        10px 13px;
}


.feedback.success {
    color: #196443;

    background: var(--green-soft);
}


.feedback.error {
    color: #9a3037;

    background: var(--red-soft);
}


.feedback.info {
    color: #775c17;

    background: var(--gold-soft);
}


.explanation {
    margin-top: 11px;

    padding:
        11px 13px;

    border:
        1px solid #d5e1e8;

    border-radius: 11px;

    background: #f8fbfd;

    color: #536e82;

    font-size: 12px;

    line-height: 1.5;
}


.challenge-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 11px;
}


.tool-btn {
    min-width: 115px;

    padding:
        8px 13px;

    border:
        1px solid #c8d9e4;

    border-radius: 12px;

    color: var(--navy);

    background: white;
}


.tool-btn strong,
.tool-btn span {
    display: block;
}


.tool-btn strong {
    font-size: 11px;
}


.tool-btn span {
    margin-top: 1px;

    color: var(--muted);

    font-size: 9px;
}


.progress-strip {
    margin-top: 12px;

    padding:
        10px 13px;

    border-radius: 12px;

    background: #f5f9fb;
}


.progress-strip > div:first-child {
    display: flex;

    justify-content: space-between;

    color: var(--muted);

    font-size: 10px;
}


.progress-strip strong {
    color: var(--navy);
}


.progress-track {
    height: 6px;

    margin-top: 7px;

    overflow: hidden;

    border-radius: 10px;

    background: #dce8ee;
}


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

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--teal),
            var(--gold)
        );

    transition:
        width .6s ease;
}


/* =========================================================
   SUMMIT
========================================================= */

.summit-card {
    max-width: 760px;

    margin:
        70px auto;

    padding:
        48px;

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

    border-radius: 27px;

    background: white;

    box-shadow: var(--shadow);

    text-align: center;
}


.summit-icon {
    width: 72px;
    height: 72px;

    margin:
        0 auto 18px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            145deg,
            var(--gold),
            #c38413
        );

    font-size: 34px;
}


.summit-stats {
    display: grid;

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

    gap: 10px;

    margin:
        27px 0;
}


.summit-stats div {
    padding:
        14px 8px;

    border:
        1px solid #d2e0e9;

    border-radius: 14px;

    background: #f8fbfd;
}


.summit-stats span,
.summit-stats strong {
    display: block;
}


.summit-stats span {
    color: var(--muted);

    font-size: 10px;
}


.summit-stats strong {
    margin-top: 4px;

    color: var(--navy);

    font-size: 18px;
}


.reset-btn {
    display: block;

    margin:
        13px auto 0;

    border: 0;

    color: var(--muted);

    background: transparent;

    font-size: 11px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .intro-layout,
    .dashboard {
        grid-template-columns: 1fr;
    }

    .intro-mountain {
        min-height: 480px;
    }

    .mountain-scene {
        height: 420px;
    }
}


@media (max-width: 650px) {

    .game-shell {
        padding: 12px;
    }

    .top-header {
        align-items: flex-start;
    }

    .summit-label {
        display: none;
    }

    .intro-card {
        padding: 24px 19px;
    }

    .intro-features,
    .summit-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }

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

    .challenge-panel {
        padding: 13px;
    }

    .challenge-actions {
        justify-content: stretch;
    }

    .challenge-actions button {
        flex: 1 1 42%;
    }
}



/* =========================================================
   JENGISH_REAL_PEAK_FULLSCREEN_V2

   - Real Jengish Chokusu photograph
   - Intro fits viewport
   - Gameplay fits viewport
   - No document scrolling
   - Back to Chapter button
========================================================= */


/* ---------------------------------------------------------
   COMPLETE VIEWPORT CONTROL
--------------------------------------------------------- */

html,
body {
    width: 100%;
    height: 100%;

    overflow: hidden;
}


body {
    min-height: 0;
}


.game-shell {
    width: 100%;
    height: 100vh;
    min-height: 0;

    display: flex;
    flex-direction: column;

    padding:
        10px clamp(14px, 2vw, 30px) 12px;

    overflow: hidden;
}


/* ---------------------------------------------------------
   COMPACT HEADER
--------------------------------------------------------- */

.top-header {
    flex:
        0 0 auto;

    width: 100%;
    max-width: 1480px;

    min-height: 54px;

    margin:
        0 auto 8px;

    gap: 12px;
}


.mountain-mark {
    width: 42px;
    height: 42px;

    border-radius: 13px;

    font-size: 20px;
}


.title-group {
    gap: 11px;
}


.title-group h1 {
    font-size:
        clamp(21px, 1.8vw, 28px);
}


.title-group p {
    margin-top: 2px;

    font-size: 11px;
}


.summit-label {
    padding:
        7px 12px;

    border-radius: 11px;
}


.summit-label strong {
    font-size: 11px;
}


.summit-label span {
    font-size: 9px;
}


/* ---------------------------------------------------------
   BACK TO CHAPTER
--------------------------------------------------------- */

.back-to-chapter-btn {
    margin-left: auto;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 40px;

    padding:
        6px 11px;

    border:
        1px solid #bfd5e6;

    border-radius: 11px;

    color: var(--navy);

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

    text-decoration: none;

    box-shadow:
        0 4px 12px
        rgba(26, 67, 105, 0.07);

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


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

    border-color:
        var(--blue);

    box-shadow:
        0 6px 15px
        rgba(26, 67, 105, 0.12);
}


.back-arrow {
    color:
        var(--blue);

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


.back-copy {
    display: block;
}


.back-copy strong,
.back-copy small {
    display: block;
}


.back-copy strong {
    color:
        var(--navy);

    font-size: 10px;
    line-height: 1.1;
}


.back-copy small {
    margin-top: 2px;

    color:
        var(--muted);

    font-size: 8px;
    line-height: 1.1;
}


/* ---------------------------------------------------------
   EVERY ACTIVE SCREEN USES REMAINING HEIGHT
--------------------------------------------------------- */

.screen {
    flex:
        1 1 auto;

    width: 100%;
    max-width: 1480px;

    min-height: 0;

    overflow: hidden;
}


.screen.active {
    min-height: 0;
}


/* =========================================================
   INTRO — FULL SCREEN
========================================================= */

.intro-layout {
    width: 100%;
    height: 100%;

    min-height: 0;

    grid-template-columns:
        minmax(400px, 0.83fr)
        minmax(500px, 1.17fr);

    gap: 16px;

    align-items: stretch;
}


.intro-card {
    height: 100%;
    min-height: 0;

    overflow: hidden;

    padding:
        clamp(20px, 2.3vw, 34px);

    border-radius: 22px;
}


.intro-card .eyebrow {
    margin-bottom: 7px;

    font-size: 9px;
}


.intro-card h2 {
    margin:
        0 0 4px;

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

    line-height: 1.04;
}


.intro-en {
    margin:
        0 0 15px;

    font-size: 12px;
}


.intro-card > p:not(.intro-en) {
    margin:
        8px 0;

    font-size:
        clamp(12px, 1vw, 14px);

    line-height: 1.42;
}


.secondary-copy {
    font-size:
        12px !important;

    line-height:
        1.4 !important;
}


.intro-features {
    gap: 8px;

    margin:
        15px 0;
}


.intro-features div {
    padding:
        10px 7px;

    border-radius: 13px;
}


.intro-features strong {
    font-size: 17px;
}


.intro-features span {
    font-size: 9px;
}


.intro-rules {
    margin:
        6px 0 15px;

    padding:
        9px 13px;

    border-left-width: 3px;

    border-radius:
        0 10px 10px 0;
}


.intro-rules p {
    margin:
        4px 0;

    font-size: 10px;

    line-height: 1.35;
}


.intro-card > .primary-btn {
    min-width: 190px;

    padding:
        9px 18px;
}


/* =========================================================
   REAL JENGISH CHOKUSU — INTRO
========================================================= */

.intro-mountain {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 0;

    border-radius: 22px;

    background-image:
        linear-gradient(
            180deg,
            rgba(12, 42, 70, 0.04) 0%,
            rgba(14, 44, 70, 0.07) 45%,
            rgba(10, 31, 52, 0.28) 100%
        ),
        url("/static/reader/activities/chapter3_story2/images/jengish_chokusu_real.5b13277f4579.jpg");

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;
}


/*
   Hide the old geometric illustration.
*/

.intro-mountain .sun,
.intro-mountain .cloud,
.intro-mountain > .mountain,
.intro-mountain > .snow {
    display:
        none !important;
}


/*
   Keep our summit flag and altitude label,
   but make them more elegant over the photo.
*/

.intro-mountain .summit-flag {
    left: auto;
    right: 7%;
    top: 7%;
    bottom: auto;

    transform: none;
}


.intro-mountain .intro-altitude {
    left: auto;
    right: 7%;
    top: calc(7% + 54px);
    bottom: auto;

    transform: none;

    padding:
        5px 9px;

    border:
        1px solid
        rgba(255,255,255,.5);

    color:
        #ffffff;

    background:
        rgba(14, 44, 70, .68);

    backdrop-filter:
        blur(4px);

    box-shadow:
        0 4px 15px
        rgba(0,0,0,.12);
}


/* =========================================================
   PHOTO CREDIT
========================================================= */

.mountain-photo-credit {
    position: absolute;

    z-index: 30;

    left: 11px;
    bottom: 9px;

    max-width:
        calc(100% - 22px);

    padding:
        4px 7px;

    border-radius: 7px;

    color:
        rgba(255,255,255,.88);

    background:
        rgba(8, 25, 40, .58);

    font-size: 7px;
    line-height: 1.2;

    backdrop-filter:
        blur(3px);
}


.mountain-photo-credit a {
    color:
        #ffffff;

    text-decoration:
        none;
}


.mountain-photo-credit a:hover {
    text-decoration:
        underline;
}


/* =========================================================
   GAME SCREEN — FULL HEIGHT
========================================================= */

.dashboard {
    width: 100%;
    height: 100%;

    min-height: 0;

    grid-template-columns:
        minmax(300px, .72fr)
        minmax(500px, 1.28fr);

    gap: 14px;
}


.mountain-panel,
.challenge-panel {
    height: 100%;
    min-height: 0;

    overflow: hidden;

    border-radius: 20px;
}


/* ---------------------------------------------------------
   LEFT MOUNTAIN PANEL
--------------------------------------------------------- */

.mountain-panel {
    padding: 12px;

    display: flex;
    flex-direction: column;
}


.mountain-heading {
    flex:
        0 0 auto;
}


#altitude-value {
    font-size: 23px;
}


.mountain-scene {
    flex:
        1 1 auto;

    width: 100%;
    height: auto;
    min-height: 0;

    margin:
        8px 0;

    border-radius: 15px;

    background-image:
        linear-gradient(
            180deg,
            rgba(9, 32, 52, .08) 0%,
            rgba(9, 32, 52, .10) 48%,
            rgba(8, 27, 45, .32) 100%
        ),
        url("/static/reader/activities/chapter3_story2/images/jengish_chokusu_real.5b13277f4579.jpg");

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;
}


/*
   Remove old geometric mountains from game.
*/

.mountain-scene .scene-sky-glow,
.mountain-scene .scene-mountain {
    display:
        none !important;
}


/*
   Flag remains at the summit area.
*/

.peak-flag {
    z-index: 11;

    left: 51%;
    top: 5%;
}


/*
   Camp labels need stronger contrast
   against a real photograph.
*/

.camp-marker {
    z-index: 12;

    left: 9px;

    padding:
        3px 6px;

    border-radius: 7px;

    color:
        #153d61;

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

    box-shadow:
        0 2px 7px
        rgba(0,0,0,.06);

    backdrop-filter:
        blur(3px);

    font-size: 8px;
}


.camp-marker::before {
    width: 6px;
    height: 6px;

    flex:
        0 0 6px;
}


.climber {
    z-index: 20;
}


.altitude-line {
    z-index: 14;

    right: 10px;

    width: 5px;

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

    box-shadow:
        0 2px 6px
        rgba(0,0,0,.10);
}


.game-photo-credit {
    left: 8px;
    bottom: 6px;

    font-size: 6px;
}


/* ---------------------------------------------------------
   COMPACT CAMP / STATS
--------------------------------------------------------- */

.camp-status {
    flex:
        0 0 auto;

    padding:
        7px 10px;

    border-radius: 10px;
}


.camp-status span {
    font-size: 7px;
}


.camp-status strong {
    margin-top: 1px;

    font-size: 13px;
}


.camp-status small {
    margin-top: 1px;

    font-size: 9px;
}


.mini-stats {
    flex:
        0 0 auto;

    gap: 6px;

    margin-top: 6px;
}


.mini-stats div {
    padding:
        5px;

    border-radius: 9px;
}


.mini-stats span {
    font-size: 7px;
}


.mini-stats strong {
    font-size: 12px;
}


/* =========================================================
   RIGHT CHALLENGE PANEL
========================================================= */

.challenge-panel {
    padding:
        12px 14px;
}


.challenge-topline {
    flex:
        0 0 auto;

    margin-bottom: 7px;
}


.difficulty-badge,
.skill-badge {
    padding:
        4px 8px;

    font-size: 8px;
}


.challenge-card {
    flex:
        1 1 auto;

    min-height: 0;

    overflow: hidden;

    padding:
        clamp(14px, 1.6vw, 22px);

    border-radius: 16px;
}


.scenario {
    margin:
        0 0 8px;

    font-size: 10px;
}


.challenge-card h2 {
    margin:
        6px 0 4px;

    font-size:
        clamp(18px, 1.65vw, 23px);

    line-height: 1.18;
}


.question-en {
    margin:
        0 0 10px;

    font-size: 10px;
}


.dataset-wrap {
    margin:
        5px 0 10px;
}


.dataset-table {
    font-size: 10px;
}


.dataset-table th,
.dataset-table td {
    padding:
        5px 7px;
}


.answer-area {
    margin-top: 9px;
}


.options-grid {
    gap: 6px;
}


.option-btn {
    padding:
        8px 11px;

    border-radius: 10px;

    font-size: 12px;
}


.answer-input {
    padding:
        9px 11px;

    border-radius: 10px;

    font-size: 13px;
}


.feedback {
    min-height: 30px;

    margin-top: 9px;

    font-size: 10px;
}


.feedback.success,
.feedback.error,
.feedback.info {
    padding:
        7px 10px;
}


.explanation {
    margin-top: 6px;

    padding:
        7px 10px;

    font-size: 9px;

    line-height: 1.35;
}


.challenge-actions {
    flex:
        0 0 auto;

    gap: 6px;

    margin-top: 7px;
}


.tool-btn {
    min-width: 105px;

    padding:
        6px 10px;

    border-radius: 10px;
}


.primary-btn.compact {
    min-width: 140px;

    padding:
        7px 12px;
}


.progress-strip {
    flex:
        0 0 auto;

    margin-top: 7px;

    padding:
        6px 10px;

    border-radius: 9px;
}


.progress-track {
    height: 5px;

    margin-top: 4px;
}


/* =========================================================
   SUMMIT SCREEN ALSO FITS
========================================================= */

#summit-screen {
    height: 100%;
}


.summit-card {
    max-width: 700px;

    max-height: 100%;

    margin:
        20px auto;

    padding:
        30px;

    overflow: hidden;
}


/* =========================================================
   SHORT LAPTOP SCREENS
========================================================= */

@media (max-height: 780px) {

    .game-shell {
        padding-top: 6px;
        padding-bottom: 7px;
    }

    .top-header {
        min-height: 46px;

        margin-bottom: 5px;
    }

    .mountain-mark {
        width: 36px;
        height: 36px;

        font-size: 17px;
    }

    .title-group h1 {
        font-size: 20px;
    }

    .title-group p {
        display: none;
    }

    .summit-label {
        padding:
            5px 9px;
    }

    .back-to-chapter-btn {
        min-height: 34px;

        padding:
            4px 8px;
    }

    .intro-card {
        padding:
            15px 20px;
    }

    .intro-card h2 {
        font-size:
            clamp(24px, 2.4vw, 32px);
    }

    .intro-en {
        margin-bottom: 9px;
    }

    .intro-card > p:not(.intro-en) {
        margin:
            5px 0;

        line-height: 1.3;
    }

    .intro-features {
        margin:
            9px 0;
    }

    .intro-features div {
        padding:
            7px 5px;
    }

    .intro-rules {
        margin:
            4px 0 9px;

        padding:
            6px 10px;
    }

    .intro-rules p {
        margin:
            2px 0;

        font-size: 9px;
    }

    .mountain-panel {
        padding: 9px;
    }

    .mountain-scene {
        margin:
            5px 0;
    }

    .challenge-panel {
        padding:
            9px 11px;
    }

    .challenge-card {
        padding:
            11px 15px;
    }

    .challenge-card h2 {
        font-size: 18px;
    }

    .option-btn {
        padding:
            6px 9px;
    }
}


/* =========================================================
   VERY SHORT SCREENS
========================================================= */

@media (max-height: 680px) {

    .summit-label {
        display: none;
    }

    .intro-card .secondary-copy {
        display: none;
    }

    .intro-features {
        margin:
            6px 0;
    }

    .challenge-card h2 {
        font-size: 16px;
    }

    .camp-status small {
        display: none;
    }
}


/* =========================================================
   NARROW DEVICES
   Scrolling is allowed only when the viewport becomes too
   narrow for a two-column desktop layout.
========================================================= */

@media (max-width: 900px) {

    html,
    body {
        height: auto;

        overflow-y: auto;
    }

    .game-shell {
        height: auto;
        min-height: 100vh;

        overflow: visible;
    }

    .screen {
        overflow: visible;
    }

    .intro-layout,
    .dashboard {
        height: auto;

        grid-template-columns: 1fr;
    }

    .intro-mountain {
        height: 430px;
    }

    .mountain-scene {
        height: 430px;
    }
}



/* =========================================================
   JENGISH_BILINGUAL_COMPACT_V1
========================================================= */


/*
   Bilingual instruction lines.
*/

.scenario,
.question-en,
.feedback,
.explanation {
    white-space: pre-line;
}


.scenario {
    line-height: 1.32;
}


.question-en {
    color: #72879a;

    line-height: 1.32;
}


.explanation {
    white-space: pre-line;
}


/*
   English secondary feedback.
*/

.feedback-en {
    display: inline-block;

    margin-top: 2px;

    color: inherit;

    opacity: .78;

    font-size: .92em;
}


/*
   Bilingual badges remain compact enough to fit one screen.
*/

.difficulty-badge,
.skill-badge {
    line-height: 1.15;
}


.skill-badge {
    max-width: 330px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    vertical-align: middle;
}


/* =========================================================
   CAMP MARKERS
========================================================= */

.camp-marker {
    display: grid;

    grid-template-columns:
        auto 1fr;

    grid-template-areas:
        "dot ky"
        "dot en";

    column-gap: 5px;

    row-gap: 0;

    align-items: center;

    min-width: 82px;
}


.camp-marker::before {
    grid-area: dot;
}


.camp-marker-ky {
    grid-area: ky;

    color: #123d73;

    font-size: 7px;

    font-weight: 800;

    line-height: 1.05;
}


.camp-marker-en {
    grid-area: en;

    color: #60798d;

    font-size: 6px;

    font-weight: 600;

    line-height: 1.05;
}


/*
   Keep current-level bilingual text compact.
*/

#camp-name {
    line-height: 1.15;
}


#camp-skill {
    line-height: 1.2;
}


/*
   Short laptop screens:
   protect the no-scroll design after adding bilingual text.
*/

@media (max-height: 780px) {

    .scenario {
        font-size: 9px;
    }

    .question-en {
        font-size: 9px;
    }

    .feedback {
        line-height: 1.25;
    }

    .explanation {
        line-height: 1.25;
    }

    .camp-marker {
        min-width: 72px;

        padding:
            2px 5px;
    }

    .camp-marker-ky {
        font-size: 6.5px;
    }

    .camp-marker-en {
        font-size: 5.5px;
    }
}



/* =========================================================
   JENGISH_PEAK_ALIGNMENT_V1

   Make the photographic mountain visually reach the summit
   flag while preserving the real altitude / camp system.
========================================================= */


/* ---------------------------------------------------------
   GAME MOUNTAIN

   The previous image used cover + center positioning.
   That left too much sky above the actual summit.

   We enlarge the photograph slightly and shift the visible
   composition upward so the mountain dominates the full
   climbing route.
--------------------------------------------------------- */

.mountain-scene {
    background-size:
        auto 116% !important;

    background-position:
        center 30% !important;

    background-repeat:
        no-repeat !important;

    background-color:
        #24394e;
}


/*
   Add a subtle dark gradient at the bottom so camp labels
   and the climber remain readable.
*/

.mountain-scene::after {
    content: "";

    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(5, 23, 42, 0.02) 0%,
            rgba(5, 23, 42, 0.00) 48%,
            rgba(5, 23, 42, 0.13) 78%,
            rgba(5, 23, 42, 0.31) 100%
        );
}


/* ---------------------------------------------------------
   SUMMIT FLAG

   Place the flag close to the visible photographic summit.
--------------------------------------------------------- */

.peak-flag {
    z-index: 18 !important;

    left: 51% !important;

    top: 3.5% !important;
}


/* ---------------------------------------------------------
   IMPORTANT GAME ELEMENTS ABOVE PHOTO OVERLAY
--------------------------------------------------------- */

.camp-markers {
    z-index: 12;
}


.camp-marker {
    z-index: 13;
}


.climber {
    z-index: 20;
}


.altitude-line {
    z-index: 20;
}


.mountain-photo-credit {
    z-index: 25;
}


/* ---------------------------------------------------------
   MAKE THE CLIMB PATH USE MORE OF THE IMAGE HEIGHT

   Existing JS maps altitude to 5% ... 87%.
   Moving the summit slightly higher visually gives a better
   relationship between the final climber position and flag.
--------------------------------------------------------- */

#climber {
    transform:
        translateX(-50%);
}


/* ---------------------------------------------------------
   INTRO PHOTO

   Match the stronger mountain composition there too.
--------------------------------------------------------- */

.intro-mountain {
    background-size:
        auto 118% !important;

    background-position:
        center 31% !important;
}


/* ---------------------------------------------------------
   SHORTER LAPTOP SCREENS
--------------------------------------------------------- */

@media (max-height: 780px) {

    .mountain-scene {
        background-size:
            auto 120% !important;

        background-position:
            center 30% !important;
    }

    .intro-mountain {
        background-size:
            auto 121% !important;

        background-position:
            center 30% !important;
    }
}



/* =========================================================
   JENGISH_SUMMIT_FLAG_ALIGNMENT_V2

   Align both flags with the visible summit of the
   photographic mountain.
========================================================= */


/* =========================================================
   INTRO PAGE FLAG
========================================================= */

.intro-mountain .summit-flag {
    /*
       Summit in the current photograph is approximately
       around 61% across and 25% from the top.
    */

    left: 62% !important;
    right: auto !important;

    top: 22% !important;
    bottom: auto !important;

    width: 48px;
    height: 58px;

    transform:
        translateX(-3px) !important;

    z-index: 25;
}


/*
   Pole should visually touch the summit.
*/

.intro-mountain .flag-pole {
    width: 3px !important;
    height: 50px !important;

    background:
        #263b4a !important;

    box-shadow:
        1px 1px 2px
        rgba(0,0,0,.25);
}


/*
   Slightly smaller, cleaner flag.
*/

.intro-mountain .flag-cloth {
    left: 3px !important;
    top: 0 !important;

    width: 43px !important;
    height: 24px !important;

    border-radius:
        2px 4px 4px 2px;

    background:
        #d83e45 !important;

    box-shadow:
        0 3px 7px
        rgba(0,0,0,.18);
}


/* =========================================================
   INTRO ALTITUDE BADGE
========================================================= */

.intro-mountain .intro-altitude {
    /*
       Position directly above and slightly left
       of the summit flag.
    */

    left: 62% !important;
    right: auto !important;

    top: 17.2% !important;
    bottom: auto !important;

    transform:
        translateX(-50%) !important;

    z-index: 26;
}


/* =========================================================
   GAME PAGE FLAG
========================================================= */

.mountain-scene .peak-flag {
    /*
       Same photographic summit point as the intro page,
       adapted to the smaller mountain panel.
    */

    left: 62% !important;
    right: auto !important;

    top: 22% !important;
    bottom: auto !important;

    width: 3px !important;
    height: 39px !important;

    transform:
        translateX(-2px);

    background:
        #273d4c !important;

    box-shadow:
        1px 1px 2px
        rgba(0,0,0,.24);

    z-index: 22 !important;
}


/*
   Red cloth on gameplay flag.
*/

.mountain-scene .peak-flag span {
    position: absolute;

    left: 3px !important;
    top: 0 !important;

    width: 34px !important;
    height: 20px !important;

    border-radius:
        2px 4px 4px 2px;

    background:
        #d83e45 !important;

    box-shadow:
        0 3px 6px
        rgba(0,0,0,.18);
}


/* =========================================================
   VERY IMPORTANT:
   Keep climbing objects above the image.
========================================================= */

.mountain-scene .climber {
    z-index: 30 !important;
}


.mountain-scene .camp-markers {
    z-index: 25 !important;
}


.mountain-scene .altitude-line {
    z-index: 28 !important;
}


/* =========================================================
   SHORTER LAPTOP SCREENS

   Maintain summit alignment when browser viewport
   becomes shorter.
========================================================= */

@media (max-height: 780px) {

    .intro-mountain .summit-flag {
        left: 62% !important;
        top: 22.5% !important;
    }

    .intro-mountain .intro-altitude {
        left: 62% !important;
        top: 17.5% !important;
    }

    .mountain-scene .peak-flag {
        left: 62% !important;
        top: 22.5% !important;
    }
}



/* =========================================================
   JENGISH_PRACTICE_SHEET_STYLE_V1
========================================================= */


/* ---------------------------------------------------------
   PRACTICE SHEET BUTTON
--------------------------------------------------------- */

.practice-sheet-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-width: 132px;

    padding:
        6px 10px;

    border:
        1px solid #bcdcd5;

    border-radius: 10px;

    color: #116c62;

    background:
        #edf9f6;

    text-decoration: none;

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


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

    border-color:
        #279b8c;

    background:
        #e5f7f3;

    box-shadow:
        0 5px 13px
        rgba(22, 121, 108, .10);
}


.practice-sheet-icon {
    display: grid;

    place-items: center;

    width: 23px;
    height: 23px;

    flex:
        0 0 23px;

    border-radius: 6px;

    color: #ffffff;

    background:
        #188f7f;

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

    line-height: 1;
}


.practice-sheet-copy {
    display: block;

    text-align: left;
}


.practice-sheet-copy strong,
.practice-sheet-copy small {
    display: block;
}


.practice-sheet-copy strong {
    color: #116c62;

    font-size: 10px;

    line-height: 1.08;
}


.practice-sheet-copy small {
    margin-top: 2px;

    color: #668981;

    font-size: 8px;

    line-height: 1.05;
}


/* ---------------------------------------------------------
   PRACTICE REMINDER
--------------------------------------------------------- */

.practice-reminder {
    flex:
        0 0 auto;

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 6px;

    padding:
        6px 10px;

    border:
        1px solid #d0e7e2;

    border-radius: 9px;

    background:
        linear-gradient(
            90deg,
            #f0faf7,
            #f8fcfb
        );

    color: #38675f;
}


.practice-reminder-icon {
    display: grid;

    place-items: center;

    width: 22px;
    height: 22px;

    flex:
        0 0 22px;

    border-radius: 50%;

    color: #ffffff;

    background: #188f7f;

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


.practice-reminder-text {
    min-width: 0;

    display: flex;

    align-items: baseline;

    flex-wrap: wrap;

    gap:
        2px 7px;

    line-height: 1.2;
}


.practice-reminder-text strong {
    color: #116c62;

    font-size: 9px;
}


.practice-reminder-text > span {
    color: #486f68;

    font-size: 8px;
}


.practice-reminder-text small {
    color: #78928d;

    font-size: 7px;
}


/* ---------------------------------------------------------
   KEEP BUTTON ROW ON ONE SCREEN
--------------------------------------------------------- */

.challenge-actions {
    align-items: stretch;
}


.challenge-actions > button,
.challenge-actions > a {
    min-height: 46px;
}


/* ---------------------------------------------------------
   SHORT LAPTOP VIEWPORT
--------------------------------------------------------- */

@media (max-height: 780px) {

    .practice-sheet-btn {
        min-width: 116px;

        padding:
            5px 8px;
    }

    .practice-sheet-icon {
        width: 19px;
        height: 19px;

        flex-basis: 19px;

        font-size: 12px;
    }

    .practice-sheet-copy strong {
        font-size: 9px;
    }

    .practice-sheet-copy small {
        font-size: 7px;
    }

    .practice-reminder {
        margin-top: 4px;

        padding:
            4px 8px;
    }

    .practice-reminder-icon {
        width: 18px;
        height: 18px;

        flex-basis: 18px;

        font-size: 10px;
    }

    .practice-reminder-text strong {
        font-size: 8px;
    }

    .practice-reminder-text > span {
        font-size: 7px;
    }

    .practice-reminder-text small {
        font-size: 6.5px;
    }

    .challenge-actions > button,
    .challenge-actions > a {
        min-height: 40px;
    }
}


/*
   If the screen becomes tight horizontally,
   the action row can wrap cleanly.
*/

@media (max-width: 1150px) {

    .practice-sheet-btn {
        flex:
            1 1 120px;
    }
}



/* =========================================================
   JENGISH_READABILITY_UPGRADE_V1

   Improve readability of secondary bilingual text without
   increasing the overall page height significantly.
========================================================= */


/* =========================================================
   1. QUESTION CONTEXT / ENGLISH TRANSLATION
========================================================= */

/*
   These selectors intentionally cover the common classes
   used by the challenge header/context area.
*/

.challenge-context,
.challenge-context-en,
.question-context,
.question-context-en,
.task-context,
.task-context-en,
.challenge-story,
.challenge-story-en {
    font-size: 12px !important;
    line-height: 1.28 !important;
}


/*
   If the bilingual context is made from paragraph elements
   inside the challenge/question header, enlarge those too.
*/

.challenge-card p,
.question-card p,
.challenge-content p {
    font-size: 12px;
    line-height: 1.28;
}


/* English translation directly beneath the main question */

.challenge-question + p,
.question-title + p,
#question-text + p {
    font-size: 11.5px !important;
    line-height: 1.25 !important;

    margin-top: 3px !important;

    color: #66809a !important;
}


/* =========================================================
   2. MAIN QUESTION

   Slight increase as well for stronger hierarchy.
========================================================= */

#question-text,
.challenge-question,
.question-title {
    font-size: clamp(
        18px,
        1.25vw,
        22px
    ) !important;

    line-height: 1.18 !important;
}


/* =========================================================
   3. CAMP LABELS ON MOUNTAIN
========================================================= */

.camp-marker {
    min-width: 105px !important;

    padding:
        4px 7px !important;
}


.camp-marker strong,
.camp-marker .camp-ky,
.camp-marker .camp-name {
    font-size: 9.5px !important;
    line-height: 1.08 !important;
}


.camp-marker small,
.camp-marker .camp-en,
.camp-marker span {
    font-size: 7.5px !important;
    line-height: 1.05 !important;
}


/*
   Make camp text darker and clearer against white labels.
*/

.camp-marker {
    color: #123f72 !important;
}


/* =========================================================
   4. CURRENT LEVEL CARD UNDER MOUNTAIN
========================================================= */

.current-level-card,
.level-card,
.camp-info {
    padding:
        7px 11px !important;
}


.current-level-card .eyebrow,
.level-card .eyebrow,
.camp-info .eyebrow {
    font-size: 8.5px !important;
    line-height: 1.1 !important;
}


.current-level-card strong,
.level-card strong,
.camp-info strong {
    font-size: 14px !important;
    line-height: 1.15 !important;
}


.current-level-card p,
.current-level-card small,
.level-card p,
.level-card small,
.camp-info p,
.camp-info small {
    font-size: 10px !important;
    line-height: 1.18 !important;
}


/* =========================================================
   5. ANSWER OPTIONS

   Keep them comfortable to read as difficulty increases.
========================================================= */

.answer-option,
.option-btn,
.answer-area button {
    font-size: 13px !important;
    line-height: 1.2 !important;
}


/* =========================================================
   6. FEEDBACK + EXPLANATION

   These are educational content, so they should not be tiny.
========================================================= */

#feedback {
    font-size: 11px !important;
    line-height: 1.25 !important;
}


#explanation {
    font-size: 10.5px !important;
    line-height: 1.28 !important;
}


/* =========================================================
   7. PRACTICE REMINDER

   The current reminder is especially tiny.
========================================================= */

.practice-reminder-text strong {
    font-size: 9.5px !important;
}


.practice-reminder-text > span {
    font-size: 8.5px !important;
}


.practice-reminder-text small {
    font-size: 8px !important;
    line-height: 1.15 !important;
}


/* =========================================================
   8. PROGRESS LABEL
========================================================= */

.progress-strip span {
    font-size: 9px !important;
}


/* =========================================================
   SHORT LAPTOP SCREENS

   Do NOT shrink educational text back to unreadable sizes.
========================================================= */

@media (max-height: 780px) {

    #question-text,
    .challenge-question,
    .question-title {
        font-size: 18px !important;
    }

    .challenge-context,
    .challenge-context-en,
    .question-context,
    .question-context-en,
    .task-context,
    .task-context-en,
    .challenge-story,
    .challenge-story-en {
        font-size: 11px !important;
    }

    .camp-marker {
        min-width: 98px !important;

        padding:
            3px 6px !important;
    }

    .camp-marker strong,
    .camp-marker .camp-ky,
    .camp-marker .camp-name {
        font-size: 9px !important;
    }

    .camp-marker small,
    .camp-marker .camp-en,
    .camp-marker span {
        font-size: 7.5px !important;
    }

    .current-level-card strong,
    .level-card strong,
    .camp-info strong {
        font-size: 13px !important;
    }

    .current-level-card p,
    .current-level-card small,
    .level-card p,
    .level-card small,
    .camp-info p,
    .camp-info small {
        font-size: 9.5px !important;
    }

    .answer-option,
    .option-btn,
    .answer-area button {
        font-size: 12px !important;
    }

    #feedback {
        font-size: 10.5px !important;
    }

    #explanation {
        font-size: 10px !important;
    }
}



/* JENGISH_READABLE_GAME_FONTS_V1_START */


/* ==========================================================
   JENGISH CHOKUSU
   READABLE LEARNING TYPOGRAPHY
========================================================== */


/* ----------------------------------------------------------
   CHALLENGE NUMBER
---------------------------------------------------------- */

.question-number {

    font-size:
        14px !important;

    line-height:
        1.25 !important;

    font-weight:
        600 !important;
}


.question-number strong {

    font-size:
        16px !important;

    font-weight:
        800 !important;
}


/* ----------------------------------------------------------
   DIFFICULTY + SKILL BADGES
---------------------------------------------------------- */

.difficulty-badge,
.skill-badge {

    font-size:
        12px !important;

    line-height:
        1.2 !important;

    font-weight:
        800 !important;

    padding:
        6px 11px !important;
}


/* ----------------------------------------------------------
   SCENARIO
   Example:
   You are preparing a small expedition table.
---------------------------------------------------------- */

.scenario {

    font-size:
        16px !important;

    line-height:
        1.4 !important;

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   MAIN QUESTION — KYRGYZ
---------------------------------------------------------- */

.challenge-card #question-text,
#question-text {

    font-size:
        clamp(
            21px,
            1.55vw,
            26px
        ) !important;

    line-height:
        1.25 !important;

    font-weight:
        800 !important;

    margin-top:
        12px !important;

    margin-bottom:
        5px !important;
}


/* ----------------------------------------------------------
   ENGLISH QUESTION
---------------------------------------------------------- */

.question-en,
#question-en {

    font-size:
        16px !important;

    line-height:
        1.35 !important;

    font-weight:
        600 !important;

    margin-top:
        3px !important;

    margin-bottom:
        14px !important;
}


/* ----------------------------------------------------------
   MULTIPLE-CHOICE ANSWERS
---------------------------------------------------------- */

.option-btn {

    min-height:
        48px !important;

    padding:
        10px 15px !important;

    font-size:
        16px !important;

    line-height:
        1.25 !important;

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   TEXT / FORMULA INPUT
---------------------------------------------------------- */

.answer-input {

    min-height:
        50px !important;

    padding:
        10px 14px !important;

    font-size:
        17px !important;

    line-height:
        1.3 !important;

    font-weight:
        600 !important;
}


/* ----------------------------------------------------------
   DATASET / MINI SPREADSHEET
---------------------------------------------------------- */

.dataset-table {

    font-size:
        15px !important;
}


.dataset-table th,
.dataset-table td {

    padding:
        8px 12px !important;

    line-height:
        1.3 !important;
}


.dataset-table th {

    font-weight:
        800 !important;
}


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

.feedback {

    font-size:
        15px !important;

    line-height:
        1.4 !important;

    font-weight:
        650 !important;
}


/* ----------------------------------------------------------
   EXPLANATION
---------------------------------------------------------- */

.explanation {

    font-size:
        15px !important;

    line-height:
        1.45 !important;
}


/* ----------------------------------------------------------
   LEFT MOUNTAIN INFORMATION
---------------------------------------------------------- */

.small-label {

    font-size:
        11px !important;

    line-height:
        1.25 !important;
}


#altitude-value {

    font-size:
        29px !important;
}


.altitude-target {

    font-size:
        13px !important;
}


.camp-status span {

    font-size:
        12px !important;
}


.camp-status strong {

    font-size:
        16px !important;
}


.camp-status small {

    font-size:
        12px !important;
}


/* ----------------------------------------------------------
   MINI STATS
---------------------------------------------------------- */

.mini-stats span {

    font-size:
        11px !important;

    line-height:
        1.2 !important;
}


.mini-stats strong {

    font-size:
        18px !important;
}


/* ----------------------------------------------------------
   BOTTOM ACTION BUTTONS
---------------------------------------------------------- */

.challenge-actions button strong,
.challenge-actions a strong {

    font-size:
        14px !important;

    line-height:
        1.2 !important;
}


.challenge-actions button span,
.challenge-actions button small,
.challenge-actions a span,
.challenge-actions a small {

    font-size:
        11px !important;

    line-height:
        1.2 !important;
}


/* ----------------------------------------------------------
   PRACTICE REMINDER
---------------------------------------------------------- */

.practice-reminder-text strong {

    font-size:
        14px !important;
}


.practice-reminder-text > span {

    font-size:
        13px !important;

    line-height:
        1.35 !important;
}


.practice-reminder-text small {

    font-size:
        12px !important;

    line-height:
        1.35 !important;
}


/* ----------------------------------------------------------
   PROGRESS STRIP
---------------------------------------------------------- */

.progress-strip span {

    font-size:
        12px !important;
}


.progress-strip strong {

    font-size:
        14px !important;
}


/* ----------------------------------------------------------
   LAPTOP / SHORT SCREEN PROTECTION

   Still readable, but prevents the enlarged typography
   from forcing the whole activity below the viewport.
---------------------------------------------------------- */

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

    .challenge-card #question-text,
    #question-text {

        font-size:
            20px !important;
    }


    .scenario {

        font-size:
            15px !important;
    }


    .question-en,
    #question-en {

        font-size:
            15px !important;
    }


    .option-btn {

        min-height:
            44px !important;

        font-size:
            15px !important;
    }
}


/* JENGISH_READABLE_GAME_FONTS_V1_END */



/* JENGISH_100_PERCENT_FIT_V1_START */


/* ==========================================================
   JENGISH CHOKUSU
   FIT FULL BILINGUAL QUESTION AT 100% BROWSER ZOOM

   Goal:
   - keep readable fonts
   - keep Kyrgyz + English visible
   - keep all four answers visible
   - keep action buttons visible
   - preserve no-scroll desktop layout
========================================================== */


/* ----------------------------------------------------------
   RIGHT PANEL

   Reduce vertical waste without shrinking educational text.
---------------------------------------------------------- */

.challenge-panel {

    padding:
        9px 12px !important;

    gap:
        0 !important;
}


/* ----------------------------------------------------------
   TOP BADGES / CHALLENGE NUMBER
---------------------------------------------------------- */

.challenge-topline {

    margin-bottom:
        5px !important;

    min-height:
        28px !important;
}


.difficulty-badge,
.skill-badge {

    padding:
        4px 8px !important;

    line-height:
        1.1 !important;
}


.question-number {

    line-height:
        1.1 !important;
}


/* ----------------------------------------------------------
   MAIN CHALLENGE CARD

   The old rule used overflow:hidden.
   That is why text could disappear at 100%.
---------------------------------------------------------- */

.challenge-card {

    flex:
        1 1 auto !important;

    min-height:
        0 !important;

    overflow:
        visible !important;

    padding:
        13px 18px 12px !important;

    border-radius:
        16px !important;
}


/* ----------------------------------------------------------
   BILINGUAL SCENARIO
---------------------------------------------------------- */

.scenario {

    margin:
        0 0 6px !important;

    font-size:
        12px !important;

    line-height:
        1.18 !important;

    font-weight:
        700 !important;

    white-space:
        pre-line !important;
}


/* ----------------------------------------------------------
   KYRGYZ MAIN QUESTION

   Keep it strong/readable, but reduce unused margins.
---------------------------------------------------------- */

#question-text,
.challenge-card h2 {

    margin:
        5px 0 3px !important;

    font-size:
        clamp(
            18px,
            1.18vw,
            21px
        ) !important;

    line-height:
        1.14 !important;

    font-weight:
        800 !important;
}


/* ----------------------------------------------------------
   ENGLISH QUESTION

   Explicitly keep visible at 100%.
---------------------------------------------------------- */

#question-en,
.question-en,
#question-text + p {

    display:
        block !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    height:
        auto !important;

    max-height:
        none !important;

    overflow:
        visible !important;

    margin:
        2px 0 8px !important;

    font-size:
        12px !important;

    line-height:
        1.18 !important;

    color:
        #5f7890 !important;
}


/* ----------------------------------------------------------
   ANSWER AREA
---------------------------------------------------------- */

.answer-area {

    margin-top:
        6px !important;
}


.options-grid {

    gap:
        6px 8px !important;
}


.option-btn {

    min-height:
        38px !important;

    padding:
        7px 11px !important;

    font-size:
        13px !important;

    line-height:
        1.15 !important;
}


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

   Empty feedback should not reserve unnecessary height
   before the learner checks an answer.
---------------------------------------------------------- */

.feedback:empty {

    min-height:
        0 !important;

    height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.feedback:not(:empty) {

    min-height:
        28px !important;

    margin-top:
        6px !important;
}


/* ----------------------------------------------------------
   EXPLANATION
---------------------------------------------------------- */

.explanation {

    margin-top:
        5px !important;

    padding:
        6px 9px !important;
}


/* ----------------------------------------------------------
   ACTION BUTTON ROW
---------------------------------------------------------- */

.challenge-actions {

    margin-top:
        5px !important;

    gap:
        6px !important;
}


.challenge-actions > button,
.challenge-actions > a {

    min-height:
        40px !important;
}


/* ----------------------------------------------------------
   PRACTICE REMINDER

   Keep it visible but compact.
---------------------------------------------------------- */

.practice-reminder {

    margin-top:
        4px !important;

    padding:
        4px 8px !important;

    gap:
        6px !important;
}


.practice-reminder-icon {

    width:
        18px !important;

    height:
        18px !important;

    flex:
        0 0 18px !important;

    font-size:
        10px !important;
}


.practice-reminder-text {

    line-height:
        1.08 !important;
}


.practice-reminder-text strong {

    font-size:
        9px !important;
}


.practice-reminder-text > span {

    font-size:
        8px !important;
}


.practice-reminder-text small {

    font-size:
        7.5px !important;

    line-height:
        1.08 !important;
}


/* ----------------------------------------------------------
   PROGRESS STRIP
---------------------------------------------------------- */

.progress-strip {

    margin-top:
        4px !important;

    padding:
        5px 9px !important;
}


.progress-track {

    height:
        4px !important;

    margin-top:
        3px !important;
}


/* ==========================================================
   NORMAL LAPTOP HEIGHT
   This is the important case for your 100% screenshot.
========================================================== */

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

    .challenge-card {

        padding:
            11px 16px 10px !important;
    }


    .scenario {

        margin-bottom:
            4px !important;
    }


    #question-text,
    .challenge-card h2 {

        margin:
            4px 0 2px !important;

        font-size:
            18px !important;

        line-height:
            1.12 !important;
    }


    #question-en,
    .question-en,
    #question-text + p {

        margin:
            2px 0 6px !important;

        font-size:
            11.5px !important;

        line-height:
            1.15 !important;
    }


    .answer-area {

        margin-top:
            5px !important;
    }


    .option-btn {

        min-height:
            36px !important;

        padding:
            6px 10px !important;

        font-size:
            12.5px !important;
    }


    .challenge-actions {

        margin-top:
            4px !important;
    }


    .practice-reminder {

        margin-top:
            3px !important;
    }


    .progress-strip {

        margin-top:
            3px !important;
    }
}


/* ==========================================================
   SHORTER LAPTOP
========================================================== */

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

    .challenge-card {

        padding:
            9px 14px !important;
    }


    #question-text,
    .challenge-card h2 {

        font-size:
            17px !important;

        line-height:
            1.1 !important;
    }


    #question-en,
    .question-en,
    #question-text + p {

        font-size:
            11px !important;

        line-height:
            1.12 !important;
    }


    .option-btn {

        min-height:
            34px !important;
    }


    .practice-reminder-text small {

        display:
            none !important;
    }
}


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

/* JENGISH_ACTIVITY1_FONT_AND_BACK_V1_START */


/* ==========================================================
   JENGISH CHOKUSU
   ACTIVITY 1 KYRGYZ TYPOGRAPHY REFERENCE
========================================================== */


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

html,
body,
.game-shell {

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

    -webkit-font-smoothing:
        antialiased !important;

    -moz-osx-font-smoothing:
        grayscale !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ----------------------------------------------------------
   NORMAL EDUCATIONAL TEXT
---------------------------------------------------------- */

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

p,
span,
label,
a,
li,

button,
input,
textarea,
select,
option,

strong,
b,
small,
em {

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


/* ----------------------------------------------------------
   MAIN KYRGYZ HEADINGS
---------------------------------------------------------- */

.title-group h1,
.intro-card h2,
.summit-card h2,
.challenge-card h2,
#question-text {

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

    font-weight:
        700 !important;

    font-style:
        normal !important;

    font-kerning:
        normal !important;

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

    letter-spacing:
        .002em !important;

    word-spacing:
        .02em !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ----------------------------------------------------------
   KYRGYZ BODY / CONTEXT TEXT
---------------------------------------------------------- */

.scenario,
.intro-card > p:not(.intro-en),
.secondary-copy,
.camp-status strong,
.question-number,
.feedback,
.explanation {

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

    font-kerning:
        normal !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;
}


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

   Softer than the old 700/800-heavy appearance.
---------------------------------------------------------- */

.option-btn {

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

    font-weight:
        650 !important;

    font-kerning:
        normal !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;
}


/* ----------------------------------------------------------
   BADGES / SMALL KYRGYZ LABELS
---------------------------------------------------------- */

.eyebrow,
.small-label,
.difficulty-badge,
.skill-badge,
.intro-altitude,
.camp-marker {

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

    font-weight:
        700 !important;
}


/* ==========================================================
   BACK TO CHAPTER
   MATCH ACTIVITY 1 FAMILY
========================================================== */

.back-to-chapter-btn {

    display:
        inline-flex !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        max-content !important;

    min-height:
        0 !important;

    height:
        auto !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex-direction:
        row !important;

    gap:
        7px !important;

    margin-left:
        auto !important;

    padding:
        8px 19px !important;

    border:
        0 !important;

    border-radius:
        18px !important;

    background:
        #d89b61 !important;

    background-image:
        none !important;

    color:
        #063c78 !important;

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

    font-size:
        14px !important;

    font-style:
        normal !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-decoration:
        none !important;

    white-space:
        nowrap !important;

    box-shadow:
        none !important;

    font-synthesis:
        none !important;
}


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

.back-to-chapter-btn .back-arrow {

    display:
        inline !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #3851d1 !important;

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;
}


/* ----------------------------------------------------------
   KYRGYZ + ENGLISH BACK TEXT

   Existing HTML uses:
       .back-copy strong
       .back-copy small

   Keep the HTML, but visually turn it into one horizontal
   Activity-1-style line.
---------------------------------------------------------- */

.back-to-chapter-btn .back-copy {

    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        4px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    white-space:
        nowrap !important;
}


.back-to-chapter-btn .back-copy strong,
.back-to-chapter-btn .back-copy small {

    display:
        inline !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #063c78 !important;

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

    font-size:
        14px !important;

    font-style:
        normal !important;

    line-height:
        1.2 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;
}


.back-to-chapter-btn .back-copy strong {

    font-weight:
        700 !important;
}


.back-to-chapter-btn .back-copy small {

    font-weight:
        700 !important;

    opacity:
        1 !important;
}


/* Insert slash visually between KY and EN */

.back-to-chapter-btn .back-copy small::before {

    content:
        " / " !important;
}


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

.back-to-chapter-btn:hover {

    background:
        #d89b61 !important;

    border-color:
        transparent !important;

    transform:
        translateY(-1px) !important;

    box-shadow:
        0 5px 12px
        rgba(0,0,0,.14) !important;
}


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

.back-to-chapter-btn:active {

    transform:
        translateY(0) !important;

    box-shadow:
        none !important;
}


/* ----------------------------------------------------------
   SHORT LAPTOP

   Override the earlier 34px / tiny-button rule.
---------------------------------------------------------- */

@media (max-height: 780px) {

    .back-to-chapter-btn {

        min-height:
            0 !important;

        padding:
            8px 19px !important;

        font-size:
            14px !important;
    }

    .back-to-chapter-btn .back-copy strong,
    .back-to-chapter-btn .back-copy small {

        font-size:
            14px !important;
    }
}


/* ==========================================================
   KEEP TECHNICAL / FORM INPUT TEXT MONOSPACE
========================================================== */

.answer-input,
code,
pre,
kbd,
samp,

.code,
.code *,
.code-block,
.code-block *,
.terminal,
.terminal *,
.console,
.console * {

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

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;
}


/* JENGISH_ACTIVITY1_FONT_AND_BACK_V1_END */

/* JENGISH_FINAL_KYRGYZ_FONT_FORCE_V1_START */


/* ==========================================================
   JENGISH CHOKUSU
   FINAL UNIFORM KYRGYZ TYPOGRAPHY

   Exact family:
   Arial, "Helvetica Neue", Helvetica, sans-serif
========================================================== */


/* ----------------------------------------------------------
   GLOBAL NORMAL TEXT
---------------------------------------------------------- */

html,
body,
.game-shell,

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

p,
span,
strong,
small,
label,
a,
li,

button,
textarea,
select,
option {

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


/* ==========================================================
   HEADER
========================================================== */

.title-group,
.title-group h1,
.title-group p,

.summit-label,
.summit-label strong,
.summit-label span {

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


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

.intro-card,
.intro-card h2,
.intro-card p,

.intro-en,
.secondary-copy,

.eyebrow,

.intro-features,
.intro-features strong,
.intro-features span,

.intro-rules,
.intro-rules p {

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


/* ==========================================================
   LEFT MOUNTAIN PANEL
========================================================== */

.mountain-heading,
.small-label,

#altitude-value,
.altitude-target,

.camp-marker,

.camp-status,
.camp-status span,
.camp-status strong,
.camp-status small,

.mini-stats,
.mini-stats span,
.mini-stats strong {

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


/* ==========================================================
   RIGHT CHALLENGE PANEL
========================================================== */

.challenge-panel,
.challenge-topline,

.difficulty-badge,
.skill-badge,

.question-number,
.question-number strong,

.challenge-card,

.scenario,

#question-text,
.challenge-card h2,

#question-en,
.question-en,

.dataset-table,
.dataset-table th,
.dataset-table td,

.options-grid,
.option-btn,

.feedback,
.feedback-en,

.explanation {

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


/* ==========================================================
   MAIN KYRGYZ QUESTION

   This is the text visible in your screenshot.
   Remove the old extra-heavy 800 appearance.
========================================================== */

#question-text,
.challenge-card h2 {

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

    font-weight:
        700 !important;

    font-style:
        normal !important;

    font-kerning:
        normal !important;

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

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   KYRGYZ SCENARIO / CONTEXT
========================================================== */

.scenario {

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

    font-weight:
        700 !important;

    font-style:
        normal !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   KYRGYZ ANSWERS
========================================================== */

.option-btn {

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

    font-weight:
        650 !important;

    font-style:
        normal !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   BADGES / LABELS
========================================================== */

.difficulty-badge,
.skill-badge,
.small-label,
.question-number,
.camp-marker {

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

    font-weight:
        700 !important;

    font-style:
        normal !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    font-synthesis:
        none !important;
}


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

.challenge-actions,
.challenge-actions button,
.challenge-actions button *,
.challenge-actions a,
.challenge-actions a *,

.tool-btn,
.tool-btn *,

.primary-btn,
.primary-btn *,

.practice-sheet-btn,
.practice-sheet-btn * {

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


/* ==========================================================
   BACK TO CHAPTER

   Same Activity 1-style typography
========================================================== */

.back-to-chapter-btn,
.back-to-chapter-btn * {

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

    font-style:
        normal !important;

    font-synthesis:
        none !important;

    text-rendering:
        optimizeLegibility !important;
}


.back-to-chapter-btn {

    font-size:
        14px !important;

    font-weight:
        700 !important;
}


.back-to-chapter-btn .back-arrow {

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    color:
        #3851d1 !important;
}


.back-to-chapter-btn .back-copy strong,
.back-to-chapter-btn .back-copy small {

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    font-style:
        normal !important;
}


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

.feedback,
.feedback-en,
.explanation {

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

    font-style:
        normal !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;
}


/* ==========================================================
   SUMMIT / RESULT SCREEN
========================================================== */

.summit-card,
.summit-card h2,
.summit-card p,

.summit-stats,
.summit-stats span,
.summit-stats strong,

.reset-btn {

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


/* ==========================================================
   IMPORTANT:
   KEEP FORM / FORMULA INPUT MONOSPACE

   Do not turn spreadsheet formulas into Arial.
========================================================== */

.answer-input,
code,
pre,
kbd,
samp,

.code,
.code *,
.code-block,
.code-block *,
.console,
.console *,
.terminal,
.terminal * {

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

    font-synthesis:
        auto !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;
}


/* JENGISH_FINAL_KYRGYZ_FONT_FORCE_V1_END */