/* =========================================================
   АК ТЕРЕК — КӨК ТЕРЕК
   RUNNING INTERNET GAME V2
========================================================= */

:root {

    --navy: #123a70;
    --blue: #2e69a8;

    --text: #456078;
    --muted: #73879b;

    --gold: #e5aa22;
    --gold-soft: #fff7db;

    --teal: #168f86;
    --teal-soft: #eaf8f5;

    --red: #d94d59;
    --red-soft: #fff0f2;

    --green: #278b61;
    --green-soft: #eaf8f1;

    --snow: #f7fbff;
    --border: #d9e6f1;

    --shadow:
        0 15px 35px rgba(31, 67, 105, 0.11);
}


* {
    box-sizing: border-box;
}


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


body {

    padding: 18px;

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

    color: var(--text);

    background:
        linear-gradient(
            180deg,
            #edf7ff 0%,
            #f8fbfe 35%,
            #fffdf8 100%
        );
}


button,
input {
    font: inherit;
}


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

.game-shell {

    width: min(1220px, 100%);

    margin: auto;

    overflow: hidden;

    border: 1px solid #dce7f0;

    border-radius: 28px;

    background: white;

    box-shadow:
        0 22px 60px rgba(35, 62, 91, 0.13);
}


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

.game-header {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 20px 28px;

    border-bottom:
        1px solid #e4ecf3;

    background:
        linear-gradient(
            90deg,
            #fff9e8,
            #ffffff 48%,
            #ecf9f6
        );
}


.header-symbol {

    display: grid;

    place-items: center;

    width: 54px;
    height: 54px;

    border-radius: 17px;

    background: #edf6ff;

    font-size: 29px;
}


.header-copy {

    flex: 1;
}


.header-copy h1 {

    margin: 0;

    color: var(--navy);

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

    font-size:
        clamp(25px, 3vw, 35px);

    line-height: 1.05;
}


.header-copy p {

    margin: 4px 0 0;

    color: var(--muted);

    font-size: 12px;
}


.header-topic {

    padding: 8px 13px;

    border: 1px solid #cce8e3;

    border-radius: 14px;

    background: #effaf8;

    text-align: center;
}


.header-topic strong {

    display: block;

    color: var(--teal);

    font-size: 12px;
}


.header-topic span {

    display: block;

    margin-top: 2px;

    color: #82938f;

    font-size: 9px;
}


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

.screen {

    display: none;

    padding: 26px;
}


.screen.active {
    display: block;
}


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

.intro-card {

    padding: 27px;

    border: 1px solid #eddca8;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #fffdfa,
            #fff8e4
        );

    text-align: center;
}


.tradition-badge {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 999px;

    color: #8d641a;

    background: #fff0bf;

    font-size: 11px;

    font-weight: 800;
}


.tradition-badge span {

    margin-left: 5px;

    color: #988260;

    font-size: 9px;

    font-weight: 500;
}


.intro-card h2 {

    margin: 12 px 0 3px;

    color: var(--navy);

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

    font-size:
        clamp(24px, 3vw, 34px);
}


.intro-en {

    margin: 0 0 18px;

    color: var(--muted);

    font-size: 12px;
}


.intro-rule {

    max-width: 960px;

    margin: auto;

    padding: 17px 20px;

    border-radius:7px;

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

    text-align: left;
}


.intro-rule strong {

    color: var(--teal);

    font-size: 30px;
}


.intro-rule p {

    margin: 3px 0;

    font-size: 17px;

    line-height: 1.45;
}


.intro-rule small {

    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.45;
}


/* =========================================================
   NAMES
========================================================= */

.name-card {

    max-width: 900px;

    margin: 20px auto 0;

    padding: 22px;

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

    border-radius: 22px;

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


.name-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    margin-bottom: 15px;
}


.name-heading h3 {

    margin: 0;

    color: var(--navy);

    font-size: 28px;
}


.name-heading span {

    color: var(--muted);

    font-size: 10px;
}


.name-heading > strong {

    padding: 7px 13px;

    border-radius: 999px;

    color: var(--navy);

    background: #edf5ff;

    font-size: 13px;
}


.friend-grid {

    display: grid;

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

    gap: 10px;
}


.friend-grid label {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 8px 11px;

    border: 1px solid #d9e5ef;

    border-radius: 13px;

    background: #fbfdff;
}


.friend-grid label:focus-within {

    border-color: #7ca9d5;

    box-shadow:
        0 0 0 3px
        rgba(46,105,168,0.08);
}


.friend-grid label span {

    display: grid;

    place-items: center;

    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    color: white;

    background: var(--blue);

    font-size: 11px;

    font-weight: 800;
}


.friend-grid input {

    width: 100%;

    padding: 7px 3px;

    border: 0;

    outline: 0;

    color: var(--navy);

    background: transparent;

    font-size: 13px;

    font-weight: 600;
}


.setup-message {

    min-height: 24px;

    padding-top: 10px;

    color: var(--red);

    text-align: center;

    font-size: 12px;

    font-weight: 600;
}


.privacy-note {

    margin: 14px 0 0;

    color: #73869a;

    text-align: center;

    font-size: 10px;
}


.privacy-note span {

    color: #96a2ae;
}


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

.main-button {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 205px;

    margin: 5px auto 0;

    padding: 10px 22px;

    border: 0;

    border-radius: 15px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #276cac,
            #168f86
        );

    box-shadow:
        0 9px 20px
        rgba(39,108,172,0.22);

    cursor: pointer;

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


.main-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 23px
        rgba(39,108,172,0.28);
}


.main-button strong {

    font-size: 13px;
}


.main-button span {

    margin-top: 2px;

    opacity: 0.8;

    font-size: 9px;
}


.main-button.compact {

    min-width: 175px;

    padding: 9px 20px;
}


.run-button {

    background:
        linear-gradient(
            135deg,
            #d58c18,
            #e6ad26
        );
}


/* =========================================================
   SCORE
========================================================= */

.score-bar {

    display: grid;

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

    gap: 9px;

    margin-bottom: 14px;
}


.score-bar > div {

    padding: 10px;

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

    border-radius: 14px;

    background: #f9fcff;

    text-align: center;
}


.score-bar span {

    display: block;

    color: var(--text);

    font-size: 9px;

    font-weight: 700;
}


.score-bar strong {

    display: block;

    margin: 2px;

    color: var(--navy);

    font-size: 19px;
}


.score-bar small {

    display: block;

    color: var(--muted);

    font-size: 8px;
}


.user-score-box {

    background:
        #fff9e8 !important;

    border-color:
        #eddba5 !important;
}


.computer-score-box {

    background:
        #eef9f7 !important;

    border-color:
        #bfe2dc !important;
}


/* =========================================================
   PLAYGROUND
========================================================= */

.playground {

    display: grid;

    grid-template-columns:
        minmax(175px, 1fr)
        minmax(330px, 1.8fr)
        minmax(175px, 1fr);

    gap: 11px;

    min-height: 330px;

    padding: 13px;

    border: 1px solid #d6e4ee;

    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            #eaf5ff 0%,
            #f7fbff 42%,
            #f6fbff 43%,
            #eef5f9 100%
        );

    overflow: hidden;
}


/* =========================================================
   TEAMS
========================================================= */

.team-area {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    padding: 13px;

    border-radius: 18px;

    background:
        rgba(255,255,255,0.77);
}


.user-area {

    border:
        1px solid #ead391;
}


.computer-area {

    border:
        1px solid #acdcd5;
}


.team-heading {

    padding-bottom: 9px;

    border-bottom:
        1px dashed
        rgba(68,91,111,0.18);

    text-align: center;
}


.team-heading h2 {

    margin: 0;

    color: var(--navy);

    font-size: 13px;
}


.team-heading span {

    color: var(--muted);

    font-size: 8px;
}


.children-line {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-content: center;

    gap: 5px;

    flex: 1;

    padding-top: 13px;
}


.child-card {

    width: 65px;

    padding: 7px 4px;

    border: 1px solid #dce5ec;

    border-radius: 13px;

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

    box-shadow:
        0 4px 10px
        rgba(50,69,87,0.07);

    text-align: center;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


.child-card.called {

    border:
        2px solid var(--gold);

    transform:
        translateY(-7px)
        scale(1.06);

    box-shadow:
        0 9px 19px
        rgba(190,135,24,0.22);
}


.child-card .avatar {

    font-size: 25px;
}


.child-card strong {

    display: block;

    margin-top: 3px;

    overflow: hidden;

    color: var(--navy);

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 9px;
}


.child-card span {

    font-size: 11px;
}


/* =========================================================
   RUNNING FIELD
========================================================= */

.running-field {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 300px;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #dff1ff 0%,
            #eef8ff 53%,
            #f8fbfd 54%,
            #edf3f7 100%
        );
}


