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

:root {
  --foam: #eafcff;
  --sun: #ffe27a;
  --gold: #ffd879;
  --coral: #ff7a93;
  --kelp: #20d778;
  --kelp-deep: #0fa366;
  --ink: #102c50;
  --ink-soft: #4d7196;
  --accent: #0b89bb;
  --panel: #e3f7ff;
  --navy: #103b5c;
  --outline: #15446a;
  --abyss: #031a33;
  --tag-edge: rgba(153, 224, 255, 0.65);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

body {
  font-family: "Nunito", ui-rounded, "Arial Rounded MT Bold", sans-serif;
  font-weight: 700;
  color: var(--foam);
  background: var(--abyss);
  line-height: 1.5;
  overflow-x: hidden;
}

/* The whole page is one water column: sunlit at the top, black-blue at the bottom. */
.ocean {
  position: relative;
  background: linear-gradient(
    180deg,
    #8fecf7 0%,
    #3cc8e6 9%,
    #1aa1cf 22%,
    #1081b6 38%,
    #0b5f93 55%,
    #084676 70%,
    #052f57 84%,
    #031a33 100%
  );
}

/* ---------- display type: the game's outlined, toy-like lettering ---------- */
.chunky {
  font-weight: 1000;
  letter-spacing: -0.01em;
  line-height: 0.95;
  color: #fff;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.16em var(--outline);
  text-shadow: 0 0.09em 0 rgba(4, 34, 60, 0.55);
}

/* ---------- surface ---------- */
.surface {
  position: relative;
  min-height: 100svh;
  padding: clamp(20px, 4vw, 44px) clamp(18px, 5vw, 72px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(16px, 4vw, 64px);
  isolation: isolate;
}
.surface::before {
  /* The game's own seabed, dissolving into open water. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/ocean.jpg") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 96%);
  opacity: 0.9;
}
.surface::after {
  /* Shafts of sunlight. */
  content: "";
  position: absolute;
  inset: -10% -20% 30% -20%;
  z-index: -1;
  background: repeating-conic-gradient(
    from 168deg at 46% -12%,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0.2) 2.2deg,
    rgba(255, 255, 255, 0) 5deg,
    rgba(255, 255, 255, 0) 9deg
  );
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  mix-blend-mode: soft-light;
  animation: rays 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes rays { to { transform: translateX(3%) skewX(-3deg); } }

.topline {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.maker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(4, 34, 60, 0.45);
}
.maker img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 4px 0 rgba(4, 34, 60, 0.35); }
.toplinks { display: flex; gap: 8px; }
.toplinks a {
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(16, 59, 92, 0.72);
  border: 2px solid var(--tag-edge);
}
.toplinks a:hover { background: var(--navy); }

.pitch { align-self: center; padding-bottom: clamp(40px, 9vh, 120px); }
.title {
  font-size: clamp(64px, 15.5vw, 236px);
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.22em;
}
.title span span {
  display: inline-block;
  animation: bob 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.28s);
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-0.06em) rotate(1.5deg); }
}
.motto {
  margin-top: clamp(14px, 2.2vw, 28px);
  font-size: clamp(22px, 3.4vw, 46px);
  font-weight: 1000;
  color: var(--sun);
  -webkit-text-stroke: 0.14em var(--outline);
  paint-order: stroke fill;
}
.lede {
  margin-top: 14px;
  max-width: 30ch;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 0 rgba(4, 34, 60, 0.5);
}

