:root {
  --bg: #101f1b;
  --panel: #1a2b25;
  --panel-2: #24382f;
  --text: #eee7d4;
  --muted: #a8b3a1;
  --accent: #d8bc7b;
  --danger: #f6a28b;
  color-scheme: dark;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 20% 0, #2d4233 0, transparent 60%), var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
  border: 1px solid #7f927145;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  padding: 10px 17px;
  transition: background 0.2s;
}
button:hover {
  background: #354b3d;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button.primary {
  background: var(--accent);
  color: #253024;
  border-color: #f5dda2;
  font-weight: 650;
  box-shadow: 0 4px 16px #0003;
}
button.primary:hover {
  background: #ead198;
}
button.link {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
a,
button.link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
:focus-visible {
  outline: 2px solid #f7d99b;
  outline-offset: 5px;
}
input {
  width: 100%;
  min-width: 0;
  background: #101f1b;
  color: var(--text);
  border: 1px solid #65755c;
  border-radius: 8px;
  padding: 12px;
}
header {
  flex-shrink: 0;
  width: 100%;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #b7c39620;
}
h1 {
  font:
    36px Georgia,
    serif;
  letter-spacing: -1.5px;
  margin: 0;
  white-space: nowrap;
}
.stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.stats > span b {
  color: var(--text);
}
#anglers::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #b7ce8c;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 10px #b7ce8c66;
}
main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.pond-panel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pond-panel:fullscreen {
  width: 100vw;
  height: 100dvh;
}
body.scene-expanded > header,
body.picture-in-picture > header,
body.picture-in-picture .fullscreen-toggle {
  display: none;
}
.pip-placeholder {
  margin: auto;
  display: grid;
  gap: 12px;
  justify-items: center;
  color: var(--muted);
}
.fullscreen-toggle {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 11;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: #1a2b25dc;
}
.pop-out-toggle {
  right: calc(max(12px, env(safe-area-inset-right)) + 52px);
}
.fullscreen-toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fullscreen-toggle .collapse,
.fullscreen-toggle[aria-pressed="true"] .expand {
  display: none;
}
.fullscreen-toggle[aria-pressed="true"] .collapse {
  display: block;
}
h2 {
  font:
    23px Georgia,
    serif;
  margin: 27px 0 15px;
}
h2 small {
  display: block;
  font:
    11px system-ui,
    sans-serif;
  color: var(--muted);
  margin-top: 6px;
}
#bucket-count {
  display: inline;
  margin-left: 8px;
  border: 1px solid #71806455;
  border-radius: 20px;
  padding: 2px 9px;
}
.pond {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max(100cqw, 177.777778cqh);
  height: max(100cqh, 56.25cqw);
  isolation: isolate;
  background: #315f60;
  /* One scene unit (the art's 1600-wide viewBox); cqw resolves in each scene layer. */
  --unit: calc(100cqw / 1600);
}
/* Lift the airborne rig over scenery; interaction targets and the carried fish stay above it. */
.scene-layer {
  position: absolute;
  inset: 0;
  isolation: isolate;
  pointer-events: none;
  container-type: size;
}
:is(.carrying, .reeling) .line-layer,
.interaction-layer {
  z-index: 1;
}
.scene-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.night-stars {
  opacity: var(--night-light, 0);
}
.scene-art,
.dock-object-art,
.water-surface-art,
.lantern-frame,
.dock-bait svg {
  filter: brightness(var(--land-light, 1)) saturate(var(--land-saturation, 1))
    sepia(var(--land-warmth, 0));
}
.scene-art,
.foreground-art,
.water-surface-art,
.sun-shimmer,
.line-interaction {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.aim-water {
  clip-path: url(#normalized-water-clip);
}
.paper-clouds {
  opacity: calc(1 - var(--night-light, 0) * 0.55);
}
/* One static paper-fibre tile over the whole diorama. */
.pond::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: soft-light;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.6 0 0 0 -.3 1.6 0 0 0 -.3 1.6 0 0 0 -.3 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23p)'/%3E%3C/svg%3E");
}
.lantern-light {
  opacity: calc(var(--night-light, 0) * 5);
}
.pond:has(.dock-bucket:is(:hover, :focus-visible)) .bucket-art,
.pond:has(.dock-rod:enabled:is(:hover, :focus-visible)) .rod-art,
.dock-bait:enabled:is(:hover, :focus-visible) {
  filter: url(#object-highlight);
}
.interaction-layer > button {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}
.water-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 calc(90 * var(--unit)) #102b2833;
  pointer-events: none;
  border-radius: inherit;
}
.sun-shimmer {
  opacity: calc(var(--reflection-light, 0.25) * var(--shimmer, 1));
  mix-blend-mode: screen;
}
.aim-water {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  cursor: crosshair;
  touch-action: manipulation;
}
.aim-water:focus-visible {
  outline-offset: 0;
  outline-style: dashed;
}
.cast-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
/* Non-scaling so the end-shift transform never skews the stroke; the width itself
   is in scene units, so the line thins with the scene like the rest of the art. */
