/* Fishful Thinking — site styles.
   Colours derive from the game's own design system (Ui/Resources/UI/theme.uss) so the page and
   the app read as one product, but the page runs LIGHTER than the app's HUD. The app's chrome is
   dark because it sits over live water; a marketing page has no water behind it, and a near-black
   page fights an icon whose whole promise is a bright, crowded, sunlit tank. */

:root {
  /* water column, surface → floor */
  --water-0:  #7FD4F5;
  --water-1:  #2E9BD4;
  --water-2:  #13639F;
  --water-3:  #0A3A66;
  --deep:     #06203D;
  --deeper:   #041729;

  --ink:        #F2F8FF;
  --ink-muted:  rgba(242, 248, 255, 0.74);
  --ink-faint:  rgba(242, 248, 255, 0.48);
  --ink-dark:   #06283F;

  --primary:      #2ED3B7;
  --primary-deep: #17796A;
  --coin:         #F7CE76;
  --pearl:        #BFE3FF;
  --edge:         rgba(191, 227, 255, 0.16);

  --wrap: 1140px;
  --radius: 20px;

  /* No webfont: a third-party font request would hand this site's visitors to another server,
     which the privacy policy promises does not happen. */
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI",
          system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--deeper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin-inline: auto; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--pearl); }
img { max-width: 100%; height: auto; display: block; }

/* ---- header ---- */

header.site {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(14px);
  background: rgba(6, 32, 61, 0.6);
  border-bottom: 1px solid var(--edge);
}
header.site .wrap { display: flex; align-items: center; gap: 0.85rem; padding-block: 0.6rem; }
header.site img { width: 34px; border-radius: 9px; }
header.site .name { font-weight: 750; letter-spacing: 0.01em; }
header.site nav { margin-left: auto; display: flex; gap: 1.3rem; font-size: 0.93rem; align-items: center; }
header.site nav a { color: var(--ink-muted); text-decoration: none; }
header.site nav a:hover { color: var(--ink); }

/* ================= HERO =================
   A water column you look into, not a dark page with a picture on it. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 11vw, 7.5rem) 0 clamp(4rem, 12vw, 8rem);
  text-align: center;
  background:
    linear-gradient(180deg,
      var(--water-0) 0%, var(--water-1) 26%, var(--water-2) 55%,
      #0A3A66 78%, var(--deep) 100%);
}

/* Sunlight through the surface. Two skewed gradients, wide and soft, so it reads as caustics
   rather than as the stripes it literally is. */
.hero::before {
  content: ""; position: absolute; inset: -25% -10% auto -10%; height: 115%;
  z-index: 0; pointer-events: none;   /* above .hero's own gradient, below the swimmers */
  background:
    linear-gradient(105deg, transparent 24%, rgba(255,255,255,.42) 30%, transparent 37%),
    linear-gradient( 86deg, transparent 52%, rgba(255,255,255,.30) 57%, transparent 63%),
    linear-gradient(112deg, transparent 70%, rgba(255,255,255,.24) 75%, transparent 81%);
  filter: blur(3px);
}
/* Floor haze, so the column has a bottom instead of just ending. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(4, 23, 41, 0.85));
}

.hero .wrap { position: relative; z-index: 2; }

.hero h1 {
  font-size: clamp(2.7rem, 8.5vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 0.7rem;
  text-wrap: balance;
  text-shadow: 0 3px 18px rgba(3, 26, 48, 0.55);
}

.hero .tagline {
  font-size: clamp(1.15rem, 2.9vw, 1.55rem);
  font-weight: 550;
  margin: 0 auto 1.3rem;
  max-width: 34ch;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(3, 26, 48, 0.5);
}

.hero .lede {
  color: rgba(255, 255, 255, 0.88);
  max-width: 54ch;
  margin: 0 auto 2.2rem;
  text-wrap: pretty;
  text-shadow: 0 1px 10px rgba(3, 26, 48, 0.45);
}

/* Drifting fish. Decorative only — aria-hidden in the markup, and they sit BEHIND the copy so a
   fish can never land on a word. */
