/* MegaBrain — Full-width, no-scroll card layout
   v20260817-fix03
   Header/navbar is intentionally untouched.
   Background images are applied ONLY inside the mode card / exercise card.
*/

:root{--mb-header-h:58px;--mb-card-gap:10px;}

/* The three requested modes use the whole viewport below the existing header. */
#pageEkran.active,
#pageXisobcha.active,
#pageYaponcha.active{
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  padding-top:var(--mb-header-h) !important;
}

#pageEkran .game-page-wrap,
#pageXisobcha .game-page-wrap,
#pageYaponcha .game-page-wrap{
  width:100% !important;
  max-width:none !important;
  height:calc(100dvh - var(--mb-header-h)) !important;
  min-height:0 !important;
  max-height:calc(100dvh - var(--mb-header-h)) !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:var(--mb-card-gap) 0 var(--mb-card-gap) !important;
  overflow:hidden !important;
}

/* Intro/start card: full horizontal width, with a small gap below header. */
#pageEkran .mode-intro-card,
#pageXisobcha .mode-intro-card,
#pageYaponcha .mode-intro-card{
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  margin:0 !important;
  border-radius:24px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

/* Keep every decorative/background layer inside the card. */
#pageEkran .mode-intro-card .ek-hero,
#pageXisobcha .mode-intro-card .ek-hero,
#pageYaponcha .mode-intro-card .ek-hero{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}

/* Exercise view: the active example area becomes the same full-width card. */
body.game-on #pageEkran .game-page-wrap,
body.game-on #pageXisobcha .game-page-wrap,
body.game-on #pageYaponcha .game-page-wrap{
  height:calc(100dvh - var(--mb-header-h)) !important;
  min-height:0 !important;
  max-height:calc(100dvh - var(--mb-header-h)) !important;
  padding:var(--mb-card-gap) 0 var(--mb-card-gap) !important;
  overflow:hidden !important;
}

body.game-on #pageEkran .game-area.active,
body.game-on #pageXisobcha .game-area.active,
body.game-on #pageYaponcha .game-area.active,
body.game-on #pageEkran #ekranMultiArea.active{
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
  border-radius:24px !important;
  border:1px solid rgba(226,232,240,.95) !important;
  background:#fff !important;
  overflow:hidden !important;
}

/* The game content itself must fit inside the card, not create page scroll. */
body.game-on #pageEkran .game-area.active,
body.game-on #pageYaponcha .game-area.active{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}
body.game-on #pageXisobcha .game-area.active{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}

/* Selected background belongs ONLY to these cards. The page/body never gets it. */
#pageEkran .mode-intro-card.mb-card-bg-active,
#pageXisobcha .mode-intro-card.mb-card-bg-active,
#pageYaponcha .mode-intro-card.mb-card-bg-active,
#pageEkran .game-area.mb-card-bg-active,
#pageXisobcha .game-area.mb-card-bg-active,
#pageYaponcha .game-area.mb-card-bg-active{
  background-image:
    linear-gradient(rgba(255,255,255,.76),rgba(255,255,255,.76)),
    var(--mb-card-bg-image) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* When the game starts the intro card is hidden by existing JS; the exercise
   card keeps the same selected image. */
body.game-on #pageEkran .mode-intro-card,
body.game-on #pageXisobcha .mode-intro-card,
body.game-on #pageYaponcha .mode-intro-card{
  max-height:0 !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
}

/* No document-level scrolling while any of the three requested modes is open. */
body:has(#pageEkran.active),
body:has(#pageXisobcha.active),
body:has(#pageYaponcha.active){
  overflow:hidden !important;
}

@media(max-width:700px){
  #pageEkran.active,
  #pageXisobcha.active,
  #pageYaponcha.active{padding-top:var(--mb-header-h) !important;}
  #pageEkran .game-page-wrap,
  #pageXisobcha .game-page-wrap,
  #pageYaponcha .game-page-wrap,
  body.game-on #pageEkran .game-page-wrap,
  body.game-on #pageXisobcha .game-page-wrap,
  body.game-on #pageYaponcha .game-page-wrap{
    padding:6px 0 6px !important;
    height:calc(100dvh - var(--mb-header-h)) !important;
    max-height:calc(100dvh - var(--mb-header-h)) !important;
  }
  #pageEkran .mode-intro-card,
  #pageXisobcha .mode-intro-card,
  #pageYaponcha .mode-intro-card,
  body.game-on #pageEkran .game-area.active,
  body.game-on #pageXisobcha .game-area.active,
  body.game-on #pageYaponcha .game-area.active,
  body.game-on #pageEkran #ekranMultiArea.active{
    border-radius:18px !important;
  }
}

@media(max-height:520px) and (orientation:landscape){
  #pageEkran .game-page-wrap,
  #pageXisobcha .game-page-wrap,
  #pageYaponcha .game-page-wrap,
  body.game-on #pageEkran .game-page-wrap,
  body.game-on #pageXisobcha .game-page-wrap,
  body.game-on #pageYaponcha .game-page-wrap{
    padding-top:4px !important;
    padding-bottom:4px !important;
  }
}

/* v20260817-fix03 — selected background is rendered INSIDE the actual card.
   It never touches body/.page. The same card shell is used for Yaponcha intro
   and the active exercise view. */
#pageEkran .mode-intro-card.mb-card-bg-active,
#pageXisobcha .mode-intro-card.mb-card-bg-active,
#pageYaponcha .mode-intro-card.mb-card-bg-active,
#pageEkran .game-area.mb-card-bg-active,
#pageXisobcha .game-area.mb-card-bg-active,
#pageYaponcha .game-area.mb-card-bg-active{
  background-image:
    linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),
    var(--mb-card-bg-image) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* Yaponcha: the circular exercise surface also inherits the selected image,
   while remaining inside the full-width outer card. */
#pageYaponcha .game-area.mb-card-bg-active .ustun-game-wrap{
  background-image:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.82),rgba(250,247,255,.72)),
    var(--mb-card-bg-image) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* Ekran/Xitoycha: the main exercise surfaces use the same card-only image. */
#pageEkran .game-area.mb-card-bg-active .number-arena,
#pageXisobcha .game-area.mb-card-bg-active .xitoy-wrap{
  background-image:
    linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),
    var(--mb-card-bg-image) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}