/* =========================================================
   BESH TASH: TYPING CHALLENGE
   Chapter III — Digital Tools
========================================================= */


:root {
    --navy: #123b70;
    --navy-dark: #0d2e59;
    --blue: #2b68b8;

    --text: #405a75;
    --muted: #7c8da1;

    --teal: #15968d;
    --teal-dark: #087a73;
    --teal-soft: #edf9f7;

    --gold: #e9ad28;
    --gold-dark: #bd7d09;
    --gold-soft: #fff8e7;

    --red: #d94a56;
    --red-soft: #fff1f2;

    --green: #3a9d72;
    --green-soft: #edf8f2;

    --surface: #ffffff;
    --background: #f7fafc;

    --line: #dce7f2;

    --shadow:
        0 20px 50px
        rgba(35, 69, 105, 0.10);

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

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


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

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

body {
    background:
        radial-gradient(
            circle at top left,
            rgba(21,150,141,0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at top right,
            rgba(233,173,40,0.10),
            transparent 25%
        ),
        var(--background);

    color: var(--text);

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

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


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

.besh-shell {
    width: min(1180px, calc(100% - 28px));

    margin: 22px auto 40px;

    background: var(--surface);

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

    box-shadow: var(--shadow);

    overflow: hidden;
}


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

.activity-header {
    display: grid;

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

    align-items: center;

    gap: 16px;

    padding: 17px 24px;

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

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #f8fcff
        );
}

.header-mark {
    display: grid;

    width: 48px;
    height: 48px;

    place-items: center;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--red),
            #b73147
        );

    color: white;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 800;

    box-shadow:
        0 7px 16px
        rgba(217,74,86,0.20);
}

.header-title h1 {
    margin: 0;

    color: var(--navy);

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 800;

    line-height: 1.08;
}

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

    color: var(--muted);

    font-size: 13px;
}

.chapter-badge {
    padding: 8px 13px;

    border: 1px solid #cce5df;
    border-radius: 14px;

    background: var(--teal-soft);

    text-align: right;
}

.chapter-badge strong {
    display: block;

    color: var(--teal-dark);

    font-size: 12px;
}

.chapter-badge span {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 10px;
}


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

.screen {
    display: none;

    padding: 34px;
}

.screen.active {
    display: block;
}


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

.primary-btn,
.secondary-btn {
    display: inline-flex;

    min-width: 190px;

    justify-content: center;
    align-items: center;
    flex-direction: column;

    gap: 2px;

    padding: 12px 22px;

    border-radius: 14px;

    cursor: pointer;

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

.primary-btn {
    border: 1px solid var(--navy);

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

    color: white;

    box-shadow:
        0 8px 20px
        rgba(18,59,112,0.18);
}

.secondary-btn {
    border: 1px solid #cad9e7;

    background: white;

    color: var(--navy);
}

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

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

.primary-btn small,
.secondary-btn small {
    font-size: 10px;
    opacity: 0.78;
}


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

.hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(330px, 0.95fr);

    gap: 36px;

    align-items: center;
}

.eyebrow {
    display: inline-block;

    margin-bottom: 13px;

    padding: 6px 11px;

    border-radius: 999px;

    background: var(--gold-soft);

    color: var(--gold-dark);

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

    letter-spacing: 0.04em;

    text-transform: uppercase;
}

.hero-copy h2 {
    max-width: 650px;

    margin: 0 0 16px;

    color: var(--navy);

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;

    line-height: 1.05;
    letter-spacing: -1px;
}

.hero-ky {
    margin: 0 0 7px;

    color: var(--text);

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

    line-height: 1.55;
}

.hero-en {
    margin: 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.5;
}

.connection-card {
    display: grid;

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

    gap: 13px;

    align-items: center;

    margin: 24px 0;

    padding: 15px;

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

    background: #fbfdff;
}

.connection-side {
    display: grid;

    grid-template-columns:
        auto
        1fr;

    column-gap: 9px;

    align-items: center;
}

.connection-side strong {
    color: var(--navy);

    font-size: 14px;
}

.connection-side small {
    grid-column: 2;

    color: var(--muted);

    font-size: 10px;
}

