/* =========================================================
   AK KUU UCHTU — VERSION 2
   Bilingual traditional game + digital literacy activity
========================================================= */

* {
    box-sizing: border-box;
}

:root {
    --blue: #184493;
    --blue-dark: #103777;
    --blue-soft: #eaf3ff;

    --gold: #edae16;
    --gold-dark: #c98200;
    --gold-soft: #fff6d9;

    --red: #dd3443;
    --red-dark: #b91f30;

    --teal: #12988f;
    --teal-soft: #e7f8f5;

    --ink: #17345f;
    --text: #30486d;
    --muted: #6f7f99;

    --line: #cbdcf3;
    --page: #f4f9ff;
    --card: #ffffff;

    --success: #16835c;
    --success-soft: #e9f8f0;

    --danger: #c93844;
    --danger-soft: #fff0f1;

    --shadow:
        0 18px 45px rgba(26, 64, 126, 0.12);
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    min-height: 100vh;

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

    color: var(--text);

    background:
        linear-gradient(
            135deg,
            #fffaf0 0%,
            #f0f8ff 45%,
            #eaf7f6 100%
        );
}


button,
a {
    font: inherit;
}


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

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

    padding: 26px 20px 45px;
}


.game-card {
    width: min(1240px, 100%);
    min-height: 760px;

    margin: 0 auto;

    background: var(--card);

    border: 5px solid var(--blue);
    border-radius: 34px;

    box-shadow: var(--shadow);

    overflow: hidden;
}


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

.game-header {
    padding:
        27px
        30px
        15px;

    text-align: center;
}


.game-header h1 {
    margin: 0;

    color: var(--gold-dark);

    font-size: clamp(31px, 4vw, 48px);
    line-height: 1.05;
}


.game-header h1 span,
.game-header h1 small {
    display: block;
}


.game-header h1 small {
    margin-top: 7px;

    color: var(--blue);
    font-size: 18px;
    font-weight: 700;
}


.game-header p {
    margin: 12px 0 0;

    color: #526d9d;

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


.game-header .dot {
    margin: 0 8px;
    color: var(--gold);
}


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

.score-bar {
    display: flex;
    justify-content: center;
    align-items: stretch;

    gap: 14px;

    padding:
        0
        24px
        20px;
}


.score-item {
    min-width: 180px;

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

    gap: 9px;

    padding: 10px 16px;

    background: var(--gold-soft);

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

    color: var(--blue);
}


.score-item span {
    font-size: 14px;
    font-weight: 700;
}


.score-item span small {
    display: block;

    margin-top: 2px;

    color: var(--muted);
    font-size: 10px;
}


.score-item strong {
    font-size: 21px;
}


.score-item b {
    font-size: 14px;
}


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

.game-screen {
    display: none;

    padding:
        20px
        36px
        40px;

    animation: screenFade 0.35s ease;
}


.game-screen.active-screen {
    display: block;
}


.hidden {
    display: none !important;
}


@keyframes screenFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

.intro-layout {
    display: grid;

    grid-template-columns:
        minmax(330px, 0.9fr)
        minmax(430px, 1.1fr);

    gap: 36px;

    align-items: start;
}


/* FAMILY PHOTO */

.family-panel {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


.family-photo-wrap {
    position: relative;

    min-height: 480px;

    overflow: hidden;

    border: 4px solid var(--blue);
    border-radius: 27px;

    background: var(--blue-soft);

    box-shadow:
        0 12px 28px rgba(21, 67, 145, 0.12);
}


.family-photo {
    width: 100%;
    height: 100%;
    min-height: 480px;

    display: block;

    object-fit: cover;
    object-position: center;
}


.photo-caption {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 18px;

    padding: 13px 16px;

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

    border-radius: 17px;

    text-align: center;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12);
}


.photo-caption strong,
.photo-caption span {
    display: block;
}


.photo-caption strong {
    color: var(--blue);
    font-size: 16px;
}


.photo-caption span {
    margin-top: 3px;

    color: var(--muted);
    font-size: 13px;
}


/* TUTORIAL */

.tutorial-card {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    gap: 13px;

    align-items: center;

    padding: 16px;

    background: #fff9e7;

    border: 2px solid #efc863;
    border-radius: 20px;
}


.tutorial-icon {
    width: 43px;
    height: 43px;

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

    border-radius: 50%;

    background: var(--red);
    color: white;

    font-size: 18px;

    box-shadow:
        0 7px 14px rgba(221, 52, 67, 0.2);
}


.tutorial-copy strong,
.tutorial-copy span {
    display: block;
}


.tutorial-copy strong {
    color: var(--blue);
    font-size: 14px;
}


.tutorial-copy span {
    margin-top: 4px;

    color: #667792;
    font-size: 12px;
    line-height: 1.4;
}


.tutorial-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 120px;

    padding: 10px 13px;

    text-decoration: none;

    border-radius: 14px;

    background: var(--red);
    color: white;

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

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


.tutorial-btn small {
    margin-top: 2px;

    font-size: 9px;
    opacity: 0.9;
}


.tutorial-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 16px rgba(221, 52, 67, 0.22);
}


/* INTRO CONTENT */

.intro-content {
    padding-top: 5px;
}


.intro-badge {
    width: fit-content;

    padding: 8px 13px;

    background: var(--teal-soft);

    color: #087f77;

    border-radius: 999px;

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


.intro-badge small {
    display: block;

    margin-top: 2px;

    font-size: 9px;
}


.intro-content h2 {
    margin:
        18px
        0
        13px;

    color: var(--blue);

    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.15;
}


.intro-content h2 small {
    display: block;

    margin-top: 6px;

    color: #6680aa;

    font-size: 16px;
}


.intro-lead {
    margin: 8px 0;

    font-size: 19px;
    line-height: 1.55;
    color: darkblue;
}


.english-copy {
    font-size: 19px;
    line-height: 1.55;
    color: darkblue;
}


/* SOCIAL MESSAGE */

.social-message {
    display: grid;

    grid-template-columns:
        auto
        1fr;

    gap: 12px;

    margin: 17px 0;

    padding: 14px 16px;

    background: #3989d3;

    border: 2px solid #bce8e3;
    border-radius: 18px;
}


.social-icon {
    width: 34px;
    height: 34px;

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

    background: var(--teal);
    color: white;

    border-radius: 50%;
}


.social-message strong {
    color: var(--teal);
}


.social-message p {
    margin: 4px 0;

    font-size: 13px;
    line-height: 1.4;
}


.social-message small {
    color: #6f8099;
    font-size: 11px;
}


/* INSTRUCTIONS */

.how-it-works {
    display: grid;

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

    gap: 10px;

    margin: 18px 0;
}


.instruction-card {
    display: grid;

    grid-template-columns:
        auto
        1fr;

    gap: 10px;

    min-height: 94px;

    padding: 12px;

    background: #f7fbff;

    border: 2px solid #d5e4f7;
    border-radius: 17px;
}


.instruction-number {
    width: 33px;
    height: 33px;

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

    background: var(--red);
    color: white;

    border-radius: 50%;

    font-weight: 800;
}


.instruction-card strong,
.instruction-card small {
    display: block;
}


.instruction-card strong {
    color: var(--blue);
    font-size: 14px;
}


.instruction-card small {
    margin-top: 2px;

    color: #6e81a1;
    font-size: 10px;
}


.instruction-card p {
    margin: 7px 0 0;

    font-size: 12px;
    line-height: 1.35;
}


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

.primary-btn,
.secondary-btn {
    border: 0;

    cursor: pointer;

    font-weight: 800;

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


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

    padding: 12px 22px;

    background:
        linear-gradient(
            135deg,
            #1c4c9f,
            #123b80
        );

    color: white;

    border-radius: 15px;

    box-shadow:
        0 8px 18px rgba(24, 68, 147, 0.22);
}


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


.primary-btn small {
    margin-top: 3px;

    font-size: 10px;
    opacity: 0.9;
}


.primary-btn:hover,
.secondary-btn:hover {
    transform: translateY(-2px);
}


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

    padding: 14px 24px;
}


.secondary-btn {
    min-width: 130px;

    padding: 11px 20px;

    background: white;

    color: var(--blue);

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


.secondary-btn span,
.secondary-btn small {
    display: block;
}


.secondary-btn small {
    margin-top: 2px;

    font-size: 10px;
}


/* =========================================================
   STARTER SELECTION
========================================================= */

.starter-card {
    max-width: 790px;

    margin: 20px auto;

    padding: 40px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #f8fbff,
            #edf7ff
        );

    border: 3px solid #c9dcf5;
    border-radius: 30px;
}


.eyebrow {
    margin: 0;

    color: var(--gold-dark);

    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.05em;
}


.eyebrow span {
    display: block;

    margin-top: 3px;

    color: #8290a5;

    font-size: 10px;
}


.starter-card h2 {
    margin: 13px 0 30px;

    color: var(--blue);

    font-size: 34px;
}


.starter-card h2 small {
    display: block;

    margin-top: 6px;

    color: #7083a4;
    font-size: 15px;
}


.starter-spinner {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    gap: 20px;

    align-items: center;
}


.starter-option {
    padding: 25px;

    border: 3px solid transparent;
    border-radius: 25px;

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


.starter-option.flash {
    transform: scale(1.04);

    background: white;
    border-color: var(--gold);
}


.starter-option.selected {
    transform: scale(1.07);

    background: var(--gold-soft);
    border-color: var(--gold);

    box-shadow:
        0 10px 22px rgba(237, 174, 22, 0.2);
}


.starter-avatar,
.avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto;

    border-radius: 50%;

    color: white;

    font-weight: 900;
}


.starter-avatar {
    width: 86px;
    height: 86px;

    font-size: 21px;
}


.user-avatar {
    background:
        linear-gradient(
            145deg,
            #ec4350,
            #c92536
        );
}


.computer-avatar {
    background:
        linear-gradient(
            145deg,
            #16a69b,
            #087e78
        );
}


.starter-option strong,
.starter-option span {
    display: block;
}


.starter-option strong {
    margin-top: 12px;

    color: var(--blue);

    font-size: 20px;
}


.starter-option span {
    margin-top: 3px;

    color: #7a89a1;
    font-size: 12px;
}


.starter-vs {
    color: #9ba9bb;
    font-weight: 900;
}


.starter-result {
    margin-top: 28px;

    color: var(--blue);

    font-size: 21px;
    font-weight: 900;
}


.starter-result small {
    display: block;

    margin-top: 4px;

    color: #788ba8;
    font-size: 12px;
}


