/* ============================================================
   ONLAYN O'YIN — O'QITUVCHI SAHIFASI — "Ekran" formati kartochkalari
   ============================================================
   Maqsad: #ogTgEkranWindows ichidagi ishtirokchi kartochkalari
   (fon, chegara/soya, ismning yuqorida "osilib turgan" nishoni,
   o'ng yuqoridagi ✓/✗ ball-chipi, son o'lchami) haqiqiy "Ekran"
   sahifasidagi ko'p ishtirokchi kartochkasi bilan
   (#ekranMultiArea .ekm-panel — css/style.css, ~qator 2155) BIR XIL
   ko'rinishda chiqishi.

   MUHIM — QAMROV: Har bir qoida FAQAT "#pageOnlineTeacher #ogTgEkranWindows"
   ichidagi ".ogekm-*" klasslariga tegishli. Bu yangi, faqat shu joyda
   ishlatiladigan klass nomlari (mavjud ".ekm-*" yoki ".og-ustun-window*"
   klasslari bilan HECH QANDAY umumiy joyi yo'q) — shuning uchun na haqiqiy
   Ekran sahifasiga (#ekranMultiArea), na Ustun-1 ko'p ishtirokchi sahifasiga
   (#u1MultiArea), na boshqa hech qanday joyga ta'sir qilmaydi.

   Eslatma: raqamning o'zi (pop animatsiyasi, minus belgi, "?" belgisi)
   .og-num-pop/.og-num-pop-mini/.og-qmark/.og-qmark-mini klasslari orqali
   ilgaridan ham ishlab turgan va bu faylda umuman o'zgartirilmagan —
   ularning o'lchami js/online-game.js dagi mavjud (FIX73) qoida bo'yicha
   #pageOnlineTeacher #ogTgEkranWindows konteyneriga nisbatan hisoblanadi;
   bu qoida to'g'ri ishlashi uchun pastda ".ogekm-panel" ustida ilgari
   ".og-ustun-window" da bo'lgan "container-type:size" xususiyati saqlab
   qolingan. */

#pageOnlineTeacher #ogTgEkranWindows .ogekm-panel{
  position:relative;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:#fff;
  border-radius:18px;
  box-shadow:0 2px 10px rgba(15,23,42,0.08), 0 0 0 1px rgba(148,163,184,0.25);
  overflow:hidden;
  width:100%;height:100%;
  min-width:0;min-height:0;
  box-sizing:border-box;
  padding:clamp(30px,10%,38px) clamp(8px,4%,16px) clamp(8px,4%,14px);
  gap:clamp(4px,1.5%,8px);
  container-type:size;
  container-name:ogekmcard;
  transition:box-shadow .2s ease, transform .2s ease;
}
#pageOnlineTeacher #ogTgEkranWindows .ogekm-panel:hover{
  transform:translateY(-2px);
}
/* "G'olib" (eng ko'p to'g'ri javob) — oldingi funksiyadagi kabi oltin
   ajratib ko'rsatish, endi yangi karta uslubiga moslashtirilgan. */
#pageOnlineTeacher #ogTgEkranWindows .ogekm-panel.ogekm-leader{
  box-shadow:0 4px 16px rgba(245,180,35,.28), 0 0 0 2px #f5b423;
}

#pageOnlineTeacher #ogTgEkranWindows .ogekm-topbar{
  position:absolute;top:6px;left:0;right:0;
  display:flex;justify-content:flex-end;align-items:center;
  padding:0 10px;font-size:0.72rem;gap:6px;z-index:2;
}
#pageOnlineTeacher #ogTgEkranWindows .ogekm-score-tag{
  color:var(--green);font-weight:800;white-space:nowrap;font-size:0.68rem;
  background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.28);
  border-radius:999px;padding:2px 8px;line-height:1.5;
}
#pageOnlineTeacher #ogTgEkranWindows .ogekm-wrong-tag{color:var(--red);}

#pageOnlineTeacher #ogTgEkranWindows .ogekm-name-badge{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;align-items:center;gap:7px;
  max-width:82%;
  padding:6px 14px;
  background:linear-gradient(180deg,#ffffff,#f3f6ff);
  border:1px solid rgba(148,163,184,0.3);border-top:none;
  border-radius:0 0 16px 16px;
  box-shadow:0 4px 10px -2px rgba(15,23,42,0.14);
}
#pageOnlineTeacher #ogTgEkranWindows .ogekm-name-tag{
  color:#475569;font-weight:800;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:clamp(.68rem,1.9cqmin,1rem);
}

#pageOnlineTeacher #ogTgEkranWindows .ogekm-arena{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;flex:1 1 auto;
  min-width:0;min-height:0;overflow:hidden;
}

/* Holat matni (⏳ kutilmoqda / ✅ to'g'ri / ❌ xato) — animatsiya
   ketmayotgan (misol hali chiqmagan yoki tekshirilgan) daqiqalarda
   .ogekm-arena ichida ko'rinadi. */
