:root{--island-image:url('./island-bay.webp')}
body{background-image:var(--island-image)}
#game{padding:9px 10px 10px;background-image:var(--island-image);border-radius:22px;gap:0}
.topbar{height:44px;flex:none;align-items:start}.wordmark{font-size:17px;padding:4px 9px 5px 5px}.wordmark small{font-size:6px;letter-spacing:1.35px}.logo-mark{width:28px;height:28px;font-size:30px}.icon-button{width:33px;height:33px}.header-actions{padding-top:2px}
.voyage{margin:3px 3px 5px;padding:7px 10px 6px;gap:4px}.eyebrow{font-size:8px}h1{font-size:15px;margin-top:2px}.progress-number strong{font-size:23px}.progress-number>span{font-size:9px}.progress-number small{font-size:8px;display:block}.progress-track{height:4px}
#play-area{position:relative;flex:1;min-height:260px;isolation:isolate;overflow:hidden}
#world{position:absolute;width:420px;height:760px;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--world-scale,1));transform-origin:center;overflow:visible}
#world>.queue-heading{position:absolute;left:9px;right:9px;top:1px;height:25px;z-index:4}
#next-route{font-size:12px!important;display:flex;align-items:center;gap:5px;min-height:24px}.queue-heading #next-route .route-dot{width:14px;height:14px;border-radius:5px;display:grid;place-items:center;color:#fffdf0;font-size:10px;border:1px solid #fff7ca;box-shadow:0 1px 2px #5b67514f}
#world>.pier{position:absolute;left:0;right:0;top:25px;height:64px;margin:0;z-index:3}
#tourists{bottom:7px;height:59px;left:0;right:0;padding-left:28px;gap:0;filter:drop-shadow(1px 2px 1px #5f553132)}
#tourists .person{flex:0 0 29px;height:56px;width:29px;display:flex;align-items:end;justify-content:center;position:relative}
#tourists .person:first-child{margin-right:3px}#tourists .person.is-walking{opacity:0}#tourists .person.matching{filter:drop-shadow(0 0 3px #fff4b9)}
#tourists .traveler-art{width:32px;height:55px;max-width:none;flex:none;overflow:visible}
#tourists .ticket-symbol{position:absolute;top:-1px;left:10px;min-width:10px;height:10px;font-size:7px;color:white;text-align:center;background:var(--route);border:1px solid #fff4c3;border-radius:4px;line-height:9px;box-shadow:0 1px 2px #47786466;z-index:2}
.front-label{bottom:24px;left:8px;writing-mode:vertical-rl;font-size:9px;color:#fff7d4}.pier-planks{height:22px;bottom:0;left:0;right:0}.pier-planks::before,.pier-planks::after{height:31px}.pier-rope{bottom:0}
#ticket-order{position:absolute;right:9px;top:90px;display:flex;gap:3px;z-index:6;pointer-events:none}#ticket-order span{font-size:8px;font-weight:750;color:#fff9e1;background:var(--route);padding:2px 4px;border:1px solid #ffefb9;border-radius:4px;box-shadow:0 1px #a48a5a66}
#world>.berth-label{position:absolute;left:8px;right:8px;top:96px;margin:0;height:15px;z-index:3;font-size:8px;pointer-events:none}#world>.berth-label>span:first-child{position:absolute;left:0;top:-14px}
#berths{position:absolute;left:22px;right:22px;top:112px;height:139px;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;z-index:2}
.berth{height:139px;width:auto;display:block;border-radius:5px 5px 13px 13px;border-color:#fff4c599;background:#d4ffe719;box-shadow:inset 0 0 12px #c2fbe416,0 3px 5px #08718420}
.berth::before,.berth:last-child::after{top:-8px;height:132px;width:4px;left:-4px}.berth:last-child::after{left:auto;right:-4px}
.berth .berth-number{position:absolute;top:50%;left:50%;translate:-50% -50%;font-size:19px;font-weight:600;color:#effbdca1;text-shadow:0 1px #296f74}
.berth.occupied{background:#fff1bb28;border-color:#fff3b1;box-shadow:inset 0 0 12px #fff7b92c,0 0 8px #faecc727}
.berth.reserved{background:#e4ffff15;border-color:#a8edff99}
.berth .docked-ship{position:absolute;left:50%;top:var(--boat-top);translate:-50% 0;transform:none!important;width:var(--boat-w)!important;height:var(--boat-h)!important;margin:0;filter:drop-shadow(1px 3px 1px #075c7959)}
.docked-ship svg{width:100%;height:100%}.load-label{top:var(--load-top);bottom:auto!important;min-width:0!important;padding:2px 3px!important;font-size:9px!important;line-height:1.2;z-index:4;background:linear-gradient(#fffce2,#f5e0a6);border-color:#f8e0a3;color:#426753;box-shadow:0 2px #996f3d88;white-space:nowrap}
.reserve-label{position:absolute;top:58px;left:0;right:0;text-align:center;font-size:8px;color:#effedb;writing-mode:horizontal-tb;text-shadow:0 1px #367785}
.berth.is-boarding{animation:berth-receive .4s ease-out}.berth.is-full{border-color:#ffe9a6;box-shadow:0 0 10px #fff3ad5c}
#waterway{position:absolute;inset:0;width:420px;height:760px;pointer-events:none;z-index:0;overflow:visible}
.common-waterway{fill:none;stroke:#ddfff0;stroke-width:2;stroke-dasharray:6 7;opacity:.48}.gate-lines{stroke:#ffe5a6;stroke-width:2.4;opacity:.85}.gate-arrow{fill:none;stroke:#fff5c2;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.channel-label{position:absolute;top:284px;left:5px;font-size:9px;color:#fff8d5;background:#236d7780;border:1px solid #bdffeb44;border-radius:6px;padding:4px 7px;z-index:2}
.channel-label.busy{background:#ae803e9c;border-color:#ffe9a580}.exit-sign{position:absolute;top:353px;left:167px;font-size:9px;font-weight:750;color:#fff7cf;background:#206b7d8c;border:1px solid #e3ffd777;border-radius:7px;padding:4px 9px;z-index:3}
#yard{position:absolute;left:0;top:380px;width:420px;height:380px;min-height:0;border:1px solid #d4ffe340;border-radius:17px;background:linear-gradient(#3ed9ce12,#07687b1c);box-shadow:inset 0 0 20px #11768c0c;overflow:visible;touch-action:none;isolation:isolate}
#yard .yard-water{position:absolute;inset:0;pointer-events:none;overflow:visible}.yard-lane{stroke:#d9fff2;stroke-dasharray:5 8;stroke-width:1.5;opacity:.23;fill:none}.yard-label{font:9px system-ui;fill:#fff3ca;opacity:.75}
.boat{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);padding:0;border:0;background:none;border-radius:40%;transform:translate(-50%,-50%) rotate(var(--angle));filter:drop-shadow(1px 3px 1.5px #07596b66);transition:filter .15s;z-index:3;touch-action:none}
.boat::after{inset:-5px -4px}.boat>svg{width:100%;height:100%;overflow:visible}.boat .capacity-tag{position:absolute;bottom:-3px;left:50%;transform:translateX(-50%) rotate(calc(-1 * var(--angle)));background:var(--route);color:#fff9df;font-size:9px;line-height:13px;font-weight:850;padding:0 4px;min-width:21px;text-align:center;border:1px solid #fff0bd;border-radius:5px;box-shadow:0 1px 3px #4b6b655c;pointer-events:none;z-index:4}
.boat.matching{filter:drop-shadow(0 0 1.5px #fff7b8) drop-shadow(1px 3px 1.5px #07596b66)}.boat.selected{filter:brightness(1.13) drop-shadow(0 0 4px #fff2a3);z-index:5}.boat.blocking{filter:drop-shadow(0 0 4px #ff7659);z-index:5}.boat.is-hint{filter:drop-shadow(0 0 3px #fff4a5) drop-shadow(0 0 7px #ffdf81)}.boat:hover{filter:brightness(1.1) drop-shadow(0 0 3px #fff4bc)}
#route-preview{position:absolute;inset:0;width:420px;height:760px;pointer-events:none;z-index:4;overflow:visible}
.route-clearance{fill:none;stroke:var(--route);stroke-width:var(--width);stroke-linejoin:round;stroke-linecap:round;opacity:.15}.route-line{fill:none;stroke:#fff8d4;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:5 5;filter:drop-shadow(0 1px 1px #175d6970)}.route-line.blocked{stroke:#ff735e}.route-stop{fill:#e85f4d;stroke:#fff0c9;stroke-width:2}.route-stop-cross{stroke:#fff8df;stroke-width:2;stroke-linecap:round}
#traffic{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}.moving-boat,.walking-person,.harbor-spark,.arrival-ripple{position:absolute;left:0;top:0;pointer-events:none;transform-origin:center;z-index:8}.moving-boat svg{width:100%;height:100%;overflow:visible}.moving-boat{filter:drop-shadow(1px 3px 1.5px #075c7777)}.walking-person{width:29px;height:50px;filter:drop-shadow(1px 2px 1px #355f455c)}.walking-person svg{width:100%;height:100%;overflow:visible}.harbor-spark{width:11px;height:11px;color:#fff2b2;filter:drop-shadow(0 0 2px #ffe6a2)}.harbor-spark svg{width:100%;height:100%}.arrival-ripple{border:1.4px solid #eaffd9;box-shadow:0 0 5px #cdffdf80;border-radius:50%;z-index:1}
.feedback{height:27px;min-height:27px;max-height:27px;padding:2px 3px;font-size:9px;line-height:1.4;font-weight:600;color:#fff5d7;text-shadow:0 1px 3px #1d6874}.feedback.warning{background:#ad5f3d9c;border-radius:7px;color:#fff7d1;text-shadow:none}
.tools{padding:0 2px;gap:8px;height:53px;flex:none}.tools button{height:49px;padding:6px 8px;grid-template-columns:23px 1fr;border-radius:9px}.tools strong{font-size:10px}.tools small{font-size:7px}.tools svg{width:22px;height:22px}
.modal-art{background-image:var(--island-image);height:112px;margin-bottom:16px}.modal-content{padding:25px 22px 20px}.modal-content h2{font-size:25px;margin-bottom:8px}.modal-description{font-size:11px;line-height:1.8;margin-bottom:13px}.modal-eyebrow{font-size:8px}.howto-list{margin-top:12px;padding:4px 0 9px}.howto{font-size:10px;margin:8px 0}.howto b{width:25px;height:25px}.primary,.secondary{min-height:43px;font-size:12px}.text-action{margin-top:12px}.stats{margin:12px 0}.stats strong{font-size:24px}.stats>div{padding:10px}.chapter-title{font-size:10px}.level-grid{grid-template-columns:repeat(5,1fr);gap:8px}.level-grid button{font-size:11px}.map-pagination{display:flex;gap:7px;margin:10px 0}.map-pagination button{background:#f1dfb0;padding:8px;border-radius:7px;flex:1;font-size:10px;min-height:35px}
.ranking-local{padding:12px;background:#e6efd1;border:1px solid #d5dfb9;border-radius:12px;color:#4a7b5b;font-size:11px;margin:12px 0}.ranking-local strong{font-size:24px;margin:0 3px}.ranking-list{list-style:none;margin:12px 0;padding:0;text-align:left}.ranking-list li{display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:6px;padding:10px 5px;border-bottom:1px solid #e8dfbd;font-size:11px}.ranking-list li.self{background:#e4edcf;border-radius:8px}.ranking-list b{color:#a27c31}.ranking-list strong{color:#25856c}.ranking-note{font-size:10px;color:#81906f;line-height:1.6;min-height:30px}.empty-board{font-size:11px;color:#8b9b7b;line-height:1.8;padding:10px 0}.world-announcement{font-size:10px;color:#9f7c40;background:#f9edc7;padding:7px;border-radius:7px;margin:10px 0}.save-note{font-size:9px;color:#af7440;margin-top:7px}
#orientation,#boot-status{background-image:var(--island-image)}
@media(max-height:720px){#game{padding:6px 8px 7px}.topbar{height:38px}.wordmark{font-size:15px;padding:3px 7px 4px 4px}.logo-mark{width:25px;height:25px;font-size:27px}.wordmark small{font-size:5px}.icon-button{width:30px;height:30px}.voyage{padding:5px 8px 4px;margin-top:2px;margin-bottom:3px}.eyebrow{font-size:7px}h1{font-size:13px}.progress-number strong{font-size:20px}.progress-number small{font-size:7px}.feedback{height:24px;min-height:24px;max-height:24px;font-size:8px}.tools{height:47px}.tools button{height:43px;padding:5px 7px;grid-template-columns:20px 1fr}.tools strong{font-size:9px}.tools small{font-size:6px}.tools svg{width:19px}.modal-art{height:75px;margin-top:-20px;margin-bottom:13px}.modal-content{padding-top:20px}.modal-content h2{font-size:22px}}
@media(min-width:740px){#game{height:min(98svh,980px);max-height:980px;margin-top:1svh;width:min(100vw,460px)}}
@media(prefers-reduced-motion:reduce){.berth.is-boarding{animation:none}.boat{transition:none}}
.turn-clearance{fill:var(--route);fill-opacity:.08;stroke:var(--route);stroke-opacity:.5;stroke-width:1;stroke-dasharray:3 5}
.navigation-light{filter:drop-shadow(0 0 1.4px #fff1b8)}.vessel-art--sailing .sailing-wake{filter:drop-shadow(0 1px 1px #b9fff1)}.route-hull-paint{filter:drop-shadow(0 0 1px #fff4bc66)}

.boat::after{inset:-10px -8px}.route-colored-rail{filter:drop-shadow(0 0 1px #fff2ad)}
/* Spatial boatyard: the map, fence and moving hulls share one camera. */
#yard{top:310px;height:450px;border:0;border-radius:16px;overflow:hidden;background:linear-gradient(#36c7c914,#0b647c35);box-shadow:inset 0 0 30px #09657529;cursor:default}
#yard:active{cursor:defaultbing}#yard-camera{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#yard-boats{position:absolute;inset:0}#yard-clearance{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:4}#yard-traffic{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}
.yard-fence{position:absolute;overflow:visible;pointer-events:none;z-index:1}.fence-rail{fill:none;stroke-linecap:round}.fence-shadow{stroke:#074c6955;stroke-width:16;transform:translate(1px,5px)}.fence-wood{stroke:#ce9f65;stroke-width:8}.fence-rope{fill:none;stroke:#fff0be;stroke-width:2;stroke-dasharray:13 5;opacity:.92}.fence-wood.blocked-wall{stroke:#f27759;filter:drop-shadow(0 0 5px #ffc387)}
.yard-caption{position:absolute;top:7px;left:9px;border:1px solid #fff0b46b;border-radius:6px;padding:4px 7px;background:#156c729e;color:#fff5cc;font-size:10px;font-weight:700;pointer-events:none;z-index:8}.yard-help{position:absolute;left:10px;bottom:9px;color:#ffefc5;font-size:8px;text-shadow:0 1px 2px #0a6174;pointer-events:none;z-index:7}
#berths{height:116px}.berth{height:116px}.berth::before,.berth:last-child::after{height:110px}.channel-label{top:239px}.exit-sign{top:284px;left:171px;font-size:8px}
#yard .boat{cursor:pointer}.boat.blocking{filter:drop-shadow(0 0 2px #ff7356)}#yard .moving-boat{z-index:6}

.interior-pier.blocked-wall{fill:#ed9166;stroke:#fff0b8}

/* A shaded waiting pier separates route-colored travelers from the village. */
#world>.pier{border:1px solid #f6dfaa;border-radius:11px 11px 5px 5px;background:linear-gradient(180deg,#123d49f7,#1e6268f5 75%,#2b7976f2);box-shadow:0 3px 10px #06455766,inset 0 1px #fff5d13d}
#tourists{padding-left:30px;filter:none;gap:1px}
#tourists .person{flex-basis:40px;width:40px;height:57px;isolation:isolate}
#tourists .person::before{content:"";position:absolute;left:5px;right:5px;bottom:-1px;height:9px;border-radius:50%;background:var(--route);border:1.5px solid #fff5ce;box-shadow:0 0 8px var(--route),0 2px 2px #052e48;z-index:-1}
#tourists .person::after{content:"";position:absolute;inset:9px 4px 0;border-radius:16px 16px 8px 8px;background:linear-gradient(180deg,transparent,var(--route));opacity:.17;z-index:-2}
#tourists .traveler-art{width:35px;height:58px;filter:saturate(1.45) contrast(1.08) drop-shadow(0 0 .8px #fff7d8) drop-shadow(1px 2px 1px #031e35)}
#tourists .ticket-symbol{top:10px;left:auto;right:0;width:16px;min-width:16px;height:17px;line-height:15px;font-size:11px;font-weight:850;border:1.5px solid #fff9dc;border-radius:5px;box-shadow:0 2px 3px #032f4bab;color:#fffef0}
#tourists .person.matching{filter:none}#tourists .person.is-front{margin-right:5px}
#tourists .person.is-front::before{left:0;right:0;height:11px;bottom:-2px;border:2px solid #fff7bb;box-shadow:0 0 0 2px #f5d473b3,0 0 13px var(--route)}
#tourists .person.is-front::after{inset:4px 0 -1px;opacity:.32;border:1px solid #fff5c36b}
#tourists .person.is-front .ticket-symbol{width:19px;height:20px;line-height:17px;font-size:13px;right:-2px;border-width:2px;box-shadow:0 0 0 1px #f0cd7a,0 2px 4px #042b42}
.front-label{bottom:19px;left:7px;color:#fff4c5;font-size:10px;font-weight:800;text-shadow:0 1px 2px #053d4c}

#tourists .person>svg{width:35px;height:58px;max-width:none;flex:none;overflow:visible;filter:saturate(1.45) contrast(1.08) drop-shadow(0 0 .8px #fff7d8) drop-shadow(1px 2px 1px #031e35)}
.walking-person svg{filter:saturate(1.45) contrast(1.08) drop-shadow(0 0 .7px #fff7d8)}

/* One screen, one fixed whole-harbor view. Height is given to the boatyard. */
#game{padding:7px 8px 6px}
.topbar{height:52px;gap:6px;align-items:center}
.wordmark{font-size:13px;letter-spacing:1px;padding:2px 4px;gap:5px;flex:none}.wordmark small{font-size:5px;letter-spacing:.7px}.logo-mark{width:24px;height:26px;font-size:26px}
.topbar .voyage{margin:0;flex:1;padding:4px 5px;gap:2px;min-width:0;background:#fff3d4e8;border-radius:8px}.voyage .eyebrow{font-size:6px;letter-spacing:.4px}.voyage h1{font-size:10px;margin:1px 0;white-space:nowrap}.progress-number strong{font-size:15px}.progress-number>span{font-size:7px}.progress-number small{display:none}.progress-track{height:3px}.header-actions{gap:4px;padding:0}.icon-button{width:29px;height:29px}.icon-button svg{width:15px}
#play-area{min-height:0}
#world{left:0;top:0;transform:scale(var(--world-scale,1));transform-origin:0 0}
#berths,.berth{height:89px}.berth::before,.berth:last-child::after{height:83px}
.channel-label{top:207px;font-size:8px;padding:3px 5px}.exit-sign{top:230px;left:261px;background:#166a73b0;font-size:8px}
#waterway{height:250px;object-fit:none;object-position:top}
#yard-panel{position:absolute;top:250px;bottom:0;left:0;width:420px;height:auto}
#yard-panel>#yard{position:absolute;top:0;bottom:0;left:0;width:420px;height:auto;min-height:0;border:0;border-radius:14px;overflow:hidden;cursor:default;background:linear-gradient(#137b8022,#075e7755);touch-action:manipulation}
#yard-moorings{position:absolute;left:0;top:0;z-index:1;pointer-events:none;overflow:visible}
#yard .boat{--hit-scale-x:var(--map-pixel-scale-x,1);--hit-scale-y:var(--map-pixel-scale-y,1)}#yard .boat[data-axis="horizontal"]{--hit-scale-x:var(--map-pixel-scale-y,1);--hit-scale-y:var(--map-pixel-scale-x,1)}#yard .boat::after{inset:calc(-6px / var(--hit-scale-y)) calc(-6px / var(--hit-scale-x))}.yard-help{left:auto;right:10px;bottom:3px;font-size:8px;opacity:.8}
#route-preview{height:100%;z-index:5;overflow:visible}.route-shadow{stroke:#064459;stroke-width:6;opacity:.45;fill:none;stroke-linejoin:round}.route-line{stroke-width:3.5;stroke-dasharray:7 6;filter:none}.route-highlight{stroke:#fffce1;stroke-width:1.3;stroke-dasharray:7 6}
.feedback{height:21px;min-height:21px;max-height:21px;font-size:8px;padding:1px 2px}
.tools{height:34px;gap:6px;padding:0 2px}.tools button{height:31px;padding:3px 7px;grid-template-columns:17px 1fr;gap:2px 4px;border-radius:8px}.tools strong{font-size:9px;align-self:center}.tools small{display:none}.tools svg{width:17px;height:17px}.tools button>span{grid-row:1}
@media(max-width:370px){.wordmark{font-size:12px;gap:3px}.wordmark small{font-size:4px}.logo-mark{width:20px}.topbar .voyage{padding:3px}.voyage h1{font-size:9px}.icon-button{width:27px;height:27px}.topbar{height:47px}}

#world>.berth-label>span:first-child{top:0}#berths-left{position:absolute;right:0;top:111px;background:#176873b8;border-radius:5px;padding:3px 5px;color:#fff4d0}.route-shadow{stroke-dasharray:8 7}.route-line{stroke-width:5;stroke-dasharray:8 7}.route-highlight{stroke:#fff6bd;stroke-width:2.4}

/* The outside return channel belongs to the same one-screen scene. */
#yard-panel>#yard{overflow:visible;background:linear-gradient(#137b8014,#075e7733)}
.exit-beacon{filter:drop-shadow(0 0 3px #ffe994)}
@media(max-height:620px){.topbar{height:36px}.feedback{height:17px;min-height:17px;max-height:17px}.tools{height:30px}.tools button{height:27px}.wordmark small{display:none}}

/* One tap launches. Keep the recovered action-bar space for the harbor. */
#yard .boat{z-index:4}.boat::after{inset:calc(-11px / var(--hit-scale-y)) calc(-11px / var(--hit-scale-x))!important}
.quay-stone.blocked-wall{fill:#f28e72;stroke:#fff6bd}.yard-help{font-size:9px}
.boat .capacity-tag{font-size:calc(10px / var(--map-pixel-scale-x,1));line-height:calc(14px / var(--map-pixel-scale-x,1));min-width:calc(22px / var(--map-pixel-scale-x,1));padding:0 calc(3px / var(--map-pixel-scale-x,1));white-space:nowrap;width:max-content}
.route-blocked{stroke:#ffb3a0}.boat.blocking{filter:drop-shadow(0 0 5px #ff826c)}
@media(max-height:699px){#berths,.berth{height:58px}.berth::before,.berth:last-child::after{height:52px}.channel-label{top:171px}#berths-left{top:75px}.exit-sign{top:190px}}

/* Compact service deck; the lower screen belongs to the harbor puzzle. */
#game{padding:7px 8px 7px}.topbar{height:66px!important;display:grid;grid-template-columns:78px minmax(0,1fr) 64px;gap:5px;align-items:center}
.wordmark{padding:0;gap:4px;letter-spacing:0;font-size:10px}.wordmark b{font-size:11px}.wordmark .logo-mark{width:23px;height:27px;font-size:26px}.wordmark small{display:block!important;font-size:6px;line-height:1.6;letter-spacing:0;color:#527966}.wordmark #career{font-size:8px;color:#346650;white-space:nowrap}
.topbar .voyage{height:59px;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;gap:0;margin:0;padding:3px 8px;align-items:center;text-align:center}.voyage h1{font-size:21px!important;line-height:1.05;font-weight:950;margin:0;letter-spacing:.7px}.run-clock{display:flex;gap:5px;align-items:center;color:#176b6a;line-height:1.25;margin-top:2px}.run-clock span{font-size:8px}#run-time{font-size:16px;font-weight:850;font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}#cumulative-time{font-size:9px;line-height:1.2;color:#557369;font-variant-numeric:tabular-nums;white-space:nowrap}.header-actions{gap:4px}.icon-button{width:29px;height:29px}
#world>.queue-heading{top:0;left:7px;right:7px;height:20px}#next-route{font-size:10px!important;min-height:19px;padding:2px 6px!important;gap:4px}.queue-heading #next-route .route-dot{width:12px;height:12px;font-size:8px}.boarding-count{background:#fff1cfe8;border:1px solid #f9e4b5;border-radius:6px;padding:2px 5px;color:#275e59;font-size:9px;line-height:1.2;white-space:nowrap}.boarding-count strong{font-size:11px;margin-right:2px}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
#world>.pier{top:23px;height:42px;border-radius:8px 8px 3px 3px}#tourists{left:0;right:0;bottom:5px;height:38px;padding-left:25px;gap:1px;overflow:hidden}#tourists .person{flex:0 0 29px;width:29px;height:36px;transform:none}#tourists .person:first-child{margin-right:3px}#tourists .traveler-art{width:22px;height:36px;max-width:22px;max-height:36px}#tourists .ticket-symbol{top:0;left:13px;width:9px;height:9px;min-width:9px;font-size:6px;line-height:8px}.front-label{font-size:8px;left:7px;bottom:13px;line-height:1}.pier-planks{height:10px;bottom:0}.pier-planks::before,.pier-planks::after{height:16px;width:5px}.pier-rope{height:8px}.pier .progress-track{position:absolute;bottom:0;left:0;right:0;height:2px;margin:0;background:#144f5d66}
#ticket-order{top:51px;right:7px;gap:3px}#ticket-order span{font-size:7px;padding:1px 3px;line-height:1.2}#world>.berth-label{top:66px;height:10px;left:7px;right:7px;font-size:7px}#world>.berth-label>span:first-child{top:0}#berths-left{top:0;right:0;padding:0 4px;background:#176873b8;font-size:7px}
#berths{top:72px;height:90px;align-items:start;overflow:visible;pointer-events:none}#berths .berth{width:var(--berth-w,37px);height:var(--berth-h,44px);margin:0 auto;border-radius:6px 6px 11px 11px;border-width:1.25px;background:#a8eee41a}.berth::before,.berth:last-child::after{height:calc(var(--berth-h,44px) - 6px);width:3px;top:1px;left:-3px}.berth:last-child::after{left:auto;right:-3px}.berth .berth-number{font-size:12px;font-weight:700}.reserve-label{top:15px;font-size:6px}.load-label{font-size:8px!important;padding:1px 3px!important;line-height:1.15!important;border-radius:4px}.channel-label{font-size:7px;padding:1px 4px;left:4px;line-height:1.2;pointer-events:none}.exit-sign{font-size:8px;z-index:7;pointer-events:none}.walking-person{width:20px;height:34px}
.tools{height:32px}.tools button{height:29px}.feedback{height:18px;min-height:18px;max-height:18px;font-size:8px}.ranking-list strong{text-align:right}.ranking-list strong small{display:block;font-size:10px;font-weight:600;color:#65765d;font-variant-numeric:tabular-nums}
@media(max-width:370px){.topbar{grid-template-columns:70px minmax(0,1fr) 60px;gap:4px}.wordmark b{font-size:10px}.wordmark .logo-mark{width:20px}.icon-button{width:27px;height:27px}.voyage h1{font-size:20px!important}}
@media(max-height:620px){.topbar{height:61px!important}.topbar .voyage{height:55px}.voyage h1{font-size:19px!important}#run-time{font-size:15px}.tools{height:29px}.tools button{height:27px}}