/* =====================================================================
   Brand system — homepage (brand7)

   Composition
   -----------
   No hairline "rule" dividers anywhere on this page — separation comes
   from real card surfaces (background + border + shadow), not lines.
   1. Press Start network wordmark owns the first beat (plain text, no card).
   2. MC Earth Server card: mark + intro, two labeled copy rows (IP,
      Version), three real icon buttons (Guide / Map / Commands).
   3. "More worlds coming" card — a second, distinct surface.
   4. Colophon on the same left/right edges as everything above it.

   Tokens from brand.css only.
   ===================================================================== */

body.home {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-content: start;
}

/* Earth-from-orbit backdrop: the network plays on a night sky, so a real
   starfield (not a flat void) is the one atmospheric touch that's true to
   the theme rather than decoration for its own sake. Fixed positioning
   means the stars hold still as the page scrolls, like looking out a
   window instead of a wallpaper. */
body.home .sky {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(1px 1px at 28% 9%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1.5px 1.5px at 42% 26%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1px 1px at 58% 7%, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 22%, rgba(255, 255, 255, 0.8), transparent 100%),
    radial-gradient(1px 1px at 85% 12%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 94% 32%, rgba(255, 255, 255, 0.65), transparent 100%),
    radial-gradient(1px 1px at 6% 38%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1px 1px at 20% 48%, rgba(255, 255, 255, 0.35), transparent 100%),
    radial-gradient(1px 1px at 65% 42%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 90% 52%, rgba(255, 255, 255, 0.3), transparent 100%),
    radial-gradient(ellipse 80% 60% at 80% 0%, var(--sky-glow), transparent 55%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--bg) 100%);
  background-repeat: no-repeat;
}

/* Distant Earth, glimpsed from orbit — fills the wide-viewport void with the
   one visual that's actually true to "Nations on a full-scale map of Earth"
   instead of arbitrary decoration. Desktop only: on narrow viewports there's
   no void to fill and it would just compete with the card. */
body.home .sky::after {
  content: "";
  position: absolute;
  top: -8%;
  right: -10%;
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  background-image: url("/assets/earth-globe-bg.png");
  background-size: cover;
  background-position: 50% 45%;
  border-radius: 50%;
  opacity: 0.16;
  filter: saturate(0.75) brightness(0.9);
  -webkit-mask-image: radial-gradient(circle at 55% 45%, rgba(0, 0, 0, 1) 52%, rgba(0, 0, 0, 0) 76%);
  mask-image: radial-gradient(circle at 55% 45%, rgba(0, 0, 0, 1) 52%, rgba(0, 0, 0, 0) 76%);
}

@media (max-width: 900px) {
  body.home .sky::after { display: none; }
}

.frame {
  position: relative;
  z-index: var(--z-content);
  /* Padding gutters (not width-minus) so left/right insets stay equal —
     `100% - gutter*2` + margin:auto drifted ~5–10px off-center on phones. */
  width: 100%;
  max-width: calc(var(--w-directory) + var(--gutter) * 2);
  margin-inline: auto;
  padding: var(--sp-16) var(--gutter) var(--sp-12);
  display: grid;
  gap: var(--sp-10);
}

/* First-paint reveal — a quick staggered rise so the page arrives instead
   of just appearing. Uses the shared `rise` keyframe from brand.css. */
.identity,
.world,
.soon,
.colophon {
  animation: rise var(--dur-slow) var(--ease) both;
}

.world { animation-delay: 0.08s; }
.soon { animation-delay: 0.16s; }
.colophon { animation-delay: 0.24s; }

/* ---- Identity ---------------------------------------------------------
   Deliberately NOT a card. The network wordmark is the brand; it reads
   as plain text sitting on the page, never a decorated product tile. */
.identity {
  display: grid;
}

.brand {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-network);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ink-bright);
  text-shadow: 0 0 1.75rem rgba(var(--p-sky-rgb), 0.28);
}

.brand a {
  color: inherit;
  text-decoration: none;
}

.brand a:hover {
  color: var(--accent);
}

main#main {
  display: grid;
  gap: var(--sp-5);
}

