/* GOGO MOVE website. Same pixel look as the app: hard ink borders, offset block shadows, no rounded corners. */

:root {
  --ink: #211929;
  --paper: #fff5d6;
  --yellow: #ffcc2e;
  --green: #5cbf3f;
  --blue: #4a99ed;
  --red: #e84d3d;
  --sky-top: #3f8fe0;
  --sky-bottom: #d6effd;
  --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", "PingFang SC", "Microsoft YaHei", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  background: var(--sky-bottom);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }

/* Language switch: English is the no-JS default */
html:not([data-lang="zh"]) [lang="zh"] { display: none !important; }
html[data-lang="zh"] [lang="en"] { display: none !important; }

.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.wrap { width: min(1080px, 100% - 40px); margin-inline: auto; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--ink); color: #fff;
  border-bottom: 4px solid #000;
}
.site-header .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 19px var(--mono); color: var(--yellow); letter-spacing: 1px; }
.brand img { width: 34px; height: 34px; border: 2px solid #000; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 18px; font: 700 14px var(--mono); }
.nav a { text-decoration: none; opacity: .85; }
.nav a:hover { opacity: 1; color: var(--yellow); }
.lang-toggle {
  font: 800 13px var(--mono); color: var(--ink); background: var(--paper);
  border: 3px solid #000; padding: 5px 10px; cursor: pointer;
}
.lang-toggle:hover { background: var(--yellow); }

/* ---------- buttons, panels ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 18px var(--mono); text-decoration: none; color: var(--ink);
  background: var(--yellow); border: 4px solid var(--ink);
  padding: 13px 24px; box-shadow: 0 6px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--ink); }
.btn:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }
.btn.secondary { background: var(--paper); }
.btn img { width: 26px; height: 26px; }

.panel {
  background: var(--paper); border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(33, 25, 41, .55);
  padding: 24px;
}

h1, h2, h3 { font-family: var(--mono); font-weight: 800; line-height: 1.2; margin: 0; }
.section { padding: 72px 0; }
.section-title { font-size: clamp(26px, 4vw, 38px); text-align: center; margin-bottom: 10px; }
.section-sub { text-align: center; max-width: 640px; margin: 0 auto 40px; opacity: .8; }

/* ---------- hero ---------- */
/* The hero fills exactly the first screen (viewport minus the 64px header), with the chase scene pinned to its
   bottom edge, so the dog and the bird are visible without scrolling on any screen height. */
.hero {
  --scenery-h: clamp(150px, 26svh, 230px);
  position: relative; overflow: hidden;
  background: linear-gradient(var(--sky-top), #82c4f5 55%, var(--sky-bottom));
  min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px);
  display: flex; flex-direction: column;
  padding: clamp(16px, 4svh, 48px) 0 0;
}
.hero .wrap > * { min-width: 0; }
.hero .wrap { flex: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(40px, min(8vw, 11svh), 84px); color: var(--yellow); letter-spacing: 2px;
  text-shadow: 4px 4px 0 var(--ink);
}
.hero .tagline { font: 800 clamp(18px, 2.6vw, 24px) var(--mono); color: #fff; text-shadow: 2px 2px 0 var(--ink); margin: 14px 0 18px; }
.hero p.lead { color: #fff; font-size: 18px; max-width: 520px; text-shadow: 1px 1px 0 rgba(33, 25, 41, .6); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 8px; }
.hero .note { color: #fff; font: 700 13px var(--mono); opacity: .9; }

/* The screenshot shrinks with the screen height so it never pushes the chase scene below the fold */
.phone {
  width: fit-content; margin-inline: auto;
  border: 6px solid var(--ink); background: var(--ink);
  box-shadow: 10px 10px 0 rgba(33, 25, 41, .45);
}
.phone img {
  display: block; width: auto; max-width: min(300px, 78vw);
  max-height: calc(100svh - 64px - var(--scenery-h) - clamp(16px, 4svh, 48px) - 28px);
}

/* scrolling pixel scenery under the hero */
.scenery { position: relative; flex: none; height: var(--scenery-h); margin-top: 12px; }
.strip { position: absolute; left: 0; right: 0; background-repeat: repeat-x; image-rendering: pixelated; }
.strip.clouds    { top: 0;      height: 96px;  background-image: url(assets/jf_clouds.png);    background-size: 720px 192px; animation: scroll-720 120s linear infinite; opacity: .95; }
.strip.mountains { bottom: 60px; height: 240px; background-position-y: bottom; background-image: url(assets/jf_mountains.png); background-size: 640px 240px; animation: scroll-640 70s linear infinite; }
.strip.trees     { bottom: 56px; height: 168px; background-image: url(assets/jf_trees.png);     background-size: 640px 168px; animation: scroll-640 26s linear infinite; }
.strip.ground    { bottom: 0;    height: 64px;  background-image: url(assets/jf_ground.png);    background-size: 384px 160px; animation: scroll-384 7s linear infinite; }
@keyframes scroll-720 { to { background-position-x: -720px; } }
@keyframes scroll-640 { to { background-position-x: -640px; } }
@keyframes scroll-384 { to { background-position-x: -384px; } }
/* below the hero text (z-index 2): on short screens the bird may reach the text area and must not cover it */
.runner { position: absolute; bottom: 50px; z-index: 1; }
.runner.dog  { left: 12%; width: 150px; }
.runner.bird { left: calc(12% + 190px); bottom: 120px; width: 96px; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-18px); } }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { text-align: center; }
.step .num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px;
  font: 800 20px var(--mono); background: var(--blue); color: #fff; border: 4px solid var(--ink);
}
.step h3 { font-size: 19px; margin-bottom: 6px; }
.step p { margin: 0; opacity: .85; }

/* ---------- games ---------- */
.games-bg { background: #bfe3fb; border-block: 4px solid var(--ink); }
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.game { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.game .shot { aspect-ratio: 3 / 4; overflow: hidden; border-bottom: 4px solid var(--ink); background: var(--ink); }
.game .shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }
.game .body { padding: 20px 22px 24px; }
.game .move { display: inline-block; font: 800 12px var(--mono); color: #fff; padding: 3px 9px; border: 3px solid var(--ink); margin-bottom: 10px; }
.game h3 { font-size: 22px; margin-bottom: 8px; }
.game p { margin: 0; opacity: .85; }
.move.green { background: var(--green); } .move.blue { background: var(--blue); } .move.yellow { background: var(--yellow); color: var(--ink); }

/* ---------- features ---------- */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature img { width: 52px; height: 52px; flex: none; }
.feature h3 { font-size: 18px; margin-bottom: 4px; }
.feature p { margin: 0; opacity: .85; }

/* ---------- pricing ---------- */
.pricing { max-width: 720px; margin-inline: auto; text-align: center; }
.pricing ul { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 8px; font-weight: 600; }
.pricing li::before { content: "✓ "; color: var(--green); font-weight: 900; }
.pricing .fine { font-size: 14px; opacity: .75; margin: 16px 0 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #fff; padding: 36px 0; border-top: 4px solid #000; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; font: 600 14px var(--mono); }
.site-footer a { text-decoration: none; opacity: .85; }
.site-footer a:hover { opacity: 1; color: var(--yellow); }
.site-footer .copy { margin-left: auto; opacity: .6; }

/* ---------- legal pages ---------- */
.legal-hero { background: linear-gradient(var(--sky-top), #82c4f5); padding: 56px 0 44px; border-bottom: 4px solid var(--ink); }
.legal-hero h1 { font-size: clamp(30px, 5vw, 46px); color: var(--yellow); text-shadow: 3px 3px 0 var(--ink); }
.legal-hero p { color: #fff; font: 700 14px var(--mono); margin: 10px 0 0; text-shadow: 1px 1px 0 rgba(33, 25, 41, .6); }
.legal { width: min(820px, 100% - 40px); margin: 40px auto 72px; }
.legal h2 { font-size: 22px; margin: 34px 0 10px; padding-top: 6px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 17px; margin: 20px 0 6px; }
.legal p, .legal li { font-size: 16px; }
.legal ul { padding-left: 22px; }
.legal li { margin: 4px 0; }
.legal a { color: #1d5fb8; font-weight: 600; }
.callout { background: #fff; border: 3px solid var(--ink); border-left: 10px solid var(--yellow); padding: 14px 18px; margin: 18px 0; }
.callout.green { border-left-color: var(--green); }
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; text-align: center; }
  /* one column cannot hold the text, the screenshot and the chase scene in a single screen: the chase scene wins,
     the home screenshot moves out of the hero (the game screenshots follow right below) */
  .hero .phone { display: none; }
  .hero { --scenery-h: clamp(170px, 30svh, 230px); }
  .hero p.lead { margin-inline: auto; }
  .hero .cta { justify-content: center; }
  .steps, .games, .features { grid-template-columns: 1fr; }
  .games { max-width: 420px; margin-inline: auto; }
  .nav a.hide-sm { display: none; }
  .runner.dog { left: 4%; width: 120px; }
  .runner.bird { left: calc(4% + 150px); width: 78px; }
  .section { padding: 54px 0; }
  .site-footer .copy { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .strip, .runner.bird { animation: none; }
  html { scroll-behavior: auto; }
}