.stores { margin-top: clamp(20px, 3vw, 34px); display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-flex;
  flex-direction: column;
  padding: 10px 22px 12px;
  border-radius: 20px;
  background: var(--kelp);
  border: 3px solid #8cf5b8;
  box-shadow: 0 6px 0 var(--kelp-deep), 0 14px 24px rgba(4, 34, 60, 0.28);
  color: #fff;
  text-shadow: 0 2px 0 rgba(5, 80, 56, 0.6);
}
.store small { font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.92; }
.store b { font-size: 20px; font-weight: 1000; line-height: 1.1; }
.store.blue { background: #118fc7; border-color: #78e9ff; box-shadow: 0 6px 0 #0871a4, 0 14px 24px rgba(4, 34, 60, 0.28); text-shadow: 0 2px 0 rgba(8, 70, 110, 0.6); }

.device {
  align-self: end;
  justify-self: center;
  width: min(100%, 370px);
  margin-bottom: clamp(-150px, -12vw, -60px);
  transform: rotate(4deg);
  border-radius: 44px;
  border: 7px solid #d6f4ff;
  box-shadow: 0 30px 60px rgba(3, 26, 51, 0.5), 0 0 0 2px rgba(16, 59, 92, 0.35);
  overflow: hidden;
  z-index: 2;
  animation: arrive 1.1s cubic-bezier(0.2, 0.9, 0.25, 1.15) both 0.25s;
}
@keyframes arrive { from { transform: translateY(70px) rotate(11deg); opacity: 0; } }

.swimmer {
  position: absolute;
  left: 0;
  bottom: 13%;
  width: clamp(84px, 11vw, 150px);
  z-index: 1;
  animation: cross 26s linear infinite;
  pointer-events: none;
}
@keyframes cross {
  0% { transform: translateX(-20vw) scaleX(1); }
  49% { transform: translateX(104vw) scaleX(1); }
  50% { transform: translateX(104vw) scaleX(-1); }
  99% { transform: translateX(-20vw) scaleX(-1); }
  100% { transform: translateX(-20vw) scaleX(1); }
}

/* ---------- bubbles ---------- */
.bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.bubbles i {
  position: absolute;
  bottom: -40px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  border: 1.5px solid rgba(234, 252, 255, 0.5);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.6) 0 12%, transparent 16%);
  animation: rise var(--t) linear infinite;
  animation-delay: var(--d);
  opacity: 0;
}
@keyframes rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: 0.75; }
  50% { transform: translate3d(14px, -55vh, 0); }
  100% { transform: translate3d(-8px, -112vh, 0); opacity: 0; }
}

/* ---------- mass meter ---------- */
.meter {
  position: fixed;
  right: clamp(10px, 2vw, 26px);
  top: 50%;
  z-index: 5;
  transform: translateY(-50%) translateX(140%);
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  padding: 12px 16px 13px;
  min-width: 132px;
  text-align: center;
  border-radius: 22px;
  background: rgba(16, 59, 92, 0.94);
  border: 2px solid var(--tag-edge);
  box-shadow: 0 6px 0 rgba(3, 26, 51, 0.45);
}
.meter.on { transform: translateY(-50%); }
.meter small { display: block; font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #9fd9f3; }
.meter b { display: block; font-size: 26px; font-weight: 1000; line-height: 1.1; font-variant-numeric: tabular-nums; }
.meter span { display: block; font-size: 12px; font-weight: 800; color: var(--gold); }

/* ---------- sections ---------- */
section { position: relative; z-index: 2; padding: clamp(70px, 11vw, 170px) clamp(18px, 5vw, 72px); }
.kicker { font-size: 14px; font-weight: 1000; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun); }
h2.chunky { font-size: clamp(38px, 6.4vw, 92px); margin-top: 8px; max-width: 14ch; }
.sub { margin-top: 18px; max-width: 46ch; font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; color: #dff6ff; }

/* how it works */
.steps { margin-top: clamp(34px, 5vw, 70px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 30px); }
.card {
  background: var(--panel);
  color: var(--ink);
  border-radius: 28px;
  border: 3px solid #f2fdff;
  box-shadow: 0 8px 0 rgba(5, 43, 77, 0.3), 0 22px 40px rgba(3, 26, 51, 0.25);
  padding: clamp(20px, 2.4vw, 32px);
}
.card h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 1000; line-height: 1.1; }
.card p { margin-top: 10px; font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.steps .card:nth-child(2) { transform: translateY(26px) rotate(-1.2deg); }
.steps .card:nth-child(3) { transform: translateY(52px) rotate(1deg); }
.num {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--kelp);
  border: 3px solid #8cf5b8;
  box-shadow: 0 4px 0 var(--kelp-deep);
  color: #fff;
  font-size: 22px;
  font-weight: 1000;
}