.field-sky {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 95px;

    pointer-events: none;
}


.mountain {

    position: absolute;

    right: 20px;
    bottom: -10px;

    color: #9eb8c7;

    font-size: 65px;

    opacity: 0.42;
}


.cloud {

    position: absolute;

    top: 15px;
    left: 20%;

    color: white;

    font-size: 36px;

    opacity: 0.84;
}


.cloud-two {

    top: 34px;
    left: 70%;

    font-size: 25px;
}


.field-label {

    position: absolute;

    top: 13px;
    left: 50%;

    transform:
        translateX(-50%);

    text-align: center;
}


.field-label strong {

    display: block;

    color: var(--navy);

    font-size: 9px;

    letter-spacing: 1px;
}


.field-label span {

    display: block;

    color: var(--muted);

    font-size: 7px;
}


.runner-track {

    position: relative;

    height: 115px;

    margin:
        50px 23px 8px;
}


.route-line {

    position: absolute;

    top: 66px;
    left: 0;
    right: 0;

    height: 4px;

    border-radius: 999px;

    background:
        repeating-linear-gradient(
            90deg,
            #a9bfd0 0,
            #a9bfd0 13px,
            transparent 13px,
            transparent 21px
        );
}


.runner {

    position: absolute;

    left: 0;
    top: 21px;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 64px;

    transform:
        translateX(-8px);

    transition:
        none;
}


.runner-avatar {

    font-size: 45px;

    transform:
        scaleX(-1);
}


.runner strong {

    max-width: 70px;

    overflow: hidden;

    color: var(--navy);

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 9px;
}


.runner > span {

    margin-top: -4px;

    font-size: 14px;
}


.runner.running {

    animation:
        runAcross
        8s
        linear
        forwards;
}


.runner.running
.runner-avatar {

    animation:
        runningBounce
        0.3s
        ease-in-out
        infinite;
}


.runner.returning {

    animation:
        runBack
        1.25s
        ease-in-out
        forwards;
}


.runner.returning
.runner-avatar {

    transform:
        scaleX(1);

    animation:
        runningBounce
        0.28s
        ease-in-out
        infinite;
}


@keyframes runAcross {

    from {
        left: 0;
    }

    to {
        left:
            calc(100% - 55px);
    }
}


@keyframes runBack {

    from {
        left:
            calc(100% - 55px);
    }

    to {
        left: 0;
    }
}


@keyframes runningBounce {

    0%,
    100% {
        transform:
            scaleX(-1)
            translateY(0);
    }

    50% {
        transform:
            scaleX(-1)
            translateY(-5px);
    }
}


.finish-marker {

    position: absolute;

    right: -1px;
    top: 41px;

    font-size: 31px;
}


.progress-shell {

    height: 7px;

    margin: 0 24px;

    overflow: hidden;

    border-radius: 999px;

    background: #dbe5ec;
}


