/* MegaBrain background layout fix — v20260817-fix11
   Ekran: selected image fills the entire single-player exercise card.
   Yaponcha: selected image belongs to the OUTER exercise card only;
   the circular .ustun-game-wrap keeps its own original background.
*/

/* ================= EKRAN YAKKA ISHTIROKCHI ================= */
body.game-on #pageEkran #ekranGameArea.active.mb-card-bg-active{
  background-image:
    linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)),
    var(--mb-card-bg-image) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;
  border-radius:24px !important;
  overflow:hidden !important;
}

/* The inner number surface must not create white strips over the selected image. */
body.game-on #pageEkran #ekranGameArea.active.mb-card-bg-active #ekranNumberArena{
  background:transparent !important;
  box-shadow:none !important;
  border-color:rgba(255,255,255,.35) !important;
}

/* Keep the answer area inside the same background card. FIX48: this used to
   also fill #ekranAnswerSection itself with a translucent white layer —
   since that section spans the FULL width of the card, it rendered as a
   long horizontal white/transparent line/band across the card, right above
   the "Javob?" input. The input and ✓ TEKSHIR button already carry their
   own solid/near-solid backgrounds (see .answer-input / .btn-check in
   style.css), so no extra layer is needed here — the section is left
   transparent and the selected background image now shows through with no
   seam (same approach already used for Xitoycha/Xisobcha, style.css
   v20260817-fix12). */
body.game-on #pageEkran #ekranGameArea.active.mb-card-bg-active #ekranAnswerSection{
  background:transparent !important;
}

/* ================= YAPONCHA ================= */
/* The selected image is on the large outer game card. */
body.game-on #pageYaponcha #ustunGameArea.active.mb-card-bg-active{
  background-image:
    linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)),
    var(--mb-card-bg-image) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;
  overflow:hidden !important;
}

/* Never replace the circular exercise surface background. */
body.game-on #pageYaponcha #ustunGameArea.active.mb-card-bg-active .ustun-game-wrap{
  background-image:none !important;
  background-color:#fff !important;
}

/* Intro circle remains untouched too. */
#pageYaponcha .mode-intro-card .ek-hero::before{
  background-image:none !important;
}

@media (max-width:700px){
  body.game-on #pageEkran #ekranGameArea.active.mb-card-bg-active,
  body.game-on #pageYaponcha #ustunGameArea.active.mb-card-bg-active{
    border-radius:18px !important;
  }
}