.connection-number {
    grid-row: 1 / span 2;

    display: grid;

    width: 33px;
    height: 33px;

    place-items: center;

    border-radius: 10px;

    background: var(--teal-soft);

    color: var(--teal-dark);

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

.connection-arrow {
    color: var(--gold-dark);

    font-size: 23px;
}

.hero-game-card {
    position: relative;

    min-height: 410px;

    padding: 24px;

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

    background:
        linear-gradient(
            180deg,
            #f4fbff 0%,
            #ffffff 58%,
            #fffaf0 100%
        );

    overflow: hidden;
}

.hero-label {
    display: inline-block;

    padding: 6px 10px;

    border-radius: 999px;

    background: white;

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

    color: var(--navy);

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

.hero-air-zone {
    position: relative;

    height: 205px;
}

.demo-stone,
.game-stone {
    position: relative;

    display: grid;

    place-items: center;

    border-radius:
        48% 52% 46% 54%
        / 55% 46% 54% 45%;

    box-shadow:
        inset -6px -7px 10px
        rgba(0,0,0,0.08),
        0 7px 14px
        rgba(35,52,70,0.15);

    user-select: none;
}

.demo-stone span,
.game-stone span {
    position: relative;

    z-index: 3;

    color: white;

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

.demo-stone::before,
.game-stone::before {
    content: "";

    position: absolute;

    inset: 8px;

    border: 2px solid
        rgba(255,255,255,0.65);

    border-radius:
        40% 60% 55% 45%;
}

.hero-flying-stone {
    position: absolute;

    top: 20px;
    left: 50%;

    width: 61px;
    height: 53px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            145deg,
            var(--teal),
            var(--teal-dark)
        );

    animation:
        heroFloat 1.8s
        ease-in-out
        infinite;
}

.hero-ground {
    display: flex;

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

    gap: 16px;

    padding-top: 8px;

    border-top: 2px solid #dccda9;
}

.hero-ground .demo-stone {
    width: 55px;
    height: 47px;
}

.pattern-a {
    background:
        linear-gradient(
            145deg,
            #d44b58,
            #a92e43
        );
}

.pattern-b {
    background:
        linear-gradient(
            145deg,
            #e8aa27,
            #bd7b0b
        );
}

.pattern-c {
    background:
        linear-gradient(
            145deg,
            #3384b8,
            #1d5f8c
        );
}

.pattern-d {
    background:
        linear-gradient(
            145deg,
            #7c67b5,
            #5c4696
        );
}

.pattern-main {
    background:
        linear-gradient(
            145deg,
            var(--teal),
            var(--teal-dark)
        );
}

.hero-message {
    margin-top: 28px;

    text-align: center;
}

.hero-message strong {
    display: block;

    color: var(--navy);

    font-size: 14px;
}

.hero-message span {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 11px;
}

@keyframes heroFloat {

    0%,
    100% {
        transform:
            translate(-50%, 20px)
            rotate(-5deg);
    }

    50% {
        transform:
            translate(-50%, -28px)
            rotate(6deg);
    }
}


/* =========================================================
   HOW TO PLAY
========================================================= */

.section-heading {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 25px;
}

.section-number {
    display: grid;

    width: 48px;
    height: 48px;

    place-items: center;

    border-radius: 15px;

    background: var(--red);

    color: white;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 800;
}

.section-heading h2 {
    margin: 0;

    color: var(--navy);

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: clamp(24px, 3vw, 34px);
}

.section-heading p {
    margin: 4px 0 0;

    color: var(--muted);

    font-size: 12px;
}

.demo-steps {
    display: grid;

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

    gap: 14px;
}

.demo-step {
    position: relative;

    min-height: 225px;

    padding: 19px;

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

    background: #fbfdff;

    text-align: center;
}

.step-index {
    position: absolute;

    top: 12px;
    left: 12px;

    display: grid;

    width: 27px;
    height: 27px;

    place-items: center;

    border-radius: 9px;

    background: var(--gold-soft);

    color: var(--gold-dark);

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

.demo-step h3 {
    margin: 17px 0 5px;

    color: var(--navy);

    font-size: 14px;
}

.demo-step p {
    margin: 0;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.4;
}

.mini-scene {
    position: relative;

    height: 90px;

    margin-top: 12px;
}

.mini-air-stone {
    position: absolute;

    top: 6px;
    left: 50%;

    width: 27px;
    height: 23px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: var(--teal);
}

.mini-ground-row {
    position: absolute;

    left: 50%;
    bottom: 5px;

    display: flex;

    gap: 7px;

    transform: translateX(-50%);
}

.mini-ground-row span {
    width: 23px;
    height: 19px;

    border-radius: 50%;

    background: var(--red);
}

.mini-ground-row span:nth-child(2) {
    background: var(--gold);
}

.mini-ground-row span:nth-child(3) {
    background: var(--blue);
}

.mini-ground-row span:nth-child(4) {
    background: #7662af;
}

.typing-demo {
    margin: 35px auto 0;

    padding: 13px 9px;

    border: 2px solid #cfe2f0;
    border-radius: 12px;

    background: white;

    color: var(--navy);

    font-family:
        Consolas,
        monospace;

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

.mini-collected-scene {
    display: grid;

    height: 90px;

    place-items: center;

    margin-top: 12px;
}

.mini-hand {
    display: flex;

    gap: 7px;

    padding: 17px 25px;

    border-radius:
        45% 45% 48% 48%;

    background: #f1d0b6;
}

.mini-hand span {
    width: 24px;
    height: 20px;

    border-radius: 50%;

    background: var(--red);
}

.mini-hand span:last-child {
    background: var(--gold);
}

.mini-caught {
    display: grid;

    width: 69px;
    height: 69px;

    place-items: center;

    margin: 23px auto 0;

    border-radius: 50%;

    background: var(--green-soft);

    color: var(--green);

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

.level-preview {
    display: grid;

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

    gap: 10px;

    margin-top: 22px;
}

.level-preview-card {
    padding: 12px;

    border-radius: 14px;

    background: var(--gold-soft);

    text-align: center;
}

.level-preview-card span,
.level-preview-card strong,
.level-preview-card small {
    display: block;
}

.level-preview-card span {
    color: var(--gold-dark);

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

.level-preview-card strong {
    margin: 4px 0;

    color: var(--navy);

    font-size: 17px;
}

.level-preview-card small {
    color: var(--muted);

    font-size: 9px;
}

.demo-actions {
    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 26px;
}


/* =========================================================
   GAME STATUS
========================================================= */

.game-status {
    display: grid;

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

    gap: 10px;

    margin-bottom: 17px;
}

.status-item {
    padding: 10px 14px;

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

    background: #fbfdff;
}

.status-item span {
    display: block;

    color: var(--text);

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

.status-item strong {
    display: block;

    margin: 2px 0;

    color: var(--navy);

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 20px;
}

.status-item small {
    display: block;

    color: var(--muted);

    font-size: 9px;
}


/* =========================================================
   LEVEL HEADING
========================================================= */

.game-level-heading {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 14px;
}

.level-number-badge {
    display: grid;

    width: 46px;
    height: 46px;

    place-items: center;

    border-radius: 14px;

    background: var(--navy);

    color: white;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 19px;
    font-weight: 800;
}

.game-level-heading h2 {
    margin: 0;

    color: var(--navy);

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 23px;
}

.game-level-heading p {
    margin: 2px 0 0;

    color: var(--muted);

    font-size: 11px;
}

.level-pattern {
    margin-left: auto;

    padding: 8px 12px;

    border-radius: 999px;

    background: var(--gold-soft);

    color: var(--gold-dark);

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


/* =========================================================
   PLAY FIELD
========================================================= */

.play-field {
    position: relative;

    min-height: 355px;

    border: 1px solid #cfe2ed;
    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            #edf9ff 0%,
            #fbfdff 62%,
            #fff9ea 100%
        );

    overflow: hidden;
}

.sky-label {
    position: absolute;

    top: 13px;
    left: 15px;

    z-index: 4;

    padding: 6px 10px;

    border-radius: 10px;

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

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

.sky-label span,
.sky-label small {
    display: block;
}

.sky-label span {
    color: var(--navy);

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

.sky-label small {
    color: var(--muted);

    font-size: 8px;
}

.air-track {
    position: relative;

    height: 190px;
}

.game-stone {
    width: 61px;
    height: 52px;
}

.throw-stone {
    position: absolute;

    top: 118px;
    left: 50%;

    z-index: 6;

    transform:
        translateX(-50%);
}

.throw-stone.throwing {
    animation:
        stoneThrow var(--throw-duration, 3s)
        cubic-bezier(.32,.08,.38,1)
        forwards;
}

@keyframes stoneThrow {

    0% {
        top: 118px;

        transform:
            translateX(-50%)
            rotate(0);
    }

    42% {
        top: 22px;

        transform:
            translateX(-50%)
            rotate(155deg);
    }

    62% {
        top: 30px;

        transform:
            translateX(-50%)
            rotate(215deg);
    }

    100% {
        top: 122px;

        transform:
            translateX(-50%)
            rotate(360deg);
    }
}

.success-message {
    position: absolute;

    top: 123px;
    left: 50%;

    z-index: 8;

    transform: translateX(-50%);

    color: var(--green);

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 800;

    opacity: 0;

    pointer-events: none;
}

.success-message.show {
    animation:
        successPop 0.8s ease;
}

@keyframes successPop {

    0% {
        opacity: 0;

        transform:
            translate(-50%, 10px)
            scale(0.8);
    }

    35% {
        opacity: 1;

        transform:
            translate(-50%, 0)
            scale(1.06);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -15px)
            scale(1);
    }
}

.ground-stones {
    display: flex;

    min-height: 75px;

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

    gap: clamp(13px, 3vw, 35px);
}

.ground-stone {
    transition:
        transform 0.55s ease,
        opacity 0.55s ease;
}

.ground-stone.collected {
    transform:
        translate(
            var(--collect-x, 0),
            67px
        )
        scale(0.45);

    opacity: 0;
}

.ground-stone.failed {
    animation:
        stoneShake 0.35s ease;
}

@keyframes stoneShake {

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

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

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

.ground-line {
    width: 74%;

    height: 2px;

    margin: 7px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d8c895,
            transparent
        );
}

.collection-zone {
    position: absolute;

    right: 18px;
    bottom: 12px;

    min-width: 150px;

    padding: 9px 12px;

    border: 1px solid #d5e6d9;
    border-radius: 13px;

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

.collection-title {
    display: block;

    color: var(--green);

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

.collection-zone small {
    display: block;

    color: var(--muted);

    font-size: 8px;
}

.collected-dots {
    display: flex;

    gap: 5px;

    margin-top: 6px;
}

.collected-dots i {
    width: 16px;
    height: 14px;

    border: 1px dashed #abc2b2;
    border-radius: 50%;

    background: transparent;
}

.collected-dots i.filled {
    border-style: solid;
    border-color: var(--green);

    background: var(--green);
}


/* =========================================================
   TYPING PANEL
========================================================= */

.typing-panel {
    margin-top: 15px;

    padding: 18px;

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

    background: white;
}

.mission-row {
    display: flex;

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

    gap: 15px;
}

.mission-label {
    display: block;

    color: var(--navy);

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

    letter-spacing: 0.08em;
}

.mission-row small {
    color: var(--muted);

    font-size: 8px;
}

.group-badge {
    padding: 6px 10px;

    border-radius: 999px;

    background: var(--teal-soft);

    color: var(--teal-dark);

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

.target-text {
    min-height: 62px;

    margin: 13px 0;

    padding: 14px 16px;

    border: 2px solid #d8e5f0;
    border-radius: 14px;

    background: #f9fcff;

    color: var(--navy);

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

    font-size: clamp(17px, 2.2vw, 25px);
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.01em;

    text-align: center;
}

.target-char {
    border-radius: 3px;
}

.target-char.done {
    color: var(--green);

    background: #eef8f2;
}

.target-char.current {
    color: var(--navy);

    background: var(--gold-soft);

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

.target-char.remaining {
    color: #526a81;
}

.typing-entry {
    display: grid;

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

    gap: 9px;
}

#typing-input {
    width: 100%;

    padding: 12px 14px;

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

    outline: none;

    color: var(--navy);

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

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

#typing-input:focus {
    border-color: var(--blue);

    box-shadow:
        0 0 0 4px
        rgba(43,104,184,0.09);
}

#typing-input.input-error {
    border-color: var(--red);

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

#typing-input.input-success {
    border-color: var(--green);

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

.typing-state {
    display: grid;

    min-width: 86px;

    place-items: center;

    padding: 0 12px;

    border-radius: 12px;

    background: #f0f5fa;

    color: var(--muted);

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

.typing-state.correct {
    background: var(--green-soft);

    color: var(--green);
}

.typing-state.error {
    background: var(--red-soft);

    color: var(--red);
}

.timer-shell {
    height: 7px;

    margin-top: 11px;

    border-radius: 999px;

    background: #e9eff5;

    overflow: hidden;
}

.timer-bar {
    width: 100%;
    height: 100%;

    border-radius: inherit;

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

    transform-origin: left center;
}

.timer-bar.running {
    animation:
        timerShrink
        var(--timer-duration, 3s)
        linear
        forwards;
}

@keyframes timerShrink {

    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

.typing-help {
    margin-top: 8px;

    text-align: center;
}

.typing-help span,
.typing-help small {
    display: block;
}

.typing-help span {
    color: var(--text);

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

.typing-help small {
    margin-top: 2px;

    color: var(--muted);

    font-size: 8px;
}


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

.feedback-card {
    display: none;

    margin-top: 12px;

    padding: 12px 15px;

    border-radius: 14px;

    text-align: center;
}

.feedback-card.show {
    display: block;
}

.feedback-card.success {
    border: 1px solid #cde5d6;

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

.feedback-card.failure {
    border: 1px solid #efcfd3;

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

.feedback-card strong {
    display: block;

    color: var(--navy);

    font-size: 13px;
}

.feedback-card span {
    display: block;

    margin-top: 2px;

    color: var(--text);

    font-size: 10px;
}

.small-action-btn {
    margin-top: 9px;

    padding: 7px 13px;

    border: 0;
    border-radius: 10px;

    background: var(--navy);

    color: white;

    cursor: pointer;

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


/* =========================================================
   LEVEL COMPLETE
========================================================= */

.level-complete-card {
    max-width: 660px;

    margin: 22px auto;

    padding: 38px;

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

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

    text-align: center;

    box-shadow:
        0 15px 35px
        rgba(30,64,95,0.08);
}

.complete-level-number {
    display: grid;

    width: 65px;
    height: 65px;

    place-items: center;

    margin: auto;

    border-radius: 20px;

    background: var(--teal);

    color: white;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 29px;
    font-weight: 800;
}

.complete-copy {
    margin-top: 14px;
}

.complete-kicker {
    color: var(--teal-dark);

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

    letter-spacing: 0.12em;
}

.complete-copy h2 {
    margin: 6px 0 3px;

    color: var(--navy);

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 30px;
}

.complete-copy p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
}

.complete-stones,
.result-stones {
    display: flex;

    justify-content: center;

    gap: 10px;

    margin: 23px 0;
}

.complete-stones span,
.result-stones span {
    width: 35px;
    height: 29px;

    border-radius:
        45% 55% 46% 54%;

    background: var(--red);

    box-shadow:
        inset -4px -5px 6px
        rgba(0,0,0,0.10);
}

.complete-stones span:nth-child(2),
.result-stones span:nth-child(2) {
    background: var(--gold);
}

.complete-stones span:nth-child(3),
.result-stones span:nth-child(3) {
    background: var(--blue);
}

.complete-stones span:nth-child(4),
.result-stones span:nth-child(4) {
    background: #7662af;
}

.complete-stones span:nth-child(5),
.result-stones span:nth-child(5) {
    background: var(--teal);
}

.complete-message {
    max-width: 480px;

    margin: 0 auto 22px;

    color: var(--text);

    font-size: 13px;

    line-height: 1.5;
}


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

.result-card {
    max-width: 820px;

    margin: 0 auto;

    padding: 30px;

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

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

.result-top {
    display: flex;

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

    gap: 15px;

    text-align: left;
}

.result-five {
    display: grid;

    width: 68px;
    height: 68px;

    place-items: center;

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            var(--red),
            #b63146
        );

    color: white;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 31px;
    font-weight: 900;
}

.result-kicker {
    color: var(--gold-dark);

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

    letter-spacing: 0.08em;
}

.result-top h2 {
    margin: 4px 0 0;

    color: var(--navy);

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 31px;
}

.result-top p {
    margin: 2px 0 0;

    color: var(--muted);

    font-size: 12px;
}

.result-grid {
    display: grid;

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

    gap: 10px;
}

.result-stat {
    padding: 13px;

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

    background: #fafcff;

    text-align: center;
}

.result-stat span,
.result-stat strong,
.result-stat small {
    display: block;
}

.result-stat span {
    color: var(--text);

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

.result-stat strong {
    margin: 4px 0;

    color: var(--navy);

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 23px;
}

.result-stat small {
    color: var(--muted);

    font-size: 8px;
}

.result-quote {
    margin: 20px 0;

    padding: 14px;

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

    border-radius: 0 12px 12px 0;

    background: var(--gold-soft);

    text-align: center;
}

.result-quote strong,
.result-quote span {
    display: block;
}

.result-quote strong {
    color: var(--navy);

    font-size: 13px;
}

.result-quote span {
    margin-top: 3px;

    color: var(--muted);

    font-size: 10px;
}

.result-card > .primary-btn {
    display: flex;

    margin: 0 auto;
}


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

@media (max-width: 900px) {

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

    .hero-game-card {
        min-height: 360px;
    }

    .demo-steps,
    .level-preview {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .result-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 640px) {

    .besh-shell {
        width: calc(100% - 14px);

        margin-top: 7px;

        border-radius: 18px;
    }

    .activity-header {
        grid-template-columns:
            auto
            minmax(0, 1fr);

        padding: 13px;
    }

    .chapter-badge {
        display: none;
    }

    .screen {
        padding: 20px 14px;
    }

    .hero-copy h2 {
        font-size: 31px;
    }

    .connection-card {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .connection-arrow {
        transform: rotate(90deg);
    }

    .connection-side {
        justify-content: center;
    }

    .demo-steps,
    .level-preview,
    .game-status,
    .result-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .demo-actions button {
        width: 100%;
    }

    .typing-entry {
        grid-template-columns: 1fr;
    }

    .typing-state {
        min-height: 35px;
    }

    .ground-stones {
        gap: 11px;
    }

    .game-stone {
        width: 50px;
        height: 43px;
    }

    .collection-zone {
        right: 8px;

        min-width: 125px;
    }

    .level-pattern {
        font-size: 10px;
    }

    .result-top {
        flex-direction: column;

        text-align: center;
    }

}


@media (max-width: 420px) {

    .demo-steps {
        grid-template-columns: 1fr;
    }

    .hero-game-card {
        min-height: 330px;
    }

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

    .game-level-heading {
        align-items: flex-start;

        flex-wrap: wrap;
    }

    .level-pattern {
        width: 100%;

        margin-left: 0;

        text-align: center;
    }

}



/* =========================================================
   BESH_TASH_VISUAL_REFINEMENT_V2
   - natural stone images
   - larger readable typography
   - compact 100% browser layout
========================================================= */


/* ---------------------------------------------------------
   MAIN ACTIVITY WIDTH
--------------------------------------------------------- */

.besh-shell {
    width: min(
        1080px,
        calc(100% - 32px)
    );

    margin:
        14px auto 26px;

    border-radius: 22px;
}


/* ---------------------------------------------------------
   HEADER — LARGER AND CLEANER
--------------------------------------------------------- */

.activity-header {
    min-height: 72px;

    padding:
        12px 20px;
}

.header-mark {
    width: 44px;
    height: 44px;

    font-size: 23px;
}

.header-title h1 {
    font-size:
        clamp(
            22px,
            2.3vw,
            30px
        );

    line-height: 1.1;

    letter-spacing: -0.4px;
}

.header-title p {
    margin-top: 4px;

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

.chapter-badge {
    min-width: 126px;

    padding:
        8px 12px;
}

.chapter-badge strong {
    font-size: 12px;
}

.chapter-badge span {
    margin-top: 3px;

    font-size: 10px;
}


/* ---------------------------------------------------------
   GAME SCREEN — FIT AT 100%
--------------------------------------------------------- */

#game-screen {
    padding:
        18px 28px 22px;
}


/* ---------------------------------------------------------
   STATUS CARDS
--------------------------------------------------------- */

.game-status {
    gap: 11px;

    margin-bottom: 12px;
}

.status-item {
    min-height: 70px;

    padding:
        10px 14px;
}

.status-item span {
    font-size: 12px;
    font-weight: 700;

    line-height: 1.25;
}

.status-item strong {
    margin: 3px 0 2px;

    font-size: 20px;
}

.status-item small {
    font-size: 10px;

    line-height: 1.25;
}


/* ---------------------------------------------------------
   LEVEL HEADING
--------------------------------------------------------- */

.game-level-heading {
    min-height: 50px;

    margin-bottom: 10px;
}

.level-number-badge {
    width: 44px;
    height: 44px;

    font-size: 18px;
}

.game-level-heading h2 {
    font-size: 22px;

    line-height: 1.15;
}

.game-level-heading p {
    margin-top: 3px;

    font-size: 11px;
}

.level-pattern {
    padding:
        7px 12px;

    font-size: 11px;
}


/* ---------------------------------------------------------
   PLAY FIELD
   Shorter vertically so typing panel remains visible
   at normal browser zoom.
--------------------------------------------------------- */

.play-field {
    min-height: 270px;

    border-radius: 19px;
}

.sky-label {
    top: 12px;
    left: 14px;

    padding:
        7px 10px;
}

.sky-label span {
    font-size: 11px;

    line-height: 1.2;
}

.sky-label small {
    margin-top: 2px;

    font-size: 9px;

    line-height: 1.2;
}

.air-track {
    height: 142px;
}


/* ---------------------------------------------------------
   NATURAL ROCK IMAGE STYLING
--------------------------------------------------------- */

.game-stone {
    position: relative;

    width: 76px;
    height: 58px;

    display: block;

    border-radius: 0;

    background: transparent !important;

    box-shadow: none;

    overflow: visible;

    user-select: none;
}

.game-stone::before {
    display: none;
}

.game-stone img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;

    user-select: none;

    filter:
        drop-shadow(
            0 5px 4px
            rgba(26, 39, 51, 0.16)
        );
}

.throw-stone {
    top: 84px;
}


/*
   Stone animation rewritten for the
   shorter game field.
*/

@keyframes stoneThrow {

    0% {
        top: 84px;

        transform:
            translateX(-50%)
            rotate(-4deg)
            scale(1);
    }

    44% {
        top: 16px;

        transform:
            translateX(-50%)
            rotate(35deg)
            scale(1.04);
    }

    62% {
        top: 23px;

        transform:
            translateX(-50%)
            rotate(60deg)
            scale(1.03);
    }

    100% {
        top: 87px;

        transform:
            translateX(-50%)
            rotate(92deg)
            scale(1);
    }
}


/* ---------------------------------------------------------
   GROUND STONES
--------------------------------------------------------- */

.ground-stones {
    min-height: 66px;

    gap:
        clamp(
            18px,
            4vw,
            42px
        );

    padding:
        0 140px 0 40px;
}

.ground-stone {
    width: 72px;
    height: 55px;
}

.ground-line {
    width: 70%;

    margin-top: 1px;
}


/* ---------------------------------------------------------
   COLLECTION BOX
--------------------------------------------------------- */

.collection-zone {
    right: 13px;
    bottom: 11px;

    min-width: 148px;

    padding:
        9px 11px;
}

.collection-title {
    font-size: 11px;

    line-height: 1.25;
}

.collection-zone small {
    margin-top: 2px;

    font-size: 9px;

    line-height: 1.2;
}

.collected-dots {
    gap: 5px;

    margin-top: 6px;
}

.collected-dots i {
    width: 17px;
    height: 14px;
}


/* ---------------------------------------------------------
   COLLECTION ANIMATION
--------------------------------------------------------- */

.ground-stone.collected {
    transform:
        translate(
            var(--collect-x, 0),
            48px
        )
        scale(0.4);

    opacity: 0;
}


/* ---------------------------------------------------------
   SUCCESS MESSAGE
--------------------------------------------------------- */

.success-message {
    top: 96px;

    font-size: 18px;
}


/* ---------------------------------------------------------
   TYPING PANEL — MORE READABLE BUT SHORTER
--------------------------------------------------------- */

.typing-panel {
    margin-top: 11px;

    padding:
        13px 16px 12px;

    border-radius: 17px;
}

.mission-row {
    min-height: 28px;
}

.mission-label {
    font-size: 11px;

    line-height: 1.2;

    letter-spacing: 0.055em;
}

.mission-row small {
    display: block;

    margin-top: 2px;

    font-size: 9px;
}

.group-badge {
    padding:
        6px 11px;

    font-size: 11px;
}


/* ---------------------------------------------------------
   TARGET WORD
--------------------------------------------------------- */

.target-text {
    min-height: 52px;

    margin:
        8px 0;

    padding:
        10px 14px;

    display: flex;

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

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

    line-height: 1.25;
}


/* ---------------------------------------------------------
   INPUT
--------------------------------------------------------- */

#typing-input {
    min-height: 44px;

    padding:
        9px 13px;

    font-size: 15px;
}

.typing-state {
    min-width: 92px;

    padding:
        0 12px;

    font-size: 11px;
}


/* ---------------------------------------------------------
   TIMER
--------------------------------------------------------- */

.timer-shell {
    height: 7px;

    margin-top: 8px;
}


/* ---------------------------------------------------------
   INSTRUCTIONS
--------------------------------------------------------- */

.typing-help {
    margin-top: 6px;
}

.typing-help span {
    font-size: 10px;

    line-height: 1.25;
}

.typing-help small {
    margin-top: 1px;

    font-size: 9px;

    line-height: 1.2;
}


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

.feedback-card {
    margin-top: 8px;

    padding:
        9px 13px;
}

.feedback-card strong {
    font-size: 13px;
}

.feedback-card span {
    font-size: 10px;
}


/* ---------------------------------------------------------
   IMPROVE ALL SMALL UI TEXT
--------------------------------------------------------- */

.hero-en,
.section-heading p,
.demo-step p,
.complete-copy p,
.result-top p {
    font-size: 13px;
}

.demo-step h3 {
    font-size: 15px;
}

.demo-step p {
    font-size: 11px;
}

.level-preview-card span {
    font-size: 11px;
}

.level-preview-card small {
    font-size: 10px;
}


/* ---------------------------------------------------------
   LAPTOP HEIGHT OPTIMIZATION
   Important for 100% zoom.
--------------------------------------------------------- */

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

    .besh-shell {
        margin-top: 10px;
    }

    .activity-header {
        min-height: 66px;

        padding:
            10px 18px;
    }

    #game-screen {
        padding:
            14px 26px 18px;
    }

    .game-status {
        margin-bottom: 9px;
    }

    .status-item {
        min-height: 62px;

        padding:
            8px 13px;
    }

    .game-level-heading {
        min-height: 45px;

        margin-bottom: 8px;
    }

    .play-field {
        min-height: 245px;
    }

    .air-track {
        height: 122px;
    }

    .throw-stone {
        top: 72px;
    }

    @keyframes stoneThrow {

        0% {
            top: 72px;

            transform:
                translateX(-50%)
                rotate(-4deg);
        }

        44% {
            top: 12px;

            transform:
                translateX(-50%)
                rotate(35deg);
        }

        62% {
            top: 18px;

            transform:
                translateX(-50%)
                rotate(58deg);
        }

        100% {
            top: 74px;

            transform:
                translateX(-50%)
                rotate(90deg);
        }

    }

    .ground-stones {
        min-height: 61px;
    }

    .typing-panel {
        margin-top: 8px;

        padding:
            11px 15px 10px;
    }

    .target-text {
        min-height: 46px;

        margin:
            6px 0;

        padding:
            8px 12px;
    }

    #typing-input {
        min-height: 40px;

        padding:
            7px 12px;
    }

}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (
    max-width: 900px
) {

    .ground-stones {
        padding:
            0 120px 0 20px;

        gap: 14px;
    }

    .game-stone {
        width: 65px;
        height: 50px;
    }

}


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

@media (
    max-width: 640px
) {

    .besh-shell {
        width:
            calc(100% - 12px);

        margin-top: 6px;
    }

    #game-screen {
        padding:
            14px 11px 18px;
    }

    .ground-stones {
        padding:
            0 8px;

        gap: 7px;
    }

    .collection-zone {
        position: relative;

        right: auto;
        bottom: auto;

        width:
            calc(100% - 20px);

        margin:
            8px auto;
    }

    .play-field {
        min-height: 315px;
    }

    .game-stone {
        width: 55px;
        height: 43px;
    }

}



/* BESH_TASH_START_PAGE_REFINEMENT_V3 */


/* =========================================================
   NATURAL BESH TASH STONES — OPENING PAGE
========================================================= */

.hero-natural-stone {
    position: relative;

    width: 82px;
    height: 62px;

    background: transparent;

    border: 0;

    box-shadow: none;
}

.hero-natural-stone img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    user-select: none;
    pointer-events: none;

    filter:
        drop-shadow(
            0 7px 5px
            rgba(28, 39, 48, 0.17)
        );
}


/* Flying stone */

.hero-flying-stone.hero-natural-stone {
    position: absolute;

    top: 20px;
    left: 50%;

    width: 90px;
    height: 68px;

    transform: translateX(-50%);

    animation:
        naturalHeroFloat
        1.8s
        ease-in-out
        infinite;
}


@keyframes naturalHeroFloat {

    0%,
    100% {
        transform:
            translate(-50%, 20px)
            rotate(-4deg);
    }

    50% {
        transform:
            translate(-50%, -28px)
            rotate(5deg);
    }

}


/* Ground stones */

.hero-natural-ground {
    align-items: flex-end;

    gap: 17px;
}

.hero-natural-ground .hero-natural-stone {
    width: 76px;
    height: 58px;
}


/*
   IMPORTANT:
   No numbered/colorful 1–4 level strip is used
   on the opening page.
*/


/* =========================================================
   START PAGE ACTIONS
========================================================= */

.start-actions {
    display: grid;

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

    gap: 10px;

    max-width: 540px;

    margin-top: 4px;
}


/* Existing internal instructions */

.start-actions .primary-btn {
    width: 100%;
    min-width: 0;

    min-height: 58px;

    padding:
        10px 15px;
}


/* =========================================================
   REAL-GAME VIDEO BUTTON
========================================================= */

.video-guide-btn {
    display: flex;

    min-height: 58px;

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

    gap: 10px;

    padding:
        9px 14px;

    border: 1px solid #cbdff1;
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f4f9ff
        );

    color: var(--navy);

    text-decoration: none;

    box-shadow:
        0 5px 14px
        rgba(27, 68, 111, 0.08);

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

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

    border-color: #8fb9df;

    box-shadow:
        0 8px 18px
        rgba(27, 68, 111, 0.12);
}

.video-guide-icon {
    display: grid;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    place-items: center;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #dc405c,
            #e9942d
        );

    color: white;

    font-size: 13px;
}

.video-guide-copy {
    display: block;

    text-align: left;
}

.video-guide-copy strong {
    display: block;

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

.video-guide-copy small {
    display: block;

    margin-top: 3px;

    color: var(--muted);

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


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

.chapter-back-btn {
    grid-column:
        1 / -1;

    display: inline-flex;

    width: fit-content;
    min-width: 205px;
    min-height: 54px;

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

    gap: 10px;

    padding:
        8px 16px;

    border:
        1px solid
        #b7cfe7;

    border-radius: 13px;

    background: white;

    color: var(--navy);

    cursor: pointer;

    box-shadow:
        0 4px 12px
        rgba(25, 63, 102, 0.06);

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

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

    border-color: var(--blue);

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

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

    font-size: 21px;
}

.chapter-back-btn strong,
.chapter-back-btn small {
    display: block;

    text-align: left;
}

.chapter-back-btn strong {
    font-size: 12px;
}

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

    color: var(--muted);

    font-size: 10px;
}


/* =========================================================
   OPENING CARD NATURAL STONE PROPORTIONS
========================================================= */

.hero-game-card {
    min-height: 390px;
}

.hero-air-zone {
    height: 190px;
}

.hero-message {
    margin-top: 22px;
}


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

@media (max-width: 640px) {

    .start-actions {
        grid-template-columns: 1fr;
    }

    .chapter-back-btn {
        grid-column: auto;

        width: 100%;
    }

    .hero-natural-ground {
        gap: 7px;
    }

    .hero-natural-ground .hero-natural-stone {
        width: 61px;
        height: 48px;
    }

}



/* BESH_TASH_GAME_FIT_100_V4
   Keep the full game visible at 100% browser zoom
   on common laptop/desktop screens.
*/


/* =========================================================
   GAME PAGE OVERALL
========================================================= */

#game-screen {
    padding:
        12px 26px 14px;
}


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

body:has(#game-screen.active) .activity-header {
    min-height: 64px;

    padding:
        9px 18px;
}

body:has(#game-screen.active) .header-mark {
    width: 42px;
    height: 42px;

    font-size: 21px;
}

body:has(#game-screen.active) .header-title h1 {
    font-size:
        clamp(
            21px,
            2vw,
            27px
        );
}

body:has(#game-screen.active) .header-title p {
    font-size: 11px;
}


/* =========================================================
   STATUS CARDS
========================================================= */

#game-screen .game-status {
    gap: 10px;

    margin-bottom: 8px;
}

#game-screen .status-item {
    min-height: 59px;

    padding:
        7px 13px;
}

#game-screen .status-item span {
    font-size: 11px;
}

#game-screen .status-item strong {
    margin:
        1px 0;

    font-size: 18px;

    line-height: 1.1;
}

#game-screen .status-item small {
    font-size: 9px;
}


/* =========================================================
   LEVEL HEADING
========================================================= */

#game-screen .game-level-heading {
    min-height: 42px;

    margin-bottom: 7px;

    gap: 10px;
}

#game-screen .level-number-badge {
    width: 41px;
    height: 41px;

    border-radius: 12px;

    font-size: 17px;
}

#game-screen .game-level-heading h2 {
    font-size: 21px;

    line-height: 1.05;
}

#game-screen .game-level-heading p {
    margin-top: 2px;

    font-size: 10px;
}

#game-screen .level-pattern {
    padding:
        6px 11px;

    font-size: 10px;
}


