/* ============================================================
   BasicEdu — Interaktiv o'yinlar (games)
   Players: static/js/games/*. Editor: static/js/games/editor.js.
   DESIGN_SYSTEM.md §2.3 — o'yin = accent (energiya), to'g'ri = success,
   noto'g'ri = warm. Faqat var(--bedu-*) tokenlar; dark mode tokenlar orqali.
   ============================================================ */

/* ─── Stage shell ───────────────────────────────────────── */
.bedu-game {
    --bedu-game-tap: 48px;
    position: relative;
    width: 100%;
    max-width: 760px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--bedu-space-5);
    background: var(--bedu-surface);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius-lg);
    box-shadow: var(--bedu-shadow-sm);
    color: var(--bedu-text);
    font-size: 1.125rem;
    line-height: 1.45;
    text-align: center;
}
.bedu-game button,
.bedu-game input { font-family: inherit; }
.bedu-game [hidden] { display: none !important; }

.bedu-game--primary {
    font-family: 'Andika', var(--bedu-font-body);
    font-size: 1.25rem;
}
.bedu-game--primary .bedu-game__heading,
.bedu-game--primary h2,
.bedu-game--primary h3 { font-family: 'Andika', var(--bedu-font-body); }

.bedu-game__screen { min-height: 260px; }

.bedu-game__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bedu-space-3);
    margin-bottom: var(--bedu-space-4);
    min-height: 36px;
}
.bedu-game__bar[hidden] { display: none; }
.bedu-game__progress {
    font-weight: 700;
    color: var(--bedu-text-muted);
    font-variant-numeric: tabular-nums;
}
.bedu-game__timer {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--bedu-space-1);
    padding: var(--bedu-space-1) var(--bedu-space-3);
    border-radius: var(--bedu-radius-pill);
    background: var(--bedu-accent-50);
    border: 2px solid var(--bedu-accent);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.bedu-game__timer::before {
    content: "\23F1";
    font-size: 0.9em;
}
.bedu-game__timer[data-low] {
    background: var(--bedu-warm-50);
    border-color: var(--bedu-warm);
}

.bedu-game__heading {
    margin: 0 0 var(--bedu-space-3);
    font-family: var(--bedu-font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--bedu-text);
}
.bedu-game__heading:focus { outline: none; }
.bedu-game__heading:focus-visible { outline: 3px solid var(--bedu-focus-ring); }
.bedu-game__subheading {
    margin: var(--bedu-space-6) 0 var(--bedu-space-3);
    font-family: var(--bedu-font-heading);
    font-size: 1.2rem;
    text-align: left;
}

.bedu-game__hint,
.bedu-game__note {
    margin: 0 0 var(--bedu-space-4);
    color: var(--bedu-text-muted);
    font-size: 0.95em;
}

/* ─── Buttons ───────────────────────────────────────────── */
.bedu-game__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bedu-space-2);
    min-height: var(--bedu-game-tap);
    padding: var(--bedu-space-3) var(--bedu-space-5);
    border: 2px solid transparent;
    border-radius: var(--bedu-radius-pill);
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--bedu-dur) var(--bedu-ease),
                transform var(--bedu-dur-fast) var(--bedu-ease);
}
.bedu-game__btn[hidden] { display: none; }
.bedu-game__btn:active:not(:disabled) { transform: translateY(1px); }
.bedu-game__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bedu-game__btn--primary {
    background: var(--bedu-primary-solid);
    color: var(--bedu-on-primary);
}
.bedu-game__btn--primary:hover:not(:disabled) { background: var(--bedu-primary-solid-hover); }
.bedu-game__btn--secondary {
    background: var(--bedu-surface);
    color: var(--bedu-text);
    border-color: var(--bedu-border);
}
.bedu-game__btn--secondary:hover:not(:disabled) { background: var(--bedu-surface-muted); }
.bedu-game__btn--xl {
    min-height: 64px;
    padding: var(--bedu-space-4) var(--bedu-space-7);
    font-size: 1.3em;
}
.bedu-game__btn--sm {
    min-height: 44px;
    padding: var(--bedu-space-2) var(--bedu-space-4);
    font-size: 0.9em;
}

.bedu-game__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--bedu-space-3);
    margin-top: var(--bedu-space-5);
}

