/* ============================================================
   Sof tilim — «So'z shashkasi»

   Ranglar oyin.css dagi sandiq bezagidan: yong'oq yog'och, suyak,
   tilla hoshiya. Doska shu sababli oq-qora emas — suyak va yog'och.

   Doska o'lchami bitta o'zgaruvchida (--sh-kat). Telefonda ham,
   katta ekranda ham u o'zi moslashadi: qat'iy piksel yozilmagan,
   aks holda tor ekranda doska chetga chiqib ketardi.
   ============================================================ */

/* ---------- Bosqich foni -------------------------------------

   Har bosqichda boshqa rasm turadi (assets/js/soz-shashka.js).
   Rasmning O'ZI tahrirlanmaydi — barcha effekt shu yerda, CSS da:
   shunday qilinganda bitta fayl saqlanadi va ko'rinishni bir
   joydan sozlash mumkin.

   RASM ASL HOLICHA TURADI. Xiralashtirish (blur) ham, ustidagi oq
   parda ham o'chirilgan: rasmlar o'yin uchun maxsus tayyorlangan
   va o'z ranglari bilan ko'rinishi kerak. Matn bilan tugmalar esa
   fonning ustida emas, o'z oq yostig'ida turadi (pastdagi «Fon
   ustidagi matn» qismi) — shuning uchun ular fonga tegmasdan ham
   aniq o'qiladi.

   Ikkala effekt ham o'zgaruvchi bilan boshqariladi: kerak bo'lsa
   shu yerdan qaytadan yoqiladi. */
.sh-body {
  --sh-fon-xira: 0px;     /* blur kuchi — 0: rasm o'z holicha */
  --sh-fon-parda: 0;      /* oq parda — 0: rasmning asl foni */
}

.sh-fon {
  position: fixed; inset: 0; z-index: -2;
  background-position: center; background-size: cover;
  background-repeat: no-repeat;
  /* Blur ishlatilsa, chetlari shaffoflashadi — shuning uchun rasm
     bir oz kattalashtiriladi. Blur 0 bo'lganda ham zarari yo'q. */
  filter: blur(var(--sh-fon-xira));
  transform: scale(1.02);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.sh-fon.is-bor { opacity: 1; }

/* Parda. Hozir quyuqligi 0 — ko'rinmaydi, ya'ni rasm asl holida
   turadi. Qiymat oshirilsa, oq qatlam qaytadan paydo bo'ladi. */
.sh-fon::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 255, 255, var(--sh-fon-parda));
}

