/* ============================================================
   GAME PAGE — shared stylesheet for studio titles that are not
   Sequence Slayer (runic, site.css) or Buddy Flight (cartoon,
   buddyflight.css). site.css still supplies the header, footer
   and language switch; this file owns everything inside <main>.

   One component set, one palette per game: a page opts in with
   <main class="gp gp--<game>"> and the theme class sets only the
   custom properties below. Adding a game means adding a theme
   block, never new components.

   Contrast (WCAG 2.1 AA, 4.5:1 for body text), Tide Garden:
     ink   #123f3c on sand #f6efe0 = 10.18   on sand-2 #ece2cc = 9.0+
     ink-2 #3a5a57 on sand        =  6.60   on sand-2        = 5.87
     ink-3 #4b6764 on sand        =  5.36   on sand-2        = 4.77
     accent #a83b29 on sand       =  5.52   on sand-2        = 4.91
     link  #0b5a84 on sand        =  6.53   on sand-2        = 5.81
     white / hero-2 #cfe8e2 on hero #154a47 = 9.99 / 7.75
     hero on status #f5c842       =  6.29
   ============================================================ */

.gp--tg {
  --gp-bg:      #f6efe0;
  --gp-bg-2:    #ece2cc;
  --gp-card:    #ffffff;
  --gp-ink:     #123f3c;
  --gp-ink-2:   #3a5a57;
  --gp-ink-3:   #4b6764;
  --gp-accent:  #a83b29;
  --gp-link:    #0b5a84;
  --gp-line:    #c9b98f;
  --gp-hero:    #154a47;
  --gp-on-hero: #ffffff;
  --gp-on-hero-2: #cfe8e2;
  --gp-status:  #f5c842;
  --gp-mark:    #e8645a;
}

/* Snackrobat: the game's night-indigo UI over a snack-shop cream page.
     ink #221d45 / ink-2 #4a4470 / ink-3 #5b5582 on cream #fbf5e8 = 14.54 / 8.22 / 6.30,
     on cream-2 #f1e7d1 = 12.85 / 7.27 / 5.57; accent #a8410f = 5.64 / 4.99;
     link #3b36a3 = 8.62 / 7.62; white / hero-2 #d9d4ff on hero #25204f = 15.02 / 10.59;
     hero text on the lime status #8fe35f = 9.53 */
.gp--sr {
  --gp-bg:      #fbf5e8;
  --gp-bg-2:    #f1e7d1;
  --gp-card:    #ffffff;
  --gp-ink:     #221d45;
  --gp-ink-2:   #4a4470;
  --gp-ink-3:   #5b5582;
  --gp-accent:  #a8410f;
  --gp-link:    #3b36a3;
  --gp-line:    #d9c9a3;
  --gp-hero:    #25204f;
  --gp-on-hero: #ffffff;
  --gp-on-hero-2: #d9d4ff;
  --gp-status:  #8fe35f;
  --gp-mark:    #ff9f2e;
}

.gp {
  --gp-display: "Nunito", "Inter", system-ui, sans-serif;
  background: var(--gp-bg);
  color: var(--gp-ink);
  font-family: var(--body);
}
.gp h1, .gp h2, .gp h3 {
  font-family: var(--gp-display);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--gp-ink);
}
/* :where keeps this at single-class weight so component rules below win */
.gp :where(p) { color: var(--gp-ink-2); }
.gp a { color: var(--gp-link); text-decoration-color: color-mix(in srgb, var(--gp-link) 45%, transparent); }
.gp a:hover { color: var(--gp-ink); }
.gp :focus-visible { outline: 2px solid var(--gp-ink); outline-offset: 3px; }

.gp-sec { padding-block: clamp(38px, 5vw, 64px); }
.gp-sec--alt { background: var(--gp-bg-2); }
.gp .gp-eyebrow {
  font-family: var(--gp-display); font-size: 12px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gp-accent);
  margin: 0 0 10px;
}
.gp-h { font-size: clamp(25px, 3.4vw, 36px); margin: 0 0 16px; }
.gp .gp-intro { font-size: 16.5px; line-height: 1.65; max-width: 62ch; margin: 0 0 26px; }

/* ---------- hero ---------- */
.gp-hero { background: var(--gp-hero); color: var(--gp-on-hero); overflow: hidden; }
.gp-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 52px); align-items: center;
  padding-block: clamp(34px, 5vw, 64px);
}
.gp-hero__icon {
  width: clamp(60px, 7vw, 76px); height: auto; border-radius: 22%;
  border: 2px solid rgba(255, 255, 255, .35); margin-bottom: 16px; display: block;
}
.gp .gp-hero h1 { color: var(--gp-on-hero); font-size: clamp(36px, 5.6vw, 58px); margin: 0; }
.gp .gp-hero__sub {
  font-family: var(--gp-display); font-weight: 700; color: var(--gp-on-hero-2);
  font-size: clamp(18px, 2.2vw, 23px); margin: 4px 0 16px;
}
.gp .gp-lede { color: var(--gp-on-hero); font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.6; max-width: 46ch; margin: 0 0 20px; }
.gp .gp-status {
  display: inline-block; font-family: var(--gp-display); font-size: 12px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gp-hero);
  background: var(--gp-status); border-radius: 999px; padding: 6px 15px; margin: 0;
}
.gp-store { margin: 16px 0 0; }
.gp .gp-avail { color: var(--gp-on-hero-2); font-size: 14.5px; line-height: 1.6; margin: 12px 0 0; max-width: 46ch; }
.gp .gp-avail a { color: var(--gp-on-hero); text-decoration-color: rgba(255, 255, 255, .55); }
.gp .gp-avail a:hover { color: var(--gp-status); }
.gp-hero__art img {
  display: block; width: 100%; height: auto; border-radius: 16px;
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .65);
}

/* ---------- screenshots: three phones, swiped on a narrow screen ---------- */
.gp-shots { display: flex; gap: clamp(14px, 2vw, 26px); justify-content: center; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.gp-shots > li { flex: none; width: clamp(150px, 20vw, 220px); }
.gp-phone {
  border: 3px solid var(--gp-ink); border-radius: 20px; overflow: hidden; background: var(--gp-ink);
  box-shadow: 0 14px 30px -16px rgba(18, 63, 60, .65);
}
.gp-phone img { display: block; width: 100%; height: auto; }

/* ---------- feature cards ---------- */
.gp-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(14px, 2vw, 20px); }
.gp-feat {
  background: var(--gp-card); border: 2px solid var(--gp-line); border-radius: 16px;
  padding: 20px 20px 18px; position: relative;
}
.gp-feat::before {
  content: ""; display: block; width: 26px; height: 26px; border-radius: 8px;
  background: var(--gp-mark); margin-bottom: 12px;
}
.gp-feat h3 { font-size: 17.5px; margin: 0 0 8px; }
.gp .gp-feat p { font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ---------- facts ---------- */
.gp-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px 28px; margin: 0;
}
.gp-facts div { border-top: 2px solid var(--gp-line); padding-top: 12px; }
.gp-facts dt {
  font-family: var(--gp-display); font-size: 12px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gp-ink-3); margin-bottom: 4px;
}
.gp-facts dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gp-ink); }

@media (max-width: 760px) {
  .gp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .gp-hero__art { order: -1; }
  /* three phones do not fit a 360px screen — swipe them instead of shrinking them */
  .gp-shots {
    justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 10px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
    scrollbar-width: thin;
  }
  .gp-shots > li { width: 62vw; max-width: 240px; scroll-snap-align: center; }
}