#cast-path {
  fill: none;
  stroke: #e8dfb3;
  stroke-width: calc(1.5 * var(--unit));
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  opacity: 0.9;
  transform-box: view-box;
  transform-origin: 0 0;
}
.reel-line {
  fill: none;
  stroke: transparent;
  stroke-width: 32px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.hooked .reel-line {
  pointer-events: stroke;
  cursor: pointer;
}
.reel-bobber {
  width: 44px;
  height: 44px;
  margin: -26px 0 0 -22px;
  border-radius: 50%;
  touch-action: manipulation;
}
.ready .cast-thread,
.fishing .cast-thread,
.casting .cast-thread,
.reeling .cast-thread,
.catching .cast-thread {
  opacity: 1;
}
.hook-rig {
  display: none;
}
.ready .hook-rig,
.casting .hook-rig,
.reeling .hook-rig {
  display: inline;
}
.rig-bait {
  display: none;
}
[data-bait="worm"] .rig-worm,
[data-bait="crumb"] .rig-crumb,
[data-bait="spinner"] .rig-spinner,
[data-bait="glow-grub"] .rig-glow-grub {
  display: inline;
}
.bobber {
  position: absolute;
  width: calc(10 * var(--unit));
  height: calc(14 * var(--unit));
  border-radius: calc(5 * var(--unit)) calc(5 * var(--unit)) calc(4 * var(--unit))
    calc(4 * var(--unit));
  background: linear-gradient(#e89268 0 52%, #f3e7c3 52%);
  box-shadow: calc(1 * var(--unit)) calc(3 * var(--unit)) calc(5 * var(--unit)) #132a2a88;
  margin: calc(-12 * var(--unit)) 0 0 calc(-5 * var(--unit));
  opacity: 0;
  pointer-events: none;
  transform-origin: bottom center;
}
.bobber::before {
  content: "";
  position: absolute;
  left: calc(4 * var(--unit));
  top: calc(-5 * var(--unit));
  width: calc(2 * var(--unit));
  height: calc(5 * var(--unit));
  background: #e3cfa1;
}
.fishing .bobber {
  opacity: 1;
}
.casting .bobber,
.reeling .bobber {
  opacity: 0;
  animation: none;
}
.bait-stolen .bobber {
  animation: none;
  opacity: calc(1 - 0.35 * var(--bait-depth, 0));
  filter: brightness(calc(1 - 0.2 * var(--bait-depth, 0)))
    saturate(calc(1 - 0.55 * var(--bait-depth, 0)))
    blur(calc(0.6 * var(--unit) * var(--bait-depth, 0)));
}
.casting.cast-landed .hook-rig {
  display: none;
}
.casting.cast-landed .bobber {
  opacity: 1;
}
.ripple {
  position: absolute;
  width: calc(65 * var(--unit));
  height: calc(18 * var(--unit));
  fill: none;
  stroke: #eef2dc;
  stroke-width: 1.6;
  overflow: visible;
  translate: -50% -50%;
  pointer-events: none;
}
.ripple ellipse {
  stroke-opacity: 0;
}
.fish-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.fish-list .empty {
  border: 1px dashed #91a17844;
  background: #a2ac7910;
  border-radius: 12px;
  text-align: center;
  padding: 25px 12px;
  color: var(--muted);
  font-size: 12px;
}
.fish {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 10px;
  border-radius: 11px;
  border: 1px solid #91a17822;
  background: linear-gradient(120deg, #a3b17d10, transparent), var(--panel);
  cursor: pointer;
  transition:
    background 0.2s,
    translate 0.2s;
}
.fish:hover {
  background: var(--panel-2);
  translate: 0 -2px;
}
.fish img {
  width: 82px;
  height: 65px;
  object-fit: cover;
  border-radius: 7px;
  border-bottom: 2px solid var(--rarity);
}
.fish .name {
  font:
    17px Georgia,
    serif;
  margin-bottom: 5px;
}
.fish .name a {
  color: inherit;
  text-decoration: none;
}
.fish .name a:hover {
  text-decoration: underline;
}
.fish .meta {
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.fish .meta b {
  color: #d5dac6;
  font-weight: 500;
}
.fish.rare {
  border-color: var(--rarity);
  box-shadow: 0 0 18px color-mix(in srgb, var(--rarity) 15%, transparent);
}
.fish.new {
  animation: pop 0.5s ease;
}
#bucket .empty {
  grid-column: 1/-1;
}
dialog {
  background: linear-gradient(145deg, #293c30, #182b24);
  color: var(--text);
  border: 1px solid #aab28655;
  border-radius: 18px;
  padding: 28px;
  width: min(460px, 92vw);
  max-height: 90dvh;
  box-shadow: 0 30px 100px #0008;
}
dialog::backdrop {
  background: #071d17bb;
  backdrop-filter: blur(7px);
}
dialog h2 {
  margin-top: 0;
  font-size: 29px;
  padding-right: 48px;
}
.modal-close {
  position: sticky;
  top: -12px;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  height: 0;
  margin-top: -12px;
  transform: translateX(12px);
}
.modal-close button {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
}
.modal-close button:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.modal-close svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: square;
}
dialog p {
  color: var(--muted);
  font-size: 13px;
}
dialog .row {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}
dialog form > * + * {
  margin-top: 14px;
}
#recover-row {
  display: flex;
  gap: 8px;
}
.error {
  color: var(--danger);
  min-height: 1em;
}
#me {
  font-weight: 700;
}
#key {
  display: block;
  padding: 14px;
  margin: 18px 0;
  border: 1px solid #aab28655;
  border-radius: 8px;
  background: #071d1766;
  overflow-wrap: anywhere;
  user-select: all;
}
#accountdialog p,
#keydialog p {
  line-height: 1.6;
}
#saved-key-controls {
  padding: 14px;
  border: 1px solid #aab28655;
  border-radius: 8px;
}
#saved-key-controls p {
  margin-top: 0;
}
#key-save-status {
  min-height: 1.6em;
}
.token {
  text-align: center;
}
.token img {
  width: 100%;
  border-radius: 10px;
}
/* The close button sits over the image, so the name needs no room reserved for it. */
.token h2 {
  margin: 15px 0 7px;
  padding-right: 0;
}
.token dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 14px;
  text-align: left;
  font-size: 12px;
}
.token dt {
  color: var(--muted);
}
.token dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.transfer {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}
.toasts {
  position: absolute;
  top: 12px;
  left: 50%;
  translate: -50% 0;
  display: grid;
  gap: 5px;
  z-index: 10;
  width: max-content;
  max-width: min(360px, calc(100% - 24px));
  pointer-events: none;
}
.toast {
  background: #263c30f5;
  border: 1px solid #7e906655;
  border-left: 3px solid var(--rarity, var(--accent));
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 0 3px 12px #0003;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  animation: pop 0.4s ease;
}
.toast .meta {
  display: inline;
  margin-left: 6px;
  font-size: 11px;
  color: var(--muted);
}
@keyframes pop {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (max-width: 760px) {
  header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 10px 18px;
  }
  h1 {
    font-size: 32px;
  }
  .stats {
    gap: 8px 16px;
    width: 100%;
  }
  dialog {
    padding: 22px;
  }
}
#anglersdialog {
  width: min(620px, 94vw);
}
.live-anglers {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.live-angler {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #91a17844;
  border-radius: 12px;
  background: linear-gradient(120deg, #a3b17d10, transparent), var(--panel);
}
.live-angler-art {
  display: grid;
  place-items: center;
  width: 64px;
  height: 56px;
  overflow: hidden;
  border-radius: 8px;
  background: #a2ac7910;
  color: var(--muted);
}
.live-angler-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.live-angler-details {
  min-width: 0;
  overflow-wrap: anywhere;
}
.live-angler-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-bottom: 4px;
}
.live-angler-heading strong {
  color: var(--accent);
  font-size: 14px;
}
.live-angler-total,
.live-angler-age {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.live-angler-cast,
.live-angler-catch {
  font-size: 12px;
  line-height: 1.6;
}
.live-angler-age {
  display: block;
}
@media (max-width: 400px) {
  #anglersdialog {
    padding: 16px;
  }
  .live-angler {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
  .live-angler-art {
    width: 52px;
    height: 48px;
  }
}

#boarddialog {
  width: min(1080px, 94vw);
}
.board-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 24px;
  max-height: calc(90dvh - 58px);
}
.board-layout > section {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 6px;
}
.board-layout > section:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.activity-list {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}
.activity-entry {
  min-width: 0;
  padding: 12px;
  border: 1px solid #91a17833;
  border-left: 3px solid var(--rarity);
  border-radius: 10px;
  background: var(--panel);
  overflow-wrap: anywhere;
}
.activity-entry p {
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 8px;
}
.activity-meta {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
@media (max-width: 800px) {
  .board-layout {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
  }
  .board-layout > section {
    overflow: visible;
    padding-right: 0;
    scrollbar-gutter: auto;
  }
  .activity-panel {
    border-top: 1px solid #91a17833;
    padding-top: 24px;
  }
}
.angler-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
}
.angler-group {
  min-width: 0;
  scroll-margin-top: 64px;
  border: 1px solid #91a17844;
  border-radius: 12px;
  background: linear-gradient(120deg, #a3b17d10, transparent), var(--panel);
}
.angler-group summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px 12px;
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  list-style: none;
}
.angler-group summary::-webkit-details-marker {
  display: none;
}
.angler-group summary:hover {
  background: #91a17810;
}
.angler-rank {
  color: var(--accent);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.angler-heading,
.angler-score {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.angler-name {
  font:
    20px Georgia,
    serif;
  overflow-wrap: anywhere;
  min-width: 0;
}
.angler-score {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.angler-points {
  color: var(--accent);
  font-size: 18px;
}
.angler-total,
.angler-time {
  color: var(--muted);
  font-size: 12px;
}
.angler-counts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.catch-count {
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid #91a17833;
  border-left: 3px solid var(--rarity);
  border-radius: 6px;
  background: #071d1733;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.angler-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 12px;
}
.angler-toggle::before {
  content: "";
  border: 4px solid transparent;
  border-left-color: currentColor;
}
.angler-group details[open] .angler-toggle::before {
  transform: rotate(90deg);
}
.angler-catches {
  padding: 0 12px 12px;
}
.angler-catches .fish .name {
  overflow-wrap: anywhere;
}
.board-status {
  text-align: center;
  padding: 12px;
  line-height: 1.6;
}
@media (max-width: 400px) {
  #boarddialog {
    padding: 16px;
  }
  .angler-group summary {
    padding: 12px;
  }
  .angler-catches {
    padding: 0 8px 8px;
  }
  .angler-catches .fish {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }
  .angler-catches .fish img {
    width: 60px;
    height: 50px;
  }
}
.modal-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.modal-heading h2 {
  margin-bottom: 0;
}
.dock-bucket {
  left: 51.40625%;
  top: 90%;
  width: max(6.75%, 44px);
  height: max(14%, 44px);
  border-radius: 50%;
}
.dock-bucket:focus-visible,
.dock-bait:enabled:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.interaction-layer > :is(.dock-bucket, .dock-bait) {
  transform: translate(-50%, -50%);
}
#bucketdialog {
  width: min(720px, 94vw);
}
#bucketdialog #bucket {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 600px) {
  #bucketdialog #bucket {
    grid-template-columns: 1fr;
  }
}
.dock-rod {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  clip-path: polygon(
    47.046875% 88%,
    49.578125% 88%,
    51.6875% 81%,
    56.75% 60%,
    53.375% 59%,
    48.3125% 80%
  );
}
.dock-rod:disabled {
  opacity: 0;
  cursor: default;
}
.water-glints {
  opacity: 0.16;
}
.header-links {
  display: flex;
  gap: 20px;
}
.fishing-guidance {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.fishing-guidance:empty {
  display: none;
}
.caught-fish {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(170 * var(--unit));
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
  filter: drop-shadow(0 calc(8 * var(--unit)) calc(7 * var(--unit)) #061c2380);
}
.catching .bobber {
  animation: none;
  opacity: 1;
}
.carrying .bobber {
  visibility: hidden;
}
.catching .ripple {
  visibility: hidden;
}

.dock-bait {
  left: 59.28125%;
  top: 92%;
  width: 7.59375%;
  min-width: 42px;
  height: 12%;
  min-height: 42px;
}
.dock-bait:disabled {
  opacity: 1;
  cursor: default;
}
.dock-bait svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.aim-water:disabled {
  cursor: default;
}
.hooked-fish {
  position: absolute;
  width: calc(135 * var(--unit));
  height: auto;
  transform: translate(-50%, -8%);
  transform-origin: center;
  filter: brightness(0) blur(calc(0.6 * var(--unit)));
  opacity: 0.38;
  pointer-events: none;
}
#baitdialog {
  width: min(760px, 96vw);
  padding: 0;
  border: 6px solid #64694b;
  border-radius: 20px;
  background: #686e4e;
  box-shadow:
    0 28px 90px #0009,
    inset 0 0 0 2px #a1a581;
}
#baitdialog .modal-close {
  top: 10px;
  margin-top: 0;
  transform: translateX(-10px);
}
.case-brand {
  padding-right: 44px;
}
.case-lid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  margin: 8px;
  padding: 24px 28px 20px;
  border: 3px solid #424b36;
  border-radius: 12px 12px 5px 5px;
  background:
    repeating-linear-gradient(4deg, #ffffff03 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #7d8661, #4b593f);
  box-shadow:
    inset 0 3px 12px #1b291e88,
    inset 0 0 0 2px #b0b58d44;
}
.case-brand > span {
  display: block;
  color: #c6ccab;
  font-size: 9px;
  letter-spacing: 0.24em;
  margin-bottom: 6px;
}
.case-brand h2 {
  margin: 0;
  color: #e4e5c6;
  font-size: 30px;
  text-shadow: 0 2px 0 #2a382c;
}
.case-lid p {
  grid-column: 1 / -1;
  color: #cbd0b3;
  font-size: 12px;
  margin: 0;
}
.case-hinges {
  display: flex;
  justify-content: space-between;
  padding: 0 18%;
  height: 10px;
  position: relative;
  z-index: 1;
}
.case-hinges i {
  display: block;
  width: 46px;
  height: 23px;
  margin-top: -7px;
  border: 1px solid #3d432e;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, #343e3155 8px 9px),
    linear-gradient(#9eaa89, #525e45 40%, #c0c6a1 50%, #606e50 75%);
  box-shadow: 1px 2px 3px #0006;
}
.case-tray {
  margin: 7px 8px 9px;
  padding: 12px;
  border: 3px solid #454e37;
  border-radius: 5px 5px 12px 12px;
  background: #858b66;
  box-shadow:
    inset 0 0 0 2px #b9ba8b55,
    inset 0 3px 7px #28362477;
}
.bait-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bait-option {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  min-width: 0;
  padding: 8px 12px 12px;
  overflow: hidden;
  border: 3px solid #4c573c;
  border-radius: 9px;
  background:
    repeating-linear-gradient(160deg, transparent 0 8px, #b6b99005 8px 9px),
    #26372b;
  box-shadow:
    inset 3px 5px 12px #09150ed9,
    0 2px 0 #c2c49a99;
}
.bait-option:hover {
  background-color: #30432f;
  border-color: #bac292;
}
.bait-option:active {
  box-shadow: inset 3px 5px 16px #09150eee;
}
.bait-option[aria-pressed="true"] {
  border-color: #d5cd8c;
  background-color: #34442c;
}
.bait-option:focus-visible {
  outline: 3px solid #f0dc94;
  outline-offset: 2px;
}
.bait-art {
  display: block;
  width: 100%;
  height: 160px;
  overflow: visible;
  transition: transform 0.18s ease;
}
.bait-option:hover .bait-art {
  transform: translateY(-3px);
}
.bait-label {
  display: block;
  position: relative;
  align-self: flex-start;
  min-width: 65%;
  padding: 7px 14px;
  text-align: left;
  color: #3a3d2b;
  background: #cbc9a0;
  border: 1px solid #e6e1b2;
  border-radius: 2px;
  box-shadow: 1px 2px 4px #0005;
  transform: rotate(-1deg);
}
.bait-option:nth-child(even) .bait-label {
  transform: rotate(1deg);
}
.bait-label strong {
  display: block;
  font:
    600 13px ui-monospace,
    monospace;
}
.case-note {
  padding: 16px 9px 2px;
  color: #252f22;
}
.case-note p {
  margin: 0 0 5px;
  font-size: 12px;
  line-height: 1.5;
}
.case-note #bait-description {
  color: #34402c;
}
.fish-guide {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}
#instructionsdialog .fish-guide > li {
  display: grid;
  grid-template-columns: minmax(72px, 0.7fr) 2fr;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 14px;
  border: 1px solid #536447;
  border-radius: 12px;
  background: #192e24;
}
.fish-guide img {
  width: 100%;
  height: auto;
}
.fish-guide h4 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}
.fish-guide-points {
  color: var(--accent);
  font-size: 12px;
}
#instructionsdialog .fish-guide p {
  margin: 8px 0;
  line-height: 1.5;
}
.fish-guide-weight {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
#instructionsdialog {
  --instructions-surface: #22372b;
  background: var(--instructions-surface);
  width: min(560px, 94vw);
}
#instructionsdialog section {
  margin-top: 30px;
}
#instructionsdialog h3 {
  margin: 0 0 12px;
  color: var(--accent);
}
#instructionsdialog p,
#instructionsdialog li {
  font-size: 14px;
  line-height: 1.8;
  color: #c3cdbf;
}
#instructionsdialog li {
  padding-left: 5px;
  margin-bottom: 9px;
}
@media (max-width: 760px) {
  .case-lid {
    padding: 17px 14px;
    gap: 12px;
  }
  .case-brand h2 {
    font-size: 24px;
  }
  .case-brand > span {
    font-size: 7px;
    letter-spacing: 0.16em;
  }
  .case-lid p {
    font-size: 11px;
    line-height: 1.5;
  }
  .case-tray {
    padding: 8px;
  }
  .bait-options {
    gap: 8px;
  }
  .bait-option {
    padding: 5px 5px 9px;
    border-width: 2px;
  }
  .bait-art {
    height: 112px;
  }
  .bait-label {
    padding: 6px;
    width: 100%;
  }
  .bait-label strong {
    font-size: 10px;
  }
  .bait-label small {
    font-size: 8px;
  }
  .case-note {
    padding: 14px 2px 4px;
  }
  #instructionsdialog ol:not(.fish-guide) {
    padding-left: 20px;
  }
  #instructionsdialog p,
  #instructionsdialog li {
    font-size: 13px;
  }
}

#instructionsdialog .modal-heading {
  position: sticky;
  top: 0;
  z-index: 3;
  padding-bottom: 14px;
  background: var(--instructions-surface);
  box-shadow: 0 -32px 0 var(--instructions-surface);
}
#instructionsdialog .modal-heading h2 {
  font-size: clamp(22px, 3vw, 30px);
}