/* The two pages around joining the Discord server: the invitation (index.html, served at /join) and
   the result of the Discord verification (result.html, /result). They stand at the gateway of the
   board, with no site menu: a visitor here is on the way in. Loaded after site.css and portal.css.
   The class names of the pages this design replaced are kept beside the new ones, and result.html
   keeps every id and state class its script sets. */

.gate-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.gate-page .top { position: sticky; top: 0; justify-content: space-between; }
.gate-network { color: var(--ink-faint); font: 500 11px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; }

.gate { display: flex; flex: 1 0 auto; flex-direction: column; justify-content: center; width: 100%; padding-top: clamp(36px, 7vh, 84px); padding-bottom: clamp(40px, 8vh, 96px); }
.gate-hero { margin-bottom: 0; }
.gate-hero h1 { margin: 18px 0 20px; font-size: clamp(40px, 7vw, 104px); line-height: .94; }
.gate-hero h1 .accent { color: var(--accent); }
.gate-hero h1 .accent-red { color: var(--red); }
.gate-hero .tagline,
.gate-hero .message { max-width: 600px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; overflow-wrap: anywhere; }
.gate-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.gate-actions .button { min-height: 52px; padding: 0 26px; font-size: 16px; }
.gate-actions .button svg { flex: 0 0 auto; }

/* The line above the heading: a live dot and a short state. */
.gate-badge { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-dim); }
.gate-badge .dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.gate-badge.success { color: var(--green); }
.gate-badge.success .dot { background: var(--green); }
.gate-badge.error { color: var(--red); }
.gate-badge.error .dot { background: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .gate-badge .dot { animation: state-pulse 1.8s ease-in-out infinite; }
}

/* The invitation: three figures and three reasons, on hairlines under the heading. */
.gate .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; margin: clamp(34px, 6vh, 64px) 0 0; }
.gate .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); max-width: 1080px; margin-top: clamp(22px, 4vh, 44px); }
.feat { padding: 20px 0 0; border-top: 1px solid var(--line); color: var(--ink-dim); }
.feat svg { display: block; width: 22px; height: 22px; color: var(--accent); }
.feat-title { margin: 14px 0 6px; color: var(--ink); font: 600 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.feat-desc { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* The result: the member's Discord picture, or a mark for the outcome, above the heading. */
.gate-result .avatar { display: none; width: 88px; height: 88px; margin-bottom: 22px; border: 1px solid var(--line-strong); border-radius: 50%; outline: 1px solid var(--accent); outline-offset: 5px; object-fit: cover; }
.gate-result .icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 22px; border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(9, 12, 17, .7); }
.gate-result .icon:empty { display: none; }
.gate-result .icon.success { border-color: var(--accent); }
.gate-result .icon.error { border-color: #7d2c3d; }
.gate-result .btn { gap: 10px; }
.gate-result .btn.discord { background: #5865f2; color: #fff; }
.gate-result .btn.discord:hover,
.gate-result .btn.discord:focus-visible { background: #6f7bff; outline: none; }
.gate-result .btn.retry { border-color: var(--line-strong); background: rgba(6, 8, 11, .4); color: var(--ink); }
.gate-result .btn.retry:hover,
.gate-result .btn.retry:focus-visible { border-color: var(--ink); outline: none; }

.gate-foot { justify-content: flex-start; }

@media (max-width: 760px) {
  .gate-network { letter-spacing: .16em; }
  .gate { justify-content: flex-start; }
  .gate .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
  .gate .stats .metric strong { font-size: 22px; }
  .gate .features { grid-template-columns: 1fr; gap: 0; }
  .gate-actions .button { flex: 1 1 100%; justify-content: center; }
}