/* ---- MC Earth Server card ----------------------------------------------
   A real bordered surface (not a border-top line) separates this from
   the wordmark above and the "coming soon" card below. */
.world {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border: var(--border);
  border-radius: var(--radius-block);
  background: var(--directory-card);
  box-shadow: var(--shadow-1);
}

.world {
  --orb: clamp(3.75rem, 8vw, 6rem);
}

/* Viewfinder corners — all four, so the selected-slot motif stays symmetric
   (two opposite corners alone read as a missing pair on phones). */
.world__corner {
  position: absolute;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--line-accent);
  pointer-events: none;
}

.world__corner--tl {
  top: -2px;
  left: -2px;
  border-right: 0;
  border-bottom: 0;
}

.world__corner--tr {
  top: -2px;
  right: -2px;
  border-left: 0;
  border-bottom: 0;
}

.world__corner--bl {
  bottom: -2px;
  left: -2px;
  border-right: 0;
  border-top: 0;
}

.world__corner--br {
  bottom: -2px;
  right: -2px;
  border-left: 0;
  border-top: 0;
}

.world__top {
  display: grid;
  grid-template-columns: var(--orb) minmax(0, 1fr);
  column-gap: var(--sp-5);
  align-items: center;
}

/* The Earth render is the single richest asset on this page — give it real
   size and a slow, breathing float instead of burying it as a list glyph. */
.world__mark {
  width: var(--orb);
  height: var(--orb);
  display: block;
  object-fit: cover;
  border: 0;
  -webkit-mask-image: var(--mask-orb);
  mask-image: var(--mask-orb);
  filter: var(--glow-globe);
  animation: globe-float 6s var(--ease) infinite;
}

@keyframes globe-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5%); }
}

@media (prefers-reduced-motion: reduce) {
  .world__mark {
    animation: none;
  }
}

.world__intro {
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
  overflow: hidden; /* status chip must never paint past the card edge */
}

.world__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  min-width: 0;
  max-width: 100%;
}

.world__name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-server-title);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--ink-bright);
  white-space: normal;
}

.world__status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  max-width: 100%;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  flex: 0 1 auto;
  min-width: 0;
}

/* Player count pill — always "n/max" from /api/players (e.g. 0/20). */
.online {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.15rem var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  color: var(--ink-bright);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.world__line {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 36rem;
}

/* ---- Address book: two clearly labeled rows, each independently
   copyable. No mystery prefixes — "IP" and "Version" say what they are. */
.addr {
  display: grid;
  gap: var(--sp-3);
}

.addr__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  background: var(--directory-address);
  border: var(--border);
}

.addr__label {
  flex: 0 0 auto;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.addr__value {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-join);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.addr__row--version .addr__value {
  color: var(--ink-bright);
}

.addr__copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent);
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.addr__copy .copy-ip__icon {
  width: var(--icon);
  height: var(--icon);
}

.addr__copy:hover {
  background: var(--accent-wash);
  color: var(--ink-bright);
  transform: none;
}

.addr__copy:active {
  transform: scale(0.94);
}

.addr__copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.addr__copy.is-copied {
  color: var(--ok);
  background: var(--ok-wash);
}

.addr__copy.is-copy-failed {
  color: var(--danger-ink);
  background: rgba(var(--p-red-rgb), 0.12);
}

/* ---- Three real buttons: Guide / Map / Commands. Bordered, filled,
   icon-topped — unmistakably clickable, generous tap targets. */
.world__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

/* Each button gets its own tint from the Minecraft chat palette so the
   three actions are tellable apart at a glance, not just by label text. */
