/* Arqon v19 — BAYROQCHA/ARQON VA ODAMLAR BIRGA HARAKATLANADI.
   3 ta alohida qatlam (hammasi 1536x580, bir-birining ustiga aniq mos tushadi):
     1) .arqon-scene-bg     -> arqon-scene-bg-static.png (chiziq+arqon o'rtasi+
        bayroqcha) — endi .arqon-scene-people bilan BIR XIL --arqon-scene-shift
        qiymati va animatsiyalarga ega (pastdagi "v19 TUZATISH" izohiga qarang).
        Faqat maxsus "finished-left/right" holatida (g'olib/mag'lub jamoa
        ayri-ayri foizga siljiganda) bg o'zining umumiy --arqon-scene-shift
        qiymatida (masalan ±36%) qoladi — bu ataylab shunday, chunki bayroqcha
        aynan shu umumiy siljish orqali g'olib tomonga "tortib olinadi".
     2) .arqon-scene-people (chap va o'ng jamoa, 2 ta <img>) — ikkalasi BIR
        XIL qiymat bilan birga siljiydi/tebranadi (bitta arqonning 2 uchi).

   MUHIM (v17 tajribasidan): shartsiz statik !important transform hech qachon
   animatsiyani "muzlatib" qo'ymasin. Yana bir nozik nuqta: CSS spetsifikligi
   ID -> KLASS SONI -> TEG SONI tartibida solishtiriladi. Shu sabab pastdagi
   qoidalarda ".arqon-center" ORTIQCHA joylarga QO'SHILMAYDI — aks holda
   klass soni tenglashib, keyin "body" tegi noto'g'ri qoidani g'olib
   chiqarib qo'yishi mumkin (bu xato birinchi urinishda sodir bo'lgan edi:
   "finished" qoida (1,4,0) kutilganidek "not-playing" qoidadan (1,3,1)
   kuchli edi, lekin ".arqon-center"ni ikkalasiga ham qo'shib yuborganimda
   ikkovi ham (1,4,*) bo'lib qoldi va "body" tegi noto'g'ri g'alaba
   qildi). Shuning uchun ".arqon-center" faqat haqiqatan zarur bo'lgan
   joyda — ya'ni .pull-now-left/.pull-now-right/.finished-left/.finished-right
   kabi ARENA ustidagi klasslarni ifodalash uchun — ishlatiladi. */

#pageOyin2.arqon-active .arqon-center .arqon-center-line,
#pageOyin2.arqon-active .arqon-center .arqon-scene-bg,
#pageOyin2.arqon-active .arqon-center .arqon-scene-people{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  margin:0 !important;
  user-select:none !important;
  pointer-events:none !important;
}
/* v19 TUZATISH: bayroqcha (.arqon-scene-bg ichida, arqon-scene-bg-static.png
   rasmiga chizilgan) avval HECH QACHON siljimasdi — shuning uchun odamlar
   (.arqon-scene-people) tortish paytida siljiganda, bayroqcha/arqon o'rtasi
   bir joyda "yopishib" qolgandek ko'rinar edi (arqon ikki qismga bo'linib,
   chok joyi mos kelmay qolardi). js/oyin2-poyga.js dagi updateRopeUi()
   funksiyasi asli "butun sahna (ishtirokchilar + PNG ichidagi arqon) bitta
   yaxlit obyekt sifatida harakat qiladi" deb mo'ljallangan (shu fayldagi
   izohga qarang), shuning uchun bayroqcha ham xuddi odamlar bilan BIR XIL
   --arqon-scene-shift qiymati bilan siljishi kerak — shunda chok joyi har
   doim mos tushadi va bayroqcha arqon bilan birga "tortiladi". */
#pageOyin2.arqon-active .arqon-center-line{
  z-index:3 !important;
  transform-origin:center center !important;
}
#pageOyin2.arqon-active .arqon-scene-bg{
  z-index:4 !important;
  transform-origin:center center !important;
  will-change:transform !important;
}
#pageOyin2.arqon-active .arqon-scene-people{
  z-index:5 !important;
  transform-origin:center center !important;
  will-change:transform !important;
}

