:root{color-scheme:dark;--ink:#143e4e;--water:#175767;--cream:#fff0ce;--mint:#b9e6cf;--coral:#f2a391;--gold:#ffe49a;font-family:'Trebuchet MS',Avenir,sans-serif;color:var(--cream);background:var(--water);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;overscroll-behavior:none}button,input,textarea{font:inherit}button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button:disabled{cursor:default;opacity:.55}button{border:0;color:inherit}button,input{min-height:48px}input,textarea{font-size:16px}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}#app{height:100dvh;min-height:540px;display:grid;grid-template-rows:66px minmax(0,1fr) 146px;overflow:hidden;position:relative;background:#175767}.masthead{display:flex;align-items:center;padding:0 28px;gap:24px;z-index:3;background:#164855;box-shadow:0 1px #b9e6cf1a}.wordmark{font-weight:800;letter-spacing:-.5px;font-size:22px;color:var(--cream);text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:9px}.shell{font-size:32px;color:var(--gold)}.mode-label{font-size:14px;color:#b9d6d0;margin-left:auto}.tools{display:flex;gap:5px}.icon-button{display:flex;align-items:center;gap:7px;background:transparent;font-size:24px;min-width:48px;justify-content:center;border-radius:50%;padding:0 10px}.icon-button span{font-size:13px}.icon-button[aria-pressed=true]{color:var(--gold)}.stage{position:relative;min-height:0;overflow:hidden}canvas{width:100%;height:100%;display:block}.hud{position:absolute;inset:17px 26px auto;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;gap:10px}.journey{display:flex;align-items:center;gap:13px;padding:9px 14px;border-radius:20px;background:#123e4dd6;box-shadow:0 3px 10px #0929321a}.journey strong{font-size:16px}.progress{display:flex;align-items:center}.progress span{width:25px;height:25px;display:grid;place-items:center;border:1px solid #accbc966;border-radius:50%;font-size:13px;color:#b0cbc8}.progress span.active{background:var(--gold);border-color:var(--gold);color:var(--ink)}.progress span.done{color:var(--mint);border-color:var(--mint)}.progress i{width:13px;height:1px;background:#b9e6cf55}.tide{font-size:14px;padding:12px 16px;border-radius:20px;background:#123e4dd6;color:var(--mint);white-space:nowrap}.tide.warning{background:var(--gold);color:var(--ink)}.hint{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);border-radius:18px;padding:11px 18px;background:#123e4de8;line-height:1.3;text-align:center;font-size:16px;pointer-events:none}.toast{position:absolute;left:50%;top:26%;transform:translateX(-50%);background:var(--cream);color:var(--ink);border-radius:16px;padding:12px 20px;box-shadow:0 10px 30px #0e344f30;font-weight:700;font-size:17px;pointer-events:none;opacity:0;transition:opacity .2s;max-width:85%;text-align:center}.toast.visible{opacity:1}.compass{position:absolute;right:28px;bottom:30px;display:flex;flex-direction:column;align-items:center;color:#b9e6cf50;pointer-events:none}.compass span{font-size:12px}.compass b{font-size:55px;font-weight:400;line-height:1}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#175767;z-index:3}.overlay{position:absolute;inset:66px 0 0;z-index:4}.welcome{overflow-y:auto;display:flex;align-items:center;padding:25px 7%;pointer-events:none;background:linear-gradient(90deg,#103d4eec 0%,#103d4ec9 28%,#103d4e00 68%)}.welcome-card{pointer-events:auto;width:390px}.chapter{color:var(--mint);font-size:15px}.welcome h1{font-size:clamp(62px,7.8vw,106px);line-height:.88;letter-spacing:-6px;margin:23px 0 27px;position:relative;font-weight:900}.title-wave{position:absolute;right:4px;bottom:-1px;color:var(--coral);font-size:.75em;transform:rotate(-10deg);font-weight:400}.intro{font-size:23px;line-height:1.25;margin:0 0 12px;color:var(--cream)}.description{font-size:16px;line-height:1.5;color:#bad5d2;margin:0 0 27px}.start-buttons{display:grid;gap:11px}.primary,.secondary{padding:15px 22px;border-radius:13px;min-height:53px;font-weight:700;line-height:1.25}.primary{background:var(--gold);color:var(--ink);box-shadow:0 3px #092e3933}.secondary{background:#b9e6cf18;border:1px solid #b9e6cf60;color:var(--cream)}.start-buttons button{text-align:left;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:17px}.start-buttons button span{font-size:12px;font-weight:400;max-width:92px;line-height:1.25;text-align:right;opacity:.85}.text-button{background:transparent;text-decoration:underline;text-underline-offset:4px;padding:13px 2px;color:var(--mint);font-size:15px}.footnote{font-size:12px;color:#aac9c5;margin:9px 0}.edition{position:absolute;bottom:22px;right:28px;font-size:12px;letter-spacing:.2px;color:#b9e6cf80}.error{color:#ffb7a7;font-size:15px;line-height:1.4;margin:8px 0}.error:empty{display:none}#join-form{padding:10px 0}label{font-size:16px;line-height:1.4}.input-row{display:flex;gap:9px;margin-top:6px}input[type=text],input:not([type]),textarea{background:#092e3980;border:1px solid #b9e6cf80;color:var(--cream);border-radius:9px;padding:10px 14px;min-width:0;width:100%}#room-code{letter-spacing:5px;text-transform:uppercase;font-weight:bold;font-size:22px}.modal{display:flex;justify-content:center;align-items:center;background:#0b3049a6;backdrop-filter:blur(7px);padding:18px;overflow:auto}.panel{background:#174957;border:1px solid #b9e6cf45;border-radius:26px;padding:30px;box-shadow:0 22px 100px #072b4860;text-align:center;width:min(100%,410px);max-height:100%;overflow:auto}.panel h2{font-size:31px;line-height:1.1;letter-spacing:-1px;margin:9px 0 17px}.panel p{font-size:16px;line-height:1.45;color:#c5ddd6}.panel-symbol{font-size:40px;color:var(--mint);line-height:1.3}.panel .primary,.panel .secondary{display:block;width:100%;margin-top:10px}.panel .small{font-size:13px;line-height:1.45;color:#aecdc6}.invite-code{font-size:45px;letter-spacing:7px;color:var(--gold);font-weight:800;display:block;padding:12px 0 22px}.instructions{text-align:left;border-top:1px solid #b9e6cf26;margin:15px 0;padding-top:7px}.instructions p{font-size:15px;line-height:1.4;margin:10px 0}.instructions b{color:var(--gold)}.check{display:flex;align-items:center;gap:10px;text-align:left;justify-content:center;font-size:14px;margin-top:12px}.check input{min-height:24px;width:20px;accent-color:var(--mint)}.finish-panel h2{font-size:45px;line-height:1.04;margin-top:15px}.pearl-symbol{font-size:72px;color:var(--gold);display:block;line-height:1.3}.finish-panel .chapter{display:block}.panel details{text-align:left;border-top:1px solid #b9e6cf26;margin-top:20px;padding-top:15px}.panel summary{cursor:pointer;min-height:48px;line-height:1.5;color:var(--mint);font-size:15px}.panel textarea{margin-top:9px;resize:vertical}.controls{display:flex;justify-content:space-between;align-items:center;padding:10px max(30px,calc((100vw - 660px)/2));padding-bottom:max(10px,env(safe-area-inset-bottom));gap:30px;background:#164855;box-shadow:0 -1px #b9e6cf25;z-index:3}.steering{display:flex;flex-direction:column;align-items:center;gap:3px}.pad{position:relative;width:104px;height:104px;border-radius:50%;background:#0d3545;box-shadow:inset 0 0 0 1px #b9e6cf45;touch-action:none;user-select:none}.pad-cross{position:absolute;left:22px;right:22px;top:51px;height:1px;background:#b9e6cf20}.pad-cross:after{content:'';position:absolute;height:60px;width:1px;left:30px;top:-30px;background:#b9e6cf20}.knob{position:absolute;top:32px;left:32px;border-radius:50%;width:40px;height:40px;background:#b9e6cf;box-shadow:0 3px 8px #08232f60;pointer-events:none;z-index:2}.pad button{position:absolute;background:transparent;color:#b9e6cf75;font-size:18px;min-height:32px;width:34px;padding:0;z-index:1;touch-action:none}.pad [data-dir=up]{left:35px;top:0}.pad [data-dir=down]{left:35px;bottom:0}.pad [data-dir=left]{left:0;top:35px}.pad [data-dir=right]{right:0;top:35px}.control-caption{font-size:12px;color:#a4c8c4}.action-controls{display:flex;gap:13px}.action{width:100px;height:100px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;touch-action:none;user-select:none;position:relative}.action.link{background:var(--gold);color:var(--ink)}.action.link.linked{background:var(--mint)}.action.dash{background:#a8c7ef;color:var(--ink)}.action-symbol{font-size:35px;line-height:1}.action strong{font-size:14px}.action small{font-size:10px;opacity:.6}.action:disabled{opacity:.65}.action.dash:after{content:'';position:absolute;inset:-4px;border:2px solid #a8c7ef55;border-radius:50%;clip-path:inset(var(--cooldown,100%) 0 0 0)}#app[data-screen=home]{grid-template-rows:66px 1fr}#app[data-screen=home] .stage{grid-row:2}#app[data-screen=home] .compass{right:6%;bottom:12%}
@media(min-width:900px){#app[data-screen=home] .stage{margin-left:27%}.welcome-card{width:365px}}
@media(max-width:600px){#app{grid-template-rows:57px minmax(0,1fr) 137px;min-height:520px}.masthead{padding:0 14px;gap:8px}.wordmark{font-size:18px}.shell{font-size:27px}.mode-label{font-size:11px;max-width:93px;text-align:right;line-height:1.3}.icon-button{padding:0 6px}.icon-button span{display:none}.tools{gap:0}.overlay{inset:57px 0 0}.welcome{align-items:flex-start;padding:24px 26px;background:linear-gradient(90deg,#103d4eea,#103d4ec2 68%,#103d4e64)}.welcome-card{width:100%;max-width:365px}.welcome h1{font-size:70px;letter-spacing:-4px;margin:20px 0 24px;max-width:280px}.title-wave{right:4px}.intro{font-size:21px}.description{margin-bottom:20px}.chapter{font-size:14px}.start-buttons button{font-size:16px;padding:13px 18px;min-height:53px}.edition{display:none}#app[data-screen=home]{grid-template-rows:57px 1fr}.hud{inset:12px 12px auto;gap:6px;align-items:flex-start}.journey{flex-direction:column;gap:5px;align-items:flex-start;padding:9px 12px}.journey strong{font-size:14px}.tide{font-size:12px;padding:10px 11px}.hint{font-size:14px;padding:9px 13px;bottom:9px}.controls{padding:8px 22px;gap:16px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.action-controls{gap:10px}.action{width:82px;height:82px}.action strong{font-size:13px}.action small{display:none}.action-symbol{font-size:31px}.compass{right:15px;bottom:57px}.compass b{font-size:38px}.panel{padding:22px;border-radius:21px}.panel h2{font-size:28px}.panel .instructions p{font-size:14px}.panel-symbol{font-size:29px}.panel .primary,.panel .secondary{padding:12px 16px}.finish-panel h2{font-size:40px}.pearl-symbol{font-size:60px}.modal{padding:14px}}
@media(max-height:700px) and (orientation:portrait){.welcome{padding-top:17px}.welcome h1{font-size:59px;margin:13px 0 17px}.intro{font-size:19px}.description{font-size:15px;margin-bottom:15px}.chapter{font-size:13px}.footnote{font-size:11px}.welcome .text-button{padding:10px 0;min-height:40px}.start-buttons{gap:9px}.start-buttons button{min-height:48px;padding:10px 16px}.panel-symbol{display:none}.panel .instructions p{margin:6px 0}.panel{padding:18px}.panel h2{margin-top:2px}.panel .instructions{margin:10px 0}.panel p{margin:10px 0}}
@media(orientation:landscape) and (max-height:560px){#app{min-height:320px;grid-template-rows:52px 1fr;grid-template-columns:1fr}.masthead{padding:0 18px}.overlay{inset:52px 0 0}.stage{margin:0 128px}.hud{inset:7px 3px auto}.journey{padding:7px 10px;gap:6px}.journey strong{font-size:12px}.progress span{width:20px;height:20px;font-size:11px}.progress i{width:8px}.tide{font-size:11px;padding:9px}.hint{font-size:12px;bottom:7px;max-width:100%;padding:7px 10px}.controls{position:absolute;inset:52px 0 0;pointer-events:none;background:transparent;box-shadow:none;padding:0 13px;align-items:center;z-index:2}.controls>*{pointer-events:auto}.action-controls{flex-direction:column;gap:17px}.action{width:80px;height:80px}.action small{display:none}.compass{display:none}#app[data-screen=home]{grid-template-rows:52px 1fr}#app[data-screen=home] .stage{margin:0 0 0 35%}.welcome{padding:18px 5%;align-items:center}.welcome-card{width:370px;position:relative}.welcome h1{font-size:56px;line-height:.87;margin:11px 0 15px;letter-spacing:-3px}.welcome h1 br{display:none}.welcome h1 .title-wave{display:none}.chapter{font-size:12px}.intro{font-size:17px}.intro br{display:none}.description{display:none}.start-buttons{grid-template-columns:1fr 1fr;gap:9px}.start-buttons button{font-size:14px;padding:10px 12px;min-height:58px;display:block}.start-buttons button span{display:block;font-size:10px;text-align:left;max-width:none;margin-top:3px}.footnote{display:none}.welcome .text-button{min-height:36px;padding:8px 0}.panel{max-width:540px;padding:18px 24px}.panel-symbol{display:none}.panel h2{font-size:25px;margin:0 0 10px}.instructions{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.panel p{margin:8px 0}.panel .instructions p{font-size:13px;margin:4px 0}.panel .primary,.panel .secondary{min-height:46px;padding:10px;display:inline-block;width:48%;margin-right:1%}.panel .small{font-size:12px;margin:6px 0}.panel .check{display:inline-flex;margin-right:15px}.finish-panel h2 br{display:none}.finish-panel h2{font-size:34px}.invite-code{font-size:34px;padding:5px 0 12px}.modal{padding:9px}.toast{top:30%;font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}