/* =========================================================
   BOORSOK ALGORITHM ACTIVITY
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: #f4efe5;
    color: #252525;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}


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

.activity-page {
    width: 100%;
    min-height: 100vh;
    background:
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #fff8ec 55%,
            #f7efe2 100%
        );
}


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

.activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 16px 22px 8px;
}


.header-title {
    flex: 1;

    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;

    text-align: center;
}


.chef-icon {
    width: 60px;
    height: 60px;

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

    border: 3px solid #d6a75e;
    border-radius: 50%;

    color: #c78a29;
    font-size: 28px;

    background: #fff;
}


.header-title h1 {
    margin: 0;

    font-size: clamp(27px, 2.2vw, 43px);
    line-height: 1.15;

    color: #b31818;
}


.header-title h2 {
    margin: 9px 0 0;

    font-size: clamp(24px, 2vw, 38px);
    line-height: 1.1;

    color: #1757a6;
}


.header-right {
    display: flex;
    gap: 14px;
    align-items: stretch;
}


.level-card {
    min-width: 170px;

    padding: 13px 16px;

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

    background: rgba(255, 252, 244, 0.95);

    text-align: center;
}


.level-card > strong {
    display: block;

    color: #154d91;
    font-size: 16px;
}


.stars {
    margin: 8px 0;

    white-space: nowrap;
}


.star {
    margin: 0 2px;

    font-size: 36px;
    color: #aaa;

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


.star.active {
    color: #f8b400;
}


.star.flash {
    transform: scale(1.3);
}


.step-counter {
    font-size: 13px;
}


.heritage-card {
    position: relative;

    width: 190px;
    min-height: 125px;

    overflow: hidden;

    border-radius: 12px;

    background:
        linear-gradient(
            #d4efff,
            #ecf7e1
        );
}


.heritage-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.yurt-fallback {
    width: 100%;
    height: 100%;

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

    color: #a64d20;
}


.mountains {
    margin-bottom: 10px;

    color: #6693ba;
    font-size: 27px;
}


.yurt-symbol {
    width: 90px;
    height: 55px;

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

    border: 3px solid #b85832;
    border-radius: 50% 50% 8px 8px;

    background: #fff7e4;

    font-weight: 700;
}


/* =========================================================
   TOP INSTRUCTION
========================================================= */

.main-instruction {
    width: calc(100% - 44px);
    max-width: 950px;

    margin: 0 auto 12px;

    padding: 12px 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    border: 1px solid #e2b25d;
    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            #fff9eb,
            #fffdf8
        );

    text-align: center;
}


.main-instruction p {
    margin: 2px 0;

    font-size: 16px;
}


.main-instruction .english {
    color: #034d9b;
}


.instruction-code {
    color: #e5a331;
    font-size: 23px;
    font-weight: 700;
}


/* =========================================================
   GAME GRID
========================================================= */

.game-layout {
    width: calc(100% - 30px);

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(275px, 350px)
        minmax(500px, 1.4fr)
        minmax(350px, 0.95fr);

    gap: 12px;
}


/* =========================================================
   GENERIC PANELS
========================================================= */

.left-column,
.code-panel,
.output-column {
    min-width: 0;
}


.panel-heading {
    min-height: 38px;

    padding: 8px 13px;

    display: flex;
    align-items: center;
    gap: 10px;

    color: white;

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

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


.commands-heading {
    background:
        linear-gradient(
            90deg,
            #0874d0,
            #328edb
        );
}


.code-heading {
    background:
        linear-gradient(
            90deg,
            #169c84,
            #20a079
        );
}


.output-heading {
    background:
        linear-gradient(
            90deg,
            #6a3db2,
            #823eb9
        );
}


.code-symbol {
    font-size: 15px;
}


/* =========================================================
   LEFT PHOTO
========================================================= */

.family-photo-card {
    height: 315px;

    margin-bottom: 3px;

    overflow: hidden;

    border-radius: 12px;

    background: #eee3d3;
}


.family-photo {
    width: 100%;
    height: 100%;

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

    display: block;
}


.photo-fallback {
    width: 100%;
    height: 100%;

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

    gap: 12px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #efe0c7,
            #fff8ec
        );
}


.photo-fallback span {
    display: block;
    margin-top: 4px;
}


.fallback-person {
    font-size: 72px;
}


/* =========================================================
   WELCOME
========================================================= */

.welcome-card {
    margin-bottom: 8px;
    padding: 10px 14px;

    display: flex;
    align-items: center;
    gap: 14px;

    border: 1px solid #35a8a6;
    border-radius: 10px;

    background: #fff;
}


