/* Hook 'Em UI: menu screens, the trip HUD and the catch card.
   Colours and fonts are the tokens in base.css. Markup comes from js/ui/*.js.

   Contents
     1. Root, layers, shared pieces (cards, buttons, chips)
     2. Screen frame
     3. Home
     4. Charts (waters map, spot chart)
     5. Waters and spots cards, time of day
     6. Tackle shop
     7. Tackle box
     8. Logbook
     9. Trip HUD
    10. Catch card, sighting card, toast
    11. Wider screens, short screens, reduced motion                              */

/* ---------------------------------------------------------------- 1. root and shared */

.hk {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--mist);

  /* see-through versions of the base tokens */
  --scrim: rgba(8, 28, 36, 0.62);            /* --deep */
  --scrim-soft: rgba(8, 28, 36, 0.26);
  --glass: rgba(14, 42, 51, 0.84);           /* --ink */
  --glass-line: rgba(207, 230, 225, 0.24);   /* --mist */
  --rule: rgba(14, 42, 51, 0.08);            /* --ink, hairlines on paper */
  --paper-veil: rgba(244, 234, 213, 0.86);   /* --paper */
  --sun-veil: rgba(242, 177, 52, 0.34);      /* --sun */
  --danger-veil: rgba(200, 50, 43, 0.5);     /* --danger */
  --gutter: 16px;
}

.hk [hidden] { display: none !important; }
.hk svg { display: block; flex: none; }
.hk :focus { outline: none; }
.hk :focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.card :focus-visible, .bait-menu :focus-visible { outline-color: var(--ink); }   /* gold would vanish on paper */
.hk ul, .hk ol { list-style: none; margin: 0; padding: 0; }
.hk dl, .hk dd { margin: 0; }

/* coins are gold wherever they appear */
.hk .icon-coin { stroke: var(--bobber-dark); }
.hk .icon-coin circle:first-child { fill: var(--sun); }

.layer { position: absolute; inset: 0; pointer-events: none; }
.layer-screens { z-index: 1; }
.layer-hud { z-index: 2; }
.layer-over { z-index: 3; }
.layer-toast { z-index: 4; }

/* paper card with a thin darker rule just inside the edge */
.card {
  position: relative;
  padding: 18px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1.5px solid var(--paper-edge);
  border-radius: calc(var(--radius) - 5px);
  pointer-events: none;
}

.info { display: flex; flex-direction: column; gap: 10px; }
.eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase;
  color: var(--ink-soft);
}
.card-title { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.1; text-wrap: balance; }
.card-sub { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.card-blurb { font-size: 14px; line-height: 1.45; }
.muted { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.sci { font-size: 12.5px; font-style: italic; color: var(--ink-soft); }

/* buttons: a slab with a darker bottom edge that presses down */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; margin-bottom: 4px;
  border-radius: 12px;
  background: var(--paper-2); color: var(--ink);
  font-weight: 700; font-size: 15px; line-height: 1.1; text-align: center;
  box-shadow: 0 4px 0 var(--paper-edge);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--paper-edge); }
.btn:disabled { color: var(--ink-soft); box-shadow: 0 2px 0 var(--paper-edge); cursor: default; }
.btn-primary {
  background: var(--bobber); color: var(--paper);
  font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: 0.03em;
  text-shadow: 0 1px 0 var(--bobber-dark);
  box-shadow: 0 5px 0 var(--bobber-dark), var(--shadow-sm);
}
.btn-primary:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--bobber-dark); }
.btn-big { width: 100%; min-height: 64px; font-size: 25px; border-radius: 16px; }
.btn-wide { width: 100%; }
.btn-small { min-height: 44px; padding: 0 16px; font-size: 14px; }
.btn-buy { min-width: 112px; }

.round-btn {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glass); color: var(--paper);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm);
  transition: transform 0.06s ease;
}
.round-btn:active { transform: scale(0.94); }

.coins {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 13px 0 9px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--glass-line);
  font-family: var(--font-display); font-size: 16px; line-height: 1; color: var(--sun);
  white-space: nowrap;
}
.coins b { font-weight: 400; }
.coins.points { color: var(--mist); }        /* points: the second currency, spent on boats */

.price { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  padding: 3px 9px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--paper-edge);
  font-size: 11.5px; font-weight: 700; line-height: 1.2;
}

.rarity {
  flex: none; display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink); border: 1px solid var(--paper-edge);
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; white-space: nowrap;
}
.rarity-uncommon { background: var(--shallow); border-color: var(--water); }
.rarity-rare { background: var(--water); color: var(--paper); border-color: var(--ink); }
.rarity-legendary { background: var(--sun); border-color: var(--bobber-dark); }
.rarity-special { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* fish pictures scale to the box they are put in */
.art { display: block; }
.art svg { width: 100%; height: auto; }
.art-unknown { color: var(--ink-soft); opacity: 0.5; }

/* ---------------------------------------------------------------- 2. screen frame */

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding:
    calc(var(--safe-top) + 10px) calc(var(--safe-right) + var(--gutter))
    calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + var(--gutter));
  background: var(--scrim);
  pointer-events: auto;
  animation: screen-in 0.26s ease-out both;
}
.screen:focus-visible { outline: none; }

.screen-head {
  flex: none; align-self: center; width: 100%; max-width: 1080px;
  display: flex; align-items: center; gap: 10px; min-height: 44px;
}
.screen-title {
  flex: 1; min-width: 0;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 5.8vw, 30px); line-height: 1.1;
  color: var(--paper); text-shadow: 0 2px 0 var(--bobber-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.head-coins { flex: none; }

/* the scrolling part; a little wider than the header so card shadows are not clipped */
.screen-body {
  flex: 1; min-height: 0; align-self: center;
  width: calc(100% + 12px); max-width: 1092px;
  padding: 2px 6px 12px;
  overflow-x: hidden; overflow-y: auto;
  touch-action: pan-y; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--paper-edge) transparent;
  animation: rise 0.32s ease-out both;
}

.screen.loading { display: grid; place-items: center; background: var(--scrim-soft); }
.loading-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-line);
  color: var(--paper); font-size: 14px; font-weight: 700;
}
.bobber {
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(var(--bobber) 0 50%, var(--paper) 50%);
  box-shadow: 0 0 0 1.5px var(--ink);
  animation: bob 1.2s ease-in-out infinite;
}

.screen.snag { display: grid; place-items: center; }
.snag-card { width: min(100%, 360px); }

/* ---------------------------------------------------------------- 3. home */

.screen.home {
  gap: 0;
  background: linear-gradient(180deg, var(--scrim) 0%, var(--scrim-soft) 32%, var(--scrim-soft) 46%, var(--scrim) 76%);
}
.home-top {
  flex: none; align-self: center; width: 100%; max-width: 1080px;
  display: flex; align-items: center; justify-content: space-between; min-height: 44px;
}
.home-coins, .home-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.home-left { flex: 0 1 auto; }
.home-coins { flex: none; }
/* your angler profile: your name once you have signed in */
.profile-chip {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 132px;
  height: 44px; padding: 0 14px 0 11px; border-radius: 22px;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--paper); box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 700; line-height: 1.1;
}
.profile-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-chip:not(.signed-in) { flex: none; max-width: none; }      /* "Sign in" always fits; only a long name is cut short */
.profile-chip:not(.signed-in) span { overflow: visible; }
.profile-chip.signed-in svg { color: var(--sun); }
.home-body { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.wordmark { text-align: center; padding-top: clamp(0px, 2.5vh, 28px); }
.wordmark h1 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(52px, 15vw, 104px); line-height: 0.95; letter-spacing: 0.01em;
  color: var(--paper); text-shadow: 0 4px 0 var(--bobber-dark), 0 12px 26px var(--scrim);
}
.wordmark p {
  margin-top: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist);
}

.home-stack { width: 100%; max-width: 440px; margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.credit { font-size: 10.5px; line-height: 1.3; text-align: center; color: var(--mist); opacity: 0.85; }

.daily {
  display: grid; grid-template-columns: minmax(0, 1fr) 34%; align-items: center; gap: 10px;
  width: 100%; padding: 16px 14px 16px 18px; text-align: left;
  transition: transform 0.06s ease;
}
.daily:active { transform: translateY(2px); }
.daily-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.daily-goal { font-family: var(--font-display); font-size: 18px; line-height: 1.12; text-wrap: balance; }
.daily-meta { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.meta-item, .daily-best { display: inline-flex; align-items: center; gap: 4px; }
.meta-item.bonus { color: var(--bobber-dark); }
.daily-best { font-size: 12px; font-weight: 700; }
.daily-art { transform: rotate(-7deg); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 80px; padding: 10px 8px 9px; margin-bottom: 4px;
  border-radius: 12px; border: 1px solid var(--paper-edge);
  background: var(--paper); color: var(--ink); text-align: center;
  box-shadow: 0 4px 0 var(--paper-edge), var(--shadow-sm);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.tile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--paper-edge); }
.tile-name { font-family: var(--font-display); font-size: 15px; line-height: 1.1; }
.tile-sub {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px;
  font-size: 12px; line-height: 1.3; color: var(--ink-soft);
}
/* the two things you are saving for: the next rung of tackle (dollars) and the next boat (points) */
.tile-goal { align-items: stretch; gap: 4px; min-height: 104px; padding: 10px 11px 11px; text-align: left; }
.tile-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tile-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--paper-2); overflow: hidden; }
.tile-goal .tile-sub { display: block; }
.tile-price { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.tile-meter { display: block; height: 5px; margin-top: auto; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.tile-meter i { display: block; height: 100%; border-radius: 3px; background: var(--sun); transform-origin: left center; }
.points-meter i { background: var(--water); }

/* points are the star, in lake colours, so they never read as money */
.hk .price-points .icon-star, .hk .points .icon-star, .hk .tile-price .icon-star,
.hk .yard-count .icon-star, .hk .ladder-lead .icon-star { fill: var(--shallow); stroke: var(--water); }
.price-points { font-weight: 700; }
.ladder-lead svg { display: inline-block; vertical-align: -2px; }
/* with a boat: steer it yourself */
.helm-btn { position: relative; width: 100%; min-height: 56px; justify-content: flex-start; gap: 12px; padding: 6px 16px; background: var(--paper); text-align: left; }
.helm-btn.fresh { box-shadow: 0 4px 0 var(--paper-edge), 0 0 0 2px var(--sun); }
.helm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.helm-text b { font-family: var(--font-display); font-weight: 400; font-size: 16px; line-height: 1.1; }
.helm-text small { font-size: 12px; font-weight: 500; line-height: 1.25; color: var(--ink-soft); }
/* running low on something you fish with */
.restock {
  width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px;
  padding: 7px 10px 7px 8px; margin-bottom: 3px; border-radius: 12px; text-align: left;
  background: var(--paper); color: var(--ink); border: 1px solid var(--bobber);
  box-shadow: 0 3px 0 var(--bobber-dark), var(--shadow-sm);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.restock:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--bobber-dark); }
.restock > svg { color: var(--ink-soft); }
.tile-flag {
  position: absolute; top: -9px; right: 10px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--sun); color: var(--ink); box-shadow: 0 2px 0 var(--bobber-dark);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase;
}

