:root{font-family:ui-rounded,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;color:#244c48;background:#eaf3e9;font-synthesis:none;--paper:#fffbed;--ink:#244c48;--teal:#0f8b6f;--amber:#f2b441}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:radial-gradient(ellipse at 18% 25%,#d1ebe1 0,transparent 46%),radial-gradient(ellipse at 85% 80%,#cee5db 0,transparent 45%),#eaf3e9}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{cursor:default;opacity:.45}button:focus-visible{outline:3px solid #1b6b64;outline-offset:4px}button svg{pointer-events:none}button{border:0}svg{display:block}#game{width:min(100vw,440px);height:100svh;max-height:940px;margin:auto;display:flex;flex-direction:column;padding:16px 20px 8px;position:relative;background:linear-gradient(180deg,#f5f7ed,#edf4e8 65%,#f5f5e9);box-shadow:0 0 100px #689e8d15;overflow:hidden}.topbar{display:flex;justify-content:space-between;align-items:center;flex:none;gap:8px;height:47px}.wordmark{display:flex;gap:9px;align-items:center;font-size:19px;font-weight:850;letter-spacing:2px}.wordmark small{display:block;font-size:8px;font-weight:700;letter-spacing:2.2px;color:#709087;margin-top:2px}.logo-mark{display:grid;place-items:center;border-radius:12px;width:35px;height:35px;color:#fffbee;background:#238d7c;font-size:37px;line-height:1;box-shadow:inset 0 -3px #116f63}.header-actions{display:flex;gap:7px}.icon-button{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#fffdf1;border:1px solid #dbe6d6;box-shadow:0 2px #dbe5d5}.icon-button svg{width:18px;height:18px}.voyage{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:16px 0 12px;flex:none}.eyebrow{font-size:10px;color:#708d7d;letter-spacing:2px;font-weight:700}h1{font-size:18px;letter-spacing:.3px;margin:5px 0 0;font-weight:800}h1 span{font-size:10px;font-weight:600;color:#759488;letter-spacing:1px;margin-left:6px}.progress-number{text-align:right}.progress-number strong{font-size:25px;line-height:1;color:#198570;letter-spacing:-1px}.progress-number>span{font-size:11px;color:#6c8478}.progress-number small{display:block;font-size:9px;color:#8c9b87;margin-top:2px}.progress-track{width:100%;height:5px;background:#dce8d6;border-radius:10px;overflow:hidden}.progress-track i{display:block;height:100%;width:0;background:#50a98e;border-radius:10px;transition:width .2s}.harbor{position:relative;flex:0 0 238px;background:linear-gradient(#b8dfcf 0,#b0ddd1 36%,#9bd2cb 100%);border-radius:20px 20px 25px 25px;box-shadow:inset 0 0 0 1px #90bbac50,0 4px #d8e5d5;overflow:hidden;padding:12px 14px 0}.harbor:before,.harbor:after{content:"";position:absolute;border:1px solid #ffffff35;width:160px;height:19px;border-radius:50%;right:-50px;bottom:27px}.harbor:after{left:-86px;bottom:9px}.queue-heading,.berth-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#4d7d72}.queue-heading #next-route{font-weight:800;background:#f9fbec;box-shadow:0 2px #8ebdae30;padding:6px 9px;border-radius:9px;font-size:11px;white-space:nowrap}.queue-count{font-size:9px;font-weight:700;padding-left:5px}.pier{height:75px;position:relative;margin:8px 0 0}.pier-planks{height:17px;background:repeating-linear-gradient(90deg,#e8c996 0,#e8c996 22px,#cdb083 23px,#f5ddb2 25px);border-radius:4px;box-shadow:0 5px #a98e6c80;position:absolute;bottom:6px;left:-14px;right:-14px}.pier-rope{height:13px;position:absolute;bottom:0;left:-5px;right:-5px;border-bottom:2px solid #fff6dc;background:repeating-linear-gradient(90deg,transparent 0,transparent 40px,#f8f5dc 41px,#f8f5dc 44px,transparent 45px)}#tourists{display:flex;align-items:end;gap:0;padding:0 4px 0 30px;position:absolute;left:0;right:0;bottom:16px;height:48px;overflow:hidden}#tourists .person{flex:0 0 23px;position:relative;transform-origin:bottom}#tourists .person:first-child{margin-right:6px}#tourists svg{width:23px;height:41px}#tourists .ticket-symbol{position:absolute;top:-11px;left:6px;font-size:13px;text-shadow:0 1px #fff}.front-label{position:absolute;bottom:33px;left:0;color:#376f61;font-size:9px;font-weight:800;writing-mode:vertical-rl;letter-spacing:2px}.front-label b{font-size:15px;letter-spacing:0}.berth-label{margin:7px 1px 6px;font-size:9px;letter-spacing:1px}.berths{height:85px;display:grid;grid-template-columns:repeat(var(--berth-count,6),minmax(0,1fr));gap:8px;position:relative;z-index:1}.berth{height:82px;border:1.5px dashed #e8fff1b0;border-radius:12px;background:#e6faeb18;position:relative;display:flex;align-items:center;justify-content:center}.berth .berth-number{color:#548b7b70;font-size:20px;font-weight:300}.berth.occupied{border-style:solid;border-color:#fff7db;background:#fff7db42}.berth .docked-ship{width:34px;height:75px;transform:rotate(-16deg);margin-top:-8px}.berth .docked-ship svg{width:100%;height:100%}.load-label{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);border-radius:6px;background:#fffbed;padding:2px 8px;font-weight:800;font-size:9px;white-space:nowrap;box-shadow:0 2px #6b9a7b20}.harbor-details{display:flex;justify-content:space-between;align-items:center;font-size:8px;color:#56867b;padding-top:12px;letter-spacing:.4px}.little-buoy{width:7px;height:7px;border-radius:50%;background:#f5c980;border:2px solid #fff3d9}.yard-section{display:flex;flex-direction:column;flex:1 1 340px;min-height:190px;padding-top:14px}.yard-heading{display:flex;justify-content:space-between;align-items:center;padding:0 2px 8px;height:25px;flex:none}.yard-heading h2{font-size:11px;margin:0;font-weight:800;letter-spacing:1px}.yard-heading h2 span{font-size:9px;letter-spacing:0;font-weight:500;color:#839b8b;margin-left:5px}.compass{color:#6c9689;font-size:9px;font-weight:700}#yard{position:relative;flex:1;min-height:160px;isolation:isolate;border-radius:21px;border:1px solid #91c7ba;box-shadow:inset 0 2px 6px #285a5b0a,0 4px #d7e6d6;overflow:hidden}.sea-art{position:absolute;width:100%;height:100%;inset:0}.boat{background:none;position:absolute;padding:0;transform:translate(-50%,-50%) rotate(var(--angle));width:var(--w);height:var(--h);border-radius:45%;filter:drop-shadow(0 1px 0 #fff7dc60);z-index:2;transition:filter .15s;outline-offset:2px!important}.boat>svg{width:100%;height:100%;overflow:visible}.boat:hover{filter:brightness(1.06) drop-shadow(0 0 4px #fff4bd)}.boat.is-hint{filter:drop-shadow(0 0 4px #fff7a6) drop-shadow(0 0 8px #ffed7c);z-index:3}.boat.is-blocked{filter:drop-shadow(0 0 4px #e85756);animation:blocked .28s}.feedback{height:31px;flex:none;display:flex;align-items:center;justify-content:center;font-size:10px;color:#758b7b;text-align:center;line-height:1.4;padding:3px 0}.feedback.warning{color:#ba6753}.tools{display:grid;grid-template-columns:repeat(3,1fr);padding-top:2px;gap:9px;flex:none}.tools button{height:67px;border:1px solid #d9e4d3;border-radius:14px;background:#fffbed;box-shadow:0 3px #d9e4d3;display:grid;grid-template-columns:28px 1fr;align-content:center;text-align:left;padding:9px;gap:3px 5px}.tools button:nth-child(2){background:#fae7b7;border-color:#ead398;box-shadow:0 3px #e1c990}.tools button>span{grid-row:1/3;display:flex;align-items:center;color:#50897b}.tools button:nth-child(2)>span{color:#a57d38}.tools svg{width:25px;height:25px}.tools strong{font-size:11px;white-space:nowrap;font-weight:750}.tools small{font-size:8px;color:#8d9981;white-space:nowrap}.tools button:active,.primary:active{transform:translateY(2px);box-shadow:none}.signature{font-size:7px;letter-spacing:1.4px;text-align:center;color:#9eaf98;padding:13px 0 0;flex:none}.signature span{padding:0 6px;color:#c4b57b}dialog{border:1px solid #e5e9d3;background:#fffcf0;color:#244c48;border-radius:26px;padding:0;max-width:min(350px,calc(100vw - 38px));width:350px;max-height:90svh;box-shadow:0 22px 100px #1c5c5433}dialog::backdrop{background:#174f4b6b;backdrop-filter:blur(5px)}.modal-content{text-align:center;padding:28px 24px 24px;position:relative}.modal-art{width:85px;height:95px;margin:0 auto 8px;position:relative}.modal-art>svg{width:100%;height:100%}.modal-art .art-mark{position:absolute;right:-6px;top:4px;color:#eab74d;font-size:24px}.modal-eyebrow{font-size:9px;letter-spacing:2px;color:#8ca18a;margin:0 0 9px;font-weight:700}.modal-content h2{font-size:27px;letter-spacing:2px;line-height:1.3;margin:8px 0 10px;font-weight:850}.modal-description{font-size:12px;line-height:1.9;color:#759084;margin:0 0 21px}.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;width:100%;border-radius:12px;font-weight:750;font-size:13px;margin-top:10px}.primary{color:#fff9e9;background:#208d76;box-shadow:0 4px #136e5b}.primary svg,.secondary svg{width:17px;height:17px}.secondary{background:#edf0df;color:#638471}.text-action{background:none;font-size:11px;color:#81927c;text-decoration:underline;text-underline-offset:3px;margin-top:20px;min-height:32px}.howto{display:flex;gap:9px;align-items:center;text-align:left;font-size:11px;color:#6b8378;line-height:1.6;margin:10px 0}.howto b{display:grid;place-items:center;background:#edf1df;border-radius:8px;width:28px;height:28px;flex:none;color:#699076;font-size:10px}.howto strong{font-weight:700;color:#3d6a5d}.howto-list{padding:9px 0 13px;border-top:1px solid #e7e9d8;margin-top:18px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.stats>div{padding:14px;background:#f0f2e3;border-radius:14px;font-size:10px;color:#809278}.stats strong{display:block;font-size:25px;color:#358777;margin-bottom:4px}.modal-close{position:absolute;right:14px;top:14px;width:32px;height:32px;background:#edf0e1;border-radius:50%;display:grid;place-items:center}.modal-close svg{width:16px;height:16px}.level-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:10px 0 20px}.level-grid button{border-radius:9px;aspect-ratio:1;background:#eaf0de;color:#517c68;font-size:12px;position:relative}.level-grid button.cleared{background:#cfe6cf}.level-grid button.current{background:#298d75;color:white}.chapter-title{text-align:left;font-size:10px;color:#73917c;margin:17px 0 8px;letter-spacing:1px}#orientation{display:none}#boot-status{position:fixed;inset:0;background:#eef5e9;z-index:100;display:grid;place-content:center;text-align:center;font-size:14px}#boot-status button{background:#208d76;color:white;padding:14px 24px;border-radius:12px}.boot-ring{width:30px;height:30px;border:3px solid #c8ddc8;border-top-color:#208d76;border-radius:50%;animation:spin 1s linear infinite;margin:auto}.flying-ship,.flying-person{position:fixed;z-index:50;pointer-events:none;transform-origin:center}.flying-ship svg{width:100%;height:100%}.flying-person{width:26px;height:42px}.flying-person svg{width:100%;height:100%}.confetti{position:fixed;top:-15px;z-index:70;width:8px;height:13px;border-radius:3px;pointer-events:none;animation:confetti 2s ease-in forwards}.wake{position:absolute;inset:8px -15px -20px;border:1px solid #fff9;border-radius:50%;z-index:-1}.hint-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:9px;color:#fff;background:#327b66d9;border-radius:7px;padding:4px;pointer-events:none;z-index:5;white-space:nowrap}@keyframes spin{to{transform:rotate(360deg)}}@keyframes blocked{25%{translate:2px 0}75%{translate:-2px 0}}@keyframes confetti{to{transform:translate(var(--drift),100svh) rotate(480deg);opacity:0}}@media(max-height:760px){#game{padding-top:8px;padding-bottom:5px}.topbar{height:39px}.voyage{padding:9px 0}.harbor{flex-basis:211px;padding-top:8px}.pier{height:61px;margin-top:4px}.berths,.berth{height:75px}.berth .docked-ship{height:69px}.harbor-details{padding-top:8px}.tools button{height:59px}.signature{padding-top:8px}.yard-section{padding-top:10px}.feedback{height:27px}.modal-content{padding:20px 24px}.modal-art{height:70px}}@media(max-width:370px){#game{padding-left:12px;padding-right:12px}.tools{gap:6px}.tools button{padding:7px;grid-template-columns:23px 1fr;gap:3px}.tools svg{width:21px}.harbor{padding-left:10px;padding-right:10px}.berths{gap:6px}}@media(min-width:740px){#game{height:min(96svh,920px);margin-top:2svh;border:1px solid #d6e5d6;border-radius:27px;box-shadow:0 18px 80px #31665717}}@media(orientation:landscape) and (max-height:550px){#orientation{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#edf4e7;z-index:90;text-align:center;padding:20px}#orientation>div{font-size:55px;color:#2c8f79}#orientation h2{font-size:22px;margin:8px}#orientation p{font-size:12px;color:#698474}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.boat::after{content:"";position:absolute;inset:-4px -5px;border-radius:45%}
@media(min-height:761px){.harbor{flex-basis:250px}.harbor-details{padding-top:9px}}
@media(max-height:650px){#game{padding:7px 12px 5px}.topbar{height:33px}.wordmark{font-size:15px}.wordmark small{font-size:6px}.logo-mark{width:29px;height:29px;font-size:30px}.icon-button{width:32px;height:32px}.voyage{padding:8px 0 7px;gap:5px}.eyebrow{font-size:8px}h1{font-size:14px;margin-top:2px}h1 span{font-size:8px}.progress-number strong{font-size:20px}.progress-number small{display:none}.harbor{flex-basis:179px;padding:6px 10px 0;border-radius:15px}.queue-heading #next-route{padding:4px 7px;font-size:10px}.pier{height:42px;margin-top:6px}#tourists{bottom:11px;height:36px;padding-left:26px}#tourists .person{flex-basis:19px}#tourists svg{height:32px;width:19px}#tourists .ticket-symbol{font-size:10px;top:-7px}.pier-planks{height:12px;bottom:1px}.pier-rope{bottom:-4px;height:8px}.front-label{bottom:14px;font-size:8px}.berth-label{margin:6px 0 4px;font-size:8px}.berths,.berth{height:60px}.berth .docked-ship{height:57px;width:28px}.load-label{font-size:8px;padding:1px 6px}.harbor-details{font-size:7px;padding-top:8px}.yard-section{min-height:135px;padding-top:9px}.yard-heading{height:22px;padding-bottom:6px}#yard{min-height:112px}.feedback{font-size:9px;height:23px}.tools button{height:48px;border-radius:10px;padding:7px}.tools strong{font-size:10px}.tools small{font-size:7px}.tools svg{width:22px;height:22px}.signature{display:none}.modal-art{height:55px;margin-bottom:5px}.modal-content{padding:16px 22px}.modal-content h2{font-size:22px}.modal-description{font-size:11px;margin-bottom:12px}.howto-list{padding:3px 0 6px;margin-top:10px}.howto{font-size:10px;margin:7px 0}.modal-eyebrow{font-size:8px}.stats{margin:12px 0}.primary,.secondary{min-height:42px}.text-action{margin-top:12px}}

.harbor-details{display:none}