/* Cortex Slime Defense — marketing site.

   THE LANDING PAGE HAS ONE JOB: get someone to the store button. Everything
   else was cut. What remains is the logo, one sentence, the two facts that
   sell it (buy once, plays offline), the buttons, and three thumbnails so you
   know what you are buying.

   MOBILE FIRST. Every base rule targets a phone; media queries only scale UP.
   Self-hosted font, no external requests — which is what lets the privacy page
   say "this site sets no cookies" and mean it. */

@font-face {
  font-family: 'Nunito';
  src: url('font/nunito-latin-var.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --bg:        #0e1a09;
  --bg-2:      #16240f;
  --panel:     #1d3115;
  --line:      #3a5c2c;
  --green:     #5aa03a;
  --green-lit: #8ed160;
  --gold:      #f0c04a;
  --ink:       #eaf6e6;
  --ink-dim:   #a8c19c;
  --ink-faint: #7d9673;
  --radius:    14px;
  --wrap:      980px;
  --dock:      74px;
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--dock) + env(safe-area-inset-bottom, 0px));
}

/* height:auto is load-bearing, not tidiness. The <img> tags carry width/height
   attributes (they stop the page jumping while art loads). Any CSS rule that
   sets `width` without this makes the browser use the HTML height attribute as
   a literal pixel height — the logo rendered 339x550 instead of 339x207,
   stretched, and shoved the download buttons off the bottom of the screen. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-lit); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

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

/* ---------- the page ---------- */

.hero {
  background:
    radial-gradient(900px 540px at 50% -6%, rgba(90,160,58,.34), transparent 66%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  padding: 28px 0 46px;
}
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
/* gap was 26. The square logo costs ~90px of height the old wide banner did not,
   and on a 375x667 phone that pushed BOTH store buttons under the fold. 18px
   here plus the 300px cap below puts the first button back at ~651px. Both
   restored at >=620px, where the height is not scarce. */

/* min(), not a bare px cap: a component max-width LARGER than the viewport
   silently defeats the global `img { max-width: 100% }` guard.

   THE CAP IS SET BY HEIGHT, NOT WIDTH. The logo is now roughly SQUARE (840x798)
   where the old banner was 900x550, so the same 440px width would render 418px
   tall instead of 269px and push the store buttons off a phone screen — the one
   thing the layout note below says must never happen. 340px keeps the hero
   close to the height it always had. No border-radius: the art is transparent
   now, so there is no box left to round. */
.hero-logo { width: 100%; max-width: min(300px, 100%); }

.lede { font-size: 17px; color: var(--ink-dim); margin: 0; max-width: 30em; }

/* ---------- the two facts ---------- */

/* Side by side even on the narrowest phone. Stacked, these two pushed the
   download buttons below the fold — and the buttons are what the page is for. */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 460px; }
.fact {
  background: var(--panel); border: 1px solid var(--green);
  border-radius: var(--radius); padding: 15px 13px;
  display: flex; flex-direction: column; gap: 2px;
}
.fact-big {
  font-size: 29px; font-weight: 900; color: var(--green-lit);
  line-height: 1.05; letter-spacing: -1.2px;
}
.fact-unit { font-size: 18px; letter-spacing: -.4px; }
.fact-lead { font-size: 14.5px; font-weight: 800; color: var(--ink); margin-top: 4px; line-height: 1.3; }
.fact-sub { font-size: 12.5px; color: var(--ink-dim); line-height: 1.4; }

/* ---------- store buttons ---------- */

