/* Small-screen menu layout: one bounded content scroller, actions outside it. */
#gameplay nav.bottom-nav>button#holdButton strong{color:#183f56!important;text-shadow:0 1px #bff3fb!important}
.reference-map .map-actions button,.reference-map button.map-back{border:2px solid #23465d!important;border-radius:14px!important;background:linear-gradient(#97e4eb,#54b7d7)!important;color:#183f56!important;box-shadow:inset 0 2px #e3ffff,0 4px #285e7d!important;text-shadow:none!important;font-weight:750!important}
.reference-map .map-actions button{display:flex;align-items:center;justify-content:center;gap:7px}
.reference-map .map-actions button img.harbour-icon{width:34px!important;height:34px!important;flex:0 0 34px!important}
.reference-map .adventure-link{position:static!important;inset:auto!important;transform:none!important;text-shadow:none!important}
@media(max-width:700px){
 #modal.mockup-window:not(.view-market):not(.view-story):not(.view-cosmetics){width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;margin:auto!important;overflow:hidden!important;border-radius:16px!important}
 #modal.mockup-window #modalContent{min-height:0;max-height:inherit;padding:0}
 #modal.mockup-window .flow-page{display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 16px);padding:0}
 #modal.mockup-window .window-header{flex:0 0 auto;padding:10px 14px!important;min-height:50px}
 #modal.mockup-window .window-header h1{font-size:21px!important;line-height:1.15;margin:0;overflow-wrap:anywhere}
 #modal.mockup-window .window-content{flex:1 1 auto;min-height:0;overflow:auto!important;overscroll-behavior:contain;padding:10px 12px!important}
 #modal.mockup-window .window-footer{position:static!important;flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;padding:9px 12px 13px!important;background:#fff;z-index:3}
 #modal.mockup-window .window-footer button{min-height:44px!important;font-size:14px!important;padding:7px 10px!important;white-space:normal!important;line-height:1.15!important;min-width:0!important}
 #modal.mockup-window .window-footer button img.harbour-icon{width:25px!important;height:25px!important;flex:0 0 25px!important}
 #modal.mockup-window .flow-tabs{display:flex;gap:4px;max-width:100%;overflow:auto;flex-shrink:0;margin-bottom:8px}
 #modal.mockup-window .flow-tabs button{padding:7px 9px!important;min-height:40px!important;font-size:14px!important;line-height:1.1}
 #modal.mockup-window .shop-rows,#modal.mockup-window .ency-grid,#modal.mockup-window .hold-grid{max-height:none!important;overflow:visible!important}
 #modal.mockup-window .shop-row{min-height:76px!important;padding:9px!important;gap:8px!important;grid-template-columns:42px minmax(0,1fr) auto!important}
 #modal.mockup-window .shop-row h2{font-size:17px!important;margin:0 0 4px!important}
 #modal.mockup-window .shop-row p{font-size:14px!important;line-height:1.25!important;margin:3px 0!important}
 #modal.mockup-window .shop-row button{min-width:55px!important;min-height:44px!important;padding:7px!important;font-size:14px!important}
 #modal.mockup-window .setting-row{padding:12px 0!important;gap:10px;flex-wrap:wrap}
 #modal.mockup-window .setting-row p{margin:4px 0;font-size:14px}
 #modal.mockup-window .setting-row button{min-height:44px!important;min-width:64px!important}
 #modal.view-settings .window-content{min-height:0!important}
 #modal.view-permit .permit-panel{padding:0!important}
 #modal.view-permit .permit-panel>.ui-icon{width:32px;height:32px}
 #modal.view-permit .permit-panel h2{font-size:21px;margin:6px 0}
 #modal.view-permit .permit-panel p{font-size:15px;margin:7px 0;line-height:1.25}
 #modal.view-permit .permit-panel dl{margin:8px 0}
 #modal.view-permit .permit-panel dl>div{padding:7px 0}
 #modal.view-shop .boat-selection{min-height:0!important;grid-template-columns:58px minmax(0,1fr)!important;gap:8px}
 #modal.view-shop .boat-thumbnails button{min-height:62px!important;padding:4px!important}
 #modal.view-shop .boat-thumbnails .flow-art{height:48px!important}
 #modal.view-shop .boat-showcase>.flow-art{height:clamp(90px,18dvh,145px)!important}
 #modal.view-shop .boat-showcase h2{font-size:21px;margin:5px 0}
 #modal.view-shop .boat-showcase p{font-size:14px;line-height:1.2;margin:5px 0}
 #modal.view-shop .boat-showcase dl{margin:7px 0;font-size:13px}
 #modal.view-shop .boat-showcase dl>div{margin:4px 0}
 /* The market uses the same content/footer boundaries; short lists take their natural height. */
 #modal.view-market .flow-page{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:calc(100vw - 20px)!important;min-width:0!important;max-height:calc(100dvh - 92px)!important;margin:auto!important;border-radius:18px!important}
 #modal.view-market{display:flex!important;align-items:flex-end;justify-content:center;inset:0!important;transform:none!important;width:100vw!important;height:100dvh!important;max-height:none!important;padding:0 0 8px!important;overflow:hidden!important}
 #modal.view-market #modalContent{width:100%;max-height:calc(100dvh - 92px);overflow:visible}
 #modal.view-market .window-content{padding:8px 10px 0!important}
 #modal.view-market .market-layout,#modal.view-market .market-ledger{min-height:0!important;padding:0!important}
 #modal.view-market .sale-rows{min-height:0!important;max-height:none!important;overflow:visible!important;padding:0!important}
 #modal.view-market .sale-row{min-height:68px!important;padding:8px 0!important;gap:5px!important;grid-template-columns:38px minmax(0,1fr) auto auto!important}
 #modal.view-market .sale-row .fish-art{width:38px!important;height:40px!important}
 #modal.view-market .sale-row b{font-size:15px!important;line-height:1.15}
 #modal.view-market .sale-row small{font-size:12px!important}
 #modal.view-market .market-sum{flex:0 0 auto;width:100%!important;padding:9px 0!important;gap:8px;font-size:15px}
 #modal.view-market .market-sum button{min-height:44px!important;padding:7px 12px!important;font-size:16px!important}
 #modal.view-market .window-footer{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px!important}
 #modal.view-market .window-footer button{padding:6px 4px!important;font-size:13px!important;gap:3px!important;flex-wrap:wrap}
 #modal.view-market .window-footer button img{display:none!important}
 #modal.view-market .market-speech{position:fixed!important;top:10px!important;bottom:auto!important;left:12px!important;right:12px!important;width:auto!important;max-width:none!important;padding:9px 14px!important;min-height:0!important;border-radius:16px!important;transform:none!important}
 #modal.view-market .market-speech strong{font-size:22px!important;line-height:1.1!important}
 #modal.view-market .market-speech span{font-size:14px!important;line-height:1.25!important;margin-top:4px!important}
 #modal.view-market .market-speech::before,#modal.view-market .market-speech::after{display:none!important}
 /* Map sections all belong to the page flow; no floating links when it scrolls. */
 #modal.reference-map-window .reference-map{display:grid;grid-template-rows:40px minmax(185px,1fr) auto auto;gap:12px;padding:10px 12px 16px;min-height:100dvh!important}
 .reference-map .map-back{position:static!important;justify-self:start;align-self:start;grid-row:1;min-height:40px;padding:7px 16px!important}
 .reference-map .map-location-layer{position:relative;grid-row:2;min-height:185px}
 .reference-map .location-node{min-width:0;width:max-content;max-width:205px;padding:6px 8px!important}
 .reference-map .location-0{top:0!important;left:0!important}
 .reference-map .location-1{top:34%!important;left:18%!important}
 .reference-map .location-2{top:68%!important;right:0!important;left:auto!important}
 .reference-map .location-node b{font-size:15px!important}
 .reference-map .location-thumb{width:32px;height:32px;flex:0 0 32px}
 .reference-map .map-progress{position:static!important;inset:auto!important;grid-row:3;width:100%!important;max-height:none!important;overflow:visible!important;padding:10px!important;gap:7px 9px;border-radius:16px}
 .reference-map .map-progress-heading h2{font-size:21px;margin:3px 0}
 .reference-map .map-progress section{padding:5px 0!important}
 .reference-map .map-progress section b{font-size:12px!important}
 .reference-map .map-progress section p{font-size:12px!important}
 .reference-map .map-progress .link-button{font-size:12px!important;min-height:32px!important;padding:5px 0!important}
 .reference-map .map-progress .adventure-link{position:static!important;inset:auto!important;grid-column:1/-1;justify-self:start;margin:0!important}
 .reference-map .map-actions{position:static!important;inset:auto!important;grid-row:4;width:100%;max-width:none!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px!important}
 .reference-map .map-actions button{min-height:48px!important;padding:6px 8px!important;font-size:14px!important;gap:6px!important}
 .reference-map .map-actions button img.harbour-icon{width:28px!important;height:28px!important;flex:0 0 28px!important}
}
/* Level badge, number and halo share one center; motion settles after the reveal. */
.level-celebration .level-medallion{display:grid!important;grid-template-rows:18px 1fr!important;align-content:center!important;justify-items:center!important;align-items:center!important;box-sizing:border-box!important;padding:27px 14px 23px!important;isolation:isolate;flex-shrink:0;animation:harbour-level-pop .75s cubic-bezier(.16,.9,.3,1.25)!important}
.level-celebration .level-medallion>span{position:static!important;margin:0!important;line-height:18px!important;letter-spacing:2px!important;z-index:1}
.level-celebration .level-medallion>strong{position:static!important;display:block!important;margin:0!important;font:700 78px/1 Georgia,serif!important;color:#73501e!important;text-shadow:0 2px #fff7dc!important;z-index:1}
.level-celebration .level-medallion::after{content:'';position:absolute;inset:-17px;border:2px solid #eec25b88;border-radius:50%;z-index:-1;animation:harbour-level-ring .95s ease-out both;pointer-events:none}
.level-confetti{position:absolute;inset:0;pointer-events:none;z-index:4}
.level-confetti i{position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:7px!important;height:12px!important;border-radius:2px!important;background:var(--spark)!important;animation:harbour-level-spark 1.15s var(--delay) ease-out both!important;transform-origin:center!important}
.level-juice .level-details{animation:harbour-level-details .5s .18s ease-out both}
.level-juice .level-unlock-cards article{animation:harbour-level-details .5s .32s ease-out both}
@keyframes harbour-level-pop{0%{opacity:0;transform:scale(.55) rotate(-9deg)}60%{opacity:1;transform:scale(1.1) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes harbour-level-ring{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}
@keyframes harbour-level-spark{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-35px) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * var(--distance))) rotate(100deg) scale(.5)}}
@keyframes harbour-level-details{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
 #modal.view-level .window-content{padding:20px 15px 13px!important}
 .level-celebration{gap:20px!important}
 .level-celebration .level-medallion{width:120px!important;height:120px!important;padding:16px 10px 13px!important;grid-template-rows:16px 1fr!important}
 .level-celebration .level-medallion>span{font-size:10px!important;line-height:16px!important}
 .level-celebration .level-medallion>strong{font-size:60px!important}
 .level-details h2{font-size:24px!important;margin:6px 0!important}
 .level-details .level-intro{font-size:15px!important;line-height:1.25!important;margin:7px 0!important}
 .level-unlock-cards article{padding:8px!important;gap:8px!important}
 .level-next{margin:10px 0!important}
}
@media(prefers-reduced-motion:reduce){.level-celebration .level-medallion,.level-juice .level-details,.level-juice .level-unlock-cards article{animation:none!important}.level-confetti,.level-medallion::after{display:none!important}}
@media(max-width:700px){
 #modal.view-market #modalContent{display:flex!important;justify-content:center!important;margin:0!important;padding:0!important;min-width:0!important}
 #modal.view-market .flow-page{flex:0 0 auto!important;margin:0!important;inset:auto!important}
 #modal.view-shop .boat-selection{align-items:start!important}
 #modal.view-shop .boat-detail{padding:8px!important;min-height:0!important}
 #modal.view-shop .boat-detail>header{gap:5px!important;flex-wrap:nowrap!important}
 #modal.view-shop .boat-detail>header>small{font-size:11px!important}
 #modal.view-shop .boat-detail h2{font-size:20px!important}
 #modal.view-shop .boat-thumbnails{gap:8px!important;align-self:start!important}
 #modal.view-shop .boat-thumbnails button{flex:0 0 72px!important;min-height:72px!important;max-height:72px!important}
 #modal.view-shop .boat-showcase{flex:none!important;min-height:0!important}
 #modal.view-shop .boat-detail #purchaseBoat{margin-top:6px!important;min-height:44px!important;align-self:stretch!important}
 .reference-map .map-location-layer{min-height:232px!important}
}
@media(max-width:700px) and (max-height:650px){
 #modal.view-shop .boat-showcase>.flow-art{height:80px!important}
 #modal.view-shop .boat-showcase p{font-size:13px!important;line-height:1.15!important}
 #modal.view-shop .boat-showcase dl{font-size:12px!important;gap:0!important}
 #modal.view-shop .boat-showcase dl>div{margin:2px 0!important}
 #modal.view-shop .boat-detail dt{min-width:76px!important}
 #modal.view-shop .boat-detail dt .flow-art{width:17px!important;height:17px!important}
 #modal.view-shop .boat-detail progress{width:54px!important}
}
@media(max-width:700px){
 #modal.view-shop .shop-row{grid-template-columns:40px minmax(0,1fr) 76px!important;grid-template-areas:"art detail price" "art detail actions";align-items:center!important;gap:7px!important}
 #modal.view-shop .shop-row>.flow-art{grid-area:art;width:40px!important;height:46px!important}
 #modal.view-shop .shop-row>div:nth-child(2){grid-area:detail;gap:3px!important}
 #modal.view-shop .shop-row>.shop-price{grid-area:price;min-width:0!important;text-align:center}
 #modal.view-shop .shop-row>.shop-price .ui-money{font-size:14px!important;white-space:nowrap;gap:3px}
 #modal.view-shop .shop-row>.shop-price .ui-icon{width:18px!important;height:18px!important}
 #modal.view-shop .shop-row>button,#modal.view-shop .shop-row>.shop-row-actions,#modal.view-shop .shop-row>.net-shop-actions{grid-area:actions;min-width:0!important;max-width:100%!important;display:flex;flex-direction:column;gap:6px!important}
 #modal.view-shop .shop-row button{white-space:normal!important;overflow-wrap:anywhere;line-height:1.15!important;max-width:100%!important}
 #modal.view-shop .shop-row small{font-size:12px!important;line-height:1.25!important}
}
@media(max-width:700px){
 #modal.mockup-window .flow-tabs{flex-wrap:nowrap!important}
 #modal.view-story #modalContent{position:absolute!important;left:12px!important;right:12px!important;bottom:12px!important;top:78px!important;width:auto!important;height:auto!important;max-height:none!important;display:flex!important;flex-direction:column!important;padding:0!important}
 #modal.view-story .flow-page{display:flex!important;flex-direction:column!important;height:100%!important;max-height:100%!important;min-height:0!important}
 #modal.view-story .window-content{max-height:none!important;min-height:0!important;width:100%!important;margin:0!important;flex:1 1 auto!important;padding:6px 12px!important;overflow:auto!important}
 #modal.view-story .window-header,#modal.view-story .window-footer{width:100%!important;margin:0!important;flex:0 0 auto!important}
 #modal.view-story .dialogue-card{padding:12px!important;margin:12px 4px 16px!important}
 #modal.view-story .dialogue-card h2{font-size:21px!important;line-height:1.15!important;margin:6px 0 9px!important}
 #modal.view-story .dialogue-card p{font-size:15px!important;line-height:1.35!important}
 #modal.view-story .story-detail>h3{font-size:16px!important;margin:7px 0 4px!important}
 #modal.view-story .story-detail>p{font-size:14px!important;line-height:1.25!important;margin:0 0 7px!important}
 #modal.view-story #questAction{min-height:44px!important;margin-top:7px!important}
 #modal.view-trophies .trophy-plaque{min-height:85px!important;padding:7px 10px!important;grid-template-columns:85px 1fr!important}
 #modal.view-trophies .trophy-plaque .fish-art{height:62px!important;max-height:62px!important}
 #modal.view-trophies .trophy-plaque small{font-size:12px!important}
}
@media(max-width:700px) and (max-height:650px){#modal.view-shop .boat-showcase>.flow-art{height:64px!important}}

.reference-map .map-actions{gap:12px!important}
.reference-map .map-actions button{width:64px!important;height:60px!important;min-width:64px!important;padding:6px!important}
.reference-map .map-actions button img.harbour-icon{width:44px!important;height:44px!important;flex-basis:44px!important}
.reference-map .map-back{width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;display:grid;place-items:center;font:700 32px/1 system-ui!important}
@media(max-width:700px){.reference-map .map-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}.reference-map .map-actions button{width:100%!important;min-width:0!important;height:58px!important}.reference-map .map-actions button img.harbour-icon{width:40px!important;height:40px!important;flex-basis:40px!important}}
.level-celebration .level-medallion>strong{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;line-height:1!important}
.level-celebration .level-medallion>span{position:absolute!important;top:12%!important;left:0!important;right:0!important;width:100%!important;text-align:center!important}
#modal.view-level .window-footer,#modal.view-supplies .window-footer{display:none!important}