/* FIX (2026-09-08, v21): markaziy uzuq-uzuq chiziq endi ALOHIDA rasm —
   assets/images/arqon/arqon-center-line-fixed.png (.arqon-center-line) —
   va u HECH QACHON siljimaydi/animatsiya olmaydi (pastga qarang). Chiziq
   avval .arqon-scene-bg rasmining bir qismi edi, shuning uchun ikkita bir
   biriga zid talabni ("chiziq qo'zg'almas turishi kerak" VA "bayroqcha
   arqon bilan birga tortilishi kerak") bitta qatlamda bajarib bo'lmasdi —
   chiziqni qo'zg'almas qilib qo'ysak, xuddi shu rasm ichidagi bayroqcha
   ham muzlab qolardi. Shuning uchun bayroqcha+arqon o'rtasi endi
   arqon-scene-bg-static.png'da ANIQ chiziqSIZ chizilgan (faqat arqon+
   bayroqcha), chiziq esa alohida statik qatlamda. Natijada .arqon-scene-bg
   yana v19'dagidek — odamlar (.arqon-scene-people) bilan BIR XIL
   --arqon-scene-shift qiymatida — erkin siljiy oladi (pastdagi
   "not-playing"/"idle"/"pull" qoidalariga qarang), bayroqcha arqon bilan
   birga tortiladi, chiziq esa doim markazda qotib qoladi. */
#pageOyin2.arqon-active .arqon-center-line{
  transform:none !important;
  animation:none !important;
  transition:none !important;
}

/* O'yin O'YNALMAYOTGAN paytda: bayroqcha+arqon (bg) va odamlar (people)
   ikkalasi ham joriy --arqon-scene-shift qiymatiga mos joyda, silliq
   o'tish bilan turadi — birga siljiganlari uchun chok joyi mos keladi.
   (Klass soni=3, keyingi "finished" qoidadan atayin PASTROQ — 3 ta
   muvaffaqiyatli javobda TO'LIQ o'tish har doim shu qoidadan kuchli
   bo'lishi kerak.) */
body:not(.arqon-playing) #pageOyin2.arqon-active .arqon-scene-bg,
body:not(.arqon-playing) #pageOyin2.arqon-active .arqon-scene-people{
  transform:translateX(var(--arqon-scene-shift,0px)) !important;
  transition:transform 1.16s cubic-bezier(.16,.82,.2,1) !important;
}

/* O'YIN KETAYOTGANDA: bayroqcha+arqon va ikkala jamoa ham birga,
   arqonni doimiy tortayotgandek sezilarli o'ngga-chapga mikroharakatda
   turadi. (Klass soni=3.)
   2026-09-09: foydalanuvchi so'rovi bilan — bu doimiy mikroharakat
   ("tebranish") avval juda TEZ his qilinardi (1.44s), endi sekinroq,
   haqiqiy arqon tortishdagidek OG'IR va bosiqroq harakat qiladi. */
body.arqon-playing #pageOyin2.arqon-active .arqon-scene-bg,
body.arqon-playing #pageOyin2.arqon-active .arqon-scene-people{
  animation:arqonPeopleIdle 2.6s ease-in-out infinite !important;
}
/* v20 ISHONARLILIK: sof sinusoidal tebranish juda "mexanik/robot"
   ko'rinar edi — real arqon tortishda ikki tomon notekis, beqaror
   zarblar bilan tortadi. Shu sabab qadamlar notekis oraliqlarga
   qo'yildi va har bir zarbda arqonning "cho'zilishi"ni taqlid qilish
   uchun juda kichik scaleX qo'shildi (tortilgan tomonda arqon picha
   cho'ziladi degandek). */
@keyframes arqonPeopleIdle{
  0%,100%{transform:translateX(var(--arqon-scene-shift,0px)) scaleX(1)}
  18%{transform:translateX(calc(var(--arqon-scene-shift,0px) - 14px)) scaleX(1.004)}
  38%{transform:translateX(calc(var(--arqon-scene-shift,0px) + 17px)) scaleX(.996)}
  55%{transform:translateX(calc(var(--arqon-scene-shift,0px) - 9px)) scaleX(1.003)}
  78%{transform:translateX(calc(var(--arqon-scene-shift,0px) + 6px)) scaleX(1)}
}