.swimmers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.swimmers img {
  position: absolute;
  filter: drop-shadow(0 12px 22px rgba(2, 20, 38, 0.45));
  opacity: 0.96;
}
.swimmers .s1 { width: clamp(96px, 13vw, 190px); top: 6%;  left: 3%;  }
.swimmers .s2 { width: clamp(74px, 10vw, 150px); top: 58%; left: 7%;  transform: scaleX(-1); }
.swimmers .s3 { width: clamp(84px, 12vw, 176px); top: 12%; right: 4%; transform: scaleX(-1); }
.swimmers .s4 { width: clamp(64px,  9vw, 132px); top: 66%; right: 8%; }
.swimmers .s5 { width: clamp(52px,  7vw, 104px); top: 38%; right: 17%; opacity: 0.55; }
.swimmers .s6 { width: clamp(48px,  6vw,  92px); top: 30%; left: 16%;  opacity: 0.5; transform: scaleX(-1); }

@media (prefers-reduced-motion: no-preference) {
  .swimmers img { animation: drift var(--dur, 13s) ease-in-out var(--del, 0s) infinite; }
  .swimmers .s2, .swimmers .s3, .swimmers .s6 { animation-name: drift-flipped; }
  @keyframes drift {
    0%, 100% { transform: translate3d(0,0,0); }
    50%      { transform: translate3d(14px, -20px, 0); }
  }
  /* scaleX must be restated or the keyframe overwrites the flip and the fish swims backwards. */
  @keyframes drift-flipped {
    0%, 100% { transform: translate3d(0,0,0) scaleX(-1); }
    50%      { transform: translate3d(-14px, -20px, 0) scaleX(-1); }
  }
}

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

.stores { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.store-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1.2rem; border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(4, 28, 50, 0.42);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.9); font-size: 0.93rem; text-decoration: none;
  cursor: default;   /* not links yet — the SOON pill says so, the cursor should agree */
}
.store-badge strong { color: #fff; font-weight: 700; }
.store-badge .soon {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--coin); border: 1px solid rgba(247, 206, 118, 0.5);
  border-radius: 999px; padding: 0.12rem 0.52rem;
}

.btn {
  display: inline-block; padding: 0.85rem 1.7rem; border-radius: 13px;
  background: var(--primary); color: var(--ink-dark);
  font-weight: 750; text-decoration: none; border-bottom: 3px solid var(--primary-deep);
}
.btn:hover { background: var(--pearl); color: var(--ink-dark); }

/* ---- sections ---- */

section { padding-block: clamp(2.4rem, 5.5vw, 3.8rem); position: relative; }
section.deep   { background: var(--deep); }
section.deeper { background: var(--deeper); }

h2 { font-size: clamp(1.75rem, 4.4vw, 2.6rem); letter-spacing: -0.02em; margin: 0 0 0.6rem; text-wrap: balance; }
h3 { text-wrap: balance; }   /* "Twelve machines so the tank survives / you" left a widow */
.sub { color: var(--ink-muted); max-width: 62ch; margin-top: 0; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem;
  color: var(--primary); font-weight: 700; margin: 0 0 0.5rem;
}

/* ---- species roster: the asset no screenshot can fake ---- */

.roster {
  display: grid; gap: 0.9rem; margin-top: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.sp {
  margin: 0; padding: 0.7rem 0.5rem 0.85rem;
  background: linear-gradient(180deg, rgba(46, 155, 212, 0.16), rgba(10, 58, 102, 0.28));
  border: 1px solid var(--edge); border-radius: 15px;
  text-align: center;
}
/* No :hover. These are figures, not controls — a tile that lifts and glows under the cursor
   promises a click that never arrives, and the reader spends the next few seconds testing the
   others to work out which ones are broken. If they ever become links, the lift comes back. */
.sp img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.sp figcaption { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.35rem; }
.sp b { font-size: 0.86rem; font-weight: 650; line-height: 1.25; }
.sp span { font-size: 0.7rem; color: var(--ink-faint); }
.sp[data-tier="0"] { border-color: rgba(247, 206, 118, 0.42); }
.sp[data-tier="0"] span { color: var(--coin); }

/* ---- alternating feature rows ---- */

.feature { display: grid; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; grid-template-columns: 1fr; }
.feature + .feature { margin-top: clamp(2rem, 4.5vw, 3rem); }
.feature .art { position: relative; display: grid; place-items: center; }
.feature .art img { width: min(270px, 66%); filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.5)); }
/* A pool of light under the subject so it is standing in the scene, not pasted on it. */
.feature .art::before {
  content: ""; position: absolute; width: 74%; aspect-ratio: 2.1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 211, 183, 0.26), transparent 72%);
  z-index: -1;
}
.feature h3 { font-size: clamp(1.35rem, 3vw, 1.9rem); margin: 0.4rem 0 0.6rem; letter-spacing: -0.015em; }
.feature p { color: var(--ink-muted); margin: 0; }