/* =========================================================
   PLAY FIELD
========================================================= */

#game-screen .play-field {
    min-height: 220px;
    height: 220px;

    border-radius: 18px;
}

#game-screen .air-track {
    height: 102px;
}


/* Tossed-stone label */

#game-screen .sky-label {
    top: 10px;
    left: 12px;

    padding:
        6px 9px;
}

#game-screen .sky-label span {
    font-size: 10px;
}

#game-screen .sky-label small {
    font-size: 8px;
}


/* =========================================================
   STONES
========================================================= */

#game-screen .game-stone {
    width: 67px;
    height: 51px;
}

#game-screen .throw-stone {
    top: 58px;
}

#game-screen .ground-stone {
    width: 63px;
    height: 48px;
}


/*
   Toss animation adjusted for compact field.
*/

@keyframes stoneThrow {

    0% {
        top: 58px;

        transform:
            translateX(-50%)
            rotate(-4deg);
    }

    42% {
        top: 9px;

        transform:
            translateX(-50%)
            rotate(34deg);
    }

    62% {
        top: 14px;

        transform:
            translateX(-50%)
            rotate(58deg);
    }

    100% {
        top: 60px;

        transform:
            translateX(-50%)
            rotate(90deg);
    }

}


/* =========================================================
   GROUND
========================================================= */

