/* The picture and form share the bottom edge of the campfire (1110/941).
   svh reserves space even while mobile browser toolbars are expanded. */
:root {
  --lobby-scene-end: max(calc(264px + env(safe-area-inset-top)), min(118vw, calc(100svh - 312px - env(safe-area-inset-bottom))));
  --lobby-art-offset: min(0px, calc(var(--lobby-scene-end) - 118vw));
}

/* Keep the approved portrait's outer characters visible on tall phones. */
#poster {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #14221e url(/poster/login-camp-p-v1.webp) center top / 100% auto no-repeat;
}

@media (max-aspect-ratio: 1/1) {
  #poster { background-position: center var(--lobby-art-offset); }
}

/* Match Start.css: landscape login controls occupy the right-hand column. */
@media (min-aspect-ratio: 1/1) and (min-width: 680px) {
  #poster {
    background-image: url(/poster/login-camp-l-v1.webp);
    background-position: 20% 65%;
    background-size: cover;
  }
}

/* Taller desktop windows need the whole composition, not a cover crop.
   Fade only its sky/ground edges into the full-screen night colors. */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) and (min-width: 680px) {
  #poster {
    background: linear-gradient(180deg, #142d38, #16313b 40%, #14221e);
  }
  #poster::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc((100% - 56.28vw) * .6);
    aspect-ratio: 1672 / 941;
    background: url(/poster/login-camp-l-v1.webp) center / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 88%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 88%, transparent);
  }
}