/* =========================================================
   Aqlli savollar — o'quv uslubi (katak daftar + sinf doskasi)
   ========================================================= */

:root {
    --paper: #fdfbf3;
    --grid: rgba(70, 130, 200, 0.13);
    --margin-line: rgba(220, 70, 70, 0.35);
    --ink: #1f2a44;
    --muted: #5d667a;
    --line: #d5dae4;

    --board: #2f4a3a;
    --board-dark: #253c2f;
    --wood: #9a6a3c;
    --wood-dark: #7a5230;
    --chalk: #f4f1e6;

    --blue: #2563eb;
    --blue-soft: #e3ecfe;
    --green: #15803d;
    --green-soft: #dcf5e4;
    --orange: #ea7a12;
    --purple: #7c3aed;
    --teal: #0f8a86;
    --red: #dc2626;
    --red-soft: #fde4e4;
    --pink: #db2777;
    --sky: #0284c7;
    --marker: #fff1a8;

    --radius: 12px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Nunito', system-ui, sans-serif;
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 24px 24px;
    padding: 0 16px 48px;
}

/* Daftar hoshiyasi (qizil chiziq) */
body::before {
    content: '';
    position: fixed;
    top: 0; bottom: 0;
    left: 56px;
    width: 2px;
    background: var(--margin-line);
    pointer-events: none;
}
@media (max-width: 900px) { body::before { display: none; } }

button { font: inherit; color: inherit; }

/* ---------- Sinf doskasi (sarlavha) ---------- */
.board {
    max-width: 920px;
    margin: 24px auto 0;
    background: var(--board);
    background-image: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06), transparent 60%);
    border: 10px solid var(--wood);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    box-shadow: inset 0 0 0 2px var(--wood-dark);
    color: var(--chalk);
    text-align: center;
}
.board { position: relative; }
.board-inner { padding: 22px 16px 16px; }

/* Til tugmasi (UZ / RU) — doskaning o'ng yuqori burchagida */
.lang-switch {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    padding: 3px;
    border: 2px solid rgba(244, 241, 230, 0.5);
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.25);
}
.lang-btn {
    padding: 5px 12px;
    border: none;
    border-radius: 99px;
    background: transparent;
    color: var(--chalk);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.lang-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.12); }
.lang-btn.active { background: var(--chalk); color: var(--board); }
@media (max-width: 600px) {
    .lang-switch { top: 6px; right: 6px; }
    .lang-btn { padding: 4px 9px; font-size: 12px; }
    .board-inner { padding-top: 34px; }
}
.board-title {
    font-family: 'Caveat', cursive;
    font-size: clamp(36px, 7vw, 56px);
    font-weight: 700;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.5px;
}
.board-sub {
    font-family: 'Caveat', cursive;
    font-size: 24px;
    margin: 6px 0 0;
    opacity: 0.8;
}
.board-ledge {
    height: 14px;
    background: var(--wood-dark);
    margin: 0 -10px;
    border-radius: 0 0 6px 6px;
    position: relative;
}
.chalk {
    position: absolute;
    left: 18%;
    top: -4px;
    width: 38px; height: 8px;
    background: var(--chalk);
    border-radius: 3px;
}

/* ---------- Tablar (stikerlar) ---------- */
.tabs {
    max-width: 920px;
    margin: 20px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 10px;
}
.tab {
    padding: 12px 8px;
    border: 2px solid transparent;
    border-radius: 10px 10px 4px 4px;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    background: #fff;
    border-color: var(--line);
    transition: transform .15s, box-shadow .15s;
}
.tab { position: relative; }
.tab:hover { transform: translateY(-2px); }

/* Bajarilganlar soni — tabning o'ng yuqori burchagida */
.tab-badge {
    position: absolute;
    top: -9px;
    right: -6px;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 99px;
    background: var(--orange);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}
