/* Inkpond: the hub's tokens, everything a stroke. */
:root {
  --bg: #f5f3ee;
  --ink: #141414;
  --muted: #5e5a53;
  --line: #dcd7cc;
  --hover: #ece8df;
  --accent: #d4322b; /* the float's tip: a float-maker's red */
  --on-accent: #ffffff;
  --chip: rgba(20, 20, 20, 0.06);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sab: var(--random-nav-h, env(safe-area-inset-bottom, 0px));
}
/* The pond's own clock picks the paper, not the phone's setting: paper by
   day, warmer at dawn and dusk, and at night the page goes dark, the ink
   pale, like a drawing scratched out of black */
:root { color-scheme: light; }
:root.night {
  color-scheme: dark;
  --bg: #111111;
  --ink: #eeebe4;
  --muted: #a39f97;
  --line: #3a3733;
  --hover: #1c1b19;
  --accent: #ff6b5e;
  --on-accent: #111111;
  --chip: rgba(238, 235, 228, 0.08);
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}
#pond { position: fixed; inset: 0; }
/* a held view, not a tripod: the picture drifts a hair, slowly (both canvases together) */
#scene, #scene3d, #live { animation: drift 23s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } 50% { transform: translate(1.2px, -0.8px) scale(1.004); } to { transform: translate(-0.8px, 0.6px) scale(1.002); } }
@media (prefers-reduced-motion: reduce) { #scene, #scene3d, #live { animation: none; } }
/* (the picture ends where the hub's navbar begins: the bar sits under a whole picture, like a phone's own) */
#scene, #scene3d, #live { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - var(--random-nav-h, 0px)); display: block; }
#scene { transition: opacity 0.3s; }
/* the 3D pond draws the scenery; the 2D drawing runs under it unseen (and, until the 3D pond is up, neither shows) */
body.three #scene, body.three-wait #scene, body.three-wait #live { visibility: hidden; }
/* (and no drifting: both canvases recomposited every refresh for it, and the ink blurred) */
body.three #scene3d, body.three #live { animation: none; }
/* In-scene text is all one voice, in one place: a paper pill in mono,
   anchored just above the tackle box, clear of the water being watched. */
.hint {
  position: absolute; left: 50%; bottom: calc(12px + var(--sab) + 58px + 24px); transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 8px 16px;
  background-color: var(--bg);
  text-align: center; width: max-content; white-space: normal; text-wrap: balance; color: var(--ink); font: 500 13px/1.3 var(--mono); letter-spacing: 0.04em;
  pointer-events: none; transition: opacity 0.4s;
}
.hint.fade, .hint:empty { opacity: 0; }
/* the map: a little chart of the place under the top bar, on the left (up in the sky, out of
   the picture and from under a thumb): your catches on it, and you */
.chart-btn {
  position: absolute; left: max(12px, env(safe-area-inset-left, 0px)); top: calc(env(safe-area-inset-top, 0px) + 40px); z-index: 2;
  padding: 6px 7px; min-width: 44px; min-height: 44px; border: 0; background-color: var(--bg); color: var(--ink); cursor: pointer; line-height: 0;
}
.chart-btn { min-width: 84px; }
.chart-btn .chart { margin: 0 auto; }
.chart-btn:focus-visible { outline: 1.5px dashed var(--ink); outline-offset: 3px; }
body.walking:not(.paused) .chart-btn { pointer-events: none; }
#live.can-walk { cursor: pointer; }
/* (the resting stick, below) */
/* (where the stick rests: a faint ring at the foot of the picture, a little arrow up; gone while
   it's under a thumb, with a line out, or on a walk somewhere) */
.rest { position: absolute; left: 50%; bottom: calc(12px + var(--sab) + 58px + 24px + 48px); width: 72px; height: 72px; margin-left: -36px; pointer-events: none; color: var(--ink); opacity: 0.62; transition: opacity 0.3s; }
.rest svg { width: 100%; height: 100%; overflow: visible; }
.rest .ring { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 3 4; }
.rest .knob { fill: none; stroke: currentColor; stroke-width: 2; }
.rest .up { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* (until you've walked: the knob nudged up now and then, the way to push it) */
body.teach-walk .rest .knob { animation: nudge 1.6s ease-in-out 1.2s 3; }
@keyframes nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { body.teach-walk .rest .knob { animation: none; } }
body.strolling .rest, body.walking .rest, body.out .rest { opacity: 0; }
.stick { position: fixed; width: 120px; height: 120px; margin: -60px 0 0 -60px; pointer-events: none; z-index: 3; color: var(--ink); }
.stick svg { width: 100%; height: 100%; overflow: visible; }
.stick .ring { fill: var(--bg); fill-opacity: 0.55; stroke: currentColor; stroke-width: 1.8; }
.stick .lean { stroke: currentColor; stroke-width: 1.2; }
.stick .knob { fill: var(--bg); stroke: currentColor; stroke-width: 1.6; }
.chart { display: block; height: auto; overflow: hidden; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.chart .shore { stroke-width: 1.1; }
.chart .deck { stroke-width: 1; }
.chart .fine { stroke-width: 0.6; }
.chart .spot { stroke-width: 1.1; fill: var(--bg); }
.chart .shore.again { stroke-width: 0.5; }
.chart .rule { stroke-width: 0.6; opacity: 0.7; }
.chart .catch { stroke-width: 0.8; fill: var(--bg); }
.chart .catch.solid { fill: var(--ink); }
.chart .dot { fill: var(--ink); stroke: none; opacity: 0.55; }
.chart .dot.solid { opacity: 1; }
.chart .latest { stroke-width: 0.9; stroke-dasharray: 1 2.5; }
.chart .depth { stroke-width: 1.1; stroke-dasharray: 0 2.8; }
.chart .depth-n, .chart .north-n { font: 8px/1 var(--mono); fill: var(--ink); stroke: var(--bg); stroke-width: 3px; paint-order: stroke; text-anchor: middle; }
.chart .north { stroke-width: 0.8; }
.chart .weed, .chart .snag { stroke-width: 0.7; }
.chart .you { fill: var(--accent); stroke: var(--ink); stroke-width: 0.9; }
.chart .you-hatch { stroke-width: 0.6; }
.chart .you-way { stroke-width: 0.7; }
.chart.big { width: 100%; max-width: 420px; margin: 0 auto; cursor: crosshair; }
.chart.big .shore { stroke-width: 1.4; }
.chart.big .catch { stroke-width: 1; }
.chart .tapped { stroke-width: 2; stroke: var(--accent); }
/* where you're going: a ring of ink on the ground there, as you set off */
.going { position: fixed; z-index: 1; width: 64px; height: 32px; margin: -16px 0 0 -32px; pointer-events: none; color: var(--accent); animation: going 1.5s ease-out forwards; }
.going svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: going-draw 0.4s ease-out forwards; }
@keyframes going { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes going-draw { to { stroke-dashoffset: 0; } }
.going.edge { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .going, .going svg { animation: none; stroke-dashoffset: 0; } }
.chart.big .name { font: italic 12px/1 ui-serif, Georgia, serif; fill: var(--ink); stroke: var(--bg); stroke-width: 3.5px; paint-order: stroke; }
.chart-wrap { margin: 4px 0 10px; }
.chart-spots { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 10px 0 4px; }
.chart-where { margin: 0 0 6px; font: italic 15px/1.35 ui-serif, Georgia, serif; }
.chart-spots button { font: italic 14px/1.2 ui-serif, Georgia, serif; color: var(--ink); background: none; border: 0; padding: 10px 10px; min-height: 44px; cursor: pointer; text-align: left; }
.chart-spots button:not([aria-disabled=true]) { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 4px; }
.chart-spots button:disabled, .chart-spots button[aria-disabled=true] { opacity: 0.7; cursor: default; }
.walk-how { margin: 22px 0 0; }
.walk-choice { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.walk-choice button { font: italic 14px/1.2 ui-serif, Georgia, serif; color: var(--ink); background: none; border: 0; padding: 10px 12px; min-height: 44px; cursor: pointer; }
.walk-choice button[aria-checked=true] { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
/* (a switch's on or off, drawn: a little slot, its knob over to the right and inked in when on) */
.walk-choice .switch { display: inline-flex; align-items: center; gap: 8px; }
.walk-choice .switch[aria-checked=true] { font-weight: normal; text-decoration: none; }
.sw { flex: none; position: relative; width: 26px; height: 14px; border: 1.5px solid var(--ink); border-radius: 8px; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 7px; height: 7px; border: 1.5px solid var(--ink); border-radius: 50%; transition: left 0.15s; }
.switch[aria-checked=true] .sw::after { left: 13px; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .sw::after { transition: none; } }
/* the bite: the one instruction that has to be seen now (the same pill, inked) */
.hint.now { font-weight: 600; letter-spacing: 0.08em; }
.meta {
  position: absolute; left: 16px; top: calc(16px + env(safe-area-inset-top, 0px));
  font: 11px/1.3 var(--mono); color: var(--ink); letter-spacing: 0.08em; text-transform: uppercase;
  text-shadow: 0 0 4px var(--bg), 0 0 8px var(--bg);
  pointer-events: none;
}
.buttons { position: absolute; right: 8px; top: calc(4px + env(safe-area-inset-top, 0px)); display: flex; gap: 0; z-index: 2; }
.buttons button { background: none; }
/* The tackle box: three baits in a plain paper box, bottom left, so the
   rod has the other corner to itself. */
.tray {
  position: absolute; left: 14px; bottom: calc(12px + var(--sab)); z-index: 2;
}
.bait { display: flex; gap: 2px; padding: 5px; background-color: var(--bg); }
.tray button, .buttons button {
  width: 48px; height: 48px; padding: 10px; border-radius: 8px;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
}
.tray button svg, .buttons button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tray button:hover, .buttons button:hover { background: var(--ink-under) center bottom 4px / 60% 4px no-repeat; }
/* each bait is named under its drawing */
.tray button { width: 54px; height: 62px; padding: 6px 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.tray button svg { width: 30px; height: 30px; flex: none; }
/* the baits are small pen drawings, a finer nib than the icons: the worm a tube
   (a wide ink stroke, paper down its middle, rings dashed across it) */
.tray button svg.bait-art { width: 38px; height: 30px; stroke-width: 1.05; }
.bait-art .fine { stroke-width: 0.7; }
.bait-art .tube-o { stroke-width: 4.6; }
.bait-art .tube-i { stroke: var(--bg); stroke-width: 2.9; }
.bait-art .tube-r { stroke-width: 2.9; stroke-dasharray: 0.5 2.1; stroke-linecap: butt; }
.bait-art .saddle { stroke-width: 3.6; stroke-linecap: butt; stroke-dasharray: 0.9 0.6; }
.bait-art .dot { fill: currentColor; stroke: none; }
.tray .lbl { font: italic 13px/1.1 ui-serif, Georgia, serif; }
/* what the chosen bait does: a pencilled note over the box */
.bait-note {
  position: absolute; left: 4px; bottom: 100%; margin: 0 0 6px; width: max-content; max-width: min(240px, 70vw);
  font: italic 14px/1.3 ui-serif, Georgia, serif; color: var(--ink);
  text-shadow: 0 0 3px var(--bg), 0 0 6px var(--bg), 0 0 9px var(--bg);
  transition: opacity 0.4s; pointer-events: none;
}
.bait-note.fade, .bait-note:empty { opacity: 0; }
body.noting .hint:not(.now) { opacity: 0; }
/* the chosen bait: an ink ring, the same in every phase; the accent is the float's */
.tray button[data-ink] { background-image: none; }
.tray button[aria-checked="true"] { background: var(--ink-frame) 0 0 / 100% 100% no-repeat; } /* (over the hover underline too) */
/* while the line is out the bait can't change: the others go quiet */
/* (the line's out: the other baits can't be chosen; drawn with a finer pen, not in grey) */
body.out .tray button[aria-checked="false"] svg { stroke-width: 0.8; stroke-dasharray: 2 2.5; }
/* landing a fish, the card, the release: the tray steps out of the way */
.tray { transition: opacity 0.3s; }
body.landing .tray { opacity: 0; pointer-events: none; }
.tray button:focus-visible, .buttons button:focus-visible { outline: 1.5px dashed var(--ink); outline-offset: 3px; }
#sound[aria-pressed="false"] .wave { display: none; }
#sound[aria-pressed="false"] svg { stroke-dasharray: 2 2.5; }
/* dawn and dusk warm the paper (only on the light scheme) */
body.dusk { --bg: #efe6d4; }

/* Drawn frames (ui.js): an element with data-ink gets its outline drawn in
   ink as a background, sized to it. No CSS borders, no colour. */
[data-ink] { background-image: var(--ink-frame); background-size: 100% 100%; background-repeat: no-repeat; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lettered { display: block; max-width: 100%; height: auto; color: var(--ink); }
.lettered-text { font: italic 600 1.1rem/1.2 ui-serif, Georgia, serif; }

/* Sheets: the card after a catch, the logbook. They slide up over the pond,
   a sheet of the same paper with a drawn edge. */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: 88%;
  background-color: var(--bg); color: var(--ink);
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sheet.up { transform: none; }
/* the logbook keeps one height whichever page is open */
.sheet.book { height: 88%; }
.sheet-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 6px 18px; }
.sheet-bar h2 { font: italic 600 1.15rem/1.2 ui-serif, Georgia, "Times New Roman", serif; min-height: 26px; display: flex; align-items: center; }
.sheet-body { overflow: auto; padding: 0 18px calc(24px + var(--sab)); -webkit-user-select: text; user-select: text; }
.icon { width: 40px; height: 40px; padding: 8px; border: 0; background: transparent; color: var(--ink); border-radius: 10px; cursor: pointer; }
.icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon:hover { background: var(--ink-under) center bottom 2px / 60% 4px no-repeat; }
/* the logbook's index: words, the open one underlined in ink */
.tabs { display: flex; gap: 6px; margin: 0 0 14px; }
.tabs button { font: italic 0.95rem/1.2 ui-serif, Georgia, serif; color: var(--ink); background: none; border: 0; padding: 6px 8px 9px; cursor: pointer; }
.tabs button[aria-selected="true"] { font-weight: 600; background: var(--ink-under) left bottom / 100% 4px no-repeat; }
.label { font: 11px/1.3 var(--mono); color: var(--ink); letter-spacing: 0.08em; text-transform: uppercase; }
.page-head { margin: 4px 0 10px; }
.page-title { margin: 0; }
.section { margin: 22px 0 10px; }
.count { color: var(--ink); font: italic 0.95rem/1.4 ui-serif, Georgia, serif; margin: 2px 0 6px; }

/* the plate after a catch: pasted in, taped, the facts written under it */
.card .pasted { position: relative; display: block; max-width: 520px; transform: rotate(var(--tilt, 0deg)); margin: 8px 6px 0; }
.card canvas { width: 100%; aspect-ratio: 520 / 320; display: block; background: var(--bg); }
.tape { position: absolute; top: -7px; width: 56px; height: 18px; background: var(--ink-tape) center / 100% 100% no-repeat; z-index: 1; pointer-events: none; }
.tape.l { left: -12px; transform: rotate(-33deg); }
.tape.r { right: -12px; transform: rotate(31deg); background-image: var(--ink-tape-2); }
.card .facts { display: grid; grid-template-columns: 82px 1fr; column-gap: 14px; margin: 20px 0 0; }
.card .facts dt, .card .facts dd { padding: 7px 0 6px; background: var(--ink-rule) left bottom / 100% 4px no-repeat; }
.card .facts dt { color: var(--ink); font: 11px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding-top: 9px; }
.card .facts dd { font: italic 16px/1.35 ui-serif, Georgia, serif; font-variant-numeric: tabular-nums; }
.card .first { margin-top: 14px; color: var(--ink); font: italic 15px/1.4 ui-serif, Georgia, serif; display: flex; gap: 8px; align-items: center; }
.card .first svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; justify-content: flex-start; margin: 20px 0 4px; }
.actions button, .actions a {
  font: italic 1rem/1.2 ui-serif, Georgia, serif; color: var(--ink); background: var(--ink-under) left calc(100% - 9px) / 100% 4px no-repeat; border: 0; padding: 10px 2px; min-height: 44px; cursor: pointer;
}
.actions .primary { height: 48px; padding: 0 24px; background: var(--ink-frame) 0 0 / 100% 100% no-repeat; font-weight: 600; }

/* the scrapbook: plates pasted in at a slant, taped; spaces for the rest */
.scrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 18px; padding: 6px 4px 4px; }
.scrap .pasted, .scrap .slot { position: relative; font: inherit; text-align: left; color: var(--ink); background-color: var(--bg); border: 0; padding: 8px 8px 10px; cursor: pointer; transform: rotate(var(--tilt, 0deg)); }


.scrap .slot { cursor: default; }
.scrap canvas { width: 100%; aspect-ratio: 520 / 320; display: block; }

.scrap .q { position: absolute; right: 10px; top: 4px; font: italic 600 22px/1 ui-serif, Georgia, serif; }
.scrap .note { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.scrap .name { font: italic 600 15px/1.25 ui-serif, Georgia, serif; }
.scrap .sub { font: italic 13px/1.3 ui-serif, Georgia, serif; }
.scrap .pasted:hover { transform: rotate(var(--tilt, 0deg)) translateY(-2px); }
/* sightings: a doodle, a name, a tally */
.seen { display: grid; gap: 4px; }
.sighting { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 2px 0 4px; background: var(--ink-rule) left bottom / 100% 4px no-repeat; }
.sighting .doodle { width: 44px; height: 40px; color: var(--ink); }
.sighting .name { font: italic 15px/1.3 ui-serif, Georgia, serif; }
.tally { color: var(--ink); }
/* the diary: ruled lines, one fish each */
.diary { list-style: none; padding: 0; margin: 0; }
/* the pond's map: its shore in ink, the pegs as numbered rings (yours filled) */
.pond-map-wrap { display: grid; gap: 8px; justify-items: center; margin: 4px 0 12px; }
.pond-map-wrap > .dim { margin: 0; font-size: 13px; }
.pond-map { width: min(100%, 340px); height: auto; overflow: hidden; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.pond-map .shore { stroke-width: 1.3; }
.pond-map .shore.again { stroke-width: 0.5; }
.pond-map .stream { stroke-width: 1; }
.pond-map .rule { stroke-width: 0.7; }
.pond-map .deck { stroke-width: 1; }
.pond-map .reed { stroke-width: 0.8; }
.pond-map .head { fill: var(--ink); stroke: none; }
.pond-map .pad { stroke-width: 0.8; fill: var(--bg); }
.pond-map .peg .ring { stroke-width: 1.2; fill: var(--bg); }
.pond-map .peg .hatch { stroke-width: 0.6; opacity: 0.55; }
.pond-map .peg text { font: italic 600 13px/1 ui-serif, Georgia, serif; fill: var(--ink); stroke: var(--bg); stroke-width: 4px; paint-order: stroke; text-anchor: middle; }
.pond-map .peg .kinds { stroke-width: 1.2; }
.pond-map .peg[role=button]:not([aria-disabled]) { cursor: pointer; }
.pond-map .peg:focus-visible { outline: 1.5px dashed var(--ink); outline-offset: 2px; }
.peg-names .you { font-style: normal; }
.peg-names { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 18px; font: italic 13px/1.5 ui-serif, Georgia, serif; }
.diary button { width: 100%; display: grid; grid-template-columns: 54px 1fr auto; grid-template-areas: "when what len" "when how how"; column-gap: 10px; text-align: left; font: inherit; color: var(--ink); background: var(--ink-rule) left bottom / 100% 4px no-repeat; border: 0; padding: 8px 2px 9px; cursor: pointer; }
.diary .when { grid-area: when; font: 11px/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; padding-top: 2px; }
.diary .what { grid-area: what; font: italic 600 15px/1.3 ui-serif, Georgia, serif; }
.diary .len { grid-area: len; font: italic 15px/1.3 ui-serif, Georgia, serif; font-variant-numeric: tabular-nums; }
.diary .how { grid-area: how; font: italic 13px/1.3 ui-serif, Georgia, serif; }
.foot { margin: 26px 0 4px; }
.foot button { font: italic 0.92rem/1.2 ui-serif, Georgia, serif; color: var(--ink); background: var(--ink-under) left bottom / 100% 4px no-repeat; border: 0; padding: 8px 0; cursor: pointer; }
/* the pond record: a ledger */
table.record { width: 100%; border-collapse: collapse; font: italic 0.92rem/1.3 ui-serif, Georgia, serif; margin-bottom: 14px; }
table.record th { text-align: left; font: 11px/1.6 var(--mono); color: var(--ink); letter-spacing: 0.08em; text-transform: uppercase; font-weight: normal; padding: 4px 6px 6px; background: var(--ink-rule-2) left bottom / 100% 4px no-repeat; }
table.record td { padding: 6px 6px 7px; background: var(--ink-rule) left bottom / 100% 4px no-repeat; font-variant-numeric: tabular-nums; vertical-align: top; }
table.record td.dim, p.dim { font-style: italic; }
.initials { margin: 18px 0 0; }
.initials .row { display: flex; align-items: flex-end; gap: 12px; }
.initials input {
  font: 600 20px/1.2 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; width: 96px; text-align: left;
  color: var(--ink); background: var(--ink-under) left bottom / 100% 4px no-repeat; border: 0; border-radius: 0; padding: 4px 0 5px;
}
.initials input::placeholder { color: transparent; }
.initials .sign { font: italic 1rem/1.2 ui-serif, Georgia, serif; color: var(--ink); background: var(--ink-under) left bottom / 100% 4px no-repeat; border: 0; padding: 8px 2px; min-height: 40px; cursor: pointer; }
.initials .note { display: block; font: italic 13px/1.4 ui-serif, Georgia, serif; margin-top: 6px; }
/* a testing code, at the foot of Places: its own rules (it looks like the initials field, but isn't it) */
.code { margin-top: 28px; opacity: .85; }
.code .code-label, .walk-how .code-label { font: 12px/1.4 var(--mono); letter-spacing: .04em; margin-bottom: 2px; }
.code .code-row { display: flex; align-items: flex-end; gap: 12px; }
.code input {
  font: 600 18px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; width: 11em; text-align: left;
  color: var(--ink); background: var(--ink-under) left bottom / 100% 4px no-repeat; border: 0; border-radius: 0; padding: 4px 0 5px;
}
.code .code-enter { font: italic 1rem/1.2 ui-serif, Georgia, serif; color: var(--ink); background: var(--ink-under) left bottom / 100% 4px no-repeat; border: 0; padding: 8px 2px; min-height: 40px; cursor: pointer; }
.code .code-note { display: block; font: italic 13px/1.4 ui-serif, Georgia, serif; margin-top: 6px; }
/* places: postcards pasted in; a locked one is a dashed space with a padlock */
.places { display: grid; gap: 16px; }
.place { position: relative; padding: 14px 16px 16px; }
.place h3 { margin-bottom: 4px; }
.place p { font: italic 0.95rem/1.4 ui-serif, Georgia, serif; }
.place .padlock { position: absolute; right: 14px; top: 12px; width: 20px; height: 24px; color: var(--ink); }
.credits p { font: 0.95rem/1.5 ui-serif, Georgia, serif; margin: 0 0 10px; }
.credits a { color: var(--ink); text-decoration: underline 1px; text-underline-offset: 3px; }
.sheet-body p.note { font: italic 0.85rem/1.4 ui-serif, Georgia, serif; margin: 10px 0; }
@media (min-width: 720px) {
  .sheet { left: 50%; right: auto; width: 640px; transform: translate(-50%, 100%); }
  .sheet.up { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .sheet, #scene, .hint { transition: none; } }

/* the cast's camera (the 3D pond: the 2D drawing drifts on its own): a slight lean in toward the water while the float flies, a small dip at the splash */
body.three #scene3d, body.three #live { transform-origin: 50% 40%; transition: transform 0.5s cubic-bezier(.3,.7,.3,1); }
body.three.flying #scene3d, body.three.flying #live { transform: scale(1.015); transition-duration: var(--fly, 1s); transition-timing-function: ease-in-out; }
body.three.splash #scene3d, body.three.splash #live { transform: scale(1.015) translateY(2px); transition-duration: 0.08s; }
@media (prefers-reduced-motion: reduce) { body.three #scene3d, body.three #live { transform: none !important; transition: none !important; } }

/* on a walk the bait tray steps aside: nothing to choose till you're at a spot */
#tray { transition: opacity 0.4s, visibility 0.4s; }
body.walking #tray { opacity: 0; visibility: hidden; }

/* a find by the path: its button where the tackle box sits (the box is put away on a walk) */
.find-btn {
  position: absolute; left: 50%; bottom: calc(12px + var(--sab) + 6px); transform: translateX(-50%); z-index: 2;
  padding: 9px 16px; min-height: 44px; border: 0; background-color: var(--bg); color: var(--ink); cursor: pointer;
  font: 500 13px/1.2 var(--mono); letter-spacing: 0.04em; white-space: nowrap;
}
.find-btn:focus-visible { outline: 1.5px dashed var(--ink); outline-offset: 3px; }
/* the find, picked up: its sketch pasted in, what it is, and (now and then) a note copied out */
.find-card .sketch { display: block; width: min(210px, 62%); margin: -4px auto 10px; } /* (sketched straight onto the page, not pasted in) */
.find-art { width: 100%; height: auto; display: block; color: var(--ink); }
.find-art.big { aspect-ratio: 120 / 100; }
.sheet-body .find-line { font: italic 1rem/1.45 ui-serif, Georgia, serif; margin: 6px 0; }
.sheet-body .find-tip, .scrap .tip { font-family: var(--mono); font-style: normal; font-size: 13px; }
.sheet-body .find-tip { padding: 8px 10px; margin: 8px 0; background: var(--ink-rule) left bottom / 100% 4px no-repeat; }
.scrap.finds .pasted { cursor: default; }
.scrap.finds .pasted:hover { transform: rotate(var(--tilt, 0deg)); }
.scrap.finds .find-art { width: 64px; }
/* the finds page: a row each, the sketch beside the words */
.scrap.finds { grid-template-columns: 1fr; gap: 12px; }
.scrap.finds .pasted.find { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; }
.scrap.finds .pasted.find .note { margin-top: 0; }
.scrap.finds .slot { padding: 6px 10px; }
.scrap.finds .slot .note { margin-top: 0; }
.scrap.finds .slot .q { top: 50%; transform: translateY(-50%); font-size: 18px; }
/* (the card's sketch a pen's line, not a marker's; the meta lines in the HUD's mono) */
.find-art path { vector-effect: non-scaling-stroke; }
.find-art .outline { stroke-width: 1.2px; } .find-art .detail { stroke-width: .9px; } .find-art .shade { stroke-width: .6px; opacity: .8; }
.find-art.big .outline { stroke-width: 1.8px; } .find-art.big .detail { stroke-width: 1.15px; } .find-art.big .shade { stroke-width: .85px; }
.find-card .find-meta, .scrap.finds .pasted.find .sub.find-meta { font: 11px/1.4 var(--mono); letter-spacing: .04em; font-style: normal; opacity: .75; margin-top: 4px; }

/* going somewhere else: a drawn postcard of the place flips up over the page while it's drawn, then away */
.flipcard {
  position: fixed; left: 50%; top: 42%; z-index: 20; width: min(300px, 76vw); padding: 14px 14px 10px; color: var(--ink);
  background: var(--bg) var(--ink-frame, none) 0 0 / 100% 100% no-repeat; box-shadow: 0 2px 0 var(--ink);
  transform: translate(-50%, -50%) perspective(700px) rotateY(-90deg) rotate(-2deg); transition: transform 0.5s cubic-bezier(.3,.7,.3,1), opacity 0.5s; opacity: 0; pointer-events: none;
}
.flipcard.in { transform: translate(-50%, -50%) perspective(700px) rotateY(0deg) rotate(-2deg); opacity: 1; }
.flipcard.out { transform: translate(-50%, -50%) perspective(700px) rotateY(90deg) rotate(-2deg); opacity: 0; }
.flipcard svg { display: block; width: 100%; height: auto; }
.flipcard p { margin: 6px 0 0; text-align: center; }
@media (prefers-reduced-motion: reduce) { .flipcard { transition: opacity 0.3s; transform: translate(-50%, -50%); } .flipcard.out { transform: translate(-50%, -50%); } }
.place .tide { font: 12px/1.4 var(--mono); letter-spacing: 0.03em; margin: 4px 0; }
.news-art { padding: 10px; } .news-art svg { display: block; width: 100%; height: auto; color: var(--ink); }
.sheet-body .pasted:has(.news-art) { display: block; width: min(260px, 80%); margin: 6px auto 14px; position: relative; transform: rotate(var(--tilt, 0deg)); }
.flipcard[data-ink] { border-radius: 2px; }
.place .here { font: 12px/1.4 var(--mono); letter-spacing: .04em; opacity: .75; margin-top: 8px; }
/* the loch's thing: each sighting with a small drawing of it */
.diary.myth li { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.myth-art { flex: 0 0 auto; width: 72px; color: var(--ink); }
.myth-art svg { width: 72px; height: 38px; display: block; }