@media (min-width: 800px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature:nth-child(even) .art { order: 2; }
}

/* ---- hero stat row: specificity is what makes a claim believable ---- */

.stat-row {
  list-style: none; padding: 0; margin: 2.2rem auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.4rem;
}
.stat-row li { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.stat-row b {
  font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(3, 26, 48, 0.5);
}
.stat-row span {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.78); margin-top: 0.15rem;
}

/* ---- the pitch: one idea, set larger than everything around it ---- */

.pitch { text-align: center; padding-block: clamp(2.6rem, 6vw, 4.2rem); }
.pitch h2 { font-size: clamp(2rem, 5.4vw, 3.2rem); }
.sub.big {
  font-size: clamp(1.05rem, 2.3vw, 1.28rem);
  max-width: 58ch; margin-inline: auto; color: rgba(242, 248, 255, 0.82);
}

/* ---- breeding recipes: the clearest way to say "you made this" ---- */

.recipes {
  list-style: none; padding: 0; margin: 1.6rem 0 0;
  display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(336px, 1fr));
}
.recipe {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem; border-radius: 15px;
  background: linear-gradient(180deg, rgba(46, 155, 212, 0.14), rgba(10, 58, 102, 0.26));
  border: 1px solid var(--edge);
}
.recipe img { width: 46px; aspect-ratio: 1; object-fit: contain; flex: none; }
/* The result is the payoff, so it is bigger and it is the only one wearing the gold. */
.recipe img.out {
  width: 62px;
  filter: drop-shadow(0 0 12px rgba(247, 206, 118, 0.4));
}
.recipe .op { color: var(--ink-faint); font-weight: 700; flex: none; }
.recipe .meta { margin-left: auto; text-align: right; line-height: 1.25; }
.recipe .meta b { display: block; font-size: 0.9rem; color: var(--coin); }
.recipe .meta span { font-size: 0.75rem; color: var(--ink-faint); white-space: nowrap; }

/* ---- real-tank showcase ---- */

.showcase { text-align: center; }
.tanks { display: grid; gap: 1.6rem; margin-top: 2.2rem; grid-template-columns: 1fr; }
.tanks figure { margin: 0; }
/* A device held sideways. The bezel is CSS rather than baked into the capture: it stays sharp at
   any size, costs no bytes, and lets the screenshot be pure gameplay.

   The frame follows the CAPTURE's aspect rather than forcing one on it. An earlier version
   cropped the game screen to 19.5:9 to look more phone-like and ate the top of the tank —
   fish and the auto-feeder boat went with it. Showing the whole screen matters more than the
   bezel matching a particular handset. */