.run-progress {

    width: 0%;
    height: 100%;

    border-radius: inherit;

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


.run-progress.running {

    animation:
        progressAcross
        8s
        linear
        forwards;
}


@keyframes progressAcross {

    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}


.run-caption {

    margin-top: 7px;

    text-align: center;
}


.run-caption span {

    display: block;

    color: var(--navy);

    font-size: 9px;

    font-weight: 700;
}


.run-caption small {

    display: block;

    color: var(--muted);

    font-size: 7px;
}


/* =========================================================
   ACTION CARDS
========================================================= */

.action-card {

    position: relative;

    display: none;

    margin-top: 15px;

    padding: 22px;

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

    border-radius: 21px;

    background: white;

    box-shadow: var(--shadow);

    text-align: center;
}


.action-card.active-panel {

    display: block;

    animation:
        appear
        0.3s ease;
}


@keyframes appear {

    from {
        opacity: 0;

        transform:
            translateY(5px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


.step-circle {

    position: absolute;

    top: -14px;
    left: 18px;

    display: grid;

    place-items: center;

    width: 32px;
    height: 32px;

    border: 4px solid white;

    border-radius: 50%;

    color: white;

    background: var(--red);

    font-size: 11px;

    font-weight: 800;
}


.panel-kicker {

    margin: 0 0 5px;

    color: var(--teal);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.action-card h2 {

    margin: 4px 0;

    color: var(--navy);

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

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


.action-card > p {

    margin: 8px auto;

    max-width: 700px;

    font-size: 12px;

    line-height: 1.45;
}


.action-card > small {

    display: block;

    margin: 4px auto 14px;

    color: var(--muted);

    font-size: 9px;
}


blockquote {

    max-width: 650px;

    margin: 12px auto;

    padding: 13px;

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

    border-radius:
        0 15px 15px 0;

    color: #7d5915;

    background:
        var(--gold-soft);

    font-size: 16px;

    font-weight: 700;
}


.called-big-avatar {

    margin-top: 4px;

    font-size: 48px;
}


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

.question-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    max-width: 850px;

    margin: auto;

    text-align: left;
}


.question-top h2 {

    margin: 2px 0;
}


.countdown-box {

    flex: 0 0 82px;

    padding: 8px;

    border: 1px solid #f0c1c6;

    border-radius: 15px;

    background: var(--red-soft);

    text-align: center;
}


.countdown-box strong {

    display: block;

    color: var(--red);

    font-size: 22px;
}


.countdown-box span {

    color: #9f6870;

    font-size: 8px;
}


.question-content {

    max-width: 830px;

    margin: 16px auto 0;

    padding: 14px 18px;

    border-radius: 16px;

    background: #f5f9fd;
}


.question-content h3 {

    margin: 0;

    color: var(--navy);

    font-size: 18px;
}


.question-content p {

    margin: 5px 0 0;

    color: var(--muted);

    font-size: 10px;
}


.answer-grid {

    display: grid;

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

    gap: 9px;

    max-width: 900px;

    margin: 13px auto 0;
}


.answer-button {

    min-height: 68px;

    padding: 10px;

    border: 1px solid #d7e4ee;

    border-radius: 14px;

    color: var(--navy);

    background: #fcfdff;

    cursor: pointer;

    transition:
        transform 0.17s ease,
        border-color 0.17s ease;
}


.answer-button:hover:not(:disabled) {

    transform:
        translateY(-2px);

    border-color: #78a8d4;
}


.answer-button strong {

    display: block;

    font-size: 11px;
}


.answer-button small {

    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 8px;
}


.answer-button.correct {

    border-color: #70c19a;

    color: #156943;

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


.answer-button.wrong {

    border-color: #e29aa2;

    color: #a43a46;

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


.feedback {

    min-height: 0;

    max-width: 750px;

    margin: 11px auto 0;

    border-radius: 13px;

    font-size: 10px;
}


.feedback.success {

    padding: 9px 12px;

    color: #176b48;

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


.feedback.error {

    padding: 9px 12px;

    color: #a13944;

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


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

.result-icon {

    font-size: 50px;
}


.captured-friend {

    display: none;

    max-width: 500px;

    margin: 13px auto;

    padding: 10px;

    border-radius: 14px;

    background: var(--gold-soft);

    color: #795617;

    font-size: 11px;

    font-weight: 700;
}


.captured-friend.visible {

    display: block;
}


.lesson-strip {

    margin-top: 13px;

    padding: 11px 14px;

    border: 1px solid #d5e7f2;

    border-radius: 14px;

    background: #f4faff;

    text-align: center;

    font-size: 10px;
}


.lesson-strip strong {

    color: var(--navy);
}


.lesson-strip small {

    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 8px;
}


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

.final-card {

    max-width: 760px;

    margin: 10px auto;

    padding: 32px;

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

    border-radius: 27px;

    background:
        linear-gradient(
            150deg,
            #fffdf8,
            #f4faff,
            #effaf7
        );

    box-shadow: var(--shadow);

    text-align: center;
}


.final-icon {

    font-size: 60px;
}


.final-card h2 {

    margin: 5px 0;

    color: var(--navy);

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

    font-size: 31px;
}


#final-title-en {

    margin: 0;

    color: var(--muted);

    font-size: 11px;
}


.final-teams {

    display: grid;

    grid-template-columns:
        1fr 55px 1fr;

    align-items: center;

    gap: 10px;

    margin: 23px auto;

    max-width: 600px;
}


.final-teams > div:not(.final-vs) {

    padding: 15px;

    border: 1px solid #dce7f0;

    border-radius: 17px;

    background:
        rgba(255,255,255,0.8);
}


.final-teams span {

    display: block;

    font-size: 10px;

    font-weight: 700;
}


.final-teams strong {

    display: block;

    margin: 4px;

    color: var(--navy);

    font-size: 30px;
}


.final-teams small {

    color: var(--muted);

    font-size: 8px;
}


.final-vs {

    color: var(--muted);

    font-size: 11px;

    font-weight: 800;
}


.final-message {

    max-width: 600px;

    margin: 0 auto 15px;

    padding: 14px;

    border-radius: 16px;

    background: var(--gold-soft);

    color: #795715;

    font-size: 13px;

    font-weight: 700;
}


.knowledge-result {

    max-width: 360px;

    margin: 0 auto 18px;

    padding: 12px;

    border-radius: 15px;

    background: #eef8f6;
}


.knowledge-result span {

    display: block;

    font-size: 9px;
}


.knowledge-result strong {

    display: block;

    margin: 2px;

    color: var(--teal);

    font-size: 22px;
}


.knowledge-result small {

    color: var(--muted);

    font-size: 8px;
}


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

@media (max-width: 900px) {

    body {
        padding: 7px;
    }

    .screen {
        padding: 15px;
    }

    .playground {

        grid-template-columns: 1fr;

        min-height: auto;
    }

    .running-field {
        min-height: 250px;
    }

    .team-area {
        min-height: 145px;
    }

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

}


@media (max-width: 600px) {

    .header-topic {
        display: none;
    }

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

    .score-bar {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .question-top {

        align-items: flex-start;
    }

    .final-teams {

        grid-template-columns: 1fr;
    }

    .final-vs {
        padding: 0;
    }

}



/* =========================================================
   AK_TEREK_STANDING_CHILDREN_AND_RETURN_PAIR_V1

   Standing team lines + two-player return animation.
========================================================= */


/* ---------------------------------------------------------
   TEAM LINE

   Make players look like children standing in a line
   rather than separate profile cards.
--------------------------------------------------------- */

.children-line {
    position: relative;

    display: flex;

    flex-wrap: wrap;

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

    column-gap: 2px;
    row-gap: 10px;

    flex: 1;

    padding: 18px 4px 5px;
}


/* subtle "holding hands / team line" visual */
.children-line::before {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;

    top: 51%;

    height: 2px;

    border-radius: 999px;

    background:
        rgba(73, 103, 126, 0.16);

    z-index: 0;
}


.child-card {
    position: relative;

    z-index: 2;

    width: 54px;

    padding: 3px 2px 5px;

    border: none;
    border-radius: 10px;

    background: transparent;

    box-shadow: none;

    text-align: center;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease,
        filter 0.25s ease;
}


.child-card:hover {
    transform:
        translateY(-2px);
}


.child-card.called {
    border: none;

    background:
        rgba(255, 243, 193, 0.82);

    transform:
        translateY(-7px)
        scale(1.08);

    box-shadow:
        0 6px 14px
        rgba(190, 135, 24, 0.16);
}


.child-card .avatar {
    display: block;

    min-height: 44px;

    font-size: 37px;
    line-height: 1;

    filter:
        drop-shadow(
            0 3px 2px
            rgba(36, 53, 69, 0.10)
        );
}


.child-card strong {
    display: block;

    max-width: 54px;

    margin: 3px auto 0;

    overflow: hidden;

    color: var(--navy);

    text-overflow: ellipsis;
    white-space: nowrap;

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


.child-card > span {
    display: block;

    margin-top: 1px;

    color: #6c8093;

    font-size: 8px;
}


/* ---------------------------------------------------------
   CALLED PLAYER
--------------------------------------------------------- */

.called-big-avatar {
    font-size: 58px;
    line-height: 1.05;
}


/* ---------------------------------------------------------
   RUNNER

   Full-body running child.
--------------------------------------------------------- */

.runner {
    width: 72px;
}


.runner-avatar {
    font-size: 50px;
}


/* ---------------------------------------------------------
   FRIEND WHO IS BROUGHT BACK

   This person appears beside the runner after
   a correct answer.
--------------------------------------------------------- */

.return-friend {
    position: absolute;

    top: 20px;
    right: 0;

    z-index: 7;

    display: none;

    flex-direction: column;

    align-items: center;

    width: 64px;

    pointer-events: none;
}


.return-friend.visible {
    display: flex;
}


.return-friend-avatar {
    font-size: 45px;

    line-height: 1;

    filter:
        drop-shadow(
            0 3px 3px
            rgba(35, 55, 76, 0.13)
        );
}


.return-friend strong {
    max-width: 65px;

    margin-top: 2px;

    overflow: hidden;

    color: var(--navy);

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 8px;
}


/* ---------------------------------------------------------
   TWO CHILDREN RUNNING HOME

   Runner stays slightly ahead.
   Captured friend follows beside them.
--------------------------------------------------------- */

.return-friend.returning-home {
    display: flex;

    animation:
        capturedFriendBack
        1.55s
        ease-in-out
        forwards;
}


.runner.returning-with-friend {
    animation:
        runnerWithFriendBack
        1.55s
        ease-in-out
        forwards;
}


.runner.returning-with-friend
.runner-avatar {
    transform:
        scaleX(1);

    animation:
        returnRunningBounce
        0.28s
        ease-in-out
        infinite;
}


.return-friend.returning-home
.return-friend-avatar {
    transform:
        scaleX(1);

    animation:
        returnFriendBounce
        0.30s
        ease-in-out
        infinite;
}


@keyframes runnerWithFriendBack {

    from {
        left:
            calc(100% - 63px);
    }

    to {
        left: 3px;
    }
}


@keyframes capturedFriendBack {

    from {
        right: 2px;
    }

    to {
        right:
            calc(100% - 124px);
    }
}


@keyframes returnRunningBounce {

    0%,
    100% {
        transform:
            scaleX(1)
            translateY(0);
    }

    50% {
        transform:
            scaleX(1)
            translateY(-5px);
    }
}


@keyframes returnFriendBounce {

    0%,
    100% {
        transform:
            scaleX(1)
            translateY(0);
    }

    50% {
        transform:
            scaleX(1)
            translateY(-4px);
    }
}


/* ---------------------------------------------------------
   COMPUTER PLAYER SELECTED TO RETURN

   Briefly highlighted before being taken.
--------------------------------------------------------- */

.child-card.being-taken {
    background:
        #fff0c8;

    transform:
        translateY(-6px)
        scale(1.08);

    box-shadow:
        0 6px 15px
        rgba(210, 150, 35, 0.20);
}


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

@media (max-width: 900px) {

    .child-card {
        width: 48px;
    }

    .child-card .avatar {
        font-size: 32px;
    }

    .children-line::before {
        display: none;
    }

}



/* =========================================================
   AK_TEREK_GENDER_AND_KYRGYZ_NATURE_V1
========================================================= */


/* ---------------------------------------------------------
   NAME + GENDER INPUT ROW
--------------------------------------------------------- */

.friend-grid label {
    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr)
        108px;

    align-items: center;

    gap: 9px;
}


.friend-grid input {
    min-width: 0;
}


.friend-gender-select {
    width: 100%;

    padding: 7px 7px;

    border: 1px solid #d5e2ec;
    border-radius: 10px;

    outline: none;

    color: #315574;
    background: #ffffff;

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

    font-size: 10px;
    font-weight: 600;

    cursor: pointer;
}


.friend-gender-select:focus {
    border-color: #73a6d2;

    box-shadow:
        0 0 0 3px
        rgba(46, 105, 168, 0.08);
}


.friend-gender-select option {
    color: #315574;
}


/* ---------------------------------------------------------
   KYRGYZ NATURE RUNNING FIELD
--------------------------------------------------------- */

.running-field {
    position: relative;

    isolation: isolate;

    background:
        linear-gradient(
            rgba(235, 247, 255, 0.24),
            rgba(255, 255, 255, 0.34)
        ),
        url("/static/reader/activities/chapter2_story1/kyrgyz_nature.54857657e8b3.jpg")
        center center / cover
        no-repeat;

    border:
        1px solid rgba(130, 166, 184, 0.38);
}


/*
   Soft white veil keeps labels and children readable
   even when the landscape is colourful.
*/

.running-field::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0.04) 45%,
            rgba(255,255,255,0.22) 100%
        );
}


/*
   Hide the old fake CSS mountain/cloud scenery because
   the photograph now provides the real landscape.
*/

.field-sky {
    display: none;
}


/* ---------------------------------------------------------
   INTERNET ROUTE LABEL OVER PHOTO
--------------------------------------------------------- */

.field-label {
    z-index: 5;

    padding: 5px 12px;

    border-radius: 12px;

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

    backdrop-filter:
        blur(3px);

    box-shadow:
        0 3px 9px
        rgba(32,58,76,0.08);
}


.field-label strong {
    color: #123a70;
}


.field-label span {
    color: #5f7488;
}


/* ---------------------------------------------------------
   RUNNING TRACK OVER LANDSCAPE
--------------------------------------------------------- */

.runner-track {
    z-index: 4;
}


.route-line {
    height: 5px;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.96) 0,
            rgba(255,255,255,0.96) 14px,
            rgba(36,83,119,0.50) 14px,
            rgba(36,83,119,0.50) 21px
        );

    box-shadow:
        0 1px 4px
        rgba(27,57,82,0.18);
}


.progress-shell {
    position: relative;

    z-index: 5;

    background:
        rgba(255,255,255,0.68);
}


.run-caption {
    position: relative;

    z-index: 5;

    width: fit-content;

    margin:
        7px auto 0;

    padding:
        4px 10px;

    border-radius: 10px;

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

    backdrop-filter:
        blur(2px);
}


/* ---------------------------------------------------------
   STANDING PLAYERS

   Slightly larger because gender-specific full-body
   figures are now intentionally used.
--------------------------------------------------------- */

.child-card .avatar {
    font-size: 39px;
}


.runner-avatar {
    font-size: 51px;
}


.return-friend-avatar {
    font-size: 47px;
}


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

@media (max-width: 600px) {

    .friend-grid label {
        grid-template-columns:
            28px
            minmax(0, 1fr);
    }

    .friend-gender-select {
        grid-column:
            2 / 3;
    }

}


/* =========================================================
   AK_TEREK_DESKTOP_VIEWPORT_FIT_V1

   Fit the complete opening interface into a normal
   laptop/desktop viewport without browser zooming.

   This affects the OPENING SCREEN only.
========================================================= */

@media (min-width: 900px) {

    /* -----------------------------------------------------
       WHOLE ACTIVITY

       Use more of the available browser width.
    ----------------------------------------------------- */

    .game-shell {
        width: min(96vw, 1500px) !important;
        max-width: 1500px !important;

        margin:
            12px auto !important;
    }


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

       Keep branding, but make it more compact vertically.
    ----------------------------------------------------- */

    .game-header {
        min-height: 72px !important;

        padding:
            12px 28px !important;
    }


    /* -----------------------------------------------------
       OPENING / SETUP AREA

       Main reduction is whitespace, NOT text size.
    ----------------------------------------------------- */

    #setup-screen {
        padding:
            18px 30px 16px !important;
    }


    /* Intro card */
    #setup-screen .intro-card {
        padding:
            22px 34px !important;

        margin-bottom:
            16px !important;
    }


    /* Main Kyrgyz heading */
    #setup-screen .intro-card h1,
    #setup-screen .intro-card h2 {
        margin:
            0 0 5px !important;

        line-height:
            1.12 !important;
    }


    /* English title */
    #setup-screen .intro-card h1 + p,
    #setup-screen .intro-card h2 + p {
        margin-top:
            3px !important;
    }


    /* -----------------------------------------------------
       RULES

       Keep them readable but remove huge surrounding space.
    ----------------------------------------------------- */

    #setup-screen .rules-card,
    #setup-screen .rules-box,
    #setup-screen .intro-rules {
        max-width:
            900px !important;

        margin:
            14px auto 0 !important;

        padding:
            14px 20px !important;
    }


    #setup-screen .rules-card p,
    #setup-screen .rules-box p,
    #setup-screen .intro-rules p {
        margin:
            5px 0 !important;

        font-size:
            14px !important;

        line-height:
            1.35 !important;
    }


    /* English rule summary */
    #setup-screen .rules-card .en,
    #setup-screen .rules-box .en,
    #setup-screen .intro-rules .en {
        font-size:
            11px !important;

        line-height:
            1.3 !important;
    }


    /* -----------------------------------------------------
       FRIEND ENTRY CARD
    ----------------------------------------------------- */

    #setup-screen .setup-card,
    #setup-screen .names-card,
    #setup-screen .friend-entry-card {
        width:
            min(100%, 1050px) !important;

        margin:
            0 auto !important;

        padding:
            16px 22px 14px !important;
    }


    /* Friend-entry heading */
    #setup-screen .setup-card h2,
    #setup-screen .setup-card h3,
    #setup-screen .names-card h2,
    #setup-screen .names-card h3 {
        margin:
            0 0 3px !important;
    }


    /* -----------------------------------------------------
       TEN FRIENDS

       Preserve 2 columns × 5 rows.
    ----------------------------------------------------- */

    #setup-screen .friend-grid {
        display:
            grid !important;

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

        column-gap:
            14px !important;

        row-gap:
            7px !important;

        margin-top:
            10px !important;
    }


    #setup-screen .friend-grid label {
        min-height:
            43px !important;

        padding:
            4px 7px !important;

        border-radius:
            12px !important;
    }


    #setup-screen .friend-grid input {
        height:
            34px !important;

        font-size:
            13px !important;
    }


    #setup-screen .friend-gender-select {
        height:
            34px !important;

        padding:
            4px 7px !important;

        font-size:
            11px !important;
    }


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

    #setup-screen .start-button,
    #setup-screen #start-game,
    #setup-screen #start-btn {
        min-height:
            42px !important;

        margin-top:
            12px !important;

        padding:
            8px 28px !important;
    }


    /* -----------------------------------------------------
       PRIVACY / FOOTNOTE

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

    #setup-screen .privacy-note,
    #setup-screen .setup-note {
        margin:
            8px auto 0 !important;

        padding:
            0 !important;

        font-size:
            10px !important;

        line-height:
            1.25 !important;
    }

}


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

   For screens around 768–900 px high.
========================================================= */

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

    .game-shell {
        margin:
            6px auto !important;
    }


    .game-header {
        min-height:
            62px !important;

        padding:
            8px 24px !important;
    }


    #setup-screen {
        padding:
            12px 26px 10px !important;
    }


    #setup-screen .intro-card {
        padding:
            14px 28px !important;

        margin-bottom:
            10px !important;
    }


    #setup-screen .intro-card h1,
    #setup-screen .intro-card h2 {
        font-size:
            clamp(25px, 2.1vw, 34px) !important;

        margin-bottom:
            3px !important;
    }


    #setup-screen .rules-card,
    #setup-screen .rules-box,
    #setup-screen .intro-rules {
        margin-top:
            9px !important;

        padding:
            10px 18px !important;
    }


    #setup-screen .rules-card p,
    #setup-screen .rules-box p,
    #setup-screen .intro-rules p {
        margin:
            3px 0 !important;
    }


    #setup-screen .setup-card,
    #setup-screen .names-card,
    #setup-screen .friend-entry-card {
        padding:
            12px 20px 10px !important;
    }


    #setup-screen .friend-grid {
        row-gap:
            5px !important;

        margin-top:
            7px !important;
    }


    #setup-screen .friend-grid label {
        min-height:
            39px !important;
    }


    #setup-screen .friend-grid input,
    #setup-screen .friend-gender-select {
        height:
            31px !important;
    }


    #setup-screen .start-button,
    #setup-screen #start-game,
    #setup-screen #start-btn {
        min-height:
            38px !important;

        margin-top:
            8px !important;
    }

}


