/* Standalone login page (views/modals/loginPage.jsx).
   Reuses the app's #modal + .modal-content card styling from style.css, but
   swaps the fixed dark overlay for a scrollable page layered over a wizard-promo
   hero (same image the landing page uses), so /login is a proper styled page for
   direct navigation instead of a bare partial. */

body.login-standalone {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Full-bleed wizard hero, dimmed top→bottom so the login card stays readable. */
.login-hero-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(
      180deg,
      rgba(10, 14, 25, 0.42) 0%,
      rgba(10, 14, 25, 0.6) 55%,
      rgba(10, 14, 25, 0.82) 100%
    ),
    url("/promo/cwl_promo_wizard.png");
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
}

/* The reused #modal is normally a fixed full-screen dark overlay. On this page
   make it a transparent, scrollable column above the hero so the card can grow
   and the whole page scrolls on short screens. */
body.login-standalone #modal.login-standalone-modal {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent;
  justify-content: flex-start;
  padding: 0 16px 48px;
  animation: none;
}

body.login-standalone #modal > .modal-content {
  margin-top: clamp(24px, 8vh, 90px);
  width: 100%;
  max-width: 430px;
  max-height: none;
  overflow: visible;
  /* Opaque panel (fallback if the palette var is missing) so the card reads as a
     solid surface over the wizard, with a gold edge + strong shadow to lift it. */
  background-color: var(--cloud-bg, #1a1c24);
  border: 1px solid rgba(245, 196, 94, 0.35);
  border-radius: 12px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.6);
  animation: none;
}

/* Wide screens: dock the login panel to one side and vertically center it, so
   the wizard promo stays visible alongside it instead of hidden behind it. */
@media (min-width: 900px) {
  body.login-standalone #modal.login-standalone-modal {
    justify-content: center; /* vertical (column main axis) */
    align-items: flex-end; /* push the panel to the right */
    padding: 40px max(6vw, 40px) 40px 16px;
  }

  body.login-standalone #modal > .modal-content {
    margin-top: 0;
  }

  /* Nudge the wizard toward the left so it sits clear of the right-docked panel. */
  .login-hero-bg {
    background-position: 62% center, 62% center;
  }
}

/* "or jump right in" — onboarding / full-game actions shown only on the
   standalone page (passed via the `standalone` prop to LoginContent). */
.login-new-player {
  margin-top: 20px;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 12px;
  color: var(--text);
  opacity: 0.6;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

.login-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  text-decoration: none;
}