/* Generated paper-postcard artwork. Live values and accessible controls remain real DOM.
   Button boxes follow the source image ratio; contain is a safeguard against layout constraints. */
:root{--ink:#244f51;--cream:#fbf5e6;--green:#356d68;--muted:#5a7370}
.brand{padding:5px 10px;border-radius:15px;background:#fff8eaf2;box-shadow:0 2px 5px #0b37322b;text-shadow:none}
#game[data-phase=ready] .brand{display:none}
.brand .brand-image{display:block;width:120px;height:38px;object-fit:contain}
#game[data-phase=playing] .brand{padding:4px 8px}
#game[data-phase=playing] .brand-image{width:105px;height:32px}
.welcome{max-width:360px;margin-inline:auto}
.welcome h1{margin:0 auto 13px;font-size:0;line-height:0;max-width:260px}
.sound-hint-image{display:block;width:min(280px,88%);height:auto;margin:12px auto 0;object-fit:contain}
.title-image{display:block;width:100%;height:auto;max-height:155px;object-fit:contain}
.paper-image-action{background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;height:auto!important;min-height:44px!important;aspect-ratio:var(--paper-ratio,4/1);flex-shrink:0;font-size:0!important;color:transparent!important;animation:none!important;transition:transform .12s,filter .12s}
.paper-image-action>*{visibility:hidden}
.paper-image-action:active{transform:translateY(2px) scale(.985);filter:brightness(.96);box-shadow:none}
.paper-image-action:focus-visible{outline:3px solid #28615e;outline-offset:3px;border-radius:20px!important}
#start.paper-image-action{--paper-ratio:840/199;background-image:url('/assets/ui/harbor/start.webp')}
#game[data-phase=ready] #start:not(:disabled){animation:start-breathe 2.8s ease-in-out infinite!important;transform-origin:center}
#game[data-phase=ready] #start.ui-pressed{animation-play-state:paused!important}
@keyframes start-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
#restart.paper-image-action,#restart-end.paper-image-action{--paper-ratio:840/220;background-image:url('/assets/ui/harbor/replay.webp')}
#share-end.paper-image-action{--paper-ratio:900/242;background-image:url('/assets/ui/harbor/share.webp')}
#resume.paper-image-action{--paper-ratio:840/196;background-image:url('/assets/ui/harbor/continue.webp')}
#reload.paper-image-action{--paper-ratio:840/198;background-image:url('/assets/ui/harbor/reload.webp');width:min(320px,100%)}
#share-end[data-paper-label=busy]{--paper-ratio:840/197;background-image:url('/assets/ui/harbor/share-busy.webp')}
#share-end[data-paper-label=retry]{--paper-ratio:840/197;background-image:url('/assets/ui/harbor/retry.webp')}
.icon-button,#skip-intro,#restart-pause,#art-close,.fl-close{background-color:transparent!important;background-position:center!important;background-size:contain!important;background-repeat:no-repeat!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:transform .1s,filter .1s}
.icon-button:active,#skip-intro:active,#art-close:active,.fl-close:active{transform:scale(.94)}
.icon-button svg,#skip-intro svg,#restart-pause svg,#art-close svg,.fl-close svg{visibility:hidden}
#sound{background-image:url('/assets/ui/harbor/sound-on.webp')!important}
#sound[aria-pressed=false]{background-image:url('/assets/ui/harbor/sound-off.webp')!important}
#pause{background-image:url('/assets/ui/harbor/pause.webp')!important}
#skip-intro{background-image:url('/assets/ui/harbor/skip.webp')!important}
#restart-pause{background-image:url('/assets/ui/harbor/restart-icon.webp')!important}
#art-close,.fl-close{background-image:url('/assets/ui/harbor/close.webp')!important;min-width:44px;min-height:44px}
.overlay{background:#153d3aa3;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:auto}
.dialog{background:none;border-radius:25px;box-shadow:0 12px 38px #123d3a45;padding:26px 24px 28px;max-height:calc(100dvh - 40px);overflow:auto}
.pause-heading{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px}
.pause-heading img{width:160px;height:auto;max-height:76px;object-fit:contain}
.hold-hint{color:#496a64;font-size:12px}
.fl-sheet{background:none;padding-bottom:28px}
.sheet,.newscard,.pn-item,.rn-item,.feed{background-color:#fbf5e6;background-image:url('/assets/ui/harbor/paper-texture.webp')}
.newscard,.pn-item,.rn-item{border-color:#c8d3c2;box-shadow:0 2px 7px #163c3526}
/* Keep the original harbour glass and pastel handles. Explicit foregrounds avoid
   inheriting the dark paper ink (including when the device prefers dark mode). */
#game .msg.talk{color:#f4faf5;-webkit-text-fill-color:currentColor;color-scheme:only light;background:#0d2b2961;border:0;text-shadow:0 1px 2px #0009;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#game .msg.talk b{-webkit-text-fill-color:currentColor}
#game.lowfx .msg.talk{background:#0d2b29a6;backdrop-filter:none;-webkit-backdrop-filter:none}
.art-end{grid-template-columns:1fr 1fr;background:linear-gradient(to top,#fbf5e6 86%,#fbf5e600);gap:8px;padding-top:14px}
.art-end>button{width:100%;justify-self:center;min-width:0}
#share-msg{color:#345d58}
#loading{background-color:#f4efdf;color:#365f5a}
.loading-icon{width:132px;height:auto;object-fit:contain;animation:loading-swim 2.4s ease-in-out infinite}
@keyframes loading-swim{0%,100%{transform:translate(-8px,2px) rotate(-2deg)}50%{transform:translate(8px,-3px) rotate(2deg)}}
.pop.heart{width:1.25em;height:1.25em;padding:0;border:0;border-radius:0;background:transparent url('/assets/ui/harbor/heart.webp') center/contain no-repeat;filter:drop-shadow(0 1px 1px #fff9)}
.pop.heart .ic{visibility:hidden}
/* Editorial place card belongs only to the high drone flight. Its art keeps its native ratio. */
.intro-location{position:absolute;inset:auto 0 0;z-index:4;display:flex;justify-content:center;margin:0;padding:68px max(20px,env(safe-area-inset-right)) max(30px,calc(env(safe-area-inset-bottom) + 20px)) max(20px,env(safe-area-inset-left));background:linear-gradient(to top,#082d354d 0%,#082d3526 45%,#082d3500 100%);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .75s ease,visibility 0s linear .75s}
.intro-location[hidden],#game:not([data-phase=intro]) .intro-location{display:none!important}
.intro-location.in{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.intro-location img{display:block;width:min(220px,60vw);height:auto;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 4px #082d3552)}
@media(max-height:480px){.intro-location{padding-top:32px;padding-bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px))}.intro-location img{width:min(176px,44vw)}}
@media(prefers-reduced-motion:reduce){.intro-location,.intro-location.in{transition:none}}
@media(min-width:800px){.art-end{grid-template-columns:1fr 1fr}.art-end>button{width:100%}.brand .brand-image{width:135px;height:40px}}
@media(max-width:345px){.brand .brand-image{width:104px;height:33px}#game[data-phase=playing] .brand-image{width:92px;height:29px}.welcome{left:22px;right:22px}.welcome h1{max-width:230px}.title-image{max-height:118px}.dialog{padding:22px 18px}}
@media(max-height:480px){.art-end{grid-template-columns:1fr 1fr;gap:8px}.art-end>button{width:100%}.welcome{max-width:260px;bottom:16px}.welcome h1{max-width:190px;margin-bottom:8px}.title-image{max-height:76px}.dialog{padding:14px 22px;max-height:calc(100dvh - 20px)}.pause-heading{gap:0;margin-bottom:8px}.pause-heading img{width:112px;height:auto;max-height:44px}#restart-pause{margin-top:8px;width:46px;height:46px}.hold-hint{margin-top:5px}}
@media(prefers-reduced-motion:reduce){.loading-icon{animation:none}#game[data-phase=ready] #start:not(:disabled){animation:none!important}}

@media(max-height:480px){.sound-hint-image{width:min(225px,90%);margin-top:8px}}

/* Reuse the pause controls: a primary continue button and a quiet hold-to-restart icon. */
#start[data-continue=true]{--paper-ratio:840/196;background-image:url('/assets/ui/harbor/continue.webp')}
#new-game{width:48px;height:48px;margin:14px auto 0;background:transparent url('/assets/ui/harbor/restart-icon.webp') center/contain no-repeat;border:0;box-shadow:none}
#new-game:active{transform:scale(.94)}
.welcome .hold-hint{font-size:11px;line-height:1.4;font-weight:600;color:#55736b;margin:6px 0 0}
.welcome .saved-game{margin:0 0 10px;color:#426d63;font-size:12px;font-weight:500;letter-spacing:.02em;text-shadow:0 1px #fff9}
@media(max-height:480px){#new-game{width:44px;height:44px;margin-top:8px}.welcome .saved-game{margin-bottom:6px;font-size:11px}.welcome .hold-hint{font-size:10px;margin-top:4px}}