/* =========================================================
   AK_TEREK_DESKTOP_COMPACT_80_PERCENT_FEEL_V1

   Makes 100% browser zoom visually closer to the
   current preferred 80% screenshot.

   Desktop only.
========================================================= */

@media (min-width: 1000px) {

    /* =====================================================
       WHOLE ACTIVITY
    ====================================================== */

    body {
        padding:
            8px !important;
    }


    .game-shell {
        width:
            min(92vw, 1320px) !important;

        max-width:
            1320px !important;

        margin:
            6px auto !important;

        border-radius:
            22px !important;
    }


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

    .game-header {
        min-height:
            58px !important;

        padding:
            8px 20px !important;

        gap:
            10px !important;
    }


    .header-symbol {
        width:
            42px !important;

        height:
            42px !important;

        border-radius:
            13px !important;

        font-size:
            22px !important;
    }


    .header-copy h1 {
        font-size:
            27px !important;

        line-height:
            1.04 !important;
    }


    .header-copy p {
        margin-top:
            2px !important;

        font-size:
            9px !important;
    }


    .header-topic {
        padding:
            6px 10px !important;

        border-radius:
            11px !important;
    }


    .header-topic strong {
        font-size:
            9px !important;
    }


    .header-topic span {
        font-size:
            7px !important;
    }


    /* =====================================================
       SCREEN PADDING
    ====================================================== */

    .screen {
        padding:
            14px 20px !important;
    }


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

    #setup-screen .intro-card {
        padding:
            14px 24px !important;

        border-radius:
            19px !important;
    }


    #setup-screen .intro-card h2 {
        margin:
            2px 0 2px !important;

        font-size:
            28px !important;

        line-height:
            1.08 !important;
    }


    #setup-screen .intro-en {
        margin:
            2px 0 10px !important;

        font-size:
            12px !important;
    }


    #setup-screen .tradition-badge {
        padding:
            4px 9px !important;

        font-size:
            8px !important;
    }


    #setup-screen .tradition-badge span {
        font-size:
            7px !important;
    }


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

    #setup-screen .intro-rule {
        max-width:
            720px !important;

        padding:
            10px 14px !important;

        border-radius:
            13px !important;
    }


    #setup-screen .intro-rule strong {
        font-size:
            15px !important;
    }


    #setup-screen .intro-rule p {
        margin:
            4px 0 !important;

        font-size:
            13px !important;

        line-height:
            1.32 !important;
    }


    #setup-screen .intro-rule small {
        margin-top:
            5px !important;

        font-size:
            8px !important;

        line-height:
            1.3 !important;
    }


    /* =====================================================
       NAME ENTRY CARD
    ====================================================== */

    #setup-screen .name-card {
        max-width:
            780px !important;

        margin:
            12px auto 0 !important;

        padding:
            12px 16px 10px !important;

        border-radius:
            18px !important;
    }


    #setup-screen .name-heading {
        margin-bottom:
            8px !important;
    }


    #setup-screen .name-heading h3 {
        font-size:
            24px !important;
    }


    #setup-screen .name-heading span {
        font-size:
            8px !important;
    }


    #setup-screen .name-heading > strong {
        padding:
            5px 10px !important;

        font-size:
            10px !important;
    }


    /* =====================================================
       FRIEND GRID
    ====================================================== */

    #setup-screen .friend-grid {
        column-gap:
            8px !important;

        row-gap:
            5px !important;
    }


    #setup-screen .friend-grid label {
        grid-template-columns:
            24px
            minmax(0, 1fr)
            92px !important;

        min-height:
            36px !important;

        padding:
            3px 6px !important;

        gap:
            6px !important;

        border-radius:
            10px !important;
    }


    #setup-screen .friend-grid label span {
        width:
            24px !important;

        height:
            24px !important;

        flex-basis:
            24px !important;

        font-size:
            9px !important;
    }


    #setup-screen .friend-grid input {
        height:
            27px !important;

        padding:
            3px 2px !important;

        font-size:
            10px !important;
    }


    #setup-screen .friend-gender-select {
        height:
            27px !important;

        padding:
            2px 5px !important;

        border-radius:
            8px !important;

        font-size:
            8px !important;
    }


    /* =====================================================
       START BUTTON
    ====================================================== */

    #setup-screen .main-button {
        min-width:
            160px !important;

        margin-top:
            7px !important;

        padding:
            7px 17px !important;

        border-radius:
            12px !important;
    }


    #setup-screen .main-button strong {
        font-size:
            10px !important;
    }


    #setup-screen .main-button span {
        font-size:
            7px !important;
    }


    /* =====================================================
       SETUP MESSAGE / PRIVACY
    ====================================================== */

    #setup-screen .setup-message {
        min-height:
            17px !important;

        padding-top:
            5px !important;

        font-size:
            9px !important;
    }


    #setup-screen .privacy-note {
        margin-top:
            6px !important;

        font-size:
            8px !important;
    }


    /* =====================================================
       GAME SCREEN SCORE BAR
    ====================================================== */

    #game-screen .score-bar {
        gap:
            6px !important;

        margin-bottom:
            8px !important;
    }


    #game-screen .score-bar > div {
        padding:
            6px !important;

        border-radius:
            10px !important;
    }


    #game-screen .score-bar span {
        font-size:
            7px !important;
    }


    #game-screen .score-bar strong {
        font-size:
            15px !important;
    }


    #game-screen .score-bar small {
        font-size:
            6px !important;
    }


    /* =====================================================
       GAME PLAYGROUND
    ====================================================== */

    #game-screen .playground {
        grid-template-columns:
            minmax(150px, 0.85fr)
            minmax(350px, 1.8fr)
            minmax(150px, 0.85fr)
            !important;

        gap:
            7px !important;

        min-height:
            245px !important;

        padding:
            8px !important;

        border-radius:
            18px !important;
    }


    #game-screen .team-area {
        padding:
            8px !important;

        border-radius:
            14px !important;
    }


    #game-screen .team-heading {
        padding-bottom:
            5px !important;
    }


    #game-screen .team-heading h2 {
        font-size:
            10px !important;
    }


    #game-screen .team-heading span {
        font-size:
            6px !important;
    }


    #game-screen .children-line {
        padding-top:
            8px !important;

        row-gap:
            5px !important;
    }


    #game-screen .child-card {
        width:
            46px !important;

        padding:
            2px 1px 3px !important;
    }


    #game-screen .child-card .avatar {
        min-height:
            34px !important;

        font-size:
            30px !important;
    }


    #game-screen .child-card strong {
        max-width:
            45px !important;

        font-size:
            7px !important;
    }


    #game-screen .child-card > span {
        font-size:
            7px !important;
    }


    /* =====================================================
       RUNNING FIELD
    ====================================================== */

    #game-screen .running-field {
        min-height:
            225px !important;

        border-radius:
            14px !important;
    }


    #game-screen .field-label {
        top:
            7px !important;

        padding:
            3px 8px !important;
    }


    #game-screen .field-label strong {
        font-size:
            7px !important;
    }


    #game-screen .field-label span {
        font-size:
            5px !important;
    }


    #game-screen .runner-track {
        height:
            86px !important;

        margin:
            34px 18px 5px !important;
    }


    #game-screen .route-line {
        top:
            51px !important;
    }


    #game-screen .runner {
        width:
            54px !important;

        top:
            14px !important;
    }


    #game-screen .runner-avatar {
        font-size:
            38px !important;
    }


    #game-screen .runner strong {
        font-size:
            7px !important;
    }


    #game-screen .runner > span {
        font-size:
            10px !important;
    }


    #game-screen .finish-marker {
        top:
            28px !important;

        font-size:
            24px !important;
    }


    #game-screen .progress-shell {
        height:
            5px !important;

        margin:
            0 18px !important;
    }


    #game-screen .run-caption {
        margin-top:
            4px !important;

        padding:
            3px 7px !important;
    }


    #game-screen .run-caption span {
        font-size:
            7px !important;
    }


    #game-screen .run-caption small {
        font-size:
            5px !important;
    }


    /* =====================================================
       ACTION CARD / QUESTION / RESULT
    ====================================================== */

    #game-screen .action-card {
        margin-top:
            9px !important;

        padding:
            14px 17px !important;

        border-radius:
            16px !important;
    }


    #game-screen .step-circle {
        top:
            -11px !important;

        width:
            25px !important;

        height:
            25px !important;

        font-size:
            8px !important;
    }


    #game-screen .panel-kicker {
        font-size:
            7px !important;
    }


    #game-screen .action-card h2 {
        font-size:
            20px !important;
    }


    #game-screen .action-card > p {
        margin:
            5px auto !important;

        font-size:
            9px !important;
    }


    #game-screen .action-card > small {
        margin:
            2px auto 8px !important;

        font-size:
            7px !important;
    }


    #game-screen blockquote {
        margin:
            7px auto !important;

        padding:
            8px !important;

        font-size:
            11px !important;
    }


    #game-screen .main-button.compact {
        min-width:
            140px !important;

        padding:
            6px 14px !important;
    }


    /* =====================================================
       LESSON STRIP
    ====================================================== */

    #game-screen .lesson-strip {
        margin-top:
            7px !important;

        padding:
            6px 9px !important;

        font-size:
            7px !important;
    }


    #game-screen .lesson-strip small {
        font-size:
            6px !important;
    }

}




