.world-page { margin:0; height:100vh; height:100dvh; overflow:hidden; background:#a9d9e5; color:#284337; }
.world-page button,.world-page a,.world-page input,.world-page select { touch-action:manipulation; }
#universe { position:relative; width:100%; height:100vh; height:100dvh; overflow:hidden; }
#scene-host { position:absolute; inset:0; }
.park-canvas { width:100%; height:100%; display:block; touch-action:pinch-zoom; cursor:grab; outline:none; }
.park-canvas:active { cursor:grabbing; }
.world-header { position:absolute; z-index:2; inset:22px 26px auto; display:flex; gap:24px; align-items:center; pointer-events:none; }
.world-wordmark { font-size:26px; font-weight:800; letter-spacing:-1px; padding:7px 13px; border-radius:10px; background:#fff8e9f0; pointer-events:auto; }
.world-wordmark span { color:#c2713f; }
.place-heading { padding:9px 16px; border-left:1px solid #35544240; background:#fff8e9e8; border-radius:0 10px 10px 0; }
.place-heading>span { display:block; font-size:9px; text-transform:uppercase; letter-spacing:1.7px; }
.place-heading strong { font:400 21px/1.4 var(--serif); }
.oxygen-tank { display:flex; align-items:center; gap:8px; min-height:48px; background:#fff8e9f5; padding:8px 15px; border-radius:24px; margin-left:auto; border:1px solid #b6cdb1; color:#355846; }
.oxygen-tank strong { font:600 22px var(--mono); }
.oxygen-tank>span:last-child { font-size:15px; }
.oxygen-orb { width:20px; height:20px; border-radius:50%; background:#a5d4b3; border:3px solid #d2e7c5; box-shadow:inset -3px -3px 0 #70a183; }
.world-actions { display:flex; gap:8px; pointer-events:auto; }
.world-actions button { background:#fff8e9ef; border-color:#d7dcc6; min-height:46px; padding:8px 15px; font-size:13px; }
#open-help { min-width:44px; font-size:18px; }
#language-toggle { font-size:12px; }
.welcome-panel { position:absolute; z-index:2; left:32px; bottom:132px; width:355px; background:#fff8e9f2; border:1px solid #d7dfc6; border-radius:15px; padding:25px; box-shadow:0 5px 25px #28433714; }
.world-eyebrow { font-size:10px; letter-spacing:1.2px; font-family:var(--mono); color:#846833; text-transform:uppercase; line-height:1.8; }
.welcome-panel h1 { font:400 37px/1.15 var(--serif); letter-spacing:-.8px; margin:14px 0; }
.welcome-panel>p:not(.world-eyebrow):not(.visit-note) { font-size:14px; line-height:1.8; color:#526553; }
.welcome-panel .primary-button { margin-top:19px; font-size:13px; width:100%; }
.visit-note { font-size:11px; line-height:1.8; color:#657360; margin-top:17px; }
.crosshair { position:absolute; width:5px; height:5px; border-radius:50%; background:#fff5ddaa; border:1px solid #31594870; top:50%; left:50%; pointer-events:none; }
.world-bottom { position:absolute; z-index:2; left:28px; right:28px; bottom:23px; display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:25px; pointer-events:none; }
.walking-note { background:#fff8e9e8; padding:11px 15px; border-radius:9px; justify-self:start; max-width:350px; }
.walking-note p { font-size:11px; line-height:1.8; }
.walking-note span { font-size:10px; color:#6c785d; }
.interaction { display:flex; flex-direction:column; align-items:center; gap:7px; pointer-events:auto; }
.interaction>span { font-size:12px; background:#fff8e9ed; padding:5px 12px; border-radius:20px; max-width:260px; text-align:center; }
#world-interact { min-width:170px; min-height:46px; box-shadow:0 3px 0 #66392235; }
.space-shortcut { justify-self:end; background:#fff8e9ed; font-size:12px; border-color:#d7dcc6; pointer-events:auto; }
.world-move-pad { position:absolute; left:28px; bottom:135px; display:none; grid-template-columns:repeat(3,48px); grid-template-rows:repeat(2,48px); gap:5px; z-index:3; }
.world-move-pad button,.world-look-pad button { background:#fff8e9dd; border:1px solid #cdd9c3; border-radius:10px; padding:3px; font-size:24px; min-height:48px; width:48px; user-select:none; touch-action:manipulation; }
.world-move-pad [data-walk=forward] { grid-column:2; }.world-move-pad [data-walk=left] { grid-column:1; grid-row:2; }.world-move-pad [data-walk=back] { grid-column:2; grid-row:2; }.world-move-pad [data-walk=right] { grid-column:3; grid-row:2; }
.world-look-pad { position:absolute; right:27px; bottom:161px; display:none; gap:8px; z-index:3; }
.world-notice { position:absolute; top:104px; left:50%; transform:translateX(-50%); border-radius:9px; background:#fff8e9f0; color:#436143; padding:10px 17px; font-size:13px; z-index:4; max-width:90%; text-align:center; }
.world-notice:empty { display:none; }
#scene-fallback { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:20px; background:#c6dec1; padding:30px; text-align:center; }
#scene-fallback[data-realm=moon] { background:#243450; color:#f0e8d2; }#scene-fallback[data-realm=mars] { background:#794d43; color:#f0e8d2; }#scene-fallback[data-realm=orbit] { background:#152039; color:#f0e8d2; }
.fallback-planet { width:180px; height:180px; border-radius:50%; background:#8eb28a; box-shadow:inset -30px -15px 0 #436f5e55,0 0 0 20px #b4d1a155; }
#scene-fallback[data-realm=moon] .fallback-planet { background:#b6bfd0; }#scene-fallback[data-realm=mars] .fallback-planet { background:#c3845d; }#scene-fallback[data-realm=orbit] .fallback-planet { background:#709caf; }
#scene-fallback p { max-width:390px; font-size:15px; }
.world-page dialog { border:1px solid #d7dcc9; border-radius:18px; padding:28px; color:var(--ink); background:#faf8ef; width:min(1050px,calc(100% - 44px)); max-height:90vh; max-height:90dvh; overflow:auto; box-shadow:0 25px 80px #182d3040; }
.world-page dialog::backdrop { background:#152c3b65; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; }
.dialog-heading h2 { font:400 32px/1.3 var(--serif); letter-spacing:-.6px; }
.dialog-heading>button { min-width:44px; font-size:22px; background:transparent; padding:5px; flex-shrink:0; }
.dialog-tools { display:flex; gap:7px; flex-shrink:0; }.dialog-tools button { background:transparent; padding:7px 10px; font-size:12px; }.dialog-tools [data-close] { font-size:22px; min-width:44px; padding:5px; }
.dialog-intro { font-size:14px; color:var(--muted); max-width:700px; margin:0 0 22px; }
.map-layout { display:grid; grid-template-columns:1.25fr 1fr; gap:25px; align-items:start; }
.map-layout h3,.station-index h3 { font-size:14px; margin-bottom:15px; }
.park-travel-map { height:390px; position:relative; background:#d2e6e3; border-radius:14px; overflow:hidden; }
.park-travel-map svg { width:100%; height:100%; position:absolute; inset:0; }
.park-map-place { position:absolute; transform:translate(-50%,-50%); display:flex; gap:7px; align-items:center; background:#fff8e9f2; font-size:11px; padding:8px 11px; min-height:44px; max-width:150px; line-height:1.4; text-align:left; box-shadow:0 2px 4px #214e3920; border-color:#c5d2b4; }
.park-map-place i { display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.map-layout .tiny { margin:13px 0 0; font-size:11px; }
.flight-option { display:grid; grid-template-columns:44px 1fr; gap:5px 12px; border-bottom:1px solid #dbe0cf; padding:0 0 16px; margin-bottom:16px; }
.flight-option h4 { font-size:15px; margin-bottom:6px; }
.flight-option p { font-size:12px; line-height:1.7; color:#5d6d5b; }
.flight-orb { width:40px; height:40px; border-radius:50%; background:#9faec0; box-shadow:inset -10px -5px 0 #536a8650; margin-top:4px; }
.flight-mars .flight-orb { background:#c3865d; }.flight-orbit .flight-orb { background:#7d96b8; box-shadow:inset -10px -5px 0 #44516f50; }
.flight-option button { grid-column:2; margin-top:9px; justify-self:start; padding:8px 12px; font-size:12px; background:#edf0e3; }
.flight-option button:disabled { opacity:.65; }
.return-earth { font-size:13px; background:#dce8ce; }
.station-index { margin-top:23px; border-top:1px solid #dbe0cf; padding-top:20px; }
#puzzle-stations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
#puzzle-stations button { display:flex; align-items:center; gap:8px; font-size:12px; text-align:left; min-height:44px; background:#fffdf6; padding:9px 12px; }
#puzzle-stations i { width:6px; height:6px; border-radius:50%; background:var(--family); flex-shrink:0; }
#puzzle-stations small { font:10px var(--mono); margin-left:auto; color:var(--muted); }
#map-message { color:#a54e2c; font-size:13px; margin-top:13px; }
#help-dialog { max-width:530px; }
#help-dialog>p { font-size:14px; line-height:1.9; margin-bottom:18px; }
#help-dialog>a { display:inline-block; font-size:13px; text-decoration:underline; margin:12px 0 0 15px; }
.puzzle-heading { display:flex; justify-content:space-between; align-items:end; gap:15px; margin:20px 0; }
.puzzle-heading .level-picker { width:min(380px,80%); }
.puzzle-heading select { display:block; width:100%; margin-top:5px; font-size:16px; }
#world-game { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr); gap:26px; }
.park-workbench { min-width:0; }
.park-workbench>h3 { font-size:21px; }
#park-task { margin:12px 0 20px; font-size:14px; line-height:1.8; }
#park-stage,#park-controls { max-width:460px; margin:0 auto; }
#park-controls { margin-top:18px; }
.park-puzzle-notes { background:#eef1e3; padding:22px; border-radius:12px; align-self:start; }
.park-puzzle-notes .rule-box { margin-top:24px; }
#park-message { font-size:13px; margin:15px 0; line-height:1.7; }
.park-win { display:grid; grid-template-columns:58px 1fr; gap:13px; align-items:start; margin-top:20px; padding:18px; border-radius:12px; border:1px solid #c9d9b5; background:#e4ecd4; }
.oxygen-prize { width:50px; height:50px; background:#b2d7b5; border-radius:50%; display:grid; place-items:center; color:#41624d; font:500 20px var(--serif); border:4px solid #cfdfb8; }
.park-win h3 { font:400 24px/1.35 var(--serif); }.park-win p { font-size:12px; line-height:1.8; margin-top:7px; }
.park-win .win-actions { grid-column:1 / 3; }
.world-page input,.world-page select,.world-page textarea { font-size:16px; }
@media(pointer:coarse) { .world-move-pad { display:grid; }.world-look-pad { display:flex; }.walking-note { display:none; } }
@media(max-width:800px) { .place-heading { display:none; }.world-header { gap:10px; }.world-bottom { grid-template-columns:1fr auto; }.walking-note { display:none; }.interaction { align-items:start; }.space-shortcut { max-width:160px; font-size:11px; } }
@media(max-width:600px) {
 .world-header { inset:calc(12px + env(safe-area-inset-top)) 12px auto; gap:8px; }
 .world-wordmark { font-size:21px; padding:7px 9px; }
 .oxygen-tank { gap:5px; padding:8px 10px; min-height:43px; }
 .oxygen-tank strong { font-size:19px; }.oxygen-tank>span:last-child { font-size:12px; }.oxygen-orb { width:16px; height:16px; border-width:2px; }
 .world-actions { gap:5px; }.world-actions button { padding:7px 9px; font-size:11px; min-height:44px; }#open-help { display:none; }#language-toggle { font-size:10px; }
 .welcome-panel { left:14px; bottom:185px; width:min(300px,calc(100% - 28px)); padding:20px; }
 .welcome-panel h1 { font-size:31px; }.welcome-panel>p:not(.world-eyebrow):not(.visit-note) { font-size:13px; }.welcome-panel .visit-note { display:none; }
 .welcome-panel .world-eyebrow { font-size:9px; }
 .welcome-panel .primary-button { margin-top:16px; }
 .world-bottom { left:14px; right:14px; bottom:calc(16px + env(safe-area-inset-bottom)); gap:10px; }
 .interaction>span { font-size:10px; max-width:210px; }.interaction { gap:6px; }
 #world-interact { min-width:145px; min-height:46px; font-size:12px; }
 .space-shortcut { max-width:115px; min-height:44px; font-size:10px; padding:8px; }
 .world-move-pad { left:14px; bottom:105px; grid-template-columns:repeat(3,44px); grid-template-rows:repeat(2,44px); gap:4px; }
 .world-move-pad { display:grid; }.world-look-pad { display:flex; }
 .world-move-pad button,.world-look-pad button { width:44px; min-height:44px; font-size:23px; }
 .world-look-pad { right:14px; bottom:123px; }
 .world-notice { top:74px; font-size:12px; padding:8px 13px; width:max-content; }
 .world-page dialog { width:calc(100% - 20px); max-height:94vh; max-height:94dvh; padding:18px 14px; border-radius:13px; }
 .dialog-heading { gap:12px; }.dialog-heading h2 { font-size:26px; }.dialog-heading>button { font-size:22px; }
 .dialog-intro { font-size:13px; margin-bottom:17px; }.world-eyebrow { font-size:9px; }
 .map-layout { grid-template-columns:1fr; gap:20px; }
 .park-travel-map { height:auto; min-height:230px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:15px; gap:9px; align-content:center; }
 .park-travel-map svg { opacity:.55; }.park-map-place { position:relative; left:auto!important; top:auto!important; transform:none; max-width:none; font-size:11px; min-height:45px; padding:7px; }
 .flight-option { grid-template-columns:38px 1fr; }.flight-orb { width:34px; height:34px; }
 #puzzle-stations { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }#puzzle-stations button { font-size:11px; padding:8px; gap:6px; }
 #world-game { grid-template-columns:1fr; gap:18px; }.park-workbench>h3 { font-size:19px; }
 #park-task { font-size:13px; margin:11px 0 18px; }
 .puzzle-heading { margin:16px 0; }.puzzle-heading .level-picker { font-size:12px; }.puzzle-heading select { padding:11px 8px; }
 .park-puzzle-notes { padding:18px; }.park-win { padding:14px; gap:10px; grid-template-columns:45px 1fr; }
 .oxygen-prize { width:43px; height:43px; font-size:17px; }.park-win h3 { font-size:21px; }
 #help-dialog>p { font-size:13px; }
}
@media(max-height:540px) { .welcome-panel { top:84px; bottom:auto; padding:15px; }.welcome-panel h1 { font-size:27px; margin:8px 0; }.welcome-panel .visit-note { display:none; }.welcome-panel .primary-button { margin-top:10px; }.world-move-pad { bottom:95px; }.world-look-pad { bottom:115px; } }
.welcoming .world-move-pad,.welcoming .world-look-pad { display:none; }
@media(prefers-reduced-motion:reduce) { .world-page * { scroll-behavior:auto; } }

/* The world remains the main surface; views and flight are small instruments. */
.camera-switch { position:absolute; z-index:3; top:91px; right:26px; display:flex; gap:4px; padding:4px; background:#fff8e9ed; border-radius:12px; }
.camera-switch button { min-height:44px; background:transparent; border-color:transparent; padding:8px 13px; font-size:12px; }
.camera-switch button[aria-pressed=true] { background:#3b7376; color:#fff9e7; }
.world-look-pad { display:grid; grid-template-columns:repeat(2,48px); gap:5px; }
#npc-dialog { max-width:650px; }
.npc-introduction { display:grid; grid-template-columns:190px 1fr; gap:25px; align-items:center; margin:8px 0 24px; }
#npc-portrait { min-height:190px; display:grid; place-items:center; background:#e8eddb; border-radius:50%; }
#npc-portrait canvas { width:100%; max-width:220px; height:auto; display:block; }
#npc-greeting { font:400 20px/1.6 var(--serif); margin-bottom:14px; }
#npc-puzzle-name { font-size:12px; letter-spacing:.4px; color:#55716b; }
#npc-dialog>h3 { font-size:14px; margin-bottom:12px; }
#npc-levels { display:grid; gap:8px; }
#npc-levels button { display:flex; gap:15px; align-items:center; text-align:left; background:#fffdf6; min-height:64px; padding:10px 14px; }
.npc-level-number { width:33px; height:33px; display:grid; place-items:center; border-radius:50%; background:#dce8cd; color:#3e6150; flex-shrink:0; font:500 15px var(--mono); }
#npc-levels strong { display:block; font-size:14px; font-weight:500; }#npc-levels small { display:block; font-size:11px; color:#657965; margin-top:4px; }
#puzzle-stations .friend-puzzle { display:block; margin:4px 0 0; font:10px var(--sans); }
@media(pointer:fine) and (min-width:601px) { .world-look-pad { display:none; } }
@media(max-width:600px) {
 .camera-switch { top:calc(72px + env(safe-area-inset-top)); right:12px; }
 .camera-switch button { font-size:11px; padding:7px 10px; }
 .world-look-pad { grid-template-columns:repeat(2,44px); right:14px; bottom:105px; gap:4px; display:grid; }
 .npc-introduction { grid-template-columns:100px 1fr; gap:15px; margin-bottom:20px; }
 #npc-portrait { min-height:100px; }#npc-greeting { font-size:17px; }#npc-levels strong { font-size:13px; }
 .world-notice { top:126px; }
}

/* First-load instructions must leave the flying player visible on small screens. */
@media(max-width:600px) {
 .welcome-panel { top:calc(135px + env(safe-area-inset-top)); bottom:auto; width:calc(100% - 28px); padding:16px; }
 .welcome-panel .world-eyebrow { display:none; }
 .welcome-panel h1 { font-size:24px; line-height:1.2; margin:0 0 8px; letter-spacing:-.4px; }
 .welcome-panel>p:not(.world-eyebrow):not(.visit-note) { font-size:12px; line-height:1.6; }
 .welcome-panel .primary-button { margin-top:12px; }
}
@media(max-height:600px) {
 .welcome-panel { top:88px; bottom:auto; width:260px; padding:12px; }
 .welcome-panel .world-eyebrow,.welcome-panel>p:not(.visit-note) { display:none; }
 .welcome-panel h1 { font-size:21px; line-height:1.15; margin:0 0 8px; }
 .welcome-panel .primary-button { margin-top:0; }
}

@media(max-width:600px) and (max-height:600px) {
 .welcome-panel { top:calc(135px + env(safe-area-inset-top)); width:calc(100% - 28px); }
}
@media(max-width:600px) and (max-height:700px) {
 .welcome-panel>p:not(.visit-note) { display:none; }
 .welcome-panel h1 { font-size:21px; }
 .welcome-panel .primary-button { margin-top:8px; }
}
@media(max-width:600px) and (max-height:600px) {
 .welcome-panel h1 { display:none; }
 .welcome-panel .primary-button { margin-top:0; }
}