/* MegaBrain — initial/start screen card
   v20260817-introcard04
   Logo + start menu + settings on Ekran/Xitoycha/Yaponcha are contained
   in the same soft card family as the exercise area. Page background stays untouched.
*/

#pageEkran .mode-intro-card,
#pageXisobcha .mode-intro-card,
#pageYaponcha .mode-intro-card{
  position:relative;
  width:100%;
  max-width:1180px;
  margin:clamp(10px,2.2vw,22px) auto clamp(12px,2.5vw,26px);
  padding:clamp(14px,2vw,26px);
  border:1px solid rgba(148,163,184,.24);
  border-radius:30px;
  background:linear-gradient(145deg,#ffffff 0%,#fbfdff 52%,#f3f7ff 100%);
  box-shadow:0 16px 38px rgba(15,23,42,.08),inset 0 0 0 1px rgba(255,255,255,.96);
  overflow:hidden;
  box-sizing:border-box;
}

/* The decorative header must remain inside the card, not become page background. */
#pageEkran .mode-intro-card .ek-header-bg,
#pageXisobcha .mode-intro-card .ek-header-bg,
#pageYaponcha .mode-intro-card .ek-header-bg{
  display:none;
}

#pageEkran .mode-intro-card .ek-hero,
#pageXisobcha .mode-intro-card .ek-hero,
#pageYaponcha .mode-intro-card .ek-hero{
  border-radius:24px;
  margin:0;
  background:transparent !important;
  box-shadow:none !important;
}

/* Keep logo/start area visually in the same card. */
#pageEkran .mode-intro-card .ek-hero-mid,
#pageXisobcha .mode-intro-card .ek-hero-mid,
#pageYaponcha .mode-intro-card .ek-hero-mid{
  position:relative;
  z-index:2;
}

/* Settings and start menu are part of the same visual card. */
#pageEkran .mode-intro-card .main-menu,
#pageXisobcha .mode-intro-card .main-menu,
#pageYaponcha .mode-intro-card .main-menu{
  position:relative;
  z-index:3;
  margin-left:0;
  margin-right:0;
}

#pageEkran .mode-intro-card .start-screen,
#pageXisobcha .mode-intro-card .start-screen,
#pageYaponcha .mode-intro-card .start-screen{
  position:relative;
  z-index:4;
  margin:clamp(10px,2vw,20px) 0 0 !important;
  padding:clamp(14px,2vw,24px) 10px 4px;
  border-top:1px solid rgba(148,163,184,.16);
}

/* Selected background belongs to this card only. The page itself never gets the image. */
#pageEkran.mb-custom-bg .mode-intro-card,
#pageXisobcha.mb-custom-bg .mode-intro-card,
#pageYaponcha.mb-custom-bg .mode-intro-card{
  background:
    linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),
    var(--mb-bg-image) center / cover no-repeat !important;
}

#pageEkran.mb-custom-bg .mode-intro-card .ek-hero,
#pageXisobcha.mb-custom-bg .mode-intro-card .ek-hero,
#pageYaponcha.mb-custom-bg .mode-intro-card .ek-hero{
  background:transparent !important;
}

@media(max-width:700px){
  #pageEkran .mode-intro-card,
  #pageXisobcha .mode-intro-card,
  #pageYaponcha .mode-intro-card{
    margin:8px 8px 14px;
    width:calc(100% - 16px);
    padding:10px;
    border-radius:22px;
  }
  #pageEkran .mode-intro-card .start-screen,
  #pageXisobcha .mode-intro-card .start-screen,
  #pageYaponcha .mode-intro-card .start-screen{
    padding-top:12px;
  }
}


/* MegaBrain — fullscreen intro/game shell v20260817-fullscreen01
   Header/nav remains untouched. The content starts below it with a clear gap.
   Ekran + Yaponcha: intro card and exercise area fit the available viewport
   without page-level vertical scrolling. */