/* ---------------------------------------------------------------- 4. charts */

.split { display: flex; flex-direction: column; gap: 12px; }
.side { flex: none; display: flex; flex-direction: column; gap: 12px; }

/* the map sheet: chart paper with a faint grid */
.sheet {
  flex: 1 0 236px; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 14px 12px;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 26px 26px;
}
.chart-area { position: relative; flex: 1; min-height: 0; }
.chart { position: absolute; inset: 0; margin: auto; }      /* js/ui/chart.js sets its width and height */
.chart-status {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13.5px; text-align: center; color: var(--ink-soft);
}
.chart-raster, .chart-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart-lines { overflow: visible; pointer-events: none; }

.shore { fill: none; stroke: var(--ink); stroke-width: 1.6px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.no-raster .shore { fill: var(--water); }
.reach {
  fill: var(--sun); fill-opacity: 0.3;
  stroke: var(--sun); stroke-width: 1.5px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke;
}

.legend {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 18px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase;
  color: var(--ink-soft);
}
.north { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); }
.north svg { transition: transform 0.2s ease; }
.north.rot svg { transform: rotate(-90deg); }
.scalebar { display: inline-flex; align-items: center; gap: 6px; }
.scalebar i { display: block; width: 60px; height: 6px; border: 1.5px solid var(--ink); border-top: 0; }
.scalebar b { font-weight: 700; }
.key { display: inline-flex; align-items: center; gap: 5px; }
.key-dot { display: block; width: 10px; height: 10px; border-radius: 50%; }
.key-dot.open { background: var(--bobber); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.key-dot.weeds { background: var(--reed); }
.depth-key { display: inline-flex; align-items: center; gap: 5px; }
.swatches { display: flex; border: 1px solid var(--ink); border-radius: 3px; overflow: hidden; }
.swatches i { display: block; width: 10px; height: 9px; }

/* pins on the waters map */
.wshape { stroke: var(--ink); stroke-width: 1.4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: auto; cursor: pointer; }
.wshape.open { fill: var(--water); }
.wshape.shut { fill: var(--paper-edge); stroke: var(--ink-soft); stroke-dasharray: 3 2; }
.wshape.selected { stroke: var(--bobber); stroke-width: 2.6px; stroke-dasharray: none; }

.wpin, .pin {
  position: absolute; z-index: 2;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: grid; place-items: center;
}
.wpin.selected, .pin.selected { z-index: 3; }
.wpin-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink-soft); border: 1.5px solid var(--ink-soft);
}
.wpin.open .wpin-dot {
  width: 16px; height: 16px;
  background: var(--bobber); border: 3px solid var(--paper);
  box-shadow: 0 0 0 1.5px var(--ink);
  animation: beacon 1.8s ease-out infinite;
}
.wpin.shaped.shut .wpin-dot { background: var(--paper-veil); border-color: transparent; }
.wpin-label, .pin-label {
  position: absolute; left: 44px; top: 11px;
  white-space: nowrap; text-align: left; line-height: 1.1;
  border-radius: 6px;
}
.wpin-label { display: flex; flex-direction: column; gap: 1px; padding: 3px 6px; background: var(--paper-veil); color: var(--ink); }
.wpin-label b { font-size: 12px; font-weight: 700; }
.wpin-label small { font-size: 10px; font-weight: 500; color: var(--ink-soft); }
.wpin.shut .wpin-label b { color: var(--ink-soft); }
.wpin.selected .wpin-label { background: var(--ink); }
.wpin.selected .wpin-label b, .wpin.selected .wpin-label small { color: var(--paper); }
.compact .wpin-label small { display: none; }

/* pins on the spot chart */
.pin-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); color: var(--bobber-dark);
  border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
  transition: transform 0.12s ease;
}
.pin.selected .pin-dot { background: var(--bobber); color: var(--paper); transform: scale(1.14); }
.pin.locked .pin-dot { background: var(--paper-2); color: var(--ink-soft); border-color: var(--ink-soft); box-shadow: 0 2px 0 var(--ink-soft); }
.pin-label {
  padding: 4px 7px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--paper-edge); box-shadow: 0 1px 0 var(--paper-edge);
  font-size: 11px; font-weight: 700;
}
.pin.selected .pin-label { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
.pin.locked:not(.selected) .pin-label { color: var(--ink-soft); }
/* a boat launch you can push off from, and the one "Take the boat out" will use */
.pin.launch .pin-dot { border-style: double; border-width: 4px; }
.pin.from .pin-dot { box-shadow: 0 0 0 3px var(--sun), 0 2px 0 var(--ink); }

/* with a boat: take it out yourself */
.helm-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.helm-go { position: relative; flex: 0 1 auto; min-height: 48px; padding: 0 18px; font-size: 17px; }
.helm-new {
  position: absolute; top: -9px; right: -6px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--sun); color: var(--ink); box-shadow: 0 2px 0 var(--bobber-dark);
  font-family: var(--font-ui); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2;
  text-shadow: none; text-transform: uppercase;
}
.helm-note { flex: 1 1 200px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
.launch-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.launch-from { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.launch-opt, .spot-chip {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 0 12px; border-radius: 22px;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--paper-edge);
  font-size: 12.5px; font-weight: 700; line-height: 1.1; white-space: nowrap;
}
.launch-opt.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--sun); }
.spot-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.spot-chip.locked:not(.on) { color: var(--ink-soft); }
/* the names of the spots, under a chart too small to carry them */
.spot-list { display: none; }
.sheet.compact .spot-list {
  flex: none; display: flex; gap: 6px; margin: 0 -4px; padding: 0 4px 2px;
  overflow-x: auto; touch-action: pan-x pan-y; overscroll-behavior: contain; scrollbar-width: none;
}
.sheet.compact .spot-list::-webkit-scrollbar { display: none; }
.spot-list li { flex: none; }
/* the chart keeps its height when rows are added above and below it */
.sheet.compact { flex-basis: 286px; }
.sheet.with-helm { flex-basis: 300px; }
.sheet.with-helm.pick-launch, .sheet.compact.with-helm { flex-basis: 350px; }
.sheet.compact.with-helm.pick-launch { flex-basis: 400px; }

.lm { position: absolute; z-index: 1; width: 0; height: 0; }
.lm > i { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); }
.lm-label {
  position: absolute; left: 6px; top: -7px;
  padding: 1px 3px; border-radius: 3px;
  background: var(--paper-veil); color: var(--ink-soft);
  font-size: 10px; font-style: italic; line-height: 1.15; white-space: nowrap;
}

/* ---------------------------------------------------------------- 5. waters and spots */

.facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--ink-soft); }
.facts li { display: inline-flex; align-items: center; gap: 5px; }
.facts b { color: var(--ink); }

.roster-wrap { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1.5px dashed var(--paper-edge); }
.roster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 6px; }
.roster li.got { filter: drop-shadow(0 1px 0 var(--paper-edge)); }

/* the main button stays in reach while the card scrolls under it */
.info > .btn-primary { position: sticky; bottom: 6px; z-index: 1; }

.timebar {
  flex: none; align-self: center; width: 100%; max-width: 1080px;
  display: flex; flex-direction: column; gap: 6px;
}
.seg {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
  padding: 3px; border-radius: 13px;
  background: var(--glass); border: 1px solid var(--glass-line);
}
.seg-btn {
  min-height: 44px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--mist); font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.seg-btn[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 2px 0 var(--paper-edge); }
.live-dot {
  display: block; width: 10px; height: 10px; margin: 4px; border-radius: 50%;
  background: var(--bobber); box-shadow: 0 0 0 2px var(--glass-line);
  animation: live 1.6s ease-in-out infinite;
}
.cond-line { display: flex; align-items: center; gap: 6px; min-height: 18px; font-size: 13px; line-height: 1.3; color: var(--mist); }

.likely { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1.5px dashed var(--paper-edge); }
.likely:empty { display: none; }
.likely-list { display: grid; gap: 5px; }
.likely-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr) 56px 34px; align-items: center; gap: 8px; }
.likely-name { font-size: 13px; font-weight: 700; line-height: 1.15; }
.likely-bar { display: block; height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.likely-bar i { display: block; height: 100%; border-radius: 3px; background: var(--water); transform-origin: left center; }
.likely-pct { font-size: 12px; font-weight: 700; text-align: right; color: var(--ink-soft); white-space: nowrap; }

.locked-note { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--bobber-dark); }
.in-range { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.35; }
.in-range svg { margin-top: 2px; color: var(--water); }

/* ---------------------------------------------------------------- 6. tackle store */

.box-body, .log-body { display: flex; flex-direction: column; gap: 20px; }

/* you are indoors: the lake is hidden behind the shop */
.screen.store { background: linear-gradient(180deg, var(--ink) 0%, var(--deep) 100%); }
.store-main {
  position: relative; flex: 1; min-height: 0; align-self: center;
  width: 100%; max-width: 1320px;
  display: flex; flex-direction: column; gap: 10px;
}

/* the basket follows you around the shop: how many things, and what they come to */
.basket-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 14px 0 10px; border-radius: 22px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--paper-edge); box-shadow: 0 3px 0 var(--paper-edge);
  font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.basket-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--paper-edge); }
.basket-n {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--bobber); color: var(--paper);
  font-size: 11.5px; line-height: 20px; text-align: center;
}
.basket-chip.empty { background: var(--glass); color: var(--paper); border-color: var(--glass-line); box-shadow: var(--shadow-sm); }
.basket-chip.empty .basket-n { display: none; }
.basket-chip.bump { animation: bump 0.3s ease-out; }

/* the shopkeeper and what he has to say */
.keeper, .counter-talk { flex: none; display: flex; align-items: flex-end; gap: 10px; min-height: 64px; }
.keeper-face {
  flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: var(--paper-2); color: var(--ink); border: 2px solid var(--paper); box-shadow: var(--shadow-sm);
  transition: transform 0.06s ease;
}
.keeper-face svg { width: 100%; height: 100%; }
button.keeper-face:active { transform: scale(0.95); }
.bubble {
  flex: 0 1 auto; min-width: 0; max-width: 560px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px;
  padding: 10px 14px; border-radius: 16px 16px 16px 4px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--paper-edge); box-shadow: var(--shadow-sm);
}
.bubble-text { flex: 1 1 180px; min-width: 0; font-size: 14px; line-height: 1.35; text-wrap: pretty; }
.bubble-go {
  flex: none; display: inline-flex; align-items: center; gap: 3px;
  min-height: 44px; margin: -8px 0; padding: 0 2px;
  font-size: 13px; font-weight: 700; color: var(--bobber-dark);
}
.bubble :focus-visible { outline-color: var(--ink); }
.counter-talk.sorry .bubble { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger), var(--shadow-sm); }