#game-screen .ground-stones {
    min-height: 55px;

    gap:
        clamp(
            16px,
            3vw,
            34px
        );

    padding:
        0 145px 0 35px;
}

#game-screen .ground-line {
    width: 68%;

    margin-top: 0;
}


/* =========================================================
   COLLECTION BOX
========================================================= */

#game-screen .collection-zone {
    right: 12px;
    bottom: 9px;

    min-width: 145px;

    padding:
        7px 10px;
}

#game-screen .collection-title {
    font-size: 10px;
}

#game-screen .collection-zone small {
    font-size: 8px;
}

#game-screen .collected-dots {
    margin-top: 4px;
}

#game-screen .collected-dots i {
    width: 16px;
    height: 13px;
}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

#game-screen .success-message {
    top: 74px;

    font-size: 16px;
}


/* =========================================================
   TYPING PANEL
========================================================= */

#game-screen .typing-panel {
    margin-top: 8px;

    padding:
        9px 15px 8px;

    border-radius: 16px;
}

#game-screen .mission-row {
    min-height: 22px;
}

#game-screen .mission-label {
    font-size: 10px;
}

#game-screen .mission-row small {
    margin-top: 1px;

    font-size: 8px;
}

#game-screen .group-badge {
    padding:
        5px 10px;

    font-size: 10px;
}