/* ─── Feedback ──────────────────────────────────────────── */
.bedu-game__feedback {
    min-height: 1.5em;
    margin: var(--bedu-space-4) 0 0;
    font-weight: 700;
}
.bedu-game__feedback:empty { min-height: 0; margin: 0; }
.bedu-game__feedback[data-state] {
    padding: var(--bedu-space-3) var(--bedu-space-4);
    border-radius: var(--bedu-radius);
    border: 2px solid var(--bedu-border);
}
.bedu-game__feedback[data-state="correct"] { background: var(--bedu-success-50); border-color: var(--bedu-success); }
.bedu-game__feedback[data-state="wrong"]   { background: var(--bedu-warm-50);    border-color: var(--bedu-warm); }
.bedu-game__feedback[data-state="correct"]::before { content: "✓ "; }
.bedu-game__feedback[data-state="wrong"]::before   { content: "✗ "; }

/* Shared answer-state look (choices, tiles, chips, items). */
.bedu-game [data-state="correct"] {
    background: var(--bedu-success-50);
    border-color: var(--bedu-success);
    color: var(--bedu-text);
    opacity: 1;
}
.bedu-game [data-state="wrong"] {
    background: var(--bedu-warm-50);
    border-color: var(--bedu-warm);
    color: var(--bedu-text);
    opacity: 1;
}
.bedu-game [data-state="answer"] {
    border-color: var(--bedu-success);
    border-style: dashed;
    color: var(--bedu-text);
    opacity: 1;
}

/* ─── Start screen ──────────────────────────────────────── */
.bedu-game__start {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bedu-space-3);
    padding: var(--bedu-space-6) 0;
}
.bedu-game__start-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--bedu-accent-50);
    border: 3px solid var(--bedu-accent);
    font-size: 2.6rem;
    color: var(--bedu-text);
}
.bedu-game__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--bedu-space-2) var(--bedu-space-4);
    margin: 0 0 var(--bedu-space-3);
    padding: 0;
    list-style: none;
    color: var(--bedu-text-muted);
    font-weight: 600;
}

/* ─── End screen ────────────────────────────────────────── */
.bedu-game__end { padding: var(--bedu-space-4) 0; }
.bedu-game__score {
    margin: 0;
    font-family: var(--bedu-font-heading);
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.bedu-game__score-num { font-size: 4.5rem; color: var(--bedu-primary); }
.bedu-game__score-max { font-size: 2.4rem; color: var(--bedu-text-muted); }
.bedu-game__cheer {
    display: inline-block;
    margin: var(--bedu-space-3) 0;
    padding: var(--bedu-space-2) var(--bedu-space-4);
    border-radius: var(--bedu-radius-pill);
    font-weight: 700;
    background: var(--bedu-accent-50);
    border: 2px solid var(--bedu-accent);
}
.bedu-game__cheer[data-level="high"] { background: var(--bedu-success-50); border-color: var(--bedu-success); }
.bedu-game__time { margin: 0; color: var(--bedu-text-muted); }

.bedu-game__submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--bedu-space-3);
    margin-top: var(--bedu-space-4);
    padding: var(--bedu-space-3) var(--bedu-space-4);
    border-radius: var(--bedu-radius);
    background: var(--bedu-surface-muted);
    font-size: 0.95em;
    font-weight: 600;
}
.bedu-game__submit[data-state="ok"]    { background: var(--bedu-success-50); }
.bedu-game__submit[data-state="error"] { background: var(--bedu-warm-50); border: 2px solid var(--bedu-warm); }

.bedu-game__answers {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--bedu-space-2);
    text-align: left;
}
.bedu-game__answer {
    display: flex;
    gap: var(--bedu-space-3);
    padding: var(--bedu-space-3);
    border: 1px solid var(--bedu-border);
    border-left: 6px solid var(--bedu-success);
    border-radius: var(--bedu-radius-sm);
    background: var(--bedu-surface);
}
.bedu-game__answer[data-correct="false"] { border-left-color: var(--bedu-warm); }
.bedu-game__answer-mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bedu-success-50);
    font-weight: 800;
}
.bedu-game__answer[data-correct="false"] .bedu-game__answer-mark { background: var(--bedu-warm-50); }
.bedu-game__answer-body { min-width: 0; font-size: 0.95em; }
.bedu-game__answer-body p { margin: 0; overflow-wrap: anywhere; }
.bedu-game__answer-prompt { font-weight: 700; }
.bedu-game__answer-given,
.bedu-game__answer-expected { color: var(--bedu-text-muted); }
.bedu-game__answer-given strong,
.bedu-game__answer-expected strong { color: var(--bedu-text); }

