/* The Lost Realm game page — samanvis.com/the-lost-realm-mobile-desktop-game/
 *
 * Enqueued by functions.php for page-templates/template-lost-realm.php, with
 * 'samanvi-fonts' as its dependency.
 *
 * NO @import HERE ON PURPOSE. The theme already loads Space Grotesk and Inter
 * globally under the 'samanvi-fonts' handle, so importing them again would
 * fetch the same families a second time and push out the LCP on the one page
 * whose whole job is ranking. Depend on the handle instead.
 *
 * Every selector is `.lr-*`-prefixed and every custom property is `--lr-`,
 * matching the `--svc-*` convention in services.css and `--lv-*` in
 * livonsa.css: this page sits inside the GeneratePress frame with the site's
 * own :root tokens in scope, and an unprefixed --gold here would leak into,
 * or be overwritten by, them.
 *
 * PALETTE: the game's own tokens, copied from
 * C:\Projects\Sam-game\lost-realm\css\tokens.css — not re-picked by eye. Deep
 * indigo ground, twilight violet, and the #E3B23C gold that is the interface
 * accent on every screen of the game. Someone arriving here from the game
 * should recognise where they are.
 *
 * LIGHT PAGE, DARK BANDS. The site header and footer are light and the rest of
 * samanvis.com is light, so the page is light — but the artwork is night-time
 * and dramatic, and it dies on white. The hero and two bands are dark so the
 * paintings sit in their own light, the way they do in the game.
 */

.lr-page {
  /* Game tokens */
  --lr-ground-deep: #0c0d18;
  --lr-ground: #16142a;
  --lr-surface: #241c3d;
  --lr-violet: #514163;
  --lr-haze: #726294;
  --lr-rose: #c47586;
  --lr-gold: #e3b23c;
  --lr-gold-bright: #f5d27a;
  --lr-on-dark: #f3e6cf;
  --lr-on-dark-soft: #c9bfd6;

  /* Site tokens, for the light half of the page */
  --lr-ink: #091628;
  --lr-ink-soft: #3d6882;
  --lr-line: #d8e3e8;
  --lr-card: #ffffff;
  --lr-paper: #f7fafb;
  --lr-blue: #1f4e8a;

  font-family: Inter, -apple-system, "Segoe UI", sans-serif;
  color: var(--lr-ink);
  line-height: 1.6;
}

.lr-page h1,
.lr-page h2,
.lr-page h3 {
  font-family: "Space Grotesk", Inter, sans-serif;
  line-height: 1.15;
  margin: 0 0 0.6em;
}

.lr-page p {
  margin: 0 0 1rem;
}

/* ---- Hero ---------------------------------------------------------------- */

.lr-hero {
  position: relative;
  background:
    radial-gradient(120% 78% at 50% 96%,
      rgba(196, 117, 134, 0.22) 0%,
      rgba(114, 98, 148, 0.14) 42%,
      rgba(0, 0, 0, 0) 68%),
    linear-gradient(180deg, #0c0d18 0%, #191634 34%, #2c2148 58%, #4a3560 100%);
  color: var(--lr-on-dark);
  padding: 3rem 1.25rem 2.5rem;
  text-align: center;
  overflow: hidden;
}

.lr-hero-inner {
  max-width: 44rem;
  margin: 0 auto;
}

.lr-kicker {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lr-gold);
  margin: 0 0 0.75rem;
}

.lr-hero h1 {
  font-size: clamp(1.9rem, 6vw, 3rem);
  color: #ffffff;
}

.lr-lede {
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  color: var(--lr-on-dark-soft);
  max-width: 36rem;
  margin: 0 auto 1.75rem;
}

.lr-hero-art {
  margin: 2rem auto 0;
  max-width: 15rem;
}

.lr-hero-art img {
  display: block;
  width: 100%;
  height: auto;
  /* She is a cut-out with real alpha; a glow seats her on the band instead of
     leaving her floating on flat colour. */
  filter: drop-shadow(0 18px 34px rgba(12, 13, 24, 0.65));
}

/* ---- Play button --------------------------------------------------------- */

/* Over-specified on purpose: `.lr-page a.lr-cta`, not `.lr-cta`.
 *
 * A site-wide link rule outside this file colours links in the theme blue and
 * out-specifies a lone class. On the LIVONSA page that produced an invisible
 * label — blue text on a blue pill — which only reappeared on hover, because
 * `:hover` adds a class-level unit and tipped the cascade back. Two classes
 * plus the element wins in every state. Do not "simplify" this selector.
 */
.lr-page a.lr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  background: var(--lr-gold);
  color: #1a1204;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(12, 13, 24, 0.3), 0 10px 26px rgba(227, 178, 60, 0.28);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Gold lifts to the game's own --color-gold-bright on hover. Near-black on
   #F5D27A is well past AA; the dark ink is deliberate — white on gold is not
   readable and is the usual mistake here. */
.lr-page a.lr-cta:hover,
.lr-page a.lr-cta:focus-visible {
  background: var(--lr-gold-bright);
  color: #1a1204;
  transform: translateY(-1px);
}

.lr-cta-note {
  font-size: 0.9rem;
  color: var(--lr-on-dark-soft);
  margin: 0.85rem 0 0;
}

.lr-page .lr-cta-note a {
  color: var(--lr-gold-bright);
}

/* ---- Badge strip --------------------------------------------------------- */