/* the room: a picture with a button over every place you can go */
.store-floor { position: relative; flex: 1; min-height: 0; display: flex; }
.room-scroll {
  flex: 1; min-width: 0; display: flex;
  overflow: auto; container-type: size;
  scroll-snap-type: x proximity; overscroll-behavior: contain; touch-action: pan-x pan-y;
  scrollbar-width: none;
}
.room-scroll::-webkit-scrollbar { display: none; }
.pans .room-scroll { cursor: grab; }
.room-scroll.dragging { scroll-snap-type: none; cursor: grabbing; }
.room {
  position: relative; flex: none; margin: auto;
  height: 100%; min-height: 260px; aspect-ratio: 12 / 7;
  border-radius: var(--radius); overflow: hidden;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--glass-line);
}
/* as tall as the floor allows; wider than a phone, where it pans; never smaller than is comfortable to tap */
@supports (height: 1cqh) {
  .room { height: max(260px, min(100cqh, max(calc(100cqw * 7 / 12), 380px))); min-height: 0; }
}
.room-art { position: absolute; inset: 0; }
.room-art svg { width: 100%; height: 100%; }
.room-stop { position: absolute; top: 0; width: 1px; height: 1px; pointer-events: none; }
.stop-a { left: 0; scroll-snap-align: start; }
.stop-b { left: 50%; scroll-snap-align: center; }
.stop-c { right: 0; scroll-snap-align: end; }
.room-nudge { position: absolute; top: 50%; z-index: 2; margin-top: -22px; }
.nudge-left { left: 8px; }
.nudge-right { right: 8px; }

.spot {
  position: absolute; display: block; border-radius: 10px; color: var(--ink);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.spot:focus-visible { outline-offset: -3px; background: var(--sun-veil); }
.spot:active { background: var(--sun-veil); box-shadow: inset 0 0 0 2px var(--sun); }
/* a little paper tag hanging from a nail, so the room reads at a glance */
.spot-tag {
  position: absolute; left: 50%; top: 9px; transform: translateX(-50%) rotate(-2deg);
  width: max-content; max-width: calc(100% + 10px);
  padding: 4px 8px; border-radius: 5px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--paper-edge);
  box-shadow: 0 2px 0 var(--paper-edge), var(--shadow-sm);
  font-family: var(--font-display); font-size: 11px; line-height: 1.1; text-align: center;
}
.spot:nth-of-type(even) .spot-tag { transform: translateX(-50%) rotate(1.5deg); }
.spot-tag::before {
  content: ''; position: absolute; left: 50%; top: -8px; width: 1.5px; height: 8px;
  background: var(--ink); opacity: 0.55;
}
.spot-name { display: block; }
.spot-badge, .chip-badge {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--sun); color: var(--ink);
  font-family: var(--font-ui); font-size: 11.5px; font-style: normal; font-weight: 700; line-height: 20px; text-align: center;
}
.spot-badge { position: absolute; top: -10px; right: -10px; box-shadow: 0 0 0 2px var(--paper), 0 2px 0 var(--bobber-dark); animation: bump 0.4s ease-out; }
.spot[data-spot="counter"] .spot-badge, .dept-chip[data-chip="counter"] .chip-badge { background: var(--bobber); color: var(--paper); }
.spot-plain, .spot-where { display: none; }

/* no picture: the same places as plain tiles */
.room.plain { background: none; box-shadow: none; }
.plain .spot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 8px; text-align: center;
  background: var(--paper); border: 1px solid var(--paper-edge); box-shadow: 0 4px 0 var(--paper-edge);
}
.plain .spot:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--paper-edge); }
.plain .spot-plain { display: block; }
.plain .spot-where { display: block; font-size: 11.5px; line-height: 1.25; color: var(--ink-soft); }
.plain .spot-tag {
  position: relative; left: auto; top: auto; transform: none; max-width: 100%;
  padding: 0; border: 0; background: none; box-shadow: none; font-size: 15px;
}
.plain .spot-tag::before { display: none; }

/* the departments again, as chips: a second way in */
.dept-chips { flex: none; margin: 0 -6px; }
.dept-chips ul {
  display: flex; gap: 8px; padding: 2px 6px 4px;
  overflow-x: auto; touch-action: pan-x pan-y; overscroll-behavior: contain; scrollbar-width: none;
}
.dept-chips ul::-webkit-scrollbar { display: none; }
.dept-chips li { flex: none; }
.dept-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px 0 11px; margin-bottom: 3px; border-radius: 22px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--paper-edge); box-shadow: 0 3px 0 var(--paper-edge);
  font-size: 13px; font-weight: 700; line-height: 1.1; white-space: nowrap;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.dept-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--paper-edge); }

/* a shelf, the basket, the counter or the poster: a pane of paper over the room */
.store-over {
  position: absolute; inset: -4px; z-index: 3;
  display: flex; padding: 4px; border-radius: var(--radius);
  background: var(--scrim);
  animation: screen-in 0.18s ease-out both;
}
.pane {
  flex: 1; min-width: 0; max-width: 780px; max-height: 100%; margin: 0 auto; align-self: center;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: var(--paper-2); box-shadow: var(--shadow);
  animation: rise 0.24s ease-out both;
}
.pane:focus-visible { outline: none; }
.pane-head {
  flex: none; display: flex; flex-direction: column; gap: 2px;
  padding: 16px 60px 12px 20px; background: var(--paper); border-bottom: 1.5px dashed var(--paper-edge);
}
.pane-head .eyebrow:empty { display: none; }
.pane-body {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 20px;
  touch-action: pan-y; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--paper-edge) transparent;
}
.pane-body > * { flex: none; }
.pane-foot {
  flex: none; display: flex; flex-wrap: wrap; gap: 6px 10px;
  padding: 12px 16px 12px; background: var(--paper); border-top: 1.5px dashed var(--paper-edge);
}
.pane-foot .btn-wide { flex: 1 1 200px; width: auto; }
.pane-foot .btn:not(.btn-primary) { flex: 0 1 auto; }
.pane-lead { max-width: 62ch; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.shelf-label {
  margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; color: var(--ink-soft);
}

.items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px 12px; align-content: start; padding: 14px 16px 12px; }
.item-icon { align-self: start; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px; background: var(--paper-2); }
.item-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.item-name { font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.15; }
.item-blurb { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.stats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.stats li { padding: 3px 8px; border-radius: 6px; background: var(--paper-2); font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.item-catches { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.3; }
.item-buy {
  grid-column: 1 / -1; align-self: end;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px;
  min-height: 52px; padding-top: 8px; border-top: 1.5px dashed var(--paper-edge);
}
.item.owned .item-icon { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper-edge); }
.item.pointed, .item.pointed::after { border-color: var(--bobber); }
.item.pointed { animation: sold 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.2s; }
/* a hang tag: one clipped corner and a punched hole */
.hangtag { border-radius: var(--radius) 4px var(--radius) var(--radius); box-shadow: 0 2px 0 var(--paper-edge); }
.hangtag::before {
  content: ''; position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--paper-2); box-shadow: inset 0 1.5px 0 var(--paper-edge);
}
.hangtag::after { border-radius: 9px 2px 9px 9px; }
.hangtag .item-name { padding-right: 18px; }

.state {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.state-on { color: var(--ink); }
.state-on svg { color: var(--reed); }
.buy-note { margin-right: auto; font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--ink-soft); }
.buy-note.short { color: var(--bobber-dark); }
.lock-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--ink-soft); }

.stepper { flex: none; display: inline-flex; align-items: center; border-radius: 12px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--paper-edge); }
.step-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); }
.step-btn:disabled { color: var(--paper-edge); cursor: default; }
.step-btn:active:not(:disabled) { background: var(--paper-edge); }
.step-n { min-width: 26px; font-family: var(--font-display); font-weight: 400; font-size: 16px; line-height: 1; text-align: center; }

/* a rig you tie yourself: what goes into it and how much of each you hold */
.recipe {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px;
  padding-top: 8px; border-top: 1.5px dashed var(--paper-edge);
}
.recipe-parts { display: flex; flex-direction: column; gap: 4px; }
.recipe-parts li { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.recipe-icon, .guide-icon, .bag-icon, .restock-icon {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: var(--paper-2);
}
.recipe-text, .guide-text, .bag-text, .restock-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.recipe-text b, .guide-text b, .bag-text b, .restock-text b { font-size: 14px; }
.recipe-text small, .guide-text small, .bag-text small, .restock-text small { font-size: 12px; color: var(--ink-soft); }
.recipe-have { flex: none; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.recipe-have.none { color: var(--bobber-dark); }
.recipe-have i { font-style: normal; color: var(--reed); }

/* the poster: the ladder, as a guide to what to buy next */
.step-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px dashed var(--glass-line); color: var(--mist);
  font-family: var(--font-display); font-size: 15px; line-height: 1;
}
.pane .step-num { border-color: var(--paper-edge); color: var(--ink-soft); }
.reached .step-num { background: var(--bobber); color: var(--paper); border: 2px solid var(--paper); box-shadow: 0 2px 0 var(--bobber-dark); }
.rung-name { min-width: 0; }
.guide-step { display: flex; flex-direction: column; gap: 8px; }
.step-head { display: flex; align-items: flex-start; gap: 12px; padding: 0 2px; }
.step-head .step-num { width: 42px; height: 42px; margin-top: 2px; font-size: 21px; }
.side-track { padding-top: 14px; border-top: 1.5px dashed var(--paper-edge); }      /* fly fishing: beside the ladder, not on it */
.side-track.reached .step-num { background: var(--water); box-shadow: 0 2px 0 var(--ink); }
.step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.step-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bobber-dark); }
.guide-title { font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.1; }
.guide-note { max-width: 62ch; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.guide-rows { display: flex; flex-direction: column; gap: 6px; }
.guide-row {
  width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 8px; border-radius: 12px; text-align: left;
  background: var(--paper); color: var(--ink); border: 1px solid var(--paper-edge);
}
.guide-row.next { border-color: var(--bobber); box-shadow: inset 0 0 0 1px var(--bobber); }
.guide-next {
  flex: none; padding: 3px 8px; border-radius: 999px; background: var(--sun);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase;
}
.guide-state { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.guide-state svg { color: var(--reed); }
.guide-row > svg { color: var(--ink-soft); }

/* the basket, line by line */
.bag { display: flex; flex-direction: column; gap: 8px; }
.bag-line {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto 44px; align-items: center; gap: 6px 8px;
  padding: 8px 2px 8px 10px; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--paper-edge);
}
.bag-line.bad { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.bag-text .bag-problem { font-weight: 700; color: var(--bobber-dark); }
.bag-price { min-width: 48px; font-family: var(--font-display); font-weight: 400; font-size: 15px; text-align: right; }
.bag-remove { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-soft); }
.tally {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--paper-edge);
}
.tally div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; line-height: 1.3; }
.tally dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.tally .tally-total { padding-bottom: 5px; margin-bottom: 1px; border-bottom: 1.5px dashed var(--paper-edge); }
.tally-total dt, .tally .tally-total dd { font-family: var(--font-display); font-weight: 400; font-size: 18px; }
.tally .short dt, .tally .short dd { color: var(--bobber-dark); }