/* ─── Choice buttons (quiz) ─────────────────────────────── */
.bedu-gq__question,
.bedu-gtf__statement,
.bedu-ga__title {
    margin: var(--bedu-space-3) 0 var(--bedu-space-5);
    font-family: var(--bedu-font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.bedu-game--primary .bedu-gq__question,
.bedu-game--primary .bedu-gtf__statement,
.bedu-game--primary .bedu-ga__title { font-family: 'Andika', var(--bedu-font-body); }
.bedu-gq__question:focus,
.bedu-gtf__statement:focus,
.bedu-ga__title:focus { outline: none; }

.bedu-gq__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bedu-space-3);
}
.bedu-game__choice {
    display: flex;
    align-items: center;
    gap: var(--bedu-space-3);
    min-height: 64px;
    padding: var(--bedu-space-3) var(--bedu-space-4);
    background: var(--bedu-surface);
    border: 2px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
    color: var(--bedu-text);
    font-size: 1.05em;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--bedu-dur-fast) var(--bedu-ease),
                background var(--bedu-dur-fast) var(--bedu-ease);
}
.bedu-game__choice:hover:not(:disabled) {
    border-color: var(--bedu-primary);
    background: var(--bedu-primary-50);
}
.bedu-game__choice:disabled { cursor: default; }
.bedu-game__choice:disabled:not([data-state]) { opacity: 0.6; }
.bedu-game__choice-key {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bedu-primary-50);
    color: var(--bedu-text);
    font-weight: 800;
}
.bedu-game__choice-text { min-width: 0; overflow-wrap: anywhere; }
.bedu-game__choice[data-state="correct"] .bedu-game__choice-key { background: var(--bedu-success); }
.bedu-game__choice[data-state="wrong"] .bedu-game__choice-key   { background: var(--bedu-warm); }

/* ─── True / false ──────────────────────────────────────── */
.bedu-gtf__dash { color: var(--bedu-text-muted); }
.bedu-gtf__opt {
    display: inline-block;
    padding: 0 var(--bedu-space-2);
    border-radius: var(--bedu-radius-sm);
    background: var(--bedu-accent-50);
    border-bottom: 3px solid var(--bedu-accent);
}
.bedu-gtf__choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bedu-space-4);
}
.bedu-gtf__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bedu-space-2);
    min-height: 88px;
    padding: var(--bedu-space-4);
    border: 3px solid var(--bedu-border);
    border-radius: var(--bedu-radius-lg);
    background: var(--bedu-surface);
    color: var(--bedu-text);
    font-size: 1.4em;
    font-weight: 800;
    cursor: pointer;
    transition: background var(--bedu-dur-fast) var(--bedu-ease);
}
.bedu-gtf__btn--true  { border-color: var(--bedu-success); }
.bedu-gtf__btn--false { border-color: var(--bedu-warm); }
.bedu-gtf__btn--true:hover:not(:disabled)  { background: var(--bedu-success-50); }
.bedu-gtf__btn--false:hover:not(:disabled) { background: var(--bedu-warm-50); }
.bedu-gtf__btn:disabled { cursor: default; }
.bedu-gtf__btn:disabled:not([data-state]) { opacity: 0.55; }

/* ─── Match up ──────────────────────────────────────────── */
.bedu-gm__board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bedu-space-4);
}
.bedu-gm__col {
    display: grid;
    gap: var(--bedu-space-3);
    align-content: start;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bedu-gm__item {
    --bedu-gm-color: var(--bedu-border);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bedu-space-2);
    width: 100%;
    min-height: 56px;
    padding: var(--bedu-space-2) var(--bedu-space-3);
    background: var(--bedu-surface);
    border: 2px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
    color: var(--bedu-text);
    font-size: 1em;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--bedu-dur-fast) var(--bedu-ease),
                background var(--bedu-dur-fast) var(--bedu-ease);
}
.bedu-gm__col--right .bedu-gm__item { flex-direction: row-reverse; text-align: right; }
.bedu-gm__item:hover:not(:disabled) { background: var(--bedu-surface-muted); }
.bedu-gm__item[data-color="0"] { --bedu-gm-color: var(--bedu-primary); }
.bedu-gm__item[data-color="1"] { --bedu-gm-color: var(--bedu-accent); }
.bedu-gm__item[data-color="2"] { --bedu-gm-color: var(--bedu-primary-700); }
.bedu-gm__item[data-color="3"] { --bedu-gm-color: var(--bedu-accent-600); }
.bedu-gm__item[data-linked] { border-color: var(--bedu-gm-color); }
.bedu-gm__item[aria-pressed="true"] {
    border-color: var(--bedu-primary);
    background: var(--bedu-primary-50);
    box-shadow: var(--bedu-shadow);
}
.bedu-gm__item:disabled { cursor: default; }
.bedu-gm__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px dashed var(--bedu-border);
    background: var(--bedu-surface);
    color: var(--bedu-text);
    font-weight: 800;
    font-size: 0.9em;
}
.bedu-gm__item[data-linked] .bedu-gm__badge {
    border: 3px solid var(--bedu-gm-color);
}
.bedu-gm__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bedu-gm__fix {
    flex-basis: 100%;
    font-size: 0.85em;
    color: var(--bedu-text-muted);
}