/* =========================================================
   AK_TEREK_FAST_GENDER_BUTTONS_STYLE_V1

   One-click Girl/Boy selection for every friend.
========================================================= */


/* ---------------------------------------------------------
   FRIEND ROW

   Number | Name | Gender buttons
--------------------------------------------------------- */

.friend-grid label,
#setup-screen .friend-grid label {

    grid-template-columns:
        24px
        minmax(0, 1fr)
        118px !important;

    gap:
        6px !important;

    align-items:
        center !important;
}


/* ---------------------------------------------------------
   GENDER BUTTON WRAPPER
--------------------------------------------------------- */

.friend-gender-buttons {

    display:
        grid;

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

    gap:
        3px;

    width:
        118px;
}


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

.gender-choice {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        3px;

    height:
        28px;

    padding:
        2px 5px;

    border:
        1px solid #d5e2ec;

    border-radius:
        8px;

    outline:
        none;

    color:
        #60778c;

    background:
        #ffffff;

    cursor:
        pointer;

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


.gender-choice:hover {

    transform:
        translateY(-1px);

    border-color:
        #8eb4d4;

    background:
        #f6faff;
}


/* ---------------------------------------------------------
   ICON
--------------------------------------------------------- */

.gender-icon {

    font-size:
        13px;

    line-height:
        1;
}


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

.gender-text {

    color:
        inherit !important;

    font-size:
        8px !important;

    font-weight:
        700 !important;
}


/* ---------------------------------------------------------
   GIRL SELECTED
--------------------------------------------------------- */

.girl-choice.selected {

    border-color:
        #d99ab0;

    color:
        #9f4869;

    background:
        #fff0f5;

    box-shadow:
        0 0 0 2px
        rgba(217,154,176,0.11);
}


/* ---------------------------------------------------------
   BOY SELECTED
--------------------------------------------------------- */

.boy-choice.selected {

    border-color:
        #7faed6;

    color:
        #28679d;

    background:
        #edf6ff;

    box-shadow:
        0 0 0 2px
        rgba(127,174,214,0.11);
}


/* ---------------------------------------------------------
   REMOVE OLD SELECT APPEARANCE IF ANY REMAINS
--------------------------------------------------------- */

.friend-gender-select {
    display:
        none !important;
}


/* =========================================================
   DESKTOP COMPACT VERSION
========================================================= */

@media (min-width: 1000px) {

    #setup-screen .friend-grid label {

        grid-template-columns:
            24px
            minmax(0, 1fr)
            112px !important;
    }


    #setup-screen .friend-gender-buttons {

        width:
            112px;
    }


    #setup-screen .gender-choice {

        height:
            27px;

        padding:
            2px 4px;
    }


    #setup-screen .gender-icon {

        font-size:
            12px;
    }


    #setup-screen .gender-text {

        font-size:
            7.5px !important;
    }

}