/* =========================================================
   TARGET TEXT
========================================================= */

#game-screen .target-text {
    min-height: 43px;

    margin:
        5px 0;

    padding:
        6px 12px;

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

    line-height: 1.15;
}


/* =========================================================
   INPUT
========================================================= */

#game-screen #typing-input {
    min-height: 37px;

    padding:
        6px 12px;

    font-size: 14px;
}

#game-screen .typing-state {
    min-width: 90px;

    min-height: 37px;

    padding:
        0 10px;

    font-size: 10px;
}


/* =========================================================
   TIMER
========================================================= */

#game-screen .timer-shell {
    height: 6px;

    margin-top: 5px;
}


/* =========================================================
   HELP TEXT
========================================================= */

#game-screen .typing-help {
    margin-top: 3px;
}

#game-screen .typing-help span {
    font-size: 9px;

    line-height: 1.15;
}

#game-screen .typing-help small {
    margin-top: 1px;

    font-size: 8px;

    line-height: 1.1;
}


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

#game-screen .feedback-card {
    margin-top: 7px;

    padding:
        7px 12px;

    border-radius: 13px;
}

#game-screen .feedback-card strong {
    font-size: 12px;

    line-height: 1.15;
}

#game-screen .feedback-card span {
    margin-top: 1px;

    font-size: 9px;

    line-height: 1.15;
}