/* ─── Flashcards ────────────────────────────────────────── */
.bedu-gf__card {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: none;
    perspective: 1200px;
    cursor: pointer;
    color: var(--bedu-text);
    border-radius: var(--bedu-radius-lg);
}
.bedu-gf__inner {
    position: relative;
    display: grid;
    min-height: 260px;
    transform-style: preserve-3d;
    transition: transform calc(var(--bedu-dur) * 2.5) var(--bedu-ease);
}
.bedu-gf__card[data-flipped] .bedu-gf__inner { transform: rotateY(180deg); }
.bedu-gf__face {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bedu-space-3);
    padding: var(--bedu-space-6) var(--bedu-space-5);
    border-radius: var(--bedu-radius-lg);
    border: 3px solid var(--bedu-primary);
    background: var(--bedu-primary-50);
    box-shadow: var(--bedu-shadow);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.bedu-gf__face--back {
    transform: rotateY(180deg);
    border-color: var(--bedu-accent);
    background: var(--bedu-accent-50);
}
.bedu-gf__side {
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bedu-text-muted);
}
.bedu-gf__text {
    font-family: var(--bedu-font-heading);
    font-size: 1.8em;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.bedu-game--primary .bedu-gf__text { font-family: 'Andika', var(--bedu-font-body); }
.bedu-gf__rates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bedu-space-3);
    max-width: 520px;
    margin: var(--bedu-space-5) auto 0;
}
.bedu-gf__rates[hidden] { display: none; }
.bedu-gf__rate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bedu-space-2);
    min-height: 64px;
    border: 3px solid var(--bedu-border);
    border-radius: var(--bedu-radius-lg);
    background: var(--bedu-surface);
    color: var(--bedu-text);
    font-size: 1.15em;
    font-weight: 800;
    cursor: pointer;
}
.bedu-gf__rate--yes { border-color: var(--bedu-success); }
.bedu-gf__rate--no  { border-color: var(--bedu-warm); }
.bedu-gf__rate--yes:hover { background: var(--bedu-success-50); }
.bedu-gf__rate--no:hover  { background: var(--bedu-warm-50); }

@media (prefers-reduced-motion: reduce) {
    .bedu-gf__inner { transition: none; }
}

