/* Just Dolphin' Around! The page is a dive: the leap above the water at the
   top, then deeper and darker past a depth gauge, down to the night reef at
   6 m where the beta links are. Colours are the game's own palette. */

@font-face { font-family: "Baloo 2"; src: url("/fonts/baloo2-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --sky: #BDEFF2;
  --shallows: #7FE3D6;
  --lagoon: #19B7C4;
  --sand: #F2E6C9;
  --coral: #FF7A59;
  --night: #0A2342;
  --glow: #3DF5E8;
  --display: "Baloo 2", ui-rounded, system-ui, sans-serif;
  --body: "Figtree", system-ui, sans-serif;
  --gutter: clamp(4rem, 9vw, 7rem);
  --line: calc(var(--gutter) * .38);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--night); }
body { margin: 0; font-family: var(--body); font-size: 1.0625rem; line-height: 1.55; color: var(--night); background: var(--sky); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

/* Above the water */
.sky { position: relative; min-height: min(92svh, 860px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.sky-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.sky::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(189, 239, 242, .92) 0%, rgba(189, 239, 242, .55) 30%, rgba(189, 239, 242, 0) 52%); }
.sky::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10, 35, 66, .7) 0%, rgba(10, 35, 66, .35) 22%, rgba(10, 35, 66, 0) 40%); }
.wordmark { position: relative; z-index: 2; display: block; width: min(100%, 1100px); margin: clamp(.5rem, 3vw, 2rem) auto 0; overflow: visible; }
.wordmark text { font-family: var(--display); font-weight: 800; font-size: 100px; fill: var(--night); letter-spacing: -1px; }
.sky-copy { position: relative; z-index: 2; padding: 0 var(--gutter) clamp(2rem, 6vw, 4rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.lede { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 600; color: var(--sand); max-width: 26ch;
  text-shadow: 0 1px 12px rgba(10, 35, 66, .7); }

.pill { display: inline-block; font: 800 1.15rem/1 var(--display); padding: .8rem 1.5rem .7rem; border-radius: 999px; border: 0;
  background: var(--coral); color: var(--night); text-decoration: none; cursor: pointer; }
.pill:hover { filter: brightness(1.06); }
.pill.ghost { background: transparent; color: var(--sand); box-shadow: inset 0 0 0 2px var(--shallows); }

.waterline { display: block; width: 100%; height: 28px; margin-top: -27px; position: relative; z-index: 3; fill: var(--shallows); }

/* Below the water: each section a little deeper */
.dive { position: relative; background: linear-gradient(to bottom, var(--shallows) 0%, var(--lagoon) 26%, #10708F 52%, var(--night) 76%); }
.dive::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--line); width: 2px;
  background: linear-gradient(to bottom, rgba(10, 35, 66, .35), rgba(10, 35, 66, .3) 45%, rgba(242, 230, 201, .35) 60%); }
.depth { position: relative; display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem) clamp(3.5rem, 9vw, 7rem) var(--gutter); }
.depth::before { content: attr(data-depth); position: absolute; top: clamp(3.5rem, 9vw, 7rem); left: calc(var(--line) - 5px); padding-left: 18px;
  white-space: nowrap; font: 800 .9rem/1.6 var(--display); font-variant-numeric: tabular-nums;
  background: linear-gradient(currentColor, currentColor) left center / 12px 2px no-repeat; }
.deep, .floor { color: var(--sand); }
.mid .text p, .mid .text li { color: #062038; }

h2 { font: 800 clamp(2rem, 4.5vw, 3rem)/1.05 var(--display); margin: 0 0 1rem; letter-spacing: -.5px; }
.text p { margin: 0 0 1rem; max-width: 34em; }
.screen { margin: 0; }
.screen img { display: block; width: 100%; height: auto; border-radius: clamp(14px, 2.4vw, 30px); border: clamp(5px, .9vw, 10px) solid var(--night); background: var(--night); }
.deep .screen img { border-color: #061629; }

.kinds { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .8rem; }
.kinds li { position: relative; padding-left: 2.1rem; }
.glyph { position: absolute; left: 0; top: .25em; width: 1.2rem; height: 1.2rem; }
.glyph.pearl { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #FFF1E4 45%, #E8C9B8); box-shadow: 0 0 8px rgba(255, 241, 228, .9); }
.glyph.hoop { border-radius: 50%; border: 3.5px solid var(--coral); }
.glyph.fish { width: 1.45rem; background: var(--night);
  clip-path: polygon(0 50%, 18% 18%, 52% 14%, 70% 45%, 100% 12%, 100% 88%, 70% 55%, 52% 86%, 18% 82%); }

.code { font: 800 clamp(2.6rem, 7vw, 4rem)/1 var(--display); letter-spacing: .18em; color: var(--glow); margin: .5rem 0 1.5rem !important; }

/* The floor: night, moonlight, the beta links */
.floor { grid-template-columns: minmax(0, 32rem); min-height: 34rem; align-content: center;
  background: linear-gradient(to right, rgba(10, 35, 66, .94) 0%, rgba(10, 35, 66, .78) 45%, rgba(10, 35, 66, .2) 100%), url("/img/moon.webp") 70% 50% / cover no-repeat; }
.floor form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin: 1.5rem 0 .5rem; }
.floor label { display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; color: var(--shallows); }
.floor input { font: inherit; font-size: 1.05rem; color: var(--sand); background: rgba(6, 22, 41, .8); border: 2px solid rgba(127, 227, 214, .45);
  border-radius: 12px; padding: .6rem .8rem; width: 12rem; }
.floor input:focus { border-color: var(--glow); outline: none; }
.reveal-msg { min-height: 1.5em; color: var(--shallows); font-weight: 600; }
.links { display: flex; flex-wrap: wrap; gap: .75rem; }
.note { font-size: .95rem; color: var(--shallows); margin-top: 1rem !important; }

footer { background: var(--night); color: var(--shallows); padding: 1.5rem var(--gutter) 2.5rem; font-size: .95rem; }

/* Privacy and other plain pages */
.plain { background: var(--night); color: var(--sand); min-height: 100svh; }
.plain main { max-width: 36rem; margin: 0 auto; padding: 4rem 1.5rem; }
.plain h1 { font: 800 2.6rem/1.1 var(--display); margin: 0 0 1rem; }
.plain a { color: var(--glow); }

@media (max-width: 760px) {
  .depth { grid-template-columns: minmax(0, 1fr); }
  .depth { padding-top: 5.5rem; }
  .depth::before { top: 3.4rem; }
  .sky { min-height: 82svh; }
  .floor { background-position: 62% 50%; }
}