/* While the gate resolves (and when either overlay takes over), hide
   all game root surfaces so nothing flashes through underneath. Body
   ships with `gate-pending`; boot-entry.js removes it only on the
   game-boot path, otherwise it's replaced by invite-waitlist-active /
   unsupported-browser-active. */
:where(body.gate-pending, body.invite-waitlist-active, body.unsupported-browser-active)
  :where(#splash-root, #screen-start, #screen-game, #screen-forge, #ember-canvas, #ambient-audio) {
  display: none !important;
}
body.invite-waitlist-active,
body.unsupported-browser-active { overflow: hidden; }
body.gate-pending { background: #050709; }

/* invite-gate.css — Waitlist overlay shown when /game/ has no invite
   code. Visual language matches the start-screen aquila / brass-gold
   palette so it doesn't feel like a stranger ⚙ utility screen. */

.invite-waitlist-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  padding: 16px;
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(ellipse at center, #0d131d 0%, #050709 100%);
  font-family: Inter, sans-serif;
  color: #ccc;
  /* iOS keyboard pushes the viewport up — let the card scroll into view
     rather than getting clipped behind the keyboard. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.invite-waitlist-card {
  width: 100%;
  max-width: 460px;
  /* margin-block: auto centers the card when there's headroom, but
     collapses to the padding when content is taller than the viewport
     (e.g. landscape phone). align-items: center would clip the top. */
  margin: auto;
  background: #0d131d;
  border: 1px solid #1a2a3a;
  border-top: 3px solid #b89040;
  border-radius: 4px;
  padding: 24px 22px 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
}

@media (min-width: 480px) {
  .invite-waitlist-card { padding: 32px 36px 30px; }
}

.waitlist-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.waitlist-eagle {
  font-size: 36px;
  color: #b89040;
  line-height: 1;
}

.waitlist-title {
  font-family: 'Anton', Inter, sans-serif;
  font-size: 24px;
  letter-spacing: 1.5px;
  color: #e0c878;
  text-transform: uppercase;
}

.waitlist-sub {
  font-size: 11px;
  color: #607080;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 2px;
}

.waitlist-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #b89040 20%, #b89040 80%, transparent);
  opacity: 0.4;
  margin: 18px 0 22px;
}

.waitlist-pitch {
  font-size: 13px;
  color: #b0b8c4;
  line-height: 1.55;
  margin: 0 0 18px;
}

.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.waitlist-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: #8090a0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.waitlist-label input {
  background: #0a0e18;
  color: #e0e8f0;
  border: 1px solid #2a3a4a;
  border-radius: 3px;
  padding: 11px 12px;
  /* 16px font on inputs prevents iOS Safari from auto-zooming the
     viewport when the field is focused. */
  font: 16px Inter, sans-serif;
  letter-spacing: 0.2px;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.12s, background 0.12s;
}
.waitlist-label input:focus {
  outline: none;
  border-color: #00d4ff;
  background: #0e1a28;
}

.waitlist-submit {
  margin-top: 6px;
  /* 44px minimum tap target for iOS HIG / Android accessibility. */
  min-height: 44px;
  background: linear-gradient(180deg, #c9a352 0%, #a07a30 100%);
  color: #0d131d;
  border: none;
  border-radius: 3px;
  padding: 12px 16px;
  font: 14px 'Anton', Inter, sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: filter 0.12s, transform 0.05s;
}
.waitlist-submit:hover:not(:disabled) {
  filter: brightness(1.1);
}
.waitlist-submit:active:not(:disabled) {
  transform: translateY(1px);
}
.waitlist-submit:disabled {
  filter: grayscale(0.5);
  cursor: wait;
}

.waitlist-msg {
  font-size: 12px;
  color: #ff9a8a;
  background: #2a0e10;
  border: 1px solid #6a1a20;
  border-radius: 3px;
  padding: 8px 12px;
}

.waitlist-fineprint {
  margin-top: 18px;
  font-size: 11px;
  color: #607080;
  font-style: italic;
  line-height: 1.5;
}

.waitlist-success-icon {
  font-size: 48px;
  color: #44cc44;
  text-align: center;
  margin-bottom: 8px;
}