/* Four Color Comic v40.31.47 — login artwork sizing + auth usability */

/*
  v40.31.40 used `contain`, which preserved every pixel but made the 16:9 artwork
  look undersized/letterboxed on many desktop browser windows. `cover` preserves
  the artwork's aspect ratio while filling the login viewport; it never stretches.
*/
#authGate.auth-gate{
  background-color:#010306!important;
  background-size:100% 100%, cover!important;
  background-position:center center, center center!important;
  background-repeat:no-repeat, no-repeat!important;
}

/* Keep the login form visually dominant and readable over the full-bleed art. */
#authGate .auth-shell-v4011,
#authGate .fcc-login-official-brand-v403136{position:relative!important;z-index:3!important}
#authGate .auth-card-v4011{max-width:520px!important;margin-inline:auto!important}
#authGate #signInBtn:disabled{opacity:.72!important;cursor:wait!important}

@media(min-width:1500px){
  #authGate.auth-gate{
    background-size:100% 100%, cover!important;
    background-position:center center, center center!important;
  }
}

/* Tall desktop windows can otherwise crop too much from the left/right composition.
   Use width-driven proportional sizing there, while still avoiding distortion. */
@media(max-aspect-ratio:4/3) and (min-width:761px){
  #authGate.auth-gate{
    background-size:100% 100%, auto 100%!important;
    background-position:center center, center center!important;
  }
}

@media(max-width:760px){
  #authGate.auth-gate{
    background-size:100% 100%, cover!important;
    background-position:center center, center top!important;
  }
}