/* the counter: a paper receipt, rung up line by line */
.receipt {
  position: relative; align-self: center; width: min(100%, 440px);
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--paper-edge); border-top: 2px dashed var(--paper-edge); border-bottom: 2px dashed var(--paper-edge);
  border-radius: 2px; box-shadow: var(--shadow-sm);
}
.receipt-shop {
  padding-bottom: 9px; border-bottom: 1.5px dashed var(--paper-edge);
  font-family: var(--font-display); font-size: 16px; letter-spacing: 0.04em; line-height: 1.15; text-align: center;
}
.receipt-lines { display: flex; flex-direction: column; gap: 5px; }
.receipt-line {
  display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; line-height: 1.3;
  animation: ring-up 0.28s ease-out both; animation-delay: calc(var(--i, 0) * 90ms);
}
.receipt.paid .receipt-line { animation: none; }
.receipt-qty { flex: none; min-width: 32px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.receipt-name { flex: 1; min-width: 0; }
.receipt-line b { font-variant-numeric: tabular-nums; }
.receipt-line.bad { margin: 0 -6px; padding: 3px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--danger); color: var(--bobber-dark); font-weight: 700; }
.tally.receipt-sum { padding: 9px 0 0; border: 0; border-top: 1.5px dashed var(--paper-edge); border-radius: 0; background: none; }
.receipt-box { display: flex; flex-direction: column; gap: 5px; padding-top: 10px; border-top: 1.5px dashed var(--paper-edge); }
.box-list { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; line-height: 1.3; }
.box-list li.kit { padding-left: 14px; font-size: 12.5px; color: var(--ink-soft); }
.box-list span { color: var(--ink-soft); }
.stamp {
  position: absolute; top: 46px; right: 12px; padding: 4px 12px 5px;
  border: 3px solid var(--bobber); border-radius: 8px; color: var(--bobber);
  font-family: var(--font-display); font-size: 26px; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase;
  transform: rotate(-12deg); opacity: 0.9; pointer-events: none;
  animation: stamp-in 0.38s cubic-bezier(0.2, 1.4, 0.4, 1) 0.15s both;
}

/* ---------------------------------------------------------------- 7. tackle box */

.rig { display: flex; flex-direction: column; gap: 12px; }
.rig-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rig-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rig-icon { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; background: var(--paper-2); }
.rig-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rig-slot { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.rig-name { font-size: 14.5px; }
.rig-stat { font-size: 12px; color: var(--ink-soft); }
.rig-bait { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1.5px dashed var(--paper-edge); }
.fans-row { display: flex; flex-direction: column; gap: 4px; }
.fans { display: flex; flex-wrap: wrap; gap: 6px; }
.fan {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 6px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--paper-edge);
  font-size: 12.5px; font-weight: 700; line-height: 1.15;
}
.fan .art { flex: none; width: 44px; }

.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.choices li { display: flex; }
.choice {
  position: relative; flex: 1; min-width: 0; min-height: 104px; margin-bottom: 4px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 12px 12px; border-radius: 12px; text-align: left;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--paper-edge); box-shadow: 0 4px 0 var(--paper-edge);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.choice:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--paper-edge); }
.choice.on { border-color: var(--bobber); box-shadow: 0 4px 0 var(--bobber-dark); }
.choice-icon { margin-bottom: 2px; }
.choice-name { font-family: var(--font-display); font-size: 14px; line-height: 1.15; }
.choice-stat { font-size: 12px; line-height: 1.25; color: var(--ink-soft); }
.choice-note { font-size: 11.5px; font-weight: 700; line-height: 1.25; color: var(--bobber-dark); }
.choice-check {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bobber); color: var(--paper);
}
.box-foot { display: flex; justify-content: center; }

.group { display: flex; flex-direction: column; gap: 10px; }
.group-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 2px; }
.group-title {
  font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.1;
  color: var(--paper); text-shadow: 0 2px 0 var(--bobber-dark);
}
.group-note { max-width: 62ch; font-size: 13.5px; line-height: 1.4; color: var(--mist); }

/* your rods, each with the reel that is on it */
.rodcards, .unready { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.rodcard { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.rodcard.on, .rodcard.on::after { border-color: var(--bobber); }
.rodcard-top, .unready-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rodcard-top .rig-text, .unready-row .rig-text { flex: 1; }
.reel-row { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1.5px dashed var(--paper-edge); }
.reel-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.reel-opt {
  flex: 1 1 120px; min-height: 48px; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 6px 10px; border-radius: 10px; text-align: left; line-height: 1.2;
  background: var(--paper-2); color: var(--ink); border: 1.5px solid var(--paper-edge);
}
.reel-opt b { font-size: 13px; }
.reel-opt small { font-size: 11.5px; color: var(--ink-soft); }
.reel-opt.on { background: var(--paper); border-color: var(--bobber); box-shadow: inset 0 0 0 1px var(--bobber); }
.reel-note { font-size: 12px; line-height: 1.3; color: var(--ink-soft); }
.reel-stock { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: 13.5px; }
.text-link {
  min-height: 44px; display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 700; color: var(--bobber-dark); text-decoration: underline; text-underline-offset: 3px;
}

/* how many are left of everything you can tie on */
.choice-count, .bait-count {
  min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: var(--paper-2); color: var(--ink); border: 1px solid var(--paper-edge);
  font-size: 11.5px; font-style: normal; font-weight: 700; line-height: 20px; text-align: center; white-space: nowrap;
}
.choice-count { position: absolute; top: 9px; right: 9px; }
.choice.on .choice-count { right: 38px; }
.choice-count.low, .bait-count.low { background: var(--bobber); color: var(--paper); border-color: var(--bobber-dark); }
.choice-part, .part-have { font-size: 11.5px; line-height: 1.25; color: var(--ink-soft); }
.choice-part.none, .part-have.none { font-weight: 700; color: var(--bobber-dark); }
.unready-row { padding: 12px 14px; background: var(--paper-2); }
.unready-row .rig-icon { background: var(--paper); color: var(--ink-soft); }
.unready-row .btn { flex: none; background: var(--paper); }
.unready-why { font-size: 12.5px; font-weight: 700; line-height: 1.25; color: var(--bobber-dark); }
.unready-parts { display: flex; flex-wrap: wrap; gap: 1px 10px; }

/* ---------------------------------------------------------------- 8. logbook */

.log-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 16px 18px; }
.stat { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.stat b { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.05; }
.stat b small { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.stat span { font-size: 12px; color: var(--ink-soft); }
.stat-wide { grid-column: 1 / -1; }

.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.guide { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.guide-art { align-self: center; width: min(100%, 240px); }
.guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.guide-head h3 { min-width: 0; font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.12; }
.guide-blurb { font-size: 13px; line-height: 1.45; }
.guide-hint { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.guide-hint svg { margin-top: 2px; }
.guide.unknown { background: var(--paper-2); }
.guide.unknown h3 { letter-spacing: 0.08em; color: var(--ink-soft); }

/* legends: one particular fish each. Landed ones are told in gold on night water */
.rarity-legend { background: var(--sun); border-color: var(--bobber-dark); }
.legend-card.unknown { border-style: dashed; }
.legend-card.caught {
  background: linear-gradient(170deg, var(--water), var(--ink) 55%, var(--deep));
  color: var(--paper); border-color: var(--sun);
}
.legend-card.caught::after { border-color: var(--sun); }
.legend-card.caught h3 { color: var(--sun); text-shadow: 0 2px 0 var(--bobber-dark); }
.legend-card.caught .legend-title { color: var(--sun); }
.legend-card.caught .sci, .legend-card.caught .pb dt { color: var(--mist); }
.legend-card.caught .pb { border-top-color: var(--glass-line); }
.legend-card.caught .pb dd svg { color: var(--sun); }
.legend-card.caught .guide-art { filter: drop-shadow(0 0 12px var(--sun-veil)); }
.pb {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: auto; padding-top: 8px; border-top: 1.5px dashed var(--paper-edge);
}
.pb dt { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.pb dd { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; line-height: 1.25; }
.pb dd svg { color: var(--bobber-dark); }

/* ---------------------------------------------------------------- 9. trip HUD */

.hud {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding:
    calc(var(--safe-top) + 8px) calc(var(--safe-right) + 10px)
    calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 10px);
  color: var(--paper);
  pointer-events: none;
}
.hud button { pointer-events: auto; }

.hud-top { display: flex; align-items: center; gap: 8px; }
.hud-btn {
  flex: none; min-width: 44px; height: 44px; padding: 0 9px; border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--glass); color: var(--paper);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm);
}
.hud-btn:active:not(:disabled) { transform: scale(0.95); }
.hud-btn:disabled { opacity: 0.5; cursor: default; }
.hud-place {
  flex: 0 1 auto; min-width: 0; height: 44px; padding: 0 14px; border-radius: 22px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--glass); border: 1px solid var(--glass-line);
}
.hud-spot { font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-cond { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1.2; color: var(--mist); white-space: nowrap; overflow: hidden; }
.cond-period { display: none; }
.hud-coins { flex: none; margin-left: auto; }
.hud-coins .coins { height: 44px; border-radius: 22px; }
.hud-coins.bump { animation: bump 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }

.bait-wrap { position: relative; flex: none; }
.bait-name { display: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.bait-menu {
  position: absolute; top: 52px; right: 0; z-index: 5;
  width: min(280px, 82vw); max-height: min(62vh, 420px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  border-radius: var(--radius); border: 1px solid var(--paper-edge);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow);
  pointer-events: auto; touch-action: pan-y;
  animation: drop-in 0.16s ease-out both;
}
.bait-menu-title { padding: 4px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.bait-menu-hint { padding: 6px 8px 4px; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
.bait-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 48px; padding: 5px 8px; border-radius: 9px; text-align: left;
}
.bait-opt[aria-checked="true"] { background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--bobber); }
.bait-opt-icon { flex: none; width: 34px; display: grid; place-items: center; }
.bait-opt-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.2; }
.bait-count { flex: none; }
.bait-count.none { background: none; color: var(--ink-soft); }
.bait-opt.spent { cursor: default; }
.bait-opt.spent .bait-opt-icon, .bait-opt.spent b { opacity: 0.55; }
.bait-opt.spent small { font-weight: 700; color: var(--bobber-dark); }
.bait-opt-text b { font-size: 14px; }
.bait-opt-text small { font-size: 11.5px; color: var(--ink-soft); }
.bait-opt-text small.bait-opt-switch { font-weight: 700; color: var(--bobber-dark); }
.bait-opt-check { color: var(--bobber-dark); }

.hud-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; text-align: center; }
.prompt {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  max-width: 100%; padding: 7px 16px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--glass-line);
  font-size: 15px; font-weight: 700; line-height: 1.25;
}
.prompt-keys { display: none; font-size: 11px; font-weight: 500; opacity: 0.85; }
.prompt.tone-go { background: var(--water); border-color: var(--shallow); font-size: 20px; }
.prompt.tone-warn { background: var(--sun); border-color: var(--paper); color: var(--ink); font-size: 18px; }
.prompt.tone-urgent {
  padding: 10px 24px;
  background: var(--bobber); border: 3px solid var(--paper);
  box-shadow: 0 6px 0 var(--bobber-dark), var(--shadow);
  font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 9.5vw, 56px); line-height: 1.05; letter-spacing: 0.02em;
  text-shadow: 0 3px 0 var(--bobber-dark);
  animation: strike 0.32s ease-in-out infinite alternate;
}
.prompt.tone-urgent .prompt-keys { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0; text-shadow: none; opacity: 1; }

