:root{font-family:Inter,Arial,sans-serif;color:#153e4b;background:#f6f4e9;font-synthesis:none;font-weight:500;--navy:#173e4a;--teal:#139a90;--gold:#ffd064}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0}button:focus-visible,canvas:focus-visible{outline:3px solid #e7923c;outline-offset:3px}button{transition:transform .15s,background .15s,box-shadow .15s}button:active{transform:translateY(2px) scale(.95)}button:disabled{opacity:.35;cursor:default}button svg{width:24px;height:24px;stroke-width:1.9}button:hover:not(:disabled){background:#e8eee4}b{font-weight:800}#app{max-width:1540px;margin:auto;height:100dvh;padding:0 40px;display:flex;flex-direction:column}.topbar{height:91px;flex:none;display:flex;align-items:center;gap:14px;border-bottom:1px solid #dce3d8}.brand{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:900;letter-spacing:1.7px;line-height:1.12}.brand span{display:block;font-size:18px;letter-spacing:2px}.brand-mark{width:48px;height:48px;background:#f8c554;border-radius:15px;box-shadow:0 3px #d9a83d;display:grid;place-items:center;transform:rotate(-5deg)}.brand-mark svg{width:35px;height:35px;stroke-width:1.9}.voyage-label{font-size:10px;font-weight:800;letter-spacing:1.7px;color:#778e8a;flex:1;display:flex;justify-content:center;align-items:center;gap:9px}.live-dot{width:6px;height:6px;background:#27a994;border-radius:50%;display:inline-block;box-shadow:0 0 0 4px #27a99410}.wallet{display:flex;align-items:center;gap:9px;font-size:17px;padding:10px 16px;background:#fffdf5;border:1px solid #e5e5d6;border-radius:40px}.wallet svg{width:20px;height:20px;fill:#f4ba4b;stroke:#cf9934;stroke-width:1.5}.wallet i{height:17px;width:1px;background:#e3e8dc;margin:0 6px}.coin-dot{height:20px;width:20px;border-radius:50%;display:grid;place-items:center;font-size:15px;background:#f6ca53;color:#a97822;box-shadow:inset 0 0 0 2px #e4ad35}.icon-button{height:41px;width:41px;display:grid;place-items:center;background:transparent;border-radius:13px}.icon-button svg{width:22px;height:22px}main{flex:1;min-height:0;display:flex;flex-direction:column}.mission{height:99px;display:flex;align-items:center;gap:30px;flex:none}.dock-heading{flex:1}.eyebrow{font-size:9px;font-weight:900;letter-spacing:1.6px;color:#7b908b}.dock-heading .eyebrow{color:#40978a}h1{font-size:23px;letter-spacing:-.8px;line-height:1.2;margin:7px 0 0;font-weight:800}.heading-divider{margin:0 12px;color:#bac7ba;font-weight:400}#dock-name{font-weight:500;color:#6b827e;font-size:19px}.cargo-progress{width:177px}.cargo-progress>div:first-child{display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:900;letter-spacing:1px;color:#6e8983}.cargo-progress b{font-size:20px;letter-spacing:-.5px;color:#244f55}.cargo-progress small{font-size:12px;font-weight:600;color:#96a79d}.progress-track{height:5px;background:#e0e7d9;border-radius:5px;margin-top:8px;overflow:hidden}.progress-track i{display:block;height:100%;background:#25ac93;border-radius:5px;width:0;transition:width .5s}.tide,.move-meter{min-width:67px;text-align:center;border-left:1px solid #dfe5d9;padding-left:22px}.tide b,.move-meter b{font-size:25px;display:block;margin-top:4px;letter-spacing:-.8px;font-variant-numeric:tabular-nums}.move-meter small{font-size:13px;font-weight:600;color:#9ba99b}.tide.urgent b{color:#d2684d}.tide.urgent{animation:urgent 1s infinite}@keyframes urgent{50%{opacity:.6}}#stage{position:relative;flex:1;min-height:0;border-radius:24px;overflow:hidden;background:#32b5af;box-shadow:0 5px #d2e3d6,0 15px 32px #144b4520;isolation:isolate}#game{position:absolute;inset:0}canvas{display:block;touch-action:none}.scene-tag{position:absolute;left:25px;top:23px;display:flex;align-items:center;gap:9px;font-size:9px;font-weight:900;letter-spacing:1.6px;color:#147a79;pointer-events:none;background:#eafff0b8;padding:9px 12px;border:1px solid #ffffff55;border-radius:30px;backdrop-filter:blur(8px)}.scene-tag i{font-style:normal;opacity:.5}.chapter-note{position:absolute;right:27px;top:28px;text-align:right;pointer-events:none}.chapter-note span{font-size:9px;letter-spacing:2px;font-weight:800;color:#147d7b}.chapter-note b{display:block;margin-top:6px;font-size:12px;font-weight:600;color:#1d7370}.stage-caption{position:absolute;left:26px;right:26px;bottom:20px;display:flex;justify-content:space-between;color:#166e6e;font-size:9px;font-weight:900;letter-spacing:1.6px;pointer-events:none}#onboarding{background:#eefff4c7;border:1px solid #ffffff44;padding:9px 13px;border-radius:20px;font-size:9px;letter-spacing:1px}#dock-stamp{padding-top:10px;font-size:8px;opacity:.65}#freeze-label{position:absolute;top:24px;left:50%;transform:translate(-50%);background:#ddf9ff;color:#3e879f;font-size:10px;letter-spacing:2px;padding:8px 16px;border-radius:25px}.control-deck{height:100px;display:flex;align-items:center;justify-content:space-between;flex:none}.tools,.deck-nav{display:flex;align-items:center;gap:12px}.control-deck button{background:#fdfcf5;border:1px solid #e2e5d8;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:10px;height:55px;padding:0 17px;box-shadow:0 3px #e4e7d9;font-size:12px;font-weight:800}.tool-icon{display:flex}.tools button>span:last-child{min-width:34px;text-align:left}.tools small{display:block;color:#96a092;font-size:8px;font-weight:800;letter-spacing:.5px;margin-top:4px}.tools .tool-icon{color:#73948a}.tools #hint .tool-icon{color:#bf9144}.tools #rotate .tool-icon{color:#d69b42}.tools #freeze .tool-icon{color:#5bafbf}.deck-nav{gap:8px}.deck-nav button{background:transparent;box-shadow:none;border:0;padding:0 14px;gap:9px;color:#6a8179;height:48px}.deck-nav #harbor{background:var(--navy);color:#fff6d8;box-shadow:0 3px #0b2c36}.deck-nav #harbor:hover{background:#245866}.deck-nav span:last-child{display:flex;align-items:center;gap:6px}.notify-dot{width:5px;height:5px;background:#ffd064;border-radius:50%}footer{height:27px;flex:none;display:flex;justify-content:space-between;font-size:8px;font-weight:700;letter-spacing:1.1px;color:#9ba99c}footer i{font-style:normal;padding:0 8px;color:#b6bcae}#toast{position:fixed;bottom:120px;left:50%;transform:translate(-50%,15px);padding:13px 21px;background:#173f4bef;color:#fff8df;border:1px solid #fff3;border-radius:40px;font-size:12px;z-index:40;pointer-events:none;opacity:0;transition:.2s;max-width:90vw;text-align:center;box-shadow:0 5px 20px #143f4430}#toast.visible{opacity:1;transform:translate(-50%)}.modal-backdrop{position:fixed;inset:0;background:#123c4a80;backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;z-index:30;padding:20px}.modal-backdrop[hidden]{display:none}.modal-card{max-width:700px;width:100%;max-height:calc(100dvh - 40px);overflow:auto;background:#faf8ed;border:1px solid #fffc;border-radius:26px;box-shadow:0 20px 100px #092e4e45;padding:32px;animation:appear .35s cubic-bezier(.2,1.5,.5,1)}@keyframes appear{0%{opacity:0;transform:translateY(15px) scale(.95)}to{opacity:1;transform:none}}.modal-card:has(.result){max-width:440px;text-align:center}.modal-head{display:flex;align-items:center;gap:20px;justify-content:space-between;margin-bottom:20px}.modal-head h2{margin:4px 0;font-size:27px;letter-spacing:-1px}.close-modal{border-radius:50%;width:36px;height:36px;background:#e8eddf;display:grid;place-items:center}.modal-card p{font-size:13px;line-height:1.7;color:#72887e}.primary{background:#173f4b;color:#fff7df;border-radius:13px;padding:15px 26px;font-size:14px;font-weight:800;box-shadow:0 4px #0d2d37}.primary:hover:not(:disabled){background:#28616c}.secondary{border:1px solid #d9e1d2;border-radius:13px;background:#f4f4e8;padding:14px 23px;font-size:13px;font-weight:700}.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}.result .result-icon{height:70px;width:70px;display:grid;place-items:center;background:#e4eed8;border-radius:50%;margin:0 auto 18px;color:#2d8d77}.result-icon svg{width:42px;height:42px}.result h2{font-size:34px;letter-spacing:-1.3px;margin:8px 0}.result .eyebrow{color:#55947e}.result-stars{font-size:43px;letter-spacing:8px;color:#eabc4b;filter:drop-shadow(0 2px 0 #c99336);margin:15px 0}.result-stars .empty{color:#dce1d3;filter:none}.result-stat{display:flex;justify-content:center;gap:28px;margin:20px 0;font-size:24px;font-weight:800}.result-stat small{display:block;font-size:9px;letter-spacing:1px;font-weight:700;color:#8a9c8c;margin-top:6px}.renovation-note{background:#edf0e1;padding:13px;border-radius:12px;font-size:11px;color:#788c7a}.renovation-note b{color:#4e7f69}.port-tabs{display:flex;gap:6px;margin:10px 0 20px;flex-wrap:wrap}.port-tabs button{width:40px;height:35px;border-radius:9px;background:#e6ebdd;font-size:12px;font-weight:800}.port-tabs button.active{background:#173f4b;color:#fff3d8}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.level-grid button{height:72px;border:1px solid #dce3d0;border-radius:13px;background:#fffef4;position:relative;font-size:21px;font-weight:800}.level-grid button small{display:block;color:#d3ae48;font-size:11px;letter-spacing:2px;margin-top:6px}.level-grid button.current{border:2px solid #2ca48f;background:#e9f3df}.level-grid button:disabled{background:#e5e9dc}.port-intro{display:flex;justify-content:space-between;align-items:center}.port-intro h3{margin:6px 0;font-size:19px}.port-intro span{font-size:10px;color:#81917c}.city-scene{height:150px;background:linear-gradient(#b9e9db 60%,#58bcb3 60%);border-radius:17px;position:relative;overflow:hidden;margin-bottom:18px}.city-scene:after{content:"";position:absolute;left:0;right:0;bottom:27px;height:19px;background:#e5d5ae;box-shadow:0 7px #bcae86}.skyline{position:absolute;bottom:46px;left:10%;right:10%;height:105px;display:flex;align-items:flex-end;justify-content:space-around}.building{width:39px;height:50px;background:#e7c87b;border-top:8px solid #d87956;position:relative;z-index:1;box-shadow:5px 3px #cba759}.building:after{content:"▪ ▪";display:block;color:#578a80;font-size:22px;line-height:18px;white-space:pre;text-align:center}.building:nth-child(2n){height:65px;background:#f4dd9e;border-color:#4a9990}.building:nth-child(3){height:95px;width:25px;background:repeating-linear-gradient(#fff1d2 0px 19px,#df7759 19px 30px);border-top-color:#285965}.building.unbuilt{opacity:.18;filter:grayscale(1)}.city-caption{position:absolute;top:15px;left:17px;font-size:9px;letter-spacing:1.5px;color:#4c8f83;font-weight:900}.project-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.project{border:1px solid #dce3d1;border-radius:14px;background:#fefcf2;padding:16px;display:flex;gap:13px;align-items:center}.project .project-symbol{font-size:26px;color:#7fa58d;width:30px;flex:none}.project-info{flex:1}.project h3{font-size:13px;margin:0 0 5px}.project p{font-size:10px;margin:0}.project button{padding:9px 12px;border-radius:10px;background:#f8ce6d;font-size:11px;font-weight:800;white-space:nowrap}.project.built{background:#edf2e2}.project.built button{background:#dbe8d4;color:#668a70}.daily-stats{display:flex;justify-content:space-around;background:#ecf0e2;padding:18px;border-radius:13px;text-align:center;font-size:23px;font-weight:800}.daily-stats small{display:block;color:#8a9b85;font-size:9px;letter-spacing:1px;margin-top:6px}.help-line{font-size:11px;color:#81927e;text-align:center;margin-top:22px}.pause-buttons{display:flex;flex-direction:column;gap:10px;max-width:270px;margin:24px auto 0}.button-row{display:flex;gap:10px}.button-row button{flex:1}.result .primary{width:100%}.result .secondary{flex:1}.small-note{font-size:10px!important;color:#96a38d!important}@media(min-width:1500px){#app{padding:0 60px}}@media(max-width:1050px){#app{padding:0 24px}.voyage-label{font-size:8px;letter-spacing:1px}.tools,.deck-nav{gap:7px}.control-deck button{padding:0 12px}.mission{gap:20px}.chapter-note{display:none}.cargo-progress{width:150px}footer{font-size:7px}}@media(max-width:650px)and (min-height:501px){#app{padding:env(safe-area-inset-top,0px) 12px env(safe-area-inset-bottom,0px)}.topbar{height:76px;gap:4px}.brand{gap:8px;font-size:10px;letter-spacing:1.2px;margin-right:auto}.brand span{font-size:13px;letter-spacing:1.4px}.brand-mark{width:36px;height:36px;border-radius:11px}.brand-mark svg{width:27px;height:27px}.voyage-label{display:none}.wallet{padding:8px 10px;gap:6px;font-size:13px;margin-right:2px}.wallet i{margin:0 2px}.wallet svg,.coin-dot{width:16px;height:16px;font-size:12px}.icon-button{height:35px;width:32px}.icon-button svg{height:19px;width:19px}.mission{height:91px;gap:13px;position:relative;padding-bottom:23px}.dock-heading .eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:19px;margin-top:5px;white-space:nowrap}.heading-divider{margin:0 6px}#dock-name{font-size:12px}.tide,.move-meter{padding-left:12px;min-width:51px}.tide b,.move-meter b{font-size:20px}.tide .eyebrow,.move-meter .eyebrow{font-size:7px;letter-spacing:.9px}.move-meter small{font-size:10px}.cargo-progress{position:absolute;left:0;bottom:12px;width:100%;display:flex;align-items:center;gap:12px}.cargo-progress>div:first-child{font-size:7px;gap:8px;flex:none;letter-spacing:.6px}.cargo-progress b{font-size:11px}.cargo-progress small{font-size:9px}.progress-track{flex:1;margin-top:0;height:4px}#stage{border-radius:19px}.scene-tag{left:13px;top:16px;font-size:7px;gap:7px;padding:7px 10px;letter-spacing:1px}.scene-tag>span:last-child,.scene-tag i{display:none}.stage-caption{left:13px;right:13px;bottom:14px;justify-content:center}#onboarding{font-size:7px;letter-spacing:.5px;padding:9px 12px}#dock-stamp{display:none}.control-deck{height:145px;flex-direction:column;justify-content:center;gap:13px}.tools{width:100%;justify-content:center;gap:8px}.tools button{height:50px;flex:1;padding:0 10px;gap:7px;border-radius:12px;font-size:11px}.tools button svg{height:22px;width:22px}.tools small{font-size:6px}.tools button>span:last-child{min-width:29px}.deck-nav{width:100%;justify-content:space-around;gap:5px}.deck-nav button{height:39px;font-size:10px;padding:0 13px;gap:7px;border-radius:11px}.deck-nav svg{width:19px;height:19px}footer{height:18px;justify-content:center;font-size:7px;letter-spacing:1px}#keyboard-help{display:none}.modal-backdrop{padding:13px}.modal-card{padding:23px;max-height:calc(100dvh - 26px);border-radius:21px}.modal-head h2{font-size:23px}.project-list{grid-template-columns:1fr}.project{padding:12px}.city-scene{height:123px}.level-grid{gap:7px}.level-grid button{height:65px;font-size:18px}.result h2{font-size:29px}.result-stars{font-size:37px}#toast{bottom:157px;font-size:11px}}@media(max-height:600px)and (min-width:651px){#app{padding:0 20px}.topbar{height:49px;gap:10px}.brand{font-size:9px;letter-spacing:1px;gap:7px}.brand span{font-size:11px;letter-spacing:1.5px}.brand-mark{height:31px;width:31px;border-radius:9px}.brand-mark svg{height:24px;width:24px}.wallet{padding:5px 10px;font-size:12px;gap:5px}.wallet i{margin:0 4px}.coin-dot,.wallet svg{height:16px;width:16px}.icon-button{width:31px;height:31px}.icon-button svg{width:18px;height:18px}.voyage-label{font-size:7px;letter-spacing:1.3px}.mission{height:62px;gap:20px}.eyebrow{font-size:7px;letter-spacing:1.3px}h1{font-size:17px;margin:4px 0 0}#dock-name{font-size:14px}.cargo-progress{width:130px}.cargo-progress>div:first-child{font-size:7px}.cargo-progress b{font-size:16px}.progress-track{margin-top:5px}.tide,.move-meter{padding-left:17px;min-width:58px}.tide b,.move-meter b{font-size:20px;margin-top:2px}#stage{border-radius:15px}.scene-tag{top:15px;left:17px;font-size:7px;padding:6px 9px}.stage-caption{bottom:13px;left:17px;right:17px;font-size:7px}#onboarding{font-size:7px;padding:7px 10px;max-width:200px;line-height:1.4}#dock-stamp{font-size:6px}.control-deck{height:64px}.control-deck button{height:41px;padding:0 12px;border-radius:10px;font-size:10px;gap:7px}.tools small{font-size:6px;margin-top:3px}.tools svg,.deck-nav svg{width:19px;height:19px}.deck-nav{gap:3px}footer{height:17px;font-size:6px}.modal-card{padding:22px;max-height:calc(100dvh - 24px)}.result .result-icon{height:42px;width:42px;margin-bottom:7px}.result-icon svg{height:27px;width:27px}.result h2{font-size:25px}.result-stars{font-size:28px;margin:7px 0}.result-stat{font-size:20px;margin:12px 0}.result p{margin:7px 0;font-size:11px}.modal-actions{margin-top:16px}.renovation-note{padding:9px;font-size:10px}.result .primary{padding:12px}.modal-card:has(.result){max-width:450px}.modal-head{margin-bottom:12px}.modal-head h2{font-size:22px}.city-scene{height:110px}.level-grid button{height:56px}.pause-buttons{margin-top:12px;gap:7px}.pause-buttons button{padding:12px}#toast{bottom:78px}}@media(prefers-reduced-motion:reduce){button,.modal-card,#toast{animation:none;transition:none}}@media(max-height:600px)and (min-width:651px){main{position:relative}#stage{margin:10px 0;flex:1}.mission{position:absolute;z-index:4;left:14px;top:26px;width:163px;height:auto;gap:16px 10px;flex-wrap:wrap;align-content:flex-start;padding:17px;background:#f9f5e9e8;border:1px solid #fffc;border-radius:17px;box-shadow:0 4px #1c7f7d12}.dock-heading{width:100%;flex:none}.dock-heading .eyebrow{font-size:7px;letter-spacing:.7px}h1{font-size:20px;line-height:1.4}.heading-divider{display:none}#dock-name{display:block;font-size:10px;letter-spacing:0;color:#6c887d}.cargo-progress{width:100%;order:4}.cargo-progress>div:first-child{font-size:6px}.cargo-progress b{font-size:13px}.cargo-progress small{font-size:10px}.tide,.move-meter{border:0;padding:0;text-align:left;min-width:54px}.tide b,.move-meter b{font-size:22px}.control-deck{position:absolute;z-index:4;right:13px;top:26px;bottom:46px;width:150px;height:auto;flex-direction:column;justify-content:space-between;gap:15px}.tools{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%}.tools button{width:100%;height:51px;padding:0;gap:5px;font-size:9px;box-shadow:0 3px #2b7f7b25;background:#fbf6e8}.tools button>span:last-child{min-width:26px}.tools small{font-size:5px}.tools svg{width:17px;height:17px}.deck-nav{flex-direction:column;width:100%;gap:7px}.deck-nav button{width:100%;height:35px;justify-content:center;background:#e8f2dfa8;border:1px solid #ffffff3b}.deck-nav #harbor{order:-1}.scene-tag{display:none}.stage-caption{bottom:18px;left:17px;right:auto;width:155px;justify-content:center;text-align:center}#onboarding{padding:7px 8px;font-size:6px;letter-spacing:.8px;line-height:1.5}#dock-stamp,.chapter-note{display:none}footer{height:16px;font-size:6px}footer #keyboard-help{display:none}#freeze-label{top:16px;font-size:8px;padding:6px 10px}}.result-stars span{display:inline-block;animation:star-arrival .5s cubic-bezier(.2,1.5,.5,1) both}.result-stars span:nth-child(2){animation-delay:.1s}.result-stars span:nth-child(3){animation-delay:.2s}@keyframes star-arrival{0%{opacity:0;transform:scale(.3) rotate(-18deg)}to{opacity:1;transform:scale(1) rotate(0)}}.port-tabs button.badge{background:#f4cf72;color:#82602b;box-shadow:inset 0 0 0 1px #d7b053}@media(max-height:600px)and (min-width:651px){#app{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}}@media(prefers-reduced-motion:reduce){.result-stars span{animation:none}}