/* ─── Group sort ────────────────────────────────────────── */
.bedu-gs__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--bedu-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.bedu-gs__pool {
    min-height: 72px;
    padding: var(--bedu-space-4);
    border: 2px dashed var(--bedu-border);
    border-radius: var(--bedu-radius);
    background: var(--bedu-surface-muted);
}
.bedu-gs__pool[data-empty] .bedu-gs__chips::before {
    content: "Hammasi joylandi!";
    color: var(--bedu-text-muted);
    font-weight: 600;
}
.bedu-gs__pool > .bedu-gs__target { margin-top: var(--bedu-space-3); }
.bedu-gs__pool > .bedu-gs__target[hidden] { display: none; }
.bedu-gs__chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-height: 48px;
    padding: var(--bedu-space-2) var(--bedu-space-4);
    border: 2px solid var(--bedu-border);
    border-radius: var(--bedu-radius-pill);
    background: var(--bedu-surface);
    color: var(--bedu-text);
    font-size: 1em;
    font-weight: 700;
    cursor: grab;
    touch-action: manipulation;
}
.bedu-gs__chip[aria-pressed="true"] {
    border-color: var(--bedu-primary);
    background: var(--bedu-primary-50);
    box-shadow: var(--bedu-shadow);
    transform: translateY(-2px);
}
.bedu-gs__chip:disabled { cursor: default; }
.bedu-gs__fix { font-size: 0.75em; font-weight: 600; color: var(--bedu-text-muted); }
.bedu-gs__groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--bedu-space-3);
    margin-top: var(--bedu-space-4);
}
.bedu-gs__group {
    --bedu-gs-color: var(--bedu-primary);
    display: flex;
    flex-direction: column;
    gap: var(--bedu-space-3);
    min-height: 140px;
    padding: var(--bedu-space-3);
    border: 2px solid var(--bedu-gs-color);
    border-radius: var(--bedu-radius);
    background: var(--bedu-surface);
}
.bedu-gs__group[data-color="1"] { --bedu-gs-color: var(--bedu-accent); }
.bedu-gs__group[data-color="2"] { --bedu-gs-color: var(--bedu-success); }
.bedu-gs__group[data-color="3"] { --bedu-gs-color: var(--bedu-warm); }
.bedu-gs__group[data-over],
.bedu-gs__pool[data-over] { background: var(--bedu-primary-50); }
.bedu-gs__target {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bedu-space-2);
    width: 100%;
    min-height: 48px;
    padding: var(--bedu-space-2) var(--bedu-space-3);
    border: 2px solid var(--bedu-gs-color, var(--bedu-border));
    border-radius: var(--bedu-radius-sm);
    background: var(--bedu-surface-muted);
    color: var(--bedu-text);
    font-size: 1em;
    font-weight: 800;
    cursor: pointer;
}
.bedu-gs__target--pool { width: auto; border-color: var(--bedu-border); background: var(--bedu-surface); }
.bedu-gs__target:disabled { cursor: default; opacity: 1; }
[data-selecting] .bedu-gs__target:not(:disabled) {
    border-style: dashed;
    background: var(--bedu-primary-50);
}
.bedu-gs__name { overflow-wrap: anywhere; }
.bedu-gs__count:not(:empty) {
    min-width: 28px;
    padding: 0 var(--bedu-space-2);
    border-radius: var(--bedu-radius-pill);
    background: var(--bedu-surface);
    border: 1px solid var(--bedu-border);
    font-size: 0.85em;
}

/* ─── Anagram ───────────────────────────────────────────── */
.bedu-ga__count { font-size: 0.6em; color: var(--bedu-text-muted); font-weight: 600; }
.bedu-ga__board {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--bedu-space-3) var(--bedu-space-6);
    margin-bottom: var(--bedu-space-5);
}
.bedu-ga__word { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bedu-space-2); }
.bedu-ga__slot,
.bedu-ga__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 56px;
    padding: 0 var(--bedu-space-2);
    border-radius: var(--bedu-radius);
    font-size: 1.5em;
    font-weight: 800;
    color: var(--bedu-text);
    touch-action: manipulation;
}
.bedu-ga__slot {
    border: 2px dashed var(--bedu-text-soft);
    background: var(--bedu-surface-muted);
    cursor: pointer;
}
.bedu-ga__slot:disabled { cursor: default; opacity: 1; }
.bedu-ga__slot[data-filled] {
    border-style: solid;
    border-color: var(--bedu-primary);
    background: var(--bedu-primary-50);
}
.bedu-ga__board[data-state="correct"] .bedu-ga__slot { border-color: var(--bedu-success); background: var(--bedu-success-50); }
.bedu-ga__board[data-state="wrong"] .bedu-ga__slot   { border-color: var(--bedu-warm);    background: var(--bedu-warm-50); }
.bedu-ga__pool {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--bedu-space-2);
}
.bedu-ga__tile {
    border: 2px solid var(--bedu-accent);
    background: var(--bedu-accent-50);
    box-shadow: var(--bedu-shadow-sm);
    cursor: pointer;
    transition: transform var(--bedu-dur-fast) var(--bedu-ease);
}
.bedu-ga__tile:hover:not(:disabled) { transform: translateY(-2px); }
.bedu-ga__tile[data-used] { visibility: hidden; }
.bedu-ga__tile:disabled:not([data-used]) { opacity: 0.5; cursor: default; }

