/* The same shore, with the angler's kit finished by hand. */
.top nav a {position:relative;transition:color .18s ease}
.top nav a:not(.nav-play)::after {content:"";position:absolute;bottom:-5px;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.top nav a[aria-current="page"] {color:var(--gold)}
.top nav a:is(:hover,:focus-visible,[aria-current="page"])::after {transform:scaleX(1)}
.harbor-menu {display:none}
:is(.nav-play,#live-toggle,.download-ticket,.account-button) {transition:background .18s ease,box-shadow .18s ease,transform .18s ease}
:is(.nav-play,#live-toggle):hover {background:var(--sky);box-shadow:inset 0 0 0 1px var(--gold)}
.download-ticket:hover {transform:rotate(0deg) translateY(-2px);background:var(--sky)}
:is(.plank,.account-button):active {transform:translateY(1px);box-shadow:inset 0 2px 4px #102e3733}
.account-button:not(:disabled):hover {filter:brightness(1.08)}
.account-card input {transition:border-color .18s ease,box-shadow .18s ease}
.account-card input:focus-visible {border-color:var(--accent);box-shadow:0 0 0 4px #285a6012}
.ink-link {text-decoration-thickness:1px;transition:text-underline-offset .18s ease,color .18s ease}
.ink-link:hover {text-underline-offset:8px}
.plank:focus-visible {clip-path:none;outline-offset:4px}
.plank[aria-disabled="true"] {pointer-events:none;opacity:.65}

/* Keep the painting still; a few low lights belong to its reeds. */
.hero {position:relative;z-index:1}
.shore-atmosphere {position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.shore-atmosphere span {position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:var(--cream);opacity:.25;box-shadow:0 0 8px 2px #ddb66d44;animation:shore-drift var(--time,19s) ease-in-out infinite alternate;animation-delay:var(--delay,0s);animation-play-state:paused}
.shore-atmosphere[data-awake="true"] span {animation-play-state:running}
.shore-atmosphere span:nth-child(1) {--x:4%;--y:65%;--time:19s;--delay:-7s}
.shore-atmosphere span:nth-child(2) {--x:17%;--y:88%;--time:23s;--delay:-11s}
.shore-atmosphere span:nth-child(3) {--x:36%;--y:72%;--time:17s;--delay:-3s}
.shore-atmosphere span:nth-child(4) {--x:48%;--y:28%;--time:27s;--delay:-15s}
.shore-atmosphere span:nth-child(5) {--x:69%;--y:87%;--time:21s;--delay:-4s}
.shore-atmosphere span:nth-child(6) {--x:85%;--y:15%;--time:25s;--delay:-13s}
.shore-atmosphere span:nth-child(7) {--x:96%;--y:65%;--time:18s;--delay:-8s}
.shore-atmosphere span:nth-child(8) {--x:57%;--y:93%;--time:28s;--delay:-17s}
@keyframes shore-drift {to {transform:translate(14px,-23px)}}

/* A quiet brass bevel, while the actual game remains the focal point. */
.live-rim {box-shadow:inset 0 0 0 1px #f4e7c540,inset 0 -2px 0 #102e3755,0 12px 28px #06192078,0 0 0 1px #d3b77755}
.live-rest {display:none;position:absolute;inset:7px;place-content:center;text-align:center;gap:12px;background:linear-gradient(#102e37c9,#102e37de),url('/art/the-tide-is-calling.jpg') center/cover;pointer-events:none;color:var(--cream)}
.live-rest span:first-child {font:italic clamp(23px,3vw,37px) var(--serif);color:var(--gold)}
.live-rest span:last-child {font:13px var(--hand)}
.broadcast:has(#live-toggle[aria-pressed="true"]) .live-rest {display:grid}
.broadcast:has(#live-toggle[aria-pressed="true"]) .live-label {visibility:hidden}
.broadcast-note {font-size:11px;line-height:1.7;color:#d0d8c8}
.broadcast figcaption small {font-size:11px}
#live-toggle {min-height:40px;min-width:90px}

/* Ink rules and worn paper extend the journal without adding new sections. */
.shore-heading {position:relative}
.shore-heading::after {content:"";display:block;margin-top:28px;width:90px;height:8px;border-top:1px solid var(--gold);border-bottom:1px solid #ddb66d44;transform:skewX(-30deg);opacity:.65}
.paper-story {background-image:radial-gradient(ellipse at 7% 0,#c677600b,transparent 48%),linear-gradient(115deg,transparent 49.8%,#293d3905 50%,transparent 50.2%)}
.next-shore>span:last-child {transition:transform .2s ease}
.next-shore:is(:hover,:focus-visible)>span:last-child {transform:translate(4px,-3px)}
.postcards a {transition:transform .2s ease,box-shadow .2s ease}
.postcards a:is(:hover,:focus-visible) {transform:rotate(0) translateY(-3px);box-shadow:2px 12px 24px #25362e26}
.shore-list button {min-height:60px;transition:color .18s ease}
.shore-list button[aria-pressed="true"] strong {text-decoration:underline;text-decoration-color:#ddb66d88;text-decoration-thickness:1px;text-underline-offset:6px}
.paper-story a:focus-visible,.journal a:focus-visible,.pocket-friend:focus-visible {outline-color:var(--ink)}
.pet-meadow figure:nth-child(2) {background:radial-gradient(ellipse at 50% 40%,#ddb66d0d,transparent 62%)}
.pet-meadow figure:nth-child(3) {background:radial-gradient(ellipse at 50% 40%,#69887512,transparent 62%)}

/* An optional little companion, tucked into the existing postcard's margin. */
.companion-photo {margin-bottom:40px}
.pocket-friend {position:absolute;bottom:-34px;right:15px;width:84px;height:66px;border:0;border-bottom:2px solid #69887588;border-radius:0 0 45% 40%;padding:0;overflow:hidden;background:transparent;transform:rotate(-3deg);touch-action:manipulation}
.pocket-friend img {width:84px;height:84px;object-fit:contain;transform:translateY(13px);transition:transform .3s ease}
.pocket-friend:is(:hover,:focus-visible,[aria-expanded="true"]) img {transform:translateY(0)}
.friend-note {position:absolute;right:100px;bottom:-49px;max-width:230px;padding:7px 11px;color:var(--ink);background:var(--cream);font:12px/1.6 var(--hand);transform:rotate(-3deg);border-bottom:1px solid #69887555;box-shadow:0 3px 10px #293d3912}
.friend-note[hidden] {display:none}

@media(max-width:850px) {
  /* All destinations remain available even before enhancement JS loads. */
  .top {height:auto;min-height:85px;flex-wrap:wrap;gap:12px;padding-block:15px}
  .top nav {flex-wrap:wrap;gap:10px 20px}
  .top nav>a:not(.nav-play) {display:inline-flex}
  .top.harbor-ready {display:grid;grid-template-columns:1fr auto auto;justify-content:initial;gap:12px;height:85px;padding-block:0;z-index:5}
  .top.harbor-ready .brand {min-width:0}
  .top.harbor-ready .brand img {width:min(150px,100%)}
  .harbor-ready .harbor-menu {display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;color:var(--cream);padding:10px 4px;min-height:44px;font-size:12px}
  .harbor-menu::after {content:"⌄";color:var(--gold);font-size:16px}
  .harbor-menu[aria-expanded="true"]::after {content:"⌃"}
  .harbor-ready nav>a:not(.nav-play) {display:none}
  .harbor-ready .nav-play {min-height:44px;display:inline-flex;align-items:center;padding:8px 12px;font-size:12px}
  .harbor-ready.menu-open nav {position:absolute;top:76px;left:0;right:0;padding:14px 18px;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;background:var(--sky);border:1px solid #ddb66d77;border-radius:3px 9px 4px 11px;box-shadow:0 16px 28px #06192055}
  .harbor-ready.menu-open nav>a {display:flex;align-items:center;min-height:44px;padding:8px 4px;font-size:14px}
  .harbor-ready.menu-open nav .nav-play {justify-content:center}
  .top nav a::after {bottom:2px}
  .broadcast-note {font-size:11px}
  .companion-photo {margin-bottom:48px}
  .friend-note {right:90px;max-width:calc(100% - 95px)}
  .pet-meadow img {max-width:100%}
  footer nav {flex-wrap:wrap;row-gap:14px}
  .account-card {transform:none}
  .account-tabs {gap:clamp(12px,4vw,24px)}
}
@media(max-width:420px) {
  .hero h1 {font-size:clamp(34px,11vw,46px)}
  .hero h1 em {white-space:normal}
  .broadcast-top {flex-wrap:wrap;row-gap:7px}
  .broadcast-top .scribble {font-size:13px}
  .departure h2 {font-size:clamp(38px,12vw,52px)}
  .shore-heading h1 {font-size:clamp(39px,12vw,51px)}
  .account-card {padding:20px}
  .companion-photo:has(#pocket-friend[aria-expanded="true"]) {margin-bottom:125px}
  .friend-note {right:0;top:calc(100% + 43px);bottom:auto;max-width:100%}
}
@media(max-width:760px) {
  .account-story h1 br {display:block}
  .account-story img {height:150px;object-fit:cover;margin:8px auto}
}
@media(prefers-reduced-motion:reduce) {
  .shore-atmosphere span {animation:none!important;transform:none}
  .pocket-friend img {transition:none}
}
@media(forced-colors:active) {
  .shore-atmosphere {display:none}
  .harbor-ready.menu-open nav,.pocket-friend {border:1px solid CanvasText}
  .friend-note {background:Canvas;color:CanvasText;border:1px solid CanvasText}
  .top nav a[aria-current="page"] {text-decoration:underline}
}