:root{color-scheme:light;--ink:#173e45;--muted:#638086;--paper:#f8f5ed;--pink:#ee839d;--teal:#087f85;--line:#dbe4de;font-family:ui-rounded,"Trebuchet MS",Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.52}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #e27b30;outline-offset:4px}button{border:0}button:hover:not(:disabled){filter:brightness(.97)}[hidden]{display:none!important}.app{max-width:1240px;padding:24px 36px 18px;margin:auto}.header{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{color:var(--ink);text-decoration:none;display:flex;gap:12px;align-items:center;font-weight:800;letter-spacing:-.5px;font-size:19px}.brand-mark{width:43px;height:43px;background:#e3ece0;border-radius:50%;display:grid;place-items:center;color:var(--teal);font-size:36px}.brand-sub{display:block;font-size:10px;font-weight:500;letter-spacing:1.3px;margin-top:4px;text-transform:uppercase}.header-actions{display:flex;gap:10px}.quiet-button{padding:11px 14px;border:1px solid var(--line);background:transparent;border-radius:24px;color:var(--ink);font-size:15px}.quiet-button span{font-size:12px;margin-left:5px}.heading{margin:30px 0 20px;display:flex;align-items:end;justify-content:space-between;gap:20px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--teal);font-weight:800;margin:0 0 11px}h1{font-size:clamp(24px,3.1vw,39px);letter-spacing:-1.3px;margin:0;font-weight:800}h2{font-size:32px;line-height:1.12;letter-spacing:-1px;margin:0 0 16px}.heading-note{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 3px}.game{height:560px;position:relative;border-radius:28px;overflow:hidden;background:#42b7bb;box-shadow:0 12px 32px #154b4310}canvas{width:100%;height:100%;display:block;touch-action:none}.hud{position:absolute;z-index:2;top:20px;left:22px;right:22px;display:flex;gap:9px;align-items:center;pointer-events:none}.pill{background:#f7fff4ed;padding:10px 14px;border-radius:25px;font-size:14px;display:flex;gap:7px;align-items:center;font-weight:800;box-shadow:0 4px 8px #17524a0a}.pill>span:first-child{font-size:20px;color:var(--teal);line-height:1}.hud-label{font-size:11px;font-weight:500;color:var(--muted)}.player-label{margin-left:auto;background:#164953b5;color:white;padding:9px 14px;border-radius:20px;font-size:12px}.overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:#123c462b;padding:16px;backdrop-filter:blur(2px)}.card{background:#fffdf6f5;border:1px solid #ffffffab;padding:26px 32px;border-radius:27px;text-align:center;box-shadow:0 18px 55px #153e4330;max-width:440px;width:100%}.intro-card{padding:24px 32px}.card-copy{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 16px}.name-label{display:block;font-size:12px;font-weight:700;margin-bottom:8px}input[type=text],input:not([type]){background:#fff;border:1px solid #d5e2dc;color:var(--ink);border-radius:12px;width:100%;padding:10px 14px;text-align:center}.colors{margin:14px 0 18px;padding:0;border:0;display:flex;gap:12px;justify-content:center}.colors legend{font-size:12px;font-weight:700;margin-bottom:7px}.color-choice{width:83px;position:relative;cursor:pointer}.color-choice input{position:absolute;opacity:0;inset:0}.color-choice>span{display:block;border:2px solid transparent;border-radius:17px;background:#f0eee6;padding:3px 2px 8px}.color-choice input:checked+span{border-color:var(--teal);background:#e4f1e7}.color-choice input:focus-visible+span{outline:3px solid #e27b30;outline-offset:2px}.color-choice img{width:65px;height:60px;object-fit:contain;display:block;margin:auto}.color-choice i{font-style:normal;font-size:10px}.primary{width:100%;background:var(--pink);color:#472a39;border-radius:16px;padding:15px 17px;font-size:16px;font-weight:800;box-shadow:0 3px 0 #d96683}.primary span{float:right}.tiny{font-size:10px;color:var(--muted);margin:13px 0 0}.sea-caption{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);color:#fff;background:#134e5480;border-radius:18px;padding:7px 15px;font-size:11px;white-space:nowrap;pointer-events:none}.controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}.hint{display:flex;gap:12px;align-items:center;flex:1}.hint-icon{font-size:25px;border:1px solid var(--line);border-radius:50%;width:43px;height:43px;display:grid;place-items:center;color:var(--teal)}.hint strong,.hint div>span{display:block}.hint strong{font-size:13px;margin-bottom:5px}.hint div>span{font-size:11px;color:var(--muted)}.help-button{border-radius:17px;background:var(--teal);color:white;padding:14px 20px;font-size:18px;display:flex;align-items:center;gap:10px;min-height:49px}.help-button span{font-size:13px;font-weight:700}.help-button small{font-size:10px;opacity:.7;border:1px solid #ffffff50;padding:4px;border-radius:6px}.dpad{display:flex;align-items:center;gap:5px}.dpad>div{display:flex;flex-direction:column;gap:4px}.dpad button{background:#e8eee6;border:1px solid #d9e4dd;border-radius:10px;color:var(--teal);width:36px;height:28px;user-select:none;touch-action:none}.dpad>button{height:42px}.footer-note{font-size:10px;color:var(--muted);text-align:center;margin:17px 0 0}.text-button{margin-top:16px;background:transparent;color:var(--teal);font-size:12px;padding:5px}.small-card{padding:35px 28px}.big-symbol{display:block;font-size:70px;color:var(--teal);margin-bottom:14px}.victory-art{position:relative;width:130px;height:120px;margin:auto auto 15px}.victory-art img{width:100%;height:100%;object-fit:contain}.victory-art span{position:absolute;right:0;top:0;color:#e97698;font-size:35px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(min-width:1450px){.app{padding-top:35px}.game{height:610px}}@media(max-width:700px){.app{padding:16px 14px 16px}.brand{font-size:16px;gap:9px}.brand-sub{font-size:8px;letter-spacing:.8px}.brand-mark{width:36px;height:36px;font-size:29px}.header-actions{gap:5px}.quiet-button{padding:9px 11px}.quiet-button span{display:none}.heading{margin:25px 0 16px}.heading-note{display:none}.eyebrow{font-size:9px;letter-spacing:1.5px}h1{font-size:26px;letter-spacing:-.8px}.game{height:540px;border-radius:22px}.hud{top:14px;left:12px;right:12px;gap:6px}.pill{padding:8px 10px;font-size:12px;gap:5px}.hud-label{font-size:9px}.player-label{display:none}.card{padding:24px 22px}.intro-card{max-width:340px}h2{font-size:29px}.card-copy{font-size:13px}.colors{gap:10px}.sea-caption{font-size:10px;bottom:12px;max-width:94%;overflow:hidden;text-overflow:ellipsis}.controls{gap:10px;flex-wrap:wrap;margin-top:13px}.hint{flex-basis:100%;gap:10px}.hint-icon{width:32px;height:32px;font-size:20px}.hint strong{font-size:12px}.help-button{flex:1;justify-content:center}.help-button small{display:none}.dpad button{width:40px;height:29px}.dpad>button{height:47px}.footer-note{font-size:9px;line-height:1.7;margin-top:13px}}@media(max-width:380px){h1{font-size:23px}.app{padding-inline:10px}.card{padding:20px 16px}.hud-label{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Crisp pixel art assets and a matching retro interface. */
img,canvas{image-rendering:pixelated;image-rendering:crisp-edges}.game{border:4px solid #215961;border-radius:8px;box-shadow:6px 6px 0 #cddcd0}.card{border:3px solid #396569;border-radius:5px;box-shadow:6px 6px 0 #173e453b}.primary,.help-button{border-radius:4px;box-shadow:3px 3px 0 #225358}.quiet-button,.pill,.player-label,.color-choice>span,input:not([type]),.dpad button{border-radius:4px}.brand-mark{border-radius:5px}.hearts{color:#dc5c82;letter-spacing:2px;font-size:15px}.primary{box-shadow:3px 3px 0 #b75274}.primary:active,.help-button:active{transform:translate(1px,1px)}.sea-caption{border-radius:3px}.big-symbol{font-family:monospace}.color-choice input:checked+span{box-shadow:2px 2px 0 #087f85}.hud-label{white-space:nowrap}@media(max-width:700px){.game{height:540px;border-radius:5px}.pill{padding:8px 8px}.hearts{letter-spacing:0;font-size:13px}.hud{gap:5px}}
.overlay{backdrop-filter:none}.color-choice input{margin:0;width:100%;height:100%;cursor:pointer}.brand-mark{font-family:monospace}
h2{overflow-wrap:anywhere}@media(max-width:380px){.intro-card{padding:14px 16px}.intro-card h2{font-size:25px;margin-bottom:12px}.intro-card .card-copy{margin-bottom:10px}.intro-card .colors{margin:10px 0 12px}.intro-card .tiny{margin-top:9px}.intro-card .primary{padding:13px 17px}}
/* Phone controls: large touch targets and a game that fits the visible screen. */
@media(max-width:700px){
  .app{padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .quiet-button{min-width:44px;min-height:44px}
  .heading{margin:10px 0}.heading h1{font-size:21px}
  .app[data-state] .heading .eyebrow{display:none}
  .app[data-state] .game{height:clamp(330px,calc(100dvh - 245px),650px)}
  .app[data-state=intro] .game{height:540px}
  .controls{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-top:10px}
  .hint{grid-column:1/-1;min-height:35px}.hint-icon{flex-shrink:0}
  .hint div{min-width:0}.hint div>span{font-size:10px}.hint strong{font-size:11px}
  .dpad{display:grid;grid-template-columns:repeat(4,44px);gap:4px}
  .dpad>div{display:contents}.dpad button,.dpad>button{width:44px;height:48px;font-size:20px}
  .help-button{min-height:48px;padding:8px;gap:6px}.help-button span{font-size:11px}
  .footer-note{margin-top:9px;font-size:9px;line-height:1.4}
  .overlay{overflow-y:auto;align-items:flex-start}.overlay .card{margin:auto}
  .text-button{min-height:44px}
  .hud-label{display:none}.hud{top:10px;left:10px;right:10px}.pill{min-height:34px}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:1000px){
  .app{padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left))}
  .header{min-height:44px;margin-bottom:8px}.quiet-button{min-width:44px;min-height:44px}
  .app[data-state] .heading{display:none}.app[data-state] .game{height:calc(100dvh - 128px);min-height:230px}
  .controls{display:flex;gap:12px;margin-top:8px}.controls .hint{display:none}
  .dpad{display:grid;grid-template-columns:repeat(4,44px);gap:4px}.dpad>div{display:contents}.dpad button,.dpad>button{width:44px;height:48px}
  .help-button{flex:1;min-height:48px;justify-content:center}.help-button small{display:none}
  .footer-note{display:none}.overlay{overflow-y:auto;align-items:flex-start}.overlay .card{margin:auto}
}
@media(max-width:700px){.controls{grid-template-columns:1fr}.controls .dpad{display:none}.help-button{width:100%}.help-button span{font-size:13px}}
@media(orientation:landscape) and (max-height:500px) and (max-width:1000px){.controls .dpad{display:none}}
.sound-icon{width:20px;height:20px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
#sound[aria-pressed=true]{background:#e4f1e7;border-color:#087f85;color:#087f85}
/* The sea fills the entire mobile viewport; controls float above it. */
@media(max-width:700px),(pointer:coarse),(orientation:landscape) and (max-height:500px) and (max-width:1000px){
  html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
  .app{width:100%;height:100dvh;max-width:none;padding:0;margin:0;overflow:hidden}
  .app .game,.app[data-state] .game{position:fixed;inset:0;width:100%;height:100dvh!important;min-height:0!important;border:0;border-radius:0;box-shadow:none}
  .brand,.heading,.footer-note{display:none!important}
  .header{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:4;min-height:0;margin:0;gap:0}
  .header-actions{gap:6px}.quiet-button{width:44px;height:44px;padding:10px;background:#f7fff4ed;border:1px solid #cfe4de;box-shadow:2px 2px 0 #173e4525}
  .quiet-button span{display:none}
  .hud{top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:calc(max(10px,env(safe-area-inset-right)) + 102px);gap:5px;height:44px;align-items:center}
  .hud .pill{padding:7px;font-size:11px;gap:4px;min-height:36px;flex-shrink:0}
  .hud .pill>span:first-child{font-size:18px}.hud .hearts{font-size:13px;letter-spacing:0}
  .hud-label,.player-label{display:none}
  .controls{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 40px);z-index:2;display:block;margin:0;pointer-events:none}
  .controls .hint,.controls .dpad{display:none}
  .controls .help-button{width:auto;max-width:100%;min-height:48px;margin-left:auto;padding:10px 16px;pointer-events:auto;box-shadow:2px 2px 0 #173e4540}
  .help-button small{display:none}.help-button:disabled{display:none}
  .app:not([data-state=playing]) .controls{display:none}
  .sea-caption{bottom:max(12px,env(safe-area-inset-bottom));max-width:calc(100% - 24px);font-size:11px;padding:8px 12px}
  .overlay{padding:calc(max(10px,env(safe-area-inset-top)) + 56px) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow-y:auto;align-items:flex-start;overscroll-behavior:contain}
  .overlay .card{margin:auto;max-width:400px}
}
/* The voyage is a small illustrated chart, with the game underneath. */
.voyage-info{position:absolute;z-index:2;top:73px;left:22px;right:22px;display:flex;gap:7px;align-items:center;pointer-events:none;font-size:11px}
.voyage-info span{background:#164953c9;color:#fffdf6;padding:6px 9px;border-radius:4px}
#level-condition{background:#fff8d9e8;color:#526259;font-size:10px}
.app:is([data-state=intro],[data-state=map]) .hud,.app:is([data-state=intro],[data-state=map]) .voyage-info{display:none}
.app:is([data-state=intro],[data-state=map],[data-state=won],[data-state=lost],[data-state=paused]) .sea-caption{display:none}
.map-overlay{background:#103f4e55;overflow-y:auto;align-items:flex-start}
.map-overlay .map-card{max-width:640px;padding:18px 24px;margin:auto}
.map-heading{display:flex;text-align:left;justify-content:space-between;align-items:center;gap:12px}.map-heading h2{font-size:26px;margin:0 0 8px}.map-heading .eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:7px}.map-heading img{width:54px;height:54px;object-fit:contain}
.map-progress{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);margin:2px 0 6px}#map-stars{color:#a75c27;font-weight:bold}
#voyage-progress{appearance:none;width:100%;height:6px;display:block;border:0;background:#dae8dc;margin:0 0 12px;border-radius:3px}#voyage-progress::-webkit-progress-bar{background:#dae8dc;border-radius:3px}#voyage-progress::-webkit-progress-value{background:var(--teal);border-radius:3px}#voyage-progress::-moz-progress-bar{background:var(--teal)}
.sea-map{height:226px;position:relative;border:2px solid #5aa0a3;border-radius:5px;background:linear-gradient(#c0f0e4c9,#a6dedcb0),url('assets/ocean.png') center 70% / cover;overflow:hidden;isolation:isolate}
.map-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.map-route path{fill:none;stroke:#fffaf0;stroke-width:2;stroke-dasharray:2 1.5;vector-effect:non-scaling-stroke;stroke-width:7px}
.map-node{position:absolute;transform:translate(-50%,-50%);padding:0;background:transparent;color:var(--ink);width:112px;min-height:70px;display:flex;flex-direction:column;align-items:center;gap:2px;z-index:1;border-radius:4px}
.map-node .node-number{width:44px;height:36px;display:grid;place-items:center;border:2px solid #4b8883;border-radius:7px;background:#fffdf1;color:var(--teal);font-size:20px;font-weight:bold;box-shadow:2px 2px 0 #356d6530}
.node-title{background:#fffdf1ec;border-radius:3px;font-size:10px;font-weight:bold;padding:2px 4px;line-height:1.2}.node-stars{font-size:10px;line-height:1.1;color:#946229;background:#fffdf1c9;padding:1px 3px;border-radius:2px}
.map-node.selected .node-number{background:#f8bad0;color:#662942;border-color:#a84770;box-shadow:0 0 0 3px #fff9f0,3px 3px 0 #88406050}.map-node.completed .node-number{background:#d8f3cf;border-color:#43876b}.map-node.completed.selected .node-number{border-color:#a84770;box-shadow:0 0 0 3px #fff9f0}.map-node.locked{opacity:.7}.map-node.locked .node-number{background:#b8d8d3;color:#648c8b;border-color:#80aaa3}.map-node.locked .node-stars{color:#658783}
.map-landmark{position:absolute;pointer-events:none;z-index:0;color:#358e8380}.map-landmark.reef{font-size:67px;left:46%;top:46%;line-height:1}.map-landmark.compass{font-size:36px;left:7%;top:4%;line-height:1}.compass small{font-size:8px;display:block}
.level-detail{text-align:left;background:#edf3e8;padding:11px 13px;margin:12px 0;min-height:111px;border-left:3px solid var(--teal)}.level-detail .eyebrow{font-size:8px;margin:0 0 4px;letter-spacing:1.1px}.level-detail h3{font-size:17px;margin:0 0 4px}.level-detail p{font-size:12px;line-height:1.45;color:#516d70;margin:0 0 6px}#selected-level-goal{font-size:10px;color:var(--teal);font-weight:bold}.map-card .primary{padding:12px 16px;font-size:14px}.map-card .text-button{margin:7px 0 0;min-height:32px}
.save-status{font-size:10px;line-height:1.4;color:var(--muted);margin:5px 0 0}.win-stars{font-size:30px;letter-spacing:6px;color:#c27b24;margin:-4px 0 10px}.small-card .text-button{margin:8px 3px 0}.small-card .victory-art{height:90px;width:100px;margin-bottom:8px}
@media(max-width:700px),(pointer:coarse),(orientation:landscape) and (max-height:500px) and (max-width:1000px){
  .voyage-info{top:calc(max(10px,env(safe-area-inset-top)) + 50px);left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));gap:5px;flex-wrap:wrap;font-size:10px}.voyage-info span{padding:5px 7px}#level-condition{font-size:9px}
  .map-overlay{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .map-overlay .map-card{padding:17px 14px;max-width:570px}.map-heading h2{font-size:23px}.map-heading img{width:45px;height:45px}.map-heading .eyebrow{font-size:7px;letter-spacing:1px}
  .sea-map{height:226px}.map-node{width:108px;min-height:70px}.node-title{font-size:9px}.map-node .node-number{width:44px;height:36px}.map-card .text-button{min-height:44px}.map-card .primary{min-height:48px}.level-detail p{font-size:12px}
  .small-card h2{font-size:26px}.small-card .text-button{min-height:44px}
}
@media(max-width:350px){.map-overlay .map-card{padding:14px 10px}.map-heading h2{font-size:20px}.sea-map{height:228px}.map-node{width:103px}.node-title{font-size:8px}.map-heading .eyebrow{font-size:7px}.level-detail{padding:9px}.level-detail h3{font-size:16px}.map-progress{font-size:10px}}
@media(min-width:701px) and (pointer:fine){.app[data-state=map] .game{height:650px}}

/* Native controls are additive; browser-only gameplay retains its styles. */
body[data-vk=true] .vk-actions{padding:12px 0 0}
body[data-vk=true] .vk-actions p{font-size:13px;line-height:1.4}
body[data-vk-appearance=dark]{--paper:#18232d;--ink:#e9f5f7;--muted:#adbec3;--line:#39535d}
body[data-vk-appearance=dark] .card{background:#203744f7;border-color:#496571}
body[data-vk-appearance=dark] .card-copy,body[data-vk-appearance=dark] .tiny,body[data-vk-appearance=dark] .text-button{color:#c6dde2}
body[data-vk-appearance=dark] .level-detail{background:#294750;color:#e9f5f7}
body[data-vk-appearance=dark] .level-detail p{color:#cae2e6}
body[data-vk-appearance=dark] .map-node{color:#173e45}
body[data-vk-appearance=dark] .color-choice>span{background:#344553}
body[data-vk-appearance=dark] .color-choice input:checked+span{background:#365868}
@media(max-width:700px),(pointer:coarse){
 body[data-vk=true] .header{top:max(env(safe-area-inset-top),var(--vk-inset-top,0px),10px);right:max(env(safe-area-inset-right),var(--vk-inset-right,0px),10px)}
 body[data-vk=true] .hud{top:max(env(safe-area-inset-top),var(--vk-inset-top,0px),14px);left:max(env(safe-area-inset-left),var(--vk-inset-left,0px),10px)}
 body[data-vk=true] .voyage-info{top:calc(max(env(safe-area-inset-top),var(--vk-inset-top,0px),14px) + 46px)}
 body[data-vk=true] .overlay{padding-top:calc(max(16px,env(safe-area-inset-top),var(--vk-inset-top,0px)) + 56px);padding-bottom:max(16px,env(safe-area-inset-bottom),var(--vk-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left),var(--vk-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right),var(--vk-inset-right,0px))}
 body[data-vk=true] .controls{bottom:calc(max(12px,env(safe-area-inset-bottom),var(--vk-inset-bottom,0px)) + 40px)}
 body[data-vk=true] .sea-caption{bottom:max(12px,env(safe-area-inset-bottom),var(--vk-inset-bottom,0px))}
}

body[data-vk-appearance=dark] .header-actions button{background:#203744;color:#e9f5f7;border-color:#496571}
body[data-vk-appearance=dark] .hud{color:#173e45}
body[data-vk-appearance=dark] #selected-level-goal,body[data-vk-appearance=dark] .eyebrow{color:#61c7cd}
body[data-vk-appearance=dark] #map-stars{color:#f9c17d}

body[data-vk-appearance=dark] #name{background:#18232d;color:#e9f5f7;border-color:#698590}