#game-screen .small-action-btn {
    margin-top: 5px;

    padding:
        5px 11px;

    font-size: 9px;
}


/* =========================================================
   LAPTOP HEIGHT — EXTRA COMPRESSION
========================================================= */

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

    body:has(#game-screen.active) .besh-shell {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    body:has(#game-screen.active) .activity-header {
        min-height: 58px;

        padding:
            7px 17px;
    }

    #game-screen {
        padding:
            9px 24px 10px;
    }

    #game-screen .status-item {
        min-height: 53px;

        padding:
            6px 12px;
    }

    #game-screen .status-item strong {
        font-size: 17px;
    }

    #game-screen .game-level-heading {
        min-height: 37px;

        margin-bottom: 5px;
    }

    #game-screen .level-number-badge {
        width: 37px;
        height: 37px;

        font-size: 16px;
    }

    #game-screen .game-level-heading h2 {
        font-size: 19px;
    }

    #game-screen .play-field {
        min-height: 195px;
        height: 195px;
    }

    #game-screen .air-track {
        height: 86px;
    }

    #game-screen .throw-stone {
        top: 48px;
    }

    @keyframes stoneThrow {

        0% {
            top: 48px;

            transform:
                translateX(-50%)
                rotate(-4deg);
        }

        42% {
            top: 5px;

            transform:
                translateX(-50%)
                rotate(34deg);
        }

        62% {
            top: 10px;

            transform:
                translateX(-50%)
                rotate(58deg);
        }

        100% {
            top: 50px;

            transform:
                translateX(-50%)
                rotate(90deg);
        }

    }

    #game-screen .ground-stones {
        min-height: 49px;
    }

    #game-screen .game-stone {
        width: 61px;
        height: 46px;
    }

    #game-screen .ground-stone {
        width: 58px;
        height: 44px;
    }

    #game-screen .typing-panel {
        margin-top: 6px;

        padding:
            7px 14px 7px;
    }

    #game-screen .target-text {
        min-height: 38px;

        margin:
            4px 0;

        padding:
            4px 10px;
    }

    #game-screen #typing-input {
        min-height: 34px;

        padding:
            5px 11px;
    }

    #game-screen .typing-state {
        min-height: 34px;
    }

    #game-screen .feedback-card {
        margin-top: 5px;

        padding:
            5px 11px;
    }

}