.lr-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

.lr-badges li {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--lr-on-dark);
  border: 1px solid rgba(243, 230, 207, 0.28);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  background: rgba(12, 13, 24, 0.35);
}

/* ---- Bands --------------------------------------------------------------- */

.lr-band {
  padding: 3rem 1.25rem;
  max-width: 66rem;
  margin: 0 auto;
}

.lr-band > h2 {
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  text-align: center;
  color: var(--lr-blue);
}

.lr-band-lede {
  text-align: center;
  color: var(--lr-ink-soft);
  max-width: 34rem;
  margin: 0 auto 2rem;
}

.lr-band--plain {
  background: var(--lr-paper);
  max-width: none;
}

.lr-band--plain > h2,
.lr-band--plain > .lr-band-lede,
.lr-band--plain > .lr-cards {
  max-width: 66rem;
  margin-left: auto;
  margin-right: auto;
}

/* Dark bands break the max-width so the colour reaches the page edges, then
   re-centre their own contents. */
.lr-band--dark {
  background:
    linear-gradient(180deg, var(--lr-ground-deep) 0%, var(--lr-ground) 55%, #1d1836 100%);
  color: var(--lr-on-dark);
  max-width: none;
}

.lr-band--dark > h2 {
  color: #ffffff;
}

.lr-band--dark > .lr-band-lede {
  color: var(--lr-on-dark-soft);
}

.lr-band--dark > .lr-stages,
.lr-band--dark > h2,
.lr-band--dark > .lr-band-lede,
.lr-band--dark > p {
  max-width: 66rem;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Cards --------------------------------------------------------------- */

.lr-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.lr-card {
  background: var(--lr-card);
  border: 1px solid var(--lr-line);
  border-radius: 14px;
  padding: 1.35rem;
}

.lr-card h3 {
  font-size: 1.1rem;
  color: var(--lr-blue);
}

.lr-card p {
  margin: 0;
  color: var(--lr-ink-soft);
}

.lr-card--quiet {
  background: #ffffff;
  border-left: 3px solid var(--lr-gold);
}

/* ---- Stage list ---------------------------------------------------------- */

.lr-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}

.lr-stage figure {
  margin: 0 0 1rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(243, 230, 207, 0.16);
  box-shadow: 0 14px 34px rgba(12, 13, 24, 0.5);
}

.lr-stage img {
  display: block;
  width: 100%;
  height: auto;
}

.lr-stage-num {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lr-gold);
  margin: 0 0 0.3rem;
}

.lr-stage-text h3 {
  font-size: 1.3rem;
  color: #ffffff;
}

.lr-stage-mech {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--lr-rose);
  margin: 0 0 0.6rem;
}

.lr-stage-text p:last-child {
  color: var(--lr-on-dark-soft);
  margin: 0;
}

/* ---- Map band ------------------------------------------------------------ */

.lr-map-band {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

.lr-map-text h2 {
  text-align: left;
  color: var(--lr-blue);
}

.lr-map-art {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--lr-line);
  box-shadow: 0 14px 34px rgba(9, 22, 40, 0.18);
}

.lr-map-art img {
  display: block;
  width: 100%;
  height: auto;
}

.lr-list {
  margin: 1.25rem 0 0;
  padding: 0 0 0 1.1rem;
  color: var(--lr-ink-soft);
}

.lr-list li {
  margin-bottom: 0.6rem;
}

.lr-list strong {
  color: var(--lr-ink);
}

/* ---- FAQ ----------------------------------------------------------------- */

.lr-faq {
  margin: 0;
  max-width: 46rem;
  margin-inline: auto;
}

.lr-faq dt {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--lr-ink);
  margin-top: 1.5rem;
}

.lr-faq dd {
  margin: 0.4rem 0 0;
  color: var(--lr-ink-soft);
}

/* ---- Closing ------------------------------------------------------------- */

.lr-close {
  text-align: center;
}

/* ---- Wider viewports ----------------------------------------------------- */

@media (min-width: 46rem) {

  .lr-hero {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 2rem;
    align-items: center;
    text-align: left;
    padding: 4rem 2rem;
    max-width: 72rem;
    margin: 0 auto;
    border-radius: 0;
  }

  .lr-hero-inner {
    margin: 0;
  }

  .lr-lede,
  .lr-badges {
    margin-inline: 0;
    justify-content: flex-start;
  }

  .lr-hero-art {
    margin: 0;
    max-width: 100%;
  }

  .lr-band {
    padding: 4rem 2rem;
  }

  .lr-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .lr-cards--two {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stages alternate side to side, so five in a row does not read as a list of
     identical blocks. */
  .lr-stage {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1.75rem;
    align-items: center;
  }

  .lr-stage figure {
    margin: 0;
  }

  .lr-stage:nth-child(even) figure {
    order: 2;
  }

  .lr-map-band {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

@media (min-width: 62rem) {

  .lr-cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .lr-cards--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 52rem;
    margin-inline: auto;
  }
}

/* ---- Reduced motion ------------------------------------------------------
   The game itself is reduced-motion aware; the page that sells it should be
   too. Only the CTA lift is motion here, so that is what goes. */

@media (prefers-reduced-motion: reduce) {

  .lr-page a.lr-cta {
    transition: none;
  }

  .lr-page a.lr-cta:hover,
  .lr-page a.lr-cta:focus-visible {
    transform: none;
  }
}