.banners { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.banner {
  padding: 6px 14px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--paper);
  font-family: var(--font-display); font-size: 18px; line-height: 1.15;
  animation: banner-in 0.26s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.banner.good { background: var(--sun); border-color: var(--paper); color: var(--ink); }
.banner.bad { background: var(--danger); border-color: var(--paper); }
.banner.warn { background: var(--bobber); border-color: var(--paper); }
.banner.out { animation: fade-out 0.28s ease-in both; }

.hud-bottom { display: flex; align-items: flex-end; gap: 12px; margin-top: auto; }
.hud-panels { flex: 1; min-width: 0; max-width: 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.finder {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 12px;
  padding: 7px 13px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--glass-line);
  font-size: 12px; line-height: 1.2;
}
.finder span { display: inline-flex; align-items: center; gap: 5px; }

.power { width: 100%; padding: 10px 12px 8px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-line); }
.power-read { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.power-dist { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1; }
.power-note { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun); }
.power-track { position: relative; height: 20px; border-radius: 10px; background: var(--deep); border: 1.5px solid var(--mist); overflow: hidden; }
.power-zone { position: absolute; top: 0; bottom: 0; background: var(--reed); }
.power-fill { position: absolute; inset: 0; background: var(--paper); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.power-marks { position: absolute; top: 0; bottom: 0; border-left: 2.5px solid var(--reed); border-right: 2.5px solid var(--reed); }
.power-caption { margin-top: 3px; text-align: right; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; color: var(--mist); }
.power.sweet .power-fill { background: var(--sun); }
.power.sweet .power-track { border-color: var(--sun); box-shadow: 0 0 0 3px var(--sun-veil); }
.power.sweet .power-caption { color: var(--sun); }
.power.dry .power-dist, .power.dry .power-note { color: var(--bobber); }
/* spincast: a plain friendly bar that fills and waits */
.power.easy .power-zone, .power.easy .power-marks, .power.easy .power-caption { display: none; }
.power.easy .power-fill { background: var(--shallow); }
.power.full .power-fill { background: var(--sun); }
.power.full .power-track { border-color: var(--sun); }

/* baitcaster in the air: the bar fills as the lure flies; the gold end is the moment to thumb */
.spool { width: 100%; padding: 10px 12px 8px; border-radius: var(--radius); background: var(--glass); border: 2px solid var(--glass-line); }
.spool-read {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; color: var(--mist);
}
.spool-note { color: var(--sun); }
.spool-track { position: relative; height: 22px; border-radius: 11px; background: var(--deep); border: 1.5px solid var(--mist); overflow: hidden; }
.spool-fill { position: absolute; inset: 0; background: var(--paper); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.spool-zone { position: absolute; z-index: 1; top: 0; bottom: 0; left: 82%; right: 0; background: var(--sun); opacity: 0.6; border-left: 2.5px solid var(--sun); }
.spool-caption {
  display: flex; justify-content: space-between; margin-top: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; color: var(--mist);
}
.spool.now { border-color: var(--sun); animation: now-flash 0.14s ease-in-out infinite alternate; }
.spool.now .spool-zone { opacity: 1; }
.spool.late { border-color: var(--danger); animation: alarm 0.12s ease-in-out infinite alternate; }   /* landed: last chance */
.spool.late .spool-note { color: var(--bobber); }
.spool.late .spool-fill { background: var(--bobber); }
.spool.done .spool-zone { opacity: 0.25; }

/* fly rod: the dot swings with the line; tap as it reaches the ring at either end */
.rhythm {
  width: 100%; padding: 10px 12px 12px; border-radius: 18px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--glass); border: 2px solid var(--glass-line);
}
/* the distance and the knots share the top line; "ON THE BEAT!" flashes on a line of its own */
.rhythm-read {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "dist pips" "word word";
  align-items: center; gap: 4px 10px;
}
.rhythm-dist { grid-area: dist; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1; white-space: nowrap; }
.stroke-word {
  grid-area: word; min-width: 0; height: 16px; overflow: visible;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; line-height: 16px; text-align: center; text-transform: uppercase; white-space: nowrap;
  opacity: 0;
}
.stroke-word.good { color: var(--sun); }
.stroke-word.ok { color: var(--mist); }
.stroke-word.bad { color: var(--bobber); }
.stroke-word.flash { animation: word-flash 0.75s ease-out both; }
.knot-pips { grid-area: pips; justify-self: end; display: flex; gap: 4px; }
.knot-pips i { display: block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--mist); }
.knot-pips i.on { background: var(--danger); border-color: var(--paper); }
.rhythm-track { position: relative; height: 48px; border-radius: 24px; background: var(--deep); border: 1.5px solid var(--mist); }
.beat { position: absolute; top: 50%; display: block; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; border: 2.5px solid var(--glass-line); }
.beat.next { border-color: var(--sun); }                 /* the ring the line is heading for */
.beat-back { left: 5px; }
.beat-front { right: 5px; }
.beat-glow { position: absolute; inset: 0; display: block; border-radius: 50%; background: var(--sun); opacity: 0; transform: scale(0.55); will-change: transform, opacity; }
.beat.now { box-shadow: 0 0 0 5px var(--sun-veil); }
.beat.hit { animation: beat-hit 0.38s ease-out; }
.beat.miss { animation: beat-miss 0.38s ease-out; }
.rhythm-lane { position: absolute; top: 0; bottom: 0; left: 23px; right: 23px; }      /* ring centre to ring centre */
.rhythm-runner { position: absolute; inset: 0; transform: translateX(50%); will-change: transform; }
.rhythm-dot {
  position: absolute; left: -9px; top: 50%; display: block; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 0 0 0 2px var(--paper);
}
.rhythm-ends {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; color: var(--mist);
}
.line-gauge { display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; color: var(--mist); }
.line-gauge > i { display: block; height: 9px; border-radius: 5px; background: var(--deep); border: 1px solid var(--glass-line); overflow: hidden; }
.line-gauge b { display: block; height: 100%; background: var(--shallow); transform: scaleX(0); transform-origin: left center; will-change: transform; }

/* a bird's nest or a wind knot being picked out */
.tangle {
  width: 100%; padding: 10px 12px; border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 6px;
  background: var(--glass); border: 2px solid var(--bobber);
}
.tangle-title { font-family: var(--font-display); font-size: 20px; line-height: 1.1; }
.tangle-track { height: 14px; border-radius: 7px; background: var(--deep); border: 1.5px solid var(--mist); overflow: hidden; }
.tangle-fill {
  display: block; height: 100%; transform: scaleX(0); transform-origin: left center; will-change: transform;
  background: repeating-linear-gradient(-45deg, var(--sun) 0 8px, var(--paper) 8px 16px);
  animation: barber 0.7s linear infinite;
}
.tangle-note { font-size: 12px; line-height: 1.3; color: var(--mist); }

/* the tension gauge: the star of the fight */
.fight {
  width: 100%; padding: 10px 12px 12px; border-radius: 18px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--glass); border: 2px solid var(--glass-line);
}
.dial { position: relative; width: 100%; aspect-ratio: 200 / 112; }
.dial-face { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial-plate { fill: var(--deep); }
.arc { fill: none; stroke-width: 20; }
.arc-slack { stroke: var(--mist); stroke-dasharray: 3 3; }
.arc-low { stroke: var(--shallow); }
.arc-good { stroke: var(--reed); }
.arc-danger { stroke: var(--danger); }
.arc-over { stroke: var(--bobber-dark); }
.dial-tick { stroke: var(--paper); stroke-width: 2.5; stroke-linecap: round; }
.dial-tag { fill: var(--mist); font-family: var(--font-ui); font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; }
.needle {
  position: absolute; left: 50%; bottom: 10.7%;
  width: 8px; height: 64%; margin-left: -4px;
  background: var(--paper);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: rotate(-90deg); transform-origin: 50% 100%; will-change: transform;
}
.dial::after {
  content: ''; position: absolute; left: 50%; bottom: 10.7%;
  width: 18px; height: 18px; margin: 0 0 -9px -9px; border-radius: 50%;
  background: var(--paper); border: 4px solid var(--ink);
}
.fight-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zone-word {
  padding: 3px 12px; border-radius: 8px;
  background: var(--reed); color: var(--ink);
  font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.2; letter-spacing: 0.03em; text-transform: uppercase;
}
.fight[data-zone="slack"] .zone-word { background: var(--mist); }
.fight[data-zone="low"] .zone-word { background: var(--shallow); }
.fight[data-zone="danger"] .zone-word { background: var(--danger); color: var(--paper); }
.fight[data-zone="danger"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-veil); animation: alarm 0.3s ease-in-out infinite alternate; }
.fight[data-zone="danger"] .needle { background: var(--sun); }
.line-out { font-size: 12px; color: var(--mist); white-space: nowrap; }
.line-out b { font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--paper); }

.bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bar { display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; color: var(--mist); }
.bar > i { display: block; height: 8px; border-radius: 4px; background: var(--deep); border: 1px solid var(--glass-line); overflow: hidden; }
.bar > i > b { display: block; height: 100%; background: var(--paper); transform-origin: left center; will-change: transform; }
.bar-fish > i > b { background: var(--bobber); }
.bar.warn > i > b { background: var(--sun); }
.bar.crit { color: var(--paper); }
.bar.crit > i > b { background: var(--danger); }

.lost {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-line);
}
.lost-tip { font-size: 13px; line-height: 1.35; color: var(--mist); }
.lost-again { touch-action: none; }

/* the one button: big, round, under the right thumb */
.action {
  flex: none; width: 96px; height: 96px; margin: 0 0 8px auto; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bobber); color: var(--paper);
  border: 3px solid var(--paper); box-shadow: 0 8px 0 var(--bobber-dark), var(--shadow);
  font-family: var(--font-display); font-size: 23px; letter-spacing: 0.03em; text-shadow: 0 2px 0 var(--bobber-dark);
  touch-action: none; -webkit-touch-callout: none;
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}
.action.down, .action:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--bobber-dark), var(--shadow-sm); }
.action-label { pointer-events: none; }
.hud[data-phase="flying"] .action { opacity: 0.6; }
.hud[data-phase="flying"][data-cast="thumb"] .action { opacity: 1; }          /* the baitcaster needs your thumb */
.hud[data-phase="bite"] .action, .action.now {
  background: var(--sun); color: var(--ink); text-shadow: none;
  animation: set-pulse 0.3s ease-in-out infinite alternate;
}
.action.now { animation-duration: 0.14s; }

/* the edge of the screen glows red while the line is about to go */
.hud.alarm::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 90px 12px var(--danger-veil);
  animation: fade-pulse 0.34s ease-in-out infinite alternate;
}