#pageOnlineTeacher #ogTgEkranWindows .ogekm-status{
  font-family:'Baloo 2',sans-serif;font-weight:700;
  font-size:clamp(.72rem,3.2cqmin,1.05rem);
  text-align:center;color:var(--u1-text);
}
#pageOnlineTeacher #ogTgEkranWindows .ogekm-status-ok{color:var(--green);}
#pageOnlineTeacher #ogTgEkranWindows .ogekm-status-bad{color:var(--red);}
#pageOnlineTeacher #ogTgEkranWindows .ogekm-status-wait{color:#94a3b8;}

@media(max-width:700px){
  #pageOnlineTeacher #ogTgEkranWindows .ogekm-panel{
    border-radius:16px;
    padding:clamp(22px,9%,30px) clamp(6px,3%,12px) clamp(6px,3%,12px);
  }
  #pageOnlineTeacher #ogTgEkranWindows .ogekm-name-tag{max-width:104px;}
  #pageOnlineTeacher #ogTgEkranWindows .ogekm-score-tag{font-size:0.62rem;padding:2px 7px;}
}

/* ============================================================
   ONLAYN O'YIN — "MISOLNI QAYTA KO'RSATISH" (REPEAT) IKONKASI — 20260824
   ============================================================
   FAQAT "Ekran" formati uchun: o'qituvchi sahifasida misol chiqib
   turgan kartochkada (ogTgEkmCard showRepeat:true) va o'quvchi
   sahifasida misol ko'rsatilayotganda (ogStEkranDisplay) chiqadigan
   kichik "⟲" tugmasi. Ustun formatiga va boshqa joylarga tegishli emas. */
#pageOnlineTeacher #ogTgEkranWindows .ogekm-repeat-btn{
  position:absolute;top:6px;left:6px;z-index:3;
  width:24px;height:24px;border-radius:50%;
  border:1px solid rgba(124,77,255,.3);
  background:rgba(124,77,255,.12);
  color:#6d3df5;
  font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  transition:background .15s ease, transform .15s ease;
}
#pageOnlineTeacher #ogTgEkranWindows .ogekm-repeat-btn:hover{background:rgba(124,77,255,.22);}
#pageOnlineTeacher #ogTgEkranWindows .ogekm-repeat-btn:active{transform:scale(.88) rotate(-35deg);}
@media(max-width:700px){
  #pageOnlineTeacher #ogTgEkranWindows .ogekm-repeat-btn{width:20px;height:20px;font-size:12px;}
}

#pageOnlineStudent .og-st-ekran-display{position:relative;}
#pageOnlineStudent .og-st-repeat-btn{
  position:absolute;top:12px;right:12px;z-index:4;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(124,77,255,.3);
  background:rgba(255,255,255,.92);
  color:#6d3df5;
  font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  box-shadow:0 4px 10px rgba(15,23,42,.14);
  transition:transform .15s ease;
}
#pageOnlineStudent .og-st-repeat-btn:active{transform:scale(.9) rotate(-35deg);}
@media(max-width:600px){
  #pageOnlineStudent .og-st-repeat-btn{width:32px;height:32px;font-size:17px;top:8px;right:8px;}
}

/* ============================================================
   ONLAYN O'YIN — O'QUVCHI SAHIFASI — "👁 Misolni ko'rsatish" OFF
   ============================================================
   Ekran formatida son o'rniga chiqadigan bosh (raqamsiz) shakl —
   javob panelidagi ".u1-shape"/"bo'sh shakl" bilan bir xil vizual
   tilda (js/online-game.js dagi ogStBlankShapeHtml()). FAQAT
   "#pageOnlineStudent #ogStEkranDisplay" ichida ishlatiladi, boshqa
   ".u1-shape" ishlatilgan joylarga (javob tanlash paneli va h.k.)
   ta'sir qilmaydi. */
#pageOnlineStudent .og-st-ekran-blank-shape{
  width:clamp(90px,26vw,220px);
  height:clamp(90px,26vw,220px);
  color:transparent;
  cursor:default;
  box-shadow:0 10px 26px -8px rgba(15,23,42,.20);
  animation:ogStudentEkranPop .22s ease-out, ogStBlankPulse 1.1s ease-in-out infinite .22s;
}
/* Faqat opacity bilan "nafas olish" effekti — .transform (masalan
   ".u1-shape-diamond"dagi rotate(45deg)) bilan to'qnashmasligi uchun
   ataylab "scale" ishlatilmaydi. */
@keyframes ogStBlankPulse{
  0%,100%{opacity:.78;}
  50%{opacity:1;}
}
@media(max-width:600px){
  #pageOnlineStudent .og-st-ekran-blank-shape{width:clamp(70px,32vw,150px);height:clamp(70px,32vw,150px);}
}