/* Fon qo'yilganda sahifaning o'z gradienti ortiqcha */
.sh-body.has-fon { background: #EFE7D8; }

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

/* ============================================================
   FON BILAN UYG'UNLIK

   Fon rasmlari — iliq, quyoshli manzaralar; doska esa yong'oq
   yog'och va suyak rangida. Oq kartochkalar va ko'k tugmalar
   ularning ikkalasiga ham begona edi: ekranda uch xil dizayn
   turardi.

   Shuning uchun o'yinning butun qobig'i DOSKANING o'z rangiga
   o'tkazildi — sandiq bezagi (`oyin.css`): suyak qog'oz, tilla
   hoshiya, yong'oq yog'och va qirmiz. Endi ustki qator, maqsad
   lavhasi, yon ustunlar, bosqich tugmalari va doska bitta
   to'plamdek ko'rinadi va fon rasmi ularning ortida tabiiy
   yotadi.

   Ko'k rang bu sahifadan butunlay olib tashlandi.
   ============================================================ */

.sh-body {
  /* Suyak qog'oz — barcha yostiq va tugmalar uchun */
  --sh-qogoz: linear-gradient(180deg, #FDF7EA, var(--oy-suyak-2));
  --sh-hoshiya: rgba(201, 162, 39, .55);
  --sh-soya: 0 6px 18px rgba(46, 24, 10, .16);
  --sh-siyoh: #5B2F1B;
}

/* USTKI QATOR. Telefonda — qog'oz tasma (joy tor, lavhalar
   sig'maydi). Keng ekranda esa tasma butunlay olib tashlanadi va
   har bir element alohida lavhaga o'tadi — pastdagi «Navbat
   sizda» va boshqaruv bilan bir uslubda (pastdagi media-so'rovga
   qarang). */
.sh-body .oy-bar {
  background: linear-gradient(180deg, #FDF7EA 72%, rgba(253, 247, 234, 0));
  border-bottom: 0;
  color: var(--sh-siyoh);
}
.sh-body .oy-bar__oyin { color: var(--sh-siyoh); }
.sh-body .oy-bar__oyin b { color: var(--oy-qirmiz); }
.sh-body .oy-bar__chiq {
  background: var(--sh-qogoz);
  border-color: var(--sh-hoshiya);
  color: var(--sh-siyoh);
}
.sh-body .oy-bar__chiq:hover { border-color: var(--oy-tilla); }

/* Maqsad lavhasi — sandiq qopqog'idagi lenta uslubida */
.sh-body .sh-maqsad {
  border-radius: 16px 16px 8px 8px;
  padding: 12px 16px 14px;
  background: var(--sh-qogoz);
  border: 2px solid var(--oy-tilla);
  box-shadow: var(--sh-soya), inset 0 0 0 3px rgba(201, 162, 39, .18);
}
.sh-body .sh-maqsad__teg {
  background: rgba(201, 162, 39, .16);
  color: var(--oy-yogoch);
}
.sh-body .sh-maqsad__atama { color: var(--oy-qirmiz); }
.sh-body .sh-maqsad__topshiriq { color: var(--sh-siyoh); opacity: .78; }

/* Yon ustunlar — o'yinchi va kompyuterning so'zi */
.sh-body .sh-yon {
  background: var(--sh-qogoz);
  border: 1px solid var(--sh-hoshiya);
  box-shadow: var(--sh-soya);
}
.sh-body .sh-yon--raqib { border-color: rgba(142, 43, 32, .45); }
.sh-body .sh-yon--men { border-color: rgba(31, 107, 69, .45); }
.sh-body .sh-yon__nom { color: var(--sh-siyoh); }
.sh-body .sh-yon__nom b { color: var(--oy-qirmiz); }
.sh-body .sh-chet { color: rgba(91, 47, 27, .72); }

/* So'z kataklari: bo'sh — qog'ozda punktir, to'ldirilgani —
   tilla hoshiya. Boshidan berilgani yashil bo'lib qoladi. */
.sh-body .sh-katak {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(201, 162, 39, .5);
  color: var(--sh-siyoh);
}
.sh-body .sh-katak--tola {
  border: 2px solid var(--oy-tilla);
  background: linear-gradient(180deg, #FBF0CE, #F2E2AE);
  color: var(--oy-yogoch);
}
.sh-body .sh-oraliq { color: rgba(91, 47, 27, .6); }

/* Bosqich tugmalari va guruh tanlagichi */
.sh-body .sh-guruh,
.sh-body .sh-bosq,
.sh-body .sh-royxat__och,
.sh-body .sh-boshqaruv,
.sh-body .sh-boshqaruv select,
.sh-body .sh-boshqaruv .st-btn {
  background: var(--sh-qogoz);
  border-color: var(--sh-hoshiya);
  color: var(--sh-siyoh);
}
.sh-body .sh-guruh,
.sh-body .sh-bosq,
.sh-body .sh-royxat__och,
.sh-body .sh-boshqaruv { box-shadow: var(--sh-soya); }

.sh-body .sh-guruh.is-joriy {
  background: linear-gradient(180deg, #9A5231, var(--oy-yogoch));
  border-color: var(--oy-tilla);
  color: #FBF4E4;
}
.sh-body .sh-bosq.is-joriy {
  border-color: var(--oy-tilla);
  box-shadow: inset 0 0 0 2px rgba(201, 162, 39, .55), var(--sh-soya);
  color: var(--oy-qirmiz);
}
.sh-body .sh-bosq.is-yutgan {
  border-color: rgba(31, 107, 69, .6);
  background: linear-gradient(180deg, #F1F8F1, #E2EFDF);
  color: var(--oy-yashil);
}
.sh-body .sh-bosq.is-yopiq {
  background: rgba(234, 223, 198, .72);
  color: rgba(91, 47, 27, .55);
}

/* Holat yozuvlari — qog'oz tasmada */
.sh-body .sh-guruh__holat,
.sh-body .sh-holat {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--sh-qogoz);
  border: 1px solid var(--sh-hoshiya);
  color: var(--sh-siyoh);
}
.sh-body .sh-guruh__holat b { color: var(--oy-qirmiz); }
.sh-body .sh-holat--kutish { color: rgba(91, 47, 27, .7); }
.sh-body .sh-boshqaruv label { color: var(--sh-siyoh); }

/* DOSKA. Yassi ikki rangli kataklar fon rasmining yonida arzon
   ko'rinardi. Endi kataklar ham, hoshiya ham yog'och tovlanishiga
   ega: qalin yong'oq ramka, ichida tilla ip, kataklarda yumshoq
   qiyalik. Rasm ishlatilmaydi — hammasi gradient, ya'ni bitta
   ham qo'shimcha fayl yuklanmaydi. */
.sh-body .sh-taxta {
  border: clamp(8px, 1.1vh, 14px) solid var(--oy-yogoch);
  border-radius: 10px;
  background: var(--oy-yogoch);
  box-shadow:
    inset 0 0 0 2px rgba(201, 162, 39, .55),
    0 0 0 2px rgba(70, 36, 18, .55),
    0 18px 38px rgba(46, 24, 10, .38);
}
.sh-body .sh-kat--oq {
  background: linear-gradient(135deg, #FCF5E6 0%, #F2E7CF 100%);
}
.sh-body .sh-kat--qora {
  background: linear-gradient(135deg, #955230 0%, #7C4224 100%);
}
/* Toshlar biroz bo'rtib tursin */
.sh-body .sh-tosh {
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .45),
    inset 0 -3px 5px rgba(0, 0, 0, .18),
    0 3px 6px rgba(30, 14, 4, .35);
}
.sh-body .sh-tosh--damba {
  box-shadow:
    0 0 0 3px var(--oy-yashil),
    0 0 0 5px rgba(31, 107, 69, .3),
    inset 0 2px 3px rgba(255, 255, 255, .45),
    0 3px 6px rgba(30, 14, 4, .35);
}

.sh-main { max-width: 1180px; }

/* ---------- Bosqichlar qatori ------------------------------ */

.sh-royxat { padding: 10px 0 0; }

/* Yig'ish tugmasi faqat tor ekranda ko'rinadi (pastdagi media-so'rov) */
.sh-royxat__och { display: none; }

/* Guruh tanlagichi: 1-10, 11-20 ... */
.sh-guruhlar { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-guruh {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--st-line);
  background: #fff;
  color: var(--st-ink-soft);
  font: 600 13px/1 inherit;
  cursor: pointer;
}
.sh-guruh:hover { border-color: var(--oy-tilla); }
.sh-guruh.is-joriy {
  background: var(--st-navy);
  border-color: var(--st-navy);
  color: #fff;
}
.sh-guruh.is-yopiq { opacity: .5; cursor: not-allowed; }

/* Bosqichlar — raqam emas, atamaning belgisi */
.sh-bosqichlar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.sh-bosq {
  width: 74px;
  padding: 8px 4px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-radius: 12px;
  border: 1px solid var(--st-line);
  background: #fff;
  color: var(--st-ink-soft);
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.sh-bosq svg { width: 26px; height: 26px; }
/* Nom ikki qatorgacha o'raladi. Ilgari bitta qatorda kesilardi va
   «Diskussiya» bilan «Dostavka» bir xil «Disk…» bo'lib qolardi. */
.sh-bosq__nom {
  font: 600 10px/1.25 inherit;
  text-align: center;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-height: 25px;
}
.sh-bosq:hover { border-color: var(--oy-tilla); transform: translateY(-1px); }
.sh-bosq.is-joriy {
  border-color: var(--st-blue);
  box-shadow: inset 0 0 0 1px var(--st-blue);
  color: var(--st-blue);
}
/* Yutilgan bosqich */
.sh-bosq.is-yutgan {
  border-color: var(--oy-yashil);
  background: #EEF8F2;
  color: var(--oy-yashil);
}
.sh-bosq.is-yopiq {
  background: var(--st-bg-tint);
  color: var(--st-muted);
  cursor: not-allowed;
  opacity: .55;
}
.sh-guruh__holat {
  margin: 10px 0 0;
  font-size: 13px; color: var(--st-muted);
}
.sh-guruh__holat b { color: var(--st-ink-soft); }

/* ---------- Maqsad ----------------------------------------- */

.sh-maqsad { text-align: center; margin: 18px 0 14px; }
.sh-maqsad__teg {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--st-bg-tint);
  color: var(--st-muted);
  font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.sh-maqsad__atama {
  margin: 8px 0 2px;
  font-size: 30px; line-height: 1.15;
  color: var(--st-navy);
}
.sh-maqsad__topshiriq { margin: 0 0 12px; color: var(--st-muted); font-size: 14px; }

/* ---------- So'z kataklari --------------------------------- */

.sh-soz {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.sh-katak {
  min-width: 34px; height: 40px;
  padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 2px dashed var(--st-line);
  background: #fff;
  font-size: 18px; font-weight: 700;
  color: var(--st-navy);
}
/* Boshidan berilgan harf */
.sh-katak--tekin {
  border: 2px solid var(--oy-yashil);
  background: #E8F6EE;
  color: var(--oy-yashil);
}
/* O'yinda urib olingan harf */
.sh-katak--tola {
  border: 2px solid var(--st-blue);
  background: #EAF2FE;
  color: var(--st-blue);
}
/* Bo'sh joy yoki vergul — to'ldirilmaydi */
.sh-oraliq {
  min-width: 12px;
  display: flex; align-items: center;
  color: var(--st-muted);
  font-size: 18px; font-weight: 700;
}

/* ---------- Uch ustunli maydon ----------------------------- */

.sh-maydon {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 18px;
  margin-top: 6px;
}
.sh-yon {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--st-line);
  background: var(--st-panel);
}
.sh-yon__nom {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
  font-size: 14px; font-weight: 600; color: var(--st-ink-soft);
}
.sh-yon__nom b { font-size: 15px; color: var(--st-navy); }
.sh-yon--raqib { border-color: #F2D2CE; }
.sh-yon--men { border-color: #CDE8D6; }
.sh-soz--yon .sh-katak { min-width: 28px; height: 33px; font-size: 15px; }
.sh-soz--yon .sh-oraliq { font-size: 15px; }
.sh-chet {
  margin-top: 10px;
  font-size: 12.5px; color: var(--st-muted);
  word-break: break-word;
}

/* ---------- Doska ------------------------------------------ */

.sh-taxta-quti { display: flex; flex-direction: column; align-items: center; }

.sh-taxta {
  --sh-kat: min(9.4vw, 62px);
  display: grid;
  grid-template-columns: repeat(8, var(--sh-kat));
  grid-template-rows: repeat(8, var(--sh-kat));
  border: 6px solid var(--oy-yogoch);
  border-radius: 8px;
  box-shadow: var(--st-shadow-3, 0 10px 24px rgba(7,21,39,.18));
  overflow: hidden;
}
.sh-kat {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.sh-kat--oq { background: var(--oy-suyak); }
.sh-kat--qora { background: var(--oy-yogoch-2); }

/* Tanlangan tosh va uning yurish joylari */
.sh-kat.is-tanlangan { box-shadow: inset 0 0 0 3px var(--oy-tilla); }
.sh-kat.is-mumkin::after {
  content: '';
  width: 30%; height: 30%;
  border-radius: 50%;
  background: rgba(201, 162, 39, .85);
}

.sh-tosh {
  /* Belgi halqalari toshning O'ZIGA nisbatan o'lchanadi: busiz ular
     katakka nisbatan chizilib, toshdan kattaroq chiqardi va damba
     halqasi bilan ustma-ust tushardi. */
  position: relative;
  width: 78%; height: 78%;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--sh-kat) * .34);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.28);
  user-select: none;
}
.sh-tosh--men {
  background: linear-gradient(180deg, #FBF6EA, var(--oy-suyak-2));
  color: #5B2F1B;
  border: 2px solid #C9B893;
}
.sh-tosh--raqib {
  background: linear-gradient(180deg, #A8382C, var(--oy-qirmiz));
  color: #FBEFE7;
  border: 2px solid #6E1E16;
}
/* DOSKADAGI UCH BELGI — uchalasi ham bir qarashda farqlanadi.

     yashil TO'LIQ halqa  — damba (uzoqdan yuradi va uradi);
     tilla PUNKTIR halqa  — harfi menga kerak raqib toshi;
     qirmiz PUNKTIR halqa — harfi kompyuterga kerak MENING toshim.

   Damba halqasi to'liq, qolgani punktir: shakli bilan ham
   ajraladi, ya'ni rangni farqlamaydigan odam ham adashmaydi.
   Damba belgisi tosh chetida, qolgan ikkitasi ichkarida — ular
   bir vaqtda bir toshda bo'lsa ham ustma-ust tushmaydi. */

.sh-tosh--damba {
  box-shadow:
    0 0 0 3px var(--oy-yashil),
    0 0 0 5px rgba(31, 107, 69, .28),
    0 2px 4px rgba(0, 0, 0, .28);
}

.sh-tosh--kerak::after,
.sh-tosh--xavf::after {
  content: '';
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 2px dashed var(--oy-tilla-2);
}
/* Mening toshim kompyuterga kerak — ogohlantirish rangi */
.sh-tosh--xavf::after { border-color: var(--oy-qirmiz); }

/* ---------- Holat va boshqaruv ----------------------------- */

.sh-holat {
  margin-top: 12px;
  min-height: 22px;
  font-size: 15px; font-weight: 600;
  color: var(--st-ink-soft);
  text-align: center;
}
.sh-holat--kutish { color: var(--st-muted); }
.sh-holat--ogoh { color: var(--oy-qirmiz); }
.sh-holat--yutuq { color: var(--oy-yashil); }

.sh-boshqaruv {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
  font-size: 14px; color: var(--st-ink-soft);
}
.sh-boshqaruv select {
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--st-line);
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.sh-yakun__izoh { margin: 10px 0 18px; color: var(--st-ink-soft); line-height: 1.6; }

/* `hidden` bilan yopiladi — oyin.css dagi aria-hidden tartibi
   bu yerda ishlatilmaydi, chunki oyna JS dan boshqariladi. */
.oy-natija:not([hidden]) { display: grid; }

/* ---------- Tor ekran -------------------------------------- */

@media (max-width: 900px) {
  /* Bosqichlar ro'yxati yig'iladi.

     SABAB: guruh tugmalari ikki qatorga, 10 ta bosqich katakchasi
     uch qatorga o'ralib, hammasi bo'lib 370 pikselcha joy olardi.
     Natijada 812 pikselli telefonda doska 778-pikseldan boshlanib,
     birinchi ekranda umuman ko'rinmasdi — har bosqichda pastga
     surishga to'g'ri kelardi. Ro'yxat o'yin uchun emas, ko'chish
     uchun kerak, shuning uchun kerak bo'lgandagina ochiladi. */
  .sh-royxat__och {
    display: flex; align-items: center; gap: 10px;
    width: 100%; margin-top: 10px; padding: 11px 14px;
    border: 1px solid var(--st-line); border-radius: 12px;
    background: #fff; color: var(--st-navy);
    font: 600 14px/1 inherit; text-align: left; cursor: pointer;
  }
  .sh-royxat__holat {
    margin-left: auto; font-weight: 400; font-size: 13px; color: var(--st-muted);
  }
  .sh-royxat__ok { width: 18px; height: 18px; flex: none; transition: transform .18s; }
  .sh-royxat__och[aria-expanded="true"] .sh-royxat__ok { transform: rotate(180deg); }

  .sh-royxat { display: none; }
  .sh-royxat.is-ochiq { display: block; }

  /* TELEFON VA PLANSHET TARTIBI.

     Asosiy joyni DOSKA egallaydi. Ilgari ustunlar ustma-ust
     tushardi: o'z kataklaring, doska, keyin kompyuterniki —
     raqibning so'zini ko'rish uchun doskadan pastga surish kerak
     edi va doskaning o'zi ham ekranning yarmiga tushib qolardi.

     Endi ikkala ustun doska TEPASIDA, yonma-yon turadi: ikkovi
     bir qarashda ko'rinadi va ular ostidagi butun joy doskaga
     qoladi. Doskaning kattaligini `doskaMoslash()` bo'sh joyga
     qarab o'lchaydi — quyidagi `--sh-kat` faqat zaxira qiymat
     (JS ishlamasa yoki hali ishga tushmagan bo'lsa). */
  .sh-maydon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "royxatoch royxatoch"
      "royxat    royxat"
      "raqib     men"
      "taxta     taxta";
    gap: 10px;
    margin-top: 4px;
  }
  .sh-royxat__och { grid-area: royxatoch; margin-top: 0; }
  .sh-royxat { grid-area: royxat; }
  .sh-yon--raqib { grid-area: raqib; }
  .sh-yon--men { grid-area: men; }
  .sh-taxta-quti { grid-area: taxta; }

  /* YON USTUNLAR — eng ixcham ko'rinishi. Bu kartochkalarda
     o'qiladigan narsa ikkitagina: kim nechta harf yig'di va
     qaysi harflar tushdi. Shuning uchun ichki bo'shliq, nom
     qatori va «Keraksiz» qatori qisqartirildi — ular bo'shatgan
     har piksel pastdagi doskaga o'tadi. */
  .sh-yon { padding: 6px 8px 7px; border-radius: 12px; }
  .sh-yon__nom { margin-bottom: 4px; font-size: 12px; }
  .sh-yon__nom b { font-size: 13.5px; }
  .sh-chet { margin-top: 4px; font-size: 10.5px; }
  .sh-soz--yon { gap: 4px; }

  /* USTKI QATOR fon rasmini KESMAYDI. Ilgari tepada to'liq enli
     qog'oz tasma turardi va manzaraning yuqori qismi shu tasma
     ostida qolardi. Endi tasma yo'q: nom va hisob o'z yumaloq
     lavhasida turadi, ular orasidan fon ko'rinib turadi — xuddi
     katta ekrandagidek. */
  .sh-body .oy-bar { padding: 6px 0 4px; background: transparent; }
  .sh-body .oy-bar__nom,
  .sh-body .oy-bar__oyin {
    border-radius: 999px;
    background: var(--sh-qogoz);
    border: 1.5px solid var(--sh-hoshiya);
    box-shadow: var(--sh-soya);
  }

  /* MAQSAD LAVHASI — past va tor. Unda faqat atama va bir
     qatorlik topshiriq qoladi; lavha qanchalik past bo'lsa,
     doskaga shuncha ko'p joy tegadi. */
  .sh-body .sh-maqsad {
    margin: 6px 0; padding: 5px 12px 7px; border-radius: 13px;
  }
  .sh-body .sh-maqsad__atama { font-size: 22px; margin: 2px 0 0; }
  .sh-body .sh-maqsad__topshiriq { font-size: 11.5px; margin-bottom: 0; }
  .sh-body .sh-maqsad__teg { font-size: 9.5px; padding: 1px 8px; }

  /* DOSKA EKRANNING BUTUN ENIGA.

     Ilgari doska qobiqning yon bo'shlig'i ichida qolardi va
     375 pikselli telefonda 330 piksel kelardi — kataklar 39
     pikseldan oshmasdi. Endi quti o'sha bo'shliqni manfiy
     chekka bilan qaytaradi va doska oynaning eniga yetadi;
     ostidagi qator esa o'z joyida, chekkadan ichkarida qoladi.

     Ramka ham yupqaroq (6px): u ham katak enidan yeydi. */
  .sh-taxta-quti {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "taxta taxta" "holat boshqaruv";
    align-items: center;
    column-gap: 8px;
    margin-left: calc(-1 * var(--sh-chekka));
    margin-right: calc(-1 * var(--sh-chekka));
  }
  /* Doska o'z eniga ega bo'lsin: panjara uni cho'zib yuborsa,
     kataklar ramkadan chiqib ketardi. */
  .sh-body .sh-taxta {
    grid-area: taxta; justify-self: center;
    border-width: 6px; border-radius: 8px;
  }
  /* HOLAT YOZUVI TARTIBNI SURMAYDI.

     «Navbat sizda.» bir qatorga, «Kompyuter o'ylamoqda…» esa
     ikkiga sig'adi. Har yurishdan keyin yozuv almashgani sari
     qator bo'yi o'zgarib, butun ekran bir necha piksel yuqoriga
     va pastga sakrab turardi.

     Yechim kompyuterdagidek: ikki qator joy OLDINDAN band
     qilinadi va undan uzuni kesiladi — bir qatorli xabar ham,
     ikki qatorlisi ham bir xil balandlikda turadi. To'liq xabar
     baribir bosqich yakuni oynasida ko'rinadi. */
  .sh-body .sh-holat {
    grid-area: holat; justify-self: start; text-align: left;
    margin: 6px 0 0 var(--sh-chekka); font-size: 12px;
    padding: 4px 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: calc(2.6em + 12px);
  }
  .sh-boshqaruv {
    grid-area: boshqaruv; justify-self: end;
    margin: 7px var(--sh-chekka) 0 0; font-size: 12px; gap: 6px;
    padding: 4px 8px; border-radius: 999px;
    border: 1.5px solid var(--sh-hoshiya);
    background: var(--sh-qogoz);
  }
  .sh-boshqaruv select { padding: 4px 6px; font-size: 12px; }
  .sh-boshqaruv .st-btn { padding: 5px 10px; font-size: 12px; }
  /* «Qiyinlik» yozuvi tor ekranda o'rin egallaydi — tanlagichning
     o'zi nimani tanlaganini ko'rsatib turadi. */
  .sh-boshqaruv label { display: none; }

  /* Maqsad lavhasidagi katak qatori telefonda TAKRORLANADI:
     xuddi shu kataklar pastdagi «Siz» kartochkasida ham turadi.
     Shuning uchun bu yerda yashiriladi — doskaga qirq pikselcha
     joy bo'shaydi. */
  .sh-maqsad .sh-soz { display: none; }

  /* Bosqichlar tugmasi ham pasayadi */
  .sh-royxat__och { padding: 7px 12px; font-size: 12.5px; margin-top: 0; }

  .sh-taxta { --sh-kat: min(12.2vw, 58px); }

  /* FON BILAN UYG'UNLIK.

     Qog'oz lavhalar endi to'liq shaffofmas emas: orqadagi
     manzara ular ostidan sezilib turadi va ekran uch qavat
     (rasm — oq karta — doska) emas, yaxlit ko'rinadi. Shaffoflik
     ataylab kam (0.9 atrofida) va ostidagi rasm biroz
     xiralashtiriladi — shundagina matn har qanday manzarada
     ham bemalol o'qiladi. */
  .sh-body {
    --sh-chekka: 8px;
    --sh-qogoz: linear-gradient(180deg,
                  rgba(253, 247, 234, .94), rgba(243, 231, 206, .9));
  }
  /* Qobiq ekran bo'yiga cho'ziladi va ortib qolgan bo'sh joy
     tepa bilan past o'rtasida TENG bo'linadi: doska ekranning
     o'rtasida turadi, pastda esa yolg'iz bo'shliq qolmaydi.
     (Doskani o'lchash paytida bu cho'zilish bekor qilinadi —
     quyiroqdagi `.sh-olchov` qoidasiga qarang.) */
  .sh-body .oy-shell {
    padding: 0 var(--sh-chekka) 10px;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .sh-body .sh-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .sh-body .sh-maqsad,
  .sh-body .sh-yon,
  .sh-body .sh-royxat__och,
  .sh-body .sh-holat,
  .sh-body .sh-boshqaruv,
  .sh-body .oy-bar__nom,
  .sh-body .oy-bar__oyin,
  .sh-body .sh-qoida-och,
  .sh-body .oy-bar__chiq {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
}

@media (max-width: 560px) {
  .sh-taxta { --sh-kat: min(12.1vw, 46px); }
  .sh-katak { min-width: 28px; height: 34px; font-size: 15px; }
  .sh-maqsad__atama { font-size: 21px; }
  /* Eng tor ekranda yon ustunlardagi kataklar ham kichrayadi */
  .sh-soz--yon .sh-katak { min-width: 24px; height: 28px; font-size: 13.5px; }
}


/* ============================================================
   BITTA EKRAN — kompyuter va planshet

   Talab: doska ham, yon tomondagi so'z kataklari ham iloji boricha
   KATTA bo'lsin va hammasi bitta oynaga sig'sin — aylantirish
   kerak bo'lmasin.

   Shuning uchun o'lchamlar piksel bilan emas, `vh` bilan
   beriladi: ekran past bo'lsa hamma narsa mutanosib kichrayadi,
   baland bo'lsa kattalashadi. Yuqori chegara ham qo'yilgan —
   katta monitorda doska cheksiz o'smaydi.

   O'yin qoidasi bu ekranga sig'maydi, shuning uchun u yuqoridagi
   «Qoida» tugmasi bilan ochiladigan oynaga ko'chdi.
   ============================================================ */

@media (min-width: 901px) and (min-height: 600px) {
  .sh-body .oy-shell {
    max-width: 1340px;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 0 18px clamp(6px, 1.2vh, 16px);
  }

  /* Tasma o'rniga alohida lavhalar: fon rasmi butun enga
     ko'rinadi, matn esa o'z qog'ozida o'qiladi. */
  .sh-body .oy-bar {
    padding: clamp(5px, .9vh, 10px) 0 clamp(3px, .6vh, 6px);
    background: transparent;
    gap: clamp(8px, 1vw, 14px);
  }
  .sh-body .oy-bar__nom { font-size: clamp(15px, 2.1vh, 19px); }
  .sh-body .oy-bar__nom,
  .sh-body .oy-bar__oyin {
    padding: clamp(5px, .9vh, 9px) clamp(13px, 1.3vw, 20px);
    border-radius: 999px;
    background: var(--sh-qogoz);
    border: 1.5px solid var(--sh-hoshiya);
    box-shadow: var(--sh-soya);
  }

  /* BOSQICHLAR RO'YXATI IKKI YONDA.

     Tepada faqat o'ynalayotgan so'z qoladi — doskaga eng ko'p joy
     shunda tegadi. Ro'yxat esa yon kartochkalarning ostiga
     ko'chadi: chapda guruh tugmalari va holat, o'ngda bosqich
     belgilari. `display: contents` — `<nav>` ning o'zi panjaradan
     yo'qoladi, bolalari to'g'ridan-to'g'ri katakka tushadi. */
  .sh-body .sh-royxat { display: contents; }
  .sh-body .sh-royxat__chap { grid-area: chap; }
  .sh-body .sh-bosqichlar { grid-area: ong; margin-top: 0; }
  .sh-body .sh-guruhlar { gap: 5px; }
  .sh-body .sh-guruh__holat { margin-top: clamp(5px, .9vh, 10px); }
  .sh-body .sh-guruh {
    padding: clamp(4px, .7vh, 7px) clamp(9px, 1vw, 13px);
    font-size: clamp(11px, 1.4vh, 13px);
  }
  .sh-body .sh-bosqichlar { gap: clamp(5px, .8vw, 9px); }
  /* To'rttadan bir qatorga sig'sin: 10 ta belgi uch qatorga
     joylashadi va ustun baland bo'lib ketmaydi. */
  .sh-body .sh-bosq {
    width: clamp(48px, 4.6vw, 64px);
    padding: clamp(4px, .8vh, 9px) 3px clamp(3px, .6vh, 7px);
    gap: 3px;
  }
  .sh-body .sh-bosqichlar { justify-content: center; }
  .sh-body .sh-bosq svg {
    width: clamp(15px, 2vh, 23px);
    height: clamp(15px, 2vh, 23px);
  }
  .sh-body .sh-bosq__nom { font-size: clamp(9px, 1.2vh, 10.5px); min-height: 0; }
  .sh-body .sh-guruh__holat { font-size: clamp(10.5px, 1.4vh, 13px); }
  .sh-body .sh-royxat__och { display: none; }

  /* Ish maydoni qolgan balandlikni to'liq egallaydi va markazda turadi */
  .sh-body .oy-main {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* MAQSAD — markazdagi lavha, BITTA QATORDA.

     Ilgari teg, atama, topshiriq va harf kataklari to'rt qator
     bo'lib turardi: lavha 147 piksel egallardi va o'sha joy
     doskadan olingan edi. Endi uchalasi bir qatorga tizildi —
     atamaning o'lchami esa o'zgarmadi, u baribir ekrandagi eng
     yirik yozuv. Doskaga qo'shilgani: katak 63 -> 76 px.

     HARF KATAKLARI bu yerdan olib tashlandi: xuddi o'sha kataklar
     o'ngdagi «Siz» kartochkasida, kattaroq holda turadi — ikki
     joyda ikki marta ko'rsatishning hojati yo'q. (Telefonda ular
     allaqachon shu sababdan yashirilgan.) */
  .sh-body .sh-maqsad {
    width: fit-content;
    max-width: 100%;
    margin: clamp(4px, .8vh, 10px) auto clamp(4px, .8vh, 10px);
    padding: clamp(4px, .7vh, 9px) clamp(16px, 2.2vw, 30px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px clamp(8px, 1vw, 16px);
  }
  .sh-body .sh-maqsad__teg {
    font-size: clamp(9.5px, 1.2vh, 11.5px); padding: 2px 10px;
  }
  .sh-body .sh-maqsad__atama {
    font-size: clamp(19px, 3vh, 34px);
    margin: 0;
  }
  .sh-body .sh-maqsad__topshiriq {
    font-size: clamp(11px, 1.35vh, 13.5px);
    margin: 0;
  }
  .sh-body .sh-maqsad .sh-soz { display: none; }

  /* Uch ustun, ikki qator: tepada so'z kartochkalari, ostida
     bosqichlar ro'yxati. Doska o'rtada, ikkala qatorni egallaydi. */
  .sh-body .sh-maydon {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
      "raqib taxta men"
      "chap  taxta ong";
    align-items: start;
    align-content: center;
    gap: clamp(8px, 1.2vh, 16px) clamp(10px, 1.6vw, 28px);
    margin-top: 0;
  }
  .sh-body .sh-yon--raqib { grid-area: raqib; justify-self: end; }
  .sh-body .sh-yon--men { grid-area: men; justify-self: start; }
  .sh-body .sh-taxta-quti { grid-area: taxta; }
  .sh-body .sh-yon {
    width: 100%;
    max-width: clamp(210px, 23vw, 340px);
    padding: clamp(9px, 1.4vh, 16px);
  }
  /* Ro'yxatning ikkala bo'lagi ham yon kartochkalar bilan bir
     xil qog'oz panelda — ular fon ustida yolg'iz turmasin. */
  .sh-body .sh-royxat__chap,
  .sh-body .sh-bosqichlar {
    width: 100%;
    max-width: clamp(210px, 23vw, 340px);
    padding: clamp(8px, 1.2vh, 14px);
    border-radius: 14px;
    background: var(--sh-qogoz);
    border: 1px solid var(--sh-hoshiya);
    box-shadow: var(--sh-soya);
  }
  .sh-body .sh-royxat__chap { grid-area: chap; justify-self: end; }
  .sh-body .sh-bosqichlar { grid-area: ong; justify-self: start; }

  /* Panel ichidagi tugmalarning o'z soyasi ortiqcha */
  .sh-body .sh-royxat__chap .sh-guruh,
  .sh-body .sh-bosqichlar .sh-bosq { box-shadow: none; }
  .sh-body .sh-guruh__holat {
    background: transparent;
    border: 0;
    padding: 0;
  }
  .sh-body .sh-yon__nom {
    margin-bottom: clamp(6px, 1vh, 11px);
    font-size: clamp(12.5px, 1.7vh, 15px);
  }
  .sh-body .sh-yon__nom b { font-size: clamp(13.5px, 1.9vh, 17px); }
  .sh-body .sh-chet { margin-top: clamp(6px, 1vh, 11px); font-size: clamp(11px, 1.4vh, 13px); }

  /* Holat yozuvi va boshqaruv BITTA qatorda: ikkitasi ikki qator
     joy olardi, o'sha joy doskaga berildi.

     DOSKA JOYIDAN SILJIMASLIGI UCHUN. Ustunning eni doskaniki —
     uni `doskaMoslash()` piksel bilan qo'yadi. Busiz pastki
     qatorning eni ustunni kengaytirib yuborardi: holat yozuvi
     o'zgarganda («Navbat sizda» -> «Kompyuter o'ylamoqda…»)
     doska chapga-o'ngga sakrab turardi. Balandlik ham oldindan
     band qilingan: yozuv ikki qatorgacha o'sadi va undan
     oshmaydi, ya'ni doska yuqoriga-pastga ham siljimaydi. */
  .sh-body .sh-taxta-quti {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "taxta taxta" "holat boshqaruv";
    justify-content: center;
    align-items: center;
    column-gap: clamp(10px, 1.4vw, 22px);
  }
  .sh-body .sh-taxta { grid-area: taxta; }
  .sh-body .sh-holat { grid-area: holat; }
  .sh-body .sh-boshqaruv { grid-area: boshqaruv; }

  /* Doska — ekran balandligiga qarab, iloji boricha katta */
  /* DOSKA O'LCHAMI qolgan balandlikdan hisoblanadi.

     Doskadan tashqarida faqat ustki qator, maqsad lavhasi va
     doska ostidagi bitta qator qoldi (bosqichlar ro'yxati yon
     ustunlarga ko'chdi). O'lchangan: ular birgalikda ~295px joy
     oladi va bu son balandlik o'zgarganda deyarli o'zgarmaydi
     (ichkaridagi `clamp` lar yuqori chegarasiga yetib turadi).
     Demak:

         katak ≈ 12,5vh − 41px    (past oynalar uchun)
         katak ≈ 9,4vh − 13px     (baland oynalar uchun)

     Ikkitasi bor, chunki chekka qismlar `clamp` bilan o'sadi: past
     oynada ular eng kichik holatida qotib turadi, balandida esa
     balandlik bilan birga kattalashadi. Kichigi olinadi.

     Uchinchi chegara — ENI bo'yicha: yon ustunlarga kamida 210px
     joy qolishi kerak, ya'ni katak ≤ 12,5vw − 68px.

     Bu formulalar TAXMINIY — aniq o'lchovni `soz-shashka.js` dagi
     `doskaMoslash()` qiladi: u chetki qismlarning haqiqiy
     balandligini o'lchab, qolgan joyni doskaga beradi. CSS esa
     JS ishlamaganda ham doska to'g'ri chiqishini ta'minlaydi. */
  .sh-body .sh-taxta {
    --sh-kat: min(calc(12.5vh - 41px), calc(9.4vh - 13px), calc(12.5vw - 68px));
  }

  /* JS aniq o'lchov uchun doskani va yon ustunlarni vaqtincha
     yig'ib qo'yadi: shunda qobiqning balandligi faqat chetki
     qismlarniki bo'lib qoladi. Bir kadr ham ko'rinmaydi —
     sinf qo'yilib, o'lchanib, o'sha zahoti olib tashlanadi. */
  .sh-body.sh-olchov .oy-shell { min-height: 0; }
  .sh-body.sh-olchov .sh-taxta { --sh-kat: 0px; }
  .sh-body.sh-olchov .sh-yon,
  .sh-body.sh-olchov .sh-royxat__chap,
  .sh-body.sh-olchov .sh-bosqichlar { display: none; }

  /* So'z kataklari ham imkon qadar katta */
  .sh-body .sh-soz { gap: clamp(4px, .6vw, 7px); }
  .sh-body .sh-katak {
    min-width: clamp(28px, 3.1vh, 42px);
    height: clamp(31px, 3.9vh, 48px);
    font-size: clamp(15px, 2.1vh, 23px);
  }
  .sh-body .sh-soz--yon .sh-katak {
    min-width: clamp(30px, 3.6vh, 50px);
    height: clamp(34px, 4.6vh, 58px);
    font-size: clamp(16px, 2.4vh, 26px);
  }
  .sh-body .sh-soz--yon { gap: clamp(4px, .7vh, 8px); }

  .sh-body .sh-holat {
    margin-top: clamp(4px, .8vh, 10px);
    min-width: 0;
    justify-self: start;
    text-align: left;
    font-size: clamp(12.5px, 1.6vh, 15px);
    /* Ikki qatorgacha — undan uzuni kesiladi. To'liq xabar
       baribir bosqich yakuni oynasida ko'rinadi. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Ikki qator + ichki bo'shliq (pillaning 4px+4px i) oldindan
       band: bir qatorli xabar ham, ikki qatorlisi ham bir xil joy
       oladi, ya'ni doska tepaga-pastga siljimaydi. */
    line-height: 1.3;
    min-height: calc(2.6em + 12px);
  }
  .sh-body .sh-boshqaruv {
    margin-top: clamp(4px, .8vh, 10px);
    font-size: clamp(12px, 1.5vh, 13.5px);
  }
  .sh-body .sh-boshqaruv {
    padding: clamp(4px, .7vh, 7px) clamp(8px, 1vw, 14px);
    border-radius: 999px;
    border: 1.5px solid var(--sh-hoshiya);
  }
  .sh-body .sh-boshqaruv select {
    padding: clamp(3px, .6vh, 6px) 10px;
    background: rgba(255, 255, 255, .7);
  }
  /* «Qaytadan» — yog'och tugma: pastki qatorning urg'usi */
  .sh-body .sh-boshqaruv .st-btn {
    padding: clamp(5px, .9vh, 9px) clamp(12px, 1.4vw, 18px);
    background: linear-gradient(180deg, #9A5231, var(--oy-yogoch));
    border-color: var(--oy-tilla);
    color: #FBF4E4;
  }
  .sh-body .sh-boshqaruv .st-btn:hover { background: linear-gradient(180deg, #A85C38, #7B4127); }
}

/* ---------- «Qoida» tugmasi va oynasi ----------------------- */

.sh-qoida-och {
  display: inline-flex; align-items: center; gap: 6px;
  padding: clamp(5px, .9vh, 8px) clamp(10px, 1.1vw, 14px);
  border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--sh-hoshiya, rgba(201, 162, 39, .55));
  background: var(--sh-qogoz, #FDF7EA);
  font: 600 13.5px/1 inherit; color: var(--sh-siyoh, #5B2F1B);
  white-space: nowrap;
}
.sh-qoida-och svg { width: 16px; height: 16px; }
.sh-qoida-och:hover { border-color: var(--oy-tilla); }

.oy-qoida__yop {
  position: absolute; top: 8px; right: 10px;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: transparent; color: var(--sh-siyoh, #5B2F1B);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: none;
}

/* Bitta ekranli tartibda qoida sahifada turmaydi — tugma bilan
   markazda ochiladi. Tor ekranda esa eski joyida, doska ostida
   qolaveradi: u yerda aylantirish odatiy hol. */
/* Qoida ro'yxati sahifada turmaydi — «Qoida» tugmasi bilan
   markazda ochiladi. Ilgari bu faqat keng ekranda shunday edi;
   telefonda esa ro'yxat doska ostida 400 pikselcha joy olar va
   doskaning o'ziga qolgan joyni yeb qo'yardi. */
.sh-body .oy-qoida {
    display: none;
    position: fixed; z-index: 60;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(620px, calc(100vw - 40px));
    max-height: calc(100vh - 60px); overflow: auto;
    padding: 22px 26px 24px;
    border-radius: 16px;
    border: 2px solid var(--oy-tilla);
    background: var(--sh-qogoz, #FDF7EA);
    box-shadow: 0 24px 60px rgba(46, 24, 10, .42);
    color: var(--sh-siyoh, #5B2F1B);
  }
  .sh-body .oy-qoida.is-ochiq { display: block; }
  .sh-body .oy-qoida b { color: var(--oy-qirmiz); }
  .sh-body .oy-qoida__yop { display: block; }

@media (max-width: 900px) {
  /* USTKI QATOR BITTA SATRDA. Ilgari u o'ralib 93 piksel egallardi.
     Telefonda «Qoida» va «O'yindan chiqish» faqat belgidan iborat —
     nomi ekran o'qigich uchun yashirin matnda qoladi. */
  .sh-body .oy-bar { flex-wrap: nowrap; gap: 8px; }
  .sh-body .oy-bar__nom { font-size: 16px; }
  .sh-body .oy-bar__oyin {
    order: 0; width: auto; margin: 0 auto; text-align: center;
    padding: 4px 10px; font-size: 13px;
  }
  .sh-body .sh-qoida-och,
  .sh-body .oy-bar__chiq { padding: 7px 9px; gap: 0; }
  .sh-body .sh-qoida-och span,
  .sh-body .oy-bar__chiq span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* Doskani o'lchash paytida faqat doskaning o'zi yig'iladi:
     bu tartibda yon ustunlar doska BILAN BIR QATORDA emas,
     uning tepasida turadi, ya'ni ular egallagan joy ham
     hisobga kirishi kerak. */
  .sh-body.sh-olchov .oy-shell { min-height: 0; }
  .sh-body.sh-olchov .sh-taxta { --sh-kat: 0px; }
}