/* =========================================================
   DIALOGUE
========================================================= */

.round-role-banner {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 11px;

    margin: 0 auto 20px;

    padding: 10px 18px;

    background: var(--gold-soft);

    border: 2px solid var(--gold);
    border-radius: 18px;
}


#round-role-icon {
    width: 34px;
    height: 34px;

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

    background: var(--gold);
    color: white;

    border-radius: 50%;
}


.round-role-banner strong,
.round-role-banner small {
    display: block;
}


.round-role-banner strong {
    color: var(--blue);
}


.round-role-banner small {
    margin-top: 2px;

    color: #7d8290;
    font-size: 10px;
}


.dialogue-box {
    max-width: 960px;

    min-height: 270px;

    margin: 0 auto;

    display: grid;

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

    gap: 25px;

    align-items: center;

    padding: 35px;

    background: #f5faff;

    border: 3px dashed #abc8eb;
    border-radius: 30px;
}


.dialogue-player {
    text-align: center;
}


.avatar {
    width: 76px;
    height: 76px;

    font-size: 18px;
}


.dialogue-player strong,
.dialogue-player small {
    display: block;
}


.dialogue-player strong {
    margin-top: 10px;

    color: var(--blue);
}


.dialogue-player small {
    margin-top: 2px;

    color: #7d8ea8;
    font-size: 11px;
}


.speech-column {
    text-align: center;
}


.speaker-name {
    margin-bottom: 8px;

    color: var(--teal);

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


.speech-bubble {
    padding: 22px;

    background: var(--gold-soft);

    color: var(--blue);

    border: 3px solid var(--gold);
    border-radius: 22px;

    font-size: 23px;
    font-weight: 900;
}


.speech-translation {
    margin-top: 8px;

    color: #71819a;
    font-size: 13px;
}


.dialogue-controls {
    margin-top: 20px;

    text-align: center;
}


/* NUMBER */

.number-choice,
.computer-number-panel {
    max-width: 600px;

    margin: 20px auto 0;

    padding: 20px;

    background: #fffaf0;

    border: 2px solid #ecd07c;
    border-radius: 20px;

    text-align: center;
}


.number-choice h3 {
    margin: 0;

    color: var(--blue);

    font-size: 27px;
}


.number-choice h3 small {
    display: block;

    margin-top: 3px;

    color: #8290a5;

    font-size: 12px;
}


.number-choice p {
    margin: 8px 0 15px;

    color: #64748e;
}


.number-choice p span {
    display: block;

    margin-top: 3px;

    font-size: 11px;
}


.number-buttons {
    display: flex;
    justify-content: center;

    gap: 12px;
}


.number-buttons button {
    width: 58px;
    height: 58px;

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

    background: white;

    color: var(--blue);

    cursor: pointer;

    font-size: 23px;
    font-weight: 900;

    transition:
        transform 0.16s ease,
        background 0.16s ease;
}


.number-buttons button:hover {
    transform: translateY(-4px);

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


.computer-number-panel span,
.computer-number-panel span small {
    display: block;
}


.computer-number-panel span {
    color: #6f7d92;

    font-size: 14px;
}


.computer-number-panel span small {
    margin-top: 2px;

    font-size: 10px;
}


.computer-number-panel strong {
    display: block;

    margin-top: 8px;

    color: var(--gold-dark);

    font-size: 48px;
}


/* =========================================================
   HAND GAME
========================================================= */

.hand-header {
    text-align: center;
}


.hand-role-badge {
    width: fit-content;

    margin: 0 auto 15px;

    padding: 8px 15px;

    border-radius: 999px;

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

    font-weight: 900;
}


.hand-role-badge span {
    display: block;

    margin-top: 2px;

    font-size: 10px;
}


.hand-header h2 {
    margin: 0;

    color: var(--blue);

    font-size: 29px;
}


.hand-header h2 small {
    display: block;

    margin-top: 4px;

    color: #7587a3;
    font-size: 13px;
}


.hand-header > p:last-child {
    margin: 11px 0 0;

    color: #687b98;
}


.hand-header > p:last-child span {
    display: block;

    margin-top: 3px;

    font-size: 11px;
}


.count-progress {
    width: fit-content;

    margin: 18px auto 10px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 7px 14px;

    background: var(--gold-soft);

    border-radius: 12px;
}


.count-progress span {
    color: #6e7790;

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


.count-progress span small {
    display: block;

    font-size: 8px;
}


.count-progress strong {
    color: var(--gold-dark);

    font-size: 24px;
}


.hand-arena {
    max-width: 950px;

    min-height: 360px;

    margin: 0 auto;

    display: grid;

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

    gap: 30px;

    align-items: center;

    padding: 35px;

    background:
        linear-gradient(
            180deg,
            #f3f9ff,
            #edf8f8
        );

    border: 3px dashed #9bbce3;
    border-radius: 30px;
}


.hand-player {
    text-align: center;
}


.hand-name {
    margin-bottom: 18px;
}


.hand-name strong,
.hand-name small {
    display: block;
}


.hand-name strong {
    color: var(--blue);
}


.hand-name small {
    margin-top: 3px;

    color: #8090a8;
    font-size: 10px;
}


/* HAND SHAPE */

.hand {
    position: relative;

    width: 130px;
    height: 115px;

    margin: 24px auto 0;

    display: block;

    background: transparent;

    border: 0;

    cursor: pointer;

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


.hand:hover {
    transform: scale(1.04);
}


.palm {
    position: absolute;

    left: 29px;
    top: 28px;

    width: 73px;
    height: 77px;

    background: #ffd6b8;

    border: 3px solid #c68c6a;
    border-radius: 30px 30px 34px 34px;
}


.finger {
    position: absolute;

    width: 18px;

    background: #ffd6b8;

    border: 3px solid #c68c6a;
    border-radius: 13px;
}


.finger-1 {
    height: 68px;

    left: 28px;
    top: 0;
}


.finger-2 {
    height: 78px;

    left: 50px;
    top: -9px;
}


.finger-3 {
    height: 72px;

    left: 72px;
    top: -4px;
}


.finger-4 {
    height: 60px;

    left: 94px;
    top: 7px;
}


.hand-right {
    transform: scaleX(-1);
}


.hand-right:hover {
    transform:
        scaleX(-1)
        scale(1.04);
}


.hand.escape {
    transform:
        translateX(-105px)
        rotate(-8deg);

    opacity: 0.7;
}


.hand-right.escape {
    transform:
        scaleX(-1)
        translateX(-105px)
        rotate(-8deg);

    opacity: 0.7;
}


.hand.caught {
    animation: caughtShake 0.35s ease;
}


@keyframes caughtShake {
    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}


/* COUNT */

.count-zone {
    text-align: center;
}


.count-display {
    width: 130px;
    height: 130px;

    margin: 0 auto;

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

    background: white;

    color: var(--blue);

    border: 6px solid var(--gold);
    border-radius: 50%;

    font-size: 61px;
    font-weight: 900;

    box-shadow:
        0 9px 24px rgba(237, 174, 22, 0.18);
}


.count-display.final-number {
    background: var(--gold);
    color: white;

    animation:
        finalPulse
        0.55s
        ease
        infinite alternate;
}


@keyframes finalPulse {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.09);
    }
}


.action-call {
    margin-top: 17px;

    color: #66758d;

    font-size: 20px;
    font-weight: 900;
}


.action-call small {
    display: block;

    margin-top: 2px;

    font-size: 11px;
}


.action-call.go {
    color: var(--red);

    font-size: 27px;
}


/* REACTION */

.reaction-message {
    min-height: 75px;

    max-width: 700px;

    margin: 18px auto 0;

    padding: 14px;

    border-radius: 18px;

    text-align: center;

    font-weight: 800;
}


.reaction-message strong,
.reaction-message span {
    display: block;
}


.reaction-message span {
    margin-top: 4px;

    font-size: 12px;
}


.reaction-message.success {
    background: var(--success-soft);

    border: 2px solid #a7dbc3;

    color: var(--success);
}


.reaction-message.failure {
    background: var(--danger-soft);

    border: 2px solid #f3bdc2;

    color: var(--danger);
}


/* =========================================================
   DIGITAL MISSION
========================================================= */

.mission-top {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}


.category-badge,
.reward-badge {
    padding: 9px 15px;

    border-radius: 999px;

    font-weight: 900;
}


.category-badge {
    background: var(--teal-soft);

    color: var(--teal);
}


.category-badge small {
    display: block;

    margin-top: 2px;

    font-size: 9px;
}


.reward-badge {
    background: var(--gold-soft);

    color: var(--gold-dark);

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

    font-size: 19px;
}


#mission-screen > h2 {
    margin: 0 0 18px;

    text-align: center;

    color: var(--blue);
}


#mission-screen > h2 small {
    display: block;

    margin-top: 5px;

    color: #8190a6;
    font-size: 12px;
}


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

    margin: 0 auto 20px;

    display: grid;

    grid-template-columns:
        auto
        1fr;

    gap: 15px;

    align-items: start;

    padding: 20px;

    background: #f8fbff;

    border: 2px solid #d6e4f6;
    border-radius: 20px;
}


.question-number {
    width: 41px;
    height: 41px;

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

    background: var(--blue);
    color: white;

    border-radius: 50%;

    font-size: 23px;
    font-weight: 900;
}


.mission-question {
    margin: 0;

    color: var(--blue);

    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
}


.mission-question-en {
    margin: 7px 0 0;

    color: #657893;

    font-size: 14px;
    line-height: 1.45;
}


/* KEYBOARD */

.keyboard-area {
    max-width: 800px;

    margin: 0 auto;
}


.keyboard-help {
    text-align: center;

    color: #60738f;

    font-weight: 700;
}


.keyboard-help span {
    display: block;

    margin-top: 3px;

    font-size: 11px;
}


.selected-shortcut {
    width: fit-content;
    min-width: 180px;

    margin: 14px auto;

    padding: 13px 20px;

    background: var(--gold-soft);

    color: var(--blue);

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

    text-align: center;

    font-size: 23px;
    font-weight: 900;
}


.keyboard {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 9px;

    padding: 18px;

    background: #eef4fa;

    border: 2px solid #d5e2f0;
    border-radius: 20px;
}