/* =========================================================
   SMALL SCREEN
========================================================= */

@media (max-width: 600px) {

    .friend-grid label,
    #setup-screen .friend-grid label {

        grid-template-columns:
            25px
            minmax(0, 1fr)
            !important;
    }


    .friend-gender-buttons {

        grid-column:
            2 / 3;

        width:
            120px;

        margin-top:
            2px;
    }

}



/* =========================================================
   AK_TEREK_ICON_ONLY_GENDER_STYLE_V1

   Compact icon-only girl / boy choice.
========================================================= */


/* ---------------------------------------------------------
   FRIEND ROW
--------------------------------------------------------- */

.friend-grid label,
#setup-screen .friend-grid label {

    grid-template-columns:
        24px
        minmax(0, 1fr)
        64px !important;
}


/* ---------------------------------------------------------
   GENDER GUIDE
--------------------------------------------------------- */

.gender-guide {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    margin:
        4px 0 9px;

    padding:
        8px 11px;

    border:
        1px solid #dbe7ef;

    border-radius:
        11px;

    background:
        #f7fbff;
}


.gender-guide-main {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    color:
        #315574;

    font-size:
        9px;
}


.gender-guide-main > strong {

    color:
        var(--navy);

    font-size:
        9px;
}


.gender-guide-choice {

    display: inline-flex;

    align-items: center;

    gap: 3px;

    color:
        #536d84;

    font-size:
        9px;
}


.gender-guide-en {

    color:
        var(--muted);

    text-align: right;

    font-size:
        8px;

    line-height:
        1.25;
}


.gender-guide-en strong {

    color:
        #526d85;

    font-size:
        inherit;
}


/* ---------------------------------------------------------
   ICON BUTTON WRAPPER
--------------------------------------------------------- */

.friend-gender-buttons {

    display:
        grid;

    grid-template-columns:
        repeat(2, 28px);

    justify-content:
        end;

    gap:
        4px;

    width:
        64px;
}


/* ---------------------------------------------------------
   ICON BUTTONS
--------------------------------------------------------- */

.gender-choice {

    display:
        grid;

    place-items:
        center;

    width:
        28px;

    height:
        28px;

    padding:
        0;

    border:
        1px solid #d3e0eb;

    border-radius:
        50%;

    color:
        #526a81;

    background:
        #ffffff;

    cursor:
        pointer;

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


.gender-choice:hover {

    transform:
        scale(1.07);

    border-color:
        #8db3d2;
}


/* ---------------------------------------------------------
   BIGGER, CLEARER ICON
--------------------------------------------------------- */

.gender-icon {

    display:
        block;

    font-size:
        15px !important;

    line-height:
        1 !important;
}


/*
   Old text is no longer present,
   but hide it defensively if cached HTML remains.
*/

.gender-text {

    display:
        none !important;
}


/* ---------------------------------------------------------
   GIRL SELECTED
--------------------------------------------------------- */

.girl-choice.selected {

    border-color:
        #dc91ad;

    background:
        #ffeaf2;

    box-shadow:
        0 0 0 2px
        rgba(220,145,173,0.16);

    transform:
        scale(1.08);
}


/* ---------------------------------------------------------
   BOY SELECTED
--------------------------------------------------------- */

.boy-choice.selected {

    border-color:
        #72a7d4;

    background:
        #eaf5ff;

    box-shadow:
        0 0 0 2px
        rgba(114,167,212,0.16);

    transform:
        scale(1.08);
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1000px) {

    #setup-screen .friend-grid label {

        grid-template-columns:
            24px
            minmax(0, 1fr)
            62px !important;
    }


    #setup-screen .friend-gender-buttons {

        width:
            62px;

        grid-template-columns:
            repeat(2, 27px);

        gap:
            4px;
    }


    #setup-screen .gender-choice {

        width:
            27px;

        height:
            27px;
    }


    #setup-screen .gender-icon {

        font-size:
            14px !important;
    }


    #setup-screen .gender-guide {

        margin:
            2px 0 7px;

        padding:
            6px 9px;
    }

}


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

@media (max-width: 700px) {

    .gender-guide {

        display:
            block;

        text-align:
            left;
    }


    .gender-guide-en {

        margin-top:
            4px;

        text-align:
            left;
    }


    .friend-grid label,
    #setup-screen .friend-grid label {

        grid-template-columns:
            25px
            minmax(0, 1fr)
            66px
            !important;
    }

}


/* =========================================================
   AK_TEREK_READABLE_GAME_TEXT_V1

   Increase important UI text without enlarging
   the cards or breaking the compact desktop layout.
========================================================= */

