/* The /link flow. One card, centred, in the stats-page palette.
   Deliberately plain: this page is a utility the bot sends people to, not a
   place to sell anything, so it gets no hero and no motion. */

.linkwrap {
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  padding-block: var(--s6);
}

.card {
  max-width: 560px;
  margin-inline: auto;
  background: var(--char);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ember);
  padding: var(--s5) var(--s4);
}

@media (min-width: 640px) {
  .card { padding: var(--s6) var(--s5); }
}

.card h1 {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  line-height: 1.1;
  margin: 0 0 var(--s3);
}

.card p { max-width: none; }
.card .lede { font-size: 1.0625rem; line-height: 1.6; color: var(--bone); }
.card p:last-child { margin-bottom: 0; }

/* Step marker. A number with a rule, not a pill, because this is a real
   sequence rather than decoration. */
.step {
  font-family: var(--mono, inherit);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 var(--s2);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--line);
  display: inline-block;
}

.step--done { color: var(--ember); border-bottom-color: var(--ember); }

.card--done { border-top-color: var(--ember); }
.card--stop { border-top-color: var(--line); }

.actions { margin-top: var(--s4); }
.actions .btn { width: 100%; justify-content: center; }

@media (min-width: 480px) {
  .actions .btn { width: auto; }
}

/* Brand colours on the two sign-in buttons, so it is obvious which service is
   about to open. */
.btn--discord { background: #5865F2; color: #fff; }
.btn--discord:hover { background: #6D78F5; }

.btn--steam { background: #1B2838; color: #fff; border: 1px solid #66C0F4; }
.btn--steam:hover { background: #2A475E; }

.unlink { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }

.card .note { margin-top: var(--s3); }