.key {
    min-width: 55px;

    padding: 12px 13px;

    background: white;

    color: var(--blue);

    border: 2px solid #b8cbe4;
    border-radius: 11px;

    cursor: pointer;

    font-weight: 800;

    box-shadow:
        0 4px 0 #a9bdd5;

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


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


.key.selected {
    background: var(--blue);
    color: white;

    border-color: var(--blue);

    box-shadow:
        0 4px 0 var(--blue-dark);
}


.modifier-key {
    min-width: 74px;
}


.wide-key {
    min-width: 80px;
}


.keyboard-actions {
    display: flex;
    justify-content: center;

    gap: 12px;

    margin-top: 17px;
}


.answer-feedback {
    max-width: 700px;

    min-height: 20px;

    margin: 18px auto;

    padding: 0;

    text-align: center;
}


.answer-feedback.correct,
.answer-feedback.wrong {
    padding: 14px 16px;

    border-radius: 17px;
}


.answer-feedback.correct {
    background: var(--success-soft);
    color: var(--success);

    border: 2px solid #b0ddc7;
}


.answer-feedback.wrong {
    background: var(--danger-soft);
    color: var(--danger);

    border: 2px solid #efb8bd;
}


#next-round-btn {
    display: block;

    margin: 18px auto 0;
}


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

.final-card {
    max-width: 800px;

    margin: 5px auto;

    padding: 35px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #fbfdff,
            #f0f8ff
        );

    border: 3px solid #c8dcf4;
    border-radius: 30px;
}


.final-symbol {
    width: 72px;
    height: 72px;

    margin: 0 auto 15px;

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

    background: var(--gold);
    color: white;

    border-radius: 50%;

    font-size: 35px;

    box-shadow:
        0 8px 18px rgba(237, 174, 22, 0.22);
}


.final-card h2 {
    margin: 13px 0;

    color: var(--blue);

    font-size: 37px;
}


.final-card h2 small {
    display: block;

    margin-top: 5px;

    color: #7e8da4;
    font-size: 14px;
}


#final-message {
    margin-bottom: 5px;

    font-weight: 700;
}


.final-message-en {
    margin-top: 0;

    color: #708099;

    font-size: 13px;
}


.final-stats {
    display: grid;

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

    gap: 12px;

    margin: 25px 0;
}


.final-stats > div {
    padding: 17px;

    background: white;

    border: 2px solid #d6e3f4;
    border-radius: 17px;
}


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


.final-stats strong {
    color: var(--gold-dark);

    font-size: 31px;
}


.final-stats span {
    margin-top: 4px;

    color: var(--blue);
    font-weight: 800;
}


.final-stats small {
    margin-top: 2px;

    color: #8795a9;
    font-size: 9px;
}


.real-life-challenge {
    margin: 20px 0;

    padding: 18px;

    background: var(--teal-soft);

    border: 2px solid #bde6e2;
    border-radius: 19px;
}


.real-life-challenge strong,
.real-life-challenge span,
.real-life-challenge small {
    display: block;
}


.real-life-challenge strong {
    color: var(--teal);

    font-size: 18px;
}


.real-life-challenge span {
    margin-top: 3px;

    color: #497a78;

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


.real-life-challenge p {
    margin: 9px 0 5px;

    font-size: 13px;
}


.real-life-challenge small {
    color: #688483;

    font-size: 11px;
}


.final-actions {
    display: flex;
    justify-content: center;
    align-items: stretch;

    gap: 12px;
}


.secondary-link-btn {
    min-width: 165px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 11px 17px;

    text-decoration: none;

    background: white;

    color: var(--red);

    border: 2px solid var(--red);
    border-radius: 14px;

    font-weight: 800;
}


.secondary-link-btn small {
    margin-top: 3px;

    font-size: 9px;
}


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

@media (max-width: 900px) {

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


    .family-photo-wrap {
        min-height: 400px;
    }


    .family-photo {
        min-height: 400px;
    }


    .dialogue-box {
        grid-template-columns:
            110px
            1fr
            110px;

        gap: 15px;

        padding: 25px 15px;
    }


    .hand-arena {
        grid-template-columns:
            1fr
            150px
            1fr;

        gap: 12px;

        padding: 25px 14px;
    }

}


@media (max-width: 650px) {

    .game-page {
        padding: 8px;
    }


    .game-card {
        border-width: 3px;
        border-radius: 22px;
    }


    .game-screen {
        padding:
            15px
            15px
            28px;
    }


    .score-bar {
        flex-wrap: wrap;
    }


    .score-item {
        min-width: 140px;
    }


    .how-it-works {
        grid-template-columns: 1fr;
    }


    .tutorial-card {
        grid-template-columns:
            auto
            1fr;
    }


    .tutorial-btn {
        grid-column:
            1
            /
            -1;

        width: 100%;
    }


    .starter-card {
        padding: 25px 15px;
    }


    .starter-spinner {
        grid-template-columns:
            1fr
            auto
            1fr;

        gap: 8px;
    }


    .starter-avatar {
        width: 65px;
        height: 65px;
    }


    .dialogue-box {
        grid-template-columns:
            1fr;

        gap: 18px;
    }


    .dialogue-player {
        display: none;
    }


    .hand-arena {
        grid-template-columns:
            1fr;

        gap: 18px;
    }


    .count-zone {
        order: -1;
    }


    .hand {
        margin-top: 15px;
    }


    .number-buttons {
        flex-wrap: wrap;
    }


    .final-stats {
        grid-template-columns: 1fr;
    }


    .final-actions {
        flex-direction: column;
    }

}


/* =========================================================
   COMPACT ONE-SCREEN DESKTOP LAYOUT
========================================================= */

@media (min-width: 901px) {

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

    body {
        overflow-x: hidden;
    }

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

        padding:
            10px
            14px;
    }

    .game-card {
        width: min(1280px, 100%);

        min-height: 0;

        margin: 0 auto;

        border-width: 4px;
        border-radius: 26px;
    }


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

    .game-header {
        padding:
            10px
            24px
            6px;
    }

    .game-header h1 {
        font-size: 30px;
        line-height: 1;
    }

    .game-header h1 small {
        margin-top: 3px;

        font-size: 13px;
    }

    .game-header p {
        margin-top: 5px;

        font-size: 12px;
    }


    /* -------------------------
       SCORE BAR
    ------------------------- */

    .score-bar {
        gap: 9px;

        padding:
            0
            18px
            8px;
    }

    .score-item {
        min-width: 145px;

        gap: 6px;

        padding:
            6px
            11px;

        border-radius: 14px;
    }

    .score-item span {
        font-size: 11px;
    }

    .score-item span small {
        font-size: 8px;
    }

    .score-item strong {
        font-size: 17px;
    }

    .score-item b {
        font-size: 11px;
    }


    /* -------------------------
       ALL SCREENS
    ------------------------- */

    .game-screen {
        padding:
            8px
            26px
            16px;
    }


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

    .intro-layout {
        grid-template-columns:
            minmax(310px, 0.88fr)
            minmax(500px, 1.12fr);

        gap: 24px;

        align-items: center;
    }

    .family-panel {
        gap: 9px;
    }

    .family-photo-wrap {
        height: 385px;
        min-height: 0;

        border-width: 3px;
        border-radius: 21px;
    }

    .family-photo {
        width: 100%;
        height: 385px;
        min-height: 0;

        object-fit: cover;
        object-position: center 42%;
    }

    .photo-caption {
        left: 11px;
        right: 11px;
        bottom: 10px;

        padding: 8px 10px;

        border-radius: 13px;
    }

    .photo-caption strong {
        font-size: 13px;
    }

    .photo-caption span {
        margin-top: 1px;

        font-size: 10px;
    }


    /* TUTORIAL ON ONE LINE */

    .tutorial-card {
        grid-template-columns:
            auto
            1fr
            auto;

        gap: 8px;

        padding: 8px 10px;

        border-radius: 15px;
    }

    .tutorial-icon {
        width: 32px;
        height: 32px;

        font-size: 13px;
    }

    .tutorial-copy strong {
        font-size: 11px;
    }

    .tutorial-copy span {
        margin-top: 2px;

        font-size: 9px;
        line-height: 1.25;
    }

    .tutorial-btn {
        min-width: 100px;

        padding: 7px 9px;

        border-radius: 11px;

        font-size: 10px;
    }

    .tutorial-btn small {
        font-size: 8px;
    }


    /* START SCREEN TEXT */

    .intro-content {
        padding-top: 0;
    }

    .intro-badge {
        padding: 5px 10px;

        font-size: 10px;
    }

    .intro-badge small {
        font-size: 8px;
    }

    .intro-content h2 {
        margin:
            9px
            0
            6px;

        font-size: 24px;
        line-height: 1.05;
    }

    .intro-content h2 small {
        margin-top: 3px;

        font-size: 12px;
    }

    .intro-lead {
        margin: 4px 0;

        font-size: 12px;
        line-height: 1.32;
    }

    .social-message {
        gap: 8px;

        margin: 8px 0;

        padding: 8px 10px;

        border-radius: 13px;
    }

    .social-icon {
        width: 26px;
        height: 26px;

        font-size: 11px;
    }

    .social-message strong {
        font-size: 11px;
    }

    .social-message p {
        margin: 2px 0;

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

    .social-message small {
        font-size: 9px;
    }


    /* FOUR RULES IN A SINGLE ROW */

    .how-it-works {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 7px;

        margin: 8px 0;
    }

    .instruction-card {
        display: block;

        min-height: 0;

        padding: 7px;

        text-align: center;

        border-radius: 12px;
    }

    .instruction-number {
        width: 25px;
        height: 25px;

        margin:
            0
            auto
            4px;

        font-size: 11px;
    }

    .instruction-card strong {
        font-size: 10px;
    }

    .instruction-card small {
        margin-top: 1px;

        font-size: 8px;
    }

    .instruction-card p {
        margin-top: 3px;

        font-size: 9px;
        line-height: 1.2;
    }


    /* BUTTONS */

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

        padding: 9px 17px;

        border-radius: 12px;

        font-size: 12px;
    }

    .primary-btn small {
        margin-top: 1px;

        font-size: 8px;
    }

    .large-btn {
        min-width: 180px;

        padding: 10px 18px;
    }


    /* =====================================================
       RANDOM STARTER SCREEN
    ===================================================== */

    .starter-card {
        max-width: 720px;

        margin: 4px auto;

        padding: 22px 30px;

        border-radius: 23px;
    }

    .starter-card h2 {
        margin:
            7px
            0
            15px;

        font-size: 26px;
    }

    .starter-card h2 small {
        margin-top: 3px;

        font-size: 11px;
    }

    .starter-spinner {
        gap: 13px;
    }

    .starter-option {
        padding: 14px;

        border-radius: 18px;
    }

    .starter-avatar {
        width: 62px;
        height: 62px;

        font-size: 15px;
    }

    .starter-option strong {
        margin-top: 6px;

        font-size: 15px;
    }

    .starter-option span {
        font-size: 10px;
    }

    .starter-result {
        margin-top: 13px;

        font-size: 16px;
    }


    /* =====================================================
       DIALOGUE
    ===================================================== */

    .round-role-banner {
        gap: 7px;

        margin-bottom: 9px;

        padding: 6px 12px;

        border-radius: 13px;
    }

    #round-role-icon {
        width: 27px;
        height: 27px;
    }

    .dialogue-box {
        max-width: 900px;
        min-height: 185px;

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

        gap: 15px;

        padding: 18px 24px;

        border-radius: 22px;
    }

    .avatar {
        width: 58px;
        height: 58px;

        font-size: 14px;
    }

    .dialogue-player strong {
        margin-top: 5px;
    }

    .speaker-name {
        margin-bottom: 4px;
    }

    .speech-bubble {
        padding: 13px;

        border-radius: 16px;

        font-size: 18px;
    }

    .speech-translation {
        margin-top: 4px;

        font-size: 11px;
    }

    .dialogue-controls {
        margin-top: 9px;
    }

    .number-choice,
    .computer-number-panel {
        margin-top: 9px;

        padding: 10px;

        border-radius: 14px;
    }

    .number-choice h3 {
        font-size: 20px;
    }

    .number-choice p {
        margin:
            4px
            0
            8px;

        font-size: 11px;
    }

    .number-buttons {
        gap: 8px;
    }

    .number-buttons button {
        width: 43px;
        height: 43px;

        border-radius: 11px;

        font-size: 17px;
    }

    .computer-number-panel strong {
        margin-top: 3px;

        font-size: 34px;
    }


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

    .hand-role-badge {
        margin-bottom: 7px;

        padding: 5px 11px;

        font-size: 11px;
    }

    .hand-header h2 {
        font-size: 22px;
    }

    .hand-header h2 small {
        margin-top: 2px;

        font-size: 10px;
    }

    .hand-header > p:last-child {
        margin-top: 5px;

        font-size: 11px;
    }

    .count-progress {
        margin:
            8px
            auto
            6px;

        padding: 4px 10px;
    }

    .count-progress strong {
        font-size: 18px;
    }

    .hand-arena {
        max-width: 850px;
        min-height: 255px;

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

        gap: 18px;

        padding: 17px 25px;

        border-radius: 22px;
    }

    .hand-name {
        margin-bottom: 5px;
    }

    .hand {
        transform-origin: center;

        margin-top: 8px;
    }

    .hand-left {
        transform: scale(0.82);
    }

    .hand-right {
        transform:
            scaleX(-1)
            scale(0.82);
    }

    .hand-left:hover {
        transform: scale(0.86);
    }

    .hand-right:hover {
        transform:
            scaleX(-1)
            scale(0.86);
    }

    .count-display {
        width: 98px;
        height: 98px;

        border-width: 5px;

        font-size: 45px;
    }

    .action-call {
        margin-top: 8px;

        font-size: 15px;
    }

    .action-call.go {
        font-size: 21px;
    }

    .reaction-message {
        min-height: 0;

        margin-top: 8px;

        padding: 8px;

        font-size: 12px;
    }


    /* =====================================================
       DIGITAL MISSION
    ===================================================== */

    .mission-top {
        gap: 8px;

        margin-bottom: 8px;
    }

    .category-badge,
    .reward-badge {
        padding: 6px 11px;
    }

    .reward-badge {
        font-size: 15px;
    }

    #mission-screen > h2 {
        margin-bottom: 8px;

        font-size: 21px;
    }

    .question-card {
        max-width: 720px;

        margin-bottom: 9px;

        gap: 10px;

        padding: 11px;

        border-radius: 14px;
    }

    .question-number {
        width: 31px;
        height: 31px;

        font-size: 17px;
    }

    .mission-question {
        font-size: 13px;
        line-height: 1.3;
    }

    .mission-question-en {
        margin-top: 3px;

        font-size: 11px;
        line-height: 1.25;
    }

    .keyboard-help {
        margin:
            4px
            0;

        font-size: 11px;
    }

    .selected-shortcut {
        min-width: 145px;

        margin: 6px auto;

        padding: 7px 13px;

        font-size: 17px;
    }

    .keyboard {
        gap: 6px;

        padding: 10px;

        border-radius: 14px;
    }

    .key {
        min-width: 45px;

        padding: 8px 9px;

        border-radius: 8px;

        font-size: 11px;
    }

    .modifier-key {
        min-width: 61px;
    }

    .wide-key {
        min-width: 65px;
    }

    .keyboard-actions {
        margin-top: 8px;
    }

    .answer-feedback {
        margin: 7px auto;

        font-size: 11px;
    }

    .answer-feedback.correct,
    .answer-feedback.wrong {
        padding: 7px 10px;
    }

    #next-round-btn {
        margin-top: 7px;
    }


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

    .final-card {
        max-width: 730px;

        margin: 0 auto;

        padding: 20px 28px;

        border-radius: 23px;
    }

    .final-symbol {
        width: 48px;
        height: 48px;

        margin-bottom: 7px;

        font-size: 22px;
    }

    .final-card h2 {
        margin: 7px 0;

        font-size: 27px;
    }

    .final-stats {
        gap: 8px;

        margin: 13px 0;
    }

    .final-stats > div {
        padding: 10px;
    }

    .final-stats strong {
        font-size: 23px;
    }

    .real-life-challenge {
        margin: 10px 0;

        padding: 10px;
    }

    .real-life-challenge strong {
        font-size: 14px;
    }

    .real-life-challenge p {
        margin:
            4px
            0
            2px;

        font-size: 11px;
    }

}