/* =========================================================
   VERY SHORT LAPTOP VIEWPORT
========================================================= */

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

    body:has(#game-screen.active) .activity-header {
        min-height: 52px;
    }

    body:has(#game-screen.active) .header-mark {
        width: 37px;
        height: 37px;

        font-size: 19px;
    }

    body:has(#game-screen.active) .header-title h1 {
        font-size: 21px;
    }

    #game-screen .game-status {
        margin-bottom: 5px;
    }

    #game-screen .status-item {
        min-height: 47px;
    }

    #game-screen .status-item span {
        font-size: 9px;
    }

    #game-screen .status-item strong {
        font-size: 16px;
    }

    #game-screen .status-item small {
        font-size: 8px;
    }

    #game-screen .play-field {
        min-height: 174px;
        height: 174px;
    }

    #game-screen .air-track {
        height: 74px;
    }

    #game-screen .ground-stones {
        min-height: 45px;
    }

    #game-screen .typing-panel {
        padding:
            6px 13px;
    }

    #game-screen .typing-help {
        display: none;
    }

}



/* BESH_TASH_CLEAR_WORD_SPACES_V3
   Clearly show every required Spacebar position.
*/


/* =========================================================
   VISIBLE WORD SPACE
========================================================= */

#game-screen .target-char.space-char {

    display: inline-block !important;

    /*
       A genuinely visible word gap.
    */
    width: 18px !important;
    min-width: 18px !important;

    height: 0.9em;

    margin:
        0 4px !important;

    padding: 0 !important;

    vertical-align: baseline;

    border: 0 !important;

    border-bottom:
        3px solid #e6b137 !important;

    border-radius: 2px;

    background:
        rgba(
            255,
            245,
            209,
            0.75
        ) !important;

    color: transparent !important;
}


/* ---------------------------------------------------------
   SPACE ALREADY TYPED
--------------------------------------------------------- */

#game-screen .target-char.space-char.done {

    border-bottom-color:
        #38a172 !important;

    background:
        rgba(
            229,
            247,
            237,
            0.95
        ) !important;
}


/* ---------------------------------------------------------
   SPACE THAT SHOULD BE TYPED NEXT
--------------------------------------------------------- */

#game-screen .target-char.space-char.current {

    width: 21px !important;
    min-width: 21px !important;

    border-bottom-color:
        #d99100 !important;

    background:
        #ffe8a5 !important;

    box-shadow:
        0 0 0 2px
        rgba(
            224,
            162,
            20,
            0.12
        );
}


/* ---------------------------------------------------------
   TARGET SENTENCE
--------------------------------------------------------- */

#game-screen .target-text {

    /*
       The individual .space-char element now
       controls spacing, not browser whitespace.
    */

    word-spacing: 0;

    white-space: nowrap;
}


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

@media (max-width: 640px) {

    #game-screen .target-text {
        white-space: normal;
    }

    #game-screen .target-char.space-char {

        width: 14px !important;
        min-width: 14px !important;

        margin:
            0 3px !important;
    }

}



/* BESH_TASH_GAME_BACK_BUTTON_V1 */

.game-navigation-row {
    display: flex;

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

    margin:
        0 0 7px;
}


.game-back-to-chapter-btn {
    display: inline-flex;

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

    gap: 8px;

    min-height: 38px;

    padding:
        6px 12px;

    border:
        1px solid #bfd3e6;

    border-radius: 11px;

    background: #ffffff;

    color: var(--navy);

    cursor: pointer;

    box-shadow:
        0 4px 11px
        rgba(24, 61, 101, 0.06);

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


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

    border-color: var(--blue);

    box-shadow:
        0 6px 14px
        rgba(24, 61, 101, 0.10);
}


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

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


.game-back-copy {
    display: block;

    text-align: left;
}


.game-back-copy strong {
    display: block;

    font-size: 11px;

    line-height: 1.1;
}


.game-back-copy small {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 8px;

    line-height: 1.1;
}


/* Keep compact at 100% laptop view */

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

    .game-navigation-row {
        margin-bottom: 4px;
    }

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

        padding:
            4px 10px;
    }

}



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

/* BESH_TASH_EXACT_ACTIVITY1_KYRGYZ_TYPOGRAPHY_V2_START */


/* ==========================================================
   BESH TASH
   EXACT KYRGYZ TYPOGRAPHY REFERENCE:
   CHAPTER I — ACTIVITY 1

   IMPORTANT:
   This changes typography only.

   It does NOT change:
       sizes
       colours
       layout
       padding
       margins
       cards
       game mechanics
       images
========================================================== */


/* ==========================================================
   1. EXACT BASE FONT FAMILY FROM ACTIVITY 1
========================================================== */

html,
body,
.besh-shell {

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

    -webkit-font-smoothing:
        antialiased !important;

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

    text-rendering:
        optimizeLegibility !important;
}


/* ==========================================================
   2. ALL NORMAL INTERFACE TEXT

   This prevents old display fonts such as:
       Segoe UI
       Trebuchet MS

   from affecting individual Besh Tash components.
========================================================== */

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

p,
span,
label,
a,
li,

button,
input,
textarea,
select,
option,

strong,
b,
small,
em,

.header-title,
.chapter-badge,

.hero-copy,
.connection-card,
.hero-label,
.hero-message,

.section-heading,
.demo-step,
.level-preview-card,

.game-status,
.status-item,
.game-level-heading,
.level-pattern,
.sky-label,
.collection-zone,

.typing-panel,
.mission-row,
.mission-label,
.group-badge,
.typing-state,
.typing-help,

.feedback-card,

.level-complete-card,
.complete-copy,

