@font-face{font-family:HarborLocal;src:local('Avenir Next')}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#eeeade;color:#243839;font-family:HarborLocal,-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #167f93;outline-offset:4px}button:disabled{cursor:default;opacity:.45}button{color:inherit}a{color:inherit;text-decoration:none}[hidden]{display:none!important}#harborApp{height:100dvh;position:relative;isolation:isolate}#harborCanvas{width:100%;height:100%;display:block;touch-action:none;outline:none}#harborMarkers{position:absolute;inset:0;pointer-events:none;overflow:hidden}.h-top{position:absolute;inset:max(22px,env(safe-area-inset-top)) 28px auto;display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:6}.h-back{font-size:16px;font-weight:700;display:flex;gap:14px;align-items:center}.h-back span{font-size:11px;letter-spacing:1.5px}.h-mode{display:flex;background:#f8f5eece;padding:5px;border:1px solid #fff8;border-radius:25px;box-shadow:0 4px 16px #53665d0b;backdrop-filter:blur(12px)}.h-mode button{background:transparent;border:0;border-radius:19px;font-size:12px;padding:9px 18px;min-height:36px}.h-mode button[aria-pressed=true]{background:#274344;color:#fffbed;box-shadow:0 2px 8px #27434418}.h-icon{width:42px;height:42px;border:1px solid #fff7;background:#f8f5eee6;border-radius:50%;font-size:22px}.h-title{position:absolute;left:5%;top:115px;pointer-events:none;z-index:2}.h-eyebrow{font:9px/1.6 ui-monospace,monospace;letter-spacing:1.8px;color:#788980}.h-title h1{font-size:clamp(30px,4vw,54px);letter-spacing:-2px;margin:10px 0 9px;font-weight:750}.h-title h1 span{color:#dd7864}.h-title p{font-size:12px;color:#677970;margin:0}.h-hud{position:absolute;left:50%;transform:translateX(-50%);top:90px;display:flex;align-items:center;gap:28px;border:1px solid #fff9;border-radius:16px;background:#f7f5ece8;padding:13px 20px;box-shadow:0 5px 25px #43695e10;backdrop-filter:blur(10px);z-index:5}.h-hud>div>span{display:block;font-size:9px;color:#839287;margin-bottom:4px}.h-hud b{font:700 18px ui-monospace,monospace;white-space:nowrap}.h-hud>div:nth-child(2) b{color:#dd7864;letter-spacing:2px}.h-hud>div:nth-child(3) b{color:#967a38}.h-hud button{background:none;border:1px solid #bcc8bb;border-radius:20px;padding:8px 12px;font-size:10px;white-space:nowrap;min-height:36px}.h-toast{position:absolute;left:50%;top:165px;transform:translateX(-50%);padding:10px 18px;border-radius:30px;background:#274344ed;color:#f6ffeb;font-size:12px;max-width:90%;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s;z-index:10}.h-toast.show{opacity:1}.h-toast.danger{background:#9c5343ed}.h-welcome{position:absolute;right:5%;bottom:110px;background:#f9f7efe3;border:1px solid #fffc;border-radius:22px;padding:28px 30px;width:320px;box-shadow:0 12px 55px #445f4914;backdrop-filter:blur(16px);z-index:3}.h-welcome .h-eyebrow{font-size:8px;letter-spacing:1.3px}.h-welcome h2{font-size:25px;letter-spacing:-.8px;margin:16px 0 13px}.h-welcome p{font-size:12px;line-height:1.9;color:#788779;margin:0 0 22px}.h-primary{background:#df816b;color:#fff8ec;border:0;border-radius:14px;padding:14px 18px;font-size:13px;font-weight:650;min-height:46px;box-shadow:0 4px 0 #b8624e25}.h-primary span{margin-left:23px}.h-welcome small{display:block;font-size:8px;color:#95a095;margin-top:18px;letter-spacing:.4px}.h-bottom{position:absolute;inset:auto 30px max(23px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#6f8177;gap:16px;z-index:5}.h-bottom>button{border:1px solid #c5d0c2;background:#f8f7efe6;border-radius:22px;padding:11px 17px;font-size:11px;min-height:40px;white-space:nowrap}.h-bottom>button span{margin-left:20px}.h-camera{position:absolute;left:30px;bottom:80px;background:#f8f6eee8;border:1px solid #fffa;border-radius:23px;display:flex;padding:4px;gap:2px;z-index:5;backdrop-filter:blur(10px)}.h-camera button{background:transparent;border:0;border-radius:18px;width:38px;height:36px;font-size:17px}.h-camera button:hover{background:#dfe8db}.h-camera span{width:1px;background:#cad3c3;margin:9px 4px}.h-settings{position:absolute;top:80px;right:27px;width:265px;padding:20px;background:#f8f7efed;border:1px solid #fffc;border-radius:18px;box-shadow:0 12px 50px #334e4220;backdrop-filter:blur(14px);z-index:10}.h-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.h-panel-head>b{font-size:14px}.h-panel-head button{border:0;background:transparent;font-size:23px;line-height:20px;min-width:30px;min-height:30px}.h-settings>label{display:block;font-size:11px;margin-top:17px}.h-settings>label>span{float:right;font-size:9px;color:#8b9687}.h-settings input[type=range]{width:100%;display:block;margin:12px 0 2px;accent-color:#426f6e;height:18px;cursor:pointer}.h-setting-rule{height:1px;background:#dbe0d2;margin-top:19px}.h-settings .h-check{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.h-check input{accent-color:#426f6e;width:16px;height:16px;margin:0 3px 0 0}.h-check small{font-size:8px;color:#9aa28f;margin-left:auto}.h-settings>p{font-size:9px;color:#829080;line-height:1.8;border-top:1px solid #dbe0d2;padding-top:14px;margin-bottom:0}.h-hint{position:absolute;left:50%;bottom:135px;transform:translateX(-50%);padding:16px 48px 16px 20px;background:#f9f8eeec;border:1px solid #fffe;border-radius:17px;max-width:calc(100% - 35px);width:390px;box-shadow:0 8px 24px #3a67551c;z-index:5}.h-hint b{display:block;font-size:13px;margin-bottom:7px}.h-hint span{font-size:10px;line-height:1.7;color:#7a8a7b;display:block}.h-hint button{position:absolute;right:10px;top:10px;border:0;background:none;font-size:20px;min-width:30px;min-height:30px}.h-marker{position:absolute;transform:translate(-3.5px,-50%);pointer-events:none;border:0;border-radius:0;background:transparent;color:#314b4b;padding:0;font-size:9px;min-height:0;min-width:0;box-shadow:none;display:flex;align-items:center;gap:4px;white-space:nowrap;line-height:14px}.h-marker i{width:7px;height:7px;border-radius:50%;background:var(--ship-color);display:block;flex-shrink:0;box-shadow:0 0 0 1px #fff9}.h-marker.selected{outline:0;background:transparent}.h-marker.selected i{box-shadow:0 0 0 2px #fff8,0 0 0 3px var(--ship-color)}.h-marker.loading{opacity:.65;pointer-events:none}.h-marker small{color:#334f4b;font:700 8px ui-monospace,monospace;text-shadow:0 1px 2px #fff,0 0 3px #fff}.h-marker.dock{transform:translate(-50%,-50%);background:transparent}.h-marker:focus-visible{outline:2px solid var(--ship-color);outline-offset:5px;border-radius:5px}.h-dialog{border:1px solid #fff8;border-radius:24px;padding:27px;width:min(450px,calc(100% - 28px));max-height:calc(100dvh - 32px);overflow:auto;background:#f8f5ea;color:#2c4240;box-shadow:0 20px 130px #1c3d4650}.h-dialog::backdrop{background:#27454155;backdrop-filter:blur(9px)}.h-dialog h2{font-size:24px;letter-spacing:-.8px;margin:10px 0 22px}.h-wallet{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid #d5dccb;font-size:11px;color:#829079}.h-wallet b{font:700 19px ui-monospace,monospace;color:#9b7b38}.h-shifts{display:grid;gap:9px}.h-shift{width:100%;text-align:left;border:1px solid #ced9c8;background:#fffdf4;border-radius:13px;padding:14px;display:flex;align-items:center;justify-content:space-between;min-height:62px}.h-shift b{font-size:13px}.h-shift small{font-size:9px;color:#8c987f;display:block;margin-top:5px}.h-shift em{font-size:15px;color:#cb9455;font-style:normal;letter-spacing:3px}.h-upgrade{border-top:1px solid #d5dccb;padding-top:19px;margin-top:19px;display:flex;gap:10px;align-items:center}.h-upgrade b{font-size:12px}.h-upgrade p{font-size:9px;color:#83927d;margin-bottom:0}.h-upgrade button{border:1px solid #b7c9b8;border-radius:20px;background:#e9efdc;padding:10px 14px;min-height:38px;white-space:nowrap;font-size:10px}.h-rules{font-size:11px;line-height:1.9;color:#7f8f7b;margin-top:24px}.h-rules b{color:#405d51}.h-save{font-size:9px;color:#92a08b;margin-bottom:0}.h-result{text-align:center}.h-result-symbol{font-size:65px;color:#ce9461;line-height:1.3;margin-top:20px}.h-result h2{margin:13px 0}.h-result>p{font-size:12px;line-height:1.9;color:#7a8c75;margin:0 0 24px}.h-result-actions{display:flex;justify-content:center;gap:12px;align-items:center}.h-result-actions>button:not(.h-primary),.h-next{border:0;background:none;color:#607a67;font-size:11px;min-height:40px}.h-next{margin-top:15px;border-bottom:1px solid #c4d1bb}.h-error{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px;text-align:center;background:#eeeade;z-index:40}.h-error h2{font-size:23px}.h-error p{color:#7b8b76;font-size:12px}.h-error a{margin-top:20px;border-bottom:1px solid #99ad93;padding:10px;font-size:12px}
@media(max-width:700px){.h-top{inset:max(15px,env(safe-area-inset-top)) 16px auto;gap:10px}.h-back span{display:none}.h-back{width:35px;font-size:22px}.h-mode button{font-size:11px;padding:7px 13px;min-height:32px}.h-icon{width:36px;height:36px;font-size:20px}.h-title{left:23px;top:83px}.h-title .h-eyebrow{font-size:7px;letter-spacing:1px}.h-title h1{font-size:30px;margin:7px 0 6px;letter-spacing:-1.3px}.h-title p{font-size:10px}.h-welcome{right:16px;left:16px;bottom:134px;width:auto;padding:19px 22px;background:#f9f7efe8}.h-welcome h2{font-size:21px;margin:10px 0 9px}.h-welcome p{font-size:11px;margin-bottom:13px;display:inline-block}.h-welcome .h-eyebrow{font-size:7px}.h-welcome .h-primary{float:right;font-size:11px;padding:12px 13px;margin-top:4px}.h-welcome .h-primary span{margin-left:7px}.h-welcome small{font-size:7px;margin-top:6px;clear:both}.h-bottom{inset:auto 17px max(18px,env(safe-area-inset-bottom));font-size:8px;align-items:flex-end;gap:10px}.h-bottom>span{max-width:150px;line-height:1.7}.h-bottom>button{font-size:9px;padding:9px 12px;min-height:38px}.h-bottom>button span{margin-left:8px}.h-camera{left:17px;bottom:74px}.h-camera button{width:34px;height:33px;font-size:16px}.h-settings{right:16px;top:66px;width:255px;max-height:calc(100dvh - 140px);overflow:auto}.h-hud{left:17px;right:17px;transform:none;top:76px;gap:15px;padding:12px 14px;justify-content:space-between;border-radius:14px}.h-hud b{font-size:15px}.h-hud>div>span{font-size:8px}.h-hud button{font-size:9px;padding:8px 10px;min-height:34px}.h-hud>div:nth-child(3){display:none}body.challenge .h-title{top:149px}body.challenge .h-title .h-eyebrow,body.challenge .h-title p{display:none}body.challenge .h-title h1{font-size:24px;margin:0}.h-toast{top:138px;font-size:10px;padding:9px 14px;max-width:94%}.h-hint{bottom:132px;width:calc(100% - 34px);padding:14px 42px 14px 16px}.h-hint b{font-size:12px}.h-hint span{font-size:9px}.h-dialog{padding:23px 20px}.h-dialog h2{font-size:21px}.h-result-actions{gap:8px}}
@media(max-height:550px) and (min-width:600px){.h-title{top:85px}.h-title h1{font-size:32px}.h-title .h-eyebrow{font-size:7px}.h-welcome{bottom:80px;right:25px;padding:18px;width:270px}.h-welcome h2{font-size:21px}.h-welcome p{margin-bottom:10px}.h-welcome small{margin-top:9px}.h-hud{top:70px}.h-camera{bottom:60px}.h-bottom{bottom:14px}.h-settings{max-height:calc(100dvh - 100px);overflow:auto}.h-hint{bottom:85px;left:70%}.h-toast{top:130px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.h-ship-control{position:absolute;bottom:76px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;z-index:6;background:#f9f7eeed;border:1px solid #fff9;border-radius:14px;padding:10px 14px;max-width:calc(100% - 34px);box-shadow:0 5px 25px #43695e10}.h-ship-control b{font-size:11px}.h-ship-control small{display:block;font-size:8px;line-height:1.5;color:#6f8177;margin-top:4px}.h-ship-control button{font-size:10px;border:1px solid #adc3b6;border-radius:18px;background:#e8efe3;padding:10px 12px;min-height:40px;white-space:nowrap}
@media(max-width:700px){.h-ship-control{bottom:225px;width:calc(100% - 34px);justify-content:space-between;gap:10px}.h-ship-control small{max-width:180px}}


body.night .h-title,body.night .h-back{color:#faf5e8}body.night .h-title .h-eyebrow,body.night .h-title p,body.night .h-bottom>span{color:#e4eee5}

.h-map-switch { position:absolute;z-index:5;top:250px;left:36px;display:grid;gap:7px }
.h-map-switch>div { display:flex;gap:6px }
.h-map-switch button { min-height:44px;padding:10px 16px;border:1px solid #36575120;border-radius:24px;background:#f9f7eddd;font-size:11px }
.h-map-switch button[aria-pressed=true] { background:#335954;color:#f6f2dc }
.h-map-switch small { font:8px ui-monospace,monospace;letter-spacing:.7px;opacity:.7 }
.h-cargo-routes { position:absolute;z-index:5;left:36px;top:335px;padding:11px 14px;background:#faf7eee8;border:1px solid #46695120;border-radius:12px;font-size:10px;max-width:280px }
.h-cargo-routes>div { display:flex;gap:6px;margin-top:8px }
.h-cargo-routes button,.h-cargo-start,.h-paint { min-height:44px;padding:9px 12px;background:#e2e8d5;border-radius:8px;font:inherit;border:1px solid #34564520 }
.h-cargo-routes button:disabled { opacity:.45 }
.h-cargo-start { margin-top:10px;display:block;font-size:11px }
.h-paint { width:100%;margin:12px 0;font-size:11px }
@media(max-width:700px) {
 .h-map-switch { top:168px;left:20px;right:20px;align-items:start }
 .h-map-switch>div { justify-content:flex-start }
 .h-map-switch button { font-size:10px;padding:9px 16px }
 .h-cargo-routes { left:20px;right:20px;top:250px;max-width:none }
 .h-cargo-start { display:inline-block;margin:9px 0;font-size:10px }
 .h-marker.dock { max-width:115px;white-space:normal }
}
@media(max-height:560px) {
 .h-title { display:none }
 .h-map-switch { top:69px;left:20px }
 .h-map-switch small { display:none }
 .h-cargo-routes { top:125px;left:20px;right:auto;width:240px }
 .h-welcome { max-height:calc(100dvh - 145px);overflow:auto }
}

body.challenge .h-title{display:none}

@media(max-width:700px) and (min-height:561px){.h-cargo-routes{top:auto;bottom:160px}body.challenge .h-ship-control{bottom:260px}}

@media(max-width:700px) and (min-height:561px){body.cargo .h-hint{bottom:285px}}

body.night .h-marker small{color:#f6f3df;text-shadow:0 1px 3px #173b43,0 0 3px #173b43}

.h-pure-toggle,.h-pure-exit{position:absolute;z-index:11;left:36px;top:330px;bottom:auto;border:1px solid #49635125;border-radius:22px;background:#f9f7ecdf;padding:10px 15px;min-height:40px;font-size:10px;color:#35514c}
.h-pure-exit{left:auto;right:20px;top:max(18px,env(safe-area-inset-top));bottom:auto}
body.challenge .h-pure-toggle{display:none}
body.harbor-pure-view .h-top,body.harbor-pure-view .h-title,body.harbor-pure-view .h-map-switch,body.harbor-pure-view .h-welcome,body.harbor-pure-view .h-bottom,body.harbor-pure-view .h-pure-toggle,body.harbor-pure-view .h-toast,body.harbor-pure-view #harborMarkers{display:none!important}
body.harbor-pure-view .h-camera{bottom:max(20px,env(safe-area-inset-bottom));left:20px;padding:2px}
body.harbor-pure-view .h-camera button{width:32px;height:32px;font-size:15px}
body.harbor-pure-view .soundscape[data-game=harbor]{bottom:max(20px,env(safe-area-inset-bottom));right:20px;top:auto}
body.harbor-pure-view .sc-toggle{min-height:36px;padding:8px 11px;font-size:10px}
@media(max-width:700px){.h-pure-toggle{left:20px;top:242px;bottom:auto}.h-pure-exit{right:16px;top:max(16px,env(safe-area-inset-top))}body.harbor-pure-view .h-camera{left:14px}body.harbor-pure-view .soundscape[data-game=harbor]{right:14px}}
@media(max-height:550px){.h-pure-toggle{left:20px;top:121px;bottom:auto}}

/* Island changes stay scoped; the completed first harbor keeps its layout. */
.h-cargo-routes>small{display:block;font-size:8px;line-height:1.7;color:#718577;margin-top:6px}
body.islands .h-upgrade{display:none}
body.islands .h-welcome h2{font-size:22px;letter-spacing:-.5px}
body.islands .h-welcome p{max-width:255px}
body.islands .h-cargo-routes{max-width:302px}
@media(max-width:700px) and (min-height:561px){body.islands .h-cargo-routes{max-width:none;bottom:151px}body.islands .h-ship-control{bottom:282px}body.islands.cargo .h-hint{bottom:356px}body.islands .h-welcome p{max-width:230px}body.islands .h-welcome .h-primary{float:none;width:100%;margin-top:8px}body.islands .h-welcome{bottom:131px;padding:17px 20px}body.islands .h-welcome h2{font-size:21px}}
@media(max-height:560px){body.islands .h-cargo-routes{max-width:240px}.h-cargo-routes>small{font-size:7px}}