@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#f4fffc;background:#078d9a;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #ffe597;outline-offset:5px}#world,.vignette,#labels{position:fixed;inset:0}#world canvas{display:block;width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(180deg,rgba(4,50,62,.33),transparent 25%,transparent 61%,rgba(3,62,72,.68))}header{position:absolute;z-index:5;top:32px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:14px;font-family:Manrope,sans-serif;font-size:14px;font-weight:800;letter-spacing:2px}.brand small{display:block;font-size:10px;letter-spacing:2px;font-weight:500;margin-top:5px;opacity:.75}.brand-icon{border:1px solid #b3ece3;border-radius:50%;width:43px;height:43px;display:grid;place-content:center;position:relative;font-family:Georgia;font-size:24px;font-weight:400;padding-right:7px;letter-spacing:-3px}.brand-icon span{position:absolute;font-size:18px;left:22px;top:16px}nav{display:flex;align-items:center;gap:12px}nav button,nav a{border:1px solid #ffffff55;border-radius:30px;color:#fff;background:#05576830;padding:12px 20px;font-size:14px;backdrop-filter:blur(12px)}nav a{background:#f3f6df;color:#174e53;border-color:#f3f6df}nav span{margin-left:14px}.edition{position:absolute;right:43px;top:105px;font-size:10px;letter-spacing:2px;opacity:.7}.edition span{margin:0 10px}.intro{position:absolute;left:43px;bottom:113px;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#c3ede4}h1{font-family:Manrope,sans-serif;font-weight:500;letter-spacing:-2px;font-size:clamp(30px,3.2vw,51px);line-height:1.16;margin:15px 0}h1 em{font-family:Georgia,serif;color:#fff0b8;font-weight:400}.intro p{font-size:14px;line-height:1.7;color:#d1eeeb}.location{margin-top:24px;display:flex;align-items:center;gap:10px;font-size:11px;color:#aee0df}.location span{font-size:20px}.location i{width:3px;height:3px;background:#aee0df;border-radius:50%;margin:0 3px}footer{position:absolute;bottom:24px;left:42px;right:42px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#d6f2eb;padding-top:18px;border-top:1px solid #ffffff25;gap:20px}.controls{display:flex;gap:5px;align-items:center}.controls>span:not(.key){margin:0 6px}.controls b{font-weight:400;opacity:.4;margin:0 8px}.key{display:inline-grid;place-content:center;width:22px;height:23px;border:1px solid #ffffff4d;border-radius:4px;font-size:13px}#reset{border:0;background:none;color:inherit;font-size:12px;padding:8px}.compass{position:absolute;right:50px;bottom:130px;text-align:center;color:#d7f2df;pointer-events:none}.compass>span{font-size:12px;font-weight:700}.compass div{font-size:76px;line-height:1.1;font-weight:400}.compass small{font-size:8px;letter-spacing:2px}#labels{pointer-events:none}.island-label{pointer-events:auto;position:absolute;transform:translate(-50%,-50%);border:0;color:#faffed;display:flex;align-items:center;gap:9px;border-radius:30px;padding:9px 14px 9px 9px;background:#094d54e6;box-shadow:0 5px 15px #02434d20;white-space:nowrap;font-size:13px;border:1px solid #c4ece447;transition:background .2s,box-shadow .2s}.island-label:hover{background:#fff5ce;color:#254a41;box-shadow:0 4px 25px #003b4960}.island-label .num{font-size:10px;border:1px solid #ffffff50;border-radius:50%;width:23px;height:23px;display:grid;place-items:center}.island-label .arrow{font-size:15px;opacity:.6;margin-left:6px}.island-label.visited .num{background:#b6d9a2;color:#234734}.island-label.active{background:#f8e4a2;color:#204e51}dialog{color:#153d43;background:#f6f6ed;border:0;border-radius:18px;padding:42px;width:min(570px,calc(100% - 28px));max-height:85dvh;box-shadow:0 25px 120px #002d4180}dialog::backdrop{background:#00394575;backdrop-filter:blur(7px)}.close{position:absolute;right:15px;top:12px;border:0;background:none;color:#547372;font-size:28px;width:35px;height:35px}.overline{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#4c817b;font-weight:700}dialog h2{font-family:Manrope,sans-serif;font-size:34px;letter-spacing:-1px;line-height:1.2;font-weight:600;margin:15px 0}dialog p{font-size:16px;line-height:1.65;color:#54716f}.tags{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0}.tags span{border:1px solid #b9cfbf;font-size:12px;border-radius:5px;padding:5px 9px;color:#436a5d}.project{border-top:1px solid #d5dfd3;padding:19px 0 8px}.project h3{margin:0;font-size:19px}.project p{font-size:14px;margin:10px 0 14px}.links{display:flex;gap:17px;flex-wrap:wrap}.links a{font-size:14px;font-weight:600;color:#077b77;border-bottom:1px solid #077b7766;padding-bottom:4px}.guide-item{width:100%;display:flex;align-items:center;gap:15px;text-align:left;border:0;border-top:1px solid #d3ded3;background:none;padding:18px 0;color:#244e4d}.guide-item b{font-size:12px;color:#709a87}.guide-item span{flex:1;font-size:17px}.guide-item small{display:block;font-size:12px;color:#6e8880;margin-top:4px}.sail-button{margin-top:25px;background:#136c65;color:#fff;border:0;border-radius:30px;padding:12px 22px}.touch-pad{display:none}#fallback{position:fixed;top:35%;left:50%;transform:translateX(-50%);text-align:center;width:80%;background:#0e6572;padding:25px;border-radius:20px}#fallback[hidden]{display:none}#fallback button{padding:12px;border:0;border-radius:8px}#status{font-size:11px;white-space:nowrap}@media(min-width:1500px){.intro{bottom:130px}}@media(max-width:900px){.intro h1{font-size:32px}.intro{bottom:110px}.controls>span:last-child,.controls b,#status{display:none}.compass{right:30px}.location{font-size:10px}.intro p{font-size:13px}}@media(max-width:600px){header{left:20px;right:20px;top:22px}.brand{font-size:11px;letter-spacing:1.5px;gap:9px}.brand small{font-size:8px;letter-spacing:1px}.brand-icon{width:35px;height:35px;font-size:20px}.brand-icon span{font-size:14px;left:19px;top:15px}nav{gap:6px}nav button,nav a{padding:10px 12px;font-size:12px}nav span{display:none}nav a{display:none}.edition{top:78px;right:20px;font-size:8px}.intro{left:22px;bottom:88px}.eyebrow{font-size:8px;letter-spacing:1.2px}.intro h1{font-size:29px;letter-spacing:-1px;margin:9px 0}.intro p{font-size:12px;line-height:1.5}.location{display:none}.compass{display:none}footer{left:22px;right:22px;bottom:16px;padding-top:10px}.controls .key{display:none}.controls>span:not(.key){font-size:10px;margin:0}.controls>span:not(.key):first-of-type{display:none}.island-label{font-size:11px;padding:6px 10px 6px 6px;gap:6px}.island-label .num{width:19px;height:19px;font-size:9px}.island-label .arrow{display:none}.touch-pad{display:block;position:absolute;right:20px;bottom:107px;text-align:center;touch-action:none}.touch-pad button{border:1px solid #ffffff65;color:#fff;background:#06586266;width:35px;height:35px;border-radius:9px;margin:2px;font-size:17px;touch-action:none}dialog{padding:31px 24px}dialog h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* The island layer keeps interaction prompts separate from the exploration controls. */
[hidden]{display:none!important}
#shore-hud{position:absolute;top:111px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:flex-start;gap:18px;pointer-events:none}
#shore-hud h2{font-family:Manrope,sans-serif;font-size:30px;letter-spacing:-1px;margin:8px 0;color:#fff9e8;text-shadow:0 2px 14px #003f48}
#shore-hud p{font-size:14px;margin:0;color:#d9f0e7;text-shadow:0 1px 8px #003f48}
.shore-actions{display:flex;gap:9px;pointer-events:auto}
.shore-actions button{border:1px solid #fff8;border-radius:24px;background:#0e5b5bdf;color:#fff8e6;padding:11px 17px;font-size:14px}
.shore-actions button:last-child{background:#f2e4b9;border-color:#f2e4b9;color:#285c56}
#interaction{position:absolute;bottom:89px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;width:max-content;max-width:calc(100% - 44px);background:#f8f3dc;color:#244d48;border:1px solid #e5dfbc;border-radius:15px;padding:16px 18px 16px 22px;box-shadow:0 8px 32px #003b4960;z-index:7}
.interaction-copy{display:flex;flex-direction:column;gap:5px}.interaction-copy strong{font-size:16px}.interaction-copy span{font-size:13px;color:#517269}
#interaction button,#interaction>a{font:600 14px 'DM Sans',sans-serif;display:inline-block;flex-shrink:0;background:#176e61;color:#fff9e5;border:0;border-radius:24px;padding:13px 19px;cursor:pointer;white-space:nowrap}
.on-island .intro,.on-island .compass,.on-island .edition,.on-island #labels{display:none}
.on-island .vignette{background:linear-gradient(180deg,#003c4960,transparent 30%,transparent 72%,#003c4960)}
.on-island #status{display:none}.on-island footer .controls{font-size:13px}
@media(max-width:900px){#interaction{bottom:79px;gap:14px}#shore-hud h2{font-size:26px}.shore-actions{flex-direction:column}}
@media(max-width:600px){
 #shore-hud{top:83px;left:20px;right:20px;gap:10px}#shore-hud .eyebrow{font-size:8px}#shore-hud h2{font-size:23px;margin:7px 0}#shore-hud p{font-size:12px;max-width:175px;line-height:1.4}
 .shore-actions{gap:6px}.shore-actions button{font-size:12px;padding:9px 11px}.shore-actions button:first-child{display:none}
 #interaction{bottom:66px;padding:12px 14px;gap:10px;flex-direction:column;align-items:flex-start;width:calc(100% - 40px);max-width:none;border-radius:13px}
 .interaction-copy strong{font-size:14px}.interaction-copy span{font-size:12px;line-height:1.4}#interaction button,#interaction>a{font-size:13px;padding:10px 15px;align-self:flex-end}
 body:has(#interaction:not([hidden])) .touch-pad{bottom:224px}.on-island .touch-pad{bottom:104px}
 .on-island .controls #movement-hint{display:block;font-size:12px}.on-island #reset{font-size:11px}
}
/* One persistent choice for both experiences. The original layout stays isolated in its own document. */
#view-switcher{position:fixed;z-index:20;top:0;left:0;right:0;height:56px;display:flex;justify-content:center;align-items:center;gap:4px;background:#074f59f2;border-bottom:1px solid #ffffff25;padding:7px 12px}
#view-switcher button{border:1px solid transparent;border-radius:22px;padding:9px 18px;background:transparent;color:#d4eee7;font-size:14px;font-weight:600;line-height:20px}
#view-switcher button[aria-pressed="true"]{background:#f3edcf;color:#245950;border-color:#f3edcf}
#view-switcher button:focus-visible{outline:2px solid #fff;outline-offset:2px}
#explorer-view>header{top:88px}#explorer-view>.edition{top:161px}#explorer-view>#shore-hud{top:167px}
#classic-view{position:fixed;inset:56px 0 0;background:#faf9f6}
#classic-frame{display:block;border:0;width:100%;height:100%;color-scheme:light}
body.classic-mode #view-switcher{background:#faf9f6;border-color:#dedcd7}
body.classic-mode #view-switcher button{color:#65655f}
body.classic-mode #view-switcher button[aria-pressed="true"]{background:#24251f;color:#faf9f6;border-color:#24251f}
body.classic-mode #view-switcher button:focus-visible{outline-color:#24251f}
@media(max-width:600px){#view-switcher button{font-size:13px;padding:8px 15px}#explorer-view>header{top:78px}#explorer-view>.edition{top:134px}#explorer-view>#shore-hud{top:139px}}
#quest-card{position:absolute;z-index:6;left:30px;top:267px;width:260px;padding:17px;background:#f8f3dfea;color:#264c46;border:1px solid #eadbb5;border-radius:14px;box-shadow:0 8px 28px #00394630;backdrop-filter:blur(12px)}
.quest-heading{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:10px;font-weight:700;letter-spacing:1px}.quest-heading button{font-size:11px;padding:4px;border:0;background:none;color:#35675e;letter-spacing:0}
#quest-title{font-family:Manrope,sans-serif;font-size:18px;line-height:1.3;margin:10px 0;letter-spacing:-.4px}.quest-meter{display:flex;align-items:center;gap:10px}.quest-meter span{font-size:11px;white-space:nowrap}#quest-progress{width:85px;height:6px;accent-color:#227360}
#quest-description{font-size:14px;line-height:1.5;margin:14px 0 8px}#quest-hint{font-size:12px;line-height:1.5;color:#5c7366;margin:0 0 12px}
#quest-action{border:0;background:#176e61;color:#fff8df;border-radius:22px;padding:11px 13px;width:100%;font-size:13px;font-weight:600}
#quest-card details{font-size:12px;margin:12px 0}#quest-card summary{cursor:pointer;color:#35675e;padding:4px 0}#quest-list{list-style:none;padding:0;margin:8px 0}#quest-list li{padding:5px 0;color:#6e7d6d}#quest-list .done{color:#25745d}#quest-list .current{color:#254940;font-weight:700}#quest-pause,#quest-restart{font-size:12px;border:0;background:none;color:#517166;padding:5px 0}
#quest-marker{position:absolute;z-index:5;transform:translate(-50%,-50%);width:34px;height:34px;background:#ffe196;color:#78521a;border:2px solid #fff1bd;border-radius:50%;font-size:19px;box-shadow:0 3px 14px #76591845;cursor:pointer}
.island-label.quest-target{border:2px solid #ffe096}.island-label.quest-target:after{content:'★';color:#ffe096}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1000px){#quest-card{left:20px;width:230px;top:248px}}
@media(max-width:650px){#quest-card{top:226px;left:20px;width:225px;padding:12px}#quest-title{font-size:15px;margin:7px 0}.quest-heading{font-size:9px}#quest-description{font-size:13px}#quest-body{max-height:32dvh;overflow:auto}.quest-meter span{font-size:10px}#quest-card:has(#quest-body[hidden]){width:225px}#quest-marker{width:28px;height:28px;font-size:15px}}
@media(max-height:700px) and (min-width:651px){#quest-card{top:240px;max-height:calc(100dvh - 330px);overflow:auto}}
/* Sailing reserves distinct spaces for the quest, ocean labels, header, and controls. */
body:not(.on-island) #world{left:316px;right:20px;top:184px;bottom:82px}
body:not(.on-island) #quest-card{left:20px;top:184px;bottom:82px;width:276px;max-height:none;overflow:auto}
body:not(.on-island) .intro,body:not(.on-island) .compass{display:none}
#quest-island-count{font-size:12px;color:#4e7063;margin:13px 0 5px}
#quest-objectives{list-style:none;padding:0;margin:0;font-size:12px;line-height:1.45;max-height:160px;overflow:auto}
#quest-objectives li{padding:5px 0;color:#6e7d6d}#quest-objectives .done{color:#25745d}#quest-objectives .current{color:#254940;font-weight:700}
.on-island #quest-card{max-height:calc(100dvh - 350px);overflow:auto}
@media(max-width:650px){
 body:not(.on-island) #world{left:0;right:0;top:153px;bottom:303px}
 body:not(.on-island) #quest-card{left:20px;right:20px;width:auto;top:auto;bottom:77px;height:206px;max-height:206px}
 body:not(.on-island) #quest-body{max-height:none;overflow:visible}
 body:not(.on-island) #interaction{bottom:295px}
 body:not(.on-island) .touch-pad{bottom:305px}
 .on-island #quest-card{max-height:calc(100dvh - 325px)}
}
@media(max-height:600px) and (max-width:650px){body:not(.on-island) #world{top:130px;bottom:245px}body:not(.on-island) #quest-card{height:155px;max-height:155px;bottom:70px}body:not(.on-island) #interaction{bottom:235px}}