.welcome-card strong,
.welcome-card span {
    display: block;

    font-size: 14px;
}


.bulb-icon {
    font-size: 28px;
}


/* =========================================================
   COMMAND BANK
========================================================= */

.commands-panel {
    border-radius: 10px;
    overflow: hidden;
}


.command-bank {
    padding: 8px;

    background: #f9ecd5;
}


.command-card {
    min-height: 49px;

    margin-bottom: 7px;
    padding: 5px 8px 5px 5px;

    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 8px;

    border: 1px solid #eee2d1;
    border-radius: 8px;

    background: #fff;

    cursor: grab;

    user-select: none;

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


.command-card:last-child {
    margin-bottom: 0;
}


.command-card:hover {
    transform: translateX(3px);

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


.command-card:active {
    cursor: grabbing;
}


.command-card.dragging {
    opacity: 0.45;
}


.command-card.used {
    opacity: 0.35;

    pointer-events: none;
}


.command-icon {
    width: 44px;
    height: 44px;

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

    border-radius: 7px;

    color: #fff;

    font-size: 24px;
}


.command-text {
    min-width: 0;
}


.command-ky,
.command-en {
    display: block;

    line-height: 1.25;
}


.command-ky {
    font-size: 14px;
    font-weight: 700;
}


.command-en {
    margin-top: 2px;

    font-size: 13px;
}


/* command colors */

.command-card[data-command="prepare"] .command-icon {
    background: #11a7ac;
}

.command-card[data-command="knead"] .command-icon {
    background: #f49013;
}

.command-card[data-command="rest"] .command-icon {
    background: #7150ba;
}

.command-card[data-command="cut"] .command-icon {
    background: #78a92f;
}

.command-card[data-command="oil"] .command-icon {
    background: #1459b3;
}

.command-card[data-command="heat"] .command-icon {
    background: #f13416;
}

.command-card[data-command="cook"] .command-icon {
    background: #cb7500;
}

.command-card[data-command="remove"] .command-icon {
    background: #42a393;
}

.command-card[data-command="serve"] .command-icon {
    background: #e6a900;
}


/* =========================================================
   CODE AREA
========================================================= */

.code-panel {
    overflow: hidden;

    border: 1px solid #e5d4b7;
    border-radius: 11px;

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


.code-workspace {
    min-height: 720px;

    padding: 10px 14px 16px;
}


.fixed-code-row,
.drop-row {
    min-height: 53px;

    display: grid;
    grid-template-columns: 45px 1fr;
    align-items: center;
    gap: 10px;
}


.line-number {
    text-align: center;

    font-size: 17px;
}


.start-block,
.end-block {
    width: 240px;
    min-height: 42px;

    padding: 9px 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    border-radius: 7px;

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


.start-block {
    background:
        linear-gradient(
            #d9eea7,
            #c9e48d
        );

    border: 1px solid #accb69;
}


.start-block .play-symbol {
    color: #51a630;
    font-size: 22px;
}


.end-block {
    background:
        linear-gradient(
            #ffb49a,
            #ff9c7c
        );

    border: 1px solid #f18466;
}


.end-block span {
    color: #ff3131;
}


.drop-row {
    position: relative;
}


.drop-zone {
    min-height: 48px;

    padding: 4px 42px 4px 10px;

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

    border: 1.5px dashed #c7b7a4;
    border-radius: 9px;

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

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


.drop-zone.drag-over {
    border-color: #2aa285;

    background: #eafff7;

    transform: scale(1.01);
}


.drop-placeholder {
    text-align: center;

    color: #a6988d;

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

    text-transform: uppercase;
}


.drop-placeholder strong,
.drop-placeholder span {
    display: block;
}


.placed-command {
    width: 100%;

    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 9px;
}


.placed-command-icon {
    width: 35px;
    height: 35px;

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

    border-radius: 6px;

    background: #e6f4ee;

    font-size: 20px;
}


.placed-command-text {
    font-size: 13px;
    line-height: 1.15;
}


.placed-command-text strong {
    display: block;
}


.remove-command {
    position: absolute;

    right: 5px;
    top: 50%;

    transform: translateY(-50%);

    width: 25px;
    height: 25px;

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

    padding: 0;

    border: none;
    border-radius: 6px;

    background: #b4aca3;
    color: #fff;

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

    cursor: pointer;
}


.drop-row.filled .remove-command {
    display: flex;
}


.drop-row.correct .drop-zone {
    border: 2px solid #35a85c;

    background: #edfff2;
}


.drop-row.incorrect .drop-zone {
    border: 2px solid #e05d4f;

    background: #fff0ed;

    animation: shake 0.35s ease;
}


@keyframes shake {

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

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

    50% {
        transform: translateX(6px);
    }

    75% {
        transform: translateX(-4px);
    }
}


/* =========================================================
   TIP
========================================================= */

.tip-card {
    max-width: 570px;

    margin: 17px auto 0;
    padding: 11px 15px;

    display: flex;
    align-items: center;
    gap: 12px;

    border: 1px solid #e2b35d;
    border-radius: 9px;

    background: #fff9e9;

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


.tip-light {
    flex-shrink: 0;

    font-size: 29px;
}


/* =========================================================
   OUTPUT COLUMN
========================================================= */

.output-column {
    overflow: hidden;

    border: 1px solid #e5d4b7;
    border-radius: 11px;

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


.output-scene {
    height: 340px;

    margin: 8px;

    overflow: hidden;

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

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

    background:
        radial-gradient(
            circle at 50% 40%,
            #fff,
            #fff8ed
        );
}


.output-animation {
    width: 100%;
    height: 100%;

    padding: 22px;

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

    text-align: center;
}


.output-icon {
    margin-bottom: 12px;

    color: #e0c693;

    font-size: 56px;

    transition:
        transform 0.3s ease;
}


.output-icon.animate {
    animation: bounce 0.65s ease;
}


@keyframes bounce {

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

    40% {
        transform: translateY(-14px) scale(1.08);
    }

    70% {
        transform: translateY(4px) scale(0.98);
    }
}


.output-scene h3 {
    margin: 5px 0;

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


.output-scene p {
    margin: 4px 0;

    font-size: 16px;
}


.boorsok-visual {
    margin-top: 25px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    max-width: 220px;

    line-height: 0.75;
}


.boorsok-visual span {
    display: inline-block;

    margin: -1px 2px;

    color: #d98310;

    font-size: 45px;

    text-shadow:
        inset 0 0 0 #fff,
        0 2px 0 #a95f06;

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


.boorsok-visual.hidden {
    opacity: 0;
}


.boorsok-visual.ready span {
    animation: boorsok-pop 0.55s ease both;
}


.boorsok-visual.ready span:nth-child(2) {
    animation-delay: 0.05s;
}

.boorsok-visual.ready span:nth-child(3) {
    animation-delay: 0.10s;
}

.boorsok-visual.ready span:nth-child(4) {
    animation-delay: 0.15s;
}

.boorsok-visual.ready span:nth-child(5) {
    animation-delay: 0.20s;
}

.boorsok-visual.ready span:nth-child(6) {
    animation-delay: 0.25s;
}

.boorsok-visual.ready span:nth-child(7) {
    animation-delay: 0.30s;
}


@keyframes boorsok-pop {

    0% {
        transform: scale(0);
    }

    75% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}


/* =========================================================
   PROGRAMMER CARD
========================================================= */

.programmer-card {
    min-height: 165px;

    margin: 8px;
    padding: 13px 15px;

    display: flex;
    gap: 13px;

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

    background:
        linear-gradient(
            135deg,
            #f2f9ff,
            #e6f3ff
        );

    color: #103f91;
}


.programmer-card p {
    margin: 0;

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


.programmer-icon {
    flex-shrink: 0;

    width: 30px;
    height: 30px;

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

    border: 1px solid #d7d1c2;
    border-radius: 5px;

    background: #fff9ec;

    color: #2c83c9;

    font-size: 12px;
}


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

.feedback {
    min-height: 40px;

    margin: 8px;
    padding: 8px 12px;

    display: none;

    align-items: center;

    border-radius: 8px;

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


.feedback.show {
    display: flex;
}


.feedback.success {
    border: 1px solid #84d09a;
    background: #ecfff1;
    color: #176b31;
}


.feedback.error {
    border: 1px solid #efaaa1;
    background: #fff0ed;
    color: #9e2b20;
}


.feedback.info {
    border: 1px solid #a9cbed;
    background: #edf6ff;
    color: #245c96;
}


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

.action-button {
    width: calc(100% - 16px);

    min-height: 48px;

    margin: 8px;

    border-radius: 8px;

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

    cursor: pointer;

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


.action-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.12);
}


.action-button:active {
    transform: translateY(1px);
}


.run-button {
    border: none;

    background:
        linear-gradient(
            #37a64b,
            #218c34
        );

    color: #fff;
}


.clear-button {
    border: 1.5px solid #2870c8;

    background: #fff;

    color: #1555a3;
}


/* =========================================================
   FOOTER
========================================================= */

.activity-footer {
    margin-top: 14px;
    padding: 14px 20px 20px;

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

    background: transparent;
}


.back-button {
    min-width: 420px;

    padding: 15px 28px;

    border: none;
    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            #1263bb,
            #0d4fa2
        );

    color: #fff;

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

    cursor: pointer;

    box-shadow:
        0 4px 10px rgba(20, 70, 140, 0.18);
}

.back-button {
    position: relative;
    z-index: 2;

    min-width: 490px;

    padding: 17px 30px;

    border: none;
    border-radius: 8px 8px 0 0;

    background:
        linear-gradient(
            90deg,
            #1263bb,
            #0d4fa2
        );

    color: #fff;

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

    cursor: pointer;
}


/* =========================================================
   SUCCESS MODAL
========================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;

    z-index: 1000;

    padding: 20px;

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

    background:
        rgba(29, 23, 15, 0.66);

    backdrop-filter: blur(4px);
}


.modal-overlay.show {
    display: flex;
}


.success-modal {
    position: relative;

    width: min(520px, 100%);

    padding: 35px 28px;

    border: 4px solid #e8b440;
    border-radius: 20px;

    background:
        linear-gradient(
            150deg,
            #fffef8,
            #fff2d0
        );

    text-align: center;

    animation: modal-in 0.35s ease;
}


@keyframes modal-in {

    from {
        opacity: 0;
        transform: translateY(20px) scale(0.94);
    }

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


.close-modal {
    position: absolute;

    top: 10px;
    right: 14px;

    border: none;
    background: transparent;

    font-size: 30px;

    cursor: pointer;

    color: #7e6947;
}


.success-stars {
    margin-bottom: 10px;

    color: #f3ae00;

    font-size: 42px;
}


.success-modal h2 {
    margin: 3px 0;

    color: #ae2317;

    font-size: 32px;
}


.success-modal h3 {
    margin: 4px 0 18px;

    color: #1857a4;

    font-size: 25px;
}


.success-modal p {
    margin: 7px 0;

    line-height: 1.45;
}


.celebration-boorsok {
    margin: 24px 0;

    color: #dc8611;

    font-size: 37px;
}


.play-again-button {
    padding: 13px 25px;

    border: none;
    border-radius: 8px;

    background: #268f3c;
    color: #fff;

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

    cursor: pointer;
}


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

@media (max-width: 1250px) {

    .game-layout {
        grid-template-columns:
            280px
            1fr;
    }


    .output-column {
        grid-column: 1 / -1;

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

        gap: 8px;

        padding-bottom: 10px;
    }


    .output-heading {
        grid-column: 1 / -1;
    }


    .output-scene {
        height: 300px;
    }


    .programmer-card {
        height: auto;
    }


    .feedback,
    .action-button {
        grid-column: 1 / -1;
    }
}


@media (max-width: 850px) {

    .activity-header {
        flex-direction: column;
    }


    .header-right {
        width: 100%;
        justify-content: center;
    }


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


    .family-photo-card {
        height: 380px;
    }


    .output-column {
        grid-column: auto;

        display: block;
    }


    .code-workspace {
        min-height: auto;
    }


    .back-button {
        min-width: auto;
        width: 90%;

        font-size: 14px;
    }
}


@media (max-width: 520px) {

    .activity-header {
        padding: 12px 10px;
    }


    .header-title {
        gap: 8px;
    }


    .chef-icon {
        display: none;
    }


    .header-right {
        flex-direction: column;
    }


    .level-card,
    .heritage-card {
        width: 100%;
    }


    .heritage-card {
        height: 120px;
    }


    .main-instruction {
        width: calc(100% - 20px);

        padding: 10px;

        font-size: 13px;
    }


    .game-layout {
        width: calc(100% - 14px);
    }


    .family-photo-card {
        height: 310px;
    }


    .command-card {
        min-height: 56px;
    }


    .fixed-code-row,
    .drop-row {
        grid-template-columns: 30px 1fr;
    }


    .line-number {
        font-size: 14px;
    }


    .start-block,
    .end-block {
        width: min(220px, 100%);

        font-size: 13px;
    }


    .drop-zone {
        min-height: 56px;
    }


    .output-scene {
        height: 300px;
    }
}




/* STANDARD_CHAPTER_BACK_BUTTON_V2_START */


/* ==========================================================
   STANDARD BOOK ACTIVITY BACK BUTTON
   Same compact warm-orange pill style as Activity 6.
========================================================== */


/* ----------------------------------------------------------
   FOOTER POSITION
---------------------------------------------------------- */

.activity-footer,
.quiz-footer {

    width:
        100% !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    box-sizing:
        border-box !important;

    margin:
        10px auto 14px !important;

    padding:
        0 22px !important;

    background:
        transparent !important;
}


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

.back-button {

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        max-content !important;

    min-height:
        0 !important;

    height:
        auto !important;


    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        7px !important;


    margin:
        0 !important;


    padding:
        10px 20px !important;


    box-sizing:
        border-box !important;


    border:
        0 !important;

    border-radius:
        999px !important;


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


    color:
        #063c78 !important;


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

    font-size:
        14px !important;

    line-height:
        1.2 !important;

    font-weight:
        800 !important;

    letter-spacing:
        0 !important;


    text-align:
        center !important;

    text-decoration:
        none !important;

    text-transform:
        none !important;

    white-space:
        nowrap !important;


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


    cursor:
        pointer !important;


    position:
        relative !important;

    top:
        auto !important;

    right:
        auto !important;

    bottom:
        auto !important;

    left:
        auto !important;


    transform:
        none !important;


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


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

.back-button: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;
}


/* ----------------------------------------------------------
   CLICK
---------------------------------------------------------- */

.back-button:active {

    transform:
        translateY(0) !important;

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


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

.back-button:focus-visible {

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

    outline-offset:
        3px !important;
}


/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media (max-width: 700px) {

    .activity-footer,
    .quiz-footer {

        padding:
            0 12px !important;
    }


    .back-button {

        padding:
            9px 16px !important;

        font-size:
            12px !important;

        white-space:
            normal !important;
    }
}


/* STANDARD_CHAPTER_BACK_BUTTON_V2_END */




/* BOORSOK_CHILD_FRIENDLY_V2_START */


/* ==========================================================
   CHILD-FRIENDLY BOORSOK ACTIVITY

   Design principle:
   CHOOSE -> BUILD -> WATCH

   Less reading.
   Bigger actions.
   Faster visual understanding.
========================================================== */


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

.main-instruction {

    max-width:
        720px !important;

    padding:
        9px 18px !important;

    gap:
        13px !important;

    margin-bottom:
        10px !important;
}


.main-instruction > div:last-child {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        center;

    column-gap:
        12px;

    row-gap:
        2px;
}


.challenge-ky {

    font-size:
        18px !important;

    line-height:
        1.15 !important;

    font-weight:
        800 !important;

    color:
        #9d241b;
}


.challenge-en {

    margin-top:
        0 !important;

    font-size:
        17px !important;

    line-height:
        1.15 !important;

    font-weight:
        800 !important;
}


.quick-help {

    flex-basis:
        100%;

    margin-top:
        2px;

    color:
        #6b655e;

    font-size:
        12px;

    line-height:
        1.2;

    font-weight:
        700;
}


.quick-help span {

    margin:
        0 5px;

    color:
        #d09a3e;
}


/* ----------------------------------------------------------
   PANEL HEADINGS
---------------------------------------------------------- */

.panel-heading {

    min-height:
        36px !important;

    padding:
        7px 12px !important;

    font-size:
        16px !important;

    font-weight:
        800 !important;
}


/* ----------------------------------------------------------
   COMMAND CARDS
---------------------------------------------------------- */

.command-card {

    min-height:
        45px !important;

    margin-bottom:
        5px !important;

    grid-template-columns:
        42px 1fr !important;

    gap:
        7px !important;

    padding:
        4px 8px 4px 4px !important;
}


.command-icon {

    width:
        39px !important;

    height:
        39px !important;

    font-size:
        21px !important;
}


.command-ky {

    font-size:
        13px !important;

    line-height:
        1.12 !important;
}


.command-en {

    margin-top:
        1px !important;

    font-size:
        11.5px !important;

    line-height:
        1.12 !important;

    color:
        #5c6570;
}


/* ----------------------------------------------------------
   DROP ZONES
---------------------------------------------------------- */

.drop-placeholder {

    font-size:
        11px !important;

    line-height:
        1.1 !important;

    opacity:
        .72;
}


.drop-placeholder strong {

    font-size:
        11px !important;
}


.drop-placeholder span {

    margin-top:
        2px;

    font-size:
        10px !important;
}


/* ----------------------------------------------------------
   SMALL TIP
---------------------------------------------------------- */

.tip-card {

    max-width:
        430px !important;

    margin-top:
        8px !important;

    padding:
        6px 10px !important;

    gap:
        8px !important;

    font-size:
        11px !important;

    line-height:
        1.2 !important;
}


.tip-light {

    font-size:
        20px !important;
}


/* ----------------------------------------------------------
   MINI ALGORITHM CONCEPT CARD
---------------------------------------------------------- */

.programmer-card.mini-programmer-card {

    min-height:
        0 !important;

    margin:
        6px 8px !important;

    padding:
        8px 11px !important;

    align-items:
        center !important;

    gap:
        9px !important;
}


.mini-programmer-text {

    min-width:
        0;
}


.mini-programmer-text strong,
.mini-programmer-text span {

    display:
        block;
}


.mini-programmer-text strong {

    font-size:
        12px;

    line-height:
        1.2;
}


.mini-programmer-text span {

    margin-top:
        2px;

    font-size:
        11px;

    line-height:
        1.2;

    color:
        #42699c;
}


/* ----------------------------------------------------------
   OUTPUT = VISUAL REWARD AREA
---------------------------------------------------------- */

.output-scene {

    height:
        330px !important;
}


.output-icon {

    margin-bottom:
        7px !important;

    font-size:
        68px !important;
}


.output-scene h3 {

    margin:
        4px 0 !important;

    font-size:
        21px !important;

    line-height:
        1.15 !important;

    font-weight:
        800 !important;

    color:
        #7e321d;
}


.output-scene p {

    margin:
        2px 0 !important;

    font-size:
        16px !important;

    line-height:
        1.2 !important;

    font-weight:
        700 !important;

    color:
        #245da0;
}


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

   Short feedback should look like a game notification,
   not an explanatory paragraph.
---------------------------------------------------------- */

.feedback {

    min-height:
        34px !important;

    margin:
        6px 8px !important;

    padding:
        7px 10px !important;

    justify-content:
        center;

    text-align:
        center;

    font-size:
        13px !important;

    line-height:
        1.2 !important;

    font-weight:
        800 !important;
}


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

   Make the main action visually dominant.
---------------------------------------------------------- */

.run-button {

    font-size:
        16px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .02em !important;
}


/* Reset is deliberately quieter */

.clear-button {

    font-size:
        13px !important;

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   SUCCESS MODAL
---------------------------------------------------------- */

.success-modal h2 {

    margin-bottom:
        2px !important;
}


.success-modal h3 {

    margin-top:
        2px !important;
}


.success-modal p {

    margin:
        5px 0 !important;

    line-height:
        1.25 !important;
}


/* ----------------------------------------------------------
   SMALLER / LAPTOP SCREENS
---------------------------------------------------------- */

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

    .main-instruction {

        padding:
            7px 15px !important;

        margin-bottom:
            7px !important;
    }


    .command-card {

        min-height:
            42px !important;

        margin-bottom:
            4px !important;
    }


    .command-icon {

        width:
            36px !important;

        height:
            36px !important;

        font-size:
            19px !important;
    }


    .output-scene {

        height:
            300px !important;
    }


    .output-icon {

        font-size:
            58px !important;
    }


    .tip-card {

        margin-top:
            5px !important;
    }

}


/* BOORSOK_CHILD_FRIENDLY_V2_END */



/* BOORSOK_REMOVE_PHOTO_ICONS_V3_START */


/* ==========================================================
   CLEANER CHILD-FRIENDLY LAYOUT
   No portrait card.
   No decorative code icons around instructions/title.
========================================================== */


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

   Center naturally now that chef icon is removed.
---------------------------------------------------------- */

.header-title {

    gap:
        0 !important;

    align-items:
        center !important;
}


.header-title > div {

    width:
        100%;
}


/* Hide defensively in case old cached HTML remains */

.chef-icon {

    display:
        none !important;
}


/* ----------------------------------------------------------
   MAIN INSTRUCTION

   No decorative </> icon.
---------------------------------------------------------- */

.instruction-code {

    display:
        none !important;
}


.main-instruction {

    gap:
        0 !important;

    max-width:
        700px !important;

    padding:
        8px 18px !important;
}


/* ----------------------------------------------------------
   REMOVE PHOTO AREA DEFENSIVELY
---------------------------------------------------------- */

.family-photo-card {

    display:
        none !important;
}


/* ----------------------------------------------------------
   MAIN GRID

   Commands now start immediately at the top.

   Slightly wider command column because there is no image
   consuming its vertical space.
---------------------------------------------------------- */

.game-layout {

    grid-template-columns:
        minmax(260px, 320px)
        minmax(520px, 1.45fr)
        minmax(340px, 0.92fr) !important;

    align-items:
        start !important;

    gap:
        12px !important;
}


/* ----------------------------------------------------------
   LEFT COLUMN
---------------------------------------------------------- */

.left-column {

    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        0 !important;
}


/* Command panel should begin immediately */

.commands-panel {

    margin-top:
        0 !important;
}


/* ----------------------------------------------------------
   COMMAND BANK

   With the photo removed there is much more vertical room.
---------------------------------------------------------- */

.command-bank {

    padding:
        7px !important;
}


.command-card {

    min-height:
        50px !important;

    margin-bottom:
        6px !important;
}


.command-card:last-child {

    margin-bottom:
        0 !important;
}


/* ----------------------------------------------------------
   MAKE COMMAND TEXT EASIER TO READ
---------------------------------------------------------- */

.command-ky {

    font-size:
        14px !important;

    line-height:
        1.15 !important;

    font-weight:
        800 !important;
}


.command-en {

    margin-top:
        2px !important;

    font-size:
        12px !important;

    line-height:
        1.15 !important;
}


/* ----------------------------------------------------------
   LAPTOP HEIGHT
---------------------------------------------------------- */

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

    .command-card {

        min-height:
            46px !important;

        margin-bottom:
            5px !important;
    }


    .command-icon {

        width:
            38px !important;

        height:
            38px !important;
    }

}


/* BOORSOK_REMOVE_PHOTO_ICONS_V3_END */



/* BOORSOK_HEADER_ALIGNMENT_V4_START */


/* ==========================================================
   BOORSOK TOP AREA ALIGNMENT

   Align:
   - title block
   - level / boorsok card
   - challenge instruction

   into one visually balanced header zone.
========================================================== */


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

.activity-header {

    position:
        relative !important;

    padding:
        13px 22px 4px !important;

    min-height:
        126px !important;

    align-items:
        flex-start !important;
}


/* ----------------------------------------------------------
   TITLE

   Move slightly downward.
---------------------------------------------------------- */

.header-title {

    padding-top:
        17px !important;

    align-items:
        center !important;

    justify-content:
        center !important;
}


.header-title > div {

    width:
        100% !important;

    text-align:
        center !important;
}


.header-title h1 {

    margin:
        0 !important;

    line-height:
        1.08 !important;
}


.header-title h2 {

    margin:
        10px 0 0 !important;

    line-height:
        1.08 !important;
}


/* ----------------------------------------------------------
   RIGHT SCORE + BOORSOK IMAGE

   Move down to match title visually.
---------------------------------------------------------- */

.header-right {

    padding-top:
        0 !important;

    margin-top:
        0 !important;

    align-items:
        stretch !important;
}


.level-card,
.heritage-card {

    margin-top:
        0 !important;
}


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

   Pull upward so the top area becomes tighter and aligned.
---------------------------------------------------------- */

.main-instruction {

    position:
        relative !important;

    z-index:
        2 !important;

    margin:
        -4px auto 7px !important;

    min-height:
        60px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;
}


/* Keep challenge contents visually centered */

.main-instruction > div:last-child {

    width:
        100% !important;

    justify-content:
        center !important;

    text-align:
        center !important;
}


/* ----------------------------------------------------------
   REDUCE GAP BEFORE GAME PANELS
---------------------------------------------------------- */

.game-layout {

    margin-top:
        0 !important;
}


/* ----------------------------------------------------------
   LAPTOP SIZE SIMILAR TO SCREENSHOT
---------------------------------------------------------- */

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

    .activity-header {

        min-height:
            122px !important;

        padding-top:
            10px !important;
    }


    .header-title {

        padding-top:
            17px !important;
    }


    .main-instruction {

        margin-top:
            -5px !important;

        margin-bottom:
            6px !important;
    }

}


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

/* BOORSOK_MATCH_ACTIVITY1_TYPOGRAPHY_V1_START */


/* ==========================================================
   BOORSOK ALGORITHM
   TYPOGRAPHY MATCHED TO CHAPTER I — ACTIVITY 1
   ========================================================== */


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

html,
body,
.activity-page {

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

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}


/* ----------------------------------------------------------
   2. ALL ORDINARY ACTIVITY TEXT
   ---------------------------------------------------------- */

.header-title,
.header-title h1,
.header-title h2,

.level-card,
.level-card strong,
.step-counter,

.main-instruction,
.main-instruction p,
.challenge-ky,
.challenge-en,
.quick-help,

.panel-heading,

.welcome-card,
.welcome-card strong,
.welcome-card span,

.command-card,
.command-text,
.command-ky,
.command-en,

.start-block,
.end-block,

.drop-placeholder,
.drop-placeholder strong,
.drop-placeholder span,

.placed-command-text,
.placed-command-text strong,

.tip-card,

.programmer-card,
.programmer-card p,

.mini-programmer-text,
.mini-programmer-text strong,
.mini-programmer-text span,

.output-scene,
.output-scene h3,
.output-scene p,

.feedback,

.action-button,
.run-button,
.clear-button,

.success-modal,
.success-modal h2,
.success-modal h3,
.success-modal p,
.play-again-button {

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


/* ----------------------------------------------------------
   3. KYRGYZ CHARACTER RENDERING
   Same treatment as Activity 1.
   ---------------------------------------------------------- */

.header-title h1,
.header-title h2,

.challenge-ky,
.challenge-en,

.panel-heading,

.command-ky,
.command-en,

.drop-placeholder,
.placed-command-text,

.tip-card,

.mini-programmer-text strong,
.mini-programmer-text span,

.output-scene h3,
.output-scene p,

.feedback,

.success-modal h2,
.success-modal h3,
.success-modal p {

    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

   Keep existing sizes/colours.
   Standard Activity 1 bold appearance.
   ---------------------------------------------------------- */

.header-title h1,
.header-title h2 {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   5. CHALLENGE TEXT

   Existing child-friendly block used 800.
   Activity 1 uses a softer normal bold appearance.
   ---------------------------------------------------------- */

.challenge-ky,
.challenge-en {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   6. PANEL HEADINGS
   ---------------------------------------------------------- */

.panel-heading {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   7. COMMAND BANK

   Kyrgyz command labels previously became 800.
   English remains lighter.
   ---------------------------------------------------------- */

.command-ky {

    font-weight:
        700 !important;
}


.command-en {

    font-weight:
        400 !important;
}


/* ----------------------------------------------------------
   8. DROP-ZONE / ALGORITHM TEXT
   ---------------------------------------------------------- */

.drop-placeholder strong,
.placed-command-text strong,
.start-block,
.end-block {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   9. HELP / EXPLANATION TEXT
   ---------------------------------------------------------- */

.quick-help,
.tip-card,
.programmer-card p,
.mini-programmer-text span {

    font-weight:
        400 !important;
}


.mini-programmer-text strong {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   10. OUTPUT AREA
   ---------------------------------------------------------- */

.output-scene h3 {

    font-weight:
        700 !important;
}


.output-scene p {

    font-weight:
        400 !important;
}


/* ----------------------------------------------------------
   11. FEEDBACK

   Existing child-friendly block used 800.
   ---------------------------------------------------------- */

.feedback {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   12. ACTION BUTTONS

   Avoid artificial 800 / 900 appearance.
   ---------------------------------------------------------- */

.action-button,
.run-button,
.clear-button,
.play-again-button {

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

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   13. SUCCESS MODAL
   ---------------------------------------------------------- */

.success-modal h2,
.success-modal h3 {

    font-weight:
        700 !important;
}


.success-modal p {

    font-weight:
        400 !important;
}


/* ----------------------------------------------------------
   14. BACK TO CHAPTER

   EXACT Activity 1 typography:

       Arial / Helvetica
       14px
       weight 700
       line-height 1.15

   Existing orange pill, position, padding, hover and shadow
   are deliberately preserved.
   ---------------------------------------------------------- */

.back-button,
.back-button * {

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-transform:
        none !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ----------------------------------------------------------
   15. RESPONSIVE BACK-BUTTON PROTECTION

   Existing mobile rule reduces it to 12px.
   Keep the Activity 1 typography instead.
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .back-button,
    .back-button * {

        font-size:
            14px !important;

        font-weight:
            700 !important;

        line-height:
            1.15 !important;
    }

}


/* ----------------------------------------------------------
   16. PROTECT REAL CODE / TECHNICAL TYPOGRAPHY

   This activity visually teaches an algorithm, so any actual
   code/pre/terminal elements must retain monospace.
   ---------------------------------------------------------- */

code,
pre,
kbd,
samp,

.code,
.code *,
.code-block,
.code-block *,

.code-editor,
.code-editor *,

.terminal,
.terminal *,

.console,
.console * {

    font-family:
        ui-monospace,
        "Cascadia Code",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace !important;
}


/* BOORSOK_MATCH_ACTIVITY1_TYPOGRAPHY_V1_END */