/* unsupported-browser.css — Hard-block overlay for visitors with a
   valid invite but the wrong browser (mobile, Safari, Firefox, Edge,
   etc.). Palette mirrors invite-gate.css so it doesn't feel like a
   stranger screen. */

.unsupported-browser-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;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ub-card {
  width: 100%;
  max-width: 460px;
  /* margin: auto centers vertically when there's headroom but collapses
     to the overlay padding when content exceeds viewport (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) {
  .ub-card { padding: 32px 36px 30px; }
}

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

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

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

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

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

.ub-headline {
  font-family: 'Anton', Inter, sans-serif;
  font-size: 20px;
  color: #e0e8f0;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 12px;
  line-height: 1.2;
}

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

.ub-pitch strong { color: #e0c878; }

.ub-chrome-link {
  color: #e0c878;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ub-chrome-link:hover { color: #f0d888; }
.ub-chrome-link:active { color: #c9a352; }

.ub-link-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ub-link-input {
  flex: 1 1 auto;
  min-width: 0;
  background: #0a0e18;
  color: #e0e8f0;
  border: 1px solid #2a3a4a;
  border-radius: 3px;
  padding: 10px 12px;
  /* 16px font on inputs prevents iOS Safari from auto-zooming on focus. */
  font: 16px Inter, sans-serif;
  letter-spacing: 0.2px;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
}
.ub-link-input:focus {
  outline: none;
  border-color: #00d4ff;
  background: #0e1a28;
}

.ub-copy-btn {
  flex: 0 0 auto;
  min-width: 72px;
  /* 44x44 minimum tap target for iOS HIG / Android accessibility. */
  min-height: 44px;
  padding: 0 16px;
  background: linear-gradient(180deg, #c9a352 0%, #a07a30 100%);
  color: #0d131d;
  border: none;
  border-radius: 3px;
  font: 14px 'Anton', Inter, sans-serif;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: filter 0.12s, transform 0.05s;
}
.ub-copy-btn:hover:not(:disabled) { filter: brightness(1.1); }
.ub-copy-btn:active:not(:disabled) { transform: translateY(1px); }

.ub-copy-msg {
  margin-top: 10px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 3px;
}
.ub-copy-msg[data-kind="ok"] {
  color: #9be09b;
  background: #0e2a14;
  border: 1px solid #1a5530;
}
.ub-copy-msg[data-kind="err"] {
  color: #ff9a8a;
  background: #2a0e10;
  border: 1px solid #6a1a20;
}

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

/* Stack the input + button on very narrow screens so the button
   doesn't squeeze the input below readable width. */
@media (max-width: 360px) {
  .ub-link-row { flex-direction: column; }
  .ub-copy-btn { width: 100%; }
}