/* ============================================================================
   WHEN THE FIRE FADES - LANDING PAGE
   Page-specific layout that sits inside the shared .stage (see fire-theme.css).
   Shared chrome (nav, eyebrow, themed dialog shell, buttons) lives in
   fire-theme.css; this file owns only what is unique to the landing page:
   the hero wordmark, the firelit action panel, and the join form fields.
   ========================================================================== */

/* ============================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; z-index: 4;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--sp-4) var(--sp-5) clamp(var(--sp-5), 6vh, var(--sp-8));
  gap: clamp(var(--sp-3), 2.4vh, var(--sp-5));
}
.hero-head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-wordmark);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-transform: uppercase;
  padding-left: var(--tracking-display);
  color: #f6ecda;
  /* lit from the fire below - warm rim + glow that flickers with --fire-intensity */
  background: linear-gradient(180deg, #fff6e2 0%, #ffd98a 40%, #ff9a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.6))
          drop-shadow(0 0 calc(26px * var(--fire-intensity)) rgba(255,150,55,0.45));
}
.wordmark .ln { display: block; }
.wordmark .ln.mid { color: var(--c-gold); }

/* ---- The firelit card that holds the actions ------------------------- */
.panel {
  width: 100%;
  max-width: 420px;
  background:
    linear-gradient(180deg, rgba(40,36,26,0.78), rgba(20,20,15,0.86));
  border: 1px solid var(--c-bark-line);
  border-top-color: rgba(255,180,90,0.18);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(2px);
  display: flex; flex-direction: column; gap: var(--sp-4);
}

.identity {
  text-align: center;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding-bottom: var(--sp-2);
}
.identity .label {
  font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-ash-faint);
}
.identity .nick {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.3rem; color: var(--c-ash);
  display: inline-flex; align-items: center; gap: var(--sp-2); justify-content: center;
}
.identity .nick .spark { width:6px; height:6px; border-radius:50%; background: var(--c-gold); box-shadow: var(--glow-soft); }

.actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.actions form { margin: 0; }

/* Create is now a single primary action - public/private moved into the lobby as a leader-only
   setting - so the form just holds the button. */
.create-form { display: flex; flex-direction: column; gap: var(--sp-4); }

.panel-foot {
  text-align: center; font-size: var(--fs-xs); color: var(--c-ash-faint);
  letter-spacing: 0.04em;
}
.panel-foot a { color: var(--c-ash-dim); }
.panel-foot a:hover { color: var(--c-gold); }

/* signed-out variant copy */
.signedout-copy { font-size: var(--fs-sm); color: var(--c-ash-dim); text-align:center; margin: 0 0 var(--sp-1); text-wrap: balance; }
.two-up { display: flex; gap: var(--sp-3); }
.two-up .btn { flex: 1; font-size: 0.95rem; padding: var(--sp-3) var(--sp-4); }
.or-divider {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-ash-faint);
  margin: var(--sp-1) 0;
}
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-smoke); }

/* ============================================================================
   JOIN FORM FIELDS - the landing dialog's code input.
   The dialog shell (dialog.join, .join-card, .join-actions) and the shared text
   field (.name-input) both live in fire-theme.css; this owns only the code field.
   ========================================================================== */
.code-input {
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--c-core);
  background: #0c0d09;
  border: 1px solid var(--c-smoke);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-3);
  caret-color: var(--c-ember);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.code-input::placeholder { color: var(--c-ash-faint); }
.code-input:focus {
  outline: none;
  border-color: rgba(255,150,55,0.6);
  box-shadow: var(--glow-soft);
}
.join-hint { font-size: var(--fs-xs); color: var(--c-ash-faint); margin: var(--sp-3) 0 var(--sp-5); letter-spacing: 0.06em; }

/* ============================================================================
   RESPONSIVE (landing)
   ========================================================================== */
@media (max-width: 640px) {
  .nav { padding: var(--sp-3) var(--sp-4); }
  .brand span.full { display: none; }
  /* The lone decorative flame is dropped on phones (it floated awkwardly at the
     bottom and ate scarce vertical space); the gating lives in fire-theme.css so
     every page sheds it at once. The wordmark's warm glow still breathes via
     --fire-intensity, and the hero now centres its content in the reclaimed room. */
  .hero { gap: var(--sp-5); padding: var(--sp-5); justify-content: center; }
  .panel { padding: var(--sp-5) var(--sp-4); }
}