/* the fish is running: the prompt, the gauge and the button all say let go */
.prompt.tone-ease {
  padding: 8px 22px;
  background: var(--sun); border: 3px solid var(--paper); color: var(--ink);
  box-shadow: 0 5px 0 var(--bobber-dark), var(--shadow);
  font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 7vw, 36px); line-height: 1.08;
  animation: set-pulse 0.28s ease-in-out infinite alternate;
}
.prompt.tone-ease .prompt-keys { font-family: var(--font-ui); font-size: 12px; font-weight: 700; opacity: 1; }
.hud.ease .fight { border-color: var(--sun); box-shadow: 0 0 0 4px var(--sun-veil); animation: none; }
.hud.ease .fight .zone-word { background: var(--sun); color: var(--ink); }
.hud.ease .action {
  background: var(--paper); color: var(--bobber-dark); text-shadow: none;
  border: 3px dashed var(--bobber); box-shadow: 0 8px 0 var(--paper-edge), var(--shadow);
  font-size: 19px; line-height: 1;
  animation: set-pulse 0.28s ease-in-out infinite alternate;
}

/* working a lure: which of pause, reel and twitch the game reads you as doing */
.cadence {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 10px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-line);
}
.cadence-pips { display: flex; gap: 5px; }
.cadence-pips span {
  padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--glass-line);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; color: var(--mist);
}
.cadence-pips span.on { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.cadence-pips span.pop { animation: coin-pop 0.3s ease-out; }
.cadence-tip { font-size: 11.5px; line-height: 1.3; color: var(--mist); }
.cadence.followed { border-color: var(--sun); }
.cadence.followed .cadence-tip { font-weight: 700; color: var(--sun); }

/* a word of advice, shown once */
.tip {
  display: flex; align-items: center; gap: 8px;
  max-width: min(100%, 360px); padding: 9px 14px; border-radius: 12px;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--sun); box-shadow: var(--shadow-sm);
  font-size: 14px; font-weight: 700; line-height: 1.3; text-align: left;
}
.tip.show { animation: banner-in 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) both; }

/* "Read water": the toggle, and the top-down chart of the water in front of you */
.hud-mid { position: relative; z-index: 2; }        /* banners stay readable over the chart */
.hud-read.on { background: var(--sun); border-color: var(--paper); color: var(--ink); }
.hud-read.off { visibility: hidden; }
.read-label { font-size: 13px; font-weight: 700; white-space: nowrap; }
.read-chart {
  position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 104px);
  width: max-content; max-width: calc(100% - 16px); margin: 0 auto; padding: 6px 6px 4px;
  border-radius: 14px; background: var(--paper-veil); color: var(--ink);
  border: 1.5px solid var(--paper-edge); box-shadow: var(--shadow-sm);
  pointer-events: none;                 /* drags pass straight through to aim */
  animation: drop-in 0.22s ease-out both;
}
.read-plot { position: relative; }
.read-canvas { width: 100%; height: 100%; }
.read-aim {
  position: absolute; display: block; width: 2.5px; height: 1px; margin-left: -1.25px;
  background: var(--bobber);
  transform: scaleY(0); transform-origin: 50% 0; will-change: transform;
}
.read-target { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.read-ring {
  position: absolute; left: -9px; top: -9px; display: block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper-veil); border: 3px solid var(--bobber); box-shadow: 0 0 0 1.5px var(--paper);
}
.read-on {
  position: absolute; left: 14px; top: -10px;
  padding: 2px 7px; border-radius: 6px;
  background: var(--ink); color: var(--paper);
  font-size: 11px; font-weight: 700; line-height: 1.35; white-space: nowrap;
}
.read-on:empty { display: none; }
.read-target.flip .read-on { left: auto; right: 14px; }
.read-target.low .read-on { top: 12px; }
.read-target.hit .read-ring { border-color: var(--sun); box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 6px var(--sun-veil); }
.read-target.hit .read-on { background: var(--sun); color: var(--ink); }
.read-target.dry .read-ring { border-color: var(--danger); }
.read-target.dry .read-on { background: var(--danger); }
.read-key {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; margin-top: 3px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase; color: var(--ink-soft);
}
.read-key span { display: inline-flex; align-items: center; gap: 4px; }
.key-dot.drop { background: var(--sun); }

/* ---------------------------------------------------------------- 9b. the helm: steering the boat */

.btn-label { font-size: 13px; font-weight: 700; white-space: nowrap; }
.hud-move .btn-label, .drive-in .btn-label { display: none; }
.drive .hud-top { justify-content: space-between; }
.drive .hud-place { margin-right: auto; }
.drive-water.on { background: var(--sun); border-color: var(--paper); color: var(--ink); }
.drive .hud-mid { gap: 6px; }
.drive-near, .drive-limit {
  max-width: 100%; display: flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--glass-line);
  font-size: 14px; font-weight: 700; line-height: 1.25;
}
.drive-near svg { color: var(--sun); }
.drive-limit { flex-direction: column; gap: 2px; padding: 9px 16px 4px; border-color: var(--sun); text-wrap: balance; }
.limit-go {
  display: inline-flex; align-items: center; gap: 3px; min-height: 44px; padding: 0 6px;
  font-size: 13px; font-weight: 700; color: var(--sun); text-decoration: underline; text-underline-offset: 3px;
}

.drive-bottom { justify-content: space-between; }
.drive-dash { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.drive-gauges {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--glass-line);
}
.speedo { display: flex; align-items: center; gap: 10px; }
.speedo-read { display: flex; align-items: baseline; gap: 4px; min-width: 62px; }
.speedo-n { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.speedo-read span { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
/* the kayak: paddle strokes that light as you get going */
.gauge-strokes .speedo-meter { display: flex; gap: 2px; }
.gauge-strokes .speedo-meter i { display: block; color: var(--glass-line); transition: color 0.2s ease, transform 0.2s ease; }
.gauge-strokes .speedo-meter i.on { color: var(--sun); transform: translateY(-2px); }
/* pedals and trolling motors: a plain bar */
.bar-track { display: block; width: 64px; height: 10px; border-radius: 5px; background: var(--scrim); border: 1px solid var(--glass-line); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 5px; background: var(--shallow); transform: scaleX(0); transform-origin: left center; transition: transform 0.12s linear; }
/* bass boats: a proper dial with a needle */
.gauge-dial .speedo-meter {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  background: var(--deep); border: 2px solid var(--paper); box-shadow: inset 0 0 0 2px var(--glass-line);
}
.dial-ticks i { position: absolute; left: 50%; top: 4px; width: 2px; height: 7px; margin-left: -1px; border-radius: 1px; background: var(--mist); transform-origin: 50% 23px; }
.dial-ticks i:last-child { background: var(--bobber); }
.dial-needle {
  position: absolute; left: 50%; top: 7px; width: 3px; height: 22px; margin-left: -1.5px; border-radius: 2px;
  background: var(--bobber); transform: rotate(-120deg); transform-origin: 50% 20px; transition: transform 0.12s linear;
}
.dial-hub { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--paper); }
.drive-reads { display: flex; flex-direction: column; gap: 3px; padding-left: 12px; border-left: 1px solid var(--glass-line); }
.drive-reads div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drive-reads dt { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); }
.drive-reads dd { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.drive-reads dd.warn { color: var(--sun); }
/* the water around the boat, north up */
.drive-chart {
  position: relative; width: 132px; height: 132px; border-radius: 16px; overflow: hidden;
  background: var(--paper); border: 2px solid var(--paper); box-shadow: var(--shadow-sm);
}
.drive-chart canvas { display: block; width: 100%; height: 100%; }
.chart-north {
  position: absolute; top: 4px; right: 5px; padding: 1px 5px; border-radius: 6px;
  background: var(--paper-veil); color: var(--ink); font-size: 10px; font-weight: 700; line-height: 1.3;
}
.drive-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fish-here { flex-direction: column; gap: 1px; min-width: 132px; min-height: 56px; padding: 6px 18px; margin: 0; }
.fish-label { display: inline-flex; align-items: center; gap: 7px; }
.fish-why { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0; line-height: 1.2; text-shadow: none; }
.fish-why:empty { display: none; }
.fish-here.off { background: var(--glass); color: var(--mist); border: 1px solid var(--glass-line); box-shadow: 0 3px 0 var(--deep); text-shadow: none; }
.fish-here.off .fish-why { color: var(--sun); }
.throttle { margin: 0 0 8px; }
.throttle.long { font-size: 15px; letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- 10. catch card, sighting, toast */

.catch {
  position: absolute; inset: 0;
  display: flex;                      /* the card centres itself with margin: auto, so a tall card can still scroll to its top */
  padding:
    calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px)
    calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);
  background: var(--scrim);
  overflow-y: auto; touch-action: pan-y;
  pointer-events: auto;
  animation: screen-in 0.2s ease-out both;
}
.catch-card {
  flex: none; margin: auto;
  width: min(100%, 380px); padding: 22px 20px 18px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; box-shadow: var(--shadow);
  animation: card-pop 0.46s cubic-bezier(0.2, 1.45, 0.4, 1) both;
}
.catch-card > * { position: relative; }
.catch-card.trophy { border-color: var(--sun); box-shadow: 0 0 0 4px var(--sun), var(--shadow); }
.catch-card.trophy::after { border-color: var(--sun); }
.catch-card > .catch-burst, .reveal-card > .catch-burst {
  position: absolute; left: 50%; top: 120px;
  width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  background: repeating-conic-gradient(var(--sun-veil) 0 9deg, transparent 9deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 78%);
  mask-image: radial-gradient(closest-side, #000 25%, transparent 78%);
  animation: spin 32s linear infinite;
  pointer-events: none;
}
.catch-eyebrow { justify-content: center; color: var(--bobber-dark); }
.catch-art { width: min(100%, 300px); animation: fish-in 0.6s 0.1s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.catch-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 8vw, 34px); line-height: 1.05; text-wrap: balance; }
.catch-size { display: flex; align-items: baseline; justify-content: center; gap: 22px; }
.size { display: inline-flex; align-items: baseline; gap: 4px; }
.size b { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1; }
.size small { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2px 0; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: 12px; font-weight: 700; line-height: 1.2;
  animation: stamp 0.42s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  animation-delay: calc(0.5s + var(--i, 0) * 0.14s);
}
.badge-new { background: var(--bobber-dark); }
.badge-pb { background: var(--water); }
.badge-trophy { background: var(--sun); color: var(--ink); }
.badge-daily { color: var(--sun); }
.catch-pay { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 2px; }
.catch-earn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 22px; }
.catch-earn.done { animation: coin-pop 0.34s ease-out; }
.catch-coins, .catch-points { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 32px; line-height: 1; }
.catch-coins b, .catch-points b { font-weight: 400; min-width: 1.1em; text-align: left; }
.catch-points { font-size: 26px; color: var(--water); }
.catch-points small { font-family: var(--font-ui); font-size: 13px; font-weight: 700; }
.bonus-note { font-size: 12px; color: var(--ink-soft); }
.catch-species { font-size: 13.5px; font-weight: 700; }
.catch-species i { font-weight: 500; }
.legend-title { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; line-height: 1.3; text-transform: uppercase; color: var(--bobber-dark); }
.catch-release { margin-top: 6px; }

