/* Pre-game landing: fills the viewport while the user picks a tab
 * (log in / register) and waits for the gateway POST + server Welcome.
 * Once `AppStage::Ready` fires, the top-level dispatcher unmounts this
 * page entirely and swaps in the game canvas. Card-internal widgets
 * (buttons, inputs, error/info rows) reuse the shared `.btn` and
 * `.auth-*` primitives. */

.landing-page {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-panel);
  color: var(--color-text);
  z-index: var(--z-modal);
}

/* Hero slot. Reserved for a future image; today it's an empty flexer
 * that pushes the card down toward the lower third of the screen. */
.landing-hero {
  flex: 1 1 auto;
}

.landing-card {
  align-self: center;
  min-width: 320px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10vh;
}

/* Form-state variant: once the user picks Log in / Register, the card
 * gains the Tron outline + dark fill so the inputs read as a distinct
 * contained form. Two-button state stays borderless. */
.landing-card--form {
  background: rgba(8, 14, 24, 0.72);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  box-shadow:
    0 0 14px rgba(122, 170, 255, 0.22),
    inset 0 0 18px rgba(122, 170, 255, 0.06);
}

.landing-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* Full-viewport spinner shown on stored-session resume and during
 * the Welcome handshake after a fresh submit. No user affordances —
 * short-lived state. */
.loading-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-panel);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  z-index: var(--z-modal);
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 10px;
  vertical-align: -2px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}