@media (min-width: 701px){
  #pageEkran,
  #pageYaponcha{
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
    overflow:hidden;
    box-sizing:border-box;
    padding-top:58px;
  }

  #pageEkran .game-page-wrap,
  #pageYaponcha .game-page-wrap{
    height:calc(100dvh - 58px);
    min-height:0;
    max-height:calc(100dvh - 58px);
    box-sizing:border-box;
    padding:14px 24px 14px;
    overflow:hidden;
  }

  /* Intro/settings card occupies the available area while preserving a gap
     below the fixed header. */
  #pageEkran .mode-intro-card,
  #pageYaponcha .mode-intro-card{
    height:100%;
    min-height:0;
    max-height:100%;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    overflow:hidden;
  }

  /* Ekran: hero + settings + start screen stay inside the same full card. */
  #pageEkran .mode-intro-card .ek-hero{
    flex:0 0 auto;
    min-height:130px;
  }
  #pageEkran .mode-intro-card .quick-settings-drop{
    max-height:min(48dvh,430px);
    overflow:auto;
  }
  #pageEkran .mode-intro-card .start-screen{
    flex:1 1 auto;
    min-height:110px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    overflow:hidden;
  }

  /* Yaponcha has a larger settings grid; compact it to the viewport rather
     than pushing the whole document downward. */
  #pageYaponcha .mode-intro-card{
    padding:14px 18px;
    gap:10px;
  }
  #pageYaponcha .mode-intro-card #ustunSettings{
    flex:0 1 auto;
    min-height:0;
    margin:0;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  #pageYaponcha .mode-intro-card #ustunSettings .menu-card{
    min-height:0;
  }
  #pageYaponcha .mode-intro-card #ustunSettings .menu-card-header{
    padding:9px 12px 7px;
  }
  #pageYaponcha .mode-intro-card #ustunSettings .menu-card-body{
    padding:9px 12px 11px;
  }
  #pageYaponcha .mode-intro-card .ek-hero{
    flex:0 0 auto;
    min-height:120px;
    order:2;
  }
  #pageYaponcha .mode-intro-card .ek-hero-settings-corner{
    order:3;
  }
  #pageYaponcha .mode-intro-card .start-screen{
    flex:1 1 auto;
    min-height:72px;
    margin:0 !important;
    padding:8px 10px 2px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
}

@media (max-width:700px){
  #pageEkran,
  #pageYaponcha{
    min-height:calc(100dvh - 58px);
    height:calc(100dvh - 58px);
    max-height:calc(100dvh - 58px);
    overflow:hidden;
    box-sizing:border-box;
    padding-top:58px;
  }
  #pageEkran .game-page-wrap,
  #pageYaponcha .game-page-wrap{
    height:calc(100dvh - 58px);
    min-height:0;
    max-height:calc(100dvh - 58px);
    overflow:hidden;
    box-sizing:border-box;
    padding:8px 8px 8px;
  }
  #pageEkran .mode-intro-card,
  #pageYaponcha .mode-intro-card{
    height:100%;
    min-height:0;
    max-height:100%;
    margin:0;
    width:100%;
    overflow:hidden;
    padding:8px;
    border-radius:20px;
  }
  #pageEkran .mode-intro-card .ek-hero,
  #pageYaponcha .mode-intro-card .ek-hero{
    min-height:92px;
  }
  #pageYaponcha .mode-intro-card #ustunSettings{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    margin:0;
  }
  #pageYaponcha .mode-intro-card #ustunSettings .menu-card-header{
    padding:7px 9px 6px;
  }
  #pageYaponcha .mode-intro-card #ustunSettings .menu-card-body{
    padding:7px 9px 8px;
  }
  #pageEkran .mode-intro-card .start-screen,
  #pageYaponcha .mode-intro-card .start-screen{
    margin:4px 0 0 !important;
    padding:6px !important;
    min-height:54px;
  }
}

/* During actual exercises the game card itself fills the same viewport
   under the fixed header; no document-level vertical scroll is introduced. */
@media (min-width:701px){
  body.game-on #pageEkran,
  body.game-on #pageYaponcha{
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
    overflow:hidden;
    padding-top:58px;
  }
  body.game-on #pageEkran .game-page-wrap,
  body.game-on #pageYaponcha .game-page-wrap{
    height:calc(100dvh - 58px);
    max-height:calc(100dvh - 58px);
    min-height:0;
    overflow:hidden;
    padding:8px 16px 8px;
  }
}