/* Worked brass, darkened cuts and old harbor lettering. Display wear stays
   off fine print and numbers so the small phone UI remains readable. */
@font-face {
  font-family: Harbor;
  src: url('/assets/fonts/Rye-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --cut-type: Harbor, Georgia, serif;
  --metal-wear: url('/assets/metal-wear.svg');
  --old-brass: #ac8345;
  --brass-edge: #bda16a;
  --engraved-light: 0 -1px 1px #020e12, 0 1px 0 #c8ac6a38;
  --engraved-dark: 0 -1px 0 #4b351bd9, 0 1px 0 #f1d99bbf;
}
.brand h1, .dialog-top h2, .receipt-paper h3, .card-title strong {
  font-family: var(--cut-type);
  font-weight: 400;
  letter-spacing: .035em;
  color: #c4ab73;
  text-shadow: 0 -1px 1px #071015, 0 1px 0 #e2c9936b, 1px 2px 1px #000b;
}
.brand h1, .spin-button > span {
  -webkit-mask-image: url('/assets/letter-wear.svg');
  mask-image: url('/assets/letter-wear.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.brand h1 { font-size: clamp(28px, 3.4vw, 49px); }
button:not(.crew-card):not(.card-thumb), select, .boat-form input {
  font-family: var(--cut-type);
  font-weight: 400;
  color: #d2bd8f;
  border-color: #8e794d;
  border-radius: 2px;
  background-image: var(--metal-wear), linear-gradient(110deg, #17373a, #10272b 55%, #203a36);
  background-size: 100% 100%;
  box-shadow: inset 0 1px 0 #a89d6840, inset 0 -2px 3px #020f15aa, 0 2px 3px #0006;
  text-shadow: var(--engraved-light);
}
button:not(.crew-card):not(.card-thumb):hover:not(:disabled) {
  background-image: var(--metal-wear), linear-gradient(110deg, #29433f, #183236 55%, #304a40);
  border-color: #c1a36a;
}
.spin-button, .brass-button, .book-tabs button[aria-pressed=true] {
  color: #30271b !important;
  border: 2px solid var(--brass-edge);
  background-image: var(--metal-wear), linear-gradient(112deg, #8b6d3a, #c2a364 27%, #ae874b 59%, #be9c5c 83%, #8a713f) !important;
  background-size: 100% 100%;
  box-shadow: inset 0 1px 0 #e0c88b9e, inset 0 0 0 2px #695330, inset 0 0 0 3px #cfb57b8c, inset 0 -3px 6px #4a3b218a, 0 3px 0 #05181c, 0 5px 12px #0008 !important;
  text-shadow: var(--engraved-dark) !important;
}
.spin-button:hover:not(:disabled), .brass-button:hover:not(:disabled) {
  background-image: var(--metal-wear), linear-gradient(112deg, #997b45, #cbb175 27%, #b79353 59%, #c5a66b 83%, #96804a) !important;
  border-color: #cfb780;
}
.spin-button:active:not(:disabled), .brass-button:active:not(:disabled) {
  box-shadow: inset 0 2px 6px #4f3a279e, inset 0 0 0 2px #77603b, 0 1px 1px #0007 !important;
}
.spin-button > span { font-family: var(--cut-type); font-weight: 400; letter-spacing: .09em; }
.spin-button small { font-family: Georgia, serif; font-weight: 700; letter-spacing: .015em; text-shadow: 0 1px 0 #e1c68e9e; }
.choice-button strong { font-family: var(--cut-type); font-weight: 400; color: #cbb482; text-shadow: var(--engraved-light); }
.choice-button small { text-shadow: 0 1px 1px #06181b; }
.skip-button { background: none !important; border: 0 !important; box-shadow: none !important; font-family: Georgia, serif !important; }
.instrument {
  border-color: #857044;
  background-image: var(--metal-wear), linear-gradient(135deg, #173637, #10272b);
  background-size: 100% 100%;
  box-shadow: inset 0 0 14px #0007, inset 0 1px 0 #c3ad6940, 0 3px 3px #0005;
}
.instrument strong, .hold-instrument strong, .log-instrument strong {
  font-family: Georgia, serif;
  font-weight: 700;
  color: #cdb886;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 -1px 1px #000, 0 1px 0 #d7b97940;
}
.instrument > span, .hold-instrument span, .log-instrument > span,
.reel-caption, .vessel-line, .eyebrow {
  font-family: var(--cut-type);
  font-weight: 400;
  letter-spacing: .055em;
  color: #bbaa81;
  text-shadow: var(--engraved-light);
}
.crew-card span, .card-thumb > span, .card-bottom, .card-title small {
  font-family: Georgia, serif;
  font-weight: 700;
  text-shadow: var(--engraved-light);
}
.crew-card, .card-thumb, .full-card { border-color: #8b7444; }
.crew-card { background-image: var(--metal-wear); background-size: 100% 100%; }
.reel-frame {
  border-color: #b69c63;
  background-image: var(--metal-wear), linear-gradient(122deg, #baa267, #78603c 15%, #a98a4e 41%, #54442d 64%, #b99c62);
  background-size: 100% 100%;
  box-shadow: 0 0 0 3px #031b22, 0 9px 24px #000a, inset 0 0 0 2px #564329;
}
.wheelhouse, dialog { border-color: #927a4d; }
.wheelhouse::before { border-color: #88784c85; box-shadow: inset 0 0 0 1px #091b1e; }
.brand-rule { border-color: #8d784a; }
.receipt-paper {
  color: #21312b;
  background-color: #e9ddbf;
  background-image: linear-gradient(115deg,#ffffff0a,#594c2b08),repeating-linear-gradient(0deg,#6b583603 0px,#6b583603 1px,transparent 1px,transparent 4px);
  box-shadow: inset 0 0 0 1px #87743e40,0 5px 10px #0005;
}
.receipt-paper h3 { color: #303729; text-shadow: 0 1px 0 #fff5; }
.instrument,.hold-instrument,.log-instrument { min-width: 0; max-width: 100%; }
.instrument strong,.hold-instrument strong,.log-instrument strong { min-width: 0; max-width: 100%; white-space: nowrap; }
.instrument strong i { font-size: .56em; }
@media(max-width:1050px) { .brand h1 { font-size: 34px; } }
@media(max-width:700px) and (orientation:portrait) {
  .brand h1 { font-size: 28px; letter-spacing: .02em; }
  .book-button { font-size: 10px !important; }
  .instrument strong { font-size: 25px; }
  .deck-footer button { font-size: 10px; }
  .spin-button > span { font-size: 29px; }
  .crew-card { grid-template-columns: 34px minmax(0, 1fr); }
  .crew-card img, .bonus-active .crew-card img { width: 34px; }
  .crew-card span { font-size: 10px; padding-inline: 3px; }
}
@media(orientation:landscape) and (max-height:650px) {
  .brand h1 { font-size: 22px; }
  .bonus-active .brand h1 { font-size: 20px; }
  .spin-button > span { font-size: 24px; }
  .bonus-active .spin-button > span { font-size: 21px; }
  .instrument strong { font-size: 22px; }
  .reel-caption { letter-spacing: .025em; }
  .choice-button strong { font-size: 13px !important; }
  .deck-footer button { font-size: 9px; }
}

/* Keep the main action anchored; its motion control never joins the row. */
.spin-actions { margin-bottom: 24px; }
.spin-actions .skip-button {
  position: absolute;
  top: calc(100% + 2px);
  bottom: auto;
  left: 0;
  right: 0;
  width: max-content;
  max-width: 100%;
  min-height: 20px;
  margin: 0 auto;
  padding: 2px 8px;
  line-height: 16px;
  white-space: nowrap;
}

/* A quiet, persistent catch receipt; only real matched cells get a trace. */
#result { min-height: 88px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.catch-headline { color: #dfc38b; font: 700 25px/1.15 Georgia,serif; text-shadow: var(--engraved-light); }
.catch-sources { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 13px; font: 12px/1.5 Georgia,serif; color: #bfc8b6; }
#result .catch-line-review { min-height: 24px; padding: 1px 4px; margin: 0; border: 0; border-bottom: 1px dotted #bfa266; background: none !important; box-shadow: none !important; color: #e0c58d; font: 700 12px/1.5 Georgia,serif; text-shadow: none; }

.catch-incident { color: #d5a88a; font: 11px/1.4 Georgia,serif; }
.sailing-note.hold-receipt { color: #cdbb8f; font-style: normal; font-variant-numeric: tabular-nums; }
.reel-glass > .reel-column:nth-child(5) { border-right: 0; }
.payline-trace { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.payline-trace polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.payline-shadow { stroke: #142328e6; stroke-width: 6px; }
.payline-color { stroke: var(--line-color); stroke-width: 2.6px; stroke-opacity: var(--line-strength,1); }
.payline-dot { fill: var(--line-color); fill-opacity: var(--line-strength,1); stroke: #12282b; stroke-width: 1.2px; }
.payline-chain { opacity: 1; filter: brightness(var(--line-brightness,1)); }
.payline-chain.line-secondary { opacity: .58; }
.payline-chain.line-focused .payline-color { stroke-width: 4px; }
.payline-chain.line-focused .payline-dot { r: 4.6px; }
.symbol.payline-win { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--line-color) 75%,transparent),inset 0 0 20px #d9b46833; }
.settled-haul:not(.no-catch) .catch-headline { color: #f6d58c; font-size: 32px; text-shadow: 0 1px 1px #071518,0 0 15px #dca94c66; }
.buoy-anticipation .reel-frame { box-shadow: 0 0 0 3px #031b22,0 0 28px #a6dfcd66,inset 0 0 0 2px #d2bd79; }
.buoy-anticipation #result { color: #bfebdf; font-size: 25px; font-family: var(--cut-type); text-shadow: 0 0 17px #9ddecd9c; }
.buoy-earned #result { color: #f8d887; font-size: 29px; text-shadow: 0 0 20px #e4bd6980; }
.symbol.buoy-lit { background: radial-gradient(ellipse,#b0e4c15c,#173f42); box-shadow: inset 0 0 0 2px #d8eac4,inset 0 0 28px #a5e3cc8c; }
.symbol.buoy-lit img { filter: drop-shadow(0 0 7px #c7e4bc); }
.awaiting-buoy { box-shadow: inset 0 0 24px #b3e5d436; }
@media(max-width:700px) and (orientation:portrait){.settled-haul:not(.no-catch) .catch-headline { font-size: 30px; }.deck-footer nav { flex-wrap: wrap; gap: 5px; }.deck-footer #sound-toggle { padding-inline: 7px; }}
@media(orientation:landscape) and (max-height:650px){.settled-haul:not(.no-catch) .catch-headline { font-size: 23px; }.buoy-anticipation #result { font-size: 17px; }.buoy-earned #result { font-size: 19px; }}
@keyframes catch-acknowledge { 0% { filter: brightness(1); } 35% { filter: brightness(1.4); } 100% { filter: brightness(1); } }
.catch-updated { animation: catch-acknowledge 650ms ease-out 1; }
.bonus-active #result { min-height: 56px; display: block; }
@media(max-width:700px) and (orientation:portrait) {
  #result { min-height: 91px; padding-top: 12px; }
  .catch-headline { font-size: 23px; }
  .catch-sources, #result .catch-line-review { font-size: 11px; }
  .bonus-active #result { min-height: 49px; }
}
@media(orientation:landscape) and (max-height:650px) {
  .fishing-center { max-width: min(360px,calc((100svh - 230px)*1.6667)); }
  #result { min-height: 58px; padding: 6px 0 2px; gap: 2px; }
  .catch-headline { font-size: 17px; }
  .catch-sources { gap: 0 8px; }
  .catch-sources, #result .catch-line-review { font-size: 10px; line-height: 1.3; }
  #result .catch-line-review { min-height: 16px; padding: 0 2px; }
  .bonus-active #result { min-height: 25px; padding-top: 7px; }
}
@media(prefers-reduced-motion:reduce) { .catch-updated { animation: none; } }

.journal-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 16px; }
.journal-pagination > span { font: 12px/1.5 Georgia,serif; color: #bcae8c; }
.journal-pagination > div { display: flex; flex-wrap: wrap; gap: 8px; }
.journal-pagination button { padding: 8px 12px; min-height: 38px; font-size: 12px; }
.journal-entry:focus { outline: 1px solid #bc9b60; outline-offset: 3px; }

/* Optional rules stay beside the reels and never interrupt a spin. */
.reel-caption .lines-help-open { margin-left: auto; padding: 1px 0 1px 8px; min-height: 22px; border: 0; background: none !important; box-shadow: none !important; color: #c4b38c; font: 11px/1.3 Georgia,serif; letter-spacing: 0; text-decoration: underline dotted; white-space: nowrap; }
.no-catch .catch-headline { color: #c2b69a; font-size: 20px; }
.lines-dialog { max-width: 720px; }
.lines-dialog p { color: #c9cbb7; font: 14px/1.6 Georgia,serif; }
.lines-dialog strong { color: #e0cd9f; }
.lines-dialog details { margin-top: 20px; border-top: 1px solid #82704b; padding-top: 12px; }
.lines-dialog summary { cursor: pointer; color: #d2bd8f; font: 15px Georgia,serif; }
.lines-dialog summary:focus-visible { outline: 3px solid #f9d58a; outline-offset: 4px; }
.line-example { display: flex; align-items: center; gap: 20px; margin: 18px 0; }
.line-example > div { width: 200px; flex-shrink: 0; }
.line-example p { margin: 0; font-size: 13px; }
.lines-dialog svg { display: block; width: 100%; height: auto; }
.lines-dialog svg rect { fill: #0d2a30; stroke: #7c704d; stroke-width: .7; }
.lines-dialog svg polyline { fill: none; stroke: #e4c782; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.line-paths { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px 12px; padding-top: 15px; }
.line-paths figure { margin: 0; position: relative; }
.line-paths figcaption { color: #b9a47a; font: 11px Georgia,serif; margin-bottom: 4px; }
@media(max-width:700px) and (orientation:portrait) {
  .no-catch .catch-headline { font-size: 18px; }
  .reel-caption .lines-help-open { font-size: 10px; }
  .lines-dialog { padding: 20px; }
  .lines-dialog p { font-size: 13px; }
  .line-example { display: block; }
  .line-example > div { margin: 0 auto 10px; }
  .line-paths { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media(orientation:landscape) and (max-height:650px) {
  .reel-caption .lines-help-open { font-size: 9px; min-height: 16px; }
  .no-catch .catch-headline { font-size: 14px; }
}

.symbol .scatter-tag { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 1px 4px; border: 1px solid #d5b36b99; border-radius: 2px; background: #163037e8; color: #f2d49a; font: 700 clamp(6px,1.1vw,9px)/1.2 Georgia,serif; letter-spacing: .03em; white-space: nowrap; text-shadow: 0 1px #07191e; pointer-events: none; }
.bonus-active .scatter-tag { display: none; }
.reel-rushing { box-shadow: inset 0 0 0 2px #d2dcb799,inset 0 0 32px #a8dfd052; }
@media(max-width:700px) and (orientation:portrait){.symbol .scatter-tag { font-size: 7px; padding-inline: 3px; }}
@media(orientation:landscape) and (max-height:650px){.symbol .scatter-tag { font-size: 6px; padding: 1px 2px; }}

/* Crew preparation uses the same illustrated cards as the collection. */
.port-dialog { max-width: 940px; }
.port-crew { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.port-portrait { display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; text-align: left; min-width: 0; }
.port-portrait > img { display: block; width: 100%; aspect-ratio: 1.15; object-fit: cover; object-position: center 22%; }
.port-portrait > span { display: flex; flex-direction: column; gap: 5px; padding: 12px; }
.port-portrait small { color: #bca97d; font: 12px Georgia,serif; }
.port-portrait strong { font: 16px/1.4 var(--cut-type); overflow-wrap: anywhere; }
.port-portrait span span { color: #c5c6ad; font: 12px/1.4 Georgia,serif; }
.port-portrait .portrait-hint { font-size: 11px; color: #d3bc89; }
.port-portrait[aria-expanded=true], .crew-choice[aria-pressed=true] { outline: 2px solid #d5b26a; outline-offset: 2px; background-color: #244549; }
.aboard-combo { padding: 12px 14px; margin: 14px 0 0; border-left: 2px solid #b69b64; background: #102d30; font: 13px/1.6 Georgia,serif; }
.crew-inspector { margin-top: 22px; padding: 20px; border: 1px solid #9b8254; background: #0b252b; scroll-margin-top: 12px; }
.crew-inspector-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.crew-inspector-top strong { font: 20px/1.4 var(--cut-type); }
.crew-inspector-top button { padding: 8px 12px; font-size: 12px; }
.crew-choices { display: flex; gap: 12px; overflow-x: auto; padding: 5px 4px 16px; margin-bottom: 10px; }
.crew-choice { flex: 0 0 94px; min-width: 0; padding: 0; overflow: hidden; }
.crew-choice img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 20%; }
.crew-choice span, .crew-choice small { display: block; padding: 5px 7px 0; font: 12px/1.4 Georgia,serif; overflow-wrap: anywhere; }
.crew-choice small { padding-bottom: 8px; color: #b6bea9; font-size: 11px; }
.crew-inspector-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 22px; align-items: start; }
.crew-inspector-layout > *, .crew-inspector-details { min-width: 0; }
.crew-inspector-layout .full-card { width: 100%; max-width: 420px; margin: 0 auto; }
.crew-inspector-details > p { margin: 0 0 14px; font: 13px/1.6 Georgia,serif; color: #c7c9b4; }
.crew-inspector-details > p:empty { display: none; }
#crew-assign { width: 100%; padding: 14px; font-size: 16px; }
#crew-change-status:not(:empty) { margin-top: 12px; }
.crew-combination { padding: 16px; margin-top: 20px; border: 1px solid #846f46; background: #123238; }
.combo-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; }
.combo-top strong { font: 18px/1.4 var(--cut-type); }
.combo-top > span { color: #d7bc83; font: 11px/1.5 Georgia,serif; }
.combo-members { display: flex; flex-wrap: wrap; gap: 12px; margin: 15px 0; }
.combo-members > span { width: 76px; text-align: center; font: 11px/1.4 Georgia,serif; }
.combo-members img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 20%; border: 1px solid #b0945d; margin-bottom: 7px; }
.combo-members small { display: block; color: #acbda9; font-size: 10px; margin-top: 3px; }
.crew-combination p, .crew-empty { margin: 10px 0 0; color: #c8cbb7; font: 13px/1.6 Georgia,serif; }
.crew-empty { padding: 14px 0; }
.port-bottom p { line-height: 1.7; }
@media(max-width:600px) {
  .port-dialog { padding: 20px; }
  .port-crew { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .port-portrait > img { aspect-ratio: 1.3; }
  .crew-inspector { padding: 14px; }
  .crew-inspector-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .crew-inspector-top { align-items: start; gap: 10px; }
  .crew-inspector-top strong { font-size: 17px; }
  .crew-inspector-top button { max-width: 120px; }
  .port-bottom { flex-direction: column; align-items: stretch; }
  .port-bottom p { margin-bottom: 0; }
}

/* Infrequent incidents earn an illustrated, untimed decision over the reels. */
.incident-dialog { max-width: 760px; padding: 0; overflow-x: hidden; background: #102c32; }
.incident-art { position: relative; padding: 20px; border-bottom: 1px solid #ac8a52; background: radial-gradient(ellipse,#536053,#0b252b 75%); }
.incident-art > img { display: block; width: min(100%,290px); height: 190px; margin: auto; object-fit: contain; filter: drop-shadow(0 7px 8px #0007); }
.incident-art > span { position: absolute; bottom: 12px; left: 20px; padding: 5px 8px; background: #102c32ed; color: #e4c38a; font: 12px/1.4 var(--cut-type); }
.incident-content { padding: 25px; }
.incident-content h2 { margin: 0 0 16px; font-size: clamp(23px,4vw,31px); line-height: 1.35; }
.incident-content > p, #incident-actions > p { font: 14px/1.65 Georgia,serif; color: #d1d0b8; }
#incident-costs { padding: 10px 14px; margin: 20px 0; border: 1px solid #8c794f; background: #0b242b; }
#incident-costs p { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0; font: 13px/1.5 Georgia,serif; }
#incident-costs strong { color: #ecd198; font-variant-numeric: tabular-nums; }
#incident-actions { display: flex; flex-direction: column; gap: 13px; }
#incident-actions button { padding: 15px; line-height: 1.4; }
#incident-actions small { display: block; margin-top: 7px; font: 13px/1.5 Georgia,serif; }
.incident-save { display: flex; gap: 16px; align-items: center; justify-content: center; text-align: left; }
.incident-save img { width: 70px; height: 70px; object-fit: contain; flex-shrink: 0; }
#incident-actions > p { margin: 0; }
.incident-content .incident-no-clock { margin: 18px 0 0; color: #aebfad; font-size: 12px; font-style: italic; }
.incident-log { padding: 15px; margin-top: 12px; background: #0c262c; border-left: 2px solid #b29156; font: 13px/1.65 Georgia,serif; }
.incident-log p { margin: 10px 0 0; }
#result button.catch-incident { padding: 3px 6px; min-height: 28px; border: 0; background: none!important; box-shadow: none!important; font: 13px/1.5 Georgia,serif; text-decoration: underline dotted; }
#incident-status:empty { display: none; }
@media(max-width:600px){.incident-content { padding: 20px; }.incident-art { padding: 14px; }.incident-art > img { height: 155px; }.incident-art > span { left: 14px; font-size: 11px; }.incident-save { gap: 10px; }.incident-save img { width: 54px; height: 54px; }}
@media(orientation:landscape) and (max-height:650px){.incident-art > img { height: 100px; }.incident-art { padding: 10px; }.incident-content { padding: 20px; }}

/* Bonus pots stay put while the empty spaces keep turning. */
.bonus-cell-window { position: relative; height: calc(100% / var(--rows)); overflow: hidden; isolation: isolate; }
.bonus-cell-strip { width: 100%; will-change: transform; }
.bonus-spinning .symbol { filter: blur(.7px); opacity: .8; }
.bonus-spinning::after { content: ''; position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(180deg,#0a202a99,transparent 20%,#e9c06d26 47%,transparent 72%,#0a202a99); box-shadow: inset 0 0 15px #b4c6af33; animation: bonus-shine 1.4s ease-in-out infinite alternate; }
.bonus-near { box-shadow: inset 0 0 0 2px #e7c580,inset 0 0 28px #e7c58066; }
.bonus-new-lock { animation: pot-lock-arrives 1s ease-out 2; }
.bonus-buoy { box-shadow: inset 0 0 0 2px #c0e1c1,inset 0 0 25px #b8dfc18c; }
.bonus-building .reel-frame { box-shadow: 0 0 0 3px #031b22,0 0 26px #dbbd7466,inset 0 0 0 2px #d2bd79; }
.bonus-outcome { display: block; font: 700 22px/1.25 Georgia,serif; color: #efce8c; text-shadow: 0 1px 2px #061b21; }
.bonus-hint { display: block; margin-top: 5px; color: #c4cbb3; font: 12px/1.5 Georgia,serif; }
.bonus-banner, .bonus-dice { position: absolute; z-index: 12; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; text-align: center; background: radial-gradient(ellipse,#12363bea,#071c25eb); box-shadow: inset 0 0 40px #c8ab6633; animation: bonus-banner-in .35s ease-out; }
.bonus-banner > strong, .bonus-dice > strong { color: #efd39b; font: clamp(22px,3vw,39px)/1.25 var(--cut-type); text-shadow: 0 2px 2px #071b22,0 0 22px #c7a96055; }
.bonus-banner > span { margin-top: 16px; max-width: 360px; color: #d7d5b9; font: 15px/1.6 Georgia,serif; }
.bonus-dice > div { display: flex; justify-content: center; gap: 20px; margin-top: 18px; }
.bonus-dice .die { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; color: #2c281e; border: 2px solid #b59963; border-radius: 10px; background: linear-gradient(135deg,#f0dfb7,#bba272); box-shadow: inset 0 0 12px #6d532455,0 5px 12px #0007; font: 68px/1 Georgia,serif; animation: dice-tumble .22s linear infinite alternate; }
.bonus-dice .die-settled { animation: none; box-shadow: inset 0 0 12px #6d532455,0 0 20px #d6bc7388; }
.bonus-dice p { max-width: 360px; color: #e2d2aa; font: 14px/1.55 Georgia,serif; }
@keyframes bonus-shine { from { opacity: .5; } to { opacity: 1; } }
@keyframes pot-lock-arrives { 0% { filter: brightness(1.9); box-shadow: inset 0 0 0 3px #f4d38b,inset 0 0 30px #ebc57e99; } 100% { filter: brightness(1); box-shadow: inset 0 0 0 1px #d5b773; } }
@keyframes bonus-banner-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@keyframes dice-tumble { from { transform: rotate(-8deg) translateY(-3px); } to { transform: rotate(8deg) translateY(3px); } }
@media(max-width:700px) and (orientation:portrait){.bonus-outcome { font-size: 19px; }.bonus-hint { font-size: 11px; }.bonus-banner > span { font-size: 13px; }.bonus-dice .die { width: 62px; height: 62px; font-size: 58px; }}
@media(orientation:landscape) and (max-height:650px){.bonus-outcome { font-size: 16px; }.bonus-hint { margin-top: 3px; font-size: 10px; line-height: 1.3; }.bonus-banner,.bonus-dice { padding: 10px; }.bonus-banner > strong,.bonus-dice > strong { font-size: 22px; }.bonus-banner > span { margin-top: 8px; font-size: 12px; }.bonus-dice > div { margin-top: 10px; gap: 14px; }.bonus-dice .die { width: 50px; height: 50px; font-size: 46px; }.bonus-dice p { margin: 9px 0 0; font-size: 11px; }}
@media(prefers-reduced-motion:reduce){.bonus-new-lock,.bonus-spinning::after,.bonus-banner,.bonus-dice,.bonus-dice .die { animation: none; }}

/* A receipt-sized celebration over the accepted winning board. */
.haul-celebration { position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; overflow: hidden; text-align: center; background: radial-gradient(ellipse,#294138eb,#071e27f5 82%); box-shadow: inset 0 0 40px #d4ad5a55; animation: bonus-banner-in .35s ease-out; }
.haul-scope { color: #c6b38a; font: 11px/1.3 Georgia,serif; letter-spacing: .14em; }
.haul-title { max-width: 100%; color: #f1cc7d; font: clamp(23px,4vw,48px)/1.16 var(--cut-type); text-shadow: 0 2px 2px #06171e,0 0 24px #b8893b88; }
.haul-emblem { width: 22%; max-width: 85px; max-height: 65px; object-fit: contain; filter: drop-shadow(0 0 10px #e1b35f66); }
.haul-film { width: min(60%,260px); aspect-ratio: 16/9; max-height: 110px; overflow: hidden; border: 2px ridge #b18b4d; margin: 3px 0; background: #0c242a; }
.haul-film video { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.2) saturate(.7) contrast(1.06); }
.haul-tally { display: flex; flex-direction: column; align-items: center; font-variant-numeric: tabular-nums; }
.haul-tally > strong { color: #f5daa0; font: 700 clamp(28px,5vw,65px)/1.05 Georgia,serif; text-shadow: 0 0 18px #c2943966; }
.haul-tally > span { color: #d2c19b; font: 11px/1.4 var(--cut-type); letter-spacing: .1em; }
.haul-tally > b { color: #ecd8ab; font: 700 18px/1.4 Georgia,serif; }
.haul-tally > small { color: #bac4ae; font: 11px/1.4 Georgia,serif; }
.haul-celebration .haul-continue { padding: 5px 14px; min-height: 30px; font: 12px/1.4 Georgia,serif; }
.haul-counted .haul-title { text-shadow: 0 0 25px #f4d08088,0 2px 1px #071820; }
@media(max-width:700px) and (orientation:portrait){.haul-celebration { padding: 10px; gap: 3px; }.haul-title { font-size: 27px; }.haul-tally > strong { font-size: 39px; }.haul-tally > b { font-size: 16px; }.haul-emblem { max-height: 44px; }.haul-film { max-height: 72px; }}
@media(orientation:landscape) and (max-height:650px){.haul-celebration { padding: 5px; gap: 2px; }.haul-scope { font-size: 8px; }.haul-title { font-size: 18px; }.haul-emblem { display: none; }.haul-film { display: none; }.haul-tally > strong { font-size: 27px; }.haul-tally > span { font-size: 8px; }.haul-tally > b { font-size: 12px; line-height: 1.2; }.haul-tally > small { font-size: 8px; }.haul-celebration .haul-continue { min-height: 24px; padding: 2px 9px; font-size: 10px; }}
@media(prefers-reduced-motion:reduce){.haul-celebration { animation: none; }}
/* Keep the celebration inside a three-row phone board, including its button. */
.haul-celebration { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); grid-template-areas: 'scope scope' 'title title' 'media tally' 'button button'; align-content: center; justify-items: center; }
.haul-scope { grid-area: scope; }
.haul-title { grid-area: title; }
.haul-emblem, .haul-film { grid-area: media; justify-self: end; margin-right: 14px; }
.haul-emblem { width: 85px; max-width: 100%; }
.haul-film { width: min(100%,260px); }
.haul-tally { grid-area: tally; justify-self: start; }
.haul-continue { grid-area: button; }
@media(max-width:700px) and (orientation:portrait){.haul-celebration { padding: 8px; gap: 2px; }.haul-scope { font-size: 9px; }.haul-title { font-size: 25px; }.haul-emblem { width: 60px; max-height: 60px; margin-right: 12px; }.haul-tally > strong { font-size: 32px; }.haul-tally > span { font-size: 9px; }.haul-tally > b { font-size: 15px; line-height: 1.3; }.haul-tally > small { font-size: 9px; line-height: 1.3; }.haul-celebration .haul-continue { min-height: 26px; padding-block: 3px; }}
@media(orientation:landscape) and (max-height:650px){.haul-celebration { grid-template-columns: minmax(0,1fr); grid-template-areas: 'title' 'tally' 'button'; padding: 4px; gap: 1px; }.haul-scope { display: none; }.haul-title { font-size: 16px; }.haul-tally { justify-self: center; }.haul-emblem,.haul-film { display: none; }}

.ground-guide { grid-column: 1 / -1; padding: 16px; border: 1px solid #84744c; background: #0c2930; }
.ground-catches { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-bottom: 13px; }
.ground-catches > span { display: flex; align-items: center; gap: 9px; font: 15px/1.4 Georgia,serif; }
.ground-catches img { display: block; width: 52px; height: 52px; object-fit: contain; }
.ground-catches small { display: block; margin-top: 3px; color: #aebea9; font-size: 11px; }
.ground-guide p { margin: 10px 0 0; font: 13px/1.65 Georgia,serif; color: #ccd1ba; }
.ground-guide .ground-benefit, .ground-guide .ground-tradeoff { display: flex; align-items: baseline; gap: 10px; }
.ground-benefit > span { color: #bad3ae; font-weight: bold; }
.ground-tradeoff > span { color: #d8ad81; font-weight: bold; }
.ground-guide .ground-risk { color: #a9bba9; font-size: 12px; padding-top: 10px; border-top: 1px solid #71644477; }
.season-dialog { max-width: 820px; }
.season-dialog .dialog-top h2 { margin: 0; }
#weekly-context { color: #bdc8b3; font: 13px/1.6 Georgia,serif; margin: 18px 0; }
.season-totals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.season-totals > div { min-width: 0; padding: 18px 12px; text-align: center; border: 1px solid #a38751; background: #0b252c; }
.season-totals span { display: block; color: #bfc7b0; font: 12px/1.4 Georgia,serif; }
.season-totals strong { display: block; overflow-wrap: anywhere; margin-top: 9px; color: #e8c988; font: 700 clamp(19px,3vw,30px)/1.25 Georgia,serif; }
#weekly-result-note { color: #dfd1ab; font: 14px/1.7 Georgia,serif; margin: 20px 0; }
#weekly-standings table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 14px/1.5 Georgia,serif; }
#weekly-standings th { color: #bbbd9f; font-weight: normal; }
#weekly-standings th, #weekly-standings td { padding: 13px 12px; text-align: left; border-bottom: 1px solid #786c4699; overflow-wrap: anywhere; }
#weekly-standings th:first-child { width: 70px; }
#weekly-standings th:last-child { width: 90px; }
#weekly-standings td:last-child,#weekly-standings th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
#weekly-standings .your-boat { background: #70603d55; color: #f0d399; }
#weekly-standings td small { display: block; color: #b5c7ad; font-size: 11px; margin-top: 4px; }
#weekly-updated { margin: 14px 0 0; color: #a8baa9; font: 11px/1.6 Georgia,serif; }
.season-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.season-actions button { font-size: 14px; padding: 12px 16px; }
@media(max-width:600px){.season-dialog { padding: 20px; }.season-dialog .dialog-top h2 { font-size: 25px; }.season-totals { grid-template-columns: minmax(0,1fr); gap: 10px; }.season-totals > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; text-align: left; }.season-totals strong { margin: 0; font-size: 24px; text-align: right; }.season-totals span { font-size: 13px; }.season-actions { justify-content: stretch; }.season-actions button { flex: 1 1 120px; }.ground-guide { padding: 14px; }.ground-catches { gap: 14px; }.ground-catches > span { font-size: 14px; }.ground-catches img { width: 43px; height: 43px; }#weekly-standings th,#weekly-standings td { padding: 11px 8px; }#weekly-standings th:first-child { width: 52px; }#weekly-standings th:last-child { width: 75px; }}
@media(max-width:700px) and (orientation:portrait){.port-fields > label:first-child { order: 0; }.port-fields > #ground-guide { order: 1; }.port-fields > label:nth-child(2) { order: 2; }}