/* Minnow Run: the landing page and the privacy policy share this file.

   The layout is Storm Heads-Up's (stormheadsup.github.io/assets/site.css), kept as a local copy
   rather than linked across repos so neither site breaks when the other changes, and retokened to
   the game's own water. Headings are Lilita One, the face of the game's menus and its store
   banner; body text stays the system face.

   Lilita One, self-hosted. SIL Open Font License 1.1, see fonts/LilitaOne-OFL.txt. It is the
   whole font converted to WOFF2, deliberately NOT subset: "Lilita" is a Reserved Font Name, and a
   subset counts as a Modified Version, which could not keep the name. Self-hosted rather than
   pulled from Google's CDN so visiting this page does not hand a third party the reader's IP. */

@font-face {
  font-family: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lilita-one.woff2") format("woff2");
}

:root {
  /* The game's water, surface to deep, and its gold (the Try Again button, the trophy pill). */
  --bg: #061c2c;
  --bg-2: #0b2f45;
  --surface: #0e3f5c;
  --line: #1d6a92;
  --text: #dff1ff;
  --muted: #9dbdd1;
  --accent: #ffd27a;
  --accent-soft: #ffe3a6;
  --display: "Lilita One", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --wrap: 1080px;
}

/* The privacy policy is read, not scanned. */
.doc { --wrap: 800px; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Lilita One has one weight, and it is already heavy: never let the browser fake a bolder one. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin: 0;
}

a { color: var(--accent-soft); }
a:hover { color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0b3a57 0%, var(--bg) 100%);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* The store banner's art, without its words. On a phone it is a banner above the text; on a wide
   screen it fills the hero and the text sits in its open water, the way the banner's wordmark
   does. One element either way, so the page never downloads it twice. */
.hero-art {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  /* Fade the bottom edge into the page so the art has no hard line under it. */
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.15rem;
  padding-top: 0.5rem;
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.mark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
}
.mark img {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  display: block;
}
.mark span {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text);
}
.mark:hover span { color: #fff; }

h1 {
  font-size: clamp(2.3rem, 7vw, 3.6rem);
  max-width: 17ch;
  text-wrap: balance;
}
/* "Weave plants, dodge fish!" in the game's gold, on its own line. */
h1 .gold {
  display: block;
  color: var(--accent);
}

.lede {
  max-width: 46ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 2.2vw, 1.16rem);
  text-wrap: pretty;
}
.lede strong { color: var(--text); font-weight: 600; }

/* The store badges: Apple's and Google's own artwork, copied from stormheadsup.github.io. Apple's
   SVG is edge-to-edge. Google's PNG carries 41px of transparent padding around a 564x168 badge,
   so scale it up and pull the padding back in to land on the same optical height. */
:root { --badge-h: 52px; }
.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.6rem;
}
.stores a {
  display: inline-flex;
  border-radius: 10px;
  outline-offset: 4px;
}
.stores img { display: block; }
.badge-apple { height: var(--badge-h); width: auto; }
.badge-play {
  height: calc(var(--badge-h) * 250 / 168);
  width: auto;
  margin: calc(var(--badge-h) * -41 / 168);
}

.fineprint {
  margin: 0.2rem 0 0;
  max-width: 44ch;
  font-size: 0.92rem;
  color: var(--muted);
}

/* Phones: crop in on the two fish (they fill the left ~60% of the art) so they read at this size. */
@media (max-width: 600px) {
  :root { --badge-h: 46px; }
  .hero-art {
    aspect-ratio: 4 / 3;
    object-position: 0% 50%;
  }
}

/* Laptops and up: the art fills the hero and the words take its open water, a column pinned to the
   right edge of the window. Below 1180px that column would cover the minnow's nose, so smaller
   screens keep the stacked layout. */