/* Har bir to'g'ri javobda qo'shimcha "impuls" tortish. (Klass soni=5 —
   idle'dan (3) kuchliroq bo'lishi SHART, shuning uchun ".arqon-center"
   shu yerda ataylab qo'shilgan.)
   2026-09-09: foydalanuvchi so'rovi bilan — bu "zarb" ham sekinlashtirildi
   (1.56s -> 2.3s), shunda har bir to'g'ri javobdan keyingi tortilish
   silliqroq, kam "sakrab" ko'rinadi. */
body.arqon-playing #pageOyin2.arqon-active .arqon-center.arqon-pull-now-left .arqon-scene-bg,
body.arqon-playing #pageOyin2.arqon-active .arqon-center.arqon-pull-now-left .arqon-scene-people{
  animation:arqonPeoplePullLeft 2.3s cubic-bezier(.12,.86,.18,1) !important;
}
body.arqon-playing #pageOyin2.arqon-active .arqon-center.arqon-pull-now-right .arqon-scene-bg,
body.arqon-playing #pageOyin2.arqon-active .arqon-center.arqon-pull-now-right .arqon-scene-people{
  animation:arqonPeoplePullRight 2.3s cubic-bezier(.12,.86,.18,1) !important;
}
/* v20 ISHONARLILIK: haqiqiy "yulqib tortish"da bitta silliq tepa-pastga
   emas, balki qattiq zarb + ortiqcha siljib ketish (overshoot) + orqaga
   qaytishda kichik sakrash (spring) bo'ladi. Shuning uchun 2 ta o'rniga
   4 ta oraliq nuqta qo'shildi, va zarb online arqon picha "cho'ziladi"
   (scaleX) — real jismoniy tortishishga o'xshab qoladi. */
@keyframes arqonPeoplePullLeft{
  0%{transform:translateX(var(--arqon-scene-shift,0px)) scaleX(1)}
  22%{transform:translateX(calc(var(--arqon-scene-shift,0px) - 34px)) scaleX(1.012)}
  40%{transform:translateX(calc(var(--arqon-scene-shift,0px) - 22px)) scaleX(1.005)}
  60%{transform:translateX(calc(var(--arqon-scene-shift,0px) - 6px)) scaleX(.998)}
  82%{transform:translateX(calc(var(--arqon-scene-shift,0px) + 3px)) scaleX(1)}
  100%{transform:translateX(var(--arqon-scene-shift,0px)) scaleX(1)}
}
@keyframes arqonPeoplePullRight{
  0%{transform:translateX(var(--arqon-scene-shift,0px)) scaleX(1)}
  22%{transform:translateX(calc(var(--arqon-scene-shift,0px) + 34px)) scaleX(1.012)}
  40%{transform:translateX(calc(var(--arqon-scene-shift,0px) + 22px)) scaleX(1.005)}
  60%{transform:translateX(calc(var(--arqon-scene-shift,0px) + 6px)) scaleX(.998)}
  82%{transform:translateX(calc(var(--arqon-scene-shift,0px) - 3px)) scaleX(1)}
  100%{transform:translateX(var(--arqon-scene-shift,0px)) scaleX(1)}
}

/* Har bir zarbda arena butunicha juda kichik "silkinish" (parent
   darajasida, shuning uchun 3 qatlam ham BIR XIL burchakka aylanadi —
   chok joyi buzilmaydi) — tortishning jismoniy og'irligini his qildiradi. */
body.arqon-playing #pageOyin2.arqon-active .arqon-center.arqon-pull-now-left{
  animation:arqonArenaKickLeft 2.3s cubic-bezier(.12,.86,.18,1) !important;
}
body.arqon-playing #pageOyin2.arqon-active .arqon-center.arqon-pull-now-right{
  animation:arqonArenaKickRight 2.3s cubic-bezier(.12,.86,.18,1) !important;
}
@keyframes arqonArenaKickLeft{
  0%,100%{transform:rotate(0deg)}
  22%{transform:rotate(-.55deg)}
  60%{transform:rotate(.15deg)}
}
@keyframes arqonArenaKickRight{
  0%,100%{transform:rotate(0deg)}
  22%{transform:rotate(.55deg)}
  60%{transform:rotate(-.15deg)}
}

/* Zarb paytida markazda chang/kuch effektining tez lip-etib o'tishi —
   "tortib olindi" degan taassurotni kuchaytiradi. Ranglar va joylashuv
   arenaning o'zi ustiga, boshqa qatlamlarga tegmasdan qo'shiladi. */