/* the dive */
.dive { padding-bottom: clamp(30px, 5vw, 70px); }
.rope { position: relative; margin-top: clamp(40px, 6vw, 90px); }
.rope::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 3px dashed rgba(234, 252, 255, 0.35);
}
.stop { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: clamp(150px, 21vw, 320px); }
.stop + .stop { margin-top: clamp(14px, 3vw, 40px); }
.stop::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--sun);
  border: 3px solid var(--outline);
  z-index: 1;
}
.stop.unknown::before { background: #7fb3d3; }
.stop .fish { justify-self: end; padding-right: clamp(26px, 5vw, 80px); }
.stop .tag { justify-self: start; margin-left: clamp(26px, 5vw, 80px); }
.stop.flip .fish { grid-column: 2; justify-self: start; padding: 0 0 0 clamp(26px, 5vw, 80px); }
.stop.flip .tag { grid-column: 1; grid-row: 1; justify-self: end; margin: 0 clamp(26px, 5vw, 80px) 0 0; }
.stop.flip .fish img { transform: scaleX(-1); }
.fish img { width: var(--w); max-width: 44vw; filter: drop-shadow(0 16px 18px rgba(3, 26, 51, 0.35)); }
.fish { opacity: 0; transform: translateX(-60px); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1.1); }
.stop.flip .fish { transform: translateX(60px); }
.stop.seen .fish { opacity: 1; transform: none; }
.tag {
  display: inline-block;
  padding: 9px 16px 10px;
  border-radius: 16px;
  background: rgba(8, 40, 66, 0.9);
  border: 2px solid var(--tag-edge);
  box-shadow: 0 5px 0 rgba(3, 26, 51, 0.4);
  line-height: 1.15;
}
.tag b { display: block; font-size: clamp(22px, 2.6vw, 34px); font-weight: 1000; }
.tag span { font-size: 14px; font-weight: 800; color: #a9def5; }
.unknown .tag b { color: #9cc7e0; }
.stop.finale { display: block; text-align: center; min-height: 0; padding-top: clamp(20px, 4vw, 60px); }
.stop.finale::before { display: none; }
.stop.finale .fish { padding: 0; transform: translateY(60px) scale(0.92); }
.stop.finale.seen .fish { transform: none; }
.stop.finale .fish img { width: min(92vw, 980px); max-width: none; margin: 0 auto; }
.stop.finale .tag { margin: clamp(-30px, -2vw, -10px) 0 0; position: relative; }

/* features */
.features { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin-top: clamp(34px, 5vw, 64px); }
.features .card { grid-column: span 5; }
.features .card:nth-child(1) { grid-column: 1 / span 7; }
.features .card:nth-child(4) { grid-column: 6 / span 7; }
.features .card:nth-child(2), .features .card:nth-child(3) { transform: translateY(18px); }
.card .big { font-size: clamp(44px, 6vw, 84px); font-weight: 1000; line-height: 0.95; color: var(--accent); }

/* screenshots */
.reel { padding-left: 0; padding-right: 0; }
.reel .kicker, .reel h2, .reel .sub { margin-left: clamp(18px, 5vw, 72px); margin-right: clamp(18px, 5vw, 72px); }
.strip {
  margin-top: clamp(30px, 4vw, 56px);
  display: flex;
  gap: clamp(16px, 2.4vw, 34px);
  padding: 26px clamp(18px, 5vw, 72px) 46px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip figure {
  flex: 0 0 auto;
  width: clamp(210px, 24vw, 300px);
  scroll-snap-align: center;
  border-radius: 36px;
  border: 6px solid #d6f4ff;
  overflow: hidden;
  box-shadow: 0 22px 40px rgba(3, 26, 51, 0.5);
}
.strip figure:nth-child(odd) { transform: rotate(-2deg) translateY(10px); }
.strip figure:nth-child(even) { transform: rotate(2deg); }

/* seabed */
.seabed { text-align: center; padding-top: clamp(40px, 6vw, 90px); }
.seabed h2.chunky { max-width: none; font-size: clamp(42px, 8vw, 120px); }
.seabed .stores { justify-content: center; }
footer {
  position: relative;
  z-index: 2;
  padding: 26px clamp(18px, 5vw, 72px) 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 800;
  color: #8fbcd6;
  border-top: 2px dashed rgba(143, 188, 214, 0.25);
}
footer nav { display: flex; gap: 18px; }
footer a { color: #cdeeff; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }

/* ---------- text pages ---------- */
.page { min-height: 100svh; padding: clamp(20px, 4vw, 44px) clamp(18px, 5vw, 72px) clamp(50px, 8vw, 110px); }
.page .ocean-fill { position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, #1aa1cf 0%, #0b5f93 45%, #052f57 100%); }
.sheet {
  max-width: 780px;
  margin: clamp(26px, 5vw, 60px) auto 0;
  background: var(--panel);
  color: var(--ink);
  border-radius: 32px;
  border: 3px solid #f2fdff;
  box-shadow: 0 10px 0 rgba(5, 43, 77, 0.3), 0 30px 60px rgba(3, 26, 51, 0.35);
  padding: clamp(24px, 5vw, 58px);
}
.sheet h1 { font-size: clamp(34px, 6vw, 58px); font-weight: 1000; line-height: 1; letter-spacing: -0.01em; }
.sheet .stamp { margin-top: 10px; font-size: 14px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.sheet h2 { margin-top: 34px; font-size: 24px; font-weight: 1000; line-height: 1.15; }
.sheet p, .sheet li { margin-top: 12px; font-size: 17px; font-weight: 600; color: #26476c; }
.sheet ul { padding-left: 22px; }
.sheet a { color: var(--accent); font-weight: 900; }
.sheet .short {
  margin-top: 22px;
  padding: 16px 20px;
  border-radius: 20px;
  background: #cdf3df;
  border: 2px solid #8fe6b6;
  color: #0c5a3c;
  font-weight: 800;
}

@media (max-width: 860px) {
  .surface { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .pitch { padding-bottom: 26px; margin-top: 22px; }
  .device { width: min(74vw, 320px); margin-bottom: -90px; }
  .steps { grid-template-columns: 1fr; }
  .steps .card:nth-child(n) { transform: none; }
  .features .card:nth-child(n) { grid-column: 1 / -1; transform: none; }
  .meter { top: auto; bottom: 14px; right: 12px; transform: translateY(160%); min-width: 0; padding: 9px 14px 10px; }
  .meter.on { transform: none; }
  .meter b { font-size: 20px; }
  .rope::before { left: 20px; }
  .stop, .stop.flip { grid-template-columns: 1fr; padding-left: 44px; row-gap: 12px; min-height: 0; padding-top: 14px; padding-bottom: 14px; }
  .stop::before { left: 20px; }
  .stop .fish, .stop.flip .fish { grid-column: 1; justify-self: start; padding: 0; }
  .stop .tag, .stop.flip .tag { grid-column: 1; grid-row: 2; justify-self: start; margin: 0; }
  .stop.flip .fish img { transform: none; }
  .fish img { max-width: 72vw; }
  .stop.finale { padding-left: 0; }
  .toplinks a { padding: 7px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fish { opacity: 1; transform: none; }
  .bubbles { display: none; }
  html { scroll-behavior: auto; }
}