/* The approved garden keeps its characters around the centered menu area. */
body:not(.game-active):not(.battle-playing) .app{
 background-size:100% 100%;background-color:#83a9bd;
}
body:not(.game-active):not(.battle-playing) #modeScreen .mode-inner,
body.login-active .login-content{width:min(380px,70%)}
body.login-active .login-content{transform:none}
body.login-active .login-panel #accountSocialSignIn>*{min-width:0}
body:not(.game-active):not(.battle-playing) #setupScreen{width:min(380px,70%);max-height:60dvh;overflow:auto}
body:not(.game-active):not(.battle-playing) :is(#battleScreen,#multiplayerScreen,#spinScreen,#spinLobbyScreen)>.battle-panel{
 width:min(380px,70%);max-height:60dvh;margin:auto;overflow:auto;
}
body:not(.game-active):not(.battle-playing) #standardModes{max-height:60dvh;overflow:auto}
/* Start the menu artwork below the header so Pidgeot remains visible. */
body:not(.login-active):not(.game-active):not(.battle-playing) .screen-shell{
 background:url('../assets/backgrounds/home-garden.webp') center/100% 100% no-repeat!important;
}
body.login-active .login-panel #accountSocialSignIn .btn{padding:7px 3px;gap:3px;font-size:clamp(10px,3.2vw,13px)!important}
body.login-active .login-panel .social-logo{width:16px;height:16px}