/* Apex homepage: Claim Map layout. Tokens from brand.css only. */

*, *::before, *::after { box-sizing: border-box; }

/* Full-bleed stage: kill brand.css `scrollbar-gutter: stable` on this page.
   Reserved gutter reads as a black side bar when overflow is hidden. */
html {
  color-scheme: dark;
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  scrollbar-gutter: auto;
}

body.home-claim {
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  position: relative;
  display: flex;
  flex-direction: column;
}

body.home-claim a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent);
  color: var(--accent-ink);
}
.skip-link:focus { left: var(--sp-2); top: var(--sp-2); }

.world {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur-enter-bg) var(--ease);
}
body.home-claim.is-bg-in .world {
  opacity: 1;
}
.world__globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.world__globe.is-dragging { cursor: grabbing; }
.world__veil {
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}

/* UI sits invisible until the sky has started to settle, then rises with Earth. */
.site-header--overlay,
.fold {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--dur-enter) var(--ease),
    transform var(--dur-enter) var(--ease);
}
body.home-claim.is-ui-in .site-header--overlay,
body.home-claim.is-ui-in .fold {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .world,
  .site-header--overlay,
  .fold {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.fold {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  /* Match .site-header horizontal inset (--inset-*) so IP card aligns with Players. */
  padding: 0 var(--inset-right) calc(var(--gutter) + env(safe-area-inset-bottom, 0px)) var(--inset-left);
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  gap: var(--fold-stack-gap);
  pointer-events: none;
  /* Tighter stack now that fact plates are gone (home-only). */
  --fold-stack-gap: var(--sp-2);
  /* Shared column gutter: version/IP and Discord/Map/Get started stay aligned. */
  --fold-card-gap: var(--sp-2);
}
.fold__title,
.fold .tags,
.fold .copy-row,
.fold .server,
.fold .links {
  pointer-events: auto;
}

.fold__title {
  margin: 0 0 -0.12em;
  font-family: var(--font-display);
  font-size: clamp(0.88rem, 3.4vw, 1.12rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  /* Press Start 2P sits high in the em square; slightly tighter LH so
     title↔tags optically matches the fold stack gap. */
  line-height: 1.2;
  color: var(--ink-bright);
  text-shadow: none;
  max-width: none;
}

/* Home tag badges: content-hugging capsules. Wrap to the IP card width.
   Not controls — no hover. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: 100%;
  background: transparent;
}
.tags .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--icon-label-gap);
  margin: 0;
  padding: var(--sp-1) var(--chip-pad-x);
  min-height: 0;
  min-width: 0;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  border: 0;
  background: color-mix(in srgb, var(--tag-color, var(--ink-bright)) 22%, var(--control-fill));
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--tag-color, var(--ink-bright)) 30%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-bright);
  white-space: nowrap;
}
.tags .tag > span {
  margin-right: calc(var(--tracking-caps) * -1);
}
.tags .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: 0 0 auto;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--tag-color, var(--ink-bright));
}
.tag--earth { --tag-color: var(--tag-earth); }
.tag--nations { --tag-color: var(--tag-nations); }
.tag--anarchy { --tag-color: var(--tag-anarchy); }
.tag--fair { --tag-color: var(--tag-fair); }
.tag--java { --tag-color: var(--tag-java); }
.tag--vanilla { --tag-color: var(--tag-vanilla); }
.tag--ver { --tag-color: var(--tag-ver); }

/* Copy cards: version (1/3, Discord-wide) + IP (2/3, Map+Get started). */
.copy-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--fold-card-gap);
  align-items: stretch;
}
.copy-row .server {
  min-width: 0;
  box-sizing: border-box;
}

.server {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--sp-3);
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: calc(var(--btn-h) + 2 * var(--sp-1));
  margin: 0;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease);
}
.server:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.server:active { transform: translateY(1px); }

.server__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.server__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.5;
}

.server__host {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.8125rem, 3.4vw, 1.0625rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-num);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.server__action {
  position: relative;
  align-self: center;
  width: var(--tap);
  height: var(--tap);
  min-width: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  background: var(--accent-ink-wash);
}
.server__icon {
  position: absolute;
  width: var(--icon);
  height: var(--icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.server__icon--clip { display: block; }
.server__icon--check { display: none; }
.server.is-copied .server__icon--clip { display: none; }
.server.is-copied .server__icon--check {
  display: block;
  animation: copy-pop var(--dur-pop) var(--ease);
}

.server--ver {
  grid-column: 1;
  column-gap: var(--sp-2);
  padding-left: var(--sp-2);
}
.server--ip {
  grid-column: 2 / -1;
}

/* Secondary CTA strip (Discord | Map | Get started): spaced tiles, no hairline panel. */
.links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--fold-card-gap);
  align-items: stretch;
  background: transparent;
  border-radius: var(--radius-card);
  overflow: visible;
}
.links a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--icon-label-gap);
  width: 100%;
  /* Match .server / tag denseness; still ≥ --tap. */
  min-height: var(--btn-h);
  margin: 0;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  border: 0;
  font-size: clamp(0.6875rem, 3vw, var(--fs-sm));
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-fast) var(--ease),
    filter var(--dur-fast) var(--ease);
}
/* Same stroke recipe as brand `.icon` / tags for Map + Get started.
   Discord CTA uses the filled Clyde mark (brand blue button). */
.links .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: 0 0 auto;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.links__discord .icon {
  fill: currentColor;
  stroke: none;
}
.links__discord {
  background: var(--discord);
  color: var(--ink-bright);
}
.links__map,
.links__how {
  background: var(--control-fill);
  color: var(--ink-bright);
}

.links a:hover {
  filter: var(--control-hover-filter);
}
.links a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.links a:active {
  transform: translateY(1px);
}

/* ~390px phones: keep IP card + 3-up links flush with header insets. */
@media (max-width: 420px) {
  .fold {
    gap: var(--fold-stack-gap);
    padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  }

  .fold__title {
    font-size: clamp(0.82rem, 3.3vw, 1rem);
  }

  .tags {
    gap: var(--sp-1);
  }

  .tags .tag {
    padding: var(--sp-1) var(--chip-pad-x);
    font-size: var(--fs-micro);
  }

  .server {
    padding: var(--sp-2);
    column-gap: var(--sp-2);
  }

  .links {
    gap: var(--fold-card-gap);
  }

  .links a {
    gap: var(--icon-label-gap);
    padding: 0 var(--sp-2);
    font-size: 0.6875rem;
    min-height: var(--btn-h);
  }

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

@media (min-width: 860px) {
  .fold {
    max-width: 640px;
    margin: 0;
    padding: 0 var(--inset-right) var(--gutter) var(--inset-left);
  }
  .fold__title {
    font-size: clamp(0.98rem, 1.35vw, 1.12rem);
    max-width: none;
    white-space: nowrap;
  }
  .fold__br {
    display: none;
  }
  .tags .tag {
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-micro);
    gap: var(--icon-label-gap);
  }
  .server {
    min-height: calc(var(--btn-h) + 2 * var(--sp-1));
    max-width: none;
  }
  .server__host {
    font-size: clamp(1rem, 1.3vw, 1.125rem);
  }
  .links a { font-size: 15px; min-height: var(--btn-h); }
}