@media (min-width: 1000px) {

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

    .header-copy p {
        font-size:
            11px !important;

        line-height:
            1.25 !important;
    }


    /* =====================================================
       TOP SCORE / STATUS CARDS
    ====================================================== */

    #game-screen .score-bar span {
        font-size:
            10px !important;

        font-weight:
            700 !important;

        line-height:
            1.2 !important;
    }


    #game-screen .score-bar strong {
        font-size:
            18px !important;

        line-height:
            1.1 !important;
    }


    #game-screen .score-bar small {
        font-size:
            8px !important;

        line-height:
            1.2 !important;
    }


    /* =====================================================
       TEAM HEADINGS
    ====================================================== */

    #game-screen .team-heading h2 {
        font-size:
            13px !important;

        font-weight:
            800 !important;

        line-height:
            1.15 !important;
    }


    #game-screen .team-heading span {
        margin-top:
            3px !important;

        font-size:
            8px !important;

        line-height:
            1.2 !important;
    }


    /* =====================================================
       INTERNET ROUTE TITLE
    ====================================================== */

    #game-screen .field-label {
        padding:
            5px 10px !important;
    }


    #game-screen .field-label strong {
        font-size:
            10px !important;

        font-weight:
            800 !important;

        line-height:
            1.1 !important;
    }


    #game-screen .field-label span {
        margin-top:
            2px !important;

        font-size:
            7px !important;

        line-height:
            1.1 !important;
    }


    /* =====================================================
       RUNNING STATUS
    ====================================================== */

    #game-screen .run-caption {
        padding:
            5px 9px !important;
    }


    #game-screen .run-caption span {
        font-size:
            9px !important;

        font-weight:
            700 !important;
    }


    #game-screen .run-caption small {
        font-size:
            7px !important;

        line-height:
            1.2 !important;
    }


    /* =====================================================
       NATIONAL CALL SECTION
    ====================================================== */

    #game-screen .panel-kicker {
        font-size:
            9px !important;

        letter-spacing:
            0.65px !important;
    }


    #game-screen .action-card h2 {
        font-size:
            23px !important;

        line-height:
            1.1 !important;
    }


    #game-screen blockquote {
        font-size:
            13px !important;

        line-height:
            1.3 !important;
    }


    #game-screen .action-card > p {
        font-size:
            11px !important;

        line-height:
            1.35 !important;
    }


    #game-screen .action-card > small {
        font-size:
            8.5px !important;

        line-height:
            1.3 !important;
    }


    /* =====================================================
       BUTTON TEXT
    ====================================================== */

    #game-screen .main-button.compact strong {
        font-size:
            12px !important;
    }


    #game-screen .main-button.compact span {
        font-size:
            8px !important;
    }


    /* =====================================================
       PLAYER NAMES / DEVICE SYMBOLS
    ====================================================== */

    #game-screen .child-card strong {
        font-size:
            8.5px !important;

        line-height:
            1.15 !important;
    }


    #game-screen .child-card > span {
        font-size:
            8px !important;
    }


    #game-screen .runner strong {
        font-size:
            8.5px !important;
    }


    /* =====================================================
       LESSON STRIP
    ====================================================== */

    #game-screen .lesson-strip {
        font-size:
            9px !important;

        line-height:
            1.3 !important;
    }


    #game-screen .lesson-strip small {
        font-size:
            7.5px !important;

        line-height:
            1.25 !important;
    }

}




/* =========================================================
   AK_TEREK_BACK_TO_CHAPTER_V1
========================================================= */

.chapter-back-row {
    width: 100%;

    display: flex;

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

    padding:
        18px 20px
        22px;
}


.chapter-back-button {
    width: min(
        100%,
        525px
    );

    min-height: 64px;

    padding:
        14px 28px;

    display: flex;

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

    gap: 18px;

    border-radius: 0;

    background:
        linear-gradient(
            135deg,
            #146bc3,
            #1955a3
        );

    color: #ffffff;

    text-decoration: none;

    text-align: center;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: .1px;

    box-shadow:
        0 7px 16px
        rgba(25, 85, 163, .18);

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


.chapter-back-button:hover {
    color: #ffffff;

    text-decoration: none;

    transform:
        translateY(-1px);

    box-shadow:
        0 9px 20px
        rgba(25, 85, 163, .24);

    background:
        linear-gradient(
            135deg,
            #1874cf,
            #1b5caf
        );
}


.chapter-back-button:focus-visible {
    outline:
        3px solid
        rgba(20, 107, 195, .28);

    outline-offset:
        3px;
}


.chapter-back-arrow {
    flex:
        0 0 auto;

    font-size:
        21px;

    font-weight:
        500;
}


@media (
    max-width: 700px
) {

    .chapter-back-row {
        padding:
            14px 12px
            18px;
    }


    .chapter-back-button {
        width: 100%;

        min-height: 56px;

        padding:
            12px 18px;

        gap: 12px;

        font-size: 15px;
    }

}




/* =========================================================
   AK_TEREK_BACK_TO_CHAPTER_V1
========================================================= */

.chapter-back-row {
    width: 100%;

    display: flex;

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

    padding:
        18px 20px
        22px;
}


.chapter-back-button {
    width: min(
        100%,
        525px
    );

    min-height: 64px;

    padding:
        14px 28px;

    display: flex;

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

    gap: 18px;

    border-radius: 0;

    background:
        linear-gradient(
            135deg,
            #146bc3,
            #1955a3
        );

    color: #ffffff;

    text-decoration: none;

    text-align: center;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: .1px;

    box-shadow:
        0 7px 16px
        rgba(25, 85, 163, .18);

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


.chapter-back-button:hover {
    color: #ffffff;

    text-decoration: none;

    transform:
        translateY(-1px);

    box-shadow:
        0 9px 20px
        rgba(25, 85, 163, .24);

    background:
        linear-gradient(
            135deg,
            #1874cf,
            #1b5caf
        );
}


.chapter-back-button:focus-visible {
    outline:
        3px solid
        rgba(20, 107, 195, .28);

    outline-offset:
        3px;
}


.chapter-back-arrow {
    flex:
        0 0 auto;

    font-size:
        21px;

    font-weight:
        500;
}


@media (
    max-width: 700px
) {

    .chapter-back-row {
        padding:
            14px 12px
            18px;
    }


    .chapter-back-button {
        width: 100%;

        min-height: 56px;

        padding:
            12px 18px;

        gap: 12px;

        font-size: 15px;
    }

}




/* =========================================================
   AK_TEREK_STANDARD_ORANGE_BACK_BUTTON_V2

   Standard compact Back to Chapter navigation.
========================================================= */


/* ---------------------------------------------------------
   ROW
--------------------------------------------------------- */

.chapter-back-row {

    width: 100% !important;

    display: flex !important;

    justify-content: flex-start !important;
    align-items: center !important;

    box-sizing: border-box !important;

    margin:
        14px auto
        18px !important;

    padding:
        0 28px !important;

    position: relative !important;

    z-index: 20 !important;
}


/* Main/setup screen */
.setup-chapter-back-row {

    max-width:
        900px !important;

    margin:
        14px auto
        0 !important;

    padding:
        0 !important;
}


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

.chapter-back-button {

    width:
        auto !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        6px !important;

    padding:
        10px 20px !important;

    box-sizing:
        border-box !important;

    border:
        0 !important;

    border-radius:
        999px !important;

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

    color:
        #063c78 !important;

    text-decoration:
        none !important;

    text-align:
        center !important;

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

    font-size:
        14px !important;

    line-height:
        1.2 !important;

    font-weight:
        800 !important;

    letter-spacing:
        0 !important;

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

    cursor:
        pointer !important;

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


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

.chapter-back-arrow {

    flex:
        0 0 auto !important;

    color:
        #063c78 !important;

    font-size:
        15px !important;

    line-height:
        1 !important;

    font-weight:
        800 !important;
}


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

.chapter-back-button:hover {

    color:
        #063c78 !important;

    text-decoration:
        none !important;

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

    transform:
        translateY(-1px) !important;

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


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

.chapter-back-button:active {

    transform:
        translateY(0) !important;

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


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

.chapter-back-button:focus-visible {

    outline:
        3px solid
        rgba(
            238,
            166,
            77,
            .35
        ) !important;

    outline-offset:
        3px !important;
}


/* =========================================================
   IMPORTANT:
   When setup screen is active, hide the old bottom/global
   copy because the setup screen now has its own visible one.
========================================================= */

.game-shell:has(
    #setup-screen.active
) > .chapter-back-row {

    display:
        none !important;
}


/*
   But never hide the button that is actually INSIDE
   setup-screen.
*/
#setup-screen
.setup-chapter-back-row {

    display:
        flex !important;
}


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

@media (
    max-width: 700px
) {

    .chapter-back-row {

        padding:
            0 14px !important;

        margin-top:
            12px !important;
    }


    .setup-chapter-back-row {

        padding:
            0 !important;
    }


    .chapter-back-button {

        padding:
            9px 16px !important;

        font-size:
            13px !important;
    }


    .chapter-back-arrow {

        font-size:
            14px !important;
    }

}



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

/* AK_TEREK_ACTIVITY1_READABLE_TYPOGRAPHY_V1_START */


/* ==========================================================
   AK TEREK — KOK TEREK

   Typography reference:
   Chapter I — Activity 1

   Special request from screenshot:
   Increase friend-entry text by approximately 5px.
   ========================================================== */


/* ----------------------------------------------------------
   1. BASE ACTIVITY FONT
   ---------------------------------------------------------- */

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;
}


/* ----------------------------------------------------------
   2. MAIN KYRGYZ / ENGLISH TITLES
   ---------------------------------------------------------- */

.intro-card h1,
.intro-card h2,
.name-heading h3,
.game-header h1,
.game-header h2,
.header-copy h1,
.header-copy h2 {

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

    font-weight:
        700 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ----------------------------------------------------------
   3. RULES / EXPLANATION TEXT
   ---------------------------------------------------------- */

.intro-rule,
.intro-rule strong,
.intro-rule p,
.intro-rule small {

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

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;
}


.intro-rule strong {

    font-weight:
        700 !important;
}


.intro-rule p {

    font-weight:
        400 !important;
}


.intro-rule small {

    font-weight:
        400 !important;
}


/* ==========================================================
   4. FRIEND ENTRY PANEL

   THIS IS THE MAIN SCREENSHOT FIX.
   ========================================================== */


/* Heading: "10 досуңдун атын жаз" */

.name-heading h3 {

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

    font-weight:
        700 !important;

    letter-spacing:
        0 !important;
}


/* ----------------------------------------------------------
   Instruction strip above the 10 names

   Make it clearly readable.
   ---------------------------------------------------------- */

.name-card .friend-instruction,
.name-card .names-instruction,
.name-card .setup-instruction,
.name-card > p,
.friend-grid + p {

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

    font-size:
        15px !important;

    font-weight:
        500 !important;

    line-height:
        1.3 !important;

    letter-spacing:
        0 !important;
}


/* ----------------------------------------------------------
   FRIEND ROW

   Give the larger text enough vertical room.
   ---------------------------------------------------------- */

#setup-screen .friend-grid label,
.friend-grid label {

    min-height:
        50px !important;

    padding:
        5px 9px !important;

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


/* ----------------------------------------------------------
   NUMBER CIRCLES — 1, 2, 3...
   ---------------------------------------------------------- */

.friend-grid label > span:first-child {

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

    font-size:
        15px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;
}


/* ==========================================================
   5. FRIEND NAME INPUT

   SCREENSHOT:
       current desktop CSS = 13px

   NEW:
       18px

   Approximately +5px as requested.
   ========================================================== */

#setup-screen .friend-grid input,
.friend-grid input {

    height:
        40px !important;

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

    font-size:
        18px !important;

    font-weight:
        500 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;
}


/* Placeholder should have the same readable size. */

#setup-screen .friend-grid input::placeholder,
.friend-grid input::placeholder {

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

    font-size:
        18px !important;

    font-weight:
        400 !important;

    opacity:
        .78 !important;
}


/* ==========================================================
   6. GIRL / BOY SELECTOR

   SCREENSHOT:
       current desktop CSS = 11px

   NEW:
       16px

   Again +5px.
   ========================================================== */

#setup-screen .friend-gender-select,
.friend-gender-select {

    height:
        40px !important;

    padding:
        5px 8px !important;

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

    font-size:
        16px !important;

    font-weight:
        500 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;
}


.friend-gender-select option {

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

    font-size:
        16px !important;

    font-weight:
        500 !important;
}


/* ==========================================================
   7. NAME COUNTER — 0 / 10
   ========================================================== */

.name-heading > strong {

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

    font-size:
        14px !important;

    font-weight:
        700 !important;
}


/* ==========================================================
   8. START GAME BUTTON
   ========================================================== */

.main-button,
.main-button strong,
.main-button span,
.start-button,
.start-button strong,
.start-button span {

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

    letter-spacing:
        0 !important;
}


.main-button strong,
.start-button strong {

    font-size:
        15px !important;

    font-weight:
        700 !important;
}


.main-button span,
.start-button span {

    font-size:
        11px !important;

    font-weight:
        400 !important;
}


/* ==========================================================
   9. LATER GAME QUESTIONS

   Same Activity 1 hierarchy.
   ========================================================== */

.question-content h3,
.question-top h2 {

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

    font-weight:
        750 !important;

    letter-spacing:
        .002em !important;
}


.question-content p {

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

    font-weight:
        400 !important;

    letter-spacing:
        0 !important;
}


.answer-button,
.answer-button strong {

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

    font-weight:
        650 !important;

    letter-spacing:
        0 !important;
}


.answer-button small {

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

    font-weight:
        400 !important;
}


/* ==========================================================
   10. FEEDBACK
   ========================================================== */

.feedback,
.feedback strong,
.feedback span,
.feedback p {

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


.feedback,
.feedback strong {

    font-weight:
        700 !important;
}


/* ==========================================================
   11. BACK TO CHAPTER

   Match Activity 1 typography exactly.
   ========================================================== */

.chapter-back-button,
.chapter-back-button *,

.back-to-chapter,
.back-to-chapter *,

.back-btn,
.back-btn *,

.back-button,
.back-button * {

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;

    text-transform:
        none !important;

    text-rendering:
        optimizeLegibility !important;
}


.chapter-back-arrow {

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

    font-size:
        14px !important;

    font-weight:
        700 !important;
}


/* Prevent mobile rule from changing its typography. */

@media (max-width: 700px) {

    .chapter-back-button,
    .chapter-back-button * {

        font-size:
            14px !important;

        font-weight:
            700 !important;

        line-height:
            1.15 !important;
    }

}


/* ==========================================================
   12. KEEP DESKTOP FRIEND TEXT LARGE

   This comes AFTER old compact desktop rules such as
   13px input / 11px selector.
   ========================================================== */

@media (min-width: 900px) {

    #setup-screen .friend-grid input {

        height:
            40px !important;

        font-size:
            18px !important;
    }


    #setup-screen .friend-grid input::placeholder {

        font-size:
            18px !important;
    }


    #setup-screen .friend-gender-select {

        height:
            40px !important;

        font-size:
            16px !important;
    }


    #setup-screen .friend-grid label {

        min-height:
            50px !important;
    }

}


/* ==========================================================
   13. SHORT LAPTOP SCREEN PROTECTION

   The previous compact block also forces these controls down
   to about 31px high. Override that here.
   ========================================================== */

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

    #setup-screen .friend-grid input {

        height:
            40px !important;

        font-size:
            18px !important;
    }


    #setup-screen .friend-gender-select {

        height:
            40px !important;

        font-size:
            16px !important;
    }


    #setup-screen .friend-grid label {

        min-height:
            50px !important;
    }

}