/* ============================================================
   ONLAYN O'YIN — O'QUVCHI SAHIFASI — "MISOLNI KO'RSATISH" OFF
   BO'LGANDA TO'LIQ EKRAN (FULLSCREEN) REJIMI — 20260825
   ============================================================
   "👁 Misolni ko'rsatish" OFF qilinganda, o'quvchining javob berish/
   misol ko'rsatish maydoni (#ogStEkranDisplay yoki #ogStPlay) butun
   ekranni (fixed, viewport o'lchamida) qoplaydi — tepadagi pill
   (#ogStProgress/#ogStScore) va sahifa hoshiyalari yashiriladi,
   faqat misol/javob maydonining o'zi qoladi. Klass JS orqali
   (ogSetFullscreenMode, js/online-game.js) #pageOnlineStudent ga
   qo'shiladi/olib tashlanadi. */
#pageOnlineStudent.og-hide-fullscreen .og-tg-topbar{display:none;}
#pageOnlineStudent.og-hide-fullscreen .og-st-wrap{padding:0;margin:0;width:100%;max-width:none;}
#pageOnlineStudent.og-hide-fullscreen #ogStEkranDisplay,
#pageOnlineStudent.og-hide-fullscreen #ogStPlay{
  position:fixed;inset:0;z-index:2000;
  width:100vw;height:100dvh;height:100vh;
  margin:0;border-radius:0;
  background:var(--u1-bg,#F3EFFF);
  display:flex!important;align-items:center;justify-content:center;
}
#pageOnlineStudent.og-hide-fullscreen #ogStEkranDisplay{width:100vw!important;}
#pageOnlineStudent.og-hide-fullscreen #ogStPlay .og-st-play-row{
  width:100%;height:100%;max-width:none;margin:0;
}
#pageOnlineStudent.og-hide-fullscreen #ogStUstunCol{display:none!important;}
#pageOnlineStudent.og-hide-fullscreen .og-st-answer-col{flex:1 1 auto;height:100%;padding:clamp(46px,8vh,60px) clamp(10px,3vw,20px) clamp(10px,3vh,16px);box-sizing:border-box;}
#pageOnlineStudent.og-hide-fullscreen .og-st-shapes-wrap{flex:1 1 auto;height:auto;}

/* Tepa-o'rtadagi "Qayta ko'rsatish" tugmasi — faqat fullscreen holatida
   va faqat "Ekran" formatida (JS orqali display:flex/none boshqariladi;
   bu yerda faqat vizual ko'rinishi belgilanadi). */
#pageOnlineStudent .og-fs-repeat-btn{
  display:none;position:fixed;top:14px;left:50%;transform:translateX(-50%);
  z-index:2200;align-items:center;gap:6px;
  padding:10px 18px;border-radius:999px;border:1px solid rgba(124,77,255,.30);
  background:rgba(255,255,255,.95);color:#6d3df5;font-weight:800;font-size:.85rem;
  font-family:'Nunito',sans-serif;
  box-shadow:0 8px 20px rgba(15,23,42,.16);cursor:pointer;
}
#pageOnlineStudent .og-fs-repeat-btn:active{transform:translateX(-50%) scale(.94);}
@media(max-width:600px){
  #pageOnlineStudent .og-fs-repeat-btn{top:10px;font-size:.76rem;padding:8px 14px;}
}

/* ============================================================
   ONLAYN O'YIN — O'QUVCHI SAHIFASI — "MISOLNI KO'RSATISH" ON,
   EKRAN FORMATI — "OYIN 1" USLUBIDAGI SPLIT (CHAP+O'NG) KO'RINISH — 20260825
   ============================================================
   "Misolni ko'rsatish" ON bo'lganda, Ekran formatida ham #ogStUstunCol
   (odatda faqat Ustun formatida ishlatiladigan chap ustun) qayta
   ishlatiladi — unga "og-ekran-col" klassi qo'shilib, ichiga
   .og-st-ekran-number (joriy raqam) joylashtiriladi.

   FIX EKRAN_COL_BIG_CENTER (20260825) — ilgari bu ustun tor (~34vw) va
   son juda mayda (clamp 44-92px) chiqardi, natijada o'quvchi ekranida
   misol "chap tomondagi kichkina kartochkada" ko'rinardi. Endi ustun
   kengroq (ustunning o'zi ko'proq joy egallaydi, javob paneli torroq
   qoladi) va son o'qituvchi ekranidagi kabi katta va markazda chiqadi
   (ota-element #ogStUstunCol.og-ustun-col allaqachon
   display:flex;align-items:center;justify-content:center bo'lgani
   uchun markazlashtirish avtomatik davom etadi). */
#pageOnlineStudent #ogStUstunCol.og-ekran-col{
  position:relative;
  flex:0 0 clamp(320px,54vw,760px);
}
#pageOnlineStudent #ogStUstunCol.og-ekran-col .og-st-ekran-number{
  font-size:clamp(88px,16vw,190px);
}
@media(min-width:701px){
  #pageOnlineStudent #ogStUstunCol.og-ekran-col .og-st-ekran-number{
    font-size:clamp(88px,13vw,190px);
  }
}
@media(max-width:600px){
  #pageOnlineStudent #ogStUstunCol.og-ekran-col{
    flex:0 0 clamp(220px,58vw,420px);
  }
  #pageOnlineStudent #ogStUstunCol.og-ekran-col .og-st-ekran-number{
    font-size:clamp(66px,20vw,140px);
  }
}