/* a legend gets the full treatment: night water, gold leaf */
.catch-card.legend {
  background: linear-gradient(170deg, var(--water), var(--ink) 46%, var(--deep));
  color: var(--paper); border-color: var(--sun);
  box-shadow: 0 0 0 3px var(--bobber-dark), 0 0 0 6px var(--sun), var(--shadow);
}
.catch-card.legend::after { border-color: var(--sun); }
.catch-card.legend > .catch-burst { width: 720px; height: 720px; margin: -360px 0 0 -360px; animation-duration: 20s; }
.catch-card.legend .catch-eyebrow, .catch-card.legend .legend-title { color: var(--sun); }
.catch-card.legend .catch-name { font-size: clamp(30px, 9.5vw, 42px); color: var(--sun); text-shadow: 0 3px 0 var(--bobber-dark); }
.catch-card.legend .catch-species, .catch-card.legend .size small, .catch-card.legend .bonus-note { color: var(--mist); }
.catch-card.legend .catch-points { color: var(--shallow); }
.catch-card.legend .catch-art { filter: drop-shadow(0 0 14px var(--sun-veil)); }
.catch-card.legend .badge { background: var(--paper); color: var(--ink); }
.catch-card.legend .badge-legend, .badge-legend { background: var(--sun); color: var(--ink); }

.sighting {
  position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 150px);
  width: min(calc(100% - 28px), 360px); margin: 0 auto; padding: 12px 16px 12px 12px;
  display: grid; grid-template-columns: 34% minmax(0, 1fr); align-items: center; gap: 10px;
  box-shadow: var(--shadow);
  animation: drop-in 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.sighting.out { animation: fade-out 0.3s ease-in both; }
.sighting-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sighting .card-title { font-size: 20px; }
.sighting .card-blurb { font-size: 12.5px; line-height: 1.35; }

.layer-toast {
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 16px calc(var(--safe-bottom) + 22px);
}
.hk[data-screen="trip"] .layer-toast { align-items: flex-start; padding: calc(var(--safe-top) + 160px) 16px 0; }
.toast {
  max-width: 420px; padding: 10px 16px; border-radius: 12px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--glass-line); box-shadow: var(--shadow);
  font-size: 14px; font-weight: 700; line-height: 1.35; text-align: center;
  animation: banner-in 0.24s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.toast.out { animation: fade-out 0.26s ease-in both; }

/* ---------------------------------------------------------------- 10b. boat yard */

.yard-body, .board-body { display: flex; flex-direction: column; gap: 18px; }
.yard-intro { display: flex; flex-direction: column; gap: 10px; padding: 0 2px; }
.fleet {
  display: flex; gap: 6px; margin: 0 -6px; padding: 2px 6px 6px;
  overflow-x: auto; touch-action: pan-x pan-y; scrollbar-width: none;      /* swipe along it, or scroll the page from it */
}
.fleet-rung { flex: none; }
.fleet-rung button {
  min-height: 44px; display: flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--mist);
  font-size: 12px; font-weight: 700; line-height: 1.12; white-space: nowrap;
}
.fleet-rung.owned button, .fleet-rung.using button { background: var(--paper); color: var(--ink); border-color: var(--paper-edge); box-shadow: 0 3px 0 var(--paper-edge); }
.fleet-rung.owned .step-num, .fleet-rung.using .step-num { background: var(--water); color: var(--paper); border: 2px solid var(--paper); }
.fleet-rung.using .step-num { background: var(--bobber); box-shadow: 0 2px 0 var(--bobber-dark); }
.fleet-rung.next button { border-color: var(--shallow); color: var(--paper); }
.fleet-rung.next .step-num { border-style: solid; border-color: var(--shallow); }
.fleet-rung.next .step-num svg { fill: var(--shallow); stroke: var(--shallow); }

.boats { display: flex; flex-direction: column; gap: 12px; }
.boat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
.boat-pic { justify-self: center; width: min(100%, 300px); color: var(--ink-soft); }
.boat-pic svg, .reveal-pic svg { width: 100%; height: auto; }
.boat-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.perks { display: flex; flex-direction: column; gap: 3px; }
.perks li { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.perks svg { margin-top: 2px; color: var(--reed); }
.boat-act { grid-column: auto; }
.boat.using, .boat.using::after { border-color: var(--bobber); }
.boat.next, .boat.next::after { border-color: var(--water); }
.boat.later { background: var(--paper-2); }
.boat.later .boat-pic { opacity: 0.45; }
.boat.later .card-title, .boat.later .card-blurb, .boat.later .perks { color: var(--ink-soft); }
.boat.later .stats li { background: var(--paper); }
.yard-progress { flex: 1 1 150px; display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-right: auto; }
.yard-count { display: flex; align-items: center; gap: 5px; font-size: 13px; line-height: 1.2; color: var(--ink-soft); }
.yard-count b { color: var(--ink); }
.yard-progress .tile-meter { height: 8px; margin-top: 0; border-radius: 4px; }

.custom { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; border-top: 1.5px dashed var(--paper-edge); }
.custom-block { display: flex; flex-direction: column; gap: 8px; }
.swatches-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.swatches-row li { display: flex; }
.swatch {
  flex: 1; min-width: 0; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px; border-radius: 10px; border: 1.5px solid transparent;
  font-size: 11px; line-height: 1.15; text-align: center;
}
.swatch i {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--paper);
  border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--paper-veil);
}
.swatch.flake i { background-image: radial-gradient(var(--paper-veil) 1px, transparent 1.6px); background-size: 6px 6px; }
.swatch.wrap i { background-image: repeating-linear-gradient(115deg, var(--sun-veil) 0 5px, transparent 5px 10px); }
.swatch.on { border-color: var(--bobber); background: var(--paper-2); }
.swatch:disabled { opacity: 0.5; cursor: default; }
.swatch-name { font-weight: 700; }
.swatch-price { color: var(--ink-soft); }
.addons { display: flex; flex-direction: column; gap: 8px; }
.addon {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 12px;
  padding: 10px; border-radius: 12px; background: var(--paper-2);
}
.addon .item-icon { width: 48px; height: 48px; background: var(--paper); }
.addon .stats li { background: var(--paper); }
.addon .item-buy { min-height: 44px; padding-top: 6px; }

/* a new boat is an event */
.reveal {
  position: absolute; inset: 0; z-index: 5;
  display: flex;
  padding:
    calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px)
    calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);
  background: var(--scrim);
  overflow-y: auto; touch-action: pan-y;
  animation: screen-in 0.2s ease-out both;
}
.reveal-card {
  flex: none; margin: auto; overflow: hidden;
  width: min(100%, 400px); padding: 22px 20px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  border-color: var(--water); box-shadow: 0 0 0 4px var(--water), var(--shadow);
  animation: card-pop 0.46s cubic-bezier(0.2, 1.45, 0.4, 1) both;
}
.reveal-card::after { border-color: var(--water); }
.reveal-card > * { position: relative; }
.reveal-eyebrow { justify-content: center; color: var(--water); }
.reveal-pic { width: min(100%, 320px); color: var(--ink-soft); animation: fish-in 0.6s 0.1s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.reveal-name { font-size: clamp(24px, 7.4vw, 32px); }
.reveal-perks { align-self: stretch; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); text-align: left; }
.reveal-perks li { font-size: 14px; animation: stamp 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) both; animation-delay: calc(0.5s + var(--i, 0) * 0.16s); }

/* ---------------------------------------------------------------- 10c. profile dialog */

.hk input {
  font: inherit; color: var(--ink);
  -webkit-user-select: text; user-select: text;      /* base.css turns selection off for the game; typing needs it */
  touch-action: manipulation;
}
.dialog {
  position: absolute; inset: 0; z-index: 6;
  display: flex;
  padding:
    calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px)
    calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);
  background: var(--scrim);
  overflow-y: auto; touch-action: pan-y;
  pointer-events: auto;
  animation: screen-in 0.18s ease-out both;
}
.dialog-card {
  flex: none; margin: auto;
  width: min(100%, 360px); padding: 22px 20px 18px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow);
  animation: card-pop 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@media (max-width: 600px) {
  .dialog-card { margin-top: 5vh; margin-bottom: auto; }       /* high on a phone, clear of the on-screen keyboard */
}
.dialog-close {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-soft);
}
.field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; color: var(--ink-soft); }
.field input {
  width: 100%; height: 50px; padding: 0 14px; border-radius: 10px;
  background: var(--paper); border: 1.5px solid var(--paper-edge); box-shadow: inset 0 2px 0 var(--rule);
  font-size: 18px; font-weight: 700; letter-spacing: normal; text-transform: none;      /* 16px or more: no zoom-in on iOS */
}
.field input:focus { border-color: var(--ink); }
.field-pin input { font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: 0.4em; text-align: center; }
.form-error { min-height: 18px; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--bobber-dark); }
.form-error:empty { min-height: 0; }

/* ---------------------------------------------------------------- 10d. leaderboard */