.tab-badge[hidden] { display: none; }
.tab-badge.bump { animation: badge-bump .5s ease; }
@keyframes badge-bump {
    0% { transform: scale(.4); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Sessiyani yangilash tugmasi — doskaning chap yuqori burchagida */
.reset-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 6px 14px;
    border: 2px solid rgba(244, 241, 230, 0.5);
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--chalk);
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.reset-btn:hover { background: rgba(255, 255, 255, 0.12); }
.reset-btn.confirm { background: var(--red); border-color: #fff; color: #fff; }
@media (max-width: 600px) {
    .reset-btn { top: 6px; left: 6px; padding: 4px 10px; font-size: 12px; max-width: 58%; }
}
.tab.active { color: #fff; transform: translateY(-3px); box-shadow: 0 4px 0 rgba(0,0,0,0.15); }
.tab-blue.active   { background: var(--blue);   border-color: var(--blue); }
.tab-green.active  { background: var(--green);  border-color: var(--green); }
.tab-orange.active { background: var(--orange); border-color: var(--orange); }
.tab-purple.active { background: var(--purple); border-color: var(--purple); }
.tab-teal.active   { background: var(--teal);   border-color: var(--teal); }
.tab-red.active    { background: var(--red);    border-color: var(--red); }
.tab-pink.active   { background: var(--pink);   border-color: var(--pink); }
.tab-sky.active    { background: var(--sky);    border-color: var(--sky); }

/* Progress qatori: tablar bosilmaydi, turlar tartib bilan o'zi almashadi — faqat son ko'rinadi */
.progress-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.progress-strip .tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    cursor: default;
    opacity: .75;
}
.progress-strip .tab:hover { transform: none; }
.progress-strip .tab.active { opacity: 1; }
.progress-strip .tab-badge { position: static; flex: none; border-color: transparent; box-shadow: none; }
.progress-strip .tab-badge.zero { background: #cfd6e4; color: #5a6680; }
/* Odatda yashirin — faqat «📊 Progress» bosilganda ochiladi */
.progress-strip[hidden] { display: none; }
.progress-strip[hidden] + .sheet { margin-top: 20px; border-radius: var(--radius); }

/* «📊 Progress» tugmasi — «↻ Yangilash» ostida */
.progress-btn {
    position: absolute;
    top: 50px;
    left: 10px;
    z-index: 2;
    padding: 6px 14px;
    border: 2px solid rgba(244, 241, 230, 0.5);
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--chalk);
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.progress-btn:hover, .progress-btn.open { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
@media (max-width: 600px) {
    .progress-btn { top: 38px; left: 6px; padding: 4px 10px; font-size: 12px; }
}

/* «🔒» qulf tugmasi — «📊 Progress» ostida */
.lock-btn {
    position: absolute;
    top: 90px;
    left: 10px;
    z-index: 2;
    width: 38px;
    height: 34px;
    border: 2px solid rgba(244, 241, 230, 0.5);
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.25);
    font-size: 16px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.lock-btn:hover { background: rgba(255, 255, 255, 0.12); }
.lock-btn.open { background: var(--green); border-color: #fff; }
@media (max-width: 600px) {
    .lock-btn { top: 70px; left: 6px; width: 32px; height: 28px; font-size: 13px; }
}

/* Qulf ochiq: tablar bosiladi */
.progress-strip.unlocked .tab { cursor: pointer; }
.progress-strip.unlocked .tab:hover { opacity: 1; transform: translateY(-2px); }

/* Bosqich raqamlari */
.jump-steps {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 2px dashed var(--line);
    border-radius: 10px;
    background: #fff;
}
.jump-steps[hidden] { display: none; }
.jump-label { font-weight: 800; font-size: 13px; margin-right: 4px; }
.jump-step {
    min-width: 34px;
    height: 32px;
    padding: 0 8px;
    border: 2px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.jump-step:hover { border-color: var(--blue); }
.jump-step.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Parol oynasi */
.lock-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.5);
}
.lock-modal[hidden] { display: none; }
.lock-box {
    width: 100%;
    max-width: 300px;
    padding: 22px 20px;
    border-radius: var(--radius);
    background: #fff;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.lock-icon { font-size: 36px; }
.lock-text { margin: 6px 0 12px; font-weight: 800; }
.lock-input {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--line);
    border-radius: 10px;
    font: inherit;
    font-size: 22px;
    text-align: center;
    letter-spacing: 6px;
}
.lock-input:focus { outline: none; border-color: var(--blue); }
.lock-error { margin: 8px 0 0; color: var(--red); font-weight: 700; }
.lock-error[hidden] { display: none; }
.lock-actions { display: flex; gap: 8px; margin-top: 14px; }
.lock-actions button {
    flex: 1;
    padding: 9px;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.lock-actions .lock-ok { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- Varaq ---------- */
.sheet {
    max-width: 920px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 2px 0 var(--line), 0 10px 30px rgba(31, 42, 68, 0.06);
    padding: 24px;
}
@media (max-width: 600px) { .sheet { padding: 16px; } }

.task-head { margin-bottom: 20px; }
.task-label {
    display: inline-block;
    background: var(--marker);
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 14px;
}
.task-head h2 { margin: 10px 0 4px; font-size: 24px; }
.task-head p { margin: 0; color: var(--muted); }

/* ---------- Umumiy karta va tugmalar ---------- */
.card {
    background: #fff;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 2px 0 var(--line);
}

.btn {
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 800;
    cursor: pointer;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 3px 0 #1a47b0; }
.btn-primary:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #1a47b0; }
.btn-ghost { background: #fff; border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue); }

.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.status-row.center { justify-content: center; }
.status-text { color: var(--muted); }

.result-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--green-soft);
    border: 2px solid var(--green);
    font-weight: 700;
}
.result-note small { font-weight: 600; color: var(--muted); }
.result-note.bad { background: var(--red-soft); border-color: var(--red); }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* ---------- 1. Rasmlarni ulash ---------- */
.match-arena {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
}
@media (max-width: 600px) { .match-arena { gap: 28px; } }

.match-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.match-lines path {
    fill: none;
    stroke: var(--green);
    stroke-width: 3;
    stroke-linecap: round;
}

.match-col { display: flex; flex-direction: column; gap: 12px; }

.match-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 10px 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.match-card:hover { border-color: var(--blue); }
.match-card.selected { border-color: var(--blue); background: var(--blue-soft); }
.match-card.matched { border-color: var(--green); background: var(--green-soft); cursor: default; }
.match-card.wrong { border-color: var(--red); background: var(--red-soft); animation: shake .4s; }

.match-icon {
    flex: none;
    width: 48px; height: 48px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--blue-soft);
    color: var(--blue);
}
.match-icon svg {
    width: 30px; height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.matched .match-icon { background: #fff; color: var(--green); }
.match-name { font-weight: 800; flex: 1; }
.match-desc { font-size: 15px; flex: 1; }

.dot {
    position: absolute;
    top: 50%;
    width: 12px; height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--muted);
}
.left .dot  { right: -8px; }
.right .dot { left: -8px; }
.matched .dot { background: var(--green); border-color: var(--green); }

@media (max-width: 600px) {
    .match-card { flex-direction: column; align-items: flex-start; gap: 6px; }
    .match-icon { width: 40px; height: 40px; }
    .match-name, .match-desc { font-size: 14px; }
}

/* ---------- 2. Bloklar ketma-ketligi ---------- */
.seq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.seq-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: grab;
    transition: border-color .15s, background .15s;
}
.seq-card.dragging { opacity: .4; }
.seq-card.drop-target { border-color: var(--blue); border-style: dashed; }
.seq-card.correct { border-color: var(--green); background: var(--green-soft); }
.seq-card.wrong { border-color: var(--red); background: var(--red-soft); animation: shake .4s; }

.seq-num {
    flex: none;
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--marker);
    font-weight: 800;
}
.seq-text { flex: 1; font-weight: 600; }
.seq-arrows { display: flex; flex-direction: column; gap: 4px; }
.arrow {
    width: 34px; height: 24px;
    border: 1.5px solid var(--line);
    background: #fff;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
}
.arrow:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.arrow:disabled { opacity: .3; cursor: default; }

/* ---------- 3. Blitz quiz ---------- */
.quiz-progress {
    height: 8px;
    margin-top: 12px;
    background: var(--blue-soft);
    border-radius: 99px;
    overflow: hidden;
}
.quiz-progress span { display: block; height: 100%; background: var(--orange); transition: width .3s; }

.quiz-top {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}
.quiz-q { margin: 0; font-size: 22px; line-height: 1.35; }

.timer { position: relative; flex: none; width: 64px; height: 64px; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 6; }
.timer-bg { stroke: var(--blue-soft); }
.timer-fg { stroke: var(--orange); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.timer-num {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 20px;
}
.timer.low .timer-fg { stroke: var(--red); }
.timer.low .timer-num { color: var(--red); }

.quiz-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 600px) { .quiz-options { grid-template-columns: 1fr; } }

.quiz-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    text-align: left;
    font-weight: 600;
    cursor: pointer;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-soft); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.correct { border-color: var(--green); background: var(--green-soft); }
.quiz-opt.wrong { border-color: var(--red); background: var(--red-soft); animation: shake .4s; }

.opt-letter {
    flex: none;
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--blue-soft);
    color: var(--blue);
    font-weight: 800;
}
.correct .opt-letter { background: var(--green); color: #fff; }
.wrong .opt-letter { background: var(--red); color: #fff; }

.quiz-score { text-align: center; padding: 12px 0 8px; }
.score-big { font-family: 'Caveat', cursive; font-size: 88px; line-height: 1; color: var(--blue); }
.score-big small { font-size: 44px; color: var(--muted); }
.score-grade { font-size: 20px; font-weight: 800; margin-top: 6px; }

.review-title { margin: 24px 0 10px; font-size: 18px; }
.review { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.review li { padding: 12px 14px; }
.review-q { font-weight: 800; margin-bottom: 6px; }
.review-bad { color: var(--red); }
.review-ok { color: var(--green); font-weight: 700; }

/* ---------- 2. O'qi va tikla (doskadagi matn) ---------- */
.rc-board {
    padding: 22px 24px;
    border: 8px solid var(--wood);
    border-radius: 10px;
    background: var(--board);
    color: var(--chalk);
    font-size: 21px;
    font-weight: 600;
    line-height: 2.1;
    transition: border-color .2s;
}
@media (max-width: 600px) { .rc-board { font-size: 17px; padding: 16px; } }

/* O'qish: ochiq matn; yopilgach — bo'sh joylar; «Yana qarash» — vaqtincha ochiq matn */
.rc-gaps { display: none; }
.rc-board.closed .rc-full { display: none; }
.rc-board.closed .rc-gaps { display: block; }
.rc-board.closed.peek .rc-full { display: block; }
.rc-board.closed.peek .rc-gaps { display: none; }
.rc-board.peek { border-color: var(--marker); }
.rc-board.finished { border-color: var(--green); }

.rc-term {
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 241, 168, 0.18);
    box-shadow: inset 0 -3px 0 var(--marker);
    color: var(--marker);
    font-weight: 800;
}
.rc-board.finished .rc-term { color: #9be7b0; box-shadow: inset 0 -3px 0 #4ade80; background: rgba(74, 222, 128, 0.15); }
.rc-board.finished .rc-term.was-missed { color: #fca5a5; box-shadow: inset 0 -3px 0 #f87171; background: rgba(248, 113, 113, 0.15); }

/* Bo'sh joy */
.rc-blank {
    display: inline-block;
    min-height: 1.4em;
    padding: 0 6px;
    vertical-align: middle;
    line-height: 1.4;
    border-bottom: 3px dashed rgba(244, 241, 230, 0.55);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}
.rc-blank.active { border-bottom-style: solid; border-bottom-color: var(--marker); background: rgba(255, 241, 168, 0.18); }
.rc-blank.ok { border-bottom: 3px solid #4ade80; color: #9be7b0; font-weight: 800; cursor: default; }
.rc-blank.bad { animation: shake .25s; background: rgba(220, 38, 38, 0.45); }

/* So'zlar banki */
.rc-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.rc-bank:empty { display: none; }
.rc-chip {
    padding: 9px 16px;
    border: 2px solid var(--line);
    border-radius: 99px;
    background: #fff;
    box-shadow: 0 3px 0 var(--line);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform .1s, border-color .15s;
}
.rc-chip:hover { border-color: var(--purple); transform: translateY(-2px); }
.rc-chip.used { opacity: .3; cursor: default; transform: none; }
.rc-chip.bad { border-color: var(--red); background: var(--red-soft); animation: shake .25s; }

.rc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-stars { margin-right: 6px; font-size: 20px; letter-spacing: 2px; }

/* ---------- 5. Egasini top (qutilarga ajratish) ---------- */
.sort-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 480px) { .sort-boxes { gap: 10px; } }

.sort-box {
    --box: var(--blue);
    --box-soft: var(--blue-soft);
    border: 3px dashed var(--box);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.sort-box.box-1 { --box: var(--orange); --box-soft: #fdebd8; }
.sort-box.over,
.waiting .sort-box:hover { background: var(--box-soft); transform: scale(1.01); }
.waiting .sort-box { border-style: solid; }
.sort-box.reject { border-color: var(--red); background: var(--red-soft); animation: shake .4s; }

.box-head {
    padding: 10px 14px;
    background: var(--box);
    color: #fff;
    border-radius: 9px 9px 0 0;
    display: flex;
    flex-direction: column;
}
.box-name { font-weight: 800; font-size: 17px; }
.box-hint { font-size: 13px; opacity: .9; }

.box-items {
    min-height: 130px;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
}

/* Sochilgan kartochkalar */
.sort-pool {
    margin-top: 20px;
    padding: 20px 12px;
    border-radius: 14px;
    background: repeating-linear-gradient(45deg, #f6f1e3, #f6f1e3 12px, #f2ecdb 12px, #f2ecdb 24px);
    border: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    min-height: 60px;
}
.sort-pool.empty::before { content: attr(data-empty); color: var(--muted); font-weight: 700; } /* matn tilga qarab JS'dan */

.chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 104px;
    padding: 12px 8px 10px;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 3px 0 var(--line), 0 6px 14px rgba(31, 42, 68, 0.08);
    transform: rotate(var(--rot, 0deg));
    cursor: grab;
    transition: transform .15s, border-color .15s;
}
.chip:hover { transform: rotate(0deg) translateY(-3px); border-color: var(--blue); }
.chip.selected { transform: rotate(0deg) translateY(-4px); border-color: var(--blue); background: var(--blue-soft); }
.chip.dragging { opacity: .4; }
.chip.wrong { border-color: var(--red); background: var(--red-soft); animation: shake .4s; }

.chip-icon {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--blue-soft);
    color: var(--blue);
}
.chip-icon svg {
    width: 28px; height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.chip-name { font-weight: 700; font-size: 14px; text-align: center; line-height: 1.2; }

/* Haqiqiy rasmli kartochka */
.chip:has(.chip-img) { width: 124px; }
.chip-icon.chip-img { width: 96px; height: 96px; background: #fff; }
.chip-img img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.chip.placed:has(.chip-img) { width: auto; }
.chip.placed .chip-icon.chip-img { width: 40px; height: 40px; }
@media (max-width: 480px) {
    .chip:not(.placed):has(.chip-img) { width: 100px; }
    .chip-icon.chip-img { width: 76px; height: 76px; }
}

/* Qutiga joylangan kartochka — kichik va tekis */
.chip.placed {
    width: auto;
    flex-direction: row;
    padding: 6px 10px 6px 6px;
    transform: none;
    cursor: default;
    border-color: var(--green);
    background: var(--green-soft);
    box-shadow: none;
}
.chip.placed .chip-icon { width: 30px; height: 30px; background: #fff; color: var(--green); }
.chip.placed .chip-icon svg { width: 20px; height: 20px; }
.chip.placed .chip-name { font-size: 13px; }

@media (max-width: 480px) {
    .chip { width: 88px; }
    .chip-name { font-size: 12px; }
}

/* ---------- 7. Gapni yig' ---------- */
/* Yig'iladigan qator: har so'z uchun bo'sh joy */
.sent-line {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 8px;
    padding: 18px 16px;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: #fff;
}
.sent-line.solved { border-color: var(--green); background: var(--green-soft); }

.sent-slot {
    min-width: 64px;
    height: 46px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px dashed var(--line);
    color: var(--line);
    font-weight: 800;
    transition: background .15s, border-color .15s;
}
.sent-slot.filled { border-bottom-style: solid; border-bottom-color: var(--blue); }
.sent-slot.over { background: var(--blue-soft); border-bottom-color: var(--blue); border-radius: 8px 8px 0 0; }
.sent-slot.correct { border-bottom-color: var(--green); }
.sent-slot.correct .word { border-color: var(--green); background: var(--green-soft); }
.sent-slot.wrong { border-bottom-color: var(--red); }
.sent-slot.wrong .word { border-color: var(--red); background: var(--red-soft); animation: shake .4s; }
.sent-end { font-size: 26px; font-weight: 800; line-height: 46px; }

/* Stol: so'zlar sochilib yotadi */
.sent-field {
    position: relative;
    margin-top: 16px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: repeating-linear-gradient(45deg, #f6f1e3, #f6f1e3 12px, #f2ecdb 12px, #f2ecdb 24px);
    transition: box-shadow .15s;
}
.sent-field.over { box-shadow: inset 0 0 0 3px var(--blue); }
.sent-field:not(:has(.word))::before {
    content: attr(data-empty); /* matn tilga qarab JS'dan */
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 700;
}

.word {
    display: inline-block;
    padding: 8px 14px;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 3px 0 var(--line);
    font-weight: 800;
    font-size: 17px;
    white-space: nowrap;
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: border-color .15s;
}
.word:hover { border-color: var(--blue); }
.sent-field .word {
    position: absolute;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
    box-shadow: 0 3px 0 var(--line), 0 6px 14px rgba(31, 42, 68, 0.1);
}
.sent-field .word:hover { z-index: 2; transform: translate(-50%, -50%) rotate(0deg) scale(1.05); }
.sent-slot .word { box-shadow: none; }
.solved .word { cursor: default; }

/* Qo'lda ushlab turilgan so'z */
.word.lifted,
.sent-field .word.lifted {
    position: fixed;
    z-index: 100;
    margin: 0;
    transform: rotate(-3deg) scale(1.08);
    border-color: var(--blue);
    box-shadow: 0 12px 24px rgba(31, 42, 68, 0.25);
    cursor: grabbing;
    pointer-events: none;
}

/* Pastda — gapning o'zi */
.sent-ref {
    margin-bottom: 14px;
    padding: 12px 16px;
    border-left: 5px solid var(--pink);
    border-radius: 0 10px 10px 0;
    background: var(--marker);
    font-size: 18px;
    font-weight: 700;
}
.sent-ref-label { color: var(--pink); margin-right: 6px; }

@media (max-width: 480px) {
    .word { font-size: 15px; padding: 6px 10px; }
    .sent-slot { min-width: 48px; height: 40px; }
    .sent-end { line-height: 40px; }
}

/* ---------- 6. Jang qil (RPG) ---------- */
/* Jang sahnasi: manzara foni, tepada HUD panellari, pastda personajlar */
.battle-arena {
    position: relative;
    aspect-ratio: 16 / 9;
    min-height: 260px;
    overflow: hidden;
    border: 6px solid var(--wood);
    border-radius: 12px;
    background: var(--board);
    color: #fff;
    user-select: none;
}
.scene-bg {
    position: absolute;
    inset: 0;
    background: center bottom / cover no-repeat;
}
/* Tepa qismi biroz qoraytiriladi — HUD yozuvlari o'qilishi uchun */
.scene-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.25), transparent 35%);
}

/* HUD: avatar, ism, HP */
.hud {
    position: absolute;
    top: 10px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 46%;
    padding: 6px 12px 6px 6px;
    background: rgba(22, 30, 52, 0.78);
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.hero-hud { left: 10px; }
.monster-hud { right: 10px; flex-direction: row-reverse; padding: 6px 6px 6px 12px; text-align: right; }
.hud-avatar {
    flex: none;
    width: 52px; height: 52px;
    display: grid;
    place-items: center;
    font-size: 32px;
    border: 2px solid #fff;
    border-radius: 12px;
    background: #d9ecff center / contain no-repeat;
}
.hero-hud .hud-avatar.has-img { background-size: 300%; background-position: 42% 8%; }
.monster-hud .hud-avatar { background-color: #fde2e2; }
.monster-hud .hud-avatar.flip { transform: scaleX(-1); }
.hud-info { min-width: 0; }
.hud-name { font-weight: 800; font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-sub { font-size: 12px; font-weight: 700; opacity: .85; }
.hud-gear img { width: 20px; height: 20px; vertical-align: -5px; }

.hp-bar {
    width: 150px;
    max-width: 100%;
    height: 12px;
    margin: 4px 0 2px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 99px;
    overflow: hidden;
}
.monster-hud .hp-bar { margin-left: auto; }
.hp-bar span { display: block; height: 100%; background: #4ade80; transition: width .5s, background .3s; }
.hp-bar.mid span { background: #fbbf24; }
.hp-bar.low span { background: #f87171; }
.hp-text { font-size: 13px; font-weight: 800; }

/* Personajlar (yerda turadi) */
.fighter {
    position: absolute;
    bottom: 4%;
    height: 62%;
    aspect-ratio: 1;
    z-index: 2;
}
.fighter.hero { left: 5%; }
.fighter.monster { right: 5%; }
/* Oyoq ostidagi soya */
.fighter::before {
    content: '';
    position: absolute;
    left: 22%; right: 22%;
    bottom: 3%;
    height: 9%;
    border-radius: 50%;
    background: radial-gradient(rgba(0, 0, 0, 0.4), transparent 70%);
}
.fighter-body {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: end center;
    font-size: clamp(56px, 11vw, 110px);
    line-height: 1;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3));
}
.fighter-body img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.fighter.flip .fighter-body img { transform: scaleX(-1); }
/* Kutish holati: jangchilar sekin "nafas oladi" */
.hero .fighter-body    { animation: idle 2.4s ease-in-out infinite; }
.monster .fighter-body { animation: idle 2s ease-in-out infinite reverse; }

/* Zarba, jarohat, davolanish animatsiyalari (klasslarni battle.js qo'shadi) */
@keyframes idle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
/* Qahramon o'ngga — monstr tomon otilib zarba beradi */
@keyframes hero-attack {
    0%   { transform: translateX(0) scale(1); }
    40%  { transform: translateX(55%) scale(1.12) rotate(6deg); }
    100% { transform: translateX(0) scale(1); }
}
/* Monstr chapga — qahramon tomon */
@keyframes monster-attack {
    0%   { transform: translateX(0) scale(1); }
    40%  { transform: translateX(-55%) scale(1.12) rotate(-6deg); }
    100% { transform: translateX(0) scale(1); }
}
/* Zarba yegan tomon qizarib chayqaladi */
@keyframes take-damage {
    0%   { transform: translateX(0); filter: none; }
    20%  { transform: translateX(-14px) rotate(-6deg); filter: brightness(1.8) drop-shadow(0 0 14px #ef4444); }
    40%  { transform: translateX(12px) rotate(4deg); filter: drop-shadow(0 0 14px #ef4444); }
    60%  { transform: translateX(-7px); }
    80%  { transform: translateX(4px); }
    100% { transform: translateX(0); filter: none; }
}
/* Davolanish: yashil nur bilan pulsatsiya */
@keyframes heal-pulse {
    0%   { transform: scale(1); filter: drop-shadow(0 0 0 #4ade80); }
    50%  { transform: scale(1.25) translateY(-8px); filter: drop-shadow(0 0 22px #4ade80); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0 #4ade80); }
}
/* Yiqilish: sakrab, yonboshiga ag'dariladi va o'chadi */
@keyframes fall-down {
    30%  { transform: translateY(-20px) rotate(-10deg); }
    100% { transform: translateY(30px) rotate(90deg) scale(.8); opacity: .35; filter: grayscale(1); }
}
/* Kuchli zarbada butun maydon silkinadi */
@keyframes arena-shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-8px, 3px); }
    40% { transform: translate(7px, -3px); }
    60% { transform: translate(-5px, 2px); }
    80% { transform: translate(3px, -1px); }
}
@keyframes float-up {
    0%   { opacity: 0; transform: translate(-50%, 15px) scale(.6); }
    30%  { opacity: 1; transform: translate(-50%, -15px) scale(1.25); }
    100% { opacity: 0; transform: translate(-50%, -50px) scale(.9); }
}
@keyframes combo-pop {
    0%   { transform: scale(.5); opacity: 0; }
    60%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}
/* Qilich izi: yoy bo'ylab aylanib o'chadi */
@keyframes slash {
    0%   { opacity: 0; transform: translate(-50%, 0) rotate(-70deg) scale(.6); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, 0) rotate(35deg) scale(1.1); }
}
@keyframes banner {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(.4); }
    20%  { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
    35%  { transform: translate(-50%, 0) scale(1); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -20px) scale(1); }
}

.hero.lunge .fighter-body      { animation: hero-attack .45s cubic-bezier(.175, .885, .32, 1.275); }
.monster.lunge .fighter-body   { animation: monster-attack .45s cubic-bezier(.175, .885, .32, 1.275); }
.fighter.hurt .fighter-body    { animation: take-damage .5s ease; }
.fighter.healing .fighter-body { animation: heal-pulse .7s ease; }
/* dead oxirida turadi: halokatli zarbada hurt o'rniga yiqilish ishlaydi */
.fighter.dead .fighter-body    { animation: fall-down .7s ease-in forwards; }
.battle-arena.shake            { animation: arena-shake .35s ease; }

.float-num {
    position: absolute;
    top: -6%;
    left: 50%;
    z-index: 10;
    font-size: 34px;
    font-weight: 900;
    white-space: nowrap;
    pointer-events: none;
    -webkit-text-stroke: 1.5px #3b0a0a;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
    animation: float-up 1.1s ease-out forwards;
}
.float-num.dmg  { color: #ff5a5a; }
.float-num.crit { color: #ffd23f; font-size: 44px; text-shadow: 0 0 14px #f59e0b, 0 3px 0 rgba(0, 0, 0, 0.45); }
/* Davolanish — rasmdagidek pufakcha */
.float-num.heal {
    padding: 4px 12px;
    font-size: 24px;
    color: var(--green);
    -webkit-text-stroke: 0;
    text-shadow: none;
    background: #fff;
    border: 3px solid var(--green);
    border-radius: 16px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
/* Zarba izi: qahramonniki — oq-havorang, monstrniki — qizil */
.float-num.slash, .float-num.claw {
    top: 12%;
    width: 75%;
    aspect-ratio: 1;
    border-radius: 50%;
    border-right: 10px solid rgba(225, 248, 255, 0.95);
    filter: drop-shadow(0 0 8px #7dd3fc);
    -webkit-text-stroke: 0;
    animation: slash .4s ease-out forwards;
}
.float-num.claw { border-right-color: rgba(255, 90, 90, 0.95); filter: drop-shadow(0 0 8px #ef4444); }
/* Combo yozuvi — sahna o'rtasida */
.float-num.combo {
    top: 30%;
    font-size: 42px;
    color: #ff8a00;
    -webkit-text-stroke: 2px #fff;
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
    animation: banner 1.2s ease-out forwards;
}

/* Combo seriyasi */
.streak { transition: color .2s; }
.streak.hot { color: var(--orange); }
.streak.hot b { color: var(--orange); }
.combo-badge {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 10px;
    border-radius: 99px;
    background: var(--orange);
    color: #fff;
    animation: combo-pop .4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .fighter-body, .battle-arena.shake { animation: none !important; }
    .fighter.dead .fighter-body { opacity: .35; filter: grayscale(1); }
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    margin-top: 12px;
    color: var(--muted);
    font-weight: 700;
}
.hero-stats b { color: var(--ink); }

.battle-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 18px;
}
.actions-label { font-weight: 800; color: var(--muted); }
.act {
    flex: 1 1 180px;
    padding: 10px 14px;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.act small { font-weight: 700; color: var(--muted); }
.act:hover:not(:disabled) { border-color: var(--blue); }
.act:disabled { opacity: .45; cursor: default; }
.act-attack.active { border-color: var(--red); background: var(--red-soft); }
.act-heal.active { border-color: var(--green); background: var(--green-soft); }

.fast-hint { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 800; color: var(--orange); transition: opacity .3s; }
.fast-hint.gone { opacity: .35; text-decoration: line-through; }

.battle-result { text-align: center; padding: 4px 0 8px; }
.battle-result h2 { margin: 6px 0; font-size: 26px; }
.battle-result p { margin: 8px 0; }
.battle-result .muted { color: var(--muted); }
.result-emoji { font-size: 72px; line-height: 1; }
.rewards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0; }
.reward { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 99px; background: var(--marker); font-weight: 800; }
.reward img { width: 32px; height: 32px; margin: -6px 0; }

@media (max-width: 600px) {
    .battle-arena { aspect-ratio: 4 / 3; border-width: 4px; }
    .fighter { height: 52%; bottom: 5%; }
    .fighter.hero { left: 2%; }
    .fighter.monster { right: 2%; }
    .hud { top: 6px; gap: 6px; max-width: 49%; padding: 4px 8px 4px 4px; }
    .hero-hud { left: 6px; }
    .monster-hud { right: 6px; padding: 4px 4px 4px 8px; }
    .hud-avatar { width: 36px; height: 36px; font-size: 22px; border-radius: 9px; }
    .hud-name { font-size: 13px; }
    .hud-sub { display: none; }
    .hp-bar { width: 90px; height: 10px; }
    .hp-text { font-size: 11px; }
    .float-num { font-size: 26px; }
    .float-num.crit { font-size: 32px; }
    .float-num.heal { font-size: 18px; }
    .float-num.combo { font-size: 30px; }
}

/* ---------- 8. Xatoni ur (tushayotgan bloklar) ---------- */
/* Tepadagi gap — doska uslubida */
.fall-statement {
    position: relative;
    margin: 18px 0 12px;
    padding: 16px 20px;
    border: 6px solid var(--wood);
    border-radius: 10px;
    background: var(--board);
    color: var(--chalk);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
}
.fall-stamp {
    position: absolute;
    right: 10px;
    top: -18px;
    padding: 2px 12px;
    border: 3px solid #4ade80;
    border-radius: 8px;
    background: var(--board);
    color: #4ade80;
    font-size: 18px;
    transform: rotate(-8deg) scale(0);
    opacity: 0;
    transition: transform .35s cubic-bezier(.175, .885, .32, 1.6), opacity .2s;
}
.fall-statement.done { border-color: #4ade80; }
.fall-statement.done .fall-stamp { opacity: 1; transform: rotate(-8deg) scale(1); }

/* O'yin maydoni: rasm fon (bo'lmasa — chizilgan osmon) */
.fall-arena {
    position: relative;
    height: clamp(380px, 62vh, 540px);
    overflow: hidden;
    border: 6px solid var(--wood);
    border-radius: 12px;
    background-color: #9fd8ff;
    background-image:
        var(--fall-bg, none),
        radial-gradient(ellipse at 20% 18%, #fff 0 8%, transparent 9%),
        radial-gradient(ellipse at 75% 30%, #fff 0 6%, transparent 7%),
        linear-gradient(#6ec3ff, #cdeeff 83%, #8fd460 83%, #6cb83f);
    background-size: cover, auto, auto, auto;
    background-position: center bottom;
    user-select: none;
    touch-action: manipulation;
}
.fall-arena.shake { animation: arena-shake .35s ease; }

.fall-hud {
    position: absolute;
    top: 8px; left: 8px; right: 8px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 14px;
    padding: 6px 12px;
    background: rgba(22, 30, 52, 0.75);
    border-radius: 12px;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
}

/* Bloklar tushadigan joy — yer ustigacha */
.fall-field {
    position: absolute;
    top: 52px; left: 0; right: 0;
    bottom: 17%;
    overflow: hidden; /* bloklar HUD ostidan chiqib keladi */
}
.fall-block {
    position: absolute;
    top: 0;
    z-index: 3;
    min-height: 56px;
    padding: 10px 8px;
    border: 3px solid #8a5a2b;
    border-radius: 12px;
    background: linear-gradient(#fff8e6, #ffe3a3);
    box-shadow: 0 4px 0 #6b4420, 0 8px 14px rgba(0, 0, 0, 0.2);
    color: var(--ink);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    cursor: crosshair;
    will-change: transform;
}
.fall-block:hover { border-color: #c2410c; }
/* To'g'ri blok urildi — qizil chaqnab tushishda davom etadi */
.fall-block.oops { border-color: var(--red); background: linear-gradient(#fff, #fde4e4); animation: block-shake .4s; }
/* Xato blok yerga yetdi */
.fall-block.crash { border-color: var(--red); background: var(--red-soft); animation: block-crash .7s forwards; }
/* Xato blok urildi — portlaydi */
.fall-block.boom { animation: block-boom .35s forwards; pointer-events: none; }

@keyframes block-shake {
    0%, 100% { margin-left: 0; }
    25% { margin-left: -8px; }
    75% { margin-left: 8px; }
}
@keyframes block-crash {
    30% { opacity: 1; filter: none; }
    100% { opacity: 0; filter: grayscale(1) blur(2px); }
}
@keyframes block-boom {
    40% { opacity: 1; filter: brightness(1.6); scale: 1.2; }
    100% { opacity: 0; scale: 1.5; }
}

.spark {
    position: absolute;
    z-index: 4;
    width: 10px; height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #ffb020;
    box-shadow: 0 0 8px #ff7a00;
    pointer-events: none;
    animation: spark .55s ease-out forwards;
}
@keyframes spark {
    to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; }
}

.fall-pop {
    position: absolute;
    z-index: 6;
    font-size: 26px;
    font-weight: 900;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
    animation: float-up 1s ease-out forwards;
}
.fall-pop.plus  { color: #ffd23f; -webkit-text-stroke: 1.5px #7c4a03; }
.fall-pop.minus { color: #ff5a5a; -webkit-text-stroke: 1.5px #3b0a0a; font-size: 22px; }

/* Yer: to'g'ri bloklar shu yerga yig'iladi */
.fall-ground {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 17%;
    z-index: 2;
    padding: 6px 8px;
    /* Fon rasmidagi o't ko'rinib tursin — faqat yengil soya */
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.12));
    overflow: hidden;
}
.fall-found { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 6px; height: 100%; }
.found-chip {
    padding: 5px 10px;
    border: 2px solid var(--green);
    border-radius: 99px;
    background: var(--green-soft);
    color: var(--green);
    font-size: 14px;
    font-weight: 800;
    animation: combo-pop .4s ease;
}

/* 3-2-1, URRA! */
.fall-overlay {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.fall-big {
    font-size: 64px;
    font-weight: 900;
    color: #fff;
    -webkit-text-stroke: 2px #1f2a44;
    text-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
    animation: combo-pop .45s ease;
}
.fall-big.go   { color: #ffd23f; }

/* Boshlash tugmasi — gapni o'qib olgach bosiladi */
.fall-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
}
.fall-play {
    padding: 16px 44px;
    border: 4px solid #fff;
    border-radius: 99px;
    background: linear-gradient(#22c55e, #15803d);
    box-shadow: 0 6px 0 #0f5c2c, 0 10px 24px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 32px;
    font-weight: 900;
    cursor: pointer;
    animation: play-pulse 1.6s ease-in-out infinite;
}
.fall-play:hover { filter: brightness(1.08); }
.fall-play:active { transform: translateY(4px); box-shadow: 0 2px 0 #0f5c2c; animation: none; }
.fall-start-hint {
    padding: 6px 14px;
    border-radius: 99px;
    background: rgba(22, 30, 52, 0.75);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    text-align: center;
}
@keyframes play-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@media (max-width: 600px) {
    .fall-play { font-size: 26px; padding: 12px 32px; }
    .fall-start-hint { font-size: 13px; }
}
.fall-big.win  { color: #4ade80; font-size: 72px; }
.fall-big.lose { color: #ff5a5a; font-size: 44px; }

.fall-stars { font-size: 44px; letter-spacing: 6px; }
.fall-review-st { margin-top: 4px; font-size: 13px; color: var(--muted); }

@media (max-width: 600px) {
    .fall-statement { font-size: 17px; padding: 12px 14px; }
    .fall-stamp { font-size: 14px; right: 6px; top: -14px; }
    .fall-field { top: 64px; } /* HUD telefonda ikki qatorga tushishi mumkin */
    .fall-hud { font-size: 13px; }
    .fall-block { font-size: 15px; min-height: 50px; }
    .found-chip { font-size: 12px; padding: 3px 8px; }
    .fall-big { font-size: 48px; }
    .fall-big.win { font-size: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    .fall-arena.shake, .fall-block.oops { animation: none; }
}


/* ---------- Darsni tanlash ro'yxati (index.html ?dars=N siz ochilganda) ---------- */
.lesson-pick { display: flex; flex-direction: column; gap: 14px; }
.lesson-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s, transform .15s, background .15s;
}
.lesson-card:hover, .lesson-card:focus-visible { border-color: var(--blue); background: var(--blue-soft); transform: translateX(4px); outline: none; }
.lesson-icon {
    flex: none;
    width: 56px; height: 56px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--marker);
    font-size: 30px;
}
.lesson-info { flex: 1; min-width: 0; }
.lesson-num, .lesson-name, .lesson-about { display: block; }
.lesson-num { font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.lesson-name { font-size: 19px; font-weight: 800; margin: 2px 0 4px; }
.lesson-about { font-size: 14px; color: var(--muted); }
.lesson-go { flex: none; font-size: 22px; color: var(--blue); }
@media (max-width: 600px) {
    .lesson-icon { width: 44px; height: 44px; font-size: 24px; }
    .lesson-name { font-size: 16px; }
    .lesson-go { display: none; }
}

/* ---------- 9. Xatolar ustida ishlash — «Bilim ko'prigi» ---------- */
.tab-amber.active { background: #d97706; border-color: #d97706; }

/* Sahna: rasm bo'lsa (--rev-bg) — rasm, bo'lmasa CSS osmon + qoyalar + daryo */
.rev-scene {
    position: relative;
    aspect-ratio: 16 / 8;
    min-height: 300px;
    overflow: hidden;
    border: 6px solid var(--wood);
    border-radius: 12px;
    background-color: #9fd8ff;
    background-image: var(--rev-bg), linear-gradient(#7cc8ff, #dff3ff 70%);
    background-size: cover, auto;
    background-position: center bottom;
    user-select: none;
}
.rev-scene.shake { animation: arena-shake .35s ease; }
.rev-scene.art-bg .rev-cliff, .rev-scene.art-bg .rev-water { display: none; }
/* Fon rasmi bor — sahna rasm nisbatida (toshlar va qahramon joyi review.js da rasmdan hisoblanadi) */
.rev-scene.art-bg { aspect-ratio: 1600 / 881; }

.rev-water {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 30%;
    background: linear-gradient(#5ab4f0, #1f6fb5);
    overflow: hidden;
}
/* To'lqinlar */
.rev-water::before {
    content: '';
    position: absolute;
    left: -50%; right: -50%; top: 6%;
    height: 14px;
    background: radial-gradient(circle at 12px -4px, transparent 12px, rgba(255, 255, 255, 0.55) 13px, transparent 16px) 0 0 / 32px 14px repeat-x;
    animation: rev-waves 3s linear infinite;
}
@keyframes rev-waves { to { transform: translateX(32px); } }

.rev-cliff {
    position: absolute;
    bottom: 0;
    width: 20%;
    height: 40%;
    background: linear-gradient(#6cbf4a 0 10%, #4f9a36 10% 14%, #9a6a3c 14%, #7a5230);
}
.rev-cliff.left  { left: 0;  border-top-right-radius: 18px; }
.rev-cliff.right { right: 0; border-top-left-radius: 18px; }

/* Jonlar va ko'prik hisobi — sahna ustida (sakrayotgan qahramonni yopmasligi uchun) */
.rev-hud {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(22, 30, 52, 0.75);
    border-radius: 12px;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
}

/* Toshlar: bo'sh joy — punktir, qo'yilgani — tosh/taxta */
/* Tosh tepasi qoya tepasi bilan bir chiziqda: --rev-line (pastdan %) review.js dan */
.rev-stone {
    position: absolute;
    top: calc(100% - var(--rev-line, 40%));
    height: 7%;
    z-index: 2;
    border: 3px solid transparent;
    background-clip: padding-box;
}
.rev-stone::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px dashed rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
}
.rev-stone.placed::before {
    border: 2px solid #5a3b1c;
    background: linear-gradient(#c4935e, #8a5a2b);
    box-shadow: 0 4px 0 #5a3b1c;
    animation: stone-pop .35s ease;
}
.rev-scene.art-stone .rev-stone { height: auto; aspect-ratio: 2 / 1; border-width: 0 2px; }
.rev-scene.art-stone .rev-stone.placed::before {
    inset: 0;
    border: none;
    box-shadow: none;
    background: var(--rev-stone) center / contain no-repeat;
}
.rev-stone.crack::before { animation: stone-crack .45s ease; }
.rev-scene.art-crack .rev-stone.placed.crack::before { background-image: var(--rev-crack); }
.rev-stone.crumble { animation: stone-crumble .8s ease-in forwards; }
@keyframes stone-pop {
    0% { transform: scale(.3) translateY(-60px); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes stone-crack {
    20% { transform: translateX(-5px) rotate(-3deg); filter: brightness(.7); }
    40% { transform: translateX(5px) rotate(3deg); }
    70% { transform: translateX(-3px); }
}
@keyframes stone-crumble {
    to { transform: translateY(260%) rotate(40deg); opacity: 0; }
}

/* Qahramon */
.rev-hero {
    position: absolute;
    bottom: var(--rev-line, 40%);
    height: 30%;
    aspect-ratio: 1;
    z-index: 3;
    transform: translateX(-50%);
    transition: left .45s ease;
}
.rev-hero-body {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: end center;
    font-size: clamp(40px, 8vw, 80px);
    line-height: 1;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3));
}
.rev-hero-body img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.rev-hero.hop .rev-hero-body { animation: rev-hop .45s ease; }
.rev-hero.fall .rev-hero-body { animation: rev-fall 1.1s ease-in forwards; }
@keyframes rev-hop {
    50% { transform: translateY(-35%) scale(1.05); }
}
@keyframes rev-fall {
    20% { transform: translateY(-15%) rotate(-10deg); }
    100% { transform: translateY(170%) rotate(80deg); opacity: 0; }
}

/* Xazina sandig'i — o'ng qirg'oqda */
.rev-scene.art-bg .rev-hero { height: 26%; }
.rev-chest {
    position: absolute;
    left: 92%;
    translate: -50% 0; /* transform emas — g'alaba animatsiyasi bilan to'qnashmasligi uchun */
    bottom: var(--rev-line, 40%);
    height: 22%;
    aspect-ratio: 1;
    z-index: 2;
    display: grid;
    place-items: end center;
    font-size: clamp(36px, 7vw, 70px);
    line-height: 1;
    background: center bottom / contain no-repeat;
}
.rev-scene.art-chest .rev-chest { background-image: var(--rev-chest); }
.rev-scene.art-chest .rev-chest-emoji { display: none; }
.rev-scene.won.art-chestOpen .rev-chest { background-image: var(--rev-chest-open); }
.rev-scene.won .rev-chest { animation: heal-pulse .8s ease 2; }

.rev-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.rev-big {
    font-size: 52px;
    font-weight: 900;
    color: #fff;
    -webkit-text-stroke: 2px #1f2a44;
    text-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: combo-pop .45s ease;
}
.rev-big.win  { color: #ffd23f; }
.rev-big.lose { color: #7dd3fc; font-size: 44px; }

.rev-splash {
    position: absolute;
    bottom: 10%;
    z-index: 4;
    font-size: 64px;
    transform: translateX(-50%);
    animation: rev-splash 1.2s ease-out forwards;
    animation-delay: .5s;
    opacity: 0;
}
@keyframes rev-splash {
    0% { opacity: 0; transform: translateX(-50%) scale(.3); }
    30% { opacity: 1; transform: translateX(-50%) scale(1.3); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(1); }
}

.rev-confetti {
    position: absolute;
    top: 55%;
    z-index: 6;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    animation: rev-confetti 1.6s ease-out forwards;
}
@keyframes rev-confetti {
    40% { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 1; }
    100% { transform: translate(var(--dx), 120px) rotate(520deg); opacity: 0; }
}

/* Savol */
.rev-question { margin-top: 18px; }
.rev-question .quiz-q { margin: 0 0 14px; }
.rev-from {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 10px;
    border-radius: 99px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 13px;
    font-weight: 800;
}

/* Xatolar yo'q */
.rev-empty { text-align: center; padding: 20px 0 8px; }
.rev-empty-emoji { font-size: 72px; line-height: 1; }
.rev-empty h3 { margin: 10px 0 6px; font-size: 24px; }
.rev-empty p { margin: 0 auto; max-width: 520px; color: var(--muted); }

@media (max-width: 600px) {
    .rev-scene, .rev-scene.art-bg { aspect-ratio: 4 / 3; }
    .rev-hero { height: 24%; }
    .rev-chest { height: 17%; }
    .rev-hud { font-size: 13px; }
    .rev-big { font-size: 34px; }
    .rev-big.lose { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .rev-water::before, .rev-hero-body, .rev-stone::before, .rev-stone, .rev-scene.shake { animation: none !important; }
}
/* =====================================================================
   SCRATCH BLOKLARI va SAHNA (4-darsdan: Skript yig', Natijani top, Sinab ko'r va tuzat)
   Ranglar — Scratch 3 ning rasmiy ranglari
   ===================================================================== */
.sb-events    { --sb: #FFBF00; --sb-d: #CC9900; }
.sb-motion    { --sb: #4C97FF; --sb-d: #3373CC; }
.sb-looks     { --sb: #9966FF; --sb-d: #774DCB; }
.sb-sound     { --sb: #CF63CF; --sb-d: #BD42BD; }
.sb-control   { --sb: #FFAB19; --sb-d: #CF8B17; }
.sb-variables { --sb: #FF8C1A; --sb-d: #DB6E00; }
.sb-sensing   { --sb: #5CB1D6; --sb-d: #2E8EB8; }

.sb-script { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 4px 10px; }
.sb-script + .sb-script { margin-top: 14px; }
.sb-blk {
    position: relative;
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;
    min-height: 40px; padding: 7px 14px 7px 12px;
    border: 1px solid var(--sb-d); border-radius: 6px;
    background: var(--sb); color: #fff;
    font-family: 'Nunito', 'Helvetica Neue', sans-serif; font-weight: 800; font-size: 14px; line-height: 1.25;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    user-select: none;
    transition: transform .12s, box-shadow .15s, opacity .2s;
}
/* Scratch «tishchasi»: bloklar bir-biriga ulanib turadi */
.sb-blk::after {
    content: ''; position: absolute; left: 14px; bottom: -6px; z-index: 1;
    width: 18px; height: 6px; border-radius: 0 0 4px 4px;
    background: var(--sb); border: 1px solid var(--sb-d); border-top: 0;
}
.sb-cap::after { display: none; }
.sb-script > .sb-blk + .sb-blk, .sb-script > .sb-c + .sb-blk, .sb-script > .sb-blk + .sb-c, .sb-c-inner > * + * { margin-top: -1px; }
.sb-hat { border-radius: 22px 22px 6px 6px; padding-top: 14px; min-width: 150px; }
.sb-events.sb-hat, .sb-events .sb-c-top { color: #fff; }
.sb-events.sb-blk { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
.sb-in {
    display: inline-block; min-width: 26px; padding: 2px 9px;
    border-radius: 12px; background: #fff; color: #575E75;
    font-weight: 700; text-align: center; text-shadow: none;
}
.sb-dd {
    display: inline-block; padding: 2px 9px;
    border-radius: 12px; background: rgba(0, 0, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.18);
}
.sb-bool {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 16px;
    background: #59C059; color: #fff;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}
.sb-flag { width: 20px; height: 20px; vertical-align: middle; }

/* C-blok (takrorlash, agar) */
.sb-c { display: flex; flex-direction: column; align-items: flex-start; position: relative; }
.sb-c > .sb-c-top { border-radius: 6px 6px 0 6px; min-width: 170px; }
.sb-c > .sb-c-top::after { left: 30px; }
.sb-c-mid { display: flex; align-items: stretch; }
.sb-c-arm { width: 16px; background: var(--sb); border-left: 1px solid var(--sb-d); }
.sb-c-inner { display: flex; flex-direction: column; align-items: flex-start; min-height: 30px; min-width: 120px; padding: 2px 0 6px; }
.sb-c-bottom { width: 100%; min-width: 90px; height: 22px; background: var(--sb); border: 1px solid var(--sb-d); border-top: 0; border-radius: 0 6px 6px 6px; position: relative; }
.sb-c-bottom::after { content: ''; position: absolute; left: 14px; bottom: -6px; width: 18px; height: 6px; border-radius: 0 0 4px 4px; background: var(--sb); border: 1px solid var(--sb-d); border-top: 0; }
.sb-mini .sb-c-inner { min-height: 18px; }
/* «aks holda»: «agar … aks holda» blokining o'rtasidagi bo'lagi (6-dars) */
.sb-c > .sb-c-else { border-radius: 0 6px 6px 0; min-width: 120px; min-height: 34px; padding-top: 5px; padding-bottom: 5px; margin-top: -1px; }
.sb-c > .sb-c-else::after { left: 30px; }
.sb-else { border-radius: 6px; } /* palitrada */
.sb-c > .sb-c-mid + .sb-c-else + .sb-c-mid .sb-c-inner { min-height: 30px; }

/* Belgilar: xato, to'g'ri, topilgan xato, tuzatilgan */
.sb-blk.bad, .sb-c.bad > .sb-c-top { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--red); }
.sb-blk.bug, .sb-c.bug > .sb-c-top { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--red); animation: pulse-bad 1.2s ease infinite; }
.sb-blk.fixed, .sb-c.fixed > .sb-c-top { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--green); }
.sb-blk.shake, .sb-c.shake { animation: shake .4s; }
.sb-script.ok { border-radius: 10px; box-shadow: 0 0 0 3px var(--green-soft); background: rgba(21, 128, 61, 0.05); }
@keyframes pulse-bad { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 9px rgba(220, 38, 38, 0.35); } }

/* Kursor: keyingi blok qo'yiladigan joy */
.sb-cursor {
    margin-top: 4px; padding: 7px 14px;
    border: 2px dashed #94a3b8; border-radius: 6px;
    color: #64748b; font-size: 13px; font-weight: 800;
    background: rgba(255, 255, 255, 0.7);
    animation: blink-slot 1.6s ease-in-out infinite;
}
@keyframes blink-slot { 50% { border-color: var(--blue); color: var(--blue); } }

/* ---------- Skript yig' ---------- */
.bld-goal { margin-top: 6px !important; padding: 10px 14px; border-radius: 10px; background: var(--blue-soft); color: var(--ink) !important; font-weight: 700; }
.bld-wrap { display: grid; grid-template-columns: minmax(230px, 1fr) 1.3fr; gap: 16px; }
.bld-col { border: 2px solid var(--line); border-radius: var(--radius); background: #fff; padding: 12px; min-width: 0; }
.bld-col:first-child { background: #f8fafc; }
.bld-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-weight: 800; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.bld-title .btn { padding: 5px 10px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.bld-palette { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bld-palette > * { cursor: grab; }
.bld-palette > *:hover { transform: translateX(3px); }
.bld-palette .used { opacity: .25; cursor: default; transform: none; }
.bld-palette .glow { animation: glow 1s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--marker), 0 0 18px #facc15; } }
.bld-area { min-height: 200px; border-radius: 10px; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(70, 130, 200, .08) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(70, 130, 200, .08) 23px 24px); padding: 8px; overflow-x: auto; }
.bld-area.drag { outline: 3px dashed var(--blue); }
.bld-area .sb-blk { cursor: pointer; }
.bld-area .sb-blk:hover { filter: brightness(1.06); }
.bld-area .sb-c-inner, .bld-area .sb-c-bottom { cursor: pointer; }
.bld-tip { margin-top: 10px; color: var(--muted); font-size: 14px; }
.bld-stage { margin-top: 16px; }

/* ---------- Natijani top ---------- */
.trc-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.trc-code, .trc-side { border: 2px solid var(--line); border-radius: var(--radius); padding: 12px; background: #fff; min-width: 0; }
.trc-scripts { overflow-x: auto; }
.trc-pre { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--marker); font-size: 14px; }
.trc-story { margin: 0 0 14px 22px; display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-family: 'Nunito', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.trc-q { margin-bottom: 12px; font-size: 18px; font-weight: 800; }
.trc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trc-opt { padding: 14px; font: inherit; font-size: 22px; font-weight: 900; cursor: pointer; transition: transform .1s, border-color .15s; }
.trc-opt:hover:not(:disabled) { border-color: var(--purple); transform: translateY(-2px); }
.trc-opt.correct { border-color: var(--green); background: var(--green-soft); }
.trc-opt.wrong { border-color: var(--red); background: var(--red-soft); animation: shake .4s; }

/* ---------- Sinab ko'r va tuzat ---------- */
.dbg-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: s; }
.dbg-steps li { counter-increment: s; flex: 1 1 200px; padding: 9px 12px 9px 40px; border-radius: 10px; background: #f1f5f9; color: var(--muted); font-weight: 700; font-size: 14px; position: relative; transition: background .2s, color .2s; }
.dbg-steps li::before { content: counter(s); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #cbd5e1; color: #fff; font-size: 12px; }
.dbg-steps li.now { background: var(--blue-soft); color: var(--ink); }
.dbg-steps li.now::before { background: var(--blue); }
.dbg-steps li.done { background: var(--green-soft); color: var(--green); }
.dbg-steps li.done::before { content: '✓'; background: var(--green); }
.dbg-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; align-items: start; }
.dbg-code { border: 2px solid var(--line); border-radius: var(--radius); padding: 12px; background: #fff; min-width: 0; }
.dbg-scripts { overflow-x: auto; }
.dbg-scripts.pickable .sb-blk { cursor: pointer; }
.dbg-scripts.pickable .sb-blk:hover { transform: translateX(3px); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--marker); }
.dbg-fix { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--marker); }
.dbg-fix-title { font-weight: 800; margin-bottom: 10px; }
.dbg-fix-opt { display: block; margin-bottom: 10px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.dbg-fix-opt:hover .sb-blk { transform: translateX(4px); }
.dbg-fix-opt.wrong .sb-blk { animation: shake .4s; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--red); }

/* ---------- Sahna ---------- */
.sb-stage { border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.sb-stage-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #e9f1fc; border-bottom: 2px solid var(--line); }
.sb-go, .sb-stop { width: 40px; height: 34px; border: 2px solid transparent; border-radius: 8px; background: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.sb-go:hover { background: #d9f2dc; }
.sb-go .sb-flag { width: 24px; height: 24px; }
.sb-stop span { width: 16px; height: 16px; background: #EC5959; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.sb-stop:hover { background: #fde4e4; }
.sb-stage-hint { font-size: 13px; font-weight: 700; color: var(--muted); }
.sb-screen {
    position: relative; aspect-ratio: 4 / 3; max-height: 360px; width: 100%;
    background: linear-gradient(#e0f2fe 0 70%, #bbf7d0 70% 100%);
    overflow: hidden;
}
.sb-monitors { position: absolute; left: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.sb-monitor { display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 9px; border: 1px solid #c4ccd9; border-radius: 6px; background: #e6f0ff; font-size: 13px; font-weight: 800; color: #575E75; }
.sb-monitor b { min-width: 34px; padding: 1px 8px; border-radius: 4px; background: #FF8C1A; color: #fff; text-align: center; }
.sb-monitor b.bump { animation: badge-bump .4s ease; }
.sb-sprite {
    position: absolute; transform: translate(-50%, -50%);
    width: 76px; height: 76px; border: 0; background: none; padding: 0;
    cursor: pointer; z-index: 2;
    transition: left .35s cubic-bezier(.2,.8,.2,1), top .35s cubic-bezier(.2,.8,.2,1);
}
.sb-cat { display: block; font-size: 62px; line-height: 76px; transition: transform .25s; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .18)); }
.sb-sprite.hit .sb-cat { animation: hit .3s ease; }
@keyframes hit { 40% { transform: scale(.82); } }
.sb-bubble {
    position: absolute; left: 60%; bottom: 88%;
    padding: 6px 12px; border: 2px solid #c4ccd9; border-radius: 14px;
    background: #fff; color: #575E75; font-weight: 800; font-size: 14px; white-space: nowrap;
}
.sb-bubble::after { content: ''; position: absolute; left: 10px; bottom: -9px; width: 12px; height: 12px; background: #fff; border-right: 2px solid #c4ccd9; border-bottom: 2px solid #c4ccd9; transform: rotate(45deg); }
.sb-float { position: absolute; transform: translate(-50%, -100%); font-weight: 900; font-size: 22px; pointer-events: none; z-index: 4; animation: float-up .9s ease forwards; }
.sb-float.up { color: var(--green); }
.sb-float.down { color: var(--red); }
@keyframes float-up { to { transform: translate(-50%, -260%); opacity: 0; } }
/* Tegish tugmalari (6-dars): sprayt tangaga, dushmanga… tegadi */
.sb-stage-bar { flex-wrap: wrap; }
.sb-touches { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.sb-touches[hidden] { display: none; }
.sb-touch-lbl { font-size: 12px; font-weight: 800; color: var(--muted); }
.sb-touch { width: 40px; height: 34px; border: 2px solid #c4ccd9; border-radius: 8px; background: #fff; font-size: 20px; line-height: 1; cursor: pointer; transition: transform .1s, border-color .15s; }
.sb-touch:hover { border-color: var(--blue); transform: translateY(-2px); }
.sb-touch:active { transform: scale(.92); }
.sb-touch-fx { position: absolute; transform: translate(-10%, -40%); font-size: 40px; pointer-events: none; z-index: 3; animation: touch-fx .7s ease forwards; }
@keyframes touch-fx { 0% { transform: translate(60%, -40%) scale(.6); opacity: 0; } 30% { transform: translate(10%, -40%) scale(1.1); opacity: 1; } 100% { transform: translate(-10%, -40%) scale(.4); opacity: 0; } }

@media (max-width: 760px) {
    .bld-wrap, .trc-wrap, .dbg-wrap { grid-template-columns: 1fr; }
    .sb-blk { font-size: 13px; min-height: 36px; padding: 6px 10px; }
    .trc-opt { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .sb-cursor, .sb-blk.bug, .bld-palette .glow { animation: none; }
}

/* =====================================================================
   SHARTLAR (6-dars): «Rost yoki yolg'on» va «Blok-sxema yo'li»
   ===================================================================== */
/* Shart: yashil olti burchak (Scratch'dagi kabi), «va / yoki / emas» — ichida */
.cnd { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.cnd-leaf {
    padding: 6px 20px; background: #59C059; color: #fff; font-weight: 800;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
    font-family: 'Nunito', sans-serif; white-space: nowrap;
}
.cnd-leaf b { display: inline-block; margin: 0 2px; padding: 0 7px; border-radius: 8px; background: #fff; color: #389438; }
.cnd-group { padding: 6px 10px; border-radius: 14px; background: rgba(89, 192, 89, 0.14); border: 2px dashed rgba(56, 148, 56, 0.45); }
.cnd-group .cnd-group { background: rgba(89, 192, 89, 0.10); }
.cnd-op { font-style: normal; font-weight: 900; color: #2f7d2f; text-transform: uppercase; font-size: .85em; letter-spacing: .04em; }

/* ---------- Rost yoki yolg'on ---------- */
.tr-box { border: 2px solid var(--line); border-radius: var(--radius); background: #fff; padding: 16px; transition: border-color .2s, background .2s; }
.tr-box.ok { border-color: var(--green); background: #f3fbf5; }
.tr-box.bad { border-color: var(--red); background: #fff6f6; }
.tr-top { display: flex; gap: 10px; align-items: center; font-weight: 800; color: var(--muted); }
.tr-count { margin-right: auto; padding: 4px 12px; border-radius: 20px; background: #f1f5f9; }
.tr-score b, .tr-streak b { color: var(--ink); }
.tr-vars, .fl-vars { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.fl-vars { flex-direction: column; margin: 0 0 14px; }
.tr-var { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border: 2px solid var(--line); border-radius: 12px; background: #f8fafc; font-weight: 800; color: var(--muted); }
.tr-var.used { border-color: #FFB061; background: #fff7ed; color: var(--ink); }
.tr-var-ic { font-size: 20px; }
.tr-var b { margin-left: auto; min-width: 46px; padding: 3px 10px; border-radius: 8px; background: #FF8C1A; color: #fff; text-align: center; }
.tr-var.is-true b { background: var(--green); }
.tr-var.is-false b { background: #94a3b8; }
.tr-var.bump b { animation: badge-bump .5s ease; }
.tr-time { height: 8px; border-radius: 6px; background: #e2e8f0; overflow: hidden; }
.tr-time span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #22c55e, #84cc16); transition: width .1s linear; }
.tr-time span.low { background: linear-gradient(90deg, #ef4444, #f97316); }
.tr-q { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 110px; margin: 16px 0; padding: 14px; border-radius: 14px; background: #fffbea; font-size: 22px; }
.tr-if { padding: 7px 14px; border-radius: 8px; background: #FFAB19; color: #fff; font-weight: 900; }
.tr-qm { font-size: 30px; font-weight: 900; color: #CF8B17; }
.tr-cond.pop { animation: tr-pop .35s ease; }
@keyframes tr-pop { from { transform: scale(.85); opacity: 0; } }
.tr-btns, .fl-ask-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tr-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 10px; border: 3px solid transparent; border-radius: 14px; font: inherit; font-size: 20px; font-weight: 900; cursor: pointer; transition: transform .1s, box-shadow .15s, opacity .2s; }
.tr-btn small { font-size: 12px; opacity: .55; }
.tr-yes { background: var(--green-soft); color: var(--green); border-color: #86efac; }
.tr-no { background: var(--red-soft); color: var(--red); border-color: #fca5a5; }
.tr-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .1); }
.tr-btn:disabled { cursor: default; opacity: .55; }
.tr-btn.correct { opacity: 1; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--green); }
.tr-btn.wrong { opacity: 1; animation: shake .4s; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--red); }
.tr-explain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-weight: 700; }
.tr-explain.good { background: var(--green-soft); }
.tr-explain.bad { background: var(--red-soft); }
.tr-explain span { flex: 1 1 260px; }
.tr-final { padding: 26px 16px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; text-align: center; }
.tr-final .rc-stars { font-size: 36px; }
.tr-final h3 { margin: 8px 0 4px; font-size: 22px; }
.tr-final p { color: var(--muted); font-weight: 800; }
.tr-final-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- Blok-sxema yo'li ---------- */
.fl-wrap { display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start; }
.fl-chart { display: flex; flex-direction: column; align-items: center; padding: 14px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; overflow-x: auto; min-width: 0; }
.fl-chart > * { flex: none; }
.fl-side { position: sticky; top: 70px; padding: 12px; border: 2px solid var(--line); border-radius: var(--radius); background: #f8fafc; }
.fl-run-n { display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 20px; background: var(--blue); color: #fff; font-weight: 800; font-size: 13px; }
.fl-q { margin-bottom: 10px; font-weight: 800; }
.fl-q-cond { margin-top: 8px; display: flex; justify-content: center; font-size: 15px; }
.fl-ask-btns .tr-btn { font-size: 17px; padding: 12px 8px; }
.fl-note { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--red-soft); font-weight: 700; font-size: 14px; }
.fl-result { padding: 14px; border-radius: 12px; font-weight: 800; font-size: 17px; }
.fl-result.good { background: var(--green-soft); }
.fl-result.bad { background: var(--red-soft); }
.fl-result b { display: block; margin-top: 4px; font-size: 19px; }

.fl-start, .fl-end { padding: 8px 18px; border-radius: 999px; font-weight: 800; text-align: center; }
.fl-start { background: #FFBF00; color: #fff; }
.fl-node { border: 2px solid #cbd5e1; background: #fff; transition: box-shadow .2s, border-color .2s, background .2s, opacity .2s; }
.fl-end { max-width: 190px; font-size: 14px; }
.fl-end.good { border-color: #86efac; }
.fl-end.bad { border-color: #fca5a5; }
.fl-act { padding: 8px 14px; border-radius: 8px; border-color: #FFB061; background: #fff7ed; font-weight: 800; font-size: 14px; max-width: 200px; text-align: center; }
.fl-arrow { width: 2px; height: 22px; background: #cbd5e1; position: relative; }
.fl-arrow::after { content: ''; position: absolute; left: -5px; bottom: -2px; border: 6px solid transparent; border-top-color: #cbd5e1; border-bottom: 0; }
.fl-if { display: flex; flex-direction: column; align-items: center; }
.fl-diamond { padding: 14px 26px; background: #fffbea; border-color: #FFAB19; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); border-radius: 0; font-weight: 800; font-size: 14px; }
.fl-diamond span { display: inline-flex; align-items: center; gap: 4px; }
.fl-diamond .cnd-leaf { padding: 4px 14px; font-size: 13px; }
.fl-diamond .cnd-group { padding: 3px 6px; }
.fl-branches { display: flex; align-items: flex-start; gap: 14px; position: relative; }
.fl-br { display: flex; flex-direction: column; align-items: center; position: relative; padding-top: 22px; }
/* Ulovchi chiziqlar: rombdan pastga, keyin ikki tomonga */
.fl-br::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 22px; background: #cbd5e1; }
.fl-br-yes::after { content: ''; position: absolute; top: 0; left: 50%; right: -7px; height: 2px; background: #cbd5e1; }
.fl-br-no::after { content: ''; position: absolute; top: 0; left: -7px; right: 50%; height: 2px; background: #cbd5e1; }
.fl-if > .fl-diamond { margin-bottom: 0; }
.fl-if > .fl-branches::before { content: ''; position: absolute; top: -14px; left: 50%; width: 2px; height: 14px; background: #cbd5e1; }
.fl-if > .fl-branches { margin-top: 14px; }
.fl-lbl { margin-bottom: 8px; padding: 5px 12px; border: 2px solid transparent; border-radius: 10px; font: inherit; font-weight: 900; font-size: 13px; cursor: default; }
.fl-lbl.yes { background: var(--green-soft); color: var(--green); }
.fl-lbl.no { background: var(--red-soft); color: var(--red); }
.fl-lbl:not(:disabled) { cursor: pointer; border-color: currentColor; animation: blink-slot 1.4s ease-in-out infinite; }
.fl-lbl.shake { animation: shake .4s; }
/* Bosib o'tilgan yo'l va joriy tugun */
.fl-br.on::before, .fl-br.on::after, .fl-arrow.on, .fl-if.on > .fl-branches::before { background: var(--blue); }
.fl-arrow.on::after { border-top-color: var(--blue); }
.fl-node.on { border-color: var(--blue); background: #eef5ff; }
.fl-diamond.on { background: #dbeafe; }
.fl-node.now { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--marker); }
.fl-diamond.now { filter: drop-shadow(0 0 6px #facc15); box-shadow: none; }
.fl-end.on.good { background: var(--green-soft); border-color: var(--green); }
.fl-end.on.bad { background: var(--red-soft); border-color: var(--red); }

@media (max-width: 760px) {
    .fl-wrap { grid-template-columns: 1fr; }
    .fl-side { position: static; order: -1; }
    .tr-q { font-size: 17px; min-height: 90px; }
    .tr-btn { font-size: 17px; padding: 13px 8px; }
}

/* =====================================================================
   «AQLLI OYNA» rejimi (index.php?dars=N&oyna=ID) — js/oyna.js
   ===================================================================== */
body.oyna-mode .reset-btn, body.oyna-mode .lock-btn { display: none; }
body.oyna-mode .progress-btn { top: 10px; }
.oyna-bar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 12px;
    max-width: 920px; margin: 0 auto 12px; padding: 10px 14px;
    border: 2px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); border-top: 0;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(31, 42, 68, 0.08);
}
.oyna-logo { font-size: 24px; }
.oyna-info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.oyna-info b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oyna-info small { color: var(--muted); font-weight: 700; font-size: 12px; }
.oyna-count { padding: 5px 12px; border-radius: 20px; background: var(--green-soft); color: var(--green); font-weight: 800; font-size: 14px; white-space: nowrap; }
.oyna-list { padding: 7px 14px; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap; }
.oyna-list:hover { filter: brightness(1.1); }

.oyna-overlay {
    position: fixed; inset: 0; z-index: 90;
    display: grid; place-items: center; padding: 16px;
    background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px);
}
.oyna-box { max-width: 420px; width: 100%; padding: 28px 24px; border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
.oyna-ic { font-size: 48px; margin-bottom: 8px; }
.oyna-box h2 { font-size: 22px; margin-bottom: 6px; }
.oyna-box p { color: var(--muted); margin-bottom: 16px; }
.oyna-btns { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

.oyna-toast {
    position: fixed; left: 50%; bottom: 20px; z-index: 95; transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px;
    max-width: calc(100% - 32px); padding: 12px 16px;
    border-radius: 14px; background: #1e293b; color: #fff; font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: toast-in .35s ease; transition: opacity .5s ease;
}
.oyna-toast button { flex: none; padding: 6px 12px; border: 0; border-radius: 8px; background: var(--marker); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.oyna-toast.out { opacity: 0; }
@keyframes toast-in { from { transform: translate(-50%, 20px); opacity: 0; } }
@media (max-width: 600px) {
    .oyna-bar { gap: 8px; padding: 8px 10px; }
    .oyna-info small { display: none; }
    .oyna-list { padding: 6px 10px; font-size: 13px; }
}

/* «Kompyuter sirlari» — o'yin sahifasi iframe ichida (o'z ichida aylanadi, ekranga sig'adi) */
.komp-frame { display: block; width: 100%; height: max(700px, calc(100vh - 140px)); border: 0; border-radius: 16px; background: #eef2ff; }