/* ─── Wheel ─────────────────────────────────────────────── */
.bedu-gw__wheel {
    width: min(100%, 440px);
    margin: 0 auto;
}
.bedu-gw__svg {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
    user-select: none;
}
.bedu-gw__seg {
    fill: var(--bedu-primary-50);
    stroke: var(--bedu-primary);
    stroke-width: 1.5;
}
.bedu-gw__seg[data-color="1"] { fill: var(--bedu-accent-50);  stroke: var(--bedu-accent); }
.bedu-gw__seg[data-color="2"] { fill: var(--bedu-success-50); stroke: var(--bedu-success); }
.bedu-gw__seg[data-color="3"] { fill: var(--bedu-warm-50);    stroke: var(--bedu-warm); }
.bedu-gw__label {
    fill: var(--bedu-text);
    font-family: inherit;
    font-weight: 700;
    pointer-events: none;
}
.bedu-gw__rim { fill: none; stroke: var(--bedu-text); stroke-width: 3; }
.bedu-gw__hub { fill: var(--bedu-surface); stroke: var(--bedu-text); stroke-width: 3; }
.bedu-gw__pointer { fill: var(--bedu-text); stroke: var(--bedu-surface); stroke-width: 2; }
.bedu-gw__result {
    min-height: 3.5em;
    margin: var(--bedu-space-4) 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bedu-space-1);
    color: var(--bedu-text-muted);
    font-weight: 600;
}
.bedu-gw__result-label { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; }
.bedu-gw__result-text {
    padding: var(--bedu-space-2) var(--bedu-space-5);
    border-radius: var(--bedu-radius-lg);
    background: var(--bedu-accent-50);
    border: 3px solid var(--bedu-accent);
    color: var(--bedu-text);
    font-family: var(--bedu-font-heading);
    font-size: 2rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.bedu-game--primary .bedu-gw__result-text { font-family: 'Andika', var(--bedu-font-body); }
.bedu-gw__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--bedu-space-3) var(--bedu-space-5);
    margin-top: var(--bedu-space-4);
}
.bedu-gw__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--bedu-space-2);
    min-height: 44px;
    font-weight: 600;
    cursor: pointer;
}
.bedu-gw__check { width: 22px; height: 22px; accent-color: var(--bedu-primary-solid); }
.bedu-gw__count { margin: var(--bedu-space-3) 0 0; color: var(--bedu-text-muted); font-size: 0.9em; }

/* ─── Phones ────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .bedu-game {
        padding: var(--bedu-space-4) var(--bedu-space-3);
        border-radius: var(--bedu-radius);
        font-size: 1.05rem;
    }
    .bedu-game--primary { font-size: 1.15rem; }
    .bedu-gq__question,
    .bedu-gtf__statement,
    .bedu-ga__title { font-size: 1.3rem; }
    .bedu-gq__options { grid-template-columns: 1fr; }
    .bedu-gm__board { gap: var(--bedu-space-2); }
    .bedu-gm__item { padding: var(--bedu-space-2); font-size: 0.95em; }
    .bedu-gm__badge { width: 26px; height: 26px; }
    .bedu-ga__slot,
    .bedu-ga__tile { min-width: 44px; height: 50px; font-size: 1.3em; }
    .bedu-game__score-num { font-size: 3.5rem; }
    .bedu-game__btn--xl { padding: var(--bedu-space-3) var(--bedu-space-6); }
}

/* ============================================================
   Editor (create / edit page) — static/js/games/editor.js
   ============================================================ */
