/* Shared navigation and menu layout. Gameplay controls retain their own styles. */
:root{--menu-ink:#f5edd2;--menu-muted:#a5bec5;--menu-mint:#b4ecd3;--menu-line:#294858;--menu-bottom:88px}
.menu-navigation{position:fixed;z-index:12;left:50%;bottom:0;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,1040px);padding:6px max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));height:calc(78px + env(safe-area-inset-bottom));background:linear-gradient(#0d2035f7,#071529);border-top:1px solid #43606b80;box-shadow:0 -9px 25px #030b1b55;gap:4px}
.menu-navigation button{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:58px;border:0;border-radius:0;background:none;color:#839eac;font:750 11px/1.2 var(--ui-font,"Segoe UI",sans-serif);box-shadow:none;letter-spacing:.3px;padding:2px 5px;transform:none}
.menu-navigation button:active{transform:none;background:#1d3f4b77}.menu-navigation button[aria-current="page"]{color:#d4f9e3;background:radial-gradient(ellipse at center,#3f8a7b33,transparent 75%)}
.menu-navigation button[aria-current="page"]:before{content:'';position:absolute;top:-7px;width:25px;height:3px;background:#afe9cf;box-shadow:0 2px #2d5d62}
.menu-navigation button>svg{width:26px;height:28px;fill:currentColor;stroke:none}.menu-navigation canvas{display:block;image-rendering:pixelated;object-fit:contain;width:38px;height:32px;pointer-events:none}
.menu-navigation #navCrewArt{width:44px;height:42px;margin:-5px 0}.menu-navigation #navProfileArt{height:34px;display:flex;align-items:center;justify-content:center}.menu-navigation .badge-enamel{width:29px;height:34px;filter:none;pointer-events:none}
.top-actions .wallet .gem-icon{color:#edca7f;text-shadow:none}
#modalLayer{z-index:30}
body:has(#stage:not([data-view="game"])) .topbar{height:calc(66px + env(safe-area-inset-top));padding:calc(9px + env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 7px max(22px,env(safe-area-inset-left));background:linear-gradient(#071426f5,#07142600)}
body:has(#stage:not([data-view="game"])) .brand{font-size:10px;letter-spacing:1px;min-height:44px}
body:has(#stage:not([data-view="game"])) .top-actions{gap:7px}
body:has(#stage:not([data-view="game"])) .top-actions button{min-width:44px;min-height:44px;border:0;box-shadow:none;background:transparent;border-radius:0}
body:has(#stage:not([data-view="game"])) .top-actions .wallet{padding:6px 9px;font-size:15px;background:#132d3a88;color:#f3e9ca}
body:has(#stage:not([data-view="game"])) .wallet .gem-icon{color:#edca7f;text-shadow:none;font-size:16px}
body:has(#stage:not([data-view="game"])) .profile-button{display:none!important}
body:has(#stage:not([data-view="game"])) .page-footer{bottom:calc(82px + env(safe-area-inset-bottom));left:24px;right:24px;opacity:.55;font-size:6px}
body:has(#stage:not([data-view="game"])) .page-footer #offlineStatus{font-size:6px}
body:has(#stage:not([data-view="home"]):not([data-view="game"])) .page-footer{display:none}

/* The home screen gives the next level and Play the main visual emphasis. */
#homeScreen{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(100px,1fr) auto;align-items:center;justify-items:center;gap:0;padding:calc(78px + env(safe-area-inset-top)) 26px calc(108px + env(safe-area-inset-bottom));background:linear-gradient(#04102605,#04102600 45%,#04142699 90%);overflow-y:auto}
#homeScreen .hero-heading{grid-column:1;grid-row:1;order:initial;width:min(350px,86vw);max-width:none;align-self:start;margin:0;position:static;transform:none}
#homeScreen .hero-heading>.eyebrow{font:700 9px/1.5 var(--ui-font);letter-spacing:2.5px;color:#b1c2bc;margin-bottom:9px}
#homeScreen .hero-character{grid-column:1;grid-row:2;order:initial;position:relative;top:auto;left:auto;transform:none;align-self:center;justify-self:center;width:min(320px,76vw);height:min(280px,32dvh);min-height:100px;margin:0;flex:none}
#homeScreen .hero-character canvas{position:static;width:100%;height:100%;object-fit:contain;animation:none;transform:none}
#homeScreen .home-bottom{grid-column:1;grid-row:3;order:initial;position:static;display:block;width:100%;max-width:380px;align-self:end;margin:8px 0 0;transform:none}
#homeScreen .home-mission{display:flex;flex-direction:column;align-items:center;gap:5px;margin-bottom:18px;text-align:center}
#homeMissionMeta{font:750 10px/1.4 var(--ui-font);letter-spacing:1.5px;color:#8fc3c4}
#homeMissionTitle{font:850 21px/1.2 var(--ui-font);letter-spacing:0;color:#f3ead2;max-width:100%;overflow-wrap:anywhere}
#homeScreen .home-buttons{display:block;margin:0;width:100%}
#homeScreen .home-buttons>.play-button{display:flex;justify-content:center;align-items:center;gap:13px;width:100%;min-height:62px;max-width:none;font:900 18px/1.2 var(--ui-font);letter-spacing:1.1px;background:#b6eed5;color:#123636;border:0;border-bottom:5px solid #4c9b8e;box-shadow:0 5px #041322;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);padding:13px 16px;border-radius:0}
#homeScreen .play-button .play-triangle{font-size:17px}.home-screen #playLabel small{display:none}
#homeScreen .home-buttons>.arcade-links,#homeScreen .adventure-progress{display:none}
#homeScreen .home-foot{display:flex;justify-content:center;align-items:center;gap:8px 22px;margin-top:12px}
#homeScreen .home-foot .admont-entry,#homeScreen .home-foot .christmas-entry{display:none}
#homeScreen .home-foot .story-entry,#homeScreen .home-foot #dailyButton{background:none;border:0;box-shadow:none;min-height:44px;margin:0;padding:6px 2px;color:#afc4c6;font:650 11px/1.3 var(--ui-font);letter-spacing:0;text-shadow:none;white-space:nowrap}
#homeScreen .home-foot #dailyButton b{color:#f1cf89}#homeScreen .home-foot #dailyButton:disabled{background:none;color:#708f96}

/* Page headings, spacing and touch targets match across the three destinations. */
#worldScreen,#shopScreen,#profileScreen{padding:calc(85px + env(safe-area-inset-top)) max(23px,calc((100vw - 1040px)/2)) calc(96px + env(safe-area-inset-bottom));background:linear-gradient(155deg,#081628f7,#0c2036f5);color:var(--menu-ink)}
#worldScreen>.screen-heading,#shopScreen>.screen-heading,#profileScreen>.screen-heading{margin:0 0 15px;min-height:56px;flex-shrink:0}
#worldScreen .screen-heading .eyebrow,#shopScreen .screen-heading .eyebrow,#profileScreen .screen-heading .eyebrow{font:700 9px/1.5 var(--ui-font);letter-spacing:1.8px;color:#8cbdba}
#worldScreen .screen-heading h2,#shopScreen .screen-heading h2,#profileScreen .screen-heading h2{font:900 30px/1.1 Impact,"Arial Black",sans-serif;letter-spacing:1px;text-transform:uppercase;text-shadow:0 2px #030f22;margin:6px 0 0}
#worldScreen .screen-heading h2 em,#shopScreen .screen-heading h2 em,#profileScreen .screen-heading h2 em{color:#b4ecd3}
#worldScreen .screen-heading .close-button,#shopScreen .screen-heading .close-button,#profileScreen .screen-heading .close-button{display:none}
#worldScreen .world-map-scroll,#shopScreen #shopScroll,#profileScreen .profile-scroll{padding-bottom:28px;scroll-padding-top:12px;scrollbar-width:thin;scrollbar-color:#436b7488 transparent;min-height:0;overscroll-behavior:contain}
#worldScreen .world-categories{margin-bottom:13px;gap:26px;border-color:#294653}
#worldScreen .world-categories button{font-size:14px;min-height:44px;padding-bottom:10px}
#worldScreen .world-card,#worldScreen:has(#cityDistricts:not([hidden])) .world-card{flex-basis:152px;height:86px;border-radius:3px;border:1px solid #385565;box-shadow:0 3px #031122}
#worldScreen .world-card.selected{border-color:#a5e3c9;box-shadow:0 3px #376f70}
#worldScreen .world-card strong{font-size:12px}#worldScreen .world-card small{font-size:8px}
#worldScreen .map-world-intro{grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding:8px 0 12px}
#worldScreen #worldHero{width:48px;height:58px}#worldScreen #levelWorldName{font-size:19px}
#worldScreen #levelWorldProgress{font-size:9px}#worldScreen #worldHeroName{font-size:10px}
#worldScreen .map-continue{min-width:85px;min-height:48px;border:0;border-bottom:4px solid #4d9384;border-radius:3px;box-shadow:0 3px #031326;font-size:14px;padding:8px 10px}
#worldScreen .map-continue b{font-size:9px}
#worldScreen .map-chapters{padding:11px 0 8px;border-color:#294653;grid-template-columns:44px minmax(0,1fr) 44px}
#worldScreen .map-chapters>button{min-height:44px;height:44px;border:1px solid #305364;border-radius:3px;background:#122e43;box-shadow:none;font-size:27px}
#worldScreen .map-chapters small{font-size:8px;letter-spacing:.5px}#worldScreen .map-chapters strong{font-size:18px}
#worldScreen .city-district-info{font-size:11px;color:#a9c1c6;padding:3px 10px 13px}

/* Compact crew staging makes space for the actual collection and its search. */
#shopScreen .shop-tabs{border-radius:0;gap:9px;background:transparent;border-bottom:1px solid #2f4b5a;min-height:48px;padding:0;margin-bottom:14px}
#shopScreen .shop-tabs button{font-size:13px;min-height:47px;border:0;border-bottom:3px solid transparent;border-radius:0;padding:8px 4px;background:none;color:#93adb9}
#shopScreen .shop-tabs button.active{background:none;border-color:#b4ecd3;color:#d7f4e3}
#shopScreen .shop-toolbar{display:flex;align-items:stretch;flex-direction:column;gap:8px;margin:0 0 8px;flex-shrink:0}
.skin-search{position:relative;display:block;width:100%}.skin-search input{display:block;width:100%;min-height:45px;font:15px var(--ui-font);color:#e9efdc;background:#112b40;border:1px solid #32586b;border-radius:3px;padding:10px 38px 10px 13px;outline-offset:2px}
.skin-search input::placeholder{color:#8eacb6}.skin-search input:focus{outline:2px solid #a9e8ce;border-color:#a9e8ce}
.skin-search>span:last-child{position:absolute;right:13px;top:8px;font:26px/1 var(--ui-font);color:#9cc9c3;pointer-events:none}
.shop-filter-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
#shopScreen .segmented{gap:4px}#shopScreen .segmented button{min-height:42px;padding:8px 11px;font-size:11px;background:none;border-radius:3px;color:#96b0bd}
#shopScreen .segmented button.active{background:#274d50;color:#d7f2d9}
#shopScreen #ownedCount{font-size:10px;color:#92b2b7;white-space:nowrap}
#shopScreen .crew-stage{min-height:112px;max-height:125px;display:flex;justify-content:start;align-items:center;gap:16px;background:linear-gradient(90deg,#23495526,transparent);margin:0 0 12px;padding:0 8px;border:0;border-bottom:1px solid #2f4b5a}
#shopScreen #crewHero{width:122px;height:114px;flex:0 0 122px;object-fit:contain}#shopScreen #crewHeroName{font-size:25px;margin:4px 0}#shopScreen #crewStageLabel{font-size:8px;letter-spacing:1.2px;color:#8eb8b9}#shopScreen #crewHeroAbility{font-size:11px;margin:5px 0;color:#acc4c8}
.skin-result-count{font:600 10px/1.4 var(--ui-font);letter-spacing:.5px;color:#8fabaf;margin:9px 0 5px}
#shopScreen .skin-card{height:181px;grid-template-rows:124px 28px 22px;padding:1px 3px 8px;background:radial-gradient(ellipse at 50% 39%,#234f592f,transparent 70%);border:0;border-bottom:1px solid #284554;box-shadow:none}
#shopScreen .skin-card canvas{width:146px;max-width:100%;height:124px}#shopScreen .skin-card strong{font-size:13px}#shopScreen .skin-card small{font-size:11px;color:#dfc487}
#shopScreen .skin-card.equipped{background:radial-gradient(ellipse at center,#3e8c7533,transparent 75%);border-bottom:2px solid #adddc3;outline:none}#shopScreen .skin-card.equipped small{color:#abd7c7;font-size:9px;letter-spacing:.7px}
.skin-empty{padding:30px 8px;text-align:center;color:#b7cbd0;font:13px var(--ui-font)}.skin-empty button{min-height:44px;padding:10px 18px;border:1px solid #4f8183;border-radius:3px;background:#21434b;color:#d9eee0;font-weight:700}

/* Pause focuses on resuming. Sound and language remain one tap away. */
#modalCard:has(.pause-sheet){display:block;width:min(520px,100%);border:2px solid #4f7b7d;border-top:4px solid #b0e7ce;background:#0a1f33f7;box-shadow:0 9px 0 #030d1c,0 24px 55px #01061599;border-radius:4px;padding:23px;text-align:left}
.pause-sheet{display:flex;flex-direction:column;gap:17px}.pause-heading{display:flex;align-items:center;gap:8px;min-width:0}.pause-heading>canvas{width:100px;height:100px;flex:0 0 100px;image-rendering:pixelated;object-fit:contain}.pause-heading>div{min-width:0}
#modalCard .pause-heading .eyebrow{font-size:8px;letter-spacing:1px;color:#92c1be}#modalCard .pause-heading h2{font:900 38px/1.1 Impact,"Arial Black",sans-serif;letter-spacing:1px;color:#f7efd4;margin:5px 0}#modalCard .pause-heading p{font-size:12px;line-height:1.4;color:#a9c2c8;margin:4px 0;overflow-wrap:anywhere}
.pause-actions{display:flex;flex-direction:column;gap:12px}.pause-actions button{min-height:48px;padding:10px 12px;border:1px solid #355e70;border-radius:3px;background:#142f43;color:#dbe8da;font:750 12px var(--ui-font);box-shadow:none}
.pause-actions>.primary{min-height:55px;background:#b3ebd0;border:0;border-bottom:4px solid #4a9986;color:#173c3b;font:900 17px var(--ui-font);letter-spacing:.5px;box-shadow:0 3px #031326}
.pause-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pause-options{border-top:1px solid #30515e;border-bottom:1px solid #30515e}.pause-options>summary{display:flex;align-items:center;justify-content:space-between;min-height:45px;cursor:pointer;list-style:none;color:#c4dbd8;font:700 12px var(--ui-font);padding:7px 2px}.pause-options>summary::-webkit-details-marker{display:none}.pause-options summary>span{font-size:20px;color:#a4d1c8}.pause-options[open] summary>span{transform:rotate(45deg)}
#modalCard .pause-options .audio-settings{margin:0 0 14px;padding:5px 0 0;display:flex;flex-direction:column;gap:14px;border:0;background:none}#modalCard .pause-options .audio-settings>label{font-size:12px;color:#c1d6d8}.pause-options input[type=range]{accent-color:#b3e8ce}.pause-options .pause-toggles{display:flex;gap:10px;margin:0}.pause-options .pause-toggles button{min-height:44px;padding:8px 13px;background:#18394b;border:1px solid #426c76;border-radius:3px;color:#d8e6dc;font-size:12px}
.pause-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.pause-links button{min-height:40px;padding:5px 2px;border:0;background:none;color:#9ebdc1;font:650 10px var(--ui-font);box-shadow:none;white-space:nowrap}
@media(max-width:650px){body:has(#stage:not([data-view="game"])) .brand>span{display:none}#shopScreen .shop-grid{gap:12px 11px}.pause-heading>canvas{width:80px;height:96px;flex-basis:80px}#modalCard:has(.pause-sheet){padding:20px}}
@media(max-height:700px) and (orientation:portrait){
 #homeScreen{padding-top:calc(70px + env(safe-area-inset-top));padding-bottom:calc(100px + env(safe-area-inset-bottom))}
 #homeScreen .hero-heading{width:min(260px,76vw)}#homeScreen .hero-character{height:170px;min-height:90px;width:230px}#homeScreen .home-bottom{margin-top:0}
 #homeScreen .home-mission{margin-bottom:12px;gap:4px}#homeMissionTitle{font-size:18px}#homeMissionMeta{font-size:9px}#homeScreen .home-buttons>.play-button{min-height:54px;font-size:16px}#homeScreen .home-foot{margin-top:7px;gap:18px}#homeScreen .home-foot button{font-size:10px}
 #worldScreen,#shopScreen,#profileScreen{padding-top:calc(75px + env(safe-area-inset-top));padding-bottom:calc(90px + env(safe-area-inset-bottom))}#worldScreen>.screen-heading,#shopScreen>.screen-heading,#profileScreen>.screen-heading{min-height:49px;margin-bottom:9px}
 #worldScreen .screen-heading .eyebrow{display:block}#worldScreen .screen-heading h2,#shopScreen .screen-heading h2,#profileScreen .screen-heading h2{font-size:27px}
 #shopScreen .shop-tabs{margin-bottom:8px}#shopScreen .shop-toolbar{gap:4px;margin-bottom:4px}#shopScreen .crew-stage{min-height:95px;max-height:95px}#shopScreen #crewHero{height:92px;width:100px;flex-basis:100px}
}
@media(orientation:landscape) and (max-height:600px){
 :root{--menu-bottom:74px}.menu-navigation{height:calc(64px + env(safe-area-inset-bottom));padding-top:2px;padding-bottom:max(4px,env(safe-area-inset-bottom));width:min(720px,100%)}.menu-navigation button{min-height:54px;font-size:10px;gap:1px}.menu-navigation button>svg{height:23px;width:23px}.menu-navigation canvas{height:27px;width:34px}.menu-navigation #navCrewArt{height:36px;width:40px;margin:-3px 0}.menu-navigation #navProfileArt{height:29px}.menu-navigation .badge-enamel{height:29px;width:25px}
 body:has(#stage:not([data-view="game"])) .topbar{height:51px;padding-top:4px;padding-bottom:3px}body:has(#stage:not([data-view="game"])) .page-footer{bottom:calc(68px + env(safe-area-inset-bottom));font-size:5px;opacity:.4}
 #homeScreen{display:grid;grid-template-columns:minmax(200px,1fr) minmax(250px,1fr);grid-template-rows:auto 1fr;column-gap:36px;padding:55px max(40px,calc((100vw - 880px)/2)) calc(82px + env(safe-area-inset-bottom));overflow-y:auto}
 #homeScreen .hero-heading{grid-column:1;grid-row:1;width:230px;max-width:100%;align-self:center}#homeScreen .hero-heading>.eyebrow{font-size:7px;margin-bottom:5px}
 #homeScreen .hero-character{grid-column:1;grid-row:2;height:118px;min-height:80px;width:210px;margin:0;align-self:center}
 #homeScreen .home-bottom{grid-column:2;grid-row:1 / 3;align-self:center;justify-self:center;max-width:360px;margin:0}
 #homeScreen .home-mission{align-items:start;text-align:left;margin-bottom:18px}#homeMissionTitle{font-size:23px}#homeMissionMeta{font-size:9px}#homeScreen .home-buttons>.play-button{min-height:54px;font-size:17px}#homeScreen .home-foot{justify-content:start;gap:17px;margin-top:12px}#homeScreen .home-foot button{font-size:10px}
 #worldScreen,#shopScreen,#profileScreen{padding-top:58px;padding-bottom:calc(78px + env(safe-area-inset-bottom));padding-left:30px;padding-right:30px}
 #worldScreen>.screen-heading,#shopScreen>.screen-heading,#profileScreen>.screen-heading{min-height:38px;margin-bottom:8px}#worldScreen .screen-heading .eyebrow,#shopScreen .screen-heading .eyebrow,#profileScreen .screen-heading .eyebrow{display:none}#worldScreen .screen-heading h2,#shopScreen .screen-heading h2,#profileScreen .screen-heading h2{font-size:27px;margin-top:0}
 #worldScreen .world-map-scroll{grid-template-columns:156px minmax(0,1fr);gap:0 21px;padding-bottom:18px}#worldScreen .world-card,#worldScreen:has(#cityDistricts:not([hidden])) .world-card{flex-basis:77px;height:77px}#worldScreen .map-world-intro{padding-top:0;grid-template-columns:42px minmax(0,1fr) auto;gap:8px}#worldScreen #worldHero{width:42px;height:48px}#worldScreen #levelWorldName{font-size:18px}#worldScreen .map-chapters{padding:8px 0}#worldScreen .city-district-info{font-size:10px;padding-bottom:8px}
 #shopScreen .shop-tabs{min-height:42px;margin-bottom:8px;position:absolute;top:54px;right:30px;width:min(400px,55vw)}#shopScreen .shop-tabs button{min-height:40px;font-size:12px}
 #shopScreen .shop-toolbar{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;margin-bottom:4px}.skin-search input{min-height:42px;font-size:14px}.skin-search>span:last-child{top:7px}.shop-filter-row{justify-content:end}#shopScreen .crew-stage,#shopScreen .skin-result-count{display:none}#shopScreen .skin-card{height:155px;grid-template-rows:104px 24px 18px}#shopScreen .skin-card canvas{height:104px}
 #modalCard:has(.pause-sheet){width:min(710px,100%);padding:20px 24px}.pause-sheet{display:grid;grid-template-columns:240px minmax(0,1fr);gap:12px 24px}.pause-heading{grid-column:1;grid-row:1;gap:4px}.pause-heading>canvas{width:82px;height:110px;flex-basis:82px}#modalCard .pause-heading h2{font-size:33px}.pause-actions{grid-column:2;grid-row:1}.pause-options{grid-column:1 / 3;grid-row:2}.pause-links{grid-column:1 / 3;grid-row:3}.pause-options>summary{min-height:38px}.pause-links button{min-height:32px}.pause-options .audio-settings{max-width:500px;width:100%;margin-left:auto!important;margin-right:auto!important}
}
@media(max-width:650px) and (max-height:550px) and (orientation:portrait){body:has(#skinSearch:focus) .menu-navigation{display:none}body:has(#skinSearch:focus) #shopScreen{padding-bottom:20px}body:has(#skinSearch:focus) #shopScreen .crew-stage{display:none}}

/* A readable, connected harbour journey, painted behind real HTML buttons. */
#worldScreen #levelGrid.harbour-map{display:block;position:relative;aspect-ratio:720/2200;width:100%;max-width:620px;margin:5px auto 20px;padding:0;background:#0c253b;border:1px solid #345363;border-radius:4px;overflow:hidden}
.harbour-map-art{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
#worldScreen .harbour-stop{position:absolute;transform:translate(-50%,-27%);display:flex;flex-direction:column;align-items:center;width:45%;height:158px;min-height:158px;padding:0 3px 7px;background:none;border:0;border-radius:0;box-shadow:none;color:#f5edd2;gap:5px;isolation:isolate}
#worldScreen .harbour-stop:hover,#worldScreen .harbour-stop:active{background:#b5ead413;transform:translate(-50%,-27%)}
#worldScreen .harbour-stop:focus-visible{outline:3px solid #b6ecd0;outline-offset:1px;border-radius:4px}
.harbour-stop-space{height:36px;width:100%;pointer-events:none}
.harbour-stop-number{position:relative;display:grid;place-items:center;min-width:40px;height:36px;background:#233e4b;border:2px solid #9cb4ad;box-shadow:0 3px #061728;font:850 19px/1 var(--ui-font);color:#f4ecd3;border-radius:4px}
.harbour-stop strong{font:800 13px/1.3 var(--ui-font);max-width:100%;padding:3px 5px;background:#0a1d30eb;text-shadow:0 2px #061426;overflow-wrap:anywhere;border-radius:3px}
.harbour-stop-stars{font:800 9px/1.3 var(--ui-font);letter-spacing:1px;color:#b2c9c7;padding:2px 5px;background:#0b2032e6;border-radius:3px}
.harbour-stop-stars i{font-style:normal;font-size:15px;color:#526e7d;letter-spacing:3px}.harbour-stop-stars i.won{color:#efcc83}
#worldScreen .harbour-stop.current .harbour-stop-number{background:#b9ecd2;border-color:#e4f7dc;color:#153f3c;box-shadow:0 0 0 4px #508d7b66,0 4px #07182c}.harbour-stop.current .harbour-stop-stars{color:#c1f5d6}
#worldScreen .harbour-stop.completed .harbour-stop-number{background:#326857;border-color:#9acbad}
#worldScreen .harbour-stop:disabled{opacity:1;cursor:default}.harbour-stop:disabled strong{color:#b0c1c5}.harbour-stop:disabled .harbour-stop-number{background:#102737;border-color:#536c78}
#worldScreen .harbour-stop .map-lock{position:relative;top:auto;left:auto;display:block;margin-top:4px;width:12px;height:11px}
#worldScreen .harbour-stop .map-lock:before{left:2px;width:8px}

/* Collection cards lead directly into a shared animation and equipment stage. */
#shopScreen[data-panel="skins"] .crew-stage{display:none}
#shopScreen .skin-result-count{font-size:12px;margin:9px 0 5px;color:#a5c1c5}
#modalCard:has(.character-sheet),#modalCard:has(.victory-sheet){display:block;width:min(510px,100%);padding:22px;border:2px solid #426774;border-top:4px solid #b4ecd3;background:#0b2135;box-shadow:0 9px #020e1c,0 24px 70px #02091899;border-radius:4px;text-align:left}
.character-sheet{display:flex;flex-direction:column;gap:15px}.character-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#modalCard .character-heading .eyebrow{font-size:9px;letter-spacing:1.5px;color:#98c7c2}
#modalCard .character-heading h2{font:900 32px/1.1 Impact,"Arial Black",sans-serif;letter-spacing:1px;color:#fff1cf;margin:7px 0 0;overflow-wrap:anywhere}
.character-close{min-width:44px;min-height:44px;background:#18394c;color:#c9e5d6;border:1px solid #476e79;border-radius:3px;font-size:28px;box-shadow:none}
.character-stage{min-width:0}.character-stage>canvas{display:block;width:100%;height:auto;max-height:235px;object-fit:contain;image-rendering:pixelated;background:#0b2439;border:1px solid #2b4d60;border-bottom:0}
.character-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #355a69;background:#102d40}
.character-modes button{min-height:46px;padding:9px 3px;border:0;border-bottom:3px solid transparent;border-radius:0;background:none;color:#b1c9cb;font:750 12px var(--ui-font);box-shadow:none}
.character-modes button[aria-pressed="true"]{color:#ddf7df;border-color:#b4ecd3;background:#2b5055}
.character-ability{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px 12px;align-items:baseline}.character-ability>span{font:750 9px var(--ui-font);letter-spacing:1px;color:#8cb9bc}.character-ability>strong{font:750 14px/1.4 var(--ui-font);color:#e6edda}
.character-fit{border-top:1px solid #345363;border-bottom:1px solid #345363;margin-top:14px}.character-fit summary{min-height:44px;padding:13px 2px;font:750 12px/1.4 var(--ui-font);color:#bbd8d3;cursor:pointer}
.character-fit>div{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 13px}.character-fit>div>span{padding:7px 9px;border:1px solid #456c6b;background:#173d46;font:650 11px/1.4 var(--ui-font);color:#c4ebd1;border-radius:3px}.character-fit .does-not-fit{border-color:#344c5b;background:#132e40;color:#9db1b9}.character-fit small{display:block;font-size:9px;color:#8da8b3}
#modalCard .character-price{display:flex;align-items:center;justify-content:space-between;gap:12px;font:750 15px/1.5 var(--ui-font);color:#efce8b;margin:12px 0}.character-price>small{font-size:11px;color:#c7b99b}
.character-info .modal-buttons{margin-top:10px!important}.character-info .modal-buttons button,.victory-actions .modal-buttons button{min-height:47px;border:1px solid #3b5f6d;border-radius:3px;background:#17384b;color:#c3dcda;font:750 13px var(--ui-font);padding:10px 12px;box-shadow:none}
.character-info .modal-buttons .primary,.victory-actions .modal-buttons .primary{background:#b8ecd2;border:0;border-bottom:4px solid #519789;color:#173e3a;font:900 16px var(--ui-font);min-height:55px;box-shadow:0 3px #06182b}
#modalCard .character-info .modal-buttons .primary:disabled{background:#294b53;border-color:#1e3544;color:#b5c8c8;opacity:1;box-shadow:none}

/* Rewards reveal visually; the game has already saved every earned item. */
.victory-sheet{display:flex;flex-direction:column;gap:14px}.victory-heading{text-align:center}#modalCard .victory-heading>.eyebrow{color:#97c2bf;font-size:9px;letter-spacing:1.6px}#modalCard .victory-heading h2{font:900 40px/1.15 Impact,"Arial Black",sans-serif;color:#f7eed2;letter-spacing:1px;margin:9px 0 0}
#modalCard .victory-sheet .result-stars{display:flex;align-items:center;justify-content:center;gap:13px;margin:8px 0 4px;min-height:65px}
.victory-sheet .result-stars>span{display:block;color:#345267;font-size:48px;line-height:1;text-shadow:0 4px #041629;animation:reward-star .42s both;animation-delay:var(--star-delay)}.victory-sheet .result-stars>span:nth-child(2){font-size:62px}.victory-sheet .result-stars>span.won{color:#f1cc7f;text-shadow:0 4px #8a6337,0 8px #051629}
.victory-best{font:750 10px/1.5 var(--ui-font);letter-spacing:1px;color:#b5ecd1}.victory-sheet .challenge-results{margin:5px 0 0;border-top:1px solid #365565;padding-top:7px}.victory-sheet .challenge-results>div{display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:32px;border:0;font:11px var(--ui-font);color:#8da8b5}.victory-sheet .challenge-results>div.won{color:#d8e7cd}.victory-sheet .challenge-results b{font-size:12px}.victory-sheet .challenge-results span{font-size:11px;white-space:nowrap}
.victory-loot{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid #365565;border-bottom:1px solid #365565;padding:12px 0;margin-top:10px}.victory-loot>div{display:flex;flex-direction:column;gap:6px;align-items:center}.victory-loot small{font:750 9px/1.3 var(--ui-font);color:#97b9bd;letter-spacing:1px}.victory-loot strong{font:900 26px/1.2 var(--ui-font);color:#f2e8cc;font-variant-numeric:tabular-nums}.victory-loot i{font-style:normal;font-size:18px;color:#efca80}.victory-loot>div:last-child strong{color:#b9ecd2}
#modalCard .victory-sheet .story-result{padding:0;margin:11px 0 0;background:none;border:0;text-align:center}#modalCard .victory-sheet .story-result p{font:12px/1.55 var(--ui-font);color:#afc6c9;margin:0}.victory-sheet .new-badges{margin:0;padding:10px 0 0;gap:8px;border-top:1px solid #345363}.victory-sheet .new-badges>small{text-align:center}.victory-sheet .new-badges>span{animation:reward-badge .5s both;animation-delay:var(--badge-delay);font:750 12px var(--ui-font)}.victory-sheet .new-badges .badge-enamel{width:47px;height:55px}
.victory-actions .modal-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0}.victory-actions .modal-buttons>.primary{grid-column:1/-1}
@keyframes reward-star{0%{opacity:0;transform:translateY(10px) scale(.4)}65%{opacity:1;transform:translateY(-3px) scale(1.13)}100%{opacity:1;transform:none}}
@keyframes reward-badge{from{opacity:0;transform:translateY(12px) scale(.85)}to{opacity:1;transform:none}}

/* Larger secondary actions stay visually quiet but are easy to read and hit. */
.menu-sound-label{display:none}.menu-navigation button{font-size:12px;color:#a0b8c0}
body:has(#stage:not([data-view="game"])) #languageButton{font-size:13px;min-width:66px;color:#c3e0df}
body:has(#stage:not([data-view="game"])) #soundButton{display:flex;align-items:center;justify-content:center;gap:5px;min-width:82px;white-space:nowrap;padding:6px}
body:has(#stage:not([data-view="game"])) #soundButton svg{width:21px;height:21px;flex:0 0 21px}body:has(#stage:not([data-view="game"])) .menu-sound-label{display:inline;font:750 11px var(--ui-font);color:#b2cdd0}
#homeScreen .home-foot{gap:8px 16px}#homeScreen .home-foot .story-entry,#homeScreen .home-foot #dailyButton{font-size:13px;min-height:48px;padding:8px 6px;color:#c1d9d8}
#worldScreen .world-card strong{font-size:13px}#worldScreen .world-card small{font-size:10px}#worldScreen .map-chapters small{font-size:10px}#worldScreen #levelWorldProgress{font-size:10px}
@media(min-width:700px) and (min-height:601px){#worldScreen #levelGrid.harbour-map{max-width:520px}.character-stage>canvas{max-height:265px}}
@media(orientation:landscape) and (max-height:600px){
 #worldScreen .world-map-scroll:has(.harbour-map){display:block}.world-map-scroll:has(.harbour-map) .world-grid{max-width:400px}.world-map-scroll:has(.harbour-map) .map-world-intro{max-width:500px}.world-map-scroll:has(.harbour-map) .map-chapters{max-width:500px}#worldScreen #levelGrid.harbour-map{max-width:380px}
 #modalCard:has(.character-sheet){width:min(760px,100%);padding:16px 20px}.character-sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 22px}.character-heading{grid-column:1/-1}.character-stage{grid-column:1;grid-row:2}.character-info{grid-column:2;grid-row:2}.character-stage>canvas{max-height:180px}.character-ability{grid-template-columns:74px 1fr;gap:5px 7px}.character-ability>strong{font-size:12px}.character-fit{margin-top:7px}.character-fit summary{min-height:40px;padding:10px 0}#modalCard .character-price{font-size:12px;margin:8px 0}.character-info .modal-buttons button{min-height:44px}.character-info .modal-buttons .primary{font-size:13px;min-height:48px}
 #modalCard:has(.victory-sheet){width:min(740px,100%);padding:18px 22px}.victory-sheet{display:grid;grid-template-columns:240px minmax(0,1fr);gap:12px 22px}.victory-heading{grid-column:1;grid-row:1}.victory-details{grid-column:2;grid-row:1}.victory-actions{grid-column:1/-1}.victory-sheet .new-badges{grid-column:1/-1}#modalCard .victory-heading h2{font-size:33px}.victory-loot{padding:8px 0}.victory-loot strong{font-size:22px}.victory-sheet .story-result{display:none!important}.victory-actions .modal-buttons{grid-template-columns:2fr 1fr 1fr}.victory-actions .modal-buttons>.primary{grid-column:auto}.victory-sheet .new-badges>small{width:auto;align-self:center}
 #homeScreen .home-foot .story-entry,#homeScreen .home-foot #dailyButton{font-size:12px;min-height:44px}.menu-navigation button{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.victory-sheet .result-stars>span,.victory-sheet .new-badges>span{animation:none!important}}
#modalCard .character-info .modal-buttons button,#modalCard .victory-actions .modal-buttons button{font-family:var(--ui-font);font-size:13px;min-height:47px}
#modalCard .character-info .modal-buttons .primary,#modalCard .victory-actions .modal-buttons .primary{background:#b8ecd2;color:#173e3a;border:0;border-bottom:4px solid #519789;min-height:55px;font-size:16px;box-shadow:0 3px #06182b}
#modalCard .character-info .modal-buttons .primary:disabled{background:#294b53;border-color:#1e3544;color:#b5c8c8;box-shadow:none}
.victory-actions{position:sticky;bottom:-22px;z-index:2;padding:12px 0 3px;background:#0b2135;border-top:1px solid #345363}
@media(orientation:landscape) and (max-height:600px){.victory-actions{bottom:-18px}#modalCard .character-info .modal-buttons .primary,#modalCard .victory-actions .modal-buttons .primary{font-size:13px;min-height:48px}}
body:has(#modalLayer:not([hidden])) .topbar{visibility:hidden;pointer-events:none}
#worldScreen>.screen-heading{min-height:30px;margin-bottom:8px}#worldScreen>.screen-heading .eyebrow{display:none}#worldScreen>.screen-heading h2{font-size:25px;margin:0}
@media(max-height:700px) and (orientation:portrait){
 #worldScreen>.screen-heading{display:none}#worldScreen .world-categories{margin:0 0 7px}#worldScreen .world-categories button{min-height:44px;padding-top:0;padding-bottom:7px}
 #worldScreen .world-card,#worldScreen:has(#cityDistricts:not([hidden])) .world-card{height:62px;flex-basis:142px}#worldScreen .world-card strong{font-size:12px}#worldScreen .world-card small{font-size:9px}
 #worldScreen .map-world-intro{padding:4px 0 7px;grid-template-columns:36px minmax(0,1fr) auto;gap:7px}#worldScreen #worldHero{width:36px;height:44px}#worldScreen #levelWorldName{font-size:16px}#worldScreen #worldHeroName{font-size:9px}
 #worldScreen .map-chapters{padding:7px 0 5px}#worldScreen .map-chapters strong{font-size:16px}#worldScreen .chapter-dots{margin-top:3px}#worldScreen .city-district-info{display:none}
}

/* World names use the full card width; lock/progress badges occupy their own row. */
#worldScreen .world-card .world-details,#worldScreen:has(#cityDistricts:not([hidden])) .world-card .world-details{inset:0;display:block;padding:0;background:linear-gradient(transparent 28%,#071225f2)}
#worldScreen .world-card .world-details strong{position:absolute;left:8px;right:8px;bottom:7px;min-width:0;width:auto;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;hyphens:auto;white-space:normal;font-size:12px;line-height:1.2;text-align:left}
#worldScreen .world-card .world-details small{position:absolute;top:6px;right:6px;bottom:auto;left:auto;display:block;max-width:calc(100% - 12px);margin:0;padding:2px 5px;background:#071725e8;border-radius:2px;font-size:9px;line-height:1.2;letter-spacing:.3px;white-space:nowrap;color:#d2e5df}