/* Tidehop site. Colours are the game's own island skies; type is the game's
   pair: Pixelify Sans for display, Rubik for reading. Square corners, as in
   pixel art. No rules, no gradients, no shadows at rest. */
:root {
  --ink: #12324a;
  --paper: #f3fbf9;
  --foam: #e6f6f2;
  --palm: #6ccbe3;
  --sun: #fff1b8;
  --lagoon: #0e7c8c;
  --mangrove: #9ed7a6;
  --ember: #f08a5d;
  --storm: #1c2b4e;
  --storm-2: #465c8a;
  --sand: #f6c453;
  --hibiscus: #c92a5e;
  --hibiscus-edge: #9c1e4a;
  --soft: #4e6b7c;

  --display: "Pixelify Sans", "Rubik", system-ui, sans-serif;
  --text: "Rubik", system-ui, sans-serif;
  --s-hero: clamp(52px, 5vw, 88px);
  --s-big: clamp(48px, 7vw, 112px);
  --s-mid: clamp(28px, 3.2vw, 50px);
  --s-body: clamp(17px, 1.25vw, 20px);
  --s-small: 15px;
  --m: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--foam);
  color: var(--ink);
  font: 400 var(--s-body)/1.55 var(--text);
  overflow-x: hidden;
}
img, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--hibiscus); outline-offset: 3px; }
::selection { background: var(--sand); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, .display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin: 0;
}
p { margin: 0; max-width: 62ch; }

.chapter { position: relative; min-height: 90svh; padding: clamp(72px, 10vw, 140px) var(--m); overflow: hidden; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); }