.bedu-ge { display: grid; gap: var(--bedu-space-3); }
.bedu-ge__heads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bedu-space-3);
    padding: 0 calc(44px + var(--bedu-space-3)) 0 calc(32px + var(--bedu-space-3));
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bedu-text-muted);
}
.bedu-ge__list,
.bedu-ge__opts,
.bedu-ge__members {
    display: grid;
    gap: var(--bedu-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.bedu-ge__list--question,
.bedu-ge__list--groups { gap: var(--bedu-space-4); }
.bedu-ge__row,
.bedu-ge__block-head,
.bedu-ge__opt,
.bedu-ge__member {
    display: flex;
    align-items: center;
    gap: var(--bedu-space-3);
}
.bedu-ge__fields { flex: 1; min-width: 0; }
.bedu-ge__fields--pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bedu-space-3);
}
.bedu-ge__cell { flex: 1; min-width: 0; }
.bedu-ge__input { width: 100%; min-height: 44px; }
.bedu-ge__num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bedu-accent-50);
    border: 2px solid var(--bedu-accent);
    color: var(--bedu-text);
    font-size: 0.85rem;
    font-weight: 800;
}
.bedu-ge__icon-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius-sm);
    background: var(--bedu-surface);
    color: var(--bedu-text-muted);
    cursor: pointer;
    transition: background var(--bedu-dur-fast) var(--bedu-ease), color var(--bedu-dur-fast) var(--bedu-ease);
}
.bedu-ge__icon-btn:hover:not(:disabled) { background: var(--bedu-warm-50); color: var(--bedu-text); border-color: var(--bedu-warm); }
.bedu-ge__icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bedu-ge__block {
    display: grid;
    gap: var(--bedu-space-3);
    padding: var(--bedu-space-4);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
    background: var(--bedu-surface);
    box-shadow: var(--bedu-shadow-xs);
}
.bedu-ge__opts,
.bedu-ge__members { padding-left: calc(32px + var(--bedu-space-3)); }
.bedu-ge__hint { margin: 0; padding-left: calc(32px + var(--bedu-space-3)); font-size: 0.85rem; color: var(--bedu-text-muted); }
.bedu-ge__ok {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--bedu-border);
    border-radius: 50%;
    background: var(--bedu-surface);
    color: transparent;
    font-size: 1.2rem;
    cursor: pointer;
}
.bedu-ge__radio {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.bedu-ge__ok:has(.bedu-ge__radio:checked),
.bedu-ge__opt[data-ok] .bedu-ge__ok {
    border-color: var(--bedu-success);
    background: var(--bedu-success-50);
    color: var(--bedu-text);
}
.bedu-ge__ok:has(.bedu-ge__radio:focus-visible) {
    outline: 3px solid var(--bedu-focus-ring);
    outline-offset: 2px;
}
.bedu-ge__opt[data-ok] .bedu-ge__input { border-color: var(--bedu-success); }
.bedu-ge__add {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--bedu-space-2);
    min-height: 44px;
    padding: var(--bedu-space-2) var(--bedu-space-4);
    border: 2px dashed var(--bedu-border);
    border-radius: var(--bedu-radius-pill);
    background: transparent;
    color: var(--bedu-text);
    font-weight: 700;
    cursor: pointer;
}
.bedu-ge__add:hover:not(:disabled) { border-color: var(--bedu-primary); background: var(--bedu-primary-50); }
.bedu-ge__add:disabled { opacity: 0.5; cursor: not-allowed; }
.bedu-ge__block > .bedu-ge__add { margin-left: calc(32px + var(--bedu-space-3)); }
.bedu-ge__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bedu-space-3);
}
.bedu-ge__meta { color: var(--bedu-text-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.bedu-ge__note { margin: 0; color: var(--bedu-text-muted); font-size: 0.85rem; }
.bedu-ge__bulk {
    padding: var(--bedu-space-3) var(--bedu-space-4);
    border: 1px dashed var(--bedu-border);
    border-radius: var(--bedu-radius);
    background: var(--bedu-surface-muted);
}
.bedu-ge__bulk summary {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: var(--bedu-space-2);
    font-weight: 700;
    cursor: pointer;
}
.bedu-ge__bulk[open] { display: grid; gap: var(--bedu-space-2); }
.bedu-ge__bulk-label { font-size: 0.85rem; color: var(--bedu-text-muted); }
.bedu-ge__bulk-input { width: 100%; resize: vertical; }
.bedu-ge__bulk .bedu-btn { justify-self: start; }

@media (max-width: 575.98px) {
    .bedu-ge__heads { display: none; }
    .bedu-ge__fields--pair { grid-template-columns: 1fr; gap: var(--bedu-space-2); }
    .bedu-ge__opts,
    .bedu-ge__members,
    .bedu-ge__hint { padding-left: 0; }
    .bedu-ge__block > .bedu-ge__add { margin-left: 0; }
}

/* ============================================================
   Catalogue, template picker, share box (backend templates)
   ============================================================ */

/* Catalogue grid — children may be .bedu-tile-c or .bedu-game-card. */
.bedu-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--bedu-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.bedu-game-card {
    display: flex;
    flex-direction: column;
    gap: var(--bedu-space-2);
    height: 100%;
    min-height: 120px;
    padding: var(--bedu-space-4);
    background: var(--bedu-surface);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
    color: var(--bedu-text);
    text-decoration: none;
    transition: transform var(--bedu-dur-fast) var(--bedu-ease),
                border-color var(--bedu-dur-fast) var(--bedu-ease);
}
a.bedu-game-card:hover {
    transform: translateY(-1px);
    border-color: var(--bedu-accent);
    color: var(--bedu-text);
}
.bedu-game-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--bedu-radius-sm);
    background: var(--bedu-accent-50);
    color: var(--bedu-text);
    font-size: 1.2rem;
}
.bedu-game-card__title {
    margin: 0;
    font-family: var(--bedu-font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.bedu-game-card__meta {
    margin-top: auto;
    color: var(--bedu-text-muted);
    font-size: 0.85rem;
}

/* Template picker: <label class="bedu-template-option"><input type="radio">
   <i class="bi … bedu-template-option__icon"></i>
   <span class="bedu-template-option__label">…</span>
   <span class="bedu-template-option__desc">…</span></label> */
.bedu-template-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--bedu-space-3);
    margin: 0;
    padding: 0;
    border: 0;
}
.bedu-template-option {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon label" "icon desc";
    column-gap: var(--bedu-space-3);
    row-gap: var(--bedu-space-1);
    align-items: start;
    min-height: 44px;
    padding: var(--bedu-space-3) var(--bedu-space-4);
    background: var(--bedu-surface);
    border: 2px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
    color: var(--bedu-text);
    cursor: pointer;
    transition: border-color var(--bedu-dur-fast) var(--bedu-ease),
                background var(--bedu-dur-fast) var(--bedu-ease);
}
.bedu-template-option:hover { border-color: var(--bedu-primary); }
.bedu-template-option input {
    position: absolute;
    top: var(--bedu-space-2);
    right: var(--bedu-space-2);
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--bedu-primary-solid);
}
.bedu-template-option__icon {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--bedu-radius-sm);
    background: var(--bedu-accent-50);
    color: var(--bedu-text);
    font-size: 1.2rem;
}
.bedu-template-option__label {
    grid-area: label;
    padding-right: var(--bedu-space-5);
    font-weight: 700;
}
.bedu-template-option__desc {
    grid-area: desc;
    font-size: 0.85rem;
    color: var(--bedu-text-muted);
    line-height: 1.4;
}
.bedu-template-option:has(input:checked) {
    border-color: var(--bedu-primary);
    background: var(--bedu-primary-50);
}
.bedu-template-option:has(input:checked) .bedu-template-option__icon {
    background: var(--bedu-primary-solid);
    color: var(--bedu-on-primary);
}
.bedu-template-option:has(input:focus-visible) {
    outline: 3px solid var(--bedu-focus-ring);
    outline-offset: 2px;
}
.bedu-template-option:has(input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}
.bedu-template-option:has(input:disabled):hover { border-color: var(--bedu-border); }