@media (min-width: 1180px) {
  .hero.art {
    display: flex;
    align-items: center;
    min-height: clamp(560px, 46vw, 700px);
  }
  .hero.art .hero-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-position: left center;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Deepen the open water under the words, and settle the bottom into the page. Layered
     explicitly: art 0, this 1, words 2 (DOM order alone would paint the art over it). */
  .hero.art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg, rgba(6, 28, 44, 0) 42%, rgba(6, 28, 44, 0.72) 60%, rgba(6, 28, 44, 0.9) 100%),
      linear-gradient(180deg, rgba(6, 28, 44, 0) 72%, rgba(6, 28, 44, 0.85) 100%);
  }
  .hero.art .hero-inner {
    max-width: none;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 440px;
    justify-items: start;
    align-content: center;
    row-gap: 1.15rem;
    text-align: left;
    padding: 3rem max(1.5rem, 5vw) 3rem 1.5rem;
  }
  .hero.art .hero-inner > * { grid-column: 2; }
  .hero.art h1 { font-size: clamp(2.6rem, 3.4vw, 3.3rem); }
}

/* ---------- shelf ---------- */

.shelf-section { padding: clamp(2.5rem, 6vw, 4rem) 0; }

.shelf {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 1.5rem 1.5rem;
  margin: 0 auto;
  max-width: calc(var(--wrap) + 3rem);
  scrollbar-color: var(--line) transparent;
}
.shelf::-webkit-scrollbar { height: 8px; }
.shelf::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 99px;
}
.shelf::-webkit-scrollbar-track { background: transparent; }

.shelf img {
  flex: 0 0 auto;
  width: 236px;
  height: auto;
  aspect-ratio: 1 / 2;
  border-radius: 18px;
  border: 1px solid var(--line);
  scroll-snap-align: center;
  background: var(--surface);
}

.shelf-hint {
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
}

/* ---------- bands ---------- */

section.band { padding: clamp(3rem, 7vw, 5rem) 0; }
section.band.alt {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  margin-bottom: 0.6rem;
}
.band > .wrap > p.sub {
  color: var(--muted);
  margin: 0 0 2.2rem;
  max-width: 54ch;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
}
.card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* ---------- families ---------- */

.points {
  display: grid;
  gap: 0.9rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.points li {
  padding-left: 1.6rem;
  position: relative;
  color: var(--muted);
}
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.points li strong {
  color: var(--text);
  font-weight: 600;
  display: block;
}

.more {
  margin: 2rem 0 0;
  color: var(--muted);
}

/* ---------- the privacy policy ---------- */

.doc .hero-inner {
  padding-top: clamp(2.75rem, 7vw, 4.5rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.doc .hero {
  background:
    radial-gradient(90ch 60ch at 50% -20%, #1b6d96 0%, rgba(27, 109, 150, 0) 62%),
    linear-gradient(180deg, #0b3a57 0%, var(--bg) 100%);
}
.doc h1 { font-size: clamp(2.1rem, 5.5vw, 3rem); max-width: none; }

.updated {
  margin: -0.4rem 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* Needs the .wrap in the selector: .wrap already sets a padding shorthand,
   which would otherwise win on specificity and zero these out. */
.doc main.wrap {
  padding-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-bottom: clamp(2.75rem, 6vw, 4rem);
}

.doc main > h2 {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  margin: 2.4rem 0 0.75rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--line);
}

.doc main p {
  margin: 0 0 1rem;
  color: var(--muted);
  text-wrap: pretty;
}
.doc main p:last-child { margin-bottom: 0; }

.doc main strong { color: var(--text); font-weight: 600; }
.doc main em { color: var(--text); font-style: normal; font-weight: 500; }

.doc .lede { max-width: none; }

/* The families list's gold dots, so the long policy lists read as the same family. */
.doc main ul {
  display: grid;
  gap: 0.9rem;
  margin: 0 0 1.35rem;
  padding: 0;
  list-style: none;
}
.doc main li {
  padding-left: 1.6rem;
  position: relative;
  color: var(--muted);
}
.doc main li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* Items that open with a bolded term get it on its own line. Plain items stay inline. */
.terms li > strong:first-child {
  display: block;
  font-weight: 600;
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0 3.5rem;
  font-size: 0.94rem;
  color: var(--muted);
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.foot-row .sep { color: var(--line); }
footer p { margin: 0; max-width: 70ch; }
footer .credit { margin-top: 0.8rem; font-size: 0.88rem; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .shelf img { width: 205px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}