/* ============================================================
   MEGABRAIN — USTUN 1 / EKRAN 3 / KO'PAYTIRISH KO'P ISHTIROKCHI
   GRID JOYLASHUVINI EKRAN 1 BILAN BIR XIL QILISH (qator/ustun soni)
   v20260911-multigrid-rowfit02
   ============================================================
   MUAMMO: nechta qator/ustunga bo'linishini hisoblovchi funksiya
   (computeFitGridDims, js/app-core.js) BARCHA sahifalar uchun BIR
   XIL — lekin u har bir sahifaning ko'p-ishtirokchi konteyneri
   (#ekranMultiArea / #u1MultiArea / #xMultiArea / #kMultiArea)
   HAQIQIY (joriy) piksel balandligiga qarab hisoblaydi. Bu to'rtta
   konteynerning CSS balandlik/padding qoidalari esa bir-biridan
   farq qilar edi:

   • #ekranMultiArea.active (body.game-on holatida, css/style.css
     ~qator 1724): height:100vh; overflow:hidden; padding-bottom:10px
     — ya'ni EKRAN TO'LIQ balandligining deyarli barchasi grid uchun.

   • #u1MultiArea.active (css/style.css ~qator 2370): faqat
     min-height (aniq height EMAS) va — eng muhimi — pastki bo'shliq
     UMUMIY ".game-area.active{padding-bottom:120px}" qoidasidan
     meros qolar edi (110px ga yaqin ORTIQCHA yo'qotilgan joy!).

   • #xMultiArea.active: aniq height/overflow cheklovi umuman
     berilmagan edi (faqat min-height:100vh meros qolar edi).

   • #kMultiArea.active (Ko'paytirish/Bo'lish): xuddi #xMultiArea
     kabi, aniq height/overflow cheklovi YO'Q edi — faqat umumiy
     ".game-area.active{min-height:100vh;...;justify-content:center}"
     meros qolar edi. Natijada konteyner HAQIQIY balandligi kontent
     miqdoriga qarab o'zgarar (ba'zan ekrandan ancha baland chiqib),
     bu esa: (1) computeFitGridDims() boshqa uchta sahifadan FARQLI
     qator/ustun sonini tanlashiga, (2) kontent markazlashtirilgani
     (justify-content:center) sabab tepa qatorning sahifa header
     paneli (.k-header-bg / .pill-bar-fixed / #kMultiArea .stats-bar)
     ORQASIGA kirib, ko'rinmay/berkinib qolishiga olib kelardi.

   Natijada: bir xil ishtirokchi soni (masalan 5 ta) uchun Ekran 1'da
   grid balandligi kattaroq chiqib "1 qatorga 5 ta karta" tanlansa,
   Ustun 1/Ekran 3/Ko'paytirish'da (boshqacha balandlik sababli)
   ko'proq qator/kamroq ustun tanlanishi, hattoki tepa qatorning
   header panel ortida qolib ketishi mumkin edi.

   YECHIM: Ustun 1, Ekran 3 va Ko'paytirish konteynerlariga ham
   Ekran 1'dagi bilan AYNAN BIR XIL balandlik modelini
   (height:100vh/100dvh, overflow:hidden, min-height:0, kichik
   padding-bottom, va — faqat Ko'paytirish uchun, chunki u yagona
   markazlashtirilgan qolgan edi — justify-content:flex-start)
   beramiz. Natijada to'rtala sahifada ham bir xil ishtirokchi
   sonida computeFitGridDims() BIR XIL qator/ustun sonini tanlaydi
   va grid HAR DOIM header panelidan pastda, unga tegmasdan/orqasida
   qolmasdan boshlanadi. Har bir sahifaning o'ziga xos tepa qism
   balandligi (padding-top, shu jumladan telefon uchun alohida
   sozlangan qiymati) TEGILMAYDI — faqat pastki bo'shliq va umumiy
   balandlik/joylashuv cheklovi Ekran 1 bilan tenglashtiriladi. */

body.game-on #u1MultiArea.active{
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow:hidden;
  padding-top:calc((clamp(8px,1.6vw,14px) + clamp(34px,9vw,38px) + 24px) / 2);
  padding-bottom:calc(clamp(8px,1.6vw,14px) + clamp(34px,9vw,38px) + 24px);
}

/* v20260912: Ustun 1'ning ko'p ishtirokchi ko'rinishida tepadagi burchak
   tugmalari (⚙/←/▶) uchun ajratilgan bo'shliq (padding-top) va pastki
   bo'shliq (avval atigi 10px) notekis edi — natijada kartochkalar
   ustida katta, ostida esa deyarli yo'q bo'sh joy qolib ketardi. Endi
   ikkalasi HAM Ekran 1'dagi bilan bir xil aniq formulaga (haqiqiy
   burchak tugmalari balandligiga mos) va bir-biriga TENG qilindi —
   qatorlar soni (2 ta yoki 10 ta ishtirokchi, 1 yoki bir nechta qator)
   qanchasi bo'lmasin, kartochkalar konteyner ichida tepa-pastda bir
   xil masofa bilan joylashadi. */

/* v20260912-b: yuqoridagi tuzatishdan keyin ham ko'p ishtirokchida
   TEPADAGI bo'sh joy hali ortiqcha katta ko'rinardi. Shuning uchun
   faqat padding-top yana 2 baravar (formulaning yarmigacha)
   qisqartirildi; padding-bottom yuqoridagi (Ekran 1 bilan bir xil)
   formulada o'zgarishsiz qoldirildi — bu safar tepa va past ataylab
   notekis (top < bottom), chunki muammo faqat tepadagi ortiqcha
   bo'shliq sifatida ko'rsatilgan edi. */

body.game-on #xMultiArea.active{
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow:hidden;
}

/* Ko'paytirish/Bo'lish (#kMultiArea) — yuqoridagi kabi, o'z
   header balandligiga mos padding-top'ni (css/style.css,
   "#pageKopaytirish .game-area.active{padding-top:...}") saqlab
   qolgan holda, konteyner balandligini ekranga qattiq bog'laymiz va
   kontentni markazlash o'rniga TEPADAN (header ostidan) boshlaymiz —
   shunda qatorlar soni qanchalik ko'p bo'lmasin, birinchi qator
   hech qachon header panelining orqasida/tagida qolib ketmaydi. */
body.game-on #kMultiArea.active{
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow:hidden;
  padding-bottom:10px;
  justify-content:flex-start;
}

/* v20260913: Ekran 1 (+/-, #ekranMultiArea) ko'p ishtirokchi ko'rinishida
   ham kartochkalar TEPASIDA ortiqcha bo'sh joy qolayotgani skrinshotda
   qora chiziq bilan ko'rsatildi. css/style.css'dagi asl qoida
   ("body.game-on #ekranMultiArea.active{padding-top:calc(...)!important}")
   AYNAN o'sha formuladan foydalanadi — yuqorida #u1MultiArea uchun xuddi
   shu "ortiqcha tepa bo'shliq" muammosi bo'yicha (v20260912-b, yuqoridagi
   izohga qarang) formula 2 baravar qisqartirilgan edi. Endi bir xil
   nisbatni #ekranMultiArea'ga ham qo'llaymiz — natijada kartochkalar
   deyarli qora chiziq belgilagan joydan boshlanadi; pastki bo'shliq
   (asl 10px) o'zgarishsiz qoladi. */
body.game-on #ekranMultiArea.active{
  padding-top:calc((clamp(8px,1.6vw,14px) + clamp(34px,9vw,38px) + 24px) / 2) !important;
}