/* The Sea Roads: the banner saying where the ship is, the timetable board, the logbook, the
   hermit crabs' market, the tide pools. See public/js/sea.ts. */
#sea-banner { top: calc(62px + var(--safe-t)); left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 10px; background: rgba(16, 30, 48, .72); border: 2px solid #6a9ac8; color: #eef6ff; font-size: 13px; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 0 #000; display: flex; flex-direction: column; align-items: center; gap: 1px; }
#sea-banner span { color: #c8dcf0; }
#sea-banner .sea-line { font-size: 12px; }
@media (max-width: 600px) { #sea-banner { top: calc(100px + var(--safe-t)); left: auto; right: calc(62px + var(--safe-r)); transform: none; font-size: 11px; white-space: normal; max-width: 54vw; text-align: right; align-items: flex-end; } #sea-banner .sea-line { font-size: 11px; } }
@media (max-height: 520px) { #sea-banner { top: auto; bottom: calc(70px + var(--safe-b)); } }
body.pf-held #sea-banner { top: calc(62px + var(--pf-hold, 0px) + var(--safe-t)); }

.sea-pic { image-rendering: pixelated; flex: none; }
.sea-portrait { width: 56px; height: 84px; object-fit: contain; }
.sea-board .sea-sail { align-items: center; gap: 10px; }
.sea-board .sea-ship { width: 92px; height: auto; background: linear-gradient(#b8dcf4 0 70%, #3a78b0 70%); border-radius: 6px; border: 2px solid #c8b080; padding: 2px; }
.sea-log h4 { margin: 10px 0 4px; font-size: 14px; color: #6b4a2e; }
.sea-page { padding: 6px 8px; margin: 4px 0; border-radius: 8px; background: #fffaf0; border: 2px solid #e8d8b8; }
.sea-page .sea-note { font-style: italic; color: #5a4a3a; margin-top: 2px; }
.sea-names { line-height: 1.6; color: #4a3a2a; }
.sea-oldpage { background: #f2e6c8; border: 2px solid #c8b080; border-radius: 6px; padding: 8px 12px; font-family: Georgia, 'Times New Roman', serif; color: #3a2a1a; }
.sea-bottle-letter { background: #f6f0dc; border: 2px dashed #8ab8a0; border-radius: 8px; padding: 8px 12px; font-family: Georgia, 'Times New Roman', serif; }
.sea-market .sea-crab { padding: 6px 8px; margin: 6px 0; border-radius: 10px; background: #fbf4e4; border: 2px solid #e8d8b8; }
.sea-market .sea-crab.on { border-color: #c8a060; }
.sea-crabpic { width: 30px; height: 21px; background: radial-gradient(circle at 50% 70%, #f4e6c0, #e0cc90); border-radius: 8px; padding: 4px; }
.sea-pool .sea-critter { width: 48px; height: 48px; border-radius: 10px; border: 2px solid #6a8a8a; }
.sea-pool .row { align-items: center; gap: 10px; }
@media (max-width: 480px) {
  .sea-board .sea-ship { width: 64px; }
  .sea-pool .sea-critter { width: 40px; height: 40px; }
}

/* the sloop (public/js/sloop.ts): the slip, her name and colours, the sea chart */
.sea-sloop-pic { display: block; margin: 0 auto 6px; image-rendering: pixelated; max-width: 100%; height: auto; background: linear-gradient(#cfe8f8 0 78%, #3a78b0 78%); border-radius: 8px; border: 2px solid #c8b080; }
.sea-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.sea-swatch { width: 30px; height: 30px; border-radius: 8px; border: 2px solid #8a6038; cursor: pointer; }
.sea-swatch.on { outline: 3px solid #ffd23a; outline-offset: 1px; }
.sea-name .input { width: 100%; box-sizing: border-box; }
.sea-chartpic { display: block; margin: 0 auto 6px; image-rendering: pixelated; max-width: 100%; height: auto; border-radius: 6px; border: 2px solid #a08048; }