/* The join page. The website's look (cloud/marketing-site): near-black
   with a cool tint, blocks with a stepped pixel edge, the pixel font for
   titles and labels, the system font for reading. Nothing loads from
   another site. */

@font-face {
  font-family: 'Pixel Code';
  src: url('PixelCode-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --sky: #07060b;
  --obsidian: #0f0d17;
  --slot: #1b1728;
  --line: #2b2540;
  --violet: #a66bff;
  --violet-deep: #6b3fc0;
  --green: #48c4a4;
  --green-deep: #1f8c70;
  --gold: #f0e488;
  --text: #efeaf9;
  --dim: #aaa4ba;
  --pixel: 'Pixel Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, Roboto, sans-serif;
  --u: 2px;
  --ease-osmo: cubic-bezier(0.625, 0.05, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--sky); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(80% 50% at 50% -10%, rgb(166 107 255 / 0.16), transparent 70%),
    var(--sky);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
}
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.page { width: min(100% - 2rem, 40rem); margin: 0 auto; padding: 2rem 0 3rem; display: grid; gap: 1.25rem; }
.mark { justify-self: center; width: 9.5rem; opacity: 0.9; margin-bottom: 0.5rem; }

/* A block with stepped pixel corners. */
.px {
  background: var(--obsidian);
  box-shadow:
    calc(var(--u) * -1) 0 0 0 var(--line),
    var(--u) 0 0 0 var(--line),
    0 calc(var(--u) * -1) 0 0 var(--line),
    0 var(--u) 0 0 var(--line);
  margin: var(--u);
}

.eyebrow { font-family: var(--pixel); font-size: 0.8125rem; color: var(--gold); }

/* --- The server -------------------------------------------------------- */
.hero { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem; }
.hero__pic { width: 6rem; height: 6rem; flex: none; image-rendering: pixelated; }
.hero__words { min-width: 0; display: grid; gap: 0.3rem; }
h1 { font-family: var(--pixel); font-weight: 400; font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1.15; overflow-wrap: anywhere; }
.hero__message { color: var(--dim); white-space: pre-line; }
@media (max-width: 30rem) {
  .hero { flex-direction: column; text-align: center; }
}

/* --- Which Minecraft --------------------------------------------------- */
.picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.picker button {
  font-family: var(--pixel); font-size: 0.875rem;
  padding: 0.5em 0.9em; border: 0; cursor: pointer;
  background: var(--slot); color: var(--dim);
}
.picker button[aria-pressed='true'] { background: var(--green); color: #04231a; }

/* --- One card per way in ----------------------------------------------- */
.cards { display: grid; gap: 1.25rem; }
.card { padding: 1.5rem; display: grid; gap: 1rem; }
.card[hidden] { display: none; }
.card__head { display: flex; align-items: center; gap: 0.85rem; }
.card__icon { width: 2.5rem; height: 2.5rem; flex: none; image-rendering: pixelated; }
.card h2 { font-family: var(--pixel); font-weight: 400; font-size: 1.15rem; line-height: 1.2; }
.card__for { color: var(--dim); font-size: 0.875rem; }
.card__say { color: var(--dim); }
.card__say b { color: var(--text); font-weight: 600; }

.steps { counter-reset: step; display: grid; gap: 0.75rem; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.75rem; align-items: start; }
.steps > li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  font-family: var(--pixel); font-size: 0.8125rem;
  background: var(--slot); color: var(--text);
}
.steps > li > div { display: grid; gap: 0.5rem; padding-top: 0.1rem; }
.tip { font-size: 0.875rem; color: var(--dim); }
.tip b { color: var(--gold); font-weight: 400; font-family: var(--pixel); }

/* What to type, with a copy button. */
.copy {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.4rem 0.4rem 0.4rem 0.85rem;
  background: var(--slot);
}
.copy__label { font-family: var(--pixel); font-size: 0.75rem; color: var(--dim); min-width: 4.5rem; }
.copy code { font-family: var(--pixel); font-size: 0.95rem; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.copy button {
  font-family: var(--pixel); font-size: 0.75rem;
  padding: 0.45em 0.75em; border: 0; cursor: pointer;
  background: var(--obsidian); color: var(--text);
}
.copy button[data-done] { color: var(--green); }

/* --- Buttons, as on the website ---------------------------------------- */
.btn {
  --btn: var(--violet);
  --btn-deep: var(--violet-deep);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0.5em 1.2em;
  font-family: var(--pixel); font-size: 0.95rem; line-height: 1.2;
  color: #150a2b; background: var(--btn); border: 0; cursor: pointer;
  text-decoration: none; text-align: center;
  box-shadow:
    calc(var(--u) * -1) 0 0 0 var(--btn),
    var(--u) 0 0 0 var(--btn),
    0 calc(var(--u) * -1) 0 0 var(--btn),
    0 var(--u) 0 0 var(--btn-deep),
    calc(var(--u) * -1) var(--u) 0 0 var(--btn-deep),
    var(--u) var(--u) 0 0 var(--btn-deep),
    0 calc(var(--u) * 2) 0 0 var(--btn-deep);
  margin: var(--u) var(--u) calc(var(--u) * 2);
  transition: transform 0.12s var(--ease-osmo), filter 0.2s var(--ease-osmo);
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(var(--u)); }
.btn--green { --btn: var(--green); --btn-deep: var(--green-deep); color: #04231a; }
.btn--quiet { --btn: var(--slot); --btn-deep: #0c0a13; color: var(--text); }
.btn--small { min-height: 2.25rem; font-size: 0.8125rem; padding: 0.3em 0.9em; }
.btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* The teal block: joining through EnderPanel. */
.card--green {
  --edge: color-mix(in srgb, var(--green), #000 30%);
  background: var(--green); color: #04231a;
  box-shadow:
    calc(var(--u) * -2) 0 0 0 var(--edge),
    calc(var(--u) * 2) 0 0 0 var(--edge),
    0 calc(var(--u) * -2) 0 0 var(--edge),
    0 calc(var(--u) * 2) 0 0 var(--edge);
  margin: calc(var(--u) * 2);
}
.card--green .card__say, .card--green .card__for { color: #0d4634; }
.card--green .btn { --btn: #04231a; --btn-deep: #000; color: var(--green); }
.card--green .btn--quiet { --btn: #0d4634; --btn-deep: #04231a; color: #d6f5ec; }

/* --- The plug ----------------------------------------------------------- */
.plug { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; margin-top: 0.75rem; }
.plug img { width: 3rem; flex: none; image-rendering: pixelated; }
.plug > div { flex: 1; min-width: 0; }
.plug__title { font-family: var(--pixel); font-size: 0.95rem; }
.plug__say { color: var(--dim); font-size: 0.875rem; }
@media (max-width: 30rem) {
  .plug { flex-wrap: wrap; }
  .plug .btn { width: 100%; }
}

.note { min-height: 1.4em; text-align: center; color: var(--dim); font-size: 0.875rem; }
.note.good { color: var(--green); }

/* --- Arriving ----------------------------------------------------------- */
[data-in] { opacity: 0; transform: translateY(0.75rem); animation: load-in 0.8s var(--ease-osmo) forwards; }
[data-in='1'] { animation-delay: 0.08s; }
[data-in='2'] { animation-delay: 0.16s; }
[data-in='3'] { animation-delay: 0.24s; }
@keyframes load-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-in] { animation-duration: 0.01ms; animation-delay: 0s; }
  .btn { transition: none; }
}

/* On a phone, the label sits above what to type, so the address has the
   whole width. */
@media (max-width: 30rem) {
  .copy { flex-wrap: wrap; row-gap: 0.15rem; }
  .copy__label { flex-basis: 100%; min-width: 0; }
  .steps > li { grid-template-columns: 1.5rem 1fr; gap: 0.6rem; }
  .card { padding: 1.15rem; }
}