/* =========================================================
   VERSION 2.1 — ADAPTIVE MISSION MODES
========================================================= */


/* ---------------------------------------------------------
   UNLOCK MESSAGE
--------------------------------------------------------- */

.mission-unlock-message {
    width: fit-content;
    max-width: 680px;

    margin:
        0
        auto
        14px;

    padding:
        8px
        15px;

    text-align: center;

    border-radius: 14px;

    background: #f3f7fc;

    color: var(--blue);

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


.mission-unlock-message small {
    display: block;

    margin-top: 2px;

    color: #74859f;

    font-size: 9px;
}


/* =========================================================
   EXPLORER MODE
========================================================= */

#mission-screen.explorer-mode
.category-badge {
    background: #eaf3ff;

    color: var(--blue);

    border:
        2px solid
        #aac8ef;
}


#mission-screen.explorer-mode
.mission-unlock-message {
    background: #edf5ff;

    border:
        2px solid
        #bfd5f2;
}


/* =========================================================
   SAFETY MODE
========================================================= */

#mission-screen.safety-mode
.category-badge {
    background: var(--teal-soft);

    color: var(--teal);

    border:
        2px solid
        #a9ded8;
}


#mission-screen.safety-mode
.mission-unlock-message {
    background: #edfaf8;

    color: #087f77;

    border:
        2px solid
        #b9e7e2;
}


/* =========================================================
   RECOVERY MODE
========================================================= */

#mission-screen.recovery-mode
.category-badge {
    background: var(--gold-soft);

    color: var(--gold-dark);

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


#mission-screen.recovery-mode
.mission-unlock-message {
    background: #fff8e6;

    color: #996400;

    border:
        2px solid
        #ecd17c;
}


/* =========================================================
   MULTIPLE CHOICE AREA
========================================================= */

.choice-area {
    max-width: 820px;

    margin: 0 auto;

    display: grid;

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

    gap: 12px;
}


/* ---------------------------------------------------------
   ANSWER CARD
--------------------------------------------------------- */

.mission-choice {
    min-height: 82px;

    display: grid;

    grid-template-columns:
        auto
        1fr;

    gap: 12px;

    align-items: center;

    padding:
        13px
        15px;

    text-align: left;

    background: white;

    color: var(--text);

    border:
        2px solid
        #cbdcf1;

    border-radius: 17px;

    cursor: pointer;

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


.mission-choice:hover:not(:disabled) {
    transform:
        translateY(-3px);

    border-color:
        #799ed1;

    box-shadow:
        0
        7px
        16px
        rgba(
            25,
            69,
            145,
            0.10
        );
}


/* ---------------------------------------------------------
   A B C D
--------------------------------------------------------- */

.choice-letter {
    width: 37px;
    height: 37px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--blue);

    color: white;

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


/* ---------------------------------------------------------
   BILINGUAL ANSWER
--------------------------------------------------------- */

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


.choice-copy strong {
    color: var(--blue);

    font-size: 13px;
    line-height: 1.28;
}


.choice-copy small {
    margin-top: 4px;

    color: #72829a;

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


/* =========================================================
   CORRECT CHOICE
========================================================= */

.mission-choice.correct-choice {
    background: var(--success-soft);

    border-color:
        #68bd95;

    box-shadow:
        0
        6px
        15px
        rgba(
            22,
            131,
            92,
            0.12
        );
}


.mission-choice.correct-choice
.choice-letter {
    background: var(--success);
}


.mission-choice.correct-choice
.choice-copy strong {
    color: var(--success);
}


/* =========================================================
   WRONG CHOICE
========================================================= */

.mission-choice.wrong-choice {
    background: var(--danger-soft);

    border-color:
        #e7a1a8;

    opacity: 0.75;
}


.mission-choice.wrong-choice
.choice-letter {
    background: var(--danger);
}


/* =========================================================
   DISABLED
========================================================= */

.mission-choice:disabled {
    cursor: default;
}


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

.feedback-english {
    display: block;

    margin-top: 3px;

    font-size: 11px;
}


.mission-explanation {
    margin-top: 9px;

    padding-top: 8px;

    border-top:
        1px solid
        rgba(
            22,
            131,
            92,
            0.18
        );
}


.mission-explanation strong,
.mission-explanation small {
    display: block;
}


.mission-explanation strong {
    font-size: 11px;
}


.mission-explanation small {
    margin-top: 3px;

    font-size: 10px;

    font-weight: 500;
}


/* =========================================================
   DESKTOP COMPACT MODE
========================================================= */

@media (min-width: 901px) {

    .mission-unlock-message {
        margin-bottom: 7px;

        padding:
            5px
            11px;

        font-size: 10px;
    }


    .choice-area {
        max-width: 760px;

        gap: 8px;
    }


    .mission-choice {
        min-height: 61px;

        gap: 8px;

        padding:
            8px
            10px;

        border-radius: 12px;
    }


    .choice-letter {
        width: 29px;
        height: 29px;

        font-size: 11px;
    }


    .choice-copy strong {
        font-size: 11px;
    }


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

        font-size: 9px;
    }


    .mission-explanation {
        margin-top: 5px;

        padding-top: 5px;
    }

}


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

@media (max-width: 650px) {

    .choice-area {
        grid-template-columns:
            1fr;
    }


    .mission-choice {
        min-height: 70px;
    }

}


/* =========================================================
   AK_KUU_SOUND_BUTTON_V1
========================================================= */

.ak-kuu-sound-toggle {
    position: absolute;

    top: 14px;
    right: 18px;

    z-index: 20;

    min-width: 112px;

    padding:
        7px
        11px;

    border:
        2px solid
        #cbdcf3;

    border-radius: 13px;

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

    color: var(--blue);

    cursor: pointer;

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

    line-height: 1.1;

    box-shadow:
        0 5px 14px
        rgba(
            24,
            68,
            147,
            0.10
        );

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


.ak-kuu-sound-toggle small {
    display: block;

    margin-top: 2px;

    color: #7a8ba5;

    font-size: 8px;
}


.ak-kuu-sound-toggle:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 7px 16px
        rgba(
            24,
            68,
            147,
            0.15
        );
}


@media (max-width: 650px) {

    .ak-kuu-sound-toggle {
        position: static;

        display: block;

        margin:
            8px
            10px
            0
            auto;
    }

}


/* =========================================================
   AK_KUU_CHAPTER_RETURN_CSS_V1
========================================================= */

.chapter-return-btn {
    position: absolute;
    top: 14px;
    left: 18px;
    z-index: 20;

    min-width: 128px;
    padding: 7px 12px;

    border: 2px solid #cbdcf3;
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.97);
    color: var(--blue);

    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;

    cursor: pointer;

    box-shadow:
        0 5px 14px
        rgba(24, 68, 147, 0.10);

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

.chapter-return-btn span,
.chapter-return-btn small {
    display: block;
}

.chapter-return-btn small {
    margin-top: 2px;

    color: #7a8ba5;

    font-size: 8px;
}

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

    border-color: #8eadd6;

    box-shadow:
        0 7px 16px
        rgba(24, 68, 147, 0.15);
}

@media (max-width: 650px) {

    .chapter-return-btn {
        position: static;

        width: fit-content;

        margin:
            8px
            auto
            4px
            10px;
    }
}


/* =========================================================
   AK_KUU_ROLE_REMINDER_CSS_V1
========================================================= */

.role-reminder {
    width: fit-content;
    max-width: 760px;

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

    gap: 8px;

    margin:
        -2px
        auto
        10px;

    padding:
        7px
        10px;

    background: #f8fbff;

    border:
        2px solid
        #d2e0f2;

    border-radius: 15px;
}


/* TITLE */

.role-reminder-title {
    padding-right: 9px;

    border-right:
        1px solid
        #d3deed;

    text-align: center;
}

.role-reminder-title strong,
.role-reminder-title span {
    display: block;
}

.role-reminder-title strong {
    color: var(--blue);

    font-size: 11px;
}

.role-reminder-title span {
    margin-top: 1px;

    color: #7989a1;

    font-size: 8px;
}


/* INDIVIDUAL RULE */

.role-rule {
    display: flex;
    align-items: center;

    gap: 6px;

    padding:
        5px
        8px;

    border:
        2px solid
        transparent;

    border-radius: 11px;

    opacity: 0.58;

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

.role-rule-icon {
    width: 24px;
    height: 24px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #e9eff8;

    font-size: 12px;
}

.role-rule strong,
.role-rule small {
    display: block;
}

.role-rule strong {
    color: var(--blue);

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

.role-rule small {
    margin-top: 2px;

    color: #73849d;

    font-size: 8px;
}


/* ACTIVE RULE */

.role-rule.active-rule {
    opacity: 1;

    transform: scale(1.02);
}


/* YOU START → CATCH */

.role-reminder.catch-mode
#catch-rule.active-rule {
    background: #fff7dc;

    border-color: #edae16;
}

.role-reminder.catch-mode
#catch-rule.active-rule
.role-rule-icon {
    background: #edae16;

    color: white;
}


/* COMPUTER STARTS → ESCAPE */

.role-reminder.escape-mode
#escape-rule.active-rule {
    background: #e9f8f5;

    border-color: #12988f;
}

.role-reminder.escape-mode
#escape-rule.active-rule
.role-rule-icon {
    background: #12988f;

    color: white;
}


/* DESKTOP COMPACT */

@media (min-width: 901px) {

    .role-reminder {
        margin-bottom: 8px;

        padding:
            5px
            8px;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .role-reminder {
        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }

    .role-reminder-title {
        padding:
            0
            0
            5px;

        border-right: 0;

        border-bottom:
            1px solid
            #d3deed;
    }

}



/* =========================================================
   AK_KUU_INTERFACE_V3
   Clean bilingual one-screen presentation
========================================================= */

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


/* ---------------------------------------------------------
   TYPOGRAPHY HIERARCHY
--------------------------------------------------------- */

body {
    font-weight: 400;
}

.game-header h1 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.game-header h1 small {
    font-weight: 600;
}

.game-header p {
    font-weight: 500;
}

.intro-content h2,
.hand-header h2,
#mission-screen > h2,
.final-card h2 {
    font-weight: 700;
}

.intro-lead,
.mission-question-en,
.choice-copy small,
.instruction-card p {
    font-weight: 400;
}


/* ---------------------------------------------------------
   SCORE BAR
--------------------------------------------------------- */

.score-bar {
    gap: 10px;
}

.score-item {
    min-width: 170px;

    padding:
        7px
        15px;

    background: #fffdf8;

    border:
        1.5px solid
        #e4b43e;

    border-radius: 14px;

    box-shadow:
        0 3px 9px
        rgba(25, 64, 128, 0.06);
}

.score-item span {
    font-size: 10px;
    font-weight: 600;
}

.score-item span small {
    margin-top: 1px;

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

.score-item strong {
    font-size: 20px;
    font-weight: 700;
}

.score-item b {
    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   GAME PATH GUIDE
========================================================= */

.game-path-guide {
    width:
        min(
            1180px,
            calc(100% - 36px)
        );

    margin:
        0
        auto
        10px;

    padding:
        8px
        12px
        7px;

    background:
        linear-gradient(
            180deg,
            #fbfdff,
            #f7fbff
        );

    border:
        1.5px solid
        #cadcf2;

    border-radius: 16px;
}


/* TITLE */

.game-path-title {
    display: flex;
    align-items: baseline;
    justify-content: center;

    gap: 5px;

    margin-bottom: 7px;

    color: var(--blue);
}

.game-path-title strong {
    font-size: 11px;
    font-weight: 700;
}

.game-path-title span {
    color: #7186a5;

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


/* THREE PATHS */

.game-path-cards {
    display: grid;

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

    gap: 9px;
}


/* CARD */

.game-path-card {
    display: grid;

    grid-template-columns:
        auto
        auto
        18px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 7px;

    min-height: 69px;

    padding:
        8px
        10px;

    background: white;

    border:
        1.5px solid
        #d6e3f3;

    border-radius: 13px;
}


/* ICON */

.path-icon {
    width: 34px;
    height: 34px;

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

    border-radius: 50%;

    font-size: 16px;
}


/* TEXT */

.path-result strong,
.path-result span,
.path-mission strong,
.path-mission span,
.path-mission small,
.path-points strong,
.path-points span,
.path-points small {
    display: block;
}

.path-result strong {
    color: var(--blue);

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

.path-result span {
    margin-top: 2px;

    color: #6e819f;

    font-size: 8px;
}

.path-arrow {
    color: #8ba4c5;

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

.path-mission strong {
    color: var(--blue);

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

.path-mission span {
    margin-top: 1px;

    color: #546c91;

    font-size: 8px;
}

.path-mission small {
    margin-top: 4px;

    color: #7d8da4;

    font-size: 7.5px;
    line-height: 1.2;
}

.path-points {
    min-width: 38px;

    text-align: center;
}

.path-points strong {
    font-size: 23px;
    line-height: 1;
    font-weight: 700;
}

.path-points span {
    margin-top: 2px;

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

.path-points small {
    font-size: 7px;
}


/* EXPLORER */

.explorer-path {
    background:
        linear-gradient(
            135deg,
            #f4f9ff,
            #ffffff
        );

    border-color: #bdd5f2;
}

.explorer-path .path-icon {
    background: #e5f0ff;
}

.explorer-path .path-points strong {
    color: #2868be;
}


/* SAFETY */

.safety-path {
    background:
        linear-gradient(
            135deg,
            #eefaf8,
            #ffffff
        );

    border-color: #b9e3dd;
}

.safety-path .path-icon {
    background: #dcf5f1;
}

.safety-path .path-points strong {
    color: #0b9186;
}


/* PRACTICE */

.practice-path {
    background:
        linear-gradient(
            135deg,
            #fff8e7,
            #ffffff
        );

    border-color: #ecd59a;
}

.practice-path .path-icon {
    background: #fff0c7;
}

.practice-path .path-points strong {
    color: #d78309;
}


/* NOTE */

.game-path-note {
    display: flex;
    justify-content: center;
    align-items: baseline;

    gap: 6px;

    margin:
        6px
        0
        0;

    text-align: center;
}

.game-path-note strong {
    color: var(--blue);

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

.game-path-note span {
    color: #71839e;

    font-size: 8px;
}


/* ---------------------------------------------------------
   INTRO CARDS — LIGHTER TYPOGRAPHY
--------------------------------------------------------- */

.instruction-card {
    border-width: 1.5px;

    box-shadow:
        0 2px 6px
        rgba(25, 64, 128, 0.04);
}

.instruction-card strong {
    font-weight: 700;
}

.instruction-card p {
    color: #536987;
}


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

.primary-btn,
.secondary-btn,
.tutorial-btn {
    font-weight: 700;
}


/* =========================================================
   COMPACT LAPTOP SCREEN
========================================================= */

@media (min-width: 901px) {

    .game-path-guide {
        margin-bottom: 7px;

        padding:
            6px
            10px;
    }

    .game-path-title {
        margin-bottom: 5px;
    }

    .game-path-card {
        min-height: 60px;

        padding:
            6px
            8px;
    }

    .path-icon {
        width: 29px;
        height: 29px;

        font-size: 13px;
    }

    .path-points strong {
        font-size: 19px;
    }

    .game-path-note {
        margin-top: 4px;
    }

}


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

@media (max-width: 800px) {

    .game-path-cards {
        grid-template-columns: 1fr;
    }

    .game-path-note {
        flex-direction: column;

        gap: 2px;
    }

}



/* =========================================================
   AK_KUU_SIMPLER_INTRO_V4
========================================================= */


/* ---------------------------------------------------------
   ONE-LINE BILINGUAL TITLE
--------------------------------------------------------- */

.bilingual-game-title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px;

    margin: 0;

    line-height: 1;
}

.bilingual-game-title .title-ky {
    color: var(--gold-dark);

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

.bilingual-game-title .title-divider {
    color: #b7c2d2;

    font-size: 20px;
    font-weight: 400;
}

.bilingual-game-title .title-en {
    color: var(--gold-dark);

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


/* Neutralize old h1 span/small block behaviour */

.game-header h1.bilingual-game-title span {
    display: inline;
}

.game-header h1.bilingual-game-title small {
    display: inline;
}


/* ---------------------------------------------------------
   COMPACT REMEMBER CARD
--------------------------------------------------------- */

.intro-remember {
    display: grid;

    grid-template-columns:
        auto
        1fr
        1fr;

    gap: 8px;

    align-items: stretch;

    margin:
        9px
        0;

    padding:
        7px;

    background: #f8fbff;

    border:
        1.5px solid
        #d3e1f2;

    border-radius: 14px;
}


.intro-remember-title {
    min-width: 92px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        4px
        9px;

    text-align: center;

    border-right:
        1px solid
        #d7e2ef;
}

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

.intro-remember-title strong {
    color: var(--blue);

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

.intro-remember-title span {
    margin-top: 1px;

    color: #7c8ba1;

    font-size: 8px;
}


/* RULES */

.intro-remember-rule {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 46px;

    padding:
        6px
        10px;

    border-radius: 11px;
}

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

.intro-remember-rule strong {
    font-size: 10px;
    font-weight: 700;
}

.intro-remember-rule span {
    margin-top: 2px;

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


/* CATCH */

.catch-rule-intro {
    background: #fff8df;

    border:
        1px solid
        #efd27b;
}

.catch-rule-intro strong {
    color: #a86b00;
}


/* ESCAPE */

.escape-rule-intro {
    background: #edf9f7;

    border:
        1px solid
        #bae5df;
}

.escape-rule-intro strong {
    color: #0b847b;
}


/* ---------------------------------------------------------
   SIMPLIFY START SCREEN VERTICAL SPACE
--------------------------------------------------------- */

.intro-content h2 {
    margin-top: 6px;
}

.intro-lead {
    margin:
        3px
        0;
}

.social-message {
    margin:
        7px
        0;
}

.how-it-works {
    margin:
        7px
        0;
}


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

@media (max-width: 800px) {

    .bilingual-game-title {
        gap: 5px;
    }

    .bilingual-game-title .title-ky {
        font-size: 24px;
    }

    .bilingual-game-title .title-en {
        font-size: 24px;
    }

    .intro-remember {
        grid-template-columns: 1fr;
    }

    .intro-remember-title {
        border-right: 0;

        border-bottom:
            1px solid
            #d7e2ef;
    }

}



/* Opening Game Path is intentionally hidden in the simplified intro.
   Mission explanations are shown dynamically during gameplay. */

.game-path-guide {
    display: none !important;
}

/* =========================================================
   AK_KUU_FINAL_VISUAL_SYSTEM_V1

   Single authoritative typography layer.
   Kyrgyz = primary.
   English = secondary.
   Navy = principal text colour.
   Gold / teal / red = controlled accents.
========================================================= */


/* ---------------------------------------------------------
   DESIGN TOKENS
--------------------------------------------------------- */

:root {
    --ak-navy: #103a78;
    --ak-blue: #17478f;
    --ak-text: #385777;
    --ak-muted: #74849c;

    --ak-teal: #14998f;
    --ak-teal-dark: #087d75;
    --ak-teal-soft: #eefaf8;

    --ak-gold: #e7a919;
    --ak-gold-dark: #c47d00;
    --ak-gold-soft: #fff8e6;

    --ak-red: #df3546;

    --ak-line: #c8dbf2;
    --ak-card-soft: #f7fbff;

    --ak-font-main:
        "Segoe UI",
        Arial,
        sans-serif;

    --ak-font-display:
        "Trebuchet MS",
        "Segoe UI",
        Arial,
        sans-serif;
}


/* ---------------------------------------------------------
   GLOBAL TYPOGRAPHY
--------------------------------------------------------- */

body {
    color: var(--ak-text);

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;

    letter-spacing: 0;
}

button,
a,
input {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}


/* =========================================================
   MAIN BILINGUAL TITLE

   Ак куу учту | Swan Takes Flight

   Same family, weight and navy colour.
   English remains smaller.
========================================================= */

.bilingual-game-title {
    display: flex !important;

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

    flex-wrap: wrap;

    gap: 9px;

    margin: 0;

    line-height: 1.05;
}

.bilingual-game-title .title-ky,
.bilingual-game-title .title-en {
    display: inline !important;

    color: var(--ak-navy) !important;

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

    font-weight: 700;

    letter-spacing: -0.45px;
}

.bilingual-game-title .title-ky {
    font-size:
        clamp(
            31px,
            3.3vw,
            44px
        );
}

.bilingual-game-title .title-divider {
    display: inline !important;

    color: var(--ak-gold) !important;

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

    font-size: 25px;
    font-weight: 400;

    line-height: 1;
}

.bilingual-game-title .title-en {
    font-size:
        clamp(
            31px,
            3.3vw,
            44px
        );
}


/* Neutralize old h1 span/small block behaviour */

.game-header h1.bilingual-game-title span,
.game-header h1.bilingual-game-title small {
    display: inline !important;
}


/* Header explanatory line */

.game-header p {
    color: #526b8d;

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


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

.score-item {
    background: #fffdf8;

    border-color: var(--ak-gold);

    box-shadow:
        0 3px 9px
        rgba(25, 64, 128, 0.06);
}

.score-item span {
    color: var(--ak-text);

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

.score-item span small {
    color: var(--ak-muted);

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

.score-item strong {
    color: var(--ak-navy);

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

.score-item b {
    color: var(--ak-text);

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


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

   Ойноп үйрөнүүгө даярсыңбы?
========================================================= */

.intro-content h2 {
    margin:
        10px
        0
        8px;

    color: var(--ak-navy);

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

    font-size:
        clamp(
            28px,
            2.8vw,
            36px
        );

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -0.6px;
}

.intro-content h2 small {
    display: block;

    margin-top: 5px;

    color: var(--ak-muted);

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

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

    line-height: 1.3;

    letter-spacing: 0;
}


/* Ordinary Kyrgyz paragraph */

.intro-lead {
    margin: 4px 0;

    color: var(--ak-text);

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

    line-height: 1.5;
}


/* English paragraph */

.intro-lead.english-copy {
    color: var(--ak-text);

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


/* =========================================================
   SOCIAL MESSAGE
========================================================= */

.social-message {
    background: var(--ak-teal-soft);

    border-color: #a8ddd8;
}

.social-message strong {
    color: var(--ak-teal-dark);

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

.social-message p {
    color: #455e7c;

    font-size: 11.5px;
    font-weight: 400;

    line-height: 1.4;
}

.social-message small {
    color: var(--ak-muted);

    font-size: 10px;
    font-weight: 400;
}


/* =========================================================
   REMEMBER / ROLE RULES
========================================================= */

.intro-remember,
.role-reminder {
    border-color: var(--ak-line);
}

.intro-remember-title strong,
.role-reminder-title strong {
    color: var(--ak-navy);

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

.intro-remember-title span,
.role-reminder-title span {
    color: var(--ak-muted);

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

.catch-rule-intro,
#catch-rule {
    background: var(--ak-gold-soft);
}

.escape-rule-intro,
#escape-rule {
    background: var(--ak-teal-soft);
}

.intro-remember-rule strong,
.role-rule strong {
    font-size: 11px;
    font-weight: 600;
}

.intro-remember-rule span,
.role-rule small {
    color: var(--ak-muted);

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


/* =========================================================
   INTRO INSTRUCTION CARDS
========================================================= */

.instruction-card {
    background: var(--ak-card-soft);

    border-color: #d2e1f4;
}

.instruction-number {
    background: var(--ak-red);

    font-weight: 700;
}

.instruction-card strong {
    color: var(--ak-navy);

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

    line-height: 1.3;
}

.instruction-card small {
    color: var(--ak-muted);

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

.instruction-card p {
    color: #526a87;

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

    line-height: 1.4;
}


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

.primary-btn,
.secondary-btn,
.tutorial-btn {
    font-weight: 600;

    letter-spacing: 0;
}

.primary-btn span,
.secondary-btn span {
    font-size: 13px;
    font-weight: 700;
}

.primary-btn small,
.secondary-btn small,
.tutorial-btn small {
    font-size: 9px;
    font-weight: 400;
}


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

.starter-card h2 {
    color: var(--ak-navy);

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

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

    letter-spacing: -0.35px;
}

.starter-card h2 small {
    color: var(--ak-muted);

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

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

.starter-option strong {
    color: var(--ak-navy);

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

.starter-option span {
    color: var(--ak-muted);

    font-size: 10px;
    font-weight: 400;
}

.starter-result {
    color: var(--ak-navy);

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


/* =========================================================
   ROUND ROLE BANNER
========================================================= */

.round-role-banner {
    background: var(--ak-gold-soft);

    border-color: var(--ak-gold);
}

.round-role-banner strong {
    color: var(--ak-navy);

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

.round-role-banner small {
    color: var(--ak-muted);

    font-size: 10px;
    font-weight: 400;
}


/* =========================================================
   DIALOGUE
========================================================= */

.dialogue-player strong {
    color: var(--ak-navy);

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

.dialogue-player small {
    color: var(--ak-muted);

    font-size: 10px;
    font-weight: 400;
}

.speaker-name {
    color: var(--ak-teal-dark);

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

.speech-bubble {
    background: var(--ak-gold-soft);

    color: var(--ak-navy);

    border-color: var(--ak-gold);

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

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

    font-weight: 700;

    line-height: 1.25;
}

.speech-translation {
    color: var(--ak-muted);

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

    line-height: 1.4;
}


/* =========================================================
   HAND GAME
========================================================= */

.hand-role-badge {
    font-size: 13px;
    font-weight: 700;
}

.hand-role-badge span {
    font-size: 9px;
    font-weight: 400;
}

.hand-header h2 {
    color: var(--ak-navy);

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

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

    font-weight: 700;
}

.hand-header h2 small {
    color: var(--ak-muted);

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

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

#hand-instruction {
    color: #49617f;

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

#hand-instruction span {
    color: var(--ak-muted);

    font-size: 11px;
    font-weight: 400;
}


/* =========================================================
   DIGITAL SHORTCUT MISSION
========================================================= */

.category-badge {
    background: var(--ak-teal-soft);

    color: var(--ak-teal-dark);

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

.category-badge small {
    color: var(--ak-teal-dark);

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

#mission-screen > h2 {
    color: var(--ak-navy);

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

    font-size:
        clamp(
            25px,
            2.4vw,
            32px
        );

    font-weight: 700;

    line-height: 1.15;
}

#mission-screen > h2 small {
    color: var(--ak-muted);

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

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

.mission-question {
    color: var(--ak-navy);

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

    line-height: 1.45;
}

.mission-question-en {
    color: var(--ak-muted);

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

    line-height: 1.4;
}


/* =========================================================
   KEYBOARD
========================================================= */

.keyboard-help {
    color: #526b8d;

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

.keyboard-help span {
    color: var(--ak-muted);

    font-size: 10px;
    font-weight: 400;
}

.selected-shortcut {
    color: var(--ak-navy);

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

.key {
    color: var(--ak-navy);

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

.key.modifier-key {
    font-weight: 700;
}


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

.answer-feedback {
    font-size: 11px;
    font-weight: 400;

    line-height: 1.45;
}

.answer-feedback strong {
    font-size: 13px;
    font-weight: 700;
}

.feedback-english {
    color: var(--ak-muted);

    font-size: 10px;
    font-weight: 400;
}


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

.final-card h2,
#finish-screen h2 {
    color: var(--ak-navy);

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

    font-weight: 700;

    letter-spacing: -0.4px;
}

.final-card h2 small {
    color: var(--ak-muted);

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

    font-weight: 400;
}


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

@media (max-width: 720px) {

    .bilingual-game-title {
        gap: 6px;
    }

    .bilingual-game-title .title-ky {
        font-size: 27px;
    }

    .bilingual-game-title .title-divider {
        font-size: 20px;
    }

    .bilingual-game-title .title-en {
        font-size: 16px;
    }

    .intro-content h2 {
        font-size: 27px;
    }

    .speech-bubble {
        padding: 14px;

        font-size: 19px;
    }

    .mission-question {
        font-size: 14px;
    }

    .mission-question-en {
        font-size: 11px;
    }
}


/* AK_KUU_FINAL_VISUAL_SYSTEM_V1_END */


/* AK_KUU_BRANDED_BACK_BUTTON_V2_START */


/* =========================================================
   AK KUU — BACK TO CHAPTER ONLY

   Do not alter any other part of this activity.
========================================================= */

.chapter-return-btn {

    position:
        fixed !important;

    top:
        176px !important;

    left:
        22px !important;

    z-index:
        999 !important;


    width:
        auto !important;

    min-width:
        0 !important;

    min-height:
        38px !important;


    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        6px !important;


    padding:
        8px 18px !important;


    border:
        0 !important;

    border-radius:
        999px !important;


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


    color:
        #063c78 !important;


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

    font-size:
        12px !important;

    line-height:
        1.1 !important;

    font-weight:
        800 !important;


    text-decoration:
        none !important;

    text-align:
        center !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;
}


/* ---------------------------------------------------------
   MAIN KYRGYZ LABEL
--------------------------------------------------------- */

.chapter-return-btn span {

    display:
        inline !important;

    color:
        #063c78 !important;

    font-size:
        12px !important;

    line-height:
        1.1 !important;

    font-weight:
        800 !important;
}


/* ---------------------------------------------------------
   ENGLISH LABEL
--------------------------------------------------------- */

.chapter-return-btn small {

    display:
        block !important;

    margin:
        2px 0 0 !important;

    color:
        rgba(
            6,
            60,
            120,
            .78
        ) !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    font-weight:
        600 !important;
}


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

.chapter-return-btn:hover {

    border:
        0 !important;

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

    color:
        #063c78 !important;

    transform:
        translateY(-1px) !important;

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


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

.chapter-return-btn:active {

    transform:
        translateY(0) !important;

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


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

@media (max-width: 700px) {

    .chapter-return-btn {

        position:
            fixed !important;

        top:
            168px !important;

        left:
            10px !important;

        min-height:
            34px !important;

        padding:
            6px 13px !important;
    }

}


/* AK_KUU_BRANDED_BACK_BUTTON_V2_END */


/* AK_KUU_BACK_INSIDE_CARD_V3_START */


/* =========================================================
   BACK TO CHAPTER
   Bottom-right inside the game card.
   Nothing else in the activity is changed.
========================================================= */

.game-card {

    /*
       Gives the Back button a positioning reference.
       Does not alter the card layout.
    */

    position:
        relative;
}


.chapter-return-btn {

    position:
        absolute !important;

    top:
        auto !important;

    left:
        auto !important;

    right:
        24px !important;

    bottom:
        14px !important;

    z-index:
        50 !important;


    width:
        auto !important;

    min-width:
        0 !important;

    min-height:
        38px !important;


    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        6px !important;


    padding:
        8px 18px !important;


    border:
        0 !important;

    border-radius:
        999px !important;


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


    color:
        #063c78 !important;


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

    font-size:
        12px !important;

    line-height:
        1.1 !important;

    font-weight:
        800 !important;


    text-decoration:
        none !important;

    text-align:
        center !important;


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


    cursor:
        pointer !important;


    transform:
        none !important;


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


.chapter-return-btn span {

    display:
        inline !important;

    color:
        #063c78 !important;

    font-size:
        12px !important;

    font-weight:
        800 !important;
}


.chapter-return-btn small {

    display:
        inline !important;

    margin:
        0 !important;

    color:
        rgba(
            6,
            60,
            120,
            .78
        ) !important;

    font-size:
        9px !important;

    font-weight:
        600 !important;
}


.chapter-return-btn:hover {

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

    color:
        #063c78 !important;

    transform:
        translateY(-1px) !important;

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


.chapter-return-btn:active {

    transform:
        translateY(0) !important;
}


/* ---------------------------------------------------------
   Small screens
--------------------------------------------------------- */

@media (max-width: 700px) {

    .chapter-return-btn {

        right:
            12px !important;

        bottom:
            10px !important;

        min-height:
            34px !important;

        padding:
            6px 13px !important;

        font-size:
            11px !important;
    }

}


/* AK_KUU_BACK_INSIDE_CARD_V3_END */



/* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_START */


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

   Unified Kyrgyz-friendly font rendering.

   Supports Kyrgyz Cyrillic clearly:
       Ө ө
       Ү ү
       Ң ң

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


:root {

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


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

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

html,
body {

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

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}


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

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

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

p,

button,
input,
textarea,
select,

label,

a,

li,

th,
td,

strong,
small,
em {

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

}


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

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

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

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

.challenge-question,
.challenge-title,

.prompt,
.prompt-text,

.instruction,
.instructions,
.instruction-text,

.scenario,

.feedback,
.explanation,

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

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

.quiz-question,
.quiz-option,

.task-title,
.task-question,

.result-title,
.result-message,

.card-title,
.card-text,

.game-title,
.game-question {

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

}


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

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

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

    font-kerning:
        normal;

    font-variant-ligatures:
        common-ligatures;

    letter-spacing:
        .002em;

    word-spacing:
        .02em;

    text-rendering:
        optimizeLegibility;
}


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

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

    font-weight:
        750;
}


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

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

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

    font-weight:
        650;
}


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

.feedback,
.explanation {

    line-height:
        1.4;
}


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

code,
pre,
kbd,
samp,

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

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

}


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

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

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

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

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

}


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

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


/* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_END */


/* FINAL_UNIFORM_ACTIVITY_FONT_V2_START */

/*
    FINAL UNIFORM E-BOOK ACTIVITY TYPOGRAPHY

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

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

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


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

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


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


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

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


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

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

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


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

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


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

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

/* FINAL_UNIFORM_ACTIVITY_FONT_V2_END */

/* AK_KUU_MATCH_ACTIVITY1_TYPOGRAPHY_V1_START */


/* ==========================================================
   AK KUU UCHTU
   TYPOGRAPHY MATCHED TO CHAPTER I — ACTIVITY 1
   ========================================================== */


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

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

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

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}


/* ----------------------------------------------------------
   2. NORMAL INTERFACE TEXT
   ---------------------------------------------------------- */

.game-header,
.game-header h1,
.game-header h1 small,
.game-header p,

.score-item,
.score-item span,
.score-item strong,
.score-item b,

.photo-caption,
.photo-caption strong,
.photo-caption span,

.tutorial-copy,
.tutorial-copy strong,
.tutorial-copy span,
.tutorial-btn,

.intro-badge,
.intro-content,
.intro-content h2,
.intro-content h2 small,
.intro-lead,
.english-copy,

.social-message,
.social-message strong,
.social-message p,
.social-message small,

.instruction-card,
.instruction-card strong,
.instruction-card small,
.instruction-card p,

.primary-btn,
.secondary-btn,

.eyebrow,
.starter-card,
.starter-card h2,
.starter-card h2 small,
.starter-option,
.starter-option strong,
.starter-option span,
.starter-result,

.round-role-banner,
.round-role-banner strong,
.round-role-banner small,

.dialogue-player,
.dialogue-player strong,
.dialogue-player small,

.speaker-name,
.speech-bubble,
.speech-translation,

.number-choice,
.number-choice h3,
.number-choice p,
.computer-number-panel,

.hand-role-badge,
.hand-header,
.hand-header h2,
.hand-header h2 small,

.count-progress,
.action-call,
.reaction-message,

.category-badge,
.reward-badge,

#mission-screen > h2,
.mission-question,
.mission-question-en,

.keyboard-help,
.selected-shortcut,

.answer-feedback,

.final-card,
.final-card h2,
.final-message-en,

.final-stats,
.real-life-challenge,

.secondary-link-btn {

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


/* ----------------------------------------------------------
   3. KYRGYZ CHARACTER RENDERING
   ---------------------------------------------------------- */

.game-header h1,
.game-header p,

.intro-content h2,
.intro-lead,

.social-message strong,
.social-message p,

.instruction-card strong,
.instruction-card p,

.starter-card h2,
.starter-result,

.speech-bubble,
.speech-translation,

.number-choice h3,
.number-choice p,

.hand-header h2,
.action-call,
.reaction-message,

#mission-screen > h2,
.mission-question,
.mission-question-en,

.final-card h2,
#final-message,
.real-life-challenge {

    font-kerning:
        normal !important;

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

    letter-spacing:
        .002em !important;

    word-spacing:
        .02em !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ----------------------------------------------------------
   4. MAIN TITLES
   ---------------------------------------------------------- */

.game-header h1,
.intro-content h2,
.starter-card h2,
.hand-header h2,
#mission-screen > h2,
.final-card h2 {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   5. ORDINARY BOLD LABELS
   ---------------------------------------------------------- */

.tutorial-copy strong,
.intro-badge,
.instruction-card strong,
.round-role-banner strong,
.dialogue-player strong,
.speaker-name,
.hand-role-badge,
.category-badge,
.reward-badge,
.final-stats span,
.real-life-challenge strong,
.real-life-challenge span {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   6. BUTTONS

   Existing rules frequently use 800.
   Match Activity 1 normal bold.
   ---------------------------------------------------------- */

.tutorial-btn,
.primary-btn,
.secondary-btn,
.secondary-link-btn {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   7. STARTER SCREEN
   ---------------------------------------------------------- */

.eyebrow {

    font-weight:
        700 !important;
}


.starter-option strong,
.starter-result {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   8. DIALOGUE / SPEECH

   Existing speech bubble used 900.
   ---------------------------------------------------------- */

.speech-bubble {

    font-weight:
        700 !important;
}


.speaker-name {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   9. HAND / REACTION GAME
   ---------------------------------------------------------- */

.hand-role-badge,
.action-call,
.reaction-message {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   10. MISSION QUESTION

   Activity 1 question reference = 750.
   ---------------------------------------------------------- */

.mission-question {

    font-weight:
        750 !important;
}


.mission-question-en {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   11. FEEDBACK
   ---------------------------------------------------------- */

.answer-feedback,
.reaction-message {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   12. FINAL SCREEN
   ---------------------------------------------------------- */

#final-message,
.final-stats span,
.real-life-challenge span {

    font-weight:
        700 !important;
}


.final-message-en,
.real-life-challenge p,
.real-life-challenge small {

    font-weight:
        400 !important;
}


/* ----------------------------------------------------------
   13. BACK TO CHAPTER

   EXACT Activity 1 typography:

       Arial / Helvetica
       14px
       700
       line-height 1.15
   ---------------------------------------------------------- */

.chapter-return-btn,
.chapter-return-btn *,

.back-btn,
.back-btn *,

.back-button,
.back-button *,

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

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-transform:
        none !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ----------------------------------------------------------
   14. RESPONSIVE BACK BUTTON

   Existing small-screen rule uses 11px.
   Keep Activity 1 typography.
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .chapter-return-btn,
    .chapter-return-btn *,

    .back-btn,
    .back-btn *,

    .back-button,
    .back-button *,

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

        font-size:
            14px !important;

        font-weight:
            700 !important;

        line-height:
            1.15 !important;
    }

}


/* ==========================================================
   15. PROTECT KEYBOARD / TECHNICAL TYPOGRAPHY

   Keyboard keys are part of the shortcut-learning activity,
   so they should remain visually technical and distinct.
   ========================================================== */

.key,
.key *,

.keyboard-key,
.keyboard-key *,

.shortcut-key,
.shortcut-key *,

.selected-shortcut,

code,
pre,
kbd,
samp {

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


/* Keep keyboard emphasis intentional. */

.key,
.selected-shortcut {

    font-weight:
        700 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;
}


/* AK_KUU_MATCH_ACTIVITY1_TYPOGRAPHY_V1_END */

/* AK_KUU_FINAL_VISIBLE_KYRGYZ_V2_START */


/* ==========================================================
   FINAL AK KUU TYPOGRAPHY
   VISUALLY MATCH ACTIVITY 1
   ========================================================== */


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

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

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

    -webkit-font-smoothing:
        antialiased !important;

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

    text-rendering:
        optimizeLegibility !important;
}


/* ----------------------------------------------------------
   MAIN PAGE TITLE
   "Ак куу учту"
   ---------------------------------------------------------- */

.game-header h1,
.game-header h1 span {

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

    font-weight:
        700 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;
}


/* English part under / beside title */

.game-header h1 small {

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

    font-weight:
        700 !important;

    letter-spacing:
        0 !important;
}


/* ----------------------------------------------------------
   SCORE BAR

   Make Kyrgyz labels cleaner and less visually heavy.
   ---------------------------------------------------------- */

.score-item,
.score-item span,
.score-item span small,
.score-item strong,
.score-item b {

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

    letter-spacing:
        0 !important;
}


.score-item span {

    font-weight:
        600 !important;
}


.score-item strong,
.score-item b {

    font-weight:
        700 !important;
}


.score-item span small {

    font-weight:
        400 !important;
}


/* ----------------------------------------------------------
   INTRO TITLE

   "Ойноп үйрөнүүгө даярсыңбы?"
   ---------------------------------------------------------- */

.intro-content h2 {

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

    font-weight:
        700 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;
}


/* English subtitle */

.intro-content h2 small {

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

    font-weight:
        600 !important;

    letter-spacing:
        0 !important;
}


/* ----------------------------------------------------------
   MAIN KYRGYZ INTRO PARAGRAPH

   This is ordinary reading text.
   It should NOT look like bold UI text.
   ---------------------------------------------------------- */

.intro-lead {

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

    font-weight:
        400 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;

    line-height:
        1.45 !important;
}


/* English paragraph */

.english-copy {

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

    font-weight:
        400 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;

    line-height:
        1.45 !important;
}


/* ----------------------------------------------------------
   REAL-LIFE PLAY MESSAGE

   Kyrgyz heading = normal bold.
   Description = normal text.
   ---------------------------------------------------------- */

.social-message,
.social-message strong,
.social-message p,
.social-message small {

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

    letter-spacing:
        0 !important;
}


.social-message strong {

    font-weight:
        700 !important;
}


.social-message p {

    font-weight:
        400 !important;
}


.social-message small {

    font-weight:
        400 !important;
}


/* ----------------------------------------------------------
   FOUR INSTRUCTION CARDS

   The screenshot shows these looking noticeably heavier.
   ---------------------------------------------------------- */

.instruction-card,
.instruction-card strong,
.instruction-card small,
.instruction-card p {

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

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;
}


.instruction-card strong {

    font-weight:
        700 !important;
}


.instruction-card p {

    font-weight:
        400 !important;
}


.instruction-card small {

    font-weight:
        400 !important;
}


.instruction-number {

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

    font-weight:
        700 !important;
}


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

   Same normal bold appearance as Activity 1 controls.
   ---------------------------------------------------------- */

.primary-btn,
.primary-btn span,
.primary-btn small {

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

    letter-spacing:
        0 !important;
}


.primary-btn,
.primary-btn span {

    font-weight:
        700 !important;
}


.primary-btn small {

    font-weight:
        400 !important;
}


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

   Visible at top-right in screenshot.
   ---------------------------------------------------------- */

.sound-toggle,
.sound-toggle *,
.sound-btn,
.sound-btn *,

[class*="sound-toggle"],
[class*="sound-toggle"] * {

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

    letter-spacing:
        0 !important;
}


.sound-toggle strong,
.sound-btn strong,
[class*="sound-toggle"] strong {

    font-weight:
        700 !important;
}


.sound-toggle small,
.sound-btn small,
[class*="sound-toggle"] small {

    font-weight:
        400 !important;
}


/* ----------------------------------------------------------
   TUTORIAL BAR
   ---------------------------------------------------------- */

.tutorial-copy strong,
.tutorial-copy span,
.tutorial-btn,
.tutorial-btn small {

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

    letter-spacing:
        0 !important;
}


.tutorial-copy strong,
.tutorial-btn {

    font-weight:
        700 !important;
}


.tutorial-copy span,
.tutorial-btn small {

    font-weight:
        400 !important;
}


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

   Match Activity 1 exactly in typography.

   IMPORTANT:
   Existing orange pill styling remains.
   ---------------------------------------------------------- */

.chapter-return-btn,
.chapter-return-btn span,
.chapter-return-btn strong,
.chapter-return-btn small,

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

.back-btn,
.back-btn * {

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;

    text-transform:
        none !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ----------------------------------------------------------
   DO NOT ALLOW RESPONSIVE RULES TO SHRINK THE BACK TEXT
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .chapter-return-btn,
    .chapter-return-btn *,

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

    .back-btn,
    .back-btn * {

        font-size:
            14px !important;

        font-weight:
            700 !important;

        line-height:
            1.15 !important;
    }

}


/* ==========================================================
   LATER GAME SCREENS
   ========================================================== */


/* Starter / role screens */

.starter-card h2,
.starter-result,
.round-role-banner strong,
.dialogue-player strong,
.number-choice h3,
.hand-header h2,
#mission-screen > h2,
.final-card h2 {

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

    font-weight:
        700 !important;

    letter-spacing:
        0 !important;
}


/* Normal explanatory text */

.starter-option span,
.round-role-banner small,
.dialogue-player small,
.speech-translation,
.number-choice p,
.mission-question-en,
.final-message-en {

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

    font-weight:
        400 !important;

    letter-spacing:
        0 !important;
}


/* Main game statement */

.speech-bubble {

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

    font-weight:
        700 !important;

    letter-spacing:
        0 !important;
}


/* Digital mission question */

.mission-question {

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

    font-weight:
        750 !important;

    letter-spacing:
        .002em !important;
}


/* Feedback */

.reaction-message,
.answer-feedback {

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

    font-weight:
        700 !important;

    letter-spacing:
        0 !important;
}


/* ==========================================================
   PROTECT SHORTCUT / KEYBOARD TYPOGRAPHY
   ========================================================== */

.key,
.key *,

.keyboard-key,
.keyboard-key *,

.shortcut-key,
.shortcut-key *,

.selected-shortcut,

kbd,
code,
pre,
samp {

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

    letter-spacing:
        normal !important;
}


/* AK_KUU_FINAL_VISIBLE_KYRGYZ_V2_END */