:root {
  color-scheme: light;
  --ink: #09283d;
  --paper: #eee7d6;
  --green: #315743;
  --blue-pencil: #145697;
  --mono: 'IBM Plex Mono', monospace;
  --condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-family: var(--mono);
  color: var(--ink);
  background: #132630;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  min-height: 100vh;
  padding: clamp(12px, 4vw, 48px) 18px 40px;
  background:
    radial-gradient(ellipse at 10% 0, #8a877056, transparent 55%),
    radial-gradient(ellipse at 95% 95%, #51664f60, transparent 55%),
    repeating-linear-gradient(128deg, #ffffff02 0 1px, transparent 1px 4px),
    #152c35;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button, a, input { touch-action: manipulation; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #086cad;
  outline-offset: 4px;
}
[hidden] { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.desktop-binding { display: none; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* One responsive page, using the proportions of the approved phone mockup. */
.binder {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: min(100%, 808px);
  margin: 0 auto;
  padding: 0 7.9% 0 0;
  padding-right: 64px;
}
.binder-cover {
  position: absolute;
  z-index: -4;
  inset: -16px -11px -21px -18px;
  border: 1px solid #506573;
  border-radius: 13px 27px 26px 11px;
  background:
    repeating-linear-gradient(27deg, #819aab13 0 1px, transparent 1px 5px),
    repeating-linear-gradient(111deg, #66859815 0 1px, transparent 1px 7px),
    #102c40;
  box-shadow: 0 2px 3px #0009, 0 20px 50px #0005, inset 0 0 0 5px #0b2334, inset 0 0 0 6px #647d6a3d;
}
.binder-spine {
  position: absolute;
  z-index: 2;
  top: -1px;
  bottom: -6px;
  left: -13px;
  width: 18px;
  border: 1px solid #968674;
  background:
    repeating-linear-gradient(0deg, #ffffff40 0 1px, #655a4230 1px 2px, transparent 2px 48px),
    linear-gradient(90deg, #b3a48b, #e1d4b9 14%, #716652 29%, #d6c5a4 40%, #f8e8c9 50%, #aa9779 60%, #e5d8ba 80%, #665a4a);
  box-shadow: 3px 1px 5px #493e4240;
}
.paper-stack {
  position: absolute;
  z-index: -1;
  inset: 2px 63px -7px -2px;
  background: #b5ab93;
  border: 1px solid #9c947e;
  transform: rotate(.12deg);
  box-shadow: 2px 2px #d4c8aa, 3px 3px #867b64, 5px 5px #d8cdb7, 6px 6px #a59579, 7px 8px 6px #0006;
}
.page-stage {
  position: relative;
  z-index: 2;
  perspective: 2200px;
  perspective-origin: 0 45%;
  min-height: 0;
}
.sheet {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  min-height: var(--page-height, 0px);
  border: 1px solid #c3b8a0;
  background: var(--paper);
  box-shadow: inset 5px 0 9px #86735025, inset 0 0 1px 2px #faf5e766;
  transform-origin: left center;
}
.sheet::before {
  position: absolute;
  z-index: -1;
  content: '';
  inset: 5px;
  border: 1px solid #948d7730;
  pointer-events: none;
}
.paper-grain {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .43;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.53' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.18'/%3E%3Cg fill='none' stroke='%23736b56' stroke-opacity='.16' stroke-width='.65'%3E%3Cpath d='m2 4 5 8-3 7 7 2 9-6m6 23 9 7 1-10 8-4m12-3 6 11 11-7-3-6m23 10 12 8 8-6m-80 34 7 4-2 12 12-1 3-8m20 8 12 8-2-10 9-6m28 23 11 4-3 8 12 4m-70 34 5 8-3 7 7 2 9-6m6 23 9 7 1-10 8-4m12-3 6 11 11-7-3-6m23 10 12 8 8-6m-80 34 7 4-2 12 12-1 3-8m20 8 12 8-2-10 9-6m28 23 11 4-3 8 12 4m22-158 5 8-3 7 7 2 9-6m6 23 9 7 1-10 8-4m12-3 6 11 11-7-3-6m-55 50 12 8 8-6m-35 31 7 4-2 12 12-1 3-8m20 8 12 8-2-10 9-6m-58 24 11 4-3 8 12 4'/%3E%3C/g%3E%3C/svg%3E");
}
.sheet-content { min-height: calc(var(--page-height, 2px) - 2px); padding: 2.1cqw 2.4cqw 2.6cqw; }
.sheet-measurement { position: absolute; inset: 0 auto auto 0; visibility: hidden; pointer-events: none; min-height: 0 !important; }
.sheet-measurement > .sheet-content { min-height: 0 !important; }
.sheet-measurement * { animation: none !important; transition: none !important; }

/* Lossless crops of the approved mockup. Reserve the original proportions
   before loading; wordmark and map clipping still hides stray annotations. */
.reference-art { position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--w) / var(--h); }
.reference-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
}
.masthead { position: relative; text-align: center; }
.eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 2.4cqw 2.2cqw;
  text-align: left;
  font-family: var(--condensed);
  font-size: 2.8cqw;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.handwritten { color: var(--blue-pencil); font-family: 'Kalam', cursive; font-weight: 400; font-style: italic; text-transform: uppercase; }
.brand-note {
  position: absolute;
  z-index: 2;
  top: 1.1cqw;
  right: 1.8cqw;
  margin: 0;
  transform: rotate(-10.5deg);
  font-size: 3.05cqw;
  line-height: 1.09;
  text-align: left;
}
.brand-note span { position: relative; display: inline-block; margin-left: 3cqw; }
.brand-note span::after { position: absolute; content: ''; left: -.25cqw; right: -.6cqw; bottom: .05cqw; height: .15cqw; background: var(--blue-pencil); transform: rotate(1deg); clip-path: polygon(0 15%, 100% 0, 98% 60%, 1% 100%); }
.wordmark { margin-top: .3cqw; clip-path: polygon(0 0, 70% 0, 70% 20%, 100% 20%, 100% 100%, 0 100%); }
.overview-title {
  margin: 1.1cqw -1cqw 0;
  font-family: 'Roboto Condensed', var(--condensed);
  font-size: 4.51cqw;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.012em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tagline { margin: 1.35cqw 0 2.45cqw; font-size: 2.87cqw; line-height: 1.4; letter-spacing: -.04em; white-space: nowrap; }
.hero { overflow: hidden; border-radius: .3cqw; background: #0c2e43; box-shadow: 0 0 0 .15cqw #8a9aa166; }
.signup-panel {
  padding: .25cqw 2.5cqw 1.45cqw;
  background: radial-gradient(ellipse at 10% 0, #47718544, transparent 75%), repeating-linear-gradient(25deg, #d5e0e50b 0 1px, transparent 1px 8px), #0e3047;
  color: #e9e7df;
}
.signup-form { display: flex; gap: .35cqw; }
.signup-form input {
  width: 49%;
  min-width: 0;
  height: 8.2cqw;
  padding: 0 2.5cqw;
  color: #20394b;
  border: 1px solid #f8f0de;
  border-radius: .6cqw;
  background: #ede9df;
  font-size: 2.95cqw;
  letter-spacing: -.045em;
  box-shadow: inset 0 0 8px #a09b8720;
}
.signup-form input::placeholder { color: #2c4456; opacity: 1; }
.signup-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 1.6cqw;
  padding: 0 .9cqw;
  color: #f4f1e8;
  border: .28cqw solid #dfdfbd;
  border-radius: .6cqw;
  background: linear-gradient(110deg, #204536, #395d47 55%, #274932);
  font-family: var(--condensed);
  font-size: 3.6cqw;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 0 8px #e2e8a222;
  transition: filter 150ms, box-shadow 150ms;
}
.signup-button:hover { filter: brightness(1.15); box-shadow: inset 0 0 10px #e2e8a244; }
.signup-button:active { filter: brightness(.94); }
.signup-button:disabled { opacity: .7; cursor: wait; }
.signup-challenge { margin-top: 12px; }
.signup-button span { font-family: sans-serif; font-size: 3.8cqw; }
.signup-caption { margin: 1.6cqw 0 0; text-align: center; font-size: max(11px, 2.5cqw); line-height: 1.4; letter-spacing: -.055em; }
.signup-status { margin: 1.6cqw 0 .2cqw; padding: 1.5cqw; border: 1px solid #cbd8bf66; font-size: max(12px, 2cqw); line-height: 1.5; }

.coverage { position: relative; padding: 4cqw 2.4cqw .7cqw; }
.coverage-heading { position: relative; }
.coverage h2 {
  position: relative;
  z-index: 1;
  width: 71%;
  margin: 0;
  font-family: 'Bungee', var(--condensed);
  font-size: 5.8cqw;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-shadow: .13cqw .13cqw #fbf8ec;
  transform: rotate(-1.2deg);
  transform-origin: left center;
}
.coverage h2::before {
  position: absolute;
  z-index: -1;
  content: '';
  inset: -1.1cqw -3cqw -.7cqw -2cqw;
  background: #a7ac853f;
  clip-path: polygon(3% 7%, 97% 0, 93% 8%, 100% 12%, 93% 18%, 96% 26%, 88% 32%, 96% 39%, 91% 47%, 98% 51%, 91% 60%, 96% 66%, 89% 72%, 93% 80%, 85% 84%, 91% 90%, 1% 99%, 5% 91%, 0 83%, 4% 75%, 0 68%, 5% 60%, 1% 51%, 5% 44%, 0 35%, 4% 29%, 0 21%, 5% 14%);
}
.coverage h2::after { position: absolute; content: ''; left: 0; right: 9%; bottom: -2cqw; height: 1cqw; background: #cb273d; transform: rotate(-.9deg); clip-path: polygon(0 22%, 99% 0, 100% 51%, 1% 100%); }
.map-note { position: absolute; z-index: 2; right: -1.2cqw; top: -1.2cqw; margin: 0; font-size: 3.08cqw; line-height: 1.16; transform: rotate(-13.25deg); text-align: center; }
.map-note span { border-bottom: .16cqw solid var(--blue-pencil); }
.map-arrow { position: absolute; z-index: 3; top: 16cqw; right: 20cqw; width: 7.4cqw; height: 7.5cqw; color: #105c50; }
.coverage-map-row { display: flex; align-items: center; gap: 1.4cqw; margin-top: 3.8cqw; }
.map-legend { flex: 0 0 28%; display: flex; flex-direction: column; gap: 1cqw; list-style: none; padding: 0; margin: 2.3cqw 0 0; font-family: var(--condensed); font-size: 2.35cqw; font-weight: 600; }
.map-legend li { display: flex; align-items: center; gap: 1.65cqw; white-space: nowrap; }
.map-legend svg { width: 4cqw; height: 3.7cqw; flex: 0 0 4cqw; }
.waters-map { width: 59%; flex: 0 0 59%; clip-path: polygon(0 0, 60% 0, 60% 9%, 67% 9%, 67% 0, 100% 0, 100% 100%, 0 100%); }
.features { display: grid; grid-template-columns: repeat(4, 1fr); padding: 2cqw 0 1.4cqw; margin: .25cqw 0 0; border-top: 1px solid #12344a55; }
.feature { text-align: center; padding: 0 .7cqw; border-right: 1px solid #183e5059; }
.feature:last-child { border-right: 0; }
.feature-icon { display: block; width: 7cqw; height: 6cqw; margin: 0 auto 1.25cqw; }
.feature:nth-child(2) .feature-icon { width: 9cqw; }
.feature:nth-child(3) .feature-icon { width: 4.6cqw; }
.feature h3 { margin: 0; font-family: var(--condensed); font-weight: 800; font-size: 2.9cqw; line-height: .98; text-transform: uppercase; }
.feature p { margin: 1.1cqw 0 0; font-size: 1.92cqw; letter-spacing: -.06em; line-height: 1.25; }
.image-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.1cqw; margin-top: .6cqw; }
.image-card { margin: 0; overflow: hidden; border-radius: .3cqw; border: 1px solid #c2c2ae; background: #09283d; box-shadow: 0 .2cqw .2cqw #40546044; }
.image-card figcaption { padding: 1cqw .15cqw .8cqw; color: #f0eee7; text-align: center; font-family: var(--condensed); font-size: 2.35cqw; font-weight: 600; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.page-footer { display: flex; align-items: center; gap: 1.7cqw; margin: 3.4cqw 0 1.1cqw; padding: 0 .5cqw; font-family: 'Roboto Condensed', var(--condensed); font-size: 2.8cqw; font-weight: 700; line-height: 1; letter-spacing: .06em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.page-footer::before, .page-footer::after { content: ''; height: 1px; background: #49627099; flex: 1; }

/* Locations continues the guide with captures from the actual Shabbona build. */
.locations { min-height: var(--page-height); }
.locations-content {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--page-height) - 2px);
  padding: 2.6cqw 3.4cqw 2.4cqw;
}
.locations-header, .fish-header, .tackle-header, .weather-header, .maps-header, .game-header { position: relative; }
.guide-eyebrow { display: flex; justify-content: space-between; gap: 2cqw; margin: 0 0 2.1cqw; font-family: var(--condensed); font-size: 2.8cqw; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.guide-eyebrow a { position: relative; display: inline-flex; align-items: center; gap: .7cqw; color: inherit; text-decoration: none; white-space: nowrap; }
.pixel-icon { display: block; flex-shrink: 0; width: 1em; height: 1em; shape-rendering: crispEdges; }
.guide-eyebrow a::after { content: ''; position: absolute; inset: -8px -3px; }
.guide-eyebrow a:hover { color: var(--blue-pencil); text-decoration: underline; text-underline-offset: .2em; }
.guide-title { position: relative; z-index: 1; }
.guide-title::before { content: ''; position: absolute; z-index: -1; inset: -1.1cqw -2.5cqw -1.8cqw -1.6cqw; background: #a7ac853f; clip-path: polygon(3% 7%, 97% 0, 93% 8%, 100% 12%, 93% 18%, 96% 26%, 88% 32%, 96% 39%, 91% 47%, 98% 51%, 91% 60%, 96% 66%, 89% 72%, 93% 80%, 85% 84%, 91% 90%, 1% 99%, 5% 91%, 0 83%, 4% 75%, 0 68%, 5% 60%, 1% 51%, 5% 44%, 0 35%, 4% 29%, 0 21%, 5% 14%); }
.guide-title { width: 78%; margin: 0; font-family: 'Bungee', var(--condensed); font-size: 8.6cqw; font-weight: 400; line-height: 1.03; letter-spacing: -.035em; text-transform: uppercase; transform: rotate(-1deg); transform-origin: left center; }
.locations-header .guide-title span, .fish-header .guide-title span, .tackle-header .guide-title span, .weather-header .guide-title span, .maps-header .guide-title span, .game-header .guide-title span { position: relative; white-space: nowrap; }
.locations-header .guide-title span::after, .fish-header .guide-title span::after, .tackle-header .guide-title span::after, .weather-header .guide-title span::after, .maps-header .guide-title span::after, .game-header .guide-title span::after { position: absolute; content: ''; left: 0; right: -1cqw; bottom: -1.3cqw; height: .7cqw; background: #cb273d; clip-path: polygon(0 25%, 99% 0, 100% 60%, 1% 100%); }
.locations-note { position: absolute; z-index: 2; right: -.5cqw; top: 8.4cqw; margin: 0; font-size: 3cqw; line-height: 1.22; text-align: right; transform: rotate(-11deg); }
.locations-note span { border-bottom: .15cqw solid currentColor; }
.locations-intro { margin: 3.6cqw 0 1.2cqw; font: 800 4.1cqw/1.1 var(--condensed); }
.locations-promise { max-width: 98%; margin: 0; font: 600 3.6cqw/1.15 var(--condensed); }
.lake-spotlight { margin-top: 2.5cqw; }
.lake-heading { display: flex; align-items: center; justify-content: space-between; padding: 2.2cqw 2.4cqw; border: 1px solid #173747; border-bottom: 0; color: var(--paper); background: #123448; }
.lake-kicker { margin: 0 0 .6cqw; color: #c0d0bc; font-family: var(--condensed); font-size: 2.6cqw; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.lake-heading h2 { margin: 0; font-family: var(--condensed); font-size: 7.4cqw; font-weight: 800; line-height: .95; text-transform: uppercase; letter-spacing: .015em; }
.lake-stamp { display: flex; align-items: center; gap: 1cqw; padding: 1.4cqw 1.5cqw; border: 1px solid #c4d0b875; font-family: var(--condensed); font-size: 4.1cqw; font-weight: 700; line-height: 1; }
.lake-stamp img { width: 4.4cqw; height: 7.3cqw; object-fit: contain; }
.location-screenshot { margin: 0; border: 1px solid #153748; background: #123448; }
.location-screenshot a { position: relative; display: block; color: inherit; background: #173e4a; cursor: zoom-in; }
.image-expand { position: absolute; right: 1.5cqw; bottom: 1.5cqw; display: grid; place-items: center; width: max(24px, 5cqw); height: max(24px, 5cqw); border: 1px solid #f0eee780; border-radius: 2px; background: #123448cc; color: #f0eee7; transition: transform 180ms ease, background 180ms ease; }
.image-expand .pixel-icon { width: 60%; height: 60%; }
.location-screenshot a:hover .image-expand, .location-screenshot a:focus-visible .image-expand { transform: scale(1.1); background: #123448; }
.location-screenshot a:focus-visible { position: relative; z-index: 1; outline: 3px solid #086cad; outline-offset: 3px; }
.location-screenshot img { display: block; width: 100%; height: auto; aspect-ratio: 950 / 710; }
.lake-spotlight .location-screenshot { position: relative; }
.lake-spotlight .location-screenshot a { aspect-ratio: 16 / 9; overflow: hidden; }
.lake-spotlight .location-screenshot img { position: absolute; inset: 0; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lake-spotlight .spot-outgoing { z-index: 1; pointer-events: none; }
.lake-spotlight .image-expand { z-index: 2; }
.location-screenshot figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; padding: 1.5cqw 1.8cqw 1.4cqw; color: #f0eee7; font-family: var(--condensed); font-size: 2.7cqw; font-weight: 600; line-height: 1.1; text-transform: uppercase; }
.location-screenshot figcaption > span:last-child { color: #c0d0bc; }
.lake-conditions { display: flex; flex-shrink: 0; align-items: center; gap: 1.5cqw; }
.lake-conditions .pixel-icon { width: max(16px, 4cqw); height: max(16px, 4cqw); }
.lake-conditions .daylight-icon { color: #ebbc77; }
.lake-stops { margin: 1.5cqw 0 0; }
.lake-stops-heading { display: flex; justify-content: space-between; gap: 1cqw; align-items: center; padding-bottom: 1cqw; border-bottom: 1px solid #12344a55; }
.lake-stops-heading h2 { margin: 0; font-family: var(--condensed); font-weight: 800; font-size: 4.6cqw; line-height: 1; text-transform: uppercase; }
.lake-stop-controls { display: flex; gap: 1.2cqw; flex-shrink: 0; }
.lake-stop-controls button { display: grid; place-items: center; width: max(32px, 6cqw); height: max(32px, 6cqw); padding: 0; border: 2px solid #123448; border-radius: 2px; background: #d1d4bd; color: #123448; box-shadow: inset 2px 2px #f4efda, inset -2px -2px #96a386, 2px 2px 0 #123448; cursor: pointer; transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease; }
.lake-stop-controls .pixel-icon { width: 62%; height: 62%; }
.lake-stop-controls button:hover:not(:disabled) { background: #e1e3cd; }
.lake-stop-controls button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: inset 2px 2px #96a386; }
.lake-stop-controls button:disabled { opacity: .35; box-shadow: none; cursor: default; }
.lake-stop-list { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 1.4cqw 0 0; padding: 0; list-style: none; }
.lake-stop-list::-webkit-scrollbar { display: none; }
.lake-stop-list:focus-visible { outline-offset: 3px; }
.lake-stop-list li { display: flex; flex: 0 0 calc(100% / 3); min-width: 0; padding: 0 .3cqw; scroll-snap-align: start; }
.lake-stop { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 1.2cqw .9cqw; border: 1px solid transparent; border-top: 3px solid transparent; border-radius: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.lake-stop:hover { background: #a8b28a26; }
.lake-stop[aria-pressed="true"] { border-color: #12344855; border-top-color: #123448; background: #a8b28a36; }
.lake-stop[aria-pressed="true"] .stop-number { background: #123448; color: var(--paper); }
.lake-stop:focus-visible { outline: 2px solid var(--blue-pencil); outline-offset: -3px; }
.lake-spot-status { position: absolute; z-index: 3; top: 1.5cqw; left: 1.5cqw; right: 1.5cqw; margin: 0; padding: 1.2cqw 1.5cqw; background: #123448ed; color: var(--paper); font: 600 3cqw/1.15 var(--condensed); pointer-events: none; }
.lake-spot-status[hidden] { display: none; }
.stop-number { display: inline-block; margin-bottom: 1.3cqw; padding: .5cqw 1.2cqw; background: #a8b28a; font-family: var(--condensed); font-size: 3cqw; font-weight: 800; line-height: 1; }
.lake-stop-name { display: block; margin: 0 0 1cqw; font-family: var(--condensed); font-size: 3.8cqw; font-weight: 800; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.lake-stop-copy { display: block; margin: 0; font-family: var(--condensed); font-weight: 600; font-size: 3.5cqw; line-height: 1.16; }
.first-cast { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 3.5cqw; margin-top: 2.2cqw; padding-top: 1.6cqw; border-top: 1px solid #12344a55; }
.first-cast-screenshot figcaption { justify-content: center; padding-inline: .5cqw; font-size: 2.55cqw; }
.first-cast-copy > .handwritten { margin: 0 0 1.8cqw -1.5cqw; font-size: 3.15cqw; line-height: 1.1; white-space: nowrap; transform: rotate(-8deg); transform-origin: left center; }
.first-cast-copy h2 { margin: 0 0 1.5cqw; font-family: var(--condensed); font-size: 5.4cqw; font-weight: 800; line-height: .96; text-transform: uppercase; }
.first-cast-copy > p:last-child { margin: 0; font-family: var(--condensed); font-size: 3.65cqw; font-weight: 600; line-height: 1.14; }
.locations-footer { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; margin-top: auto; padding-top: 1.2cqw; font-family: var(--condensed); font-size: 3cqw; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.locations-footer::before { content: ''; height: 1px; background: #49627099; flex: 1; }
.locations-footer > span:last-child { border-left: 1px solid #49627099; padding-left: 2cqw; }

/* Familiar game sprites become the manual's talking fish. */
.fish-page { min-height: var(--page-height); }
.fish-content { display: flex; flex-direction: column; min-height: calc(var(--page-height) - 2px); padding: 2.6cqw 3.4cqw 2.4cqw; }
.fish-note { position: absolute; right: 1cqw; top: 10cqw; margin: 0; font-size: 3.4cqw; line-height: 1.2; text-align: right; transform: rotate(-10deg); }
.fish-note span { border-bottom: .15cqw solid currentColor; }
.fish-intro { margin: 3.6cqw 0 1.5cqw; font: 800 4.1cqw/1.15 var(--condensed); }
.fish-promise { max-width: 94%; margin: 0; font: 600 3.8cqw/1.2 var(--condensed); }
.fish-roster { display: grid; grid-template-rows: auto repeat(3, 1fr); flex: 1; margin-top: 3cqw; }
.fish-roster-heading { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 1.8cqw 2cqw; background: #123448; color: var(--paper); }
.fish-roster-heading p { margin: 0 0 .6cqw; color: #c0d0bc; font: 600 2.7cqw/1.1 var(--condensed); letter-spacing: .065em; text-transform: uppercase; }
.fish-roster-heading h2 { margin: 0; font: 800 4.6cqw/1 var(--condensed); text-transform: uppercase; }
.fish-roster-heading .fish-roster-label { flex-shrink: 0; margin: 0; font-size: 2.6cqw; line-height: 1.25; text-align: right; letter-spacing: 0; }
.fish-entry { display: grid; grid-template-columns: 1fr 1.04fr; align-items: center; gap: 3cqw; min-height: 33cqw; padding: 2.3cqw 0; border-bottom: 1px solid #12344a55; }
.fish-mount { display: block; width: 100%; padding: 0; border: 0; color: var(--ink); background: transparent; cursor: pointer; }
.fish-plaque { position: relative; display: flex; align-items: center; justify-content: center; height: 20cqw; border: .65cqw solid #785438; border-radius: 50%; background: repeating-linear-gradient(1deg, transparent 0 5px, #311b1322 5px 6px), linear-gradient(#6d4b32, #9b7145 45%, #704a2e); box-shadow: inset 0 0 0 .45cqw #bd965a, inset 0 0 0 1.1cqw #473626, 0 1cqw 0 #17374825; }
.fish-plaque::before, .fish-plaque::after { position: absolute; content: ''; width: 1.3cqw; height: 1.3cqw; background: #dec28a; box-shadow: inset -.3cqw -.3cqw #493b2a; top: calc(50% - .65cqw); }
.fish-plaque::before { left: 1.8cqw; }
.fish-plaque::after { right: 1.8cqw; }
.fish-sprite { --sheet-width: 1448; --crop-width: 362; --crop-height: 222; --crop-y: 98; position: relative; z-index: 1; display: block; width: 94%; aspect-ratio: var(--crop-width) / var(--crop-height); overflow: hidden; transform-origin: 50% 60%; filter: drop-shadow(0 1cqw .2cqw #1b171b88); }
.fish-sprite img { position: absolute; display: block; width: calc(var(--sheet-width) / var(--crop-width) * 100%); max-width: none; height: auto; top: calc(var(--crop-y) / var(--crop-height) * -100%); left: 0; image-rendering: pixelated; }
.fish-sprite-bass { --sheet-width: 1536; --crop-width: 512; --crop-height: 250; --crop-y: 140; width: 104%; }
.fish-sprite-bluegill { width: 72%; }
.fish-sprite-catfish { --crop-height: 172; --crop-y: 108; width: 103%; }
.fish-name { display: block; margin-top: 1.6cqw; font: 800 3.8cqw/1 var(--condensed); text-transform: uppercase; }
.fish-mount-prompt { display: flex; align-items: center; justify-content: center; gap: .7cqw; margin-top: .9cqw; color: var(--blue-pencil); font: 700 2.6cqw/1 var(--condensed); text-transform: uppercase; }
.fish-mount-prompt .pixel-icon { width: 2.2cqw; height: 2.2cqw; }
.fish-voice { position: relative; min-width: 0; }
.fish-profile-descriptor { display: block; margin-bottom: 1cqw; color: #315743; font: 700 2.5cqw/1.1 var(--condensed); text-transform: uppercase; }
.fish-profile h3 { margin: 0 0 1cqw; font: 800 4.4cqw/.98 var(--condensed); text-transform: uppercase; }
.fish-profile p { margin: 0; font: 600 3.4cqw/1.18 var(--condensed); }
.fish-entry.is-speaking .fish-profile { visibility: hidden; }
.fish-bubble { position: absolute; z-index: 2; inset: 50% -.5cqw auto -.5cqw; transform: translateY(-50%); padding: 2cqw 2cqw 2.2cqw; border: 2px solid #123448; background: #f7f1dd; color: #123448; box-shadow: 0 0 0 2px #f7f1dd, 0 0 0 4px #123448, 4px 5px 0 4px #12344830; }
.fish-bubble::before { position: absolute; content: ''; width: 2cqw; height: 2cqw; left: calc(-2cqw - 4px); top: 44%; background: #f7f1dd; border-left: 2px solid #123448; border-bottom: 2px solid #123448; box-shadow: -2px 2px #f7f1dd, -4px 4px #123448; }
.fish-speaker { display: block; margin-bottom: 1cqw; font: 700 2.6cqw/1 var(--condensed); text-transform: uppercase; }
.fish-bubble p { margin: 0; font: 400 4.5cqw/.94 'VT323', monospace; }
.fish-bubble-end { display: block; margin-top: .6cqw; font: 400 2.8cqw/1 'VT323', monospace; text-align: right; }
.fish-entry.is-speaking .fish-sprite { animation: fish-perk 650ms steps(3, end) 3; }
.fish-entry.is-speaking .fish-sprite img { animation: fish-flap 380ms steps(1, end) 5; }
.fish-entry.is-speaking .fish-bubble { animation: fish-speech-in 180ms steps(3, end); }
.fish-mount[aria-expanded="true"] .fish-name { color: var(--blue-pencil); }
.fish-systems { margin-top: 3cqw; }
.fish-section-kicker { margin: 0 0 .7cqw; color: #315743; font: 700 2.6cqw/1 var(--condensed); letter-spacing: .08em; text-transform: uppercase; }
.fish-systems h2 { margin: 0 0 2cqw; font: 800 5.3cqw/1 var(--condensed); text-transform: uppercase; }
.fish-system-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; }
.fish-system-list > div + div { border-left: 1px solid #183e5059; padding-left: 2.4cqw; }
.fish-system-list h3 { margin: 0 0 1cqw; font: 800 3.4cqw/1 var(--condensed); white-space: nowrap; text-transform: uppercase; }
.fish-system-list p { margin: 0; font: 600 3.3cqw/1.15 var(--condensed); }
.fish-footer { margin-top: 3cqw; }
/* A tackle-box tray and a unified underwater scene, using the game's lure art. */
.tackle-page { min-height: var(--page-height); }
.tackle-content { display: flex; flex-direction: column; min-height: calc(var(--page-height) - 2px); padding: 2.6cqw 3.4cqw 2.4cqw; }
.tackle-note { position: absolute; right: 1.5cqw; top: 9cqw; margin: 0; font-size: 3.8cqw; line-height: 1.2; text-align: right; transform: rotate(-10deg); }
.tackle-note span { border-bottom: .15cqw solid currentColor; }
.tackle-intro { margin: 3.6cqw 0 1.5cqw; font: 800 4.1cqw/1.15 var(--condensed); }
.tackle-promise { max-width: 96%; margin: 0; font: 600 3.8cqw/1.2 var(--condensed); }
.tackle-lab { display: flex; flex-direction: column; flex: 1; margin-top: 3cqw; border: 1px solid #123448; }
.tackle-lab-heading { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 1.8cqw 2cqw; color: var(--paper); background: #123448; }
.tackle-lab-heading p { margin: 0 0 .6cqw; color: #c0d0bc; font: 600 2.7cqw/1.1 var(--condensed); letter-spacing: .065em; text-transform: uppercase; }
.tackle-lab-heading h2 { margin: 0; font: 800 4.6cqw/1 var(--condensed); text-transform: uppercase; }
.tackle-lab-heading > span { flex-shrink: 0; color: #c0d0bc; font: 600 2.6cqw/1.25 var(--condensed); text-align: right; text-transform: uppercase; }
.tackle-tray { display: grid; grid-template-columns: repeat(2, 1fr); flex: 1; gap: 1.4cqw; padding: 1.6cqw; background: #b9bda199; box-shadow: inset 0 0 0 .5cqw #eff0d580; }
.tackle-choice { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; padding: 1.8cqw 1cqw; border: 1px solid #758776; border-radius: .5cqw; color: var(--ink); background: #ebe7d2; box-shadow: inset 0 .6cqw 1cqw #59645118; cursor: pointer; transition: background 160ms ease, box-shadow 160ms ease; }
.tackle-choice[aria-pressed="true"] { background: #f8efd1; box-shadow: inset 0 0 0 .5cqw #bd9955; }
.tackle-choice:hover { background: #fff4d8; }
.tackle-choice:focus-visible { position: relative; z-index: 1; outline-offset: 2px; }
.tackle-choice-note { font: 600 2.6cqw/1 var(--condensed); letter-spacing: .055em; text-transform: uppercase; color: #496047; }
.tackle-art-space { display: flex; align-items: center; justify-content: center; width: 100%; height: 18cqw; }
.tackle-sprite { --crop-x: 70; --crop-y: 275; --crop-width: 685; --crop-height: 334; position: relative; display: block; width: 100%; aspect-ratio: var(--crop-width) / var(--crop-height); overflow: hidden; filter: drop-shadow(0 .6cqw .2cqw #183d392e); }
.tackle-sprite-worm { --crop-x: 925; --crop-y: 345; --crop-width: 812; --crop-height: 238; }
.tackle-art-space .tackle-sprite-crank { width: 93%; }
.tackle-sprite img { position: absolute; display: block; width: calc(1774 / var(--crop-width) * 100%); height: auto; max-width: none; left: calc(var(--crop-x) / var(--crop-width) * -100%); top: calc(var(--crop-y) / var(--crop-height) * -100%); image-rendering: pixelated; }
.tackle-choice-name { font: 800 3.8cqw/1 var(--condensed); text-transform: uppercase; }
.tackle-choice-action { display: flex; align-items: center; justify-content: center; gap: .7cqw; margin-top: 1.2cqw; font: 700 2.5cqw/1 var(--condensed); color: #315743; text-transform: uppercase; }
.tackle-choice-light { width: 1.4cqw; height: 1.4cqw; border: 1px solid #52705b; background: transparent; }
.tackle-choice[aria-pressed="true"] .tackle-choice-light { background: #315743; box-shadow: inset 0 0 0 1px #f8efd1; }
.retrieve-figure { margin: 0; border-top: 1px solid #123448; }
.retrieve-water { position: relative; height: 28cqw; overflow: hidden; background: #185354; }
.retrieve-backdrop, .retrieve-surface, .retrieve-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.retrieve-backdrop, .retrieve-surface { object-fit: fill; }
.retrieve-surface { clip-path: inset(0 0 90%); opacity: .6; }
.retrieve-lure { position: absolute; left: 14%; top: 29%; width: 15%; transform: translate(-50%, -50%) rotate(14deg); }
.tackle-lab[data-lure="worm"] .retrieve-lure { left: 16%; top: 27%; width: 17%; transform: translate(-50%, -50%) rotate(32deg); }
.retrieve-water.is-ready .retrieve-lure { visibility: hidden; }
.retrieve-caption { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; padding: 1.4cqw 1.8cqw; background: #123448; color: #e8e3c7; font: 600 2.7cqw/1.1 var(--condensed); text-transform: uppercase; }
.retrieve-purpose { color: #c0d0bc; }
.tackle-presentation-copy { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 2.4cqw; min-height: 22cqw; padding: 2cqw; }
.tackle-kicker { margin: 0 0 .7cqw; color: #315743; font: 700 2.6cqw/1 var(--condensed); letter-spacing: .065em; text-transform: uppercase; }
.tackle-presentation-copy h3 { margin: 0; font: 800 4.6cqw/.98 var(--condensed); text-transform: uppercase; }
.tackle-presentation-copy > p { margin: 0; font: 600 3.4cqw/1.18 var(--condensed); }
.tackle-setup { margin-top: 3cqw; }
.tackle-setup h2, .tackle-shop h2 { margin: 0 0 2cqw; font: 800 5.3cqw/1 var(--condensed); text-transform: uppercase; }
.tackle-gear-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; }
.tackle-gear-list > div + div { border-left: 1px solid #183e5059; padding-left: 2.4cqw; }
.tackle-gear-list svg { float: left; width: 7cqw; height: 7cqw; margin: 0 1cqw 1cqw 0; shape-rendering: crispEdges; }
.tackle-gear-list h3 { margin: 0 0 1cqw; font: 800 3.8cqw/7cqw var(--condensed); text-transform: uppercase; }
.tackle-gear-list p { clear: both; margin: 0; font: 600 3.3cqw/1.15 var(--condensed); }
.tackle-shop { margin-top: 3cqw; padding: 2cqw 2.4cqw; border-left: .7cqw solid #b98c49; background: #c4b67e33; }
.tackle-shop h2 { margin-bottom: 1cqw; }
.tackle-shop > p:last-child { margin: 0; font: 600 3.5cqw/1.18 var(--condensed); }
.tackle-footer { margin-top: 3cqw; }

/* A weather reference page: the same app view under three actual presets. */
.game-page { min-height: var(--page-height); }
.game-content { display: flex; flex-direction: column; min-height: calc(var(--page-height) - 2px); padding: 2.6cqw 3.4cqw 2.4cqw; }
.game-header .guide-title { width: 71%; }
.game-note { position: absolute; right: .8cqw; top: 12cqw; margin: 0; font-size: 3.4cqw; line-height: 1.2; text-align: right; transform: rotate(-10deg); }
.game-note span { border-bottom: .15cqw solid currentColor; }
.game-intro { margin: 3.6cqw 0 1.5cqw; font: 800 4.1cqw/1.15 var(--condensed); }
.game-promise { margin: 0; font: 600 3.8cqw/1.2 var(--condensed); }
.game-outing { display: flex; flex-direction: column; margin-top: 3cqw; border: 1px solid #123448; }
.game-outing-heading { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 1.8cqw 2cqw; color: var(--paper); background: #123448; box-shadow: inset .8cqw 0 #c45c43; }
.game-outing-heading p { margin: 0 0 .6cqw; color: #c0d0bc; font: 600 2.6cqw/1.1 var(--condensed); letter-spacing: .075em; text-transform: uppercase; }
.game-outing-heading h2 { margin: 0; font: 800 5.2cqw/1 var(--condensed); text-transform: uppercase; }
.game-outing-heading > span { color: #c0d0bc; font: 600 2.6cqw/1.2 var(--condensed); text-align: right; text-transform: uppercase; }
.game-preview { position: relative; aspect-ratio: 8 / 5; background: #315743; }
.game-preview > img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.game-start { position: absolute; bottom: 2cqw; left: 2cqw; display: flex; align-items: center; justify-content: center; gap: 2cqw; min-height: 44px; padding: 2.2cqw 3cqw; border: 1px solid #f8e4a4; border-radius: 2px; color: #123448; background: #f2d593; box-shadow: inset 2px 2px #fff5d1, inset -2px -2px #bca36a, 3px 3px #123448cc; font: 800 3.5cqw/1 var(--condensed); text-transform: uppercase; transition: transform 160ms ease, background 160ms ease; }
.game-start:hover { transform: translateY(-2px); background: #ffe6a3; }
.game-start svg { width: 4cqw; height: 4cqw; shape-rendering: crispEdges; }
.game-preview-caption { display: flex; justify-content: space-between; gap: 2cqw; padding: 1.8cqw 2cqw; border-top: .5cqw solid #c45c43; color: #eee7d6; background: #123448; font: 700 2.7cqw/1.1 var(--condensed); text-transform: uppercase; }
.game-preview-caption > span:last-child { color: #bfd0b8; text-transform: uppercase; font-size: 2.4cqw; }
.game-trip { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 2cqw; margin: 0; padding: 2.5cqw 2cqw; list-style: none; background: #a4b09b25; }
.game-trip > li + li { border-left: 1px solid #183e5040; padding-left: 2cqw; }
.game-trip h3 { margin: 0 0 1.2cqw; font: 800 3.6cqw/1 var(--condensed); text-transform: uppercase; }
.game-trip p { margin: 0; font: 600 3.2cqw/1.18 var(--condensed); }
.game-trophies { display: grid; grid-template-columns: .9fr 1.4fr; align-items: center; gap: 3.8cqw; margin: 3cqw 0 1cqw; min-height: 32cqw; }
.game-trophy-art { position: relative; height: 30cqw; border: .6cqw solid #254535; background: repeating-linear-gradient(90deg, transparent 0 5cqw, #3043310e 5cqw calc(5cqw + 1px)), #d7d2ac; box-shadow: inset 0 0 0 .7cqw #eee6c3, 1cqw 1cqw #17374820; transform: rotate(-3deg); }
.game-trophy-ribbon { position: absolute; top: 1.7cqw; left: -1.4cqw; right: -1.4cqw; padding: 1.2cqw; color: #fff1ca; background: #315743; font: 800 3cqw/1 var(--condensed); letter-spacing: .1em; text-align: center; text-transform: uppercase; box-shadow: 0 .7cqw #12344830; }
.game-trophy-art img { position: absolute; top: 8cqw; left: -6%; display: block; width: 112%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 1cqw .4cqw #17374850); }
.game-trophy-label { position: absolute; bottom: 1.2cqw; left: 0; width: 100%; font: 800 2.5cqw/1 var(--condensed); text-align: center; text-transform: uppercase; }
.game-kicker { margin: 0 0 1.2cqw; color: #315743; font: 700 2.6cqw/1.1 var(--condensed); text-transform: uppercase; }
.game-trophy-copy h2 { margin: 0 0 1.5cqw; font: 800 5.1cqw/1 var(--condensed); text-transform: uppercase; }
.game-trophy-copy > p:not(.game-kicker) { margin: 0 0 1.3cqw; font: 600 3.6cqw/1.18 var(--condensed); }
.game-signup { display: flex; align-items: center; gap: 2cqw; margin-top: 2.5cqw; padding: 2cqw 2.2cqw; border: 1px solid #a8af96; border-top: .8cqw solid #315743; background: #d7d2ac55; }
.game-signup h2 { flex: 1; margin: 0; font: 800 4.6cqw/1 var(--condensed); text-transform: uppercase; }
.game-signup .signup-button { flex: 0 0 52%; min-height: 44px; padding: 2.4cqw 1.2cqw; gap: 1.2cqw; border: 1px solid #294c3b; font-size: max(12px, 3.5cqw); }
.game-signup .signup-button svg { width: 3.5cqw; height: 3.5cqw; }
.game-footer { margin-top: auto; padding-top: 3cqw; }

.signup-dialog { position: fixed; width: min(480px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 26px 20px 18px; border: 2px solid #123448; border-top: 6px solid #315743; border-radius: 2px; color: #123448; background: var(--paper); box-shadow: 0 0 0 3px #d7d2ac, 0 16px 60px #0008; overflow: auto; }
.signup-dialog::backdrop { background: #031720df; }
.signup-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #12344840; color: #123448; background: transparent; font: 600 30px/1 var(--condensed); }
.signup-close:hover { background: #d1d4bd; }
.signup-dialog-kicker { margin: 0 38px 15px 0; color: #315743; font: 700 13px/1.2 var(--condensed); letter-spacing: .06em; text-transform: uppercase; }
.signup-dialog h2 { margin: 0 0 22px; font: 400 clamp(24px, 7vw, 36px)/1.1 'Bungee', var(--condensed); letter-spacing: -.035em; text-transform: uppercase; }
.signup-dialog .signup-form { display: grid; gap: 10px; }
.signup-dialog .signup-form input { width: 100%; height: 52px; padding-inline: 14px; border: 1px solid #a8af96; font: 600 18px/1 var(--condensed); letter-spacing: 0; }
.signup-dialog .signup-button { gap: 7px; min-height: 48px; padding: 8px; border: 1px solid #294c3b; border-radius: 2px; font-size: 16px; }
.signup-dialog .signup-button svg { width: 15px; height: 15px; }
.signup-dialog-feedback { display: grid; align-items: center; min-height: 38px; margin-top: 8px; font: 600 15px/1.25 var(--condensed); }
.signup-dialog-feedback p { margin: 0; }
.signup-dialog-feedback .signup-status { padding: 0; border: 0; font: inherit; }

.boating-dialog { width: min(1000px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 1px solid #b9c5a3; border-radius: 3px; overflow: auto; background: #123448; color: #f5edcf; box-shadow: 0 18px 65px #000a; font-family: var(--condensed); overscroll-behavior: contain; }
.boating-dialog::backdrop { background: #031720ed; }
.boating-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; background: #123448; }
.boating-header p { margin: 0 0 5px; color: #bfd0b8; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.boating-header h2 { margin: 0; font-size: 28px; line-height: 1; font-weight: 800; text-transform: uppercase; }
.boating-dialog button { min-height: 44px; border: 1px solid #8caa97; border-radius: 2px; padding: 9px 14px; color: #123448; background: #eee7cf; box-shadow: inset 2px 2px #fff9df, inset -2px -2px #acae93; font: 800 16px/1.1 var(--condensed); touch-action: none; user-select: none; -webkit-user-select: none; }
.boating-dialog button:hover { background: #f8dda0; }
.boating-dialog button:active, .boating-dialog button.is-held { background: #f1ce83; box-shadow: inset 2px 2px #8f7543; }
.boating-dialog button:disabled { opacity: .5; cursor: default; }
.boating-dialog .boating-close { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; white-space: nowrap; color: #f5edcf; background: #123448; box-shadow: none; }
.boating-close span { font-size: 22px; line-height: 1; }
.boating-rotate { display: none; }
.boating-screen { position: relative; aspect-ratio: 8 / 5; background: #1c3c3c; }
.boating-canvas { position: absolute; inset: 0; touch-action: none; }
.boating-canvas canvas { display: block; image-rendering: pixelated; }
.boating-canvas:focus-visible { outline-offset: -4px; }
.boating-loading, .boating-paused { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #102d3aeb; font-size: 21px; font-weight: 700; text-align: center; }
.boating-loading p, .boating-paused p { margin: 0; padding: 0 15px; }
.boating-load-icon svg { width: 55px; height: 44px; }
.boating-readout { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #123448bf; font-size: 15px; font-weight: 700; pointer-events: none; text-transform: uppercase; }
.boating-controls { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 18px 22px; border-top: 3px solid #bc6948; }
.boating-stick-wrap, #boating-touch-instructions { display: none; }
.boating-stick-wrap { text-align: center; }
.boating-stick { --stick-x: 0px; --stick-y: 0px; position: relative; width: 144px; aspect-ratio: 1; margin: auto; border: 2px solid #8caa97; border-radius: 50%; background: radial-gradient(circle, #365750 0 27%, #213f48 28% 65%, #123448 66%); box-shadow: inset 0 3px 10px #03172088, 0 2px 0 #03172088; color: #123448; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.boating-stick::before, .boating-stick::after { content: ''; position: absolute; inset: 12px calc(50% - 1px); background: #bfd0b826; pointer-events: none; }
.boating-stick::after { transform: rotate(90deg); }
.boating-stick-ring { position: absolute; inset: 12px; border: 1px dashed #bfd0b85c; border-radius: 50%; pointer-events: none; }
.boating-stick-thumb { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid #eee7cf; border-radius: 50%; background: #d6d9b5; box-shadow: inset 2px 3px #ffffdfb3, inset -2px -3px #8caa97, 0 3px 7px #03172080; transform: translate(calc(-50% + var(--stick-x)), calc(-50% + var(--stick-y))); transition: transform .16s ease-out; pointer-events: none; }
.boating-stick-thumb svg { width: 24px; height: 24px; }
.boating-stick.is-held { border-color: #f2d593; cursor: grabbing; }
.boating-stick.is-held .boating-stick-thumb { background: #f2d593; transition: none; }
.boating-stick[aria-disabled="true"] { opacity: .5; cursor: default; }
.boating-stick-caption { display: block; margin-top: 8px; color: #bfd0b8; font: 700 12px/1 var(--condensed); letter-spacing: .08em; text-transform: uppercase; }
.boating-pad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 44px); gap: 5px; }
.boating-pad button { display: grid; place-items: center; padding: 10px; }
.boating-pad svg { width: 20px; height: 20px; }
.boating-forward { grid-column: 2; grid-row: 1; }
.boating-forward svg { transform: rotate(90deg); }
.boating-left { grid-column: 1; grid-row: 2; }
.boating-reverse { grid-column: 2; grid-row: 2; }
.boating-reverse svg { transform: rotate(-90deg); }
.boating-right { grid-column: 3; grid-row: 2; }
#boating-instructions { margin: 0; font-size: 17px; line-height: 1.35; }
#boating-instructions p { margin: 0; }
#boating-instructions strong { color: #f2d593; }
#boating-instructions span { color: #bfd0b8; }
.boating-actions { display: grid; gap: 6px; }
.boating-actions [data-boat-input] { background: #f2d593; }
.boating-footer { margin: 0; padding: 0 22px 16px; color: #bfd0b8; font-size: 15px; }
@media (max-width: 650px) {
  .boating-header { padding: 12px; gap: 10px; }
  .boating-header h2 { font-size: 24px; }
  .boating-header p { font-size: 11px; }
  .boating-dialog .boating-close { padding: 8px 12px; font-size: 14px; }
  .boating-controls { grid-template-columns: auto 1fr; gap: 12px; padding: 12px; }
  .boating-pad { grid-template-columns: repeat(3, 44px); }
  #boating-instructions { grid-column: 1 / -1; grid-row: 2; font-size: 15px; }
  .boating-actions { grid-template-columns: 1fr; gap: 5px; }
  .boating-dialog button { font-size: 14px; padding: 8px; }
  .boating-footer { padding: 0 12px 12px; font-size: 13px; }
  .boating-readout { padding: 7px 10px; font-size: 12px; }
}
@media (any-pointer: coarse) {
  .boating-stick-wrap, #boating-touch-instructions { display: block; }
  .boating-pad, .boating-keyboard-instructions, .boating-actions [data-boat-input="boost"] { display: none; }
}
@media (any-pointer: coarse) and (orientation: portrait) {
  .boating-rotate { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-top: 1px solid #8caa974d; color: #f2d593; background: #1c3f4c; font-size: 15px; line-height: 1.25; }
  .boating-rotate svg { flex: 0 0 30px; width: 30px; height: 30px; }
  .boating-rotate small { display: block; margin-top: 3px; color: #bfd0b8; font-size: 13px; }
}
@media (max-height: 600px) and (min-width: 651px), (any-pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  .boating-dialog[open] { display: grid; grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: auto minmax(0, 1fr) auto; height: calc(100dvh - 24px); }
  .boating-header { grid-column: 1 / -1; padding: 10px 14px; }
  .boating-header h2 { font-size: 24px; }
  .boating-header p { font-size: 11px; }
  .boating-screen { aspect-ratio: auto; min-height: 0; }
  .boating-controls { grid-template-columns: auto 1fr; align-content: center; gap: 10px; padding: 10px; border-top: 0; border-left: 2px solid #bc6948; }
  .boating-pad { grid-template-columns: repeat(3, 44px); }
  .boating-actions { grid-column: 2; grid-row: 1; }
  .boating-dialog button { padding: 7px; font-size: 13px; }
  #boating-instructions { grid-column: 1 / -1; font-size: 13px; }
  .boating-footer { grid-column: 1 / -1; padding: 8px 14px; font-size: 13px; }
  .boating-readout { padding: 7px 10px; font-size: 12px; }
}
@media (any-pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  .boating-dialog[open] { grid-template-columns: minmax(0, 1fr) 212px; }
  .boating-controls { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .boating-stick { width: 124px; }
  .boating-stick-caption { display: none; }
  #boating-instructions { grid-column: 1; grid-row: 2; text-align: center; font-size: 13px; }
  .boating-actions { grid-column: 1; grid-row: 3; grid-template-columns: 1fr 1fr; }
  .boating-actions button { padding: 7px 5px; white-space: nowrap; }
  .boating-footer { padding-top: 6px; padding-bottom: 6px; }
}
@media (any-pointer: coarse) and (orientation: landscape) and (max-height: 360px) {
  .boating-header { padding: 8px 12px; }
  .boating-header p { margin-bottom: 3px; }
  .boating-header h2 { font-size: 21px; }
  .boating-controls { gap: 6px; padding: 8px; }
  .boating-stick { width: 100px; }
  .boating-stick-thumb { width: 44px; height: 44px; }
  .boating-footer { display: none; }
}
@media (prefers-reduced-motion: reduce) { .game-start, .boating-stick-thumb { transition: none; } }

.maps-page { min-height: var(--page-height); }
.maps-content { display: flex; flex-direction: column; min-height: calc(var(--page-height) - 2px); padding: 2.6cqw 3.4cqw 2.4cqw; }
.maps-header .guide-title { width: 66%; }
.maps-note { position: absolute; right: -.3cqw; top: 12cqw; margin: 0; font-size: 3.15cqw; line-height: 1.22; text-align: right; transform: rotate(-9deg); }
.maps-note span { border-bottom: .15cqw solid currentColor; }
.maps-intro { margin: 3.6cqw 0 1.5cqw; font: 800 4.1cqw/1.15 var(--condensed); }
.maps-promise { margin: 0; font: 600 3.8cqw/1.2 var(--condensed); }
.map-atlas { display: flex; flex-direction: column; flex: 1; margin-top: 3cqw; border: 1px solid #123448; background: #eee8d59c; }
.map-heading { display: flex; align-items: center; justify-content: space-between; padding: 1.8cqw 2cqw; color: var(--paper); background: #123448; box-shadow: inset .8cqw 0 #c45c43; }
.map-heading p { margin: 0 0 .6cqw; color: #c0d0bc; font: 600 2.6cqw/1.1 var(--condensed); letter-spacing: .075em; text-transform: uppercase; }
.map-heading h2 { margin: 0; font: 800 5.2cqw/1 var(--condensed); text-transform: uppercase; }
.map-heading > span { color: #c0d0bc; font: 600 2.6cqw/1.2 var(--condensed); text-align: right; text-transform: uppercase; }
.map-switcher { position: absolute; z-index: 3; left: 2cqw; bottom: 2cqw; display: grid; gap: 1.2cqw; width: 30cqw; padding: 1cqw; border: 1px solid #e9dfbd80; border-radius: 2px; background: #123448ed; box-shadow: .6cqw .8cqw 0 #09283d40; }
.map-switcher button { display: flex; align-items: center; justify-content: flex-start; gap: 1.6cqw; min-height: max(44px, 8cqw); padding: 1cqw 1.7cqw; border: 1px solid #697d70; border-radius: 2px; color: #173e42; background: #e5e4cc; box-shadow: inset 2px 2px #fff7de, inset -2px -2px #adbaa0, 0 2px #697d70; font: 800 3.1cqw/1 var(--condensed); text-transform: uppercase; transition: background 150ms ease, transform 150ms ease; }
.map-switcher svg { flex-shrink: 0; width: 4.2cqw; height: 4.2cqw; shape-rendering: crispEdges; }
.map-switcher button:hover { background: #f3ebce; }
.map-switcher button[aria-pressed="true"] { background: #315743; color: #fff1c9; border-color: #e7ce87; box-shadow: inset 2px 2px #1c4031, inset -2px -2px #668168; transform: translateY(1px); }
.map-view { position: relative; isolation: isolate; aspect-ratio: 1; background-color: #e6e2c9; background-image: linear-gradient(#41564c12 1px, transparent 1px), linear-gradient(90deg, #41564c12 1px, transparent 1px); background-size: 8cqw 8cqw; background-position: center; }
.map-scene { position: absolute; inset: 0; margin: 0; }
.map-scene[data-map-scene="depth"] { background: #e6e2c9; background-image: linear-gradient(#41564c12 1px, transparent 1px), linear-gradient(90deg, #41564c12 1px, transparent 1px); background-size: 8cqw 8cqw; background-position: center; }
.map-scene a { display: block; height: 100%; color: var(--paper); cursor: zoom-in; }
.map-scene img { display: block; width: 100%; height: 100%; object-fit: contain; }
.map-scene[data-map-scene="depth"] img { image-rendering: pixelated; }
.map-scene a:hover .image-expand, .map-scene a:focus-visible .image-expand { transform: scale(1.1); background: #123448; }
.map-scene a:focus-visible { outline: 3px solid #086cad; outline-offset: 3px; }
.map-north { position: absolute; z-index: 2; pointer-events: none; top: 2cqw; left: 2cqw; display: flex; flex-direction: column; align-items: center; gap: .5cqw; padding: 1.4cqw 1.7cqw; border: 1px solid #12344860; background: #f0e9cded; box-shadow: .4cqw .5cqw #12344840; color: #123448; font: 800 2.8cqw/1 var(--condensed); }
.map-north svg { width: 3cqw; height: 4.5cqw; }
.map-markers { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.map-marker { position: absolute; display: grid; place-items: center; width: max(44px, 9cqw); height: max(44px, 9cqw); padding: 0; border: 0; background: none; color: #fff2d1; transform: translate(-50%, -50%); pointer-events: auto; }
.map-marker > span:first-child { display: grid; place-items: center; width: 5.5cqw; height: 5.5cqw; min-width: 21px; min-height: 21px; background: #123448; border: 1px solid #fff2d1; box-shadow: 2px 2px #12344880; font: 800 3.7cqw/1 var(--condensed); transition: background 150ms ease, transform 150ms ease; }
.map-marker:hover > span:first-child { transform: translateY(-2px); }
.map-marker[aria-pressed="true"] > span:first-child { background: #ad3f38; outline: 1px solid #f6dfa0; outline-offset: 2px; }
.map-marker::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#f8e1a0, #f8e1a0) left top / 32% 2px, linear-gradient(#f8e1a0, #f8e1a0) left top / 2px 32%, linear-gradient(#f8e1a0, #f8e1a0) right top / 32% 2px, linear-gradient(#f8e1a0, #f8e1a0) right top / 2px 32%, linear-gradient(#f8e1a0, #f8e1a0) left bottom / 32% 2px, linear-gradient(#f8e1a0, #f8e1a0) left bottom / 2px 32%, linear-gradient(#f8e1a0, #f8e1a0) right bottom / 32% 2px, linear-gradient(#f8e1a0, #f8e1a0) right bottom / 2px 32%; background-repeat: no-repeat; filter: drop-shadow(1px 1px #123448); opacity: 0; pointer-events: none; }
.map-marker[aria-pressed="true"]::before { opacity: 1; }
.map-marker.is-locating::before { animation: map-locate 650ms ease-out; }
@keyframes map-locate { 0% { transform: scale(1.6); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.map-marker:focus-visible { outline-offset: -2px; }
.map-marker-label { position: absolute; left: 50%; top: calc(50% + 4.1cqw); transform: translateX(-50%); padding: .5cqw .9cqw; color: #123448; background: #f0e9cded; font: 800 2.6cqw/1 var(--condensed); text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.map-marker-arms { left: 23%; top: 43%; }
.map-marker-channel { left: 67%; top: 52%; }
.map-marker-dam { left: 77%; top: 87%; }
.map-feedback { position: absolute; z-index: 3; left: 2cqw; right: 2cqw; top: 2cqw; margin: 0; padding: 1.5cqw; background: #123448ed; color: var(--paper); font: 600 3.3cqw/1.2 var(--condensed); }
.map-atlas-legend { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; padding: 1.7cqw 2cqw; border-block: 1px solid #17374766; font: 700 2.6cqw/1.1 var(--condensed); text-transform: uppercase; }
.map-spots-title { font-size: 3.4cqw; font-weight: 800; }
.map-depth-key { display: flex; align-items: center; gap: 1cqw; }
.map-depth-key i { width: 13cqw; height: 2.5cqw; border: 1px solid #17374766; background: linear-gradient(90deg, #34abc0 0 20%, #3098ad 20% 40%, #2a849a 40% 60%, #257287 60% 80%, #205e73 80%); }
.map-atlas[data-map-layer="lake"] .map-depth-key { visibility: hidden; }
.map-fieldnote { position: relative; display: grid; align-items: center; flex: 1; min-height: 29cqw; padding: 2.8cqw 2.4cqw; border-top: .6cqw solid #c45c43; background: #123448; color: #f5edcf; background-image: repeating-linear-gradient(0deg, transparent 0 4.6cqw, #d9e1c70a 4.6cqw calc(4.6cqw + 1px)); }
.map-fieldnote article { display: grid; grid-template-columns: 7cqw 1fr; gap: 2cqw; align-items: start; }
.map-note-letter { display: grid; place-items: center; width: 6.5cqw; height: 7cqw; margin-top: .3cqw; border: 1px solid #f1d996; background: #ad3f38; box-shadow: .5cqw .5cqw #071f2d; color: #fff1cf; font: 800 4.6cqw/1 var(--condensed); transform: rotate(-3deg); }
.map-kicker { margin: 0 0 1.1cqw; color: #b9d3b2; font: 700 2.6cqw/1 var(--condensed); letter-spacing: .065em; text-transform: uppercase; }
.map-fieldnote h3 { margin: 0 0 1.3cqw; color: #f3d68f; font: 800 5.1cqw/1 var(--condensed); text-transform: uppercase; }
.map-fieldnote p:last-child { margin: 0; font: 600 3.6cqw/1.18 var(--condensed); }
.maps-outro { display: grid; grid-template-columns: 12cqw 1fr; align-items: center; gap: 2.5cqw; margin-top: 3cqw; }
.maps-outro svg { width: 11cqw; height: 11cqw; transform: rotate(-6deg); }
.maps-outro h2 { margin: 0 0 1.2cqw; font: 800 5.5cqw/1 var(--condensed); text-transform: uppercase; }
.maps-outro p { margin: 0; font: 600 3.6cqw/1.18 var(--condensed); }
.maps-footer { margin-top: 3cqw; }
@media (prefers-reduced-motion: reduce) {
  .map-switcher button, .map-spot-controls button, .map-marker > span:first-child, .map-scene .image-expand { transition: none; }
  .map-marker.is-locating::before { animation: none; }
}

.weather-page { min-height: var(--page-height); }
.weather-content { display: flex; flex-direction: column; min-height: calc(var(--page-height) - 2px); padding: 2.6cqw 3.4cqw 2.4cqw; }
.weather-note { position: absolute; right: .5cqw; top: 9cqw; margin: 0; font-size: 3.3cqw; line-height: 1.2; text-align: right; transform: rotate(-9deg); }
.weather-note span { border-bottom: .15cqw solid currentColor; }
.weather-intro { margin: 3.6cqw 0 1.5cqw; font: 800 4.1cqw/1.15 var(--condensed); }
.weather-promise { max-width: 97%; margin: 0; font: 600 3.8cqw/1.2 var(--condensed); }
.weather-station { display: flex; flex-direction: column; flex: 1; margin-top: 3cqw; border: 1px solid #123448; background: #eee8d59c; }
.weather-station-heading { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 1.8cqw 2cqw; color: var(--paper); background: #123448; }
.weather-station-heading p { margin: 0 0 .6cqw; color: #c0d0bc; font: 600 2.6cqw/1.1 var(--condensed); letter-spacing: .075em; text-transform: uppercase; }
.weather-station-heading h2 { margin: 0; font: 800 5.2cqw/1 var(--condensed); text-transform: uppercase; }
.weather-station-heading > span { flex-shrink: 0; color: #c0d0bc; font: 600 2.6cqw/1.2 var(--condensed); text-align: right; text-transform: uppercase; }
.weather-view { position: relative; aspect-ratio: 1248 / 702; isolation: isolate; background: #345e60; }
.weather-scene { position: absolute; inset: 0; margin: 0; }
.weather-scene a { display: block; height: 100%; color: var(--paper); cursor: zoom-in; }
.weather-scene img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.weather-scene a:hover .image-expand { transform: scale(1.1); background: #123448; }
.weather-scene a:focus-visible { position: relative; outline: 3px solid #086cad; outline-offset: 3px; }
.weather-feedback { position: absolute; z-index: 3; left: 2cqw; right: 2cqw; bottom: 2cqw; margin: 0; padding: 1.5cqw; background: #123448ed; color: var(--paper); font: 600 3.3cqw/1.2 var(--condensed); }
.weather-readout { display: flex; align-items: center; justify-content: space-between; gap: 4cqw; margin: 0; padding: 1.6cqw 2cqw; background: #123448; color: var(--paper); }
.weather-readout > div { display: flex; align-items: baseline; gap: 1.3cqw; }
.weather-readout dt { color: #b9c9b8; font: 600 2.5cqw/1 var(--condensed); text-transform: uppercase; }
.weather-readout dd { margin: 0; font: 700 3.3cqw/1 var(--condensed); text-transform: uppercase; }
.weather-switcher { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5cqw; padding: 2cqw; border-bottom: 1px solid #17374766; background: #a4b09b40; }
.weather-switcher button { display: flex; align-items: center; justify-content: center; gap: 1.3cqw; min-height: max(44px, 11cqw); padding: 1.4cqw .6cqw; border: 1px solid #697d70; border-radius: 2px; color: #173e42; background: #e5e4cc; box-shadow: inset 2px 2px #fff7de, inset -2px -2px #adbaa0, 0 2px #697d70; font: 800 3.1cqw/1.05 var(--condensed); text-align: left; text-transform: uppercase; transition: background 150ms ease, transform 150ms ease; }
.weather-switcher svg { flex-shrink: 0; width: 5.5cqw; height: 5.5cqw; overflow: visible; shape-rendering: crispEdges; }
/* Color the symbols while keeping the guide's existing button palette. */
.weather-switcher [data-weather-choice="morning"] svg { color: #b46a23; }
.weather-switcher [data-weather-choice="morning"][aria-pressed="true"] svg { color: #f3c76e; }
.weather-switcher [data-weather-choice="golden"] svg, .weather-time-icon { color: #b05b30; }
.weather-switcher [data-weather-choice="golden"][aria-pressed="true"] svg { color: #efb579; }
.weather-switcher [data-weather-choice="wind"] svg { color: #637078; }
.weather-switcher [data-weather-choice="wind"][aria-pressed="true"] svg { color: #c5cdd0; }
.weather-switcher button:hover { background: #f3ebce; }
.weather-switcher button[aria-pressed="true"] { background: #315743; color: #fff1c9; border-color: #234a37; box-shadow: inset 2px 2px #1c4031, inset -2px -2px #668168; transform: translateY(1px); }
/* Animate the selected condition and hover/focus previews. Other icons return
   to their original pixel silhouette when hover/focus leaves. */
.weather-icon-part { animation-duration: 1.6s; animation-timing-function: steps(4, end); animation-iteration-count: infinite; }
.weather-sun-rays { --icon-motion: weather-sun-glow; }
.weather-sun-disc { --icon-motion: weather-sun-rise; }
.weather-wind-upper, .weather-wind-lower { --icon-motion: weather-wind-gust; animation-duration: 1.2s; }
.weather-wind-lower { animation-delay: -.4s; }
.weather-water-far, .weather-water-near { --icon-motion: weather-water-shimmer; }
.weather-water-near { animation-delay: -.6s; }
@keyframes weather-sun-glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes weather-sun-rise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes weather-wind-gust { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(2px); opacity: .65; } }
@keyframes weather-water-shimmer {
  0%, 100% { transform: translateX(0); opacity: 1; }
  25% { transform: translateX(1px); opacity: .55; }
  50% { transform: translateX(0); opacity: .85; }
  75% { transform: translateX(-1px); opacity: .65; }
}
@media (prefers-reduced-motion: no-preference) {
  .weather-switcher button:is([aria-pressed="true"], :focus-visible) .weather-icon-part { animation-name: var(--icon-motion); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .weather-switcher button:hover .weather-icon-part { animation-name: var(--icon-motion); }
}
.weather-fieldnote { display: grid; align-items: center; flex: 1; min-height: 22cqw; padding: 2.5cqw; background-image: repeating-linear-gradient(0deg, transparent 0 4.6cqw, #5268540b 4.6cqw calc(4.6cqw + 1px)); }
.weather-fieldnote article { display: grid; grid-template-columns: 1fr 1.12fr; column-gap: 3cqw; align-items: center; }
.weather-kicker { margin: 0 0 .8cqw; color: #315743; font: 700 2.6cqw/1 var(--condensed); letter-spacing: .065em; text-transform: uppercase; }
.weather-fieldnote .weather-kicker { grid-column: 1 / -1; margin-bottom: 1.5cqw; }
.weather-fieldnote h3 { margin: 0; font: 800 5.1cqw/1 var(--condensed); text-transform: uppercase; }
.weather-fieldnote p:last-child { margin: 0; font: 600 3.6cqw/1.18 var(--condensed); }
.weather-systems { margin-top: 3cqw; }
.weather-systems h2 { margin: 0 0 2cqw; font: 800 5.6cqw/1 var(--condensed); text-transform: uppercase; }
.weather-system-list > div { display: grid; grid-template-columns: 7cqw 20cqw 1fr; gap: 2cqw; align-items: center; padding: 1.5cqw 0; border-top: 1px solid #183e5040; }
.weather-system-list svg { width: 6cqw; height: 6cqw; shape-rendering: crispEdges; }
.weather-system-list h3 { margin: 0; font: 800 3.6cqw/1 var(--condensed); text-transform: uppercase; }
.weather-system-list p { margin: 0; font: 600 3.5cqw/1.18 var(--condensed); }
.weather-footer { margin-top: 3cqw; }
@media (prefers-reduced-motion: reduce) {
  .weather-switcher button, .weather-scene .image-expand { transition: none; }
}

@keyframes fish-flap { 0%, 100% { left: 0; } 50% { left: -100%; } }
@keyframes fish-perk { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-3deg) scale(1.05); } 65% { transform: rotate(2deg) scale(1.02); } }
@keyframes fish-speech-in { from { opacity: 0; transform: translate(1cqw, -45%); } to { opacity: 1; transform: translate(0, -50%); } }
@media (prefers-reduced-motion: reduce) {
  .fish-entry.is-speaking .fish-sprite, .fish-entry.is-speaking .fish-sprite img, .fish-entry.is-speaking .fish-bubble { animation: none; }
}

.screenshot-lightbox { width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #eae5d18c; border-radius: 5px; background: #123448; color: #f0eee7; box-shadow: 0 24px 100px #0009; overflow: auto; overscroll-behavior: contain; }
.screenshot-lightbox[open] { display: flex; flex-direction: column; }
.screenshot-lightbox.is-lake { width: calc(100vw - 32px); height: calc(100dvh - 32px); }
.screenshot-lightbox::backdrop { background: #061923db; backdrop-filter: blur(5px); }
.screenshot-lightbox[open]::backdrop { animation: lightbox-backdrop 240ms ease both; }
.screenshot-lightbox.is-closing::backdrop { animation: lightbox-backdrop-out 180ms ease both; }
.lightbox-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; }
.lightbox-header h2 { margin: 0; font: 800 clamp(18px, 2.2vw, 26px)/1.1 var(--condensed); text-transform: uppercase; }
.lightbox-actions { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.lightbox-zoom { min-height: 36px; padding: 6px 10px; border: 1px solid #c0d0bc; border-radius: 2px; background: #c0d0bc; color: #123448; font: 700 16px/1 var(--condensed); cursor: pointer; }
.lightbox-zoom:hover { background: #e7e7d2; }
.lightbox-zoom:disabled { opacity: .5; cursor: wait; }
.lightbox-close { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 4px 6px 12px; border: 0; background: transparent; color: inherit; font: 600 16px/1 var(--condensed); cursor: pointer; }
.lightbox-close span { font: 300 30px/1 sans-serif; }
.lightbox-close:hover { color: #c4d0b8; }
.lightbox-close:focus-visible, .lightbox-zoom:focus-visible, .lightbox-viewport:focus-visible { outline-color: #f0eee7; }
.lightbox-viewport { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; background: #0b232d; }
.lightbox-image { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 160px); margin-inline: auto; }
.is-lake .lightbox-viewport { flex: 1; }
.is-lake .lightbox-image { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.is-zoomed .lightbox-image { width: var(--image-width); height: auto; max-width: none; max-height: none; margin: 0; }
.is-loading .lightbox-image { opacity: 0; }
.lightbox-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; font: 600 18px/1.3 var(--condensed); text-align: center; }
.lightbox-status[hidden] { display: none; }
#lightbox-caption { flex-shrink: 0; margin: 0; padding: 14px 18px; font: 500 clamp(14px, 1.6vw, 18px)/1.3 var(--condensed); }
@keyframes lightbox-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightbox-backdrop-out { from { opacity: 1; } to { opacity: 0; } }

/* Tab sizes and colors follow the edge tabs in the supplied mockup. */
.binder-tabs {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 5.5cqw;
  bottom: 3.5cqw;
  width: 70px;
  display: grid;
  grid-template-rows: 1.1fr 1fr .94fr 1fr 1fr 1fr .98fr;
  gap: .25cqw;
}
.binder-tab {
  text-decoration: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2cqw;
  width: 100%;
  min-width: 0;
  padding: 1cqw 0 1cqw 1.4cqw;
  border: 1px solid #23342566;
  border-radius: 0 3.1cqw 3.2cqw 0;
  color: #082638;
  background: var(--tab-color);
  background-image: repeating-linear-gradient(122deg, #ffffff06 0 1px, transparent 1px 5px), linear-gradient(105deg, #13281755, #fff0 35%, #ffffff12 77%, #00000012);
  box-shadow: 3px 4px 4px #0008, inset -1px 0 #ffffff55, inset 0 1px #ffffff44;
  transform-origin: left center;
  transform: rotate(var(--tab-angle, 0deg));
  transition: transform 180ms ease, filter 180ms ease;
}
.binder-tab::after { content: ''; position: absolute; inset: 4px 5px 4px 0; border: 1px solid #ffffff10; border-left: 0; border-radius: inherit; pointer-events: none; }
.binder-tab svg { width: 4.2cqw; height: 4.3cqw; flex-shrink: 0; }
.tab-overview svg, .tab-fish svg { transform: scale(1.25); }
.binder-tab span { writing-mode: vertical-rl; text-transform: uppercase; font-family: var(--condensed); font-size: 3.1cqw; font-weight: 800; letter-spacing: .03em; line-height: 1; white-space: nowrap; }
.binder-tab:hover { transform: translateX(4px) rotate(0deg); filter: brightness(1.08); }
.binder-tab[aria-selected='true'] { transform: translateX(5px) rotate(0deg); filter: brightness(1.03); }
.binder-tab:focus-visible { outline-offset: -5px; outline-color: #09283d; }
/* Follow the labels' reading direction; compose with each icon's optical scale. */
.binder-tab svg { rotate: 90deg; }
.tab-overview { --tab-color: #a9ad71; --tab-angle: 1deg; }
.tab-locations { --tab-color: #338cbb; --tab-angle: -1deg; }
.tab-fish { --tab-color: #8caa6b; --tab-angle: -.6deg; }
.tab-tackle { --tab-color: #d9616d; --tab-angle: -.8deg; }
.tab-weather { --tab-color: #9a78aa; --tab-angle: -.5deg; }
.tab-maps { --tab-color: #d29360; --tab-angle: -.9deg; }
.tab-game { --tab-color: #b5b8b8; --tab-angle: -.7deg; }
.blank-sheet { min-height: var(--page-height); }
.blank-section-label { display: block; padding: 4cqw; color: #12334a77; font-family: var(--condensed); font-size: 3cqw; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.page-turn-viewport { position: fixed; z-index: 20; inset: 0; overflow: clip; perspective: 2200px; pointer-events: none; }
.page-turn-leaf { position: absolute; z-index: 5; inset: 0 0 auto; width: 100%; pointer-events: none; will-change: transform; backface-visibility: hidden; }
.page-turn-leaf::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0003, #0000 9%, #ffffff09 55%, #14212b19); pointer-events: none; }

/* The desktop desk opens the guide into a spread around a central binding.
   Keeping its image inside this query avoids a tabletop request on phones. */
@media (min-width: 1024px) {
  html { scrollbar-gutter: stable; }
  body {
    position: relative;
    isolation: isolate;
    padding: 60px 32px 71px;
    background: #624833;
  }
  body::before {
    position: absolute;
    z-index: -1;
    content: '';
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(115deg, #f5e4be10, #1c211c29),
      url('assets/desktop-table.webp') center / cover,
      #624833;
  }
  .binder-desk {
    --page-width: min(480px, calc((100vw - 240px) * .375));
    --binding-gap: 30px;
    --tabs-width: 40.5px;
    width: calc(var(--page-width) * 2 + var(--binding-gap) + var(--tabs-width));
    margin: 0 auto;
    padding-left: calc(var(--page-width) + var(--binding-gap));
  }
  .binder { width: calc(var(--page-width) + var(--tabs-width)); padding-right: var(--tabs-width); }
  .binder::before {
    position: absolute;
    z-index: -5;
    content: '';
    inset: -28px -26px -36px calc(-1 * var(--page-width) - var(--binding-gap) - 29px);
    border: 1px solid #20392f;
    border-radius: 15px 18px 18px 13px;
    background:
      radial-gradient(ellipse at 15% 10%, #d1c8a411, transparent 65%),
      repeating-linear-gradient(28deg, #c1cbb507 0 1px, transparent 1px 3px),
      repeating-linear-gradient(118deg, #071e1612 0 1px, transparent 1px 4px),
      #344c3e;
    box-shadow:
      inset 0 0 0 7px #2b4035,
      inset 0 0 0 8px #adad7d35,
      inset 0 0 0 10px #122b2320,
      0 2px 2px #1c140b70,
      3px 8px 12px #1c140b38,
      8px 21px 35px #1c140b30;
    transform: rotate(-.65deg);
    pointer-events: none;
  }
  .binder-cover {
    inset: -12px -8px -16px calc(-1 * var(--page-width) - var(--binding-gap) - 11px);
    border-radius: 18px 24px 24px 18px;
    box-shadow:
      0 2px 3px #0009,
      4px 8px 9px #101b1699,
      12px 23px 25px #101b164d,
      inset 0 0 0 5px #0b2334,
      inset 0 0 0 6px #647d6a3d;
  }
  .binder-spine {
    z-index: 3;
    top: 8%;
    bottom: 8%;
    left: -21.75px;
    width: 13.5px;
    border-color: #586866;
    border-radius: 10px;
    background: linear-gradient(90deg, #3e5254, #a8b1a6 20%, #d9dbcc 45%, #9ca79d 70%, #445956);
    box-shadow: 2px 1px 4px #061a21aa, inset 0 1px 2px #fcf8db99;
  }
  .desktop-binding { display: block; pointer-events: none; }
  .inside-cover, .turned-pages {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--page-width) - var(--binding-gap));
    width: var(--page-width);
  }
  .inside-cover { z-index: -2; border: 1px solid #91a79720; border-radius: 7px; }
  .inside-cover > span {
    position: absolute;
    top: 37%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #a2b6a45c;
    font-family: var(--condensed);
    font-size: 4.8cqw;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-shadow: 0 1px #e1dfbc12, 0 -1px #031d29aa;
  }
  .inside-cover small { display: block; margin-top: .7em; font-size: .4em; letter-spacing: .3em; }
  .inside-cover::after {
    position: absolute;
    content: '';
    inset: 68% 12px 12px;
    border: 1px solid #71887830;
    border-radius: 2px 2px 7px 7px;
    background: linear-gradient(170deg, #183b4770, #0c263280);
    box-shadow: 0 -2px 3px #05171e77, inset 0 1px #80917d30;
  }
  .turned-pages { z-index: 1; }
  .turned-sheet {
    position: absolute;
    isolation: isolate;
    inset: 0;
    border: 1px solid #b3a68b;
    background: var(--paper);
    box-shadow: inset -9px 0 14px #84725720, -1px 2px 2px #1e271a55;
    transform: translate(calc(var(--leaf) * -.6px), calc(var(--leaf) * .35px));
  }
  .turned-sheet::before { position: absolute; content: ''; inset: 5px; border: 1px solid #948d7720; }
  /* Let the route enter above the lake's viewBox, clipped at the paper edge. */
  .page-back-map-frame { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .page-back-map { position: absolute; inset: 5% 6% 8%; width: 88%; height: 87%; overflow: visible; color: #315743; opacity: .1; pointer-events: none; }
  .page-back-mark { position: absolute; top: 43%; left: 13%; width: 68%; color: #315743; opacity: .1; text-align: center; transform: rotate(-8deg); pointer-events: none; }
  .page-back-mark svg { display: block; width: 18%; height: auto; margin: 0 auto 5%; }
  .page-back-mark strong { display: block; font: 400 clamp(18px, 3vw, 43.5px)/1.04 'Bungee', var(--condensed); letter-spacing: -.045em; }
  .page-back-mark span { display: block; margin-top: 5%; font: 700 clamp(7px, .75vw, 11.25px)/1 var(--condensed); letter-spacing: .24em; text-transform: uppercase; }
  .page-back-mark::after { content: ''; display: block; width: 34%; margin: 6% auto 0; border-top: 1px solid currentColor; }

  .sheet { padding-left: 16.5px; }
  .sheet::after, .turned-sheet::after {
    /* Keep the punches registered with the rings as the left stack offsets.
       The dark opening stays wider than the wire; the pale rim is cut paper. */
    --punch-x: calc(9.75px - var(--leaf, 0) * .6px);
    --punch-rise: calc(var(--leaf, 0) * .35px);
    position: absolute;
    content: '';
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at var(--punch-x) calc(14% - var(--punch-rise)), #102832 0 3.4px, #182923 3.6px, #84755c 3.9px, #afa083 4.35px, #fff5dc 4.7px, #e1d6be 5.1px, transparent 5.55px),
      radial-gradient(circle at var(--punch-x) calc(50% - var(--punch-rise)), #102832 0 3.4px, #182923 3.6px, #84755c 3.9px, #afa083 4.35px, #fff5dc 4.7px, #e1d6be 5.1px, transparent 5.55px),
      radial-gradient(circle at var(--punch-x) calc(86% - var(--punch-rise)), #102832 0 3.4px, #182923 3.6px, #84755c 3.9px, #afa083 4.35px, #fff5dc 4.7px, #e1d6be 5.1px, transparent 5.55px);
  }
  .turned-sheet::after, .turn-back::after { transform: scaleX(-1); }
  .binder-rings { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--binding-gap) - 15.75px); width: 63px; }
  .binder-rings-rear { z-index: 0; }
  .binder-rings-front { z-index: 8; }
  .binder-ring { position: absolute; left: 0; width: 63px; height: 25.5px; transform: translateY(calc(-50% + 1.5px)); }
  .binder-ring:nth-child(1) { top: 14%; }
  .binder-ring:nth-child(2) { top: 50%; }
  .binder-ring:nth-child(3) { top: 86%; }
  .paper-stack { right: calc(var(--tabs-width) - 1px); }
  .binder-tabs { width: calc(var(--tabs-width) + 4.5px); }
  .desktop-turn-leaf {
    transform-origin: calc(var(--binding-gap) / -2) center;
    transform-style: preserve-3d;
    backface-visibility: visible;
  }
  .desktop-turn-leaf::after { display: none; }
  .turn-front, .turn-back { position: absolute; inset: 0; height: 100%; backface-visibility: hidden; }
  .turn-back { transform: rotateY(180deg); transform-origin: center; box-shadow: inset -8px 0 15px #84725725, -2px 4px 8px #10221c33; }
}

@media (max-width: 600px) {
  body { padding: 13px 10px 28px 17px; }
  .binder { padding-right: 36px; }
  .binder-cover { inset: -9px -5px -13px -12px; border-radius: 7px 15px 15px 6px; }
  .binder-spine { left: -9px; width: 12px; }
  .paper-stack { right: 35px; inset-block-end: -4px; }
  .binder-tabs { width: 40px; top: 4.5cqw; bottom: 3cqw; }
  .binder-tab { border-radius: 0 14px 15px 0; gap: 2.8cqw; padding-left: 5px; }
  .binder-tab svg { width: 5.1cqw; height: 5.1cqw; }
  .binder-tab span { font-size: 3.6cqw; }
  .binder-tab[aria-selected='true'] { transform: translateX(2px); }
  .binder-tab:hover { transform: translateX(2px); }
  .signup-form input { font-size: 2.9cqw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .screenshot-lightbox[open]::backdrop { animation: none; }
}

/* Progressive navigation and a keyboard shortcut into the current page. */
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 16px; transform: translateY(-200%); background: var(--paper); color: var(--ink); font: 700 18px var(--condensed); }
.skip-link:focus { transform: none; }
.no-script-note { max-width: 640px; margin: 0 auto 16px; padding: 12px; background: var(--paper); color: var(--ink); font: 600 18px var(--condensed); }