.result-card,
.result-top,
.result-stat,
.result-quote {

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


/* ==========================================================
   3. ACTIVITY 1 KYRGYZ LETTER RENDERING

   This is the important part that was missing before.

   Activity 1 uses natural kerning plus extremely subtle
   positive character and word spacing.

   Especially useful for:
       Ө ө
       Ү ү
       Ң ң
========================================================== */

.header-title h1,
.hero-copy h2,

.hero-ky,

.section-heading h2,
.demo-step h3,

.game-level-heading h2,

.mission-label,

.complete-copy h2,
.result-top h2,

.status-item span,
.sky-label span,
.collection-title,

.feedback-card strong {

    font-kerning:
        normal !important;

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

    letter-spacing:
        .002em !important;

    word-spacing:
        .02em !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ==========================================================
   4. MAIN KYRGYZ HEADINGS

   Activity 1 naturally renders its major headings at
   browser bold / approximately 700.

   Remove the original Besh Tash 800-heavy appearance.
========================================================== */

.header-title h1,
.hero-copy h2,
.section-heading h2,
.game-level-heading h2,
.complete-copy h2,
.result-top h2 {

    font-weight:
        700 !important;
}


/* ==========================================================
   5. KYRGYZ BODY TEXT

   Activity 1 does NOT make ordinary explanatory text
   unnecessarily heavy.

   Keep normal prose at 400.
========================================================== */

.hero-ky,
.hero-en,

.header-title p,

.section-heading p,

.demo-step p,

.game-level-heading p,

.typing-help small,

.complete-copy p,
.complete-message,

.result-top p,

.connection-side small,
.hero-message span {

    font-weight:
        400 !important;
}


/* ==========================================================
   6. NORMAL BOLD KYRGYZ LABELS

   These correspond visually to Activity 1's:
       instruction
       score labels
       statement text
       choice labels

   Use normal bold 700, never 800 or 900.
========================================================== */

.chapter-badge strong,

.connection-side strong,

.hero-message strong,

.demo-step h3,

.level-preview-card span,
.level-preview-card strong,

.status-item span,
.status-item strong,

.level-pattern,

.sky-label span,

.collection-title,

.mission-label,

.group-badge,

.typing-state,

.typing-help span,

.feedback-card strong,

.small-action-btn,

.complete-kicker,

.result-kicker,

.result-stat span,
.result-stat strong,

.result-quote strong {

    font-weight:
        700 !important;
}


/* ==========================================================
   7. SMALL ENGLISH / SECONDARY TEXT

   Activity 1 keeps helper text visually lighter.
========================================================== */

.chapter-badge span,

.connection-side small,

.hero-message span,

.section-heading p,
.demo-step p,

.level-preview-card small,

.status-item small,

.game-level-heading p,

.sky-label small,

.collection-zone small,

.mission-row small,

.typing-help small,

.feedback-card span,

.complete-copy p,

.result-top p,

.result-stat small,

.result-quote span {

    font-weight:
        400 !important;
}


/* ==========================================================
   8. ACTION BUTTON TYPOGRAPHY

   Match Activity 1's normal bold Arial button text.
========================================================== */

.primary-btn,
.secondary-btn,
.video-guide-btn,
.small-action-btn,

.primary-btn span,
.secondary-btn span,
.video-guide-btn span,
.video-guide-btn strong,
.video-guide-btn small {

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


.primary-btn span,
.secondary-btn span,
.video-guide-btn strong,
.small-action-btn {

    font-weight:
        700 !important;
}


.primary-btn small,
.secondary-btn small,
.video-guide-btn small {

    font-weight:
        400 !important;
}


/* ==========================================================
   9. REMOVE OLD BESH-TASH DISPLAY-TYPE SPACING

   Original hero had:
       letter-spacing: -1px

   Other labels had large uppercase tracking.

   Kyrgyz should use Activity 1's natural text treatment.
========================================================== */

.hero-copy h2,
.header-title h1,
.section-heading h2,
.game-level-heading h2,
.complete-copy h2,
.result-top h2 {

    letter-spacing:
        .002em !important;

    word-spacing:
        .02em !important;
}


/* ==========================================================
   10. KYRGYZ UPPERCASE LABELS

   Keep their text-transform/layout if the activity needs it,
   but soften the tracking to Activity 1 rendering.
========================================================== */

.mission-label,
.complete-kicker,
.result-kicker {

    letter-spacing:
        .002em !important;

    word-spacing:
        .02em !important;
}


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

   Do NOT change its orange visual styling here.
   Only ensure the font itself matches Activity 1.
========================================================== */

.chapter-back-btn,
.chapter-back-btn *,

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

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

    font-kerning:
        normal !important;

    text-rendering:
        optimizeLegibility !important;
}


.chapter-back-btn strong,
.game-back-copy strong {

    font-weight:
        700 !important;
}


.chapter-back-btn small,
.game-back-copy small {

    font-weight:
        400 !important;
}


/* ==========================================================
   12. VERY IMPORTANT
   PRESERVE THE ACTUAL TYPING FONT

   Besh Tash is a typing activity, therefore target/input
   text must remain visually distinct and monospace.
========================================================== */

.typing-demo,

.target-text,

#typing-input,

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 *,
.keyboard-key,
.key,
.shortcut-key {

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

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    font-variant-ligatures:
        none !important;
}


/* Keep typing text clear and readable */

.target-text,
#typing-input {

    font-weight:
        700 !important;

    text-rendering:
        optimizeLegibility !important;
}


/* BESH_TASH_EXACT_ACTIVITY1_KYRGYZ_TYPOGRAPHY_V2_END */

/* BESH_TASH_EXACT_ACTIVITY1_BACK_BUTTON_V2_START */


/* ==========================================================
   BESH TASH BACK BUTTON
   MATCH CHAPTER I — ACTIVITY 1
========================================================== */


/* ----------------------------------------------------------
   BOTH BACK-TO-CHAPTER BUTTONS

   Activity 1 reference:
       background #d89b61
       white text
       8px 19px padding
       18px radius
       14px bold Arial
       one-line label
---------------------------------------------------------- */

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

    display:
        inline-flex !important;

    width:
        fit-content !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    min-height:
        0 !important;

    height:
        auto !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex-direction:
        row !important;

    gap:
        6px !important;

    padding:
        8px 19px !important;

    border:
        none !important;

    border-radius:
        18px !important;

    background:
        #d89b61 !important;

    background-image:
        none !important;

    color:
        #ffffff !important;

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-decoration:
        none !important;

    text-align:
        center !important;

    white-space:
        nowrap !important;

    box-shadow:
        none !important;

    cursor:
        pointer !important;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;

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


/* ----------------------------------------------------------
   START SCREEN POSITION

   Keep it below the two main action buttons.
---------------------------------------------------------- */

.chapter-back-btn {

    grid-column:
        1 / -1 !important;

    justify-self:
        start !important;
}


/* ----------------------------------------------------------
   GAME SCREEN BUTTON
---------------------------------------------------------- */

.game-back-to-chapter-btn {

    margin:
        0 !important;
}


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

   Activity 1 uses a simple small left arrow,
   not a large separate icon.
---------------------------------------------------------- */

.chapter-back-arrow,
.game-back-arrow {

    display:
        inline !important;

    color:
        #3851d1 !important;

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    margin:
        0 !important;
}


/* ----------------------------------------------------------
   ONE-LINE COPY
---------------------------------------------------------- */

.chapter-back-text,
.game-back-text {

    display:
        inline !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #2e4e90 !important;

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        normal !important;

    white-space:
        nowrap !important;
}


/* ----------------------------------------------------------
   NEUTRALIZE OLD TWO-LINE RULES

   They are no longer needed, but this prevents any older
   descendant selectors from affecting the new text.
---------------------------------------------------------- */

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

    display:
        none !important;
}


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

.chapter-back-btn:hover,
.game-back-to-chapter-btn:hover {

    background:
        #d89b61 !important;

    transform:
        translateY(-1px) !important;

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


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

.chapter-back-btn:active,
.game-back-to-chapter-btn:active {

    transform:
        translateY(0) !important;

    box-shadow:
        none !important;
}


/* ----------------------------------------------------------
   KEYBOARD FOCUS
---------------------------------------------------------- */

.chapter-back-btn:focus-visible,
.game-back-to-chapter-btn:focus-visible {

    outline:
        3px solid rgba(216, 155, 97, 0.32) !important;

    outline-offset:
        3px !important;
}


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

   DO NOT let an old mobile rule expand it to 100% width.
   Activity 1 remains a compact pill.
---------------------------------------------------------- */

@media (max-width: 640px) {

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

        width:
            fit-content !important;

        min-width:
            0 !important;
    }
}


/* BESH_TASH_EXACT_ACTIVITY1_BACK_BUTTON_V2_END */