.phone {
  position: relative;
  padding: 9px 13px;
  border-radius: 28px;
  background: linear-gradient(160deg, #2A3948, #131C26 55%, #0A121A);
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    inset 0 0 0 5px rgba(0, 0, 0, 0.55);
}
.phone img { width: 100%; display: block; border-radius: 19px; }
/* The speaker slot, on the short edge — this handset is on its side. */
.phone::before {
  content: ""; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 40px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
}
@media (min-width: 860px) { .tanks { grid-template-columns: 1fr 1fr; } }

/* ---- trait ladder ---- */

.trait-band { margin-top: 1.5rem; }
.traits { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.t {
  padding: 0.42rem 0.9rem; border-radius: 999px; font-size: 0.9rem; font-weight: 650;
  border: 1px solid var(--edge); background: rgba(255, 255, 255, 0.05);
}
/* The ladder has to be legible as a ladder — colour carries the rarity, not the label. */
.t.common   { color: var(--ink-muted); }
.t.uncommon { color: #8CE6A0; border-color: rgba(140, 230, 160, 0.42); }
.t.rare     { color: #80CCFF; border-color: rgba(128, 204, 255, 0.5);  background: rgba(128, 204, 255, 0.08); }
.t.epic {
  color: var(--coin); border-color: rgba(247, 206, 118, 0.65);
  background: rgba(247, 206, 118, 0.12); font-weight: 800;
}

/* ---- small supporting art under a feature ---- */

.mini { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; }
/* Deliberately unstyled beyond a shadow. Boxing these in a bordered, padded, rounded plate made
   them read as icon buttons, and they do nothing when pressed. A drop shadow keeps them sitting
   in the scene without implying they can be operated. */
.mini { gap: 0; align-items: flex-end; margin-top: 1.1rem; }
.mini img {
  aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5));
  width: clamp(58px, 8vw, 82px);
  margin-right: -0.5rem;           /* slight overlap — a row of tiles never overlaps */
}
.mini img:nth-child(2n)   { width: clamp(48px, 6.6vw, 68px); margin-bottom: 0.5rem; }
.mini img:nth-child(3n)   { width: clamp(64px, 8.8vw, 90px); }
.mini img:nth-child(4n)   { width: clamp(44px, 6vw, 62px);  margin-bottom: 1rem; }

/* ---- tank styles ---- */

.themes { display: grid; gap: 1rem; margin-top: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.theme { margin: 0; }
/* The chip IS the product: water over sand, in the game's own palette values. */
.theme .chip {
  height: 108px; border-radius: 14px; border: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--far) 0%, var(--far) 52%, var(--sand) 52%, var(--sand) 100%);
  box-shadow: inset 0 -18px 26px rgba(0, 0, 0, 0.18);
}
.theme figcaption { display: block; margin-top: 0.6rem; }
.theme b { display: block; font-size: 0.98rem; }
.theme span { display: block; color: var(--ink-muted); font-size: 0.86rem; margin-top: 0.1rem; }


/* ---- prose pages ---- */

.prose { max-width: 68ch; padding-block: clamp(2.5rem, 7vw, 4rem); }
.prose h1 { font-size: clamp(2rem, 5vw, 2.6rem); margin-bottom: 0.3rem; letter-spacing: -0.02em; }
.prose .updated { color: var(--ink-faint); font-size: 0.9rem; margin-top: 0; }
.prose h2 { font-size: 1.3rem; margin-top: 2.4rem; }
.prose p, .prose li { color: var(--ink-muted); }
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: var(--ink); }
/* A three-column disclosure table squashed into 335px is legible to nobody. Let it keep a
   workable minimum and scroll INSIDE its own box — the page itself must never scroll sideways. */
.prose .table-wrap { overflow-x: auto; margin-top: 1rem; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.95rem; }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--edge); }
.prose th { color: var(--ink); font-weight: 700; }
.prose td { color: var(--ink-muted); }
.prose blockquote {
  margin: 1.4rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--primary);
  background: rgba(46, 211, 183, 0.07); border-radius: 0 10px 10px 0;
}
.prose blockquote p { margin: 0; color: var(--ink); }

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

footer.site {
  border-top: 1px solid var(--edge); padding-block: 2.5rem;
  color: var(--ink-faint); font-size: 0.9rem; background: var(--deeper);
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }
footer.site nav { display: flex; gap: 1.5rem; margin-left: auto; }
footer.site a { color: var(--ink-muted); text-decoration: none; }
footer.site a:hover { color: var(--ink); }

@media (max-width: 620px) {
  header.site nav { gap: 0.9rem; font-size: 0.86rem; }
  header.site .name { font-size: 0.95rem; white-space: nowrap; }
  /* Anchors go, Support stays: four items wrapped the bar onto two lines and split the
     wordmark across them. The sections are two thumb-flicks away; Support is a page. */
  header.site nav a[href^="#"] { display: none; }
  footer.site nav { margin-left: 0; width: 100%; }
  /* The small background swimmers crowd the copy at phone width. */
  .swimmers .s5, .swimmers .s6, .swimmers .s4 { display: none; }
  .roster { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.6rem; }
  .stat-row { gap: 0.9rem 1.6rem; }
  /* At phone width the recipe card cannot hold five images AND a nowrap caption on one line —
     it pushed the document 8px wider than the viewport. Let the caption drop to its own row. */
  .recipe { flex-wrap: wrap; }
  .recipe .meta { margin-left: 0; width: 100%; text-align: left; margin-top: 0.35rem; }
  .recipe .meta span { white-space: normal; }
}