@font-face{font-family:HarborDisplay;src:url('assets/fonts/display.ttf')}@font-face{font-family:Harbor;src:url('assets/fonts/text.ttf');font-weight:100 900}@font-face{font-family:Harbor;src:url('assets/fonts/heavy.ttf');font-weight:900}
:root{font-family:Harbor,system-ui,sans-serif;color:#123754;background:#102b45;font-synthesis:none;--ink:#123754;--yellow:#ffce26;--cyan:#00c9ef;--orange:#ff683a}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:repeating-linear-gradient(135deg,#ffffff03 0 1px,transparent 1px 18px),radial-gradient(ellipse at center,#285a7c,#10263f)}button,a{-webkit-tap-highlight-color:transparent}button{font:900 14px Harbor;cursor:pointer;touch-action:manipulation;border:0}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}button:disabled{cursor:default;opacity:.55}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}
.stage{position:relative;width:min(100vw,510px);height:100dvh;max-height:1040px;isolation:isolate;overflow:hidden;box-shadow:0 0 80px #00152c88}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
header{position:absolute;inset:14px 16px auto;display:flex;align-items:center;justify-content:space-between;z-index:8;pointer-events:none}.brand{font-family:HarborDisplay;font-size:23px;text-decoration:none;color:#123754;pointer-events:auto}.brand span{color:#f85c32}.tools{display:flex;gap:8px;pointer-events:auto}.icon{width:44px;height:44px;color:#ebfaff;background:linear-gradient(#315d78,#133b56);border:1px solid #6b96a8;border-radius:11px;box-shadow:0 3px 0 #08243e,inset 0 2px 0 #ffffff28,inset 0 -2px 0 #071b302f;font-size:21px}
.home{position:absolute;inset:0;pointer-events:none}.hero{position:absolute;top:11%;width:100%;text-align:center}.eyebrow{display:block;font-size:10px;letter-spacing:2px;font-weight:900}.hero .eyebrow{color:#164765}.hero h1{font-family:HarborDisplay;letter-spacing:-4px;line-height:.82;font-size:clamp(68px,18vw,96px);margin:15px 0 14px;color:#fffdf1;transform:rotate(-5deg);-webkit-text-stroke:2px #12395b;text-shadow:1px 3px #12395b,2px 6px #12395b,3px 9px #12395b}.hero h1 span{color:#ffcf26}.hero p{font-weight:800;font-size:14px;line-height:1.4;margin:0;color:#174b66}.home-bottom{position:absolute;bottom:25px;left:24px;right:24px;pointer-events:auto}
.primary{display:flex;align-items:center;justify-content:space-between;width:100%;height:58px;padding:0 16px;border-radius:10px;background:linear-gradient(#ffdf46 0,#ffd129 45%,#ffc321 100%);color:#18374b;border:2px solid #ffe16a;box-shadow:0 5px 0 #ae7812,0 7px 0 #10365044,inset 0 2px #fff3a2,inset 0 -2px #efa817;font-size:19px;text-shadow:0 1px #fff18b55}.primary span{padding-left:20px;font-size:28px}.home-meta{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:11px;font-weight:900;color:#efffff;text-shadow:0 1px #00577c}.text-button{background:none;color:inherit;min-height:44px;padding:8px;text-decoration:underline;text-underline-offset:4px}
/* Crane instruments: one bright height cartridge and an enamel counter. */
.game-wordmark{display:none;font:22px/.85 HarborDisplay;color:#fff4cb;text-shadow:0 2px #071e34,1px 0 #123754,-1px 0 #123754;letter-spacing:-.7px}.game-wordmark span{color:#ffcd29}.stage[data-playing=true] header .brand{display:none}.stage[data-playing=true] .game-wordmark{display:block}.stage[data-playing=true] header{inset:10px 14px auto}
.hud{position:absolute;top:66px;left:12px;right:12px;color:#ecfbff;pointer-events:none;background:linear-gradient(115deg,#547d90,#2b526b 65%,#3c6479);border:1px solid #9bb7bc;border-radius:12px 12px 8px 8px;box-shadow:0 4px 0 #102e45,0 6px 0 #558594,0 9px 12px #16435827,inset 0 2px #cfdfd752}
.hud:before,.hud:after{content:'';position:absolute;top:5px;width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,#f0edce,#86a3a6 45%,#324e5f);box-shadow:0 1px 1px #08293a}.hud:before{left:5px}.hud:after{right:5px}
.instrument-body{display:grid;grid-template-columns:43% 1fr;gap:10px;padding:8px 10px 0}.altimeter{position:relative;height:78px;padding:5px 8px 5px 22px;border-radius:7px;background:linear-gradient(120deg,#ff9555,#ff7042 44%,#e85a34);border:1px solid #ffb773;box-shadow:0 2px #112e43,inset 0 2px #ffd99988,inset 0 -2px #b83f2877;color:#fff6d7}
.altimeter:before{content:'';position:absolute;left:6px;top:10px;bottom:10px;width:7px;background:repeating-linear-gradient(to bottom,#ffebb4 0 1px,transparent 1px 7px);border-left:1px solid #ffebb4}.altimeter:after{content:'';position:absolute;left:3px;top:33px;width:11px;height:10px;background:#163e55;clip-path:polygon(0 0,100% 50%,0 100%);filter:drop-shadow(0 1px #ffd7a7)}
.stat-label{display:block;font-size:10px;font-weight:900;line-height:13px;color:#622917}.altimeter strong{display:block;font:43px/.94 HarborDisplay;color:#fff7d9;text-shadow:0 2px #a63e24;white-space:nowrap}.altimeter strong small{font:900 13px Harbor;margin-left:4px;color:#692a1b;text-shadow:none}#count{display:block;font-size:10px;font-weight:800;color:#692a1b;line-height:13px}
.instruments{display:grid;grid-template-columns:minmax(0,1fr) 63px;gap:6px;align-items:center;padding:0 0 0 1px}.score-readout{min-width:0;padding-left:1px}.score-readout>span{font-size:10px;font-weight:800;color:#d0e1dd}.score-readout b{display:block;font:29px/1.05 HarborDisplay;letter-spacing:.2px;color:#fff4cd;text-shadow:0 2px #112e43}.score-readout small{display:block;font-size:9px;color:#b7d1d5;line-height:14px;margin-top:4px;white-space:nowrap}.weather{align-self:center;text-align:center;border-left:1px solid #0c304855;padding-left:6px}.windsock{display:block;width:44px;height:34px;margin:0 auto 2px;filter:drop-shadow(0 1px 1px #0e304777)}#wind-sock{transform-origin:9px 7px;transition:transform .5s}.weather>div{display:flex;align-items:center;justify-content:center;gap:2px}#wind-icon{font:900 13px Harbor;color:#ffde70}#wind{font:800 9px/11px Harbor;color:#e0ece2;max-width:49px}
.journey{position:relative;padding:7px 10px 8px;margin-top:3px;background:#123b5355;border-top:1px solid #9cbbc02b;border-radius:0 0 7px 7px}.goal-caption{display:flex;justify-content:space-between;line-height:13px;padding-right:50%}.goal-caption b{font-size:10px;font-weight:800;color:#dce8dd;white-space:nowrap}.goal-track{height:5px;margin-top:6px;border-radius:2px;overflow:hidden;background:repeating-linear-gradient(90deg,#749dab 0 1px,transparent 1px 14px),#0b2d42;box-shadow:inset 0 1px 2px #001f35}.goal-track i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#fff1aa 0 1px,transparent 1px 14px),linear-gradient(#ffe36b,#efbc24);transition:width .3s}.streak-strip{position:absolute;top:7px;right:10px;display:flex;align-items:center;gap:7px;color:#ffdf76;font-size:10px;line-height:13px;font-weight:900}.streak-lights{display:flex;gap:3px}.streak-lights i{width:5px;height:9px;background:#0e2e42;border:1px solid #7693a04a;box-shadow:inset 0 1px 2px #01192d;border-radius:1px}.streak-lights i.lit{background:#ffce37;border-color:#ffeb96;box-shadow:0 0 4px #ffd95244}
.toast{position:absolute;bottom:0;left:0;right:0;min-height:38px;display:grid;place-items:center;padding:6px 8px;border-radius:0 0 7px 7px;background:linear-gradient(#ffdd5a,#f6c839);border-top:1px solid #fff0a7;font-size:12px;font-weight:900;color:#183b4c;transform:translateY(-2px);opacity:0;pointer-events:none;z-index:3;transition:.2s}.toast.show{transform:translateY(0);opacity:1}.stage:has(.toast.show) .journey{visibility:hidden}
/* Material bays and a separate rotary control. The release key carries a hook. */
.controls{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(110deg,#345d76,#1c405a);border-top:1px solid #a5c1c2;padding:10px 12px max(13px,env(safe-area-inset-bottom));box-shadow:0 -5px 0 #0e344c,0 -7px 0 #74a5ad,0 -10px 16px #0d455c33,inset 0 2px #9abbb233}
.controls:before{content:'';position:absolute;top:-5px;left:12px;right:12px;height:4px;background:repeating-linear-gradient(120deg,#f5cb3c 0 9px,#284450 9px 18px);border-radius:2px}.queue-heading{display:flex;justify-content:space-between;align-items:center;font-size:11px;line-height:14px;color:#dceae4;margin-bottom:8px}.cargo-status{display:flex;gap:5px;align-items:center;color:#c5e4d9;font-size:10px}.cargo-status:before{content:'';width:6px;height:6px;background:#a9dd69;border:1px solid #def5a3;border-radius:50%;box-shadow:0 0 4px #afe27733}.is-settling .cargo-status:before{background:#ffbf53;border-color:#ffdc8c}
.queue{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.piece{height:77px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px 5px 7px;border:1px solid #12354c;border-bottom:3px solid #0b2d44;border-radius:7px;background:linear-gradient(#2a5068,#163a52);color:#d5e5e3;box-shadow:inset 0 3px 5px #071e3577,0 1px 0 #7596a766;isolation:isolate}.piece:before{content:'';position:absolute;left:8px;right:8px;bottom:28px;height:7px;background:#0a2c413d;border-radius:50%;z-index:-1}.piece.active{border:2px solid #ffe093;border-bottom:4px solid #c18d26;background:linear-gradient(#edf0d6,#c5d6c5);color:#183d50;box-shadow:inset 0 2px #fff9ce,0 2px #102f44}.piece-shortcut{position:absolute;left:6px;top:4px;font:800 9px Harbor;color:#95b7c5}.piece.active .piece-shortcut{color:#56776d}.piece.active:after{content:'';position:absolute;right:6px;top:5px;width:6px;height:6px;background:#193f51;border-radius:50%;box-shadow:inset 0 1px 1px #092639}.piece svg{width:85%;height:45px;max-width:100px;flex-shrink:0;filter:drop-shadow(2px 4px 1px #041c3150)}.piece-label{display:flex;align-items:baseline;justify-content:center;gap:5px;font-size:11px;line-height:14px;white-space:nowrap}.piece-label small{font-size:9px;font-weight:600;color:#a8c5cf}.piece.active .piece-label small{color:#476451}.piece:disabled{opacity:.7}
.drop-row{display:flex;gap:11px;margin-top:11px}.rotate{flex:0 0 78px;position:relative;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 5px;border:1px solid #8cacb6;border-bottom:3px solid #0b283d;border-radius:9px;background:linear-gradient(#4e778d,#254c65);color:#e4f3ec;box-shadow:inset 0 2px #d9e5d14d,0 2px 0 #102b3d}.rotate b{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;border:1px solid #87a4ae;background:radial-gradient(circle at 40% 30%,#42677e,#153c54);box-shadow:0 2px #0d2e43;font:25px/1 Harbor}.rotate span{font-size:10px}.rotate.turned{color:#ffdf72}.rotate.turned b{transform:rotate(90deg);border-color:#ffdf72}.drop{flex:1;height:54px;border-radius:9px;padding:0 14px 0 18px;box-shadow:0 4px #9c6a10,inset 0 2px #fff0a7,inset 0 -2px #e9af24;font-size:19px}.drop .drop-label{font-size:19px;padding:0}.drop .drop-hook{width:36px;height:36px;padding:0 0 0 9px;border-left:1px solid #94632350;display:grid;place-items:center;box-sizing:content-box}.drop-hook svg{height:34px;width:30px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
/* A hanging site board: a survey of the actual tower, with a measuring staff. */
.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#072c46b3;backdrop-filter:blur(4px);padding:30px 20px 20px;overflow:auto}.overlay-content{position:relative;width:100%;max-width:360px;background:linear-gradient(120deg,#406a7b,#234d65 65%);color:#e6f7fa;border:1px solid #8ca8a9;border-radius:12px;padding:23px 20px 15px;text-align:center;box-shadow:0 7px 0 #102e42,0 9px 0 #537886,0 22px 45px #001c3380,inset 0 2px 0 #d1daca40}
.board-clip{position:absolute;top:-11px;left:calc(50% - 37px);width:74px;height:20px;border:1px solid #103045;border-radius:5px;background:linear-gradient(#a4b5b2 0,#628492 35%,#30566b 40%,#466879 95%);box-shadow:0 3px 2px #0b2f4b66,inset 0 1px #eef0cf80}.board-clip:before{content:'';position:absolute;left:29px;top:-5px;width:14px;height:9px;border:3px solid #98a8a0;background:#13384d;border-radius:5px}.board-clip:after{content:'';position:absolute;left:7px;right:7px;top:6px;height:1px;background:#c8d3c48a;box-shadow:0 4px 0 #143a50}
.overlay-content:before,.overlay-content:after{content:'';position:absolute;top:9px;width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,#d4decc,#416475);box-shadow:0 1px 1px #102d3b}.overlay-content:before{left:9px}.overlay-content:after{right:9px}.medal{font-size:32px;font-family:HarborDisplay;color:#ffcd26;line-height:1.1;margin:5px 0 12px}.medal:empty{display:none}.overlay h2{font:35px/1 HarborDisplay;margin:13px 0;color:#fff1ba}.overlay p{font-size:12px;line-height:1.5;color:#bed7dc;margin:12px 0}.overlay .eyebrow{font-size:8px;letter-spacing:1.6px;color:#b3cdd0}.overlay .primary{font-size:15px;margin-top:15px;height:52px}.overlay .text-button{font-size:12px;margin-top:11px;color:#bdd4d9}.overlay[data-mode=result] h2{font-size:29px;margin:12px 0 15px}.overlay[data-mode=result] p{font-size:10px;margin:12px 0 6px}
.survey{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #153548;border-bottom-color:#74939d;border-radius:5px;background:linear-gradient(120deg,#12384e,#0e3046);box-shadow:inset 0 3px 10px #07273c80;overflow:hidden;text-align:left}.survey-tower{padding:8px 0 6px 8px;min-width:0}.survey-tower svg{width:100%;height:158px;display:block}.survey-tower>span{display:block;font-size:7px;text-align:center;color:#7fa8b7;margin:3px 0}.survey-reading{padding:23px 9px 12px 13px;display:flex;flex-direction:column;justify-content:center}.survey-reading>span{font-size:9px;color:#a8c4cb}.survey-reading strong{font:58px/1 HarborDisplay;color:#ffdb60;white-space:nowrap;text-shadow:0 3px #092638}.survey-reading strong small{font:900 15px Harbor;margin-left:3px;color:#cbd9cd}.survey-score{display:flex;align-items:baseline;gap:5px;border-top:1px solid #6c8c9844;margin-top:12px;padding-top:9px}.survey-score b{font:21px HarborDisplay;color:#e5efdc}.survey-score span{font-size:8px;color:#96b5be}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:12px 0 0;border-top:1px solid #7494a144;border-bottom:1px solid #0d354c88;padding:9px 0}.result-stats>div{display:flex;flex-direction:column;gap:3px;border-right:1px solid #7793a03b}.result-stats>div:last-child{border:0}.result-stats b{font:22px HarborDisplay;color:#fff0ba}.result-stats span{font-size:8px;color:#b0ccd1}
.desktop-note,.desktop-right{position:absolute;width:180px;color:#87aaba}.desktop-note{right:calc(50% + 310px)}.desktop-note a{color:#e3f7ff;text-decoration:none;font:28px HarborDisplay}.desktop-note a span{color:#ffd026}.desktop-note p{font:32px/1.05 HarborDisplay;color:#f1f8e9}.desktop-note small{font-size:11px;letter-spacing:1px}.desktop-right{left:calc(50% + 310px);font-size:13px}.stack-icon{display:flex;flex-direction:column;align-items:flex-start;gap:5px;transform:rotate(-6deg)}.stack-icon i{height:18px;width:70px;border-radius:3px;background:#ffce26;border-bottom:4px solid #bd850b}.stack-icon i:nth-child(2){background:#ff593b;width:45px;margin-left:7px;border-color:#b23024}.stack-icon i:nth-child(3){background:#00b9ef;width:84px;border-color:#00769c}.desktop-right p{line-height:1.7}
@media(max-width:1050px){.desktop-note,.desktop-right{display:none}}
@media(max-width:360px){header{inset:10px 12px auto}.hud{left:10px;right:10px}.instrument-body{gap:8px;padding:8px 8px 0;grid-template-columns:42% 1fr}.altimeter{padding-left:19px}.altimeter strong{font-size:40px}.instruments{grid-template-columns:minmax(0,1fr) 54px;gap:3px}.score-readout b{font-size:25px}.score-readout small{font-size:8px}#wind{font-size:8px}.weather{padding-left:3px}.windsock{width:38px}.queue{gap:7px}.piece-label{font-size:11px}.piece-label small{display:inline;font-size:9px}.controls{padding-left:10px;padding-right:10px}.queue-heading{font-size:10px}.streak-strip{gap:5px;font-size:9px}.streak-lights{gap:2px}.streak-lights i{width:4px}.goal-caption b{font-size:9px}.hero h1{font-size:69px}.hero p{font-size:12px}.overlay{padding:24px 14px 18px}.overlay-content{padding:22px 16px 11px}.survey-reading{padding-left:8px}.survey-reading strong{font-size:48px}}
@media(max-height:680px){header{top:9px}.hud{top:61px}.instrument-body{padding-top:6px}.altimeter{height:67px;padding-top:3px}.altimeter strong{font-size:34px}.stat-label,#count{font-size:9px;line-height:12px}.score-readout b{font-size:25px}.journey{margin-top:3px;padding-top:5px;padding-bottom:6px}.streak-strip{top:5px}.goal-track{margin-top:4px}.toast{min-height:33px;font-size:11px}.controls{padding-top:8px;padding-bottom:10px}.piece{height:62px;padding-top:1px;padding-bottom:4px}.piece svg{height:35px}.piece-label{line-height:13px}.drop-row{margin-top:8px}.drop{height:46px}.drop .drop-label{font-size:17px}.drop-hook svg{height:29px}.queue-heading{margin-bottom:6px;font-size:10px}.hero{top:11%}.hero h1{font-size:64px;margin:10px 0 12px}.hero p{font-size:12px}.home-bottom{bottom:17px;left:20px;right:20px}.home-bottom .primary{height:49px;font-size:16px}.home-meta{margin-top:8px;font-size:9px}.overlay{padding:23px 14px 18px}.overlay-content{padding:19px 16px 8px}.overlay h2{font-size:30px}.overlay[data-mode=result] h2{font-size:25px;margin:9px 0 11px}.overlay p{font-size:11px}.medal{font-size:25px;margin:4px 0 9px}.survey-tower svg{height:123px}.survey-reading{padding-top:12px;padding-bottom:7px}.survey-reading strong{font-size:47px}.survey-score{margin-top:8px;padding-top:6px}.survey-score b{font-size:18px}.result-stats{margin-top:9px;padding:7px 0}.result-stats b{font-size:20px}.overlay .primary{height:46px;margin-top:11px}.overlay .text-button{margin-top:7px}.overlay[data-mode=result] p{margin-top:8px;font-size:9px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}