.stores { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; }
.store {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 13px; padding: 12px 20px; color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
.store:hover { text-decoration: none; border-color: var(--green); background: #24401a; }
.store svg { width: 26px; height: 26px; fill: currentColor; flex: none; }
.store .s-sub { font-size: 10.5px; color: var(--ink-faint); letter-spacing: .7px; text-transform: uppercase; line-height: 1.2; }
.store .s-main { font-size: 17px; font-weight: 800; line-height: 1.2; }
/* Until the listings exist the links are not links. Remove data-soon and drop
   in the real URLs to switch the page over. */
.store[data-soon] { opacity: .72; cursor: default; pointer-events: none; }
.store[data-soon] .s-sub::after { content: ' — coming soon'; }

/* ---------- three thumbnails ---------- */

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: 6px; }
.mode { margin: 0; }
.mode img {
  width: 100%; aspect-ratio: 3 / 5; object-fit: cover; object-position: top center;
  border-radius: 10px; border: 1px solid var(--line);
}
.mode figcaption {
  margin-top: 8px; font-size: 12.5px; font-weight: 800;
  color: var(--ink-dim); letter-spacing: .2px;
}

/* THE LANDING STRIP ONLY (.shots). press.html reuses .modes as a plain 3-up
   grid, so the scrolling behaviour is a separate class rather than a change to
   .modes underneath it.

   Five frames will not fit across a 375px phone at any readable size, so on a
   phone this scrolls sideways and snaps, showing two and a bit — which is what
   tells you there is more to swipe. It lays flat as a row from 620px up. */
.shots {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 44%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 6px;
}
.shots .mode { scroll-snap-align: start; }

/* ---------- the pitch ---------- */

.pitch {
  margin-top: 46px; padding-top: 38px;
  border-top: 1px solid rgba(58,92,44,.55);
  display: flex; flex-direction: column; gap: 15px;
  /* 580 lands the prose near 65 characters per line; 660 measured 76, which
     reads as a wall on a wide screen. */
  max-width: 580px;
}
.pitch h2 {
  margin: 0; font-size: 27px; font-weight: 900; letter-spacing: -.7px;
  line-height: 1.12; text-wrap: balance; color: var(--ink);
}
.pitch p { margin: 0; color: var(--ink-dim); font-size: 16.5px; line-height: 1.62; }
.pitch strong { color: var(--ink); font-weight: 800; }
/* Two classes, so these out-specify `.pitch p` (one class + one element)
   without reaching for !important. */
.pitch .pitch-lead { font-size: 17.5px; color: var(--ink); }
.pitch .pitch-kicker {
  font-size: 19px; font-weight: 900; color: var(--green-lit);
  letter-spacing: -.3px; margin-top: 4px;
}
.pitch .stores { margin: 10px auto 0; }

/* ---------- phone download bar ---------- */

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(14, 26, 9, .96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 12px;
  max-width: 100vw; overflow: hidden;
}
.dock-price { flex: 0 1 auto; min-width: 0; line-height: 1.15; }
.dock-price b { display: block; font-size: 19px; font-weight: 900; color: var(--green-lit); }
.dock-price span { font-size: 11px; color: var(--ink-faint); }
.dock-btns { margin-left: auto; display: flex; gap: 8px; }
.dock-btn {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
}
.dock-btn svg { width: 23px; height: 23px; fill: currentColor; }
.dock-btn[data-soon] { opacity: .6; pointer-events: none; }

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

footer { padding: 28px 0 34px; color: var(--ink-faint); font-size: 14px; border-top: 1px solid rgba(58,92,44,.5); }
.foot-grid { display: flex; flex-direction: column; gap: 14px; }
.foot-grid nav { display: flex; gap: 18px; flex-wrap: wrap; }
.quote { color: var(--ink-dim); font-weight: 800; margin-bottom: 4px; }
footer a { color: var(--ink-dim); }

/* ---------- inner pages (privacy / support / press) ---------- */

.nav { border-bottom: 1px solid var(--line); background: var(--bg-2); }
.nav .wrap { display: flex; align-items: center; gap: 14px; height: 56px; }
.nav-brand { display: flex; align-items: center; gap: 9px; font-weight: 900; color: var(--ink); font-size: 15px; min-width: 0; white-space: nowrap; }
.nav-brand img { width: 28px; height: 28px; border-radius: 7px; }
.brand-pre { display: inline; }
.nav-links { margin-left: auto; display: flex; gap: 16px; font-weight: 700; font-size: 14px; }
.nav-links a { color: var(--ink-dim); }

.doc { padding: 34px 0 60px; }
.doc-wrap { max-width: 720px; }
.doc h1 { font-size: 30px; margin: 0 0 6px; font-weight: 900; letter-spacing: -.6px; }
.doc .updated { color: var(--ink-faint); font-size: 14.5px; margin: 0 0 30px; }
.doc h2 { font-size: 21px; margin: 32px 0 10px; font-weight: 900; }
.doc h3 { font-size: 17px; margin: 22px 0 6px; font-weight: 800; }
.doc p, .doc li { color: var(--ink-dim); }
.doc li { margin-bottom: 6px; }
.doc strong { color: var(--ink); }
.callout {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--green); border-radius: 10px;
  padding: 16px 18px; margin: 22px 0;
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
/* the press kit reuses .modes as an image grid; let those breathe */
.doc .modes { grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.doc .modes img { aspect-ratio: auto; }

/* ---------- scale up ---------- */

@media (min-width: 620px) {
  body { font-size: 17px; }
  .facts { max-width: 640px; gap: 14px; }
  .fact { padding: 20px 18px; }
  .fact-big { font-size: 40px; letter-spacing: -1.5px; }
  .fact-unit { font-size: 24px; }
  .fact-lead { font-size: 17px; }
  .fact-sub { font-size: 14.5px; }
  .stores { flex-direction: row; max-width: none; justify-content: center; }
  .store { flex: 0 1 220px; justify-content: flex-start; }
  .modes { gap: 14px; }
  .mode figcaption { font-size: 14px; }
  .lede { font-size: 19px; }
  .doc .modes { grid-template-columns: repeat(3, 1fr); }
  .hero-inner { gap: 26px; }
  .hero-logo { max-width: 360px; }
  .shots {
    grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: repeat(5, 1fr);
    overflow-x: visible; padding-bottom: 0;
  }
}

@media (min-width: 900px) {
  /* the dock is a phone pattern; the buttons above are still on screen here */
  body { padding-bottom: 0; }
  .dock { display: none; }
  .hero { padding: 44px 0 60px; }
  /* Same squeeze as the phone rule, for the same reason: at 420px the square
     logo put the first store button at 841px on a 1280x800 laptop, below the
     fold the old 520px banner cleared at 759px. 22/350 lands it at 750. */
  .hero-inner { gap: 22px; }
  .hero-logo { max-width: 350px; }
  .fact-big { font-size: 46px; }
  .foot-grid { flex-direction: row; align-items: center; }
  .foot-grid nav { margin-left: auto; }
}