:root{color-scheme:light;--sand:#f2eddf;--ink:#173f48;--sea:#174c5a;--muted:#526b61;--line:#ced7ce;--wood:#c68d4e;--serif:Georgia,'Times New Roman',serif;--sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-underline-offset:4px}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.35;cursor:default}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #b96b35;outline-offset:4px}button:focus:not(:focus-visible){outline:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:10px;left:10px;transform:translateY(-150%);background:var(--sea);color:white;padding:12px;z-index:10}.skip-link:focus{transform:none}header,footer{max-width:1140px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:25px 42px}.brand{display:flex;gap:11px;align-items:center;font:700 27px/1 var(--serif);letter-spacing:-1px;text-decoration:none}.guide-link{font-size:12px;text-decoration:none}.guide-link:hover{text-decoration:underline}header{border-bottom:1px solid var(--line)}main{max-width:1040px;margin:32px auto 50px;padding:0 40px}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.heading h1{font:normal 41px/1.2 var(--serif);letter-spacing:-1.2px;margin:0 0 9px}.heading p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}.modes{display:flex;border:1px solid #b7c6c2;border-radius:6px;padding:3px;flex:none}.modes button{border:0;border-radius:3px;padding:10px 16px;font-size:12px;min-height:38px;background:none}.modes button[aria-pressed=true]{background:var(--sea);color:#f9f3e5}.modes button[aria-pressed=false]:hover{background:#e0e5d9}.harbor-layout{display:grid;grid-template-columns:minmax(340px,610px) minmax(185px,1fr);gap:44px;align-items:start}#game{min-width:0}.level-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.level-heading h2{font-size:14px;font-weight:650;letter-spacing:-.1px;margin:0}.level-heading>span{font-size:10px;color:#526b61}.harbor-frame{background:var(--sea);padding:15px 15px 0;border:1px solid #153e48;border-radius:9px;box-shadow:0 5px 0 #b8c9c1}.board{display:grid;grid-template-rows:repeat(var(--rows),1fr);aspect-ratio:var(--cols)/var(--rows);width:100%;background:#275c68;overflow:hidden;border-radius:4px}.board-row{display:grid;grid-template-columns:repeat(var(--cols),1fr);min-height:0}.cell{padding:0;min-height:0;min-width:0;border:0;border-radius:0;background:#ede0bd;box-shadow:inset -1px -1px 0 #92774629;position:relative;display:flex;align-items:center;justify-content:center;touch-action:manipulation}.cell.floor{background-image:linear-gradient(90deg,transparent 49%,#bcaa7e1c 50%,transparent 51%)}.cell.wall{background:#275e6a;box-shadow:none;cursor:default}.cell.wall:before{content:'';width:40%;height:8px;border-bottom:1px solid #65929a3d;border-radius:50%;transform:rotate(-7deg)}.cell.floor:after{content:'';position:absolute;left:5px;top:5px;width:2px;height:2px;background:#b9a878;border-radius:50%;opacity:.5}.cell.goal:before{content:'';width:43%;height:43%;border:3px solid #456f66;border-radius:50%;background:#91b8a81c;box-shadow:0 0 0 3px #f7efd44d}.cell svg{position:absolute;width:88%;height:88%;pointer-events:none;z-index:2}.cell.player svg{width:74%;height:74%}.cell.on-goal{background:#bad2b3}.cell.hinted{box-shadow:inset 0 0 0 3px #ad4b2b;z-index:3}.cell.trapped:after{content:'!';position:absolute;inset:auto 4px 4px auto;width:17px;height:17px;display:flex;align-items:center;justify-content:center;font:bold 11px var(--sans);color:white;background:#ad4b32;border-radius:50%;opacity:1;z-index:4}.cell.floor:hover{filter:brightness(1.025)}.cell:focus-visible{outline:3px solid #173f48;outline-offset:-4px;z-index:4}.dock-ledger{display:flex;justify-content:space-between;gap:10px;padding:14px 1px;color:#bcd5cc;font-size:10px;line-height:1.4;font-variant-numeric:tabular-nums}.dock-ledger b{font-weight:600;color:#ecf1dd}.separator{margin:0 4px;color:#7fa59f}.dock-ledger time{color:#d7e4d8}.controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px}.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,48px);gap:5px}.dpad button{border:1px solid #a7bdb5;background:#e4e9da;border-radius:7px;box-shadow:0 3px 0 #bacbbf;font-size:24px;line-height:1;min-width:48px;min-height:48px}.dpad button:hover{background:#d5e0d0}.dpad button:active{transform:translateY(2px);box-shadow:0 1px 0 #bacbbf}.dpad button[data-direction=U]{grid-area:1/2}.dpad button[data-direction=L]{grid-area:2/1}.dpad button[data-direction=D]{grid-area:2/2}.dpad button[data-direction=R]{grid-area:2/3}.dpad button.hint-direction{border:2px solid #bd6c38;background:#ead1a7}.actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:230px}.actions button{border:0;border-radius:5px;background:transparent;font-size:12px;min-height:44px;padding:10px 12px}.actions button:not(:disabled):hover{background:#dfe5d7}.actions #hint{background:var(--sea);color:#f4efdf;min-width:85px;display:flex;justify-content:space-between;align-items:center;gap:12px}.actions #hint:not(:disabled):hover{background:#286372}.status{font-size:12px;line-height:1.7;color:#526b61;min-height:42px;margin:16px 0 0}.status.error{color:#a34e31}.hint-panel{border-block:1px solid #becbc0;padding:16px 0;margin-bottom:18px}.hint-panel p{font-size:13px;line-height:1.7;margin:0 0 13px}.hint-panel>div{display:flex;gap:15px;align-items:center}.hint-panel button{min-height:42px;background:var(--sea);color:var(--sand);border:1px solid var(--sea);border-radius:5px;font-size:12px;padding:10px 15px}.hint-panel #dismiss-hint{background:none;border-color:transparent;color:var(--ink);padding-inline:0;text-decoration:underline;text-underline-offset:3px}.completion{display:flex;justify-content:space-between;gap:20px;align-items:center;border-block:1px solid #98b6a4;padding:17px 0;margin-bottom:18px}.completion h2{font:28px/1.3 var(--serif);letter-spacing:-.7px;margin:0 0 5px}.completion p{font-size:11px;margin:0;color:var(--muted)}.completion button,.navigation button{background:none;border:0;font-size:12px;padding:10px 0;min-height:44px}.completion button:hover,.navigation button:hover{text-decoration:underline}.navigation{display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:7px}.navigation>span{font-size:10px;color:var(--muted);text-align:center}.save-problem{border:1px solid #be8f68;background:#efe0ca;border-radius:5px;padding:13px 15px;margin-top:15px}.save-problem p{font-size:12px;line-height:1.7;margin:0 0 10px}.save-problem>div{display:flex;flex-wrap:wrap;gap:10px}.save-problem button{min-height:42px;background:none;border:1px solid #9f7856;border-radius:4px;font-size:12px;padding:9px 12px}.save-problem button:hover{background:#e8d6ba}
.dock-notes{padding-top:38px}.dock-notes h2{font:27px/1.2 var(--serif);letter-spacing:-.6px;margin:0 0 23px}.lesson{padding:0 0 17px;border-bottom:1px solid var(--line)}.lesson-art{display:flex;align-items:center;gap:7px;min-height:42px}.tiny-sailor{width:24px;height:29px;background:#f8f5e9;border:2px solid var(--sea);border-radius:12px 12px 8px 8px;position:relative}.tiny-sailor:before{content:'';position:absolute;top:-3px;left:-3px;right:-3px;height:8px;background:#da7654;border-radius:6px 6px 2px 2px}.tiny-crate{width:33px;height:33px;border:3px solid #ad753e;background:linear-gradient(45deg,transparent 45%,#f0c789 46%,#f0c789 54%,transparent 55%),linear-gradient(-45deg,transparent 45%,#f0c789 46%,#f0c789 54%,transparent 55%),#cc9653;border-radius:3px}.tiny-goal{width:31px;height:31px;border:3px solid #456f66;border-radius:50%}.lesson-arrow{font-size:20px;color:#76998d}.lesson p,.dock-notes li{font-size:12px;line-height:1.8;color:#526b61}.lesson p{margin:14px 0 0}.dock-notes ul{list-style:none;padding:0;margin:21px 0}.dock-notes li{padding-left:15px;position:relative;margin-bottom:12px}.dock-notes li:before{content:'';position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:#719689}.rescue-note{border-left:2px solid #c89458;padding-left:16px;margin-top:25px}.rescue-note h3{font-size:12px;font-weight:650;margin:0 0 8px}.rescue-note p{font-size:11px;line-height:1.8;color:#526b61;margin:0}.keyboard-note{font-size:10px;line-height:1.8;color:#526b61;margin:23px 0 18px}.more-rules{font-size:10px;text-decoration:none}.more-rules:hover{text-decoration:underline}footer{border-top:1px solid var(--line);justify-content:flex-end;font-size:11px;color:#526b61;padding-block:22px 28px}footer a{text-decoration:none}footer a:hover{text-decoration:underline}.no-script{padding:20px;text-align:center}
.guide{max-width:820px;margin:38px auto 70px;padding:0 35px}.guide h1{font:44px/1.2 var(--serif);letter-spacing:-1px;margin:0 0 20px}.guide h2{font:29px/1.3 var(--serif);letter-spacing:-.5px;margin:35px 0 15px}.guide p,.guide li{font-size:15px;line-height:1.85;color:#526b61}.guide ol,.guide ul{padding-left:23px}.guide li{padding-left:6px;margin-bottom:10px}.guide strong{color:var(--ink)}.guide kbd{font:12px var(--sans);padding:2px 5px;background:#e5e8da;border:1px solid #b3c4b7;border-radius:3px}.guide figure{margin:25px 0;padding:22px 0;border-block:1px solid var(--line)}.guide figure svg{width:100%;height:auto;max-width:620px}.guide figcaption{font-size:13px;line-height:1.8;color:#526b61;margin-top:14px}.play-link{display:inline-block;background:var(--sea);color:var(--sand);padding:13px 20px;text-decoration:none;border-radius:5px;font-size:13px;margin-top:12px}
@media(max-width:860px){header,footer{padding-inline:28px}main{padding-inline:28px}.harbor-layout{gap:26px;grid-template-columns:minmax(320px,1fr) 180px}.dock-notes h2{font-size:24px}.controls{gap:10px}.actions{max-width:165px}.dpad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,46px)}.dpad button{min-height:46px}.lesson-art{gap:5px}.tiny-goal{width:26px;height:26px}.tiny-crate{width:29px;height:29px}.tiny-sailor{width:22px}}
@media(max-width:680px){header{padding:16px 18px}.brand{font-size:26px}.brand img{width:30px;height:30px}.guide-link{font-size:11px}main{max-width:570px;margin:22px auto 35px;padding:0 16px}.heading{display:block;margin-bottom:18px}.heading h1{font-size:31px;letter-spacing:-.8px;margin-bottom:7px}.heading p{font-size:11px}.modes{display:inline-flex;margin-top:14px}.modes button{font-size:11px;padding:8px 16px;min-height:35px}.harbor-layout{display:block}.level-heading{margin-bottom:11px}.level-heading h2{font-size:13px}.harbor-frame{padding:10px 10px 0;border-radius:7px}.dock-ledger{font-size:9px;padding:12px 0;gap:4px}.separator{margin:0 2px}.controls{margin-top:21px;gap:14px}.dpad{grid-template-columns:repeat(3,50px);grid-template-rows:repeat(2,48px)}.dpad button{min-width:48px;min-height:48px}.actions{max-width:160px;gap:2px}.actions button{font-size:11px;padding:9px 11px}.actions #hint{min-width:78px}.status{font-size:11px;margin-top:13px;min-height:38px}.navigation button{font-size:11px}.navigation>span{font-size:9px}.dock-notes{padding-top:27px;margin-top:20px;border-top:1px solid var(--line)}.dock-notes h2{font-size:27px;margin-bottom:18px}.lesson{max-width:370px;display:flex;gap:20px;align-items:center}.lesson-art{flex:none}.lesson p{margin:0;font-size:11px}.dock-notes li{font-size:12px}.keyboard-note{display:none}.rescue-note{max-width:350px}.more-rules{display:inline-block;margin-top:19px;font-size:11px}.guide{padding:0 22px;margin-top:27px}.guide h1{font-size:36px}.guide p,.guide li{font-size:14px}footer{padding:20px 18px;font-size:10px}}
@media(max-width:360px){main{padding-inline:12px}.controls{gap:9px}.dpad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,46px)}.dpad button{min-width:46px;min-height:46px}.actions button{padding:9px}.actions{max-width:140px}.dock-ledger{font-size:8px}.lesson{display:block}.lesson p{margin-top:13px}.completion h2{font-size:23px}}
.confirm-dialog{max-width:450px;width:calc(100% - 36px);padding:25px;border:1px solid #78978a;border-radius:8px;background:var(--sand);color:var(--ink);box-shadow:0 20px 80px #133f4840}.confirm-dialog::backdrop{background:#173f4866}.confirm-dialog h2{font:27px/1.25 var(--serif);letter-spacing:-.6px;margin:0 0 14px}.confirm-dialog p{font-size:13px;line-height:1.75;color:#526b61;margin:0 0 22px}.confirm-dialog form>div{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}.confirm-dialog button{min-height:44px;border:1px solid #9cb3a5;background:#e1e7d8;border-radius:5px;padding:10px 14px;font-size:12px}.confirm-dialog [data-action]{background:#9b5134;border-color:#9b5134;color:#fff8ea}.confirm-dialog button:hover{filter:brightness(.96)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep compact controls usable without changing the puzzle cell geometry. */
.modes button,.hint-panel button,.save-problem button{min-height:44px}.guide-link{display:inline-flex;align-items:center;min-height:44px}

.cell.on-goal:after{content:"✓";position:absolute;inset:auto 4px 4px auto;width:17px;height:17px;display:flex;align-items:center;justify-content:center;font:bold 11px var(--sans);color:#fff;background:#335e49;border-radius:50%;opacity:1;z-index:4}