/* AK_TEREK_ACTIVITY1_READABLE_TYPOGRAPHY_V1_END */

/* AK_TEREK_READABLE_RULE_TEXT_V2_START */


/* ==========================================================
   OPENING RULES — READABLE TYPOGRAPHY

   Fixes the compact desktop rules that reduced:
       Kyrgyz text to ~13px
       English summary to ~8px
   ========================================================== */


/* ----------------------------------------------------------
   WHOLE RULE BOX
   ---------------------------------------------------------- */

#setup-screen .intro-rule {

    max-width:
        960px !important;

    padding:
        13px 18px !important;
}


/* ----------------------------------------------------------
   RULE HEADING
   "Оюндун санариптик эрежеси"
   ---------------------------------------------------------- */

#setup-screen .intro-rule strong {

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

    font-size:
        17px !important;

    font-weight:
        700 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;
}


/* ----------------------------------------------------------
   KYRGYZ RULE SENTENCES
   ---------------------------------------------------------- */

#setup-screen .intro-rule p {

    margin:
        4px 0 !important;

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

    font-size:
        16px !important;

    font-weight:
        400 !important;

    line-height:
        1.35 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ----------------------------------------------------------
   ENGLISH SUMMARY

   This is the main screenshot problem.
   Old compact rule forced it to about 8px.
   ---------------------------------------------------------- */

#setup-screen .intro-rule small {

    display:
        block !important;

    margin-top:
        6px !important;

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

    font-size:
        13px !important;

    font-weight:
        400 !important;

    line-height:
        1.35 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ----------------------------------------------------------
   ALSO COVER ALTERNATE RULE CLASSES
   ---------------------------------------------------------- */

#setup-screen .rules-card p,
#setup-screen .rules-box p,
#setup-screen .intro-rules p {

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

    font-size:
        16px !important;

    font-weight:
        400 !important;

    line-height:
        1.35 !important;
}


#setup-screen .rules-card .en,
#setup-screen .rules-box .en,
#setup-screen .intro-rules .en {

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

    font-size:
        13px !important;

    font-weight:
        400 !important;

    line-height:
        1.35 !important;
}


/* ----------------------------------------------------------
   SHORT LAPTOPS

   Do NOT let later compact rules shrink this text again.
   ---------------------------------------------------------- */

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

    #setup-screen .intro-rule strong {

        font-size:
            17px !important;
    }


    #setup-screen .intro-rule p {

        font-size:
            16px !important;

        line-height:
            1.35 !important;
    }


    #setup-screen .intro-rule small {

        font-size:
            13px !important;

        line-height:
            1.35 !important;
    }

}


/* AK_TEREK_READABLE_RULE_TEXT_V2_END */