.navbtn {
  --nav-rgb: var(--p-sky-rgb);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 5rem;
  padding: var(--sp-3) var(--sp-2);
  border: 1px solid rgba(var(--nav-rgb), 0.28);
  border-radius: var(--radius);
  background: rgba(var(--nav-rgb), 0.07);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.navbtn .icon {
  width: 1.65rem;
  height: 1.65rem;
  color: rgba(var(--nav-rgb), 1);
  transition: transform var(--dur-fast) var(--ease);
}

.navbtn--guide { --nav-rgb: var(--p-green-rgb); }
.navbtn--map { --nav-rgb: var(--p-aqua-rgb); }
.navbtn--nations { --nav-rgb: var(--p-gold-rgb); }
.navbtn--citizens { --nav-rgb: var(--p-emerald-rgb); }
.navbtn--commands { --nav-rgb: var(--p-sky-rgb); }

.navbtn:hover,
.navbtn:focus-visible {
  background: rgba(var(--nav-rgb), 0.16);
  border-color: rgba(var(--nav-rgb), 0.65);
  color: var(--ink-bright);
}

.navbtn:hover .icon,
.navbtn:focus-visible .icon {
  transform: scale(1.08);
}

.navbtn:active {
  transform: translateY(1px);
}

/* ---- More worlds coming — a second, distinct card. Exciting, not sad:
   gold "coming soon" pill + real copy, same square brand geometry. */
.soon {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border: var(--border-accent);
  border-radius: var(--radius-block);
  background: var(--accent-wash);
}

.soon__head {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
}

.soon__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  margin: 0;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-pill);
  background: rgba(var(--p-gold-rgb), 0.14);
  color: var(--warn-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.soon__badge .icon {
  color: var(--warn-ink);
}

.soon__line {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* Mystery slots — unopened-chest teaser instead of a bare sentence. Pure
   decoration (aria-hidden), so it never claims a real server exists yet. */
.soon__slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

.soon__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  aspect-ratio: 1;
  border: 1px dashed var(--warn-line);
  border-radius: var(--radius);
  background: rgba(var(--p-gold-rgb), 0.06);
  color: var(--warn-ink);
  animation: chest-glow 2.8s var(--ease) infinite;
}

.soon__slot-icon {
  width: clamp(1.75rem, 6vw, 2.5rem);
  height: clamp(1.75rem, 6vw, 2.5rem);
  color: var(--warn-ink);
  opacity: 0.9;
}

.soon__slot-tag {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 2vw, 0.9rem);
  letter-spacing: var(--tracking-caps);
}

.soon__slot:nth-child(2) { animation-delay: 0.4s; }
.soon__slot:nth-child(3) { animation-delay: 0.8s; }

/* Real, actionable CTA — trades "mystery filler" for a genuine invite:
   community requests actually shape what gets built next. */
.soon__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-pill);
  background: rgba(var(--p-gold-rgb), 0.1);
  color: var(--warn-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.soon__cta .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.soon__cta:hover,
.soon__cta:focus-visible {
  background: rgba(var(--p-gold-rgb), 0.2);
  border-color: var(--warn-ink);
  transform: translateY(-1px);
}

.soon__cta:active {
  transform: translateY(1px);
}

@keyframes chest-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ---- Colophon ---------------------------------------------------------
   Spacing-only separation — no border-top rule. */
.colophon {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-xs);
}

.colophon p {
  margin: 0;
  white-space: nowrap;
}

.colophon a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.colophon a:hover {
  color: var(--accent);
}

body.home .site-footer {
  display: none;
}

/* ---- Responsive --------------------------------------------------------
   Address rows split into a clear stack on phones: label, value, then a
   full-width Copy — one left edge, equal card padding, no mixed centering. */
@media (max-width: 560px) {
  .frame {
    padding: var(--sp-10) var(--gutter) var(--sp-8);
    gap: var(--sp-8);
  }

  /* Network wordmark centers over the same column as the cards below. */
  .identity {
    text-align: center;
  }

  .brand {
    text-align: center;
  }

  main#main {
    gap: var(--sp-4);
  }

  .world {
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-4);
  }

  .world {
    --orb: clamp(3.25rem, 16vw, 4rem);
  }

  .world__top {
    column-gap: var(--sp-4);
  }

  .world__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .world__name {
    white-space: normal;
  }

  .addr__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--sp-3);
  }

  .addr__value {
    font-size: 0.95rem;
    /* Prefer <wbr> soft breaks; never orphan a single letter via anywhere. */
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: normal;
    text-overflow: clip;
    line-height: 1.35;
  }

  .soon {
    padding: var(--sp-4);
  }

  .colophon {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--sp-2);
  }

  .colophon p {
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .navbtn {
    font-size: 0.78rem;
    padding: var(--sp-2) var(--sp-1);
  }
}