/*
 * The game's own stylesheet. Colour, spacing and motion values come from tokens.css (the site's tokens,
 * vendored by tools/brand.mjs); this file names no colour of its own. Two type families, used the way the site
 * uses them: Besley where the crab speaks in the first person (the voice), Barlow Semi Condensed for figures,
 * labels, tables and controls (the evidence).
 *
 * The layout has one idea: menus are written on the water. While a menu is up the tide stands at the line
 * (the canvas draws that), and the text sits on the sea below it. Starting a run drains the sea away.
 */

@font-face {
  font-family: 'Besley';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/besley-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-semi-condensed-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2');
}

:root {
  --font-display: 'Besley', Georgia, 'Times New Roman', serif;
  --font-text: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  /* Where the water stands while a menu is up, in pixels from the top. The script keeps this in step with the canvas. */
  --tide-y: 30vh;
  /* Where the water's edge is at rest, in pixels from the top. The script's. */
  --shore-y: 74vh;
  /* How far the walkable sand starts from each side of the window (rocks close both ends). Also the script's. */
  --beach-left: 0px;
  --beach-right: 0px;
  --gutter: clamp(16px, 4.6vw, 60px);
  /* The quiet tone of the surface something is set on, and the colour of the focus ring there: the site's
     own rule. On the sea both lean on the sand's colour and the light; on the sand, on the sea's colour. */
  --quiet: var(--ink-75);
  --focus: var(--light);
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--field);
  color: var(--ink);
}
body {
  font-family: var(--font-text);
  font-size: var(--text-m);
  font-weight: 400;
  line-height: 1.42;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
p,
ul,
ol,
dl,
dd { margin: 0; padding: 0; }
ul,
ol { list-style: none; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:disabled { cursor: default; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.beach {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.stage[data-stage='run'] .beach { cursor: crosshair; }

/* ---------------------------------------------------------------- figures: any number that can change */

.figure {
  font-family: var(--font-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(2.5rem, 5.6vw, 3.5rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
}
.figure--big { font-size: clamp(4rem, 10vw, 6.5rem); }
.unit {
  margin-left: 9px;
  font-size: var(--text-s);
  font-weight: 500;
}

/* ---------------------------------------------------------------- the run: what sits on the dry sand */

/* Everything in here is sized in em, and the script sets --hud-scale from how large the beach is drawn, so the
   figures keep their proportion to the scene on a large screen. On a phone the scale is 1. */
.hud {
  position: absolute;
  inset: 0;
  color: var(--field);
  --quiet: var(--field-80);
  --focus: var(--field);
  font-size: calc(1rem * var(--hud-scale, 1));
  pointer-events: none;
}
.hud-points {
  position: absolute;
  top: max(0.75em, env(safe-area-inset-top));
  left: max(calc(var(--beach-left) + 1.1em), env(safe-area-inset-left));
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}
.hud-points .figure {
  display: inline-block;
  font-size: 3.4em;
  transform-origin: left bottom;
}
.hud-points .unit {
  margin-left: 0.6em;
  font-size: 0.94em;
}
.hud-points.is-bumped .figure { animation: bump var(--slow) var(--ease); }
@keyframes bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.hud-side {
  position: absolute;
  top: max(0.75em, env(safe-area-inset-top));
  right: max(calc(var(--beach-right) + 1.1em), env(safe-area-inset-right));
  text-align: right;
}
.hud-time {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.75em;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}
.hud-tools {
  display: flex;
  justify-content: flex-end;
  gap: 0.75em;
  margin-top: 0.12em;
  pointer-events: auto;
}
.tool {
  min-height: 1.9em;
  padding: 0.25em 0;
  font-size: 0.94em;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  position: relative;
}
/* A text button this small still gets a full-size target. */
.tool::after {
  content: '';
  position: absolute;
  inset: -8px -6px;
}
.tool:hover { text-decoration-thickness: 2px; }

/* The red flag: a rogue wave has been announced. The only place in the page the alarm colour appears. */
.flag {
  position: absolute;
  top: calc(max(0.75em, env(safe-area-inset-top)) + 4.1em);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  column-gap: 0.62em;
  padding: 0.38em 0.88em 0.56em 0.62em;
  background: var(--ink);
  border: 2px solid var(--alarm);
  border-radius: var(--radius);
  color: var(--alarm);
  white-space: nowrap;
}
.flag-mark {
  align-self: center;
  width: 0;
  height: 0;
  border-left: 0.88em solid var(--alarm);
  border-top: 0.44em solid transparent;
  border-bottom: 0.44em solid transparent;
}
.flag-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.56em;
  line-height: 1;
}
.flag-pulse {
  font-size: 0.94em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--field);
}
.flag-bar {
  grid-column: 1 / -1;
  height: 0.25em;
  margin-top: 0.38em;
  background: color-mix(in srgb, var(--alarm) 22%, transparent);
}
.flag-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--alarm);
  transform-origin: left center;
}

.note {
  position: absolute;
  left: 50%;
  bottom: max(1.4em, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 0.38em 0.88em;
  background: var(--ink);
  color: var(--field);
  border-radius: var(--radius);
  font-size: 0.94em;
  font-weight: 500;
  text-align: center;
}

/* With thumbs on the glass the bottom of the screen is taken: a note goes just under the water's edge instead. */
.stage[data-device='touch'] .note {
  bottom: auto;
  top: calc(var(--shore-y, 60vh) + 18px);
}

/* ---------------------------------------------------------------- menus: written on the water */

.tide {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--tide-y);
  bottom: 0;
  padding: clamp(26px, 5.2vh, 44px) max(var(--gutter), env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, 0.86fr);
  column-gap: clamp(28px, 4.4vw, 68px);
  row-gap: var(--space-6);
  align-content: start;
  color: var(--ink);
  -webkit-user-select: text;
  user-select: text;
}
.tide h2 {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--hairline);
  font-family: var(--font-text);
  font-size: var(--text-s);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6.2vw, 5rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
/* The word is wider than its column on purpose: it runs on over the water, like the swell in it. Nothing
   sits to its right at that height (the next column starts lower). */
.tide-rules,
.board { padding-top: clamp(0px, 8vw, 5.4rem); }
/* A swell travels through the word: each letter grows heavier and lighter again in turn. It stays within
   the heavy end of the face, so that at any one moment the word is still one word in one weight of voice. */
.title span {
  display: inline-block;
  font-weight: var(--weight, 800);
  animation: swell 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.3s);
}
.title .gap { width: 0.26em; }
@keyframes swell {
  0%, 100% { font-weight: 620; }
  50% { font-weight: 900; }
}
.headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lead {
  max-width: 32em;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.34vw, 1.125rem);
  line-height: 1.42;
  text-wrap: pretty;
}
.lead:empty { display: none; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-5);
}
/* The one thing to press is the colour of the sand, as on the site. The light is for the pointer over it. */
.go {
  min-height: 52px;
  padding: 0 30px;
  background: var(--ink);
  color: var(--field);
  border-radius: var(--radius);
  font-family: var(--font-text);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.go:hover:not(:disabled) { background: var(--light); }
.go:active:not(:disabled) { transform: scale(0.97); }
.go:disabled {
  background: var(--ink-25);
  color: var(--quiet);
}
.link {
  min-height: var(--target);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  font-weight: 500;
}
.link:hover { text-decoration-thickness: 2px; }
.status {
  min-height: 1.4em;
  margin-top: var(--space-3);
  font-size: var(--text-s);
  color: var(--quiet);
}
.who {
  margin-top: var(--space-2);
  font-size: var(--text-s);
}
.who strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mine {
  margin-top: var(--space-1);
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums lining-nums;
}
.who .link {
  position: relative;
  min-height: 0;
  margin-left: 0.5em;
}
.who .link::after {
  content: '';
  position: absolute;
  inset: -12px -8px;
}

.how li {
  position: relative;
  padding-left: 1.1em;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  line-height: 1.42;
  text-wrap: pretty;
}
.how li + li { margin-top: var(--space-2); }
.how li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.46em;
  height: 0.46em;
  border-radius: 50%;
  background: var(--light);
}
.keys,
.chain,
.feed,
.fact { margin-top: var(--space-4); text-wrap: pretty; }
.chain,
.feed,
.fine,
.keys { font-size: var(--text-s); line-height: 1.4; }
.feed { margin-top: var(--space-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.feed[data-state='down'] { color: var(--quiet); }
.fine { margin-top: var(--space-3); color: var(--quiet); }

.board-rows li {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr) auto 4.3em;
  column-gap: 10px;
  align-items: baseline;
  padding: 4px 0 3px;
  border-bottom: var(--hairline);
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums lining-nums;
}
.board-rows .rank { color: var(--quiet); }
.board-rows .player { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.board-rows .score { font-weight: 600; font-size: 1.125rem; text-align: right; }
.board-rows .took { color: var(--quiet); text-align: right; }
.board-rows li.is-me .player::after {
  content: ' (me)';
  color: var(--light);
  font-weight: 600;
}
.board-rows .empty {
  display: block;
  padding: 8px 0;
  color: var(--quiet);
}

.result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: var(--space-5);
}
.result-time {
  margin-left: 1.2em;
  font-weight: 500;
  font-size: var(--text-l);
  font-variant-numeric: tabular-nums lining-nums;
}
.tally {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: baseline;
  font-variant-numeric: tabular-nums lining-nums;
}
.tally dt { font-weight: 500; }
.tally .count { font-weight: 600; font-size: 1.125rem; text-align: right; }
.tally .worth { color: var(--quiet); font-size: var(--text-s); text-align: right; }
.tally .none { grid-column: 1 / -1; color: var(--quiet); }

.noscript {
  position: absolute;
  inset: auto var(--gutter) 24px;
  color: var(--ink);
}

/* ---------------------------------------------------------------- touch */

.drop {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(26px, env(safe-area-inset-bottom));
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--field);
  font-family: var(--font-text);
  font-size: 1.375rem;
  font-weight: 600;
  touch-action: none;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.drop:active { transform: scale(0.93); }
.drop[data-empty='true'] { opacity: 0.38; }

/* ---------------------------------------------------------------- narrower screens */

@media (max-width: 1100px) {
  .tide { column-gap: clamp(22px, 3.4vw, 40px); }
  .title { font-size: clamp(2.5rem, 5.6vw, 3.75rem); }
  .tide-rules,
  .board { padding-top: clamp(0px, 7vw, 4.2rem); }
  .lead { font-size: 1.0625rem; }
}
@media (max-width: 900px) {
  .tide {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
  .tide-main { grid-column: 1; grid-row: 1; }
  .tide-rules { grid-column: 1; grid-row: 2; padding-top: 0; }
  .board { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 700px) {
  .tide {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-5);
    padding-top: 22px;
  }
  .tide-main,
  .tide-rules,
  .board { grid-column: 1; grid-row: auto; padding-top: 0; }
  .go { width: 100%; }
  .actions { gap: var(--space-2) var(--space-5); }
  .flag { top: calc(max(0.75em, env(safe-area-inset-top)) + 6.4em); }
  .hud-points .figure { font-size: 2.75em; }
}
/* Short, wide windows (the site's frame, a phone on its side): the three columns stand side by side however
   narrow they get, so nothing waits half in view in a second row, and each column says only what a first
   look needs. What is left out here is on the page that frames the game, and comes back in a taller window. */
@media (max-height: 640px) and (min-width: 701px) {
  .tide {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, 0.86fr);
    column-gap: clamp(20px, 3.4vw, 40px);
    row-gap: var(--space-4);
    padding-top: 16px;
  }
  .tide-main,
  .tide-rules,
  .board { grid-column: auto; grid-row: auto; }
  .title { font-size: clamp(2.25rem, 9vh, 3.25rem); }
  /* Clear of the title's line, which runs on over these two columns. */
  .tide-rules,
  .board { padding-top: clamp(2.5rem, 10.5vh, 3.75rem); }
  .lead { margin-top: var(--space-2); font-size: 1rem; }
  .actions { margin-top: var(--space-3); }
  .go { min-height: 46px; }
  .how li { font-size: 0.875rem; }
  .how li + li { margin-top: var(--space-1); }
  .board-rows li { padding: 3px 0 2px; }
  .chain,
  .fine { display: none; }
}
@media (max-height: 500px) and (min-width: 701px) {
  .keys { display: none; }
}

/* ---------------------------------------------------------------- less motion */

@media (prefers-reduced-motion: reduce) {
  .title span { animation: none; }
  .hud-points.is-bumped .figure { animation: none; }
  .go,
  .drop { transition: none; }
}
.stage[data-motion='reduced'] .title span { animation: none; }
.stage[data-motion='reduced'] .hud-points.is-bumped .figure { animation: none; }