@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap');
:root{--ink:#f5efdc;--deep:#183c3d;--gold:#e9cb8c}*{box-sizing:border-box}body{margin:0;background:#92bac2;color:var(--ink);font:14px system-ui,sans-serif;overflow:hidden}button,a{color:inherit}button{font:inherit;cursor:pointer;background:#173a3bb8;border:1px solid #eee5c12e;border-radius:5px;padding:11px 17px;transition:.2s}button:hover{background:#31585a;border-color:#dfcc96}button:disabled{opacity:.45;cursor:not-allowed}button.gold{background:#edd4a0;color:#244143;border-color:#efdcb0;font-weight:600}#world,.vignette{position:fixed;inset:0;width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(#122c3b55,transparent 25%,transparent 60%,#143d455c)}header{position:absolute;top:28px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:center}.brand{text-decoration:none;font:600 30px 'Noto Serif SC',serif;letter-spacing:7px}.brand span{display:block;font:9px system-ui;letter-spacing:4px;margin-top:5px}.region{font-size:12px;letter-spacing:2px}.region i{display:inline-block;width:5px;height:5px;background:var(--gold);border-radius:50%;margin:0 14px}.mission{position:absolute;top:145px;left:36px;width:276px;padding:24px;background:linear-gradient(110deg,#163b40c4,#234b5066);border:1px solid #f7eac325;border-radius:5px;backdrop-filter:blur(12px)}small{font-size:10px;letter-spacing:2px;color:#dfd7bd}.mission h1{font:600 24px 'Noto Serif SC',serif;margin:14px 0}.mission p{line-height:1.9;color:#dce8e2;font-size:13px}.line{height:1px;background:#e7e9c830;margin:20px 0}.mission button{width:100%;margin-top:15px}#distance{font-size:12px;color:#daccab}.resources{position:absolute;right:36px;top:145px;display:flex;gap:24px;background:#183c3c82;padding:16px 24px;border-radius:5px}.resources small{display:block;margin-bottom:7px}.resources b{font-weight:400;font-size:19px}.compass{position:absolute;top:104px;left:50%;transform:translateX(-50%);display:flex;gap:35px;font-size:11px;color:#eef0ddad}.compass b{color:#ffedc2;font-size:12px;font-weight:400}.spirit{position:absolute;bottom:137px;left:36px;display:flex;align-items:center;gap:16px;max-width:440px;padding:16px 21px;background:#153f469e;border-radius:5px;backdrop-filter:blur(8px)}.orb{font-size:30px;color:#f7d797;border:1px solid #f2db9d66;border-radius:50%;width:44px;height:44px;display:grid;place-items:center}.spirit p{font-size:12px;margin:8px 0 0;line-height:1.7}.telemetry{position:absolute;right:40px;bottom:150px;text-align:right}.telemetry b{font-size:34px;font-weight:300}.telemetry span{display:block;font-size:10px;letter-spacing:2px;opacity:.8}.telemetry hr{border:0;border-top:1px solid #ffffff40;width:65px;margin:16px 0 16px auto}nav{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);display:flex;gap:9px;white-space:nowrap}nav button{min-width:88px;padding:13px 16px;font-size:19px;background:#173d42ad;backdrop-filter:blur(8px)}nav span{font-size:12px;margin-left:7px}kbd{font:10px system-ui;margin-left:8px;color:#e2d4a7}.keys{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:1px;color:#e7eee4aa;white-space:nowrap}.welcome{position:fixed;inset:0;z-index:5;background:linear-gradient(90deg,#153b48e8,transparent 85%);display:flex;align-items:center;padding:8vw}.intro h2{font:600 88px 'Noto Serif SC',serif;letter-spacing:18px;margin:26px 0}.intro h2 span{display:block;font:12px system-ui;letter-spacing:9px;margin-top:12px}.intro>p{font:17px/2.2 'Noto Serif SC',serif;color:#e0e7dd;margin:28px 0}.intro .gold{padding:17px 35px}.intro p.note{font:11px/1.8 system-ui;color:#d8e4e0a8}.chapter{position:absolute;right:7vw;bottom:9vh;border-left:1px solid #edddab70;padding-left:20px}.chapter span{font-size:10px;letter-spacing:3px}.chapter b{display:block;font:20px 'Noto Serif SC',serif;margin:12px 0}.chapter p{font-size:11px;opacity:.7}dialog{background:#f3efe2;color:#284448;border:0;border-radius:9px;padding:38px;width:min(720px,90vw);max-height:82vh;box-shadow:0 24px 90px #0c263877}dialog::backdrop{background:#0d30377a;backdrop-filter:blur(5px)}dialog h2{font:600 28px 'Noto Serif SC',serif;margin-top:0}dialog p{line-height:1.8}dialog small{color:#788881}dialog button{background:#284e50;color:#f2eddd}dialog .close{position:absolute;right:14px;top:12px;padding:3px 11px;background:transparent;color:#284448;border:0;font-size:24px}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.card{padding:20px;background:#fffaf0;border:1px solid #d8d7c5;border-radius:6px}.card h3{font:600 18px 'Noto Serif SC',serif}.card p{font-size:12px;color:#637570}.badge{display:inline-block;background:#dce6d9;padding:4px 8px;border-radius:4px;font-size:11px}.meter{height:7px;background:#d8dfd3;border-radius:5px;margin:16px 0}.meter>div{height:100%;background:#729a87;border-radius:5px}.journal{border-left:1px solid #b6c4b7;padding:5px 0 15px 22px}.journal time{font-size:11px;color:#829080}#toast{position:absolute;top:95px;left:50%;transform:translateX(-50%);background:#ebd7a9;color:#26484c;padding:13px 25px;border-radius:4px;opacity:0;transition:.3s;pointer-events:none}#toast.show{opacity:1}.cockpit{position:fixed;bottom:0;width:100%;height:28%;pointer-events:none;border-top:14px solid #593e29;background:linear-gradient(0deg,#3d2e23 40%,#77583c 65%,transparent 65%);clip-path:polygon(0 50%,17% 15%,36% 45%,64% 45%,83% 15%,100% 50%,100% 100%,0 100%);z-index:-1}@media(max-width:760px){header{left:18px;right:18px;top:18px}.region{display:none}.mission{top:105px;left:18px;width:220px;padding:18px}.mission h1{font-size:19px}.resources{right:18px;top:105px;display:block;padding:10px}.resources div{margin-bottom:10px}.resources b{font-size:14px}.compass{display:none}.spirit{left:18px;bottom:145px;max-width:75%;padding:12px}.telemetry{right:20px;bottom:150px}nav{bottom:50px;gap:4px;width:96%;justify-content:center}nav button{min-width:0;padding:11px 9px}nav span{font-size:10px}nav kbd{display:none}.keys{font-size:8px}.intro h2{font-size:64px}.chapter{display:none}.cards{grid-template-columns:1fr}}

#shoreHud{display:none;position:fixed;left:28px;top:120px;width:260px;padding:22px;background:#163b42df;color:#f5ead4;border:1px solid #d7c29950;border-radius:8px;z-index:8;backdrop-filter:blur(12px)}
#shoreHud h2{font-size:23px;margin:12px 0}#shoreHud p{font-size:14px;line-height:1.7}#shoreHud button{width:100%;margin:5px 0}#shoreHud small{font-size:11px;line-height:1.8;opacity:.8}
body.onfoot #shoreHud{display:block}body.onfoot .mission,body.onfoot .resources,body.onfoot .compass,body.onfoot .spirit,body.onfoot .telemetry,body.onfoot nav,body.onfoot .keys{display:none}.shore-controls{display:flex;gap:5px}.shore-controls button{width:25%!important;touch-action:none;user-select:none}
@media(max-width:760px){#shoreHud{left:12px;top:auto;bottom:12px;width:calc(100% - 24px);padding:12px;box-sizing:border-box}#shoreHud h2{font-size:18px;margin:4px 0}#shoreHud p{margin:4px 0}#quality{right:15px!important}body.onfoot header .region{display:none}}
nav{max-width:96%;overflow-x:auto;justify-content:flex-start}nav button{flex-shrink:0}@media(max-width:760px){nav{justify-content:flex-start}}

.header-actions{display:flex;gap:8px;z-index:6}#panel table{width:100%;border-collapse:collapse}#panel th,#panel td{padding:10px;border-bottom:1px solid #d5d9c9;text-align:left}#panel li{line-height:1.8;margin:8px 0}#panel h3{margin-top:26px}#panel td:first-child{white-space:nowrap}

#communityHud{position:fixed;left:20px;top:22px;width:330px;max-height:94vh;overflow:auto;padding:22px;background:#183e42f0;border:1px solid #d8bd84;border-radius:10px;z-index:10;display:none}#communityHud p{font-size:13px;line-height:1.7}#communityHud h2{margin:8px 0}.communityButtons{display:grid;grid-template-columns:1fr 1fr;gap:7px}#communityHud button{font-size:12px;padding:9px}body.community header,body.community .mission,body.community .resources,body.community .spirit,body.community .telemetry,body.community nav,body.community .keys,body.community .compass,body.community #quality{display:none}@media(max-width:760px){#communityHud{width:245px;left:8px;top:8px;padding:12px;max-height:96vh}}

#flightPad{position:fixed;right:24px;bottom:115px;z-index:3;width:180px}#flightPad small{display:block;font-size:9px;margin-bottom:5px}#flightPad div{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}#flightPad button{padding:9px 4px;font-size:11px;touch-action:none;user-select:none}body.community #flightPad,body.onfoot #flightPad{display:none}.telemetry{bottom:260px}@media(max-width:760px){#flightPad{right:12px;bottom:116px;width:150px}.telemetry{bottom:270px}}

#communityHud{background:linear-gradient(140deg,#193e42ed,#26484bdb);backdrop-filter:blur(16px);width:300px;padding:20px;border-color:#e4cf9e55;box-shadow:0 12px 40px #112f3525}#communityHud h2{font:600 24px 'Noto Serif SC',serif;letter-spacing:2px}#communityHud p{color:#e1e5d5;margin:12px 0;font-size:12px}#communityHud details{margin:14px 0;padding-top:12px;border-top:1px solid #e7d9b733}#communityHud summary{cursor:pointer;font-size:12px;color:#efd5a2;padding:4px 0 10px}#communityGuide{width:100%;margin-bottom:3px}#communityPause{float:right;padding:4px 8px;font-size:10px}#communityHud .buildTools p{font-size:11px}#communityHud #communityWalk{width:100%}@media(max-width:760px){#communityHud{width:240px;padding:12px}}

body.community .vignette{background:radial-gradient(ellipse at center,transparent 50%,#21474c22 100%)}

/* Keep every flight action in reach without clipping the final view control. */
body:not(.community):not(.onfoot) nav{width:calc(100% - 40px);max-width:1240px;gap:6px;bottom:44px;box-sizing:border-box}body:not(.community):not(.onfoot) nav button{padding:12px 10px;min-width:0;font-size:12px}body:not(.community):not(.onfoot) nav kbd{display:none}nav button:focus-visible,#communityHud button:focus-visible,#communityHud summary:focus-visible{outline:3px solid #f4d184;outline-offset:3px}#communityHud{box-sizing:border-box;max-height:calc(100dvh - 44px)}#communityMessage{scroll-margin:24px}#communityHud .lifeTools button{margin:4px 2px}#communityHud .lifeTools[open]~#communityMessage{background:#ffffff0a;padding:10px;border-radius:5px}
@media(max-width:760px){body:not(.community):not(.onfoot) nav{width:calc(100% - 16px);bottom:44px}#communityHud{max-height:calc(100dvh - 16px)}}

.treasury-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:#173a3bb8;border:1px solid #eee5c12e;border-radius:5px;padding:11px 17px;font-size:12px}.treasury-link:hover{background:#31585a;border-color:#dfcc96}.community-treasury{display:block;padding:10px;margin:8px 0 12px;border:1px solid #e4cf9e55;border-radius:5px;text-align:center;text-decoration:none;color:#efd5a2;font-size:12px}.community-treasury:hover{background:#31585a}.treasury-link:focus-visible,.community-treasury:focus-visible{outline:3px solid #f4d184;outline-offset:3px}@media(max-width:760px){.header-actions{gap:4px}.header-actions button,.treasury-link{padding:9px 8px;font-size:10px}.treasury-link{max-width:70px;line-height:1.4}}

/* Mission guidance: keep the next meaningful action visible while flying. */
.mission-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}.mission-phase{color:#efd39d}
.mission-topline span{font-size:10px;letter-spacing:1px;color:#efd39d;text-align:right;white-space:nowrap}
.mission-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:18px 0 14px}
.mission-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;color:#d7e1d8a8;font-size:9px;text-align:center}
.mission-step:not(:last-child)::after{content:'';position:absolute;top:10px;left:calc(50% + 12px);width:calc(100% - 14px);height:1px;background:#d9e0d04d}
.mission-step i{display:grid;place-items:center;width:21px;height:21px;border:1px solid #d9e0d060;border-radius:50%;font-style:normal;font-size:10px;color:#d7e1d8c9;background:#193e43}
.mission-step b{font-weight:500;white-space:nowrap}
.mission-step.current{color:#fff1c5}.mission-step.current i{border-color:#efd39d;background:#b58a4b;color:#173c40;box-shadow:0 0 0 4px #e4c88424}.mission-step.done{color:#e7d09b}.mission-step.done i{border-color:#e7d09b;background:#e7d09b;color:#214448}.mission-step.done:not(:last-child)::after{background:#e7d09b99}
.mission-next{padding:10px 12px;background:#0f3038a6;border:1px solid #d9c18440;border-radius:4px}.mission-next small{display:block;font-size:9px;color:#d5c9a7;margin-bottom:4px}.mission-next strong{display:block;font-size:13px;color:#fff1c5;font-weight:600;line-height:1.45}
#approachHint{margin-top:9px;color:#dbe5d9b8;font-size:11px;line-height:1.5}.mission-primary{margin-top:13px!important}.mission-auto{width:100%;margin-top:7px!important;padding:8px 12px;font-size:11px;background:#15383d99}.mission #interact{border-color:#f0d498;background:#f0d498;color:#244143;font-weight:700;animation:mission-pulse 1.8s ease-in-out infinite}.mission #interact[hidden]{display:none}@keyframes mission-pulse{0%,100%{box-shadow:0 0 0 0 #efd39d44}50%{box-shadow:0 0 0 7px #efd39d00}}
@media(max-width:760px){.mission-topline span{font-size:9px}.mission-steps{margin:14px 0 10px}.mission-step{font-size:8px}.mission-next{padding:8px 10px}.mission-next strong{font-size:12px}#approachHint{font-size:10px}}
.welcome-route{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 24px;color:#f2e3b9;font-size:12px;letter-spacing:.5px}.welcome-route small{width:100%;margin-bottom:2px;color:#ddcfaa}.welcome-route span{padding:6px 9px;border:1px solid #e8d39a66;border-radius:4px;background:#173f4699}.welcome-route i{font-style:normal;color:#edcf91}
@media(max-width:760px){.welcome-route{font-size:11px;gap:5px;margin-bottom:18px}.welcome-route span{padding:5px 7px}}
#landingGuide{position:fixed;right:36px;top:238px;width:270px;padding:13px 16px;background:linear-gradient(115deg,#183f43d0,#36595b9d);border:1px solid #f0d79b66;border-radius:6px;z-index:4;box-shadow:0 10px 30px #183a3c22;backdrop-filter:blur(10px)}#landingGuide small{display:block;font-size:9px;letter-spacing:2px;color:#eddbb0}#landingGuide strong{display:block;margin-top:6px;color:#f3dfad;font-size:14px;font-weight:600}#landingGuide p{margin:6px 0 0;color:#e0e8df;font-size:11px;line-height:1.45}#landingGuide.ready{background:linear-gradient(115deg,#5d6848e8,#2b5b58d4);border-color:#f2d28c}#landingGuide.ready strong{color:#ffe3a2}#landingGuide.locked{opacity:.82}#landingGuide.locked strong{color:#d9dfd6}body.onfoot #landingGuide,body.community #landingGuide{display:none}@media(max-width:760px){#landingGuide{right:18px;top:235px;width:205px;padding:10px 12px}#landingGuide p{font-size:10px}}

/* Small navigation map keeps the right side readable while preserving the scene. */
#miniMap{position:fixed;right:222px;bottom:116px;width:172px;padding:9px 10px 10px;background:#183c3c70;border:1px solid #f0d79b42;border-radius:6px;z-index:3;backdrop-filter:blur(10px);box-shadow:0 8px 24px #17363b22}#miniMap small{display:block;margin:0 0 5px;font-size:8px;color:#e8d8b3;letter-spacing:1.5px}#miniMap canvas{display:block;width:100%;height:auto;border-radius:4px;opacity:.82}body.onfoot #miniMap,body.community #miniMap{display:none}@media(max-width:760px){#miniMap{right:12px;bottom:254px;width:142px;padding:7px 8px 8px}#miniMap small{font-size:7px}}

/* UI softness pass: preserve layout, copy and interactions while lowering panel weight. */
button{background:#173a3b99}
.mission{background:linear-gradient(110deg,#163b408f,#234b5058);border-color:#f7eac31c}
.mission-next{background:#0f30388b;border-color:#d9c1842c}
.mission-auto{background:#15383d79}
.resources{background:#183c3c68}
.spirit{background:#153f4672}
nav button{background:#173d4288}
#flightPad button{background:#173a3b82}
#landingGuide{background:linear-gradient(115deg,#183f4396,#36595b72);border-color:#f0d79b40;box-shadow:0 10px 30px #183a3c18}
#landingGuide.ready{background:linear-gradient(115deg,#5d6848b8,#2b5b589e);border-color:#f2d28c88}
#miniMap{background:#183c3c5c;border-color:#f0d79b30;box-shadow:0 8px 24px #17363b18}
.welcome{background:linear-gradient(90deg,#153b48c8,transparent 85%)}
#shoreHud{background:#163b42bb;border-color:#d7c29938}
#communityHud{background:linear-gradient(140deg,#193e42cf,#26484bbc);border-color:#e4cf9e3d;box-shadow:0 12px 40px #112f3518}


/* Flight HUD visibility toggle: preserve every existing UI node and interaction while allowing immersive navigation. */
header,.mission,.resources,.compass,.spirit,.telemetry,nav,.keys,#toast,#panel,#quality,#flightPad,#landingGuide,#miniMap{transition:opacity .28s ease,visibility 0s linear 0s}
body.ui-hidden header,body.ui-hidden .mission,body.ui-hidden .resources,body.ui-hidden .compass,body.ui-hidden .spirit,body.ui-hidden .telemetry,body.ui-hidden nav,body.ui-hidden .keys,body.ui-hidden #toast,body.ui-hidden #panel,body.ui-hidden #quality,body.ui-hidden #flightPad,body.ui-hidden #landingGuide,body.ui-hidden #miniMap{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility 0s linear .28s}
.ui-settings{margin-top:28px;padding:16px 18px;background:#e9e6da;border:1px solid #d5d9c9;border-radius:8px}
.ui-settings h3{margin:0 0 12px!important;color:#284448;font:600 19px 'Noto Serif SC',serif}
.ui-settings-label{margin:0 0 10px!important;color:#536a63;font-weight:600}
.ui-settings-options{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
#uiSettings .ui-settings-options button{margin:0;padding:9px 14px;background:#d9e1d7;color:#284448;border-color:#c1ccbd}
#uiSettings .ui-settings-options button[aria-pressed="true"]{background:#e7c982;color:#284448;border-color:#c6a95f;box-shadow:0 0 0 2px #e7c98255}
.ui-settings>small{display:block;letter-spacing:.2px;color:#788881;line-height:1.6}


/* Independent information panels: only these four groups fade in/out. */
.info-panel{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px);transition:opacity .24s ease,transform .24s ease,visibility 0s linear .24s}
.info-panel.panel-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .24s ease,transform .24s ease,visibility 0s linear 0s}
.panel-toggles{position:fixed;left:50%;top:136px;transform:translateX(-50%);display:flex;gap:6px;align-items:center;padding:6px;background:#183c3c5c;border:1px solid #f0d79b30;border-radius:7px;backdrop-filter:blur(10px);z-index:4;box-shadow:0 8px 24px #17363b18}
.panel-toggles button{padding:8px 11px;font-size:11px;line-height:1;white-space:nowrap;background:#173a3b82;border-color:#eee5c12e}
.panel-toggles button.active{background:#e4c78b;color:#284448;border-color:#f2d9a0;box-shadow:0 0 0 2px #e4c78b33}
body.community #panelToggles,body.onfoot #panelToggles{display:none}
/* Keep the persistent navigation and controls visible while the four panels are collapsed. */
body.ui-hidden header,body.ui-hidden .compass,body.ui-hidden nav,body.ui-hidden .keys,body.ui-hidden #panel,body.ui-hidden #quality,body.ui-hidden #flightPad{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s ease,visibility 0s linear 0s}
body.ui-hidden #toast{opacity:0;visibility:visible;pointer-events:none}
body.ui-hidden #toast.show{opacity:1}
body.ui-hidden .info-panel{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px);transition:opacity .24s ease,transform .24s ease,visibility 0s linear .24s}
body.ui-hidden .info-panel.panel-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .24s ease,transform .24s ease,visibility 0s linear 0s}
@media(max-width:760px){.panel-toggles{left:12px;right:12px;top:72px;transform:none;overflow-x:auto;justify-content:flex-start}.panel-toggles button{flex:0 0 auto;padding:8px 10px}.info-panel.panel-visible{transform:none}}

/* Keep the spirit dialogue in its own dock so it never covers the mission card,
   mission actions, or the persistent bottom navigation. */
.spirit{left:330px;top:190px;bottom:auto;width:min(360px,calc(100vw - 360px));max-width:none;z-index:2;box-shadow:0 12px 30px #17363b20}
@media(max-width:980px){.spirit{left:auto;right:18px;top:auto;bottom:145px;width:min(320px,calc(100vw - 36px));max-width:none}}
@media(max-width:760px){.spirit{right:18px;bottom:145px;width:min(300px,calc(100vw - 36px));padding:12px 14px}}