/* Share box: <div class="bedu-game-share"><input readonly …><button …>Nusxa olish</button></div> */
.bedu-game-share {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--bedu-space-2);
    padding: var(--bedu-space-3);
    border: 2px dashed var(--bedu-accent);
    border-radius: var(--bedu-radius);
    background: var(--bedu-accent-50);
}
.bedu-game-share input {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 44px;
    padding: var(--bedu-space-2) var(--bedu-space-3);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius-sm);
    background: var(--bedu-surface);
    color: var(--bedu-text);
    font-family: var(--bedu-font-body);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.bedu-game-share button,
.bedu-game-share .bedu-btn { min-height: 44px; flex: none; }
.bedu-game-share__code {
    flex-basis: 100%;
    margin: 0;
    font-family: var(--bedu-font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-align: center;
    color: var(--bedu-text);
}


/* Picker options rendered as links (new game) or buttons (switch template). */
a.bedu-template-option { text-decoration: none; }
button.bedu-template-option {
    width: 100%;
    height: 100%;
    font: inherit;
    text-align: left;
}
a.bedu-template-option:focus-visible,
button.bedu-template-option:focus-visible {
    outline: 3px solid var(--bedu-focus-ring);
    outline-offset: 2px;
}
button.bedu-template-option:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
button.bedu-template-option:disabled:hover { border-color: var(--bedu-border); }

/* Results page */
.bedu-game-leaderboard {
    margin: 0;
    padding-left: var(--bedu-space-5);
    display: grid;
    gap: var(--bedu-space-1);
}
.bedu-game-bar {
    display: inline-block;
    vertical-align: middle;
    width: 70%;
    height: 10px;
    margin-right: var(--bedu-space-2);
    border-radius: var(--bedu-radius-pill);
    background: var(--bedu-surface-muted);
    overflow: hidden;
}
.bedu-game-bar span {
    display: block;
    height: 100%;
    background: var(--bedu-success-600);
}