/* MegaBrain — YAPONCHA CIRCLE SHELL FINAL
   v20260817-circle08
   Maqsad: boshlash sahifasidagi markaziy doira va o'yin paytidagi doira
   bir xil vizual shell ichida qoladi. Header o'zgarmaydi.
*/

#pageYaponcha .mode-intro-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:center !important;
}

/* Boshlash sahifasi: logo + BOSHLASH aynan markazdagi doira ichida. */
#pageYaponcha .mode-intro-card .ek-hero{
  position:relative !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;
  max-width:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:transparent !important;
}

#pageYaponcha .mode-intro-card .ek-hero::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:min(620px,72vw,72dvh) !important;
  height:min(620px,72vw,72dvh) !important;
  transform:translate(-50%,-54%) !important;
  border-radius:50% !important;
  border:1px solid rgba(109,74,255,.14) !important;
  box-shadow:
    0 0 0 18px rgba(255,255,255,.68),
    0 0 0 20px rgba(109,74,255,.06),
    0 0 0 54px rgba(109,74,255,.025) !important;
  z-index:0 !important;
  pointer-events:none !important;
}

#pageYaponcha .mode-intro-card .ek-hero-mid{
  position:relative !important;
  z-index:3 !important;
  width:min(760px,92%) !important;
  max-width:760px !important;
  transform:translateY(-3.5vh) !important;
}

#pageYaponcha .mode-intro-card .ek-hero-decor{
  z-index:1 !important;
}

/* Intro card ichidagi boshqa boshqaruvlar markaziy kontentni siqmasin. */
#pageYaponcha .mode-intro-card > #ustunSettings,
#pageYaponcha .mode-intro-card > .ek-hero-settings-corner,
#pageYaponcha .mode-intro-card > #yaponchaPillWrap,
#pageYaponcha .mode-intro-card > #yaponchaPPCorner{
  z-index:10 !important;
}

/* O'yin sahifasi: tashqi shell intro kartochkasi bilan bir xil to'liq maydon.
   Ichidagi doira esa markazda va biroz yuqoriroqda turadi. */
body.game-on #pageYaponcha .game-page-wrap{
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
}

body.game-on #pageYaponcha #ustunGameArea.active{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:24px !important;
  border:1px solid rgba(226,232,240,.95) !important;
  background:linear-gradient(145deg,#fff 0%,#fbfdff 52%,#f3f7ff 100%) !important;
  box-shadow:0 16px 38px rgba(15,23,42,.08),inset 0 0 0 1px rgba(255,255,255,.96) !important;
  overflow:hidden !important;
}

body.game-on #pageYaponcha #ustunGameArea.active > .ustun-outer{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-54%) !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  z-index:20 !important;
}

body.game-on #pageYaponcha #ustunGameArea.active .ustun-game-wrap{
  position:relative !important;
  margin:0 !important;
  transform:none !important;
  width:min(560px,72vw,72dvh) !important;
  height:min(560px,72vw,72dvh) !important;
  max-width:none !important;
  max-height:none !important;
  border-radius:50% !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* Misol, javob va ustunlar doira ichidan chiqmasin. */
body.game-on #pageYaponcha #ustunGameArea.active .ustun-viewport,
body.game-on #pageYaponcha #ustunGameArea.active .ustun-q-display{
  border-radius:50% !important;
  overflow:hidden !important;
}

/* Qadamlar doiraning tepasida, lekin tashqi shell ichida. */
body.game-on #pageYaponcha #ustunGameArea.active > .q-dots{
  position:absolute !important;
  top:18px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(700px,calc(100% - 32px)) !important;
  margin:0 !important;
  z-index:30 !important;
}

/* Javob bo'limi doiraning pastki tashqi qismiga chiqib ketmasin. */
body.game-on #pageYaponcha #ustunGameArea.active > .answer-section{
  position:absolute !important;
  left:50% !important;
  top:calc(50% + min(280px,34vw,34dvh)) !important;
  transform:translateX(-50%) !important;
  width:min(460px,calc(100% - 32px)) !important;
  margin:0 !important;
  z-index:35 !important;
}

/* Yaponcha: intro/logo+BOSHLASH dumaloq shaklining foni hech qachon o'zgarmaydi.
   Tanlangan fon faqat misol chiqadigan dumaloq .ustun-game-wrap ichida ishlaydi. */
body.game-on #pageYaponcha #ustunGameArea.active .ustun-game-wrap{
  background-image:
    radial-gradient(circle at 50% 44%,rgba(255,255,255,.80),rgba(250,247,255,.62)),
    var(--mb-card-bg-image) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

@media(max-width:700px){
  #pageYaponcha .mode-intro-card{
    border-radius:18px !important;
  }
  #pageYaponcha .mode-intro-card .ek-hero::before{
    width:min(86vw,72dvh) !important;
    height:min(86vw,72dvh) !important;
    transform:translate(-50%,-52%) !important;
  }
  #pageYaponcha .mode-intro-card .ek-hero-mid{
    transform:translateY(-2vh) !important;
  }
  body.game-on #pageYaponcha #ustunGameArea.active{
    border-radius:18px !important;
  }
  body.game-on #pageYaponcha #ustunGameArea.active .ustun-game-wrap{
    width:min(88vw,72dvh) !important;
    height:min(88vw,72dvh) !important;
  }
  body.game-on #pageYaponcha #ustunGameArea.active > .q-dots{
    top:10px !important;
  }
  body.game-on #pageYaponcha #ustunGameArea.active > .answer-section{
    top:calc(50% + min(44vw,38dvh)) !important;
  }
}