/* A page from a harbour tide-table booklet with a field-guide plate printed on it. */
:root {
  --ink: #2b2620;
  --ink-soft: #5b5145;
  --rule: #2b262055;
  --paper: #efe2c0;
  --cell: min(13vw, 64px);
  --cols: 7;
  --rows: 7;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--paper) url(art/paper.webp) repeat;
  background-size: 512px;
  color: var(--ink);
  font: 400 17px/1.45 'Atkinson Hyperlegible', system-ui, sans-serif;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sign { margin: 0; width: min(78%, 360px); line-height: 0; }
.sign img { width: 100%; height: auto; transform: rotate(-1.5deg); }

/* Tide-table row: condensed figures, hairline rules, no boxes. */
.tide-row {
  width: 100%;
  margin: 6px 0 14px;
  border-collapse: collapse;
  font-family: 'Barlow Condensed', sans-serif;
  text-align: center;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.tide-row th {
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 4px 2px 0;
  border-bottom: 1px solid var(--rule);
}
.tide-row td { font-weight: 600; font-size: 22px; padding: 2px; }
.tide-row td + td, .tide-row th + th { border-left: 1px solid var(--rule); }
#t-band { text-transform: lowercase; }

/* The plate: a printed illustration with a thin ink keyline. */
.plate { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.plate figcaption { font-size: 15px; color: var(--ink-soft); text-align: center; max-width: 34ch; }

.board {
  position: relative;
  width: calc(var(--cell) * var(--cols));
  height: calc(var(--cell) * var(--rows));
  background: #d8c49a url(art/sand.webp) repeat;
  /* One copy of the painting spans the board, so its edges rarely show. */
  background-size: calc(var(--cell) * var(--cols));
  outline: 1px solid var(--ink);
  outline-offset: 5px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.board:focus-visible { outline-width: 2px; }

.cell { position: absolute; width: var(--cell); height: var(--cell); }

/* Water cells share one painting, so neighbouring cells line up. */
.water {
  background-image: url(art/water.webp);
  background-size: calc(var(--cell) * var(--cols)) calc(var(--cell) * var(--rows));
  box-shadow: inset 0 0 calc(var(--cell) * 0.12) #3e5a4f66;
}

.sprite {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  display: grid;
  place-items: center;
  transition: transform 110ms ease-out;
  will-change: transform;
  pointer-events: none;
}
.sprite img { width: 92%; height: 92%; object-fit: contain; }
.sprite.rock img { width: 104%; height: 104%; }
.sprite.pebble img { width: 72%; height: 72%; }
.sprite.home img { width: 86%; height: 86%; }
.sprite.hollow img { width: 96%; height: 96%; opacity: 0.9; }
.sprite.crab { z-index: 3; }
.sprite.home, .sprite.pebble { z-index: 2; }
.sprite.crab img { transition: transform 110ms ease-out; }
.sprite.bump img { animation: bump 140ms ease-out; }
@keyframes bump { 40% { translate: var(--bx, 0) var(--by, 0); } }

.board.solved .sprite.crab img { animation: move-in 900ms ease-in forwards; }
.board.solved .sprite.home img { animation: settle 900ms 500ms ease-out; }
@keyframes move-in { 60% { scale: 0.8; } 100% { scale: 0.2; opacity: 0; } }
@keyframes settle { 30% { rotate: -8deg; } 60% { rotate: 6deg; } }

/* Controls: printed words, underlined like booklet cross-references. */
.controls { display: flex; gap: 22px; margin-top: 14px; }
button {
  font: 700 17px 'Atkinson Hyperlegible', sans-serif;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 8px 2px;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: pointer;
}
button:disabled { color: var(--ink-soft); opacity: 0.5; cursor: default; }

.logged {
  width: 100%;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 2px solid var(--ink);
  text-align: center;
}
.logged-line { font: 600 26px/1.15 'Barlow Condensed', sans-serif; margin: 0 0 4px; }
.logged-next { margin: 0; color: var(--ink-soft); }
#countdown { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 19px; color: var(--ink); }
.toast { min-height: 1.4em; margin: 0; color: var(--ink-soft); font-size: 15px; }

.rules {
  max-width: min(92vw, 440px);
  border: 0;
  padding: 18px 20px 12px;
  color: var(--ink);
  background: var(--paper) url(art/paper.webp);
  box-shadow: 0 10px 40px #0005;
}
.rules::backdrop { background: #2b262066; }
.rules h2 { font: 700 26px 'Barlow Condensed', sans-serif; margin: 0 0 6px; border-bottom: 2px solid var(--ink); }
.rules ol { padding-left: 1.2em; margin: 8px 0; }
.rules li { margin-bottom: 6px; }
.archive-list { list-style: none; padding: 0; columns: 3; font-family: 'Barlow Condensed', sans-serif; font-size: 19px; }
.archive-list a { color: var(--ink); }

.colophon { margin-top: 28px; font-size: 14px; color: var(--ink-soft); }
.colophon a { color: inherit; }