/* Buttons: flat fill, square, a solid darker lip like the game's keys. */
.key {
  display: inline-grid;
  place-items: center;
  min-height: 56px;
  padding: 0 26px;
  background: var(--hibiscus);
  color: #fff;
  font: 700 var(--s-body)/1 var(--text);
  text-decoration: none;
  border: 0;
  border-bottom: 5px solid var(--hibiscus-edge);
  cursor: pointer;
  transition: transform 120ms var(--ease), border-bottom-width 120ms var(--ease), background-color 160ms;
}
.key:hover { background: #b3204f; }
.key:active, .key.down { transform: translateY(4px); border-bottom-width: 1px; }
.key.plain { background: var(--paper); color: var(--ink); border-bottom-color: #9fb6bf; }

/* ---------- Hero: Palm Shallows ---------- */
.hero { background: var(--palm); min-height: 100svh; display: flex; flex-direction: column; padding-top: 24px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; z-index: 2; }
.wordmark { font: 700 32px/1 var(--display); text-decoration: none; letter-spacing: -0.02em; }
.bar nav { display: flex; gap: clamp(14px, 2.4vw, 32px); }
.bar nav a { font-size: var(--s-small); font-weight: 500; text-decoration: none; padding: 10px 0; }
.bar nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-copy { position: relative; z-index: 1; margin: auto 0; padding: 7vh 0 4vh; max-width: min(52vw, 760px); }
.hero h1 { font-size: var(--s-hero); }
.hero h1 span { display: block; }
.hero .lead { margin-top: 28px; max-width: 34ch; }
.hero .key { margin-top: 32px; }

/* The giant pixel sun, cropped by the edges, with the game playing inside. */
.sun {
  position: absolute;
  width: 118vh; height: 118vh;
  right: calc(22% - 59vh); top: calc(55% - 59vh);
  clip-path: url(#pixel-circle);
  background: var(--sun);
}
/* Crop the clip to the play area: the game's HUD and thumb buttons fall outside the sun. */
.sun video, .sun img { position: absolute; top: -12.5%; left: -61%; height: 125%; width: 222%; max-width: none; object-fit: cover; }
.sun .shutter { position: absolute; inset: 0; overflow: hidden; }

/* ---------- Play: the first beach ---------- */
.play { background: var(--lagoon); color: var(--paper); }
.play h2 { font-size: var(--s-big); grid-column: 1 / 8; }
.play .lead { grid-column: 1 / 7; margin-top: 24px; }
.beach { grid-column: 1 / 13; margin-top: clamp(32px, 4vw, 56px); }
.beach canvas { width: 100%; aspect-ratio: 16 / 9; background: var(--palm); image-rendering: pixelated; cursor: pointer; }
.pads { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.pads .group { display: flex; gap: 12px; }
.pad {
  width: 76px; height: 64px; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); border: 0; border-bottom: 5px solid #9fb6bf;
  font: 700 var(--s-body)/1 var(--text); cursor: pointer; touch-action: none; user-select: none;
  transition: transform 90ms var(--ease), border-bottom-width 90ms var(--ease);
}
.pad.jump { width: 120px; background: var(--sand); border-bottom-color: #a77d14; }
.pad.down { transform: translateY(4px); border-bottom-width: 1px; }
#beach-status { min-height: 1.6em; margin-top: 18px; }
.further { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 32px); margin-top: clamp(48px, 6vw, 96px); }
.further figure { margin: 0; }
.further img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.further figcaption { margin-top: 10px; font-size: var(--s-small); }
.band .proof { width: min(560px, 100%); aspect-ratio: 16 / 9; object-fit: cover; margin-top: 16px; }
.beach-foot { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: var(--s-small); }
.beach-foot button { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 8px 0; }

/* ---------- Rules: sentences with switches ---------- */
.rules { background: var(--foam); padding: 0; min-height: auto; }
.band {
  min-height: 20vh; padding: 28px var(--m);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px;
  background: var(--foam); color: var(--soft);
  transition: background-color 380ms var(--ease), color 380ms var(--ease);
}
.band p.say, .band .then p { max-width: none; }
.band p.say { font: 500 var(--s-mid)/1.1 var(--text); letter-spacing: -0.015em; max-width: none; }
.band .then { grid-column: 1; font-size: var(--s-body); max-height: 0; overflow: hidden; opacity: 0; transition: max-height 380ms var(--ease), opacity 300ms, margin 380ms; }
.band.on { color: var(--ink); }
.band.on .then { max-height: 40em; opacity: 1; margin-top: 10px; }
.band.on[data-tone="palm"] { background: var(--palm); }
.band.on[data-tone="mangrove"] { background: var(--mangrove); }
.band.on[data-tone="ember"] { background: var(--ember); }
.band.on[data-tone="storm"] { background: var(--storm-2); color: #fff; }
.toggle {
  grid-column: 2; grid-row: 1; justify-self: end;
  width: 2.4em; height: 1.3em; font-size: var(--s-mid); padding: 0; border: 0; cursor: pointer;
  background: #b8cacf; position: relative; transition: background-color 240ms;
}
.toggle::after { content: ""; position: absolute; top: 0.15em; left: 0.15em; width: 1em; height: 1em; background: #fff; transition: transform 240ms var(--ease); }
.toggle[aria-checked="true"] { background: var(--ink); }
.toggle[aria-checked="true"]::after { transform: translateX(1.1em); }
.band.on[data-tone="storm"] .toggle[aria-checked="true"] { background: #fff; }
.band.on[data-tone="storm"] .toggle[aria-checked="true"]::after { background: var(--storm); }

/* ---------- Islands: tabs and level bands ---------- */
.islands { --field: var(--palm); --fink: var(--ink); --tone-a: rgba(255,255,255,0.42); --tone-b: rgba(255,255,255,0.26); background: var(--field); color: var(--fink); transition: background-color 420ms var(--ease), color 420ms; }
.islands[data-island="1"] { --field: var(--mangrove); }
.islands[data-island="2"] { --field: var(--ember); }
.islands[data-island="3"] { --field: var(--storm); --fink: #fff; --tone-a: rgba(255,255,255,0.12); --tone-b: rgba(255,255,255,0.06); }
.islands-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.islands h2 { font-size: var(--s-big); }
.islands h2 span { display: block; }
.islands h2 .soft { opacity: 0.75; }
.islands-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 40px; margin-top: 56px; }
.tabs { display: flex; flex-direction: column; gap: 6px; }
.tab {
  min-height: 72px; padding: 10px 14px; text-align: left; border: 0; cursor: pointer;
  background: var(--tone-a); color: inherit; font: 500 var(--s-small)/1.25 var(--text);
  transition: background-color 200ms, transform 120ms var(--ease);
}
.tab small { display: block; font-size: var(--s-small); opacity: 0.8; }
.tab:hover { transform: translateX(3px); }
.tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.islands[data-island="3"] .tab[aria-selected="true"] { background: #fff; color: var(--storm); }
.island-shot { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 16px; }
.levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.levels li {
  min-height: 76px; padding: 14px 20px; display: grid; align-items: center;
  grid-template-columns: 5.5em minmax(0, 1fr) auto; gap: 16px; background: var(--tone-a);
}
.levels li:nth-child(even) { background: var(--tone-b); }
.levels .num { font: 700 var(--s-body)/1 var(--text); font-variant-numeric: tabular-nums; }
.levels .what { font-weight: 500; font-size: var(--s-body); }
.levels .note { display: block; font-size: var(--s-small); font-weight: 400; opacity: 0.85; }
.levels .who { display: flex; gap: 6px; }
.levels .who canvas { width: 32px; height: 32px; image-rendering: pixelated; }

/* ---------- Get it: the game's own pause panel ---------- */
.get { background: var(--storm); color: #fff; display: grid; align-items: center; min-height: 92svh; }
.get .grid { align-items: end; }
.closing { grid-column: 1 / 6; align-self: end; }
.closing h2 { font-size: var(--s-big); line-height: 0.92; }
.closing h2 span { display: block; }
.closing p { margin-top: 22px; max-width: 36ch; }
.panel {
  grid-column: 7 / 12; justify-self: end; width: min(440px, 100%);
  background: var(--foam); color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); /* taste-skill-ignore: the game dialog floats over play */
  transition: background-color 300ms, color 300ms;
}
.panel[data-mode="night"] { background: #0f2433; color: #e4f2ef; }
.panel .wave { display: block; width: 100%; height: 12px; }
.panel .inner { padding: 14px 24px 24px; }
.panel h3 { font: 700 var(--s-mid)/1 var(--display); margin: 0; }
.panel .body { margin-top: 8px; font-size: var(--s-small); opacity: 0.85; }
.seg { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; background: rgba(18, 50, 74, 0.1); }
.panel[data-mode="night"] .seg { background: rgba(255, 255, 255, 0.08); }
.seg button { min-height: 44px; border: 0; background: none; color: inherit; font: 500 var(--s-small) var(--text); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--lagoon); color: #fff; }
.panel .key { width: 100%; margin-top: 16px; min-height: 54px; }
.panel .key.plain { margin-top: 10px; }
.panel[data-mode="night"] .key.plain { background: #1a3749; color: #e4f2ef; border-bottom-color: #0a1822; }

/* ---------- Footer: Sand ---------- */
.foot { background: var(--sand); color: var(--ink); min-height: 86svh; display: flex; flex-direction: column; padding-bottom: 32px; }
.foot .name { font: 700 clamp(88px, 21vw, 340px)/0.8 var(--display); letter-spacing: -0.04em; margin: 0 0 0 -0.04em; white-space: nowrap; }
.foot .rows { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
.places { grid-column: 1 / 6; list-style: none; margin: 0; padding: 0; }
.places a { font-size: var(--s-mid); font-weight: 500; text-decoration: none; display: inline-block; padding: 4px 0; overflow-wrap: anywhere; }
.places a:hover { text-decoration: underline; text-underline-offset: 6px; }
.links { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; font-size: var(--s-small); }
.links b { display: block; margin-bottom: 8px; }
.links a { display: block; padding: 4px 0; }
.legal { display: flex; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 96px; font-size: var(--s-small); flex-wrap: wrap; }

/* ---------- Plain pages: privacy, 404 ---------- */
.doc-page { background: var(--foam); }
.doc-page .bar { padding: 24px var(--m); background: var(--palm); }
.doc { max-width: 760px; padding: 64px var(--m) 96px; }
.doc h1 { font-size: clamp(44px, 6vw, 80px); }
.doc h2 { font: 700 var(--s-mid)/1.2 var(--text); letter-spacing: -0.01em; margin: 44px 0 10px; }
.doc p, .doc li { font-size: var(--s-body); }
.doc p + p { margin-top: 12px; }
.doc .meta { margin-top: 16px; color: var(--soft); }

/* ---------- Motion: entrances and the sun's shutter ---------- */
.rise { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: var(--d, 0ms); }
.in .rise, .rise.in { opacity: 1; transform: none; }
.no-js .rise { opacity: 1; transform: none; }
.sun .shutter { clip-path: inset(0 0 0 100%); transition: clip-path 1100ms var(--ease); }
.sun .shutter > * { transform: scale(1.12); transition: transform 1400ms var(--ease); }
.loaded .sun .shutter { clip-path: inset(0); }
.loaded .sun .shutter > * { transform: none; }
.no-js .sun .shutter { clip-path: none; }
.no-js .sun .shutter > * { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; }
  .rise { opacity: 1; transform: none; }
  .sun .shutter { clip-path: none; }
  .sun .shutter > * { transform: none; }
}

/* ---------- Phone ---------- */
@media (max-width: 960px) {
  .hero-copy { max-width: none; margin: 6vh 0 auto; }
  .hero h1 { font-size: 8vw; }
  /* The sun drops below the copy so nothing sits on the headline. */
  .sun { width: 80vw; height: 80vw; left: auto; right: -18vw; top: auto; bottom: -34vw; }
}

@media (max-width: 760px) {
  .hero { padding-top: 16px; }
  .bar nav a:not(.keep) { display: none; }
  .hero-copy { max-width: none; margin: 8svh 0 auto; padding: 0; }
  .hero h1 { font-size: 11vw; }
  .hero .lead { margin-top: 18px; }
  .hero .key { margin-top: 20px; }
  .sun { width: 130vw; height: 130vw; left: -15vw; right: auto; top: 58svh; }
  .play h2, .play .lead { grid-column: 1 / 13; }
  .beach canvas { aspect-ratio: 4 / 3; }
  .further { grid-template-columns: minmax(0, 1fr); }
  .pad { width: 68px; height: 60px; }
  .pad.jump { width: 100px; }
  .band { min-height: 132px; padding: 22px var(--m); }
  .band p.say { font-size: 6.2vw; line-height: 1.15; }
  .toggle { font-size: 26px; }
  .islands h2 { font-size: 6.6vw; }
  .islands-head .key { width: 100%; }
  .islands-body { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
  .tabs { flex-direction: row; position: sticky; top: 0; z-index: 2; background: var(--field); padding: 8px 0; }
  .tab { flex: 1; min-height: 60px; padding: 8px; }
  .levels li { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; }
  .levels .num { grid-column: 1 / 3; }
  .closing, .panel { grid-column: 1 / 13; }
  .closing { align-self: start; }
  .closing h2 { font-size: 13vw; }
  .panel { justify-self: stretch; width: 100%; margin-top: 40px; }
  .foot .name { font-size: 25vw; }
  .places, .links { grid-column: 1 / 13; }
  .places a { font-size: 6.4vw; }
}