/* GeoShrink front page ------------------------------------------------------
   Deliberately a SEPARATE stylesheet from style.css, which is 137KB of game
   chrome. The front page and the game change for completely different reasons
   — one on marketing copy, the other on gameplay — and keeping them in one
   file is how a headline tweak ends up regressing the HUD. Nothing in here is
   referenced by the game, and nothing in style.css is referenced by the front
   page except the theme variables below.

   Those variables live on .viz-root (not :root), which is why the landing
   markup sits INSIDE .viz-root in index.html — parented anywhere else, every
   var() here would silently resolve to nothing and the page would render as
   transparent boxes. Same trap engine/coach.js documents for its bubble. */

.landing {
  position: absolute;
  inset: 0;
  /* Above .home-screen (2), below the account/settings overlays (6) — the
     sign-in card has to open ON TOP of the front page, since that is where
     the player opens it from. */
  z-index: 5;
  background: var(--page-plane);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: none;
}
.landing.show { display: block; }
/* Play is one-way: the front page fades out and the game is already behind
   it, warm and booted. No second page load, no white flash. */
.landing.leaving { animation: landingOut 260ms ease forwards; pointer-events: none; }
@keyframes landingOut { to { opacity: 0; transform: scale(1.015); } }

.landing-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 40px) 64px;
  padding-top: max(clamp(20px, 4vw, 56px), env(safe-area-inset-top));
}

/* --- hero ---------------------------------------------------------------- */
/* Two columns on anything wide enough, stacked on a phone with the globe
   FIRST — the spinning globe is the whole pitch, so it should never be the
   thing a player has to scroll to find. */
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(20px, 4vw, 52px);
  min-height: min(72vh, 560px);
}
.landing-globe {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  margin: 0 auto;
  justify-self: center;
}
/* The glow is CSS, not SVG: it has to sit UNDER the globe and outside its
   circle, and a drop-shadow filter on the svg would also blur the graticule. */
.landing-globe::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
    color-mix(in srgb, var(--group-a) 40%, transparent) 0%,
    transparent 68%);
  filter: blur(18px);
}
.landing-globe svg { position: relative; width: 100%; height: 100%; display: block; overflow: visible; }
.landing-sphere { fill: #16283f; stroke: rgba(255, 255, 255, 0.20); stroke-width: 0.9; }
.landing-graticule { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.5; }
.landing-land { fill: var(--group-a); stroke: rgba(255, 255, 255, 0.20); stroke-width: 0.4; }
/* The one country lit up at a time — the literal thing the game asks you to
   find, so the hero demonstrates the verb instead of describing it. */
.landing-target { fill: var(--group-b); stroke: #fff; stroke-width: 0.6; transition: opacity 700ms ease; }
/* The hero performs the game's actual sentence. Reserved height, not
   display:none — the caption appearing must not nudge the globe. */
.landing-globe-caption {
  position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 14px; font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.landing-globe-caption.show { opacity: 1; }
.landing-globe-caption b { color: var(--text-primary); font-weight: 800; }

.landing-copy { min-width: 0; }
.landing-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--group-a);
  border: 1px solid color-mix(in srgb, var(--group-a) 40%, transparent);
  background: color-mix(in srgb, var(--group-a) 12%, transparent);
  border-radius: 999px; padding: 5px 12px; margin-bottom: 16px;
}
.landing-copy h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--text-primary);
}
.landing-copy h1 em { font-style: normal; color: var(--group-a); }
.landing-lede {
  margin: 0 0 26px;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 46ch;
}

/* --- calls to action ----------------------------------------------------- */
/* Play is the loud one and it works immediately — the game signs players in
   anonymously (engine/account.js), so there is nothing to gate. Sign-in sits
   beside it as an offer ("keep your progress"), never as a toll gate: asking
   for a registration before anyone has seen the game costs more players than
   the addresses are worth. */
.landing-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.landing-play {
  display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-size: 17px; font-weight: 800;
  padding: 15px 30px;
  border: 0; border-radius: 999px;
  background: var(--group-a); color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--group-a) 42%, transparent);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.landing-play:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--group-a) 52%, transparent); }
.landing-play:active { transform: translateY(0); }
.landing-play svg { flex: none; }
.landing-signin {
  font: inherit; font-size: 14.5px; font-weight: 700;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.landing-signin:hover { border-color: var(--group-a); color: var(--text-primary); }
.landing-reassure {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.landing-reassure b { color: var(--text-secondary); font-weight: 700; }

/* --- section scaffolding ------------------------------------------------- */
.landing-section { margin-top: clamp(48px, 7vw, 84px); }
.landing-section-head { margin-bottom: 22px; }
.landing-section-head h2 {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 800; letter-spacing: -0.015em;
  color: var(--text-primary);
}
.landing-section-head p { margin: 0; font-size: 14.5px; color: var(--text-muted); max-width: 60ch; }

/* --- mode cards ---------------------------------------------------------- */
.landing-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.landing-mode {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 20px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.landing-mode:hover { border-color: color-mix(in srgb, var(--group-a) 45%, var(--border)); transform: translateY(-2px); }
.landing-mode-icon {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--group-a) 14%, transparent);
  color: var(--group-a);
}
.landing-mode-icon svg { width: 21px; height: 21px; }
.landing-mode h3 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--text-primary); }
.landing-mode p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }

/* --- progression strip --------------------------------------------------- */
/* The companion is the retention hook, so it gets a panel rather than a
   bullet. The picture is engine/mascot.js's own previewMarkup() — generated
   markup, not the live widget, so the front page can never fight the Home
   screen over the single mascot node. */
.landing-keep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 30px);
}
.landing-keep .mascot-preview { width: 116px; height: 150px; flex: none; display: block; }
.landing-keep-text h2 { margin: 0 0 8px; font-size: clamp(19px, 2.4vw, 25px); font-weight: 800; color: var(--text-primary); }
.landing-keep-text p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); max-width: 54ch; }
.landing-facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.landing-facts li {
  font-size: 12.5px; font-weight: 700;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--group-a) 10%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
}

/* --- foot ---------------------------------------------------------------- */
.landing-foot {
  margin-top: clamp(40px, 6vw, 70px);
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 13px; color: var(--text-muted);
}
.landing-foot-play {
  font: inherit; font-size: 14px; font-weight: 800;
  padding: 11px 22px; border-radius: 999px; border: 0;
  background: var(--group-a); color: #fff; cursor: pointer;
}

/* --- narrow -------------------------------------------------------------- */
@media (max-width: 780px) {
  .landing-hero { grid-template-columns: 1fr; min-height: 0; gap: 24px; }
  /* Globe first on a phone: it is the advert. */
  .landing-globe { order: -1; max-width: min(300px, 68vw); }
  .landing-copy { text-align: center; }
  .landing-lede { margin-inline: auto; }
  .landing-cta { justify-content: center; }
  .landing-keep { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .landing-keep-text p { margin-inline: auto; }
  .landing-facts { justify-content: center; }
  .landing-foot { justify-content: center; text-align: center; }
}

/* The globe's rotation is driven from rAF in engine/landing.js and is stopped
   there under the same prefers-reduced-motion check the mascot uses; these
   are the CSS-side transitions that would otherwise still animate. */
@media (prefers-reduced-motion: reduce) {
  .landing-play, .landing-mode, .landing-target { transition: none; }
  .landing.leaving { animation: none; opacity: 0; }
}