:root {
  /* MULTIK PALITRA — yorqin, lekin ko'zni qamashtirmaydi.
     Bola ekranda uzoq o'tiradi, shuning uchun to'q
     binafsha fon va oq doska: kontrast baland, charchatmaydi. */
  --siyoh: #2B1055;
  --binafsha: #5B2BD6;
  --binafsha-och: #8B5CF6;
  --sariq: #FBBF24;
  --yashil: #22C55E;
  --qizil: #EF4444;
  --pushti: #EC4899;
  --oq: #FFFFFF;
  --doska: rgba(255, 255, 255, .94);
  --soya: 0 10px 0 rgba(0, 0, 0, .14), 0 18px 40px rgba(43, 16, 85, .25);
  --yumaloq: 26px;
  --shrift: "Comic Sans MS", "Chalkboard SE", "Segoe UI", system-ui,
            -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--shrift);
  color: var(--siyoh);
  background: #BAE6FD;
  /* Bola barmog'i bilan sahifani tortib yubormasin */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── FON ───────────────────────────────────────────────── */
.fon { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.fon-rasm { width: 100%; height: 100%; display: block; }

/* Sekin harakatlar — jon bag'ishlaydi, lekin diqqatni
   tortmaydi. `prefers-reduced-motion` da to'xtatiladi. */
.quyoshcha { transform-origin: 1040px 120px; animation: aylan 60s linear infinite; }
@keyframes aylan { to { transform: rotate(360deg); } }
.bulut { animation: suz 40s ease-in-out infinite alternate; }
.bulut-2 { animation-duration: 55s; }
.bulut-3 { animation-duration: 48s; animation-delay: -12s; }
@keyframes suz { from { transform: translateX(-30px); }
                 to { transform: translateX(60px); } }
.gullar g { animation: tebran 4s ease-in-out infinite alternate; }
.gullar g:nth-child(2) { animation-delay: -1.3s; }
.gullar g:nth-child(3) { animation-delay: -2.1s; }
@keyframes tebran { from { transform: translateY(0) rotate(-4deg); }
                    to { transform: translateY(-5px) rotate(4deg); } }

.effekt { position: fixed; inset: 0; z-index: 40; pointer-events: none; }

/* ── UMUMIY ───────────────────────────────────────────── */
.yashirin { display: none !important; }

.parda {
  position: relative; z-index: 10; min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}

.quti {
  background: var(--doska);
  border: 6px solid var(--oq);
  border-radius: var(--yumaloq);
  box-shadow: var(--soya);
  padding: 28px 24px;
  max-width: 760px; width: 100%;
  text-align: center;
}

.sarlavha {
  margin: 0 0 6px; font-size: clamp(28px, 6vw, 46px);
  color: var(--binafsha); letter-spacing: .5px;
}
.emoji { font-size: 1.1em; }
.izoh { margin: 0 0 18px; font-size: clamp(16px, 3.4vw, 21px); color: #4C1D95; }
.mayda { margin: 16px 0 0; font-size: clamp(13px, 2.6vw, 16px); color: #6D28D9; }

/* ── SINF TANLOVI ─────────────────────────────────────── */
/* ── BOSHLASH TUGMASI ─────────────────────────────────
   Sinf tanlash o'rniga bitta katta tugma (bank egasi,
   2026-10-24: «sinflarga ajratma»). Katta — kichik
   bolaning barmog'i ham osongina tegadi. */
.boshla {
  font-family: inherit; cursor: pointer;
  font-size: clamp(24px, 5.4vw, 34px); font-weight: 800;
  border: 6px solid var(--oq); border-radius: 26px;
  padding: 18px 40px; margin: 6px auto 0; display: block;
  background: linear-gradient(180deg, var(--binafsha-och), var(--binafsha));
  color: var(--oq);
  box-shadow: 0 9px 0 #4C1D95, 0 16px 28px rgba(76, 29, 149, .35);
  transition: transform .12s, box-shadow .12s, filter .12s;
  animation: boshla-tort 1.3s ease-in-out infinite alternate;
}
.boshla:hover, .boshla:focus-visible {
  transform: translateY(-4px); filter: brightness(1.08);
}
.boshla:active {
  transform: translateY(5px); box-shadow: 0 3px 0 #4C1D95;
  animation: none;
}
@keyframes boshla-tort {
  from { transform: scale(1); } to { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .boshla { animation: none; } }

/* ── O'YIN ─────────────────────────────────────────────── */
.oyin {
  position: relative; z-index: 10; min-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 12px 18px; gap: 10px;
}

.tepa {
  width: 100%; max-width: 820px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}

.tugma-mayda {
  font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; color: var(--siyoh);
  background: var(--oq); border: 4px solid #DDD6FE;
  border-radius: 16px; padding: 8px 12px;
  box-shadow: 0 4px 0 #C4B5FD;
}
.tugma-mayda:active { transform: translateY(3px); box-shadow: 0 1px 0 #C4B5FD; }

.hisob { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hisob-band {
  background: var(--oq); border: 4px solid #FDE68A;
  border-radius: 16px; padding: 6px 12px;
  font-size: 17px; font-weight: 800; color: #B45309;
  box-shadow: 0 4px 0 #FCD34D;
}
#daraja-band { border-color: #BBF7D0; color: #047857; box-shadow: 0 4px 0 #86EFAC; }

/* ── MULTIK DO'ST ─────────────────────────────────────── */
.dost {
  display: flex; align-items: center; gap: 10px;
  max-width: 820px; width: 100%;
}
.dost-rasm { width: clamp(74px, 16vw, 104px); flex: 0 0 auto; }
.dost-rasm { animation: nafas 3.4s ease-in-out infinite alternate; }
@keyframes nafas { from { transform: translateY(0) rotate(-1.5deg); }
                   to { transform: translateY(-6px) rotate(1.5deg); } }

.gap {
  position: relative; flex: 1;
  background: var(--oq); border: 4px solid #FBCFE8;
  border-radius: 18px; padding: 10px 14px;
  font-size: clamp(15px, 3.2vw, 19px); font-weight: 700; color: #9D174D;
  box-shadow: 0 5px 0 #F9A8D4;
}
.gap::before {
  content: ""; position: absolute; left: -14px; top: 50%;
  transform: translateY(-50%);
  border: 10px solid transparent; border-right-color: #FBCFE8;
}

/* ── DOSKA ─────────────────────────────────────────────── */
.doska {
  background: var(--doska);
  border: 6px solid var(--oq);
  border-radius: var(--yumaloq);
  box-shadow: var(--soya);
  padding: 16px 16px 20px;
  max-width: 820px; width: 100%;
  text-align: center;
}

.misol-raqam {
  margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #7C3AED;
}
.savol-izoh { color: #BE185D; }

.misol {
  font-size: clamp(34px, 9vw, 62px); font-weight: 800;
  color: var(--siyoh); line-height: 1.25;
  margin: 4px 0 14px; word-break: break-word;
  text-shadow: 0 2px 0 #EDE9FE;
}

.javob-qatori {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  flex-wrap: wrap;
}

.javob {
  font-family: inherit; font-size: clamp(30px, 7vw, 46px); font-weight: 800;
  width: clamp(130px, 38vw, 200px); text-align: center;
  padding: 8px 10px; color: var(--binafsha);
  background: #FEFCE8; border: 5px dashed #FBBF24;
  border-radius: 20px; outline: none;
}
.javob:focus { border-style: solid; box-shadow: 0 0 0 6px rgba(251, 191, 36, .3); }
.javob::placeholder { color: #D4B106; opacity: .6; }

.ok {
  font-family: inherit; font-size: clamp(22px, 5vw, 30px); font-weight: 800;
  cursor: pointer; color: var(--oq);
  background: linear-gradient(180deg, #34D399, #059669);
  border: 5px solid var(--oq); border-radius: 20px;
  padding: 10px 26px;
  box-shadow: 0 7px 0 #065F46, 0 12px 22px rgba(6, 95, 70, .3);
}
.ok:active { transform: translateY(4px); box-shadow: 0 3px 0 #065F46; }

.xabar {
  min-height: 1.6em; margin: 12px 0 0;
  font-size: clamp(17px, 3.8vw, 23px); font-weight: 800;
}
.xabar.togri { color: var(--yashil); }
.xabar.xato { color: #B45309; }

/* ── RAQAM TUGMALARI ──────────────────────────────────── */
.raqamlar {
  margin: 14px auto 0; max-width: 360px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.raqamlar button {
  font-family: inherit; font-size: clamp(22px, 5vw, 28px); font-weight: 800;
  cursor: pointer; color: var(--siyoh);
  background: var(--oq); border: 4px solid #DDD6FE;
  border-radius: 18px; padding: 10px 0;
  box-shadow: 0 5px 0 #C4B5FD;
  transition: transform .08s;
}
.raqamlar button:active { transform: translateY(4px); box-shadow: 0 1px 0 #C4B5FD; }
.raqamlar .kul { background: #F5F3FF; color: #6D28D9; }

/* Smart TV va klaviatura: fokus ANIQ ko'rinishi SHART —
   masofadan boshqaruvda bola qayerda turganini bilishi kerak. */
button:focus-visible, .javob:focus-visible {
  outline: 5px solid #F472B6; outline-offset: 3px;
}

/* ── TO'G'RI JAVOB: doska sakraydi ────────────────────── */
.doska.togri { animation: sakra .5s ease; }
@keyframes sakra {
  0% { transform: scale(1); } 35% { transform: scale(1.04) rotate(-1deg); }
  70% { transform: scale(.99) rotate(1deg); } 100% { transform: scale(1); }
}
.doska.xato { animation: silkin .4s ease; }
@keyframes silkin {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-9px); } 75% { transform: translateX(9px); }
}

/* ── KATTA EKRAN (smart TV) ───────────────────────────── */
@media (min-width: 1100px) {
  .doska { max-width: 900px; padding: 24px; }
  .misol { font-size: 68px; }
  .raqamlar { max-width: 430px; }
}

/* ── HARAKAT KERAK EMAS deganlar uchun ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .quyoshcha, .bulut, .gullar g, .dost-rasm { animation: none; }
  .doska.togri, .doska.xato { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   PAST EKRAN: hammasi BIR EKRANDA sig'ishi kerak
   ══════════════════════════════════════════════════════════
   O'LCHANDI (haqiqiy brauzerda, 9 o'lchamda):

     telefon YOTGAN (844x390)   +378px pastga surish
     kichik telefon (320x568)   +121px
     noutbuk (1366x768)          +20px

   Bola uchun bu YOMON: javob katakchasi va raqam tugmalari
   ekrandan pastda qolib, u surishni bilmasligi mumkin —
   va «sayt ishlamayapti» deb o'ylaydi.

   Yechim: past ekranda joylashuv IKKI USTUNGA bo'linadi —
   chapda misol va javob, o'ngda raqam tugmalari.
   ══════════════════════════════════════════════════════════ */

/* ── YOTGAN TELEFON va past ekranlar ─────────────────── */
@media (max-height: 560px) {
  .oyin { padding: 6px 8px 8px; gap: 6px; }

  /* Do'st kichrayadi va bir qatorga tushadi */
  .dost { gap: 6px; }
  .dost-rasm { width: 52px; }
  .gap { font-size: 13px; padding: 6px 10px; border-width: 3px;
         box-shadow: 0 3px 0 #F9A8D4; }

  .tepa { gap: 6px; }
  .hisob-band { font-size: 14px; padding: 4px 9px; border-width: 3px; }
  .tugma-mayda { font-size: 13px; padding: 6px 10px; border-width: 3px; }

  /* IKKI USTUN: misol chapda, tugmalar o'ngda */
  .doska {
    display: grid; gap: 10px 16px; padding: 10px 12px 12px;
    /* TUGMA USTUNI ANIQ KENGLIKDA (o'lchandi: `auto` bilan
       ustun 109px ga siqilib, tugma 33px bo'lib qolardi —
       bola barmog'i uchun kichik). */
    grid-template-columns: minmax(0, 1fr) 232px;
    grid-template-areas:
      "raqam  tugmalar"
      "misol  tugmalar"
      "javob  tugmalar"
      "xabar  tugmalar";
    align-items: center; border-width: 4px;
  }
  .misol-raqam { grid-area: raqam; margin: 0; font-size: 13px; }
  .misol { grid-area: misol; font-size: clamp(26px, 5.4vh, 40px);
           margin: 0; }
  .javob-qatori { grid-area: javob; justify-content: flex-start; }
  .xabar { grid-area: xabar; margin: 0; font-size: 15px; min-height: 1.2em;
           text-align: left; }
  .raqamlar { grid-area: tugmalar; margin: 0;
              width: 232px; max-width: 232px; gap: 6px; }
  .raqamlar button { font-size: 19px; padding: 6px 0; border-width: 3px;
                     box-shadow: 0 3px 0 #C4B5FD; }
  .javob { font-size: clamp(24px, 5vh, 34px); width: clamp(104px, 22vw, 150px);
           border-width: 4px; padding: 5px 8px; }
  .ok { font-size: clamp(18px, 3.6vh, 24px); padding: 7px 18px;
        border-width: 4px; box-shadow: 0 5px 0 #065F46; }
}

/* ── JUDA PAST (masalan 844x390) ─────────────────────── */
@media (max-height: 430px) {
  /* Do'st YASHIRINADI: joy javob uchun kerak. Uning
     gapi xabar qatorida baribir ko'rinadi. */
  .dost { display: none; }
  .tepa { margin-bottom: 2px; }
}

/* ── KICHIK TELEFON (320px va past bo'y) ─────────────── */
@media (max-width: 360px) {
  .quti { padding: 18px 14px; }
  .boshla { padding: 13px 26px; font-size: 24px; }
  .doska { padding: 12px 10px 14px; }
  .raqamlar { gap: 6px; max-width: 300px; }
  .raqamlar button { font-size: 20px; padding: 8px 0; }
  .dost-rasm { width: 62px; }
}

/* ── PLANSHET YOTGAN (1024x768) ───────────────────────
   O'LCHANDI: 78px pastga surish qolardi. Bu oraliq
   («keng, lekin past») ikki qoida orasida tushib
   qolgandi: `max-height: 560px` ham, `min-width: 1100px`
   ham mos kelmasdi. */
@media (min-width: 760px) and (max-width: 1099px) and (max-height: 820px) {
  .oyin { gap: 6px; padding-top: 6px; }
  .dost-rasm { width: 72px; }
  .gap { font-size: 16px; padding: 8px 12px; }
  .misol { font-size: clamp(38px, 6.4vh, 50px); margin: 2px 0 10px; }
  .doska { padding: 12px 14px 14px; }
  .raqamlar { max-width: 320px; gap: 7px; margin-top: 10px; }
  .raqamlar button { padding: 7px 0; font-size: 24px; }
  .javob { font-size: 34px; padding: 6px 10px; }
  .ok { font-size: 24px; padding: 8px 20px; }
  .xabar { margin: 9px 0 0; }
}

/* ── NOUTBUK (768px bo'y): ozgina zichlashtiramiz ────── */
@media (min-width: 1100px) and (max-height: 820px) {
  .oyin { gap: 6px; padding-top: 6px; }
  .misol { font-size: 54px; margin: 2px 0 10px; }
  .dost-rasm { width: 78px; }
  .raqamlar { max-width: 330px; }
  .raqamlar button { padding: 7px 0; }
}

/* ── KICHIK VA PAST EKRAN (320x568 kabi) ─────────────────
   O'LCHANDI: uch ustunli tugmalar to'rt qator egallaydi va
   115px pastga surish qolardi. Olti ustun — ikki qator,
   ya'ni ikki qator joy tejaydi. Tugma kengligi 320px
   ekranda ~44px bo'ladi, bu barmoq uchun yetarli
   (eng kam 38px). */
@media (max-width: 400px) and (max-height: 680px) {
  .oyin { gap: 6px; padding: 6px 8px 8px; }
  .dost-rasm { width: 54px; }
  .gap { font-size: 13px; padding: 6px 9px; border-width: 3px; }
  .tepa { gap: 5px; }
  .hisob-band { font-size: 14px; padding: 4px 8px; border-width: 3px; }
  .tugma-mayda { font-size: 13px; padding: 5px 9px; border-width: 3px; }
  .doska { padding: 10px 8px 12px; border-width: 4px; }
  .misol { font-size: clamp(26px, 8vw, 34px); margin: 2px 0 10px; }
  .javob { font-size: 28px; padding: 5px 8px; border-width: 4px; }
  .ok { font-size: 20px; padding: 7px 18px; border-width: 4px; }
  .xabar { font-size: 15px; margin: 8px 0 0; min-height: 1.3em; }

  .raqamlar {
    grid-template-columns: repeat(6, 1fr);
    gap: 5px; max-width: 100%; margin-top: 10px;
  }
  .raqamlar button {
    font-size: 19px; padding: 9px 0; border-width: 3px;
    box-shadow: 0 3px 0 #C4B5FD;
  }
  /* «C» va «⌫» oxirida turadi — tartib tabiiy bo'lsin:
     1 2 3 4 5 6 / 7 8 9 0 C ⌫ */
  .raqamlar button[data-amal="tozala"] { order: 2; }
  .raqamlar button[data-raqam="0"] { order: 1; }
  .raqamlar button[data-amal="ochir"] { order: 3; }
}

/* ── «KEYINGISI» TUGMASI ───────────────────────────────
   Bayram davom etayotganda chiqadi. Shoshayotgan bola
   bosib o'tib ketadi, shoshmaydigan bola tomoshani
   ko'radi — ikkisiga ham qulay. */
.keyingisi {
  font-family: inherit; font-size: clamp(17px, 3.6vw, 22px);
  font-weight: 800; cursor: pointer; color: #1E3A8A;
  background: linear-gradient(180deg, #FDE68A, #FBBF24);
  border: 5px solid var(--oq); border-radius: 18px;
  padding: 9px 22px; margin: 12px auto 0; display: block;
  box-shadow: 0 6px 0 #B45309, 0 12px 20px rgba(180, 83, 9, .3);
  animation: tort 1.1s ease-in-out infinite alternate;
}
.keyingisi small { font-weight: 700; opacity: .75; }
.keyingisi:active { transform: translateY(4px); box-shadow: 0 2px 0 #B45309; }
@keyframes tort { from { transform: scale(1); } to { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .keyingisi { animation: none; } }

/* ── KO'PAYTIRISH BELGISI ──────────────────────────────
   Bank egasi (2026-10-24): «bu belgining * xajmi ham
   kattaroq huddi + kabi».

   NEGA KERAK: `*` shriftlarda izoh belgisi sifatida
   chizilgan — kichik va YUQORIDA turadi. `+` bilan
   yonma-yon qo'yilsa mayda ko'rinadi. Shuning uchun
   kattalashtirib, pastga tushiramiz: endi u `+` bilan
   bir xil og'irlikda va bir xil balandlikda turadi. */
.belgi-kop {
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.26em;
  letter-spacing: .02em;
}

/* ── BOLA ISMI VA TEST SOZLAMASI ───────────────────────
   Bir seansda 10 bola test topshiradi; har biri ismini
   yozadi va natijasi reytingga tushadi. */
.kirish-shakl { display: grid; gap: 10px; justify-items: center; }
.ism-yorliq {
  font-size: clamp(16px, 3.4vw, 20px); font-weight: 700;
  color: var(--matn);
}
.ism {
  font-family: inherit; font-size: clamp(20px, 4.4vw, 26px);
  font-weight: 700; text-align: center;
  padding: 10px 14px; width: min(320px, 86vw);
  border: 5px solid var(--binafsha-och); border-radius: 18px;
  background: var(--oq); color: var(--matn);
}
.ism:focus-visible { outline: 4px solid var(--sariq); outline-offset: 2px; }

.soz-qatori {
  display: flex; align-items: center; gap: 9px;
  flex-wrap: wrap; justify-content: center;
}
.soz-yorliq { font-size: 15px; font-weight: 700; color: var(--matn); }
.soz-tanlov {
  font-family: inherit; font-size: 16px; font-weight: 700;
  padding: 7px 10px; border-radius: 12px;
  border: 3px solid var(--binafsha-och);
  background: var(--oq); color: var(--matn); cursor: pointer;
}

.bola-band { font-weight: 800; }
.bola-band:empty { display: none; }

/* ══ NATIJALAR JADVALI — O'QITUVCHI BO'LIMI ════════════
   Bank egasi (2026-10-24): natijalar reytingga qo'yilsin,
   1-o'rin oltin, 2-o'rin kumush, 3-o'rin bronza medal
   bilan ALOHIDA belgilansin.

   Medal ikki yo'l bilan ko'rsatiladi: belgi (🥇) VA
   qatorning rangi. Faqat emoji bo'lsa, kichik ekranda
   yoki chop etilgan qog'ozda ajralmay qolardi. */
.natija-quti { max-width: min(680px, 94vw); }
.natija-sarlavha { margin-bottom: 4px; }

.jadval-orash {
  overflow-x: auto; margin: 10px 0 14px;
  border-radius: 16px; border: 4px solid var(--binafsha-och);
  background: var(--oq);
}
.natija-jadval {
  width: 100%; border-collapse: collapse;
  font-size: clamp(14px, 2.6vw, 17px);
}
.natija-jadval th {
  background: var(--binafsha); color: var(--oq);
  font-size: clamp(12px, 2.2vw, 14px);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 9px 8px; text-align: left; white-space: nowrap;
}
.natija-jadval td {
  padding: 9px 8px; border-top: 2px solid #E9E4FB;
  font-weight: 700; color: var(--matn);
}
.natija-jadval .raqam-katak {
  text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.natija-jadval .orin-katak {
  font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.natija-jadval .ism-katak { font-weight: 800; }
.natija-jadval .bosh-katak {
  text-align: center; padding: 18px 10px; opacity: .7;
}
.medal {
  width: 2.4em; height: 2.9em; margin-right: 6px;
  vertical-align: -0.95em;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28));
}
.natija-jadval .orin-katak { padding-top: 6px; padding-bottom: 6px; }

/* Medal qatorlari: rang + chap chiziq */
.medalli td { border-top-color: transparent; }
.medalli.oltin td {
  background: linear-gradient(90deg, #FEF3C7, #FDE68A55);
}
.medalli.oltin .orin-katak { box-shadow: inset 5px 0 0 #D97706; }
.medalli.kumush td {
  background: linear-gradient(90deg, #F1F5F9, #E2E8F055);
}
.medalli.kumush .orin-katak { box-shadow: inset 5px 0 0 #64748B; }
.medalli.bronza td {
  background: linear-gradient(90deg, #FDEBDC, #FBD5B555);
}
.medalli.bronza .orin-katak { box-shadow: inset 5px 0 0 #B45309; }

.natija-tugmalar {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center; align-items: center;
}
.boshla.kichik {
  font-size: clamp(17px, 3.4vw, 21px); padding: 11px 22px;
  margin: 0; animation: none;
}
.tugma-mayda.keng { padding: 10px 18px; font-size: 16px; }
.sust { opacity: .55; }

/* Natijalar sarlavhasidagi medal */
.sarlavha-medal { display: inline-block; }
.sarlavha-medal .medal {
  width: 1.05em; height: 1.25em; margin: 0 .12em 0 0;
  vertical-align: -0.22em;
}