#pageOyin2.arqon-active .arqon-center{ position:relative !important; }
#pageOyin2.arqon-active .arqon-center::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:70px; height:70px;
  transform:translate(-50%,-50%) scale(.6);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  opacity:0; pointer-events:none; z-index:7;
}
body.arqon-playing #pageOyin2.arqon-active .arqon-center.rope-hit::after{
  animation:arqonImpactFlash .5s ease-out !important;
}
@keyframes arqonImpactFlash{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.5)}
  30%{opacity:.9; transform:translate(-50%,-50%) scale(1.15)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.6)}
}

/* 3 ta to'g'ri javobda (ROPE_WIN_SCORE=3, js/oyin2-poyga.js): ODAMLAR
   g'olib tomonga TO'LIQ siljiydi. .arqon-scene-bg (chiziq+markaz) — har
   doim joyida qoladi. (Klass soni=4 — "not-playing" qoidadan (3) ATAYIN
   kuchliroq, "idle"dan ham (3) kuchliroq, shuning uchun ".arqon-center"
   shu yerda ham ataylab qo'shilgan.)
   MUHIM (vizual tekshiruvdan aniqlandi): ikkala qatlamga BIR XIL foiz
   berilsa, natija TESKARI ko'rinadi — g'olib jamoa chetga chiqib
   ko'rinmay qoladi, mag'lub jamoa esa markazga chiqib ko'zga tashlanadi
   (sabab: endi har bir qatlam konteynerning TO'LIQ enini egallaydi,
   eski yagona-rasm dizaynidan farqli). Shuning uchun g'olib va mag'lub
   jamoaga ATAYLAB TURLI siljish beriladi: g'olib deyarli joyida (kichik
   siljish, ko'rinishda qoladi), mag'lub esa katta siljish bilan chiziqdan
   o'tib g'olib tomonga "tortib olinadi". */
#pageOyin2.arqon-active .arqon-center.arqon-finished-left .arqon-scene-people-left{
  transform:translateX(0%) !important;
  animation:none !important;
  transition:transform 2.4s cubic-bezier(.16,.82,.2,1) !important;
}
#pageOyin2.arqon-active .arqon-center.arqon-finished-left .arqon-scene-people-right{
  transform:translateX(-40%) !important;
  animation:none !important;
  transition:transform 2.4s cubic-bezier(.16,.82,.2,1) !important;
}
#pageOyin2.arqon-active .arqon-center.arqon-finished-right .arqon-scene-people-right{
  transform:translateX(0%) !important;
  animation:none !important;
  transition:transform 2.4s cubic-bezier(.16,.82,.2,1) !important;
}
#pageOyin2.arqon-active .arqon-center.arqon-finished-right .arqon-scene-people-left{
  transform:translateX(40%) !important;
  animation:none !important;
  transition:transform 2.4s cubic-bezier(.16,.82,.2,1) !important;
}
/* G'olib jamoa endi mag'lubning ustidan bosib chiqishi mumkin (ikkalasi
   yaqinlashgani uchun) — shuning uchun g'olib qatlam har doim tepada
   chiqishi kerak, DOM tartibidan qat'iy nazar. */
#pageOyin2.arqon-active .arqon-center.arqon-finished-left .arqon-scene-people-left,
#pageOyin2.arqon-active .arqon-center.arqon-finished-right .arqon-scene-people-right{
  z-index:6 !important;
}

@media(max-width:700px){
  body.arqon-playing #pageOyin2.arqon-active .arqon-scene-bg,
  body.arqon-playing #pageOyin2.arqon-active .arqon-scene-people{animation-duration:2.4s !important}
  #pageOyin2.arqon-active .arqon-center.arqon-finished-left .arqon-scene-people-left{transform:translateX(0%) !important}
  #pageOyin2.arqon-active .arqon-center.arqon-finished-left .arqon-scene-people-right{transform:translateX(-36%) !important}
  #pageOyin2.arqon-active .arqon-center.arqon-finished-right .arqon-scene-people-right{transform:translateX(0%) !important}
  #pageOyin2.arqon-active .arqon-center.arqon-finished-right .arqon-scene-people-left{transform:translateX(36%) !important}
}