*{box-sizing:border-box}html{background:#101f2b}body{margin:0;background:radial-gradient(ellipse at top,#2d4d59,#101f2b 75%);color:#f4e4c3;font-family:system-ui,Arial;min-height:100dvh;--accent:#f3c56d}main{max-width:540px;margin:auto;padding:15px 14px 22px}header{text-align:center;padding-bottom:15px}.brand{text-decoration:none;color:#f5dba5;font-weight:900;font-size:14px;letter-spacing:2px}.brand span{color:#b3c9c6;font-size:10px}.edition{display:none}.heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:2px;color:var(--accent);margin:0 0 5px}h1{font:27px/1.05 Georgia;margin:0 0 6px;letter-spacing:-.7px}#tag{font-size:11px;color:#a3bdc1;margin:0}.counter{background:#0b202c;border:1px solid #3b5961;min-width:63px;text-align:center;border-radius:13px;padding:7px}.counter strong{display:block;font-size:25px;color:var(--accent)}.counter span{font-size:7px;font-weight:800;letter-spacing:1px}nav{display:flex;gap:7px;margin-bottom:12px}button{touch-action:manipulation;cursor:pointer;min-height:46px;font:700 12px system-ui;color:#d8e7de;background:#243f4b;border:1px solid #41616b;border-radius:12px;padding:9px 13px}button:hover{filter:brightness(1.15)}button:focus-visible,[role=button]:focus-visible{outline:3px solid #ffe49b;outline-offset:2px}nav button{flex:1;padding:7px 0;min-height:44px;font-size:13px;box-shadow:0 3px 0 #0c202a}nav small{display:none}nav button.active{color:#243444;background:var(--accent);border-color:var(--accent)}.game{background:#172f3e;border:1px solid #56706a;border-radius:22px;overflow:hidden;box-shadow:0 14px 38px #0005}.scene{line-height:0}svg{width:100%;height:auto;display:block}.scene-title{font:700 12px system-ui;letter-spacing:3px;fill:#fff0cb}.bank-label{font:800 10px system-ui;letter-spacing:2px;fill:#edddba;paint-order:stroke;stroke:#344c57;stroke-width:3px}#boat,.actor{transition:transform .4s ease-in-out}#boat.sailing,.actor.sailing{transition-duration:1.1s}.actor{cursor:pointer;outline:none}.actor .character-art,.actor text{pointer-events:none}.actor text{font:700 13px system-ui;fill:#fff1cd;paint-order:stroke;stroke:#314a49;stroke-width:4px;stroke-linejoin:round}.actor:hover .ground,.actor:focus-visible .ground{fill:#ffe49b;opacity:.65}.actor.onboard .ground{fill:#f2d37b;opacity:.6}.controlbar{padding:10px 14px 14px;background:#172e3a;border-top:1px solid #3b5961}#status{margin:0 0 10px;font-size:12px;line-height:1.4;min-height:34px;text-align:center;color:#c4d7d4}.primary{background:linear-gradient(#f5d18a,#dba858);color:#293a42;border:1px solid #ffe3a6;border-bottom:4px solid #aa783e;width:100%;font-size:15px;min-height:51px;border-radius:13px;box-shadow:0 4px 12px #0003}.primary:disabled{background:#304a54;border-color:#4a6670;color:#90a5a6;box-shadow:none}button:disabled{cursor:default;opacity:.65}.bottom{padding-top:13px}.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.tools button{font-size:11px;padding:8px 3px}#record{display:block;text-align:center;font-size:10px;color:#a1b8b8;margin:10px 0}#rulebox{display:flex;gap:10px;background:#1d3642;border:1px solid #36535e;border-radius:14px;padding:12px;color:#b9cfcd}#rulebox[hidden]{display:none}.rule-mark{background:#42555b;color:#f1d39c;width:21px;height:21px;border-radius:50%;flex-shrink:0;text-align:center;font-weight:bold}#ruletext{font-size:11px;line-height:1.6;margin:0}#win{margin-top:13px;padding:20px;background:#304d4b;border:1px solid #c7b77a;border-radius:18px;text-align:center}#win h2{font:26px Georgia;margin:0 0 8px}#win p{font-size:13px}footer{display:flex;justify-content:space-between;gap:20px;font-size:8px;line-height:1.5;color:#77979c;margin-top:16px}body[data-level="1"]{background:radial-gradient(ellipse at top,#49405a,#161f32 75%)}body[data-level="2"]{background:radial-gradient(ellipse at top,#61445d,#251e35 75%)}body[data-level="3"]{background:radial-gradient(ellipse at top,#2e5547,#112c2e 75%)}body[data-level="4"]{background:radial-gradient(ellipse at top,#253754,#0b152c 75%)}@media(min-width:700px){main{padding-top:24px}h1{font-size:32px}}@media(max-width:360px){main{padding:10px}h1{font-size:23px}.brand{font-size:12px}#tag{font-size:10px}}@media(prefers-reduced-motion:reduce){#boat,.actor{transition:none!important}}
/* Classic side-view edition */
main{max-width:680px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom))}.heading{margin-bottom:12px}.game{border-radius:16px}.scene{background:#2c5769}#world{overflow:hidden}.actor{transition:transform .5s cubic-bezier(.3,.1,.3,1)}#boat,#boat2,#boatfront,#boatfront2{transition:transform .5s ease;pointer-events:none}.boatfront{pointer-events:none}.actor text{font-size:17px;stroke-width:4px}.actor .weight-label{font-size:15px;fill:#ffe1a6}.scene-title{font-size:14px}.bank-label{font-size:12px}.actor .character-art{transform-origin:0 0}.actor.small-passenger .character-art{transform:scale(.75)}.actor.explorer .character-art{transform:scale(.7)}.actor.onboard text,.actor.onboard .weight-label{display:none}.actor.onboard .ground{opacity:0}.actor.onboard .hitbox{y:-120px;height:120px}.rowing-arms{display:none}.rowing .rowing-arms{display:block;transform-origin:-18px -49px;animation:armStroke 1s ease-in-out infinite}.rowing .character-art>g:first-child{animation:rowBody 1s ease-in-out infinite;transform-origin:0 -10px}.sailing .hull-bob{animation:boatBob 1s ease-in-out infinite}.sailing .rowing-oar{animation:oarStroke 1s ease-in-out infinite;transform-origin:-28px -14px}.sailing .splash{animation:splash .999s ease-out infinite}.splash{opacity:0}.wake{opacity:.3}.sailing .wake{animation:wake 1s ease-out infinite}.water-lines{animation:waterDrift 5s ease-in-out infinite}.actor.sailing,#boat.sailing,#boat2.sailing,#boatfront.sailing,#boatfront2.sailing{transition-duration:3.1s;transition-timing-function:cubic-bezier(.22,.05,.65,1)}.actor.jumping{transition:transform .65s ease}.jumping .character-art{animation:hop .65s ease}.stone{cursor:pointer}.stone-count{font:800 22px system-ui;fill:#254847}.stone-name{font:700 17px system-ui;fill:#f4e9bd;paint-order:stroke;stroke:#2a4e52;stroke-width:4px}.stone.sunk .stone-rock{opacity:.15;transform:translateY(15px);transition:.5s}.stone.sunk .stone-count{opacity:0}.stone .crack{opacity:0}.stone.cracked .crack{opacity:1}.stone.reachable ellipse{stroke:#f8df9b}.stone:focus-visible{outline:3px solid #f8df9b}.stone .gem{filter:drop-shadow(0 0 7px #bce8bd)}#cargo{text-align:center;font-size:11px;color:#f1d295;font-weight:700;margin:0 0 7px;min-height:16px}#status{min-height:32px;font-size:12px}.controlbar{padding:12px}.tools button{min-height:44px}#boatselect{display:flex;gap:7px;margin-bottom:9px}#boatselect[hidden]{display:none}#boatselect button{flex:1;font-size:10px;padding:6px}#boatselect .selected{background:#d9b878;color:#233d4a;border-color:#f0d59d}.completed{font-size:10px;padding-left:5px}.invalid{animation:warn .3s ease}footer{font-size:9px}.counter{min-width:60px}#rulebox{margin-top:8px}.primary{min-height:49px}#sail[hidden]{display:none}body[data-level="2"]{background:radial-gradient(ellipse at top,#35596a,#152735 75%)}body[data-level="3"]{background:radial-gradient(ellipse at top,#31594e,#132e32 75%)}
@keyframes armStroke{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(24deg)}}@keyframes rowBody{0%,100%{translate:-3px 0;rotate:-3deg}50%{translate:3px 1px;rotate:4deg}}@keyframes oarStroke{0%,100%{transform:rotate(-26deg)}45%{transform:rotate(12deg)}70%{transform:rotate(5deg)}}@keyframes boatBob{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(3px) rotate(.7deg)}}@keyframes splash{0%,40%,100%{opacity:0}50%{opacity:.9}85%{opacity:0;transform:translate(7px,4px)}}@keyframes wake{0%{opacity:.6;transform:scaleX(.95)}100%{opacity:0;transform:scaleX(1.18)}}@keyframes waterDrift{50%{transform:translateX(10px)}}@keyframes hop{0%,100%{translate:0 0}50%{translate:0 -55px}}@keyframes warn{25%,75%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@media(max-width:600px){main{padding-left:10px;padding-right:10px}header{padding-bottom:12px}h1{font-size:25px}.heading{min-height:64px}.game{border-radius:13px}.actor text{font-size:19px}.actor .weight-label{font-size:17px}.scene-title{font-size:16px}.bank-label{font-size:14px}nav{gap:6px}nav button{min-height:44px}footer{margin-top:12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.rowing .rest-arms{display:none}.actor.rowing .character-art>g:first-child{animation:rowBody 1s ease-in-out infinite}.actor[data-id="0"].rowing .rowing-arms{display:block}
.initializing .actor,.initializing #boat,.initializing #boat2,.initializing #boatfront,.initializing #boatfront2{transition:none!important}.returning .rowing-oar{animation-direction:reverse}
.ground{pointer-events:none}#unload{width:100%;min-height:44px;margin-bottom:8px;background:#2d4c59;color:#dbe9d8}#unload[hidden]{display:none}.actor.onboard .character-art{pointer-events:none}
.actor.boarding{pointer-events:none}
/* Clear spacing and individual passenger interaction */
.actor text{font-size:25px!important;stroke-width:5px}.actor .weight-label{font-size:30px!important;fill:#ffe8a9;font-weight:900}.actor.onboard .character-art{transform:scale(.9)}.actor.small-passenger .character-art{transform:scale(.85)}.actor .rowing-arms{display:none!important}.actor.rowing.rower-seat .rowing-arms{display:block!important}.actor:not(.rowing) .character-art>g{animation:none!important}.rowing-oar{transform-origin:-38px -26px!important}#guide{padding:12px 14px;background:#234853;color:#e3efda;font-size:13px;line-height:1.6;border-bottom:1px solid #4b7277}#guide[hidden]{display:none}#guide span{font-size:12px;color:#c2d7c9}.stone:not(.reachable):not(.current-stone){opacity:.65}.stone.reachable .stone-rock{filter:drop-shadow(0 0 10px #ffe299)}.stone.reachable ellipse{stroke:#ffe299;stroke-width:6px}.stone.current-stone ellipse{stroke:#73d9e2;stroke-width:5px}.jump-label{font:900 23px system-ui;fill:#ffe299;paint-order:stroke;stroke:#244d51;stroke-width:5px}.stone-name{font-size:23px}.stone-count{font-size:29px}.stone .crack{opacity:0!important}.stone.cracked:not(.reachable) .crack{opacity:.4!important}.actor.explorer{pointer-events:none}
.game-purpose{color:#b8cfcb;font-size:12px;line-height:1.5;margin:0 0 15px;text-align:center}#guide .objective-label{display:block;font-size:10px;letter-spacing:1.5px;font-weight:800;color:var(--accent);margin-bottom:4px}#guide p{margin:0;font-size:13px;line-height:1.5;color:#edf0d9}#guide .stone-legend{display:block;margin-top:7px;font-size:11px}.stone:not(.current-stone):not(.sunk){opacity:1}
#passengers{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}#passengers:empty{display:none}#passengers button{min-height:44px;margin-bottom:8px;font-size:12px;padding:6px 10px}.actor,.stone{touch-action:manipulation}.embed main{padding:8px;max-width:600px}.embed .game-purpose,.embed #tag,.embed .eyebrow,.embed footer{display:none}.embed header{display:flex;justify-content:space-between;align-items:center;padding-bottom:6px}.embed .brand{font-size:10px}.embed .brand span{font-size:9px}.embed .heading{min-height:0;margin-bottom:8px}.embed h1{font-size:22px}.embed nav{margin-bottom:8px}.embed #guide{padding:8px 10px}.embed #guide p{font-size:12px}.embed #guide .objective-label{display:none}.embed .controlbar{padding:8px}.embed .bottom{padding-top:8px}.open-game{display:inline-flex;align-items:center;min-height:44px;color:#f5dba5;font-size:11px}.embed #record{margin:6px 0}
body[data-level="4"] .actor[data-id="0"] text,body[data-level="4"] .actor[data-id="1"] text{font-size:21px!important}
/* Touch targets move during boarding; suppress the browser's travelling tap box. */
#world,#world *{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#world .actor:focus:not(:focus-visible),#world .stone:focus:not(:focus-visible){outline:none}
#audio-controls{display:flex;justify-content:center;gap:8px;margin:8px 0}#audio-controls button{min-height:44px;font-size:11px;padding:8px 15px;-webkit-tap-highlight-color:transparent}#audio-controls button[aria-pressed="false"]{color:#9eb5b5}
#status{border:1px solid transparent;border-radius:8px;padding:6px 8px}#status[data-tone="error"]{color:#ffd0c6;background:#542d32;border-color:#d98679;font-weight:750}#status[data-tone="success"]{color:#bdeed2;background:#203e39;border-color:#5c9c7c}#status[data-tone="error"]::first-letter{color:#ffb198;font-weight:900}