.board-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 10px 12px 10px 14px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--sun); color: var(--paper);
  font-size: 14px; font-weight: 700; line-height: 1.3;
}
.board-banner svg { color: var(--sun); }
.board-banner span { flex: 1 1 160px; }
.board-status { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--mist); font-weight: 700; }
.board-empty { padding: 14px 4px 6px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.headline-board { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 14px; }
.headline-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.headline-art { flex: none; width: 38%; max-width: 170px; }
.picked-board { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.picked-board .card-title { font-size: 19px; }

.board { display: flex; flex-direction: column; gap: 4px; }
.board-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 7px 10px 7px 7px; border-radius: 10px;
}
.board-row:nth-child(odd) { background: var(--rule); }
.board-row.mine { background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--bobber); }
.rank {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 14px; line-height: 1; color: var(--ink-soft);
}
.medal-1 .rank { background: var(--sun); color: var(--ink); box-shadow: 0 2px 0 var(--bobber-dark); }
.medal-2 .rank { background: var(--mist); color: var(--ink); box-shadow: 0 2px 0 var(--ink-soft); }
.medal-3 .rank { background: var(--bobber-dark); color: var(--paper); box-shadow: 0 2px 0 var(--ink); }
.board-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.board-who b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-who b small { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--bobber); color: var(--paper); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.board-who > small { font-size: 11.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-size { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; white-space: nowrap; }
.board-size b { font-family: var(--font-display); font-weight: 400; font-size: 16px; }
.board-size small { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.board.big .board-row { padding-block: 9px; }
.board.big .medal-1 .board-size b { font-size: 21px; }
.board.big .medal-1 .board-who b { font-size: 17px; }

.fish-chips { display: flex; gap: 8px; margin: 0 -6px; padding: 8px 6px; overflow-x: auto; touch-action: pan-x pan-y; scrollbar-width: none; }
.fish-chips li { flex: none; }
.fish-chip {
  position: relative; width: 96px; min-height: 76px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  padding: 6px 6px 7px; border-radius: 12px;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--paper-edge); box-shadow: 0 3px 0 var(--paper-edge);
  font-size: 11.5px; font-weight: 700; line-height: 1.12; text-align: center;
}
.fish-chip .art { width: 72px; }
.fish-chip.on { border-color: var(--bobber); box-shadow: 0 3px 0 var(--bobber-dark); }
.fish-chip small {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center; background: var(--water); color: var(--paper); font-size: 11px;
}
.legend-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.legend-board { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.legend-board-head { display: flex; align-items: center; gap: 12px; }
.legend-board-head .art { flex: none; width: 96px; }
.legend-board-head h3 { font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.1; }
.legend-board.known { border-color: var(--sun); }
.legend-board.known::after { border-color: var(--sun); }
.log-records { justify-self: start; }

/* ---------------------------------------------------------------- 10e. fishing anywhere by boat */

.chart.can-pin { cursor: crosshair; }
.far-fill { fill: var(--paper); fill-opacity: 0.55; }
.limit-line { fill: none; stroke: var(--bobber); stroke-width: 1.6px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.key-dot.far { border-radius: 2px; background: var(--paper-2); border: 1.5px dashed var(--bobber); }
.pin.custom .pin-dot { background: var(--sun); color: var(--ink); }
.pin.custom.selected .pin-dot { background: var(--bobber); color: var(--paper); }
.pin.custom .pin-label { left: 50%; top: -17px; transform: translateX(-50%); }
.pin-hint { font-size: 12.5px; }

.hud-sub { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; }
.hud-boat {
  flex: 0 1 auto; min-width: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--paper); white-space: nowrap;
}
.hud-boat span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* on a phone the boat's name takes the place of the time of day and the temperature */
.hud-sub.afloat .cond-period, .hud-sub.afloat .cond-temp, .hud-sub.afloat .hud-cond > .icon:first-child { display: none; }

/* ---------------------------------------------------------------- 11. responsive */

@media (hover: hover) and (pointer: fine) {
  .prompt-keys:not(:empty) { display: block; }       /* keyboard hints only where there is a keyboard */
  .btn:hover:not(:disabled), .tile:hover, .choice:hover, .daily:hover { filter: brightness(1.04); }
  .round-btn:hover, .hud-btn:hover:not(:disabled) { filter: brightness(1.2); }
  .spot:hover { background: var(--sun-veil); box-shadow: inset 0 0 0 2px var(--sun); }
  .plain .spot:hover, .dept-chip:hover, .guide-row:hover { background: var(--paper-2); }
  .reel-opt:hover:not(.on) { background: var(--paper); }
  .keeper-face:hover { filter: brightness(1.06); }
  .launch-opt:hover, .spot-chip:hover:not(.on) { background: var(--paper-2); }
  .seg-btn:hover:not([aria-pressed="true"]) { color: var(--paper); }
  .bait-opt:hover:not(.spent) { background: var(--paper-2); }
  .pin:hover .pin-dot { transform: scale(1.14); }
}

@media (min-width: 400px) {
  .cond-period { display: inline; }
}

@media (min-width: 520px) {
  .bait-name { display: inline; }
  .hud-move .btn-label, .drive-in .btn-label { display: inline; }
  .hud-move, .drive-in { padding: 0 14px 0 10px; }
  .drive-chart { width: 164px; height: 164px; }
  .hud-bait { padding: 0 14px 0 9px; }
  .hud-spot { font-size: 14px; }
  .hud-cond, .hud-boat { font-size: 12px; }
  .hud-sub.afloat .cond-period, .hud-sub.afloat .cond-temp { display: inline; }
  .hud-sub.afloat .hud-cond > .icon:first-child { display: block; }
  .profile-chip { max-width: 220px; }
}

/* phones: the basket takes the title's place in the store, and a basket line stacks */
@media (max-width: 519px) {
  .store .screen-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .store .screen-head .round-btn { margin-right: auto; }
  .keeper-face { width: 52px; height: 52px; }
  .keeper, .counter-talk { min-height: 52px; }
  .bubble { padding: 8px 12px; }
  .bubble-text { font-size: 13.5px; }
  .bag-line { grid-template-columns: 38px minmax(0, 1fr) auto 44px; }
  .bag-line .stepper { grid-column: 2; grid-row: 2; justify-self: start; }
  .home-coins .coins { height: 32px; padding: 0 10px 0 7px; gap: 4px; font-size: 14px; }      /* room for "Sign in" beside two counters */
  .profile-chip { gap: 5px; padding: 0 12px 0 9px; }
  .drive-gauges { flex-direction: column; align-items: flex-start; gap: 6px; }
  .drive-reads { padding-left: 0; border-left: 0; }
  .helm-note { display: none; }
}

@media (min-width: 640px) {
  .shelf { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .dept-chips ul { flex-wrap: wrap; justify-content: center; }
  .spot-tag { font-size: 13px; padding: 5px 10px; }
  .log-summary { grid-template-columns: auto auto minmax(0, 1fr); gap: 10px 34px; }
  .stat-wide { grid-column: auto; }
  .rig-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 700px) {
  .timebar { flex-direction: row; align-items: center; gap: 14px; }
  .seg { flex: none; width: 420px; }
  .seg-btn { flex-direction: row; gap: 6px; font-size: 13px; }
  .live-dot { margin: 0 2px; }
}

@media (min-width: 780px) {
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item { grid-template-rows: 1fr auto; }
  .boat { grid-template-columns: 300px minmax(0, 1fr); align-items: center; column-gap: 20px; padding: 18px 20px; }
  .boat-act, .custom { grid-column: 1 / -1; }
  .addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* map on the left, card on the right */
@media (min-width: 820px), (min-width: 600px) and (max-height: 540px) {
  .split { flex-direction: row; align-items: stretch; overflow: hidden; }
  .sheet { flex: 1 1 0; min-width: 0; }
  .side { width: min(380px, 46%); min-height: 0; overflow-y: auto; touch-action: pan-y; padding: 0 2px 8px; scrollbar-width: thin; }
}

/* phones and tablets: the Read water button sits above the big button, under the right thumb */
@media (max-width: 899px) {
  .hud-read {
    position: absolute; right: calc(var(--safe-right) + 30px); bottom: calc(var(--safe-bottom) + 132px);
    width: 56px; min-width: 0; height: 54px; padding: 5px 4px; border-radius: 14px;
    flex-direction: column; gap: 2px;
  }
  .read-label { font-size: 9.5px; letter-spacing: 0.04em; line-height: 1.02; text-align: center; text-transform: uppercase; white-space: normal; }
}

@media (min-width: 900px) {
  .read-chart { left: calc(var(--safe-left) + 16px); right: auto; top: calc(var(--safe-top) + 76px); margin: 0; }
  .hud { padding-left: calc(var(--safe-left) + 16px); padding-right: calc(var(--safe-right) + 16px); padding-top: calc(var(--safe-top) + 14px); }
  .hud-panels { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 18px); width: 340px; margin-left: -170px; max-width: none; align-items: center; }
  .action { width: 116px; height: 116px; margin-right: 12px; margin-bottom: 14px; font-size: 27px; }
  .wpin-label b { font-size: 13px; }
  .pin-label { font-size: 12px; }
  .lm-label { font-size: 11px; }
}

@media (max-width: 420px) {
  .tiles { gap: 8px; }
  .tiles .tile { padding-left: 4px; padding-right: 4px; }
  .tiles .tile-name { font-size: 13px; }
  .tile-goal .tile-name { font-size: 14px; }
}

@media (max-width: 380px) {
  .card { padding: 16px; }
  .item { padding: 14px 14px 12px; }
  .hud-place { padding: 0 11px; }
  .profile-chip { max-width: 104px; padding: 0 11px 0 9px; }
}

/* short screens: phones on their side, small windows */
@media (max-height: 560px) {
  .wordmark h1 { font-size: clamp(36px, 12vh, 60px); }
  .wordmark p { margin-top: 4px; }
  .home-body { gap: 10px; }
  .fight, .rhythm { padding: 8px 10px 10px; gap: 4px; }
  .rhythm-track { height: 42px; }
  .rhythm-ends { display: none; }
  .action { width: 84px; height: 84px; font-size: 20px; }
  .throttle.long { font-size: 13px; }
  .drive-dash { flex-direction: row; align-items: flex-end; }
  .drive-chart { width: 104px; height: 104px; }
  .drive-gauges { flex-direction: column; align-items: flex-start; gap: 6px; }
  .drive-reads { padding-left: 0; border-left: 0; }
  .catch-art { width: min(100%, 200px); }
  .sighting { top: calc(var(--safe-top) + 104px); }
}
@media (max-height: 560px) and (max-width: 899px) {
  .hud-panels { max-width: 250px; }
  .hud-read { right: calc(var(--safe-right) + 24px); bottom: calc(var(--safe-bottom) + 114px); }
  .read-chart { top: calc(var(--safe-top) + 60px); left: calc(var(--safe-left) + 10px); right: auto; margin: 0; }
  .read-key { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hk *, .hk *::before, .hk *::after { animation: none !important; transition: none !important; }
  .stroke-word.flash { opacity: 1; }          /* the word still shows, it just doesn't pop */
}

/* ---------------------------------------------------------------- keyframes */

@keyframes screen-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-pulse { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@keyframes beacon { 0% { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 2px var(--sun-veil); } 100% { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 14px transparent; } }
@keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes strike { from { transform: scale(1) rotate(-1.5deg); } to { transform: scale(1.08) rotate(1.5deg); } }
@keyframes set-pulse { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes alarm { from { box-shadow: 0 0 0 2px var(--danger-veil); } to { box-shadow: 0 0 0 7px var(--danger-veil); } }
@keyframes banner-in { from { opacity: 0; transform: translateY(-8px) scale(0.9); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes card-pop { from { opacity: 0; transform: translateY(26px) scale(0.86); } }
@keyframes fish-in { from { opacity: 0; transform: translateX(-46px) rotate(-12deg) scale(0.8); } }
@keyframes stamp { from { opacity: 0; transform: scale(1.9) rotate(-9deg); } }
@keyframes coin-pop { 40% { transform: scale(1.16); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sold { 0% { transform: scale(0.97); } 55% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes bump { 40% { transform: scale(1.22); } }
@keyframes now-flash { from { box-shadow: 0 0 0 2px var(--sun-veil); } to { box-shadow: 0 0 0 8px var(--sun-veil); } }
@keyframes word-flash { 0% { opacity: 0; transform: scale(0.8); } 14% { opacity: 1; transform: scale(1.14); } 30% { transform: scale(1); } 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes beat-hit { 0% { box-shadow: 0 0 0 0 var(--sun); transform: scale(1.25); } 100% { box-shadow: 0 0 0 16px transparent; transform: scale(1); } }
@keyframes beat-miss { 0%, 100% { transform: translateX(0); border-color: var(--danger); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes ring-up { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes stamp-in { 0% { opacity: 0; transform: rotate(-12deg) scale(2.2); } 100% { opacity: 0.9; transform: rotate(-12deg) scale(1); } }
@keyframes barber { to { background-position: 22.6px 0; } }