@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Caslon+Display&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#3d3a35;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#e9e5df}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid #958366;outline-offset:4px}#stage{position:absolute;inset:0;touch-action:none;outline:none}canvas{display:block;width:100%;height:100%}header{position:absolute;top:max(28px,env(safe-area-inset-top));left:36px;right:36px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:2}.brand{font:34px/1.1 'Libre Caslon Display',Georgia,serif;letter-spacing:-.7px;text-shadow:0 1px 12px #fff9}.brand span{display:block;font:9px 'DM Sans',sans-serif;letter-spacing:2px;margin-top:9px;opacity:.55}nav{display:flex;gap:9px;pointer-events:auto}nav button{border:1px solid #fff6;background:#f4f1ea94;backdrop-filter:blur(12px);border-radius:24px;padding:10px 17px;font-size:11px}#help-button{width:36px;height:36px;padding:0;font-size:15px}#welcome{position:absolute;left:50%;top:110px;transform:translateX(-50%);font:19px 'Libre Caslon Display',Georgia,serif;letter-spacing:.2px;opacity:0;transition:opacity 1.3s;pointer-events:none;white-space:nowrap}#welcome.visible{opacity:.7}footer{position:absolute;bottom:max(26px,env(safe-area-inset-bottom));left:36px;right:36px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.desktop-controls{display:flex;gap:22px;font-size:11px;color:#403c36}.desktop-controls>span{display:flex;align-items:center;gap:8px}kbd{font:10px 'DM Sans',sans-serif;letter-spacing:.7px;display:inline-block;background:#faf8f0b0;border:1px solid #fff8;box-shadow:0 1px 4px #00000008;border-radius:5px;padding:6px 8px;backdrop-filter:blur(6px)}.or{opacity:.4}.footer-note{font:13px 'Libre Caslon Display',Georgia,serif;opacity:.65}#interaction{position:absolute;bottom:105px;left:50%;transform:translateX(-50%);z-index:3}#interact-button{display:flex;align-items:center;gap:12px;background:#37332ddd;color:#fff;border:1px solid #ffffff30;border-radius:8px;padding:10px 17px 10px 10px;backdrop-filter:blur(12px);font-size:13px;box-shadow:0 8px 30px #0001}#interact-button kbd{background:#ffffff18;color:#fff;border-color:#ffffff40;padding:4px 7px;font-size:12px}#touch-controls{display:none;position:absolute;inset:auto 0 25px;pointer-events:none}#joystick{position:absolute;bottom:0;left:28px;width:112px;height:112px;border:1px solid #ffffff99;border-radius:50%;background:#f4f0e833;pointer-events:auto;touch-action:none;backdrop-filter:blur(3px)}#stick{position:absolute;left:35px;top:35px;width:42px;height:42px;background:#faf7f0bb;border:1px solid #fffc;border-radius:50%;box-shadow:0 3px 12px #0001}#touch-controls>span{position:absolute;right:26px;bottom:22px;font-size:11px;opacity:.65}#loader{position:absolute;inset:0;z-index:20;background:#f1eee8;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .8s,visibility .8s}.load-title{text-align:center;font:52px 'Libre Caslon Display',Georgia,serif;letter-spacing:-1px}.load-title span{display:block;font:12px 'DM Sans',sans-serif;letter-spacing:.3px;opacity:.55;margin-top:18px}.load-line{height:1px;width:160px;background:#dcd6cc;margin-top:40px;overflow:hidden}.load-line i{display:block;width:5%;height:100%;background:#74664e;transition:width .4s}#load-status{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;margin-top:15px;opacity:.4}#loader.done{opacity:0;visibility:hidden;pointer-events:none}dialog{border:0;border-radius:12px;padding:0;background:#f5f2ec;color:#3d3a35;box-shadow:0 30px 150px #0005;max-width:94vw;max-height:92dvh}dialog::backdrop{background:#2725209c;backdrop-filter:blur(14px)}.close{position:absolute;right:17px;top:12px;border:0;background:#f5f2ecd9;border-radius:50%;width:34px;height:34px;font-size:26px;z-index:2}#photo-modal{width:min(900px,94vw)}.photo-wrap{padding:35px 38px 15px}#photo-image{display:block;max-height:65dvh;max-width:100%;margin:auto;object-fit:contain;box-shadow:0 5px 20px #0001}.photo-caption{margin-top:23px;text-align:center}#photo-number{font-size:9px;letter-spacing:2px;opacity:.5}.photo-caption h2{font:30px 'Libre Caslon Display',Georgia,serif;font-weight:400;margin:8px 0}.photo-caption p{font-size:12px;opacity:.6;margin:0}.photo-nav{display:flex;align-items:center;justify-content:space-between;padding:15px 38px 22px}.photo-nav button{background:transparent;border:1px solid #d9d3c8;width:36px;height:32px;border-radius:5px}.photo-nav span{font-size:8px;letter-spacing:2px;opacity:.4}#help-modal{padding:38px;width:430px}#help-modal h2{font:32px 'Libre Caslon Display',Georgia,serif;font-weight:400;margin:8px 0}#help-modal p{font-size:12px;opacity:.6}dl{margin-top:25px}dt{font-size:12px;margin-top:17px}dd{margin:5px 0;font-size:11px;opacity:.55}#reset-position{margin-top:18px;background:#ded6c9;border:0;padding:12px 18px;border-radius:6px;font-size:12px}#error{position:absolute;inset:0;z-index:30;background:#f1eee8;text-align:center;padding:25vh 20px}#error[hidden]{display:none}#error button{padding:12px 20px}#error h2{font:34px Georgia,serif}#error p{font-size:14px;max-width:400px;margin:20px auto}@media(pointer:coarse){#touch-controls{display:block}.desktop-controls{display:none}.footer-note{display:none}#interaction{bottom:55px}#interact-button kbd{display:none}}@media(max-width:600px){header{left:22px;right:22px;top:max(22px,env(safe-area-inset-top))}.brand{font-size:29px}.brand span{font-size:7px;letter-spacing:1.5px}nav button{padding:9px 12px;font-size:10px}#welcome{top:105px;font-size:17px}.photo-wrap{padding:45px 17px 15px}#photo-image{max-height:55dvh}.photo-nav{padding:12px 20px 22px}footer{left:20px;right:20px}.desktop-controls{gap:8px}.desktop-controls>span{gap:5px;font-size:9px}.desktop-controls>span:last-child{display:none}.footer-note{display:none}#help-modal{padding:30px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Quiet gallery chrome lets the room hold the screen. */
.brand{font-size:28px}.brand span{display:none}nav button{background:#f7f5efb5;border-color:#ffffff75;box-shadow:0 2px 12px #29282008}#joystick{width:90px;height:90px;left:24px;background:#f4f0e81a;border-color:#ffffff70;backdrop-filter:none}#stick{width:34px;height:34px;left:27px;top:27px;background:#faf7f09c}.footer-note{display:none}#interact-button{border-radius:24px;font-size:12px;background:#333934e8;padding:10px 18px}#welcome{font-size:17px}@media(max-width:600px){.brand{font-size:25px}#touch-controls{bottom:30px}#interaction{bottom:48px}}

#bird-flight{position:absolute;right:32px;bottom:76px;display:flex;align-items:center;gap:10px;z-index:3}#fly-button{display:flex;align-items:center;gap:10px;border:1px solid #ffffffa0;border-radius:24px;padding:10px 17px;background:#f3f1e8d9;backdrop-filter:blur(12px);font-size:12px;color:#333d3c;box-shadow:0 3px 16px #30352c0c}#fly-button:disabled{opacity:.4;cursor:default}#fly-button kbd{padding:3px 6px}#flight-hint{font-size:10px;background:#f3f1e8c0;padding:7px 10px;border-radius:15px}#altitude-controls{display:none}#altitude-controls[hidden],#flight-hint[hidden]{display:none}#altitude-controls button{touch-action:none;width:38px;height:38px;border:1px solid #ffffffa0;border-radius:50%;background:#f3f1e8df;font-size:20px}#interaction{bottom:78px}#switch-bird{font-size:10px}
@media(pointer:coarse){#bird-flight{right:24px;bottom:32px;flex-direction:column;align-items:flex-end;gap:12px}#fly-button kbd,#flight-hint{display:none}#altitude-controls:not([hidden]){display:flex;gap:8px}#interaction{bottom:43px}#fly-button{padding:12px 16px}header{gap:10px}nav{flex-wrap:wrap;justify-content:flex-end;max-width:220px;gap:6px}#interact-button{padding:10px 12px;font-size:11px}#touch-controls>span{display:none}}

.loading-pair{height:100px;width:170px;display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:26px}.loading-ball{display:block;width:35px;height:35px;border-radius:50%;position:relative;animation:float-together 2.4s ease-in-out infinite;box-shadow:inset -5px -7px 10px #00000016,0 18px 18px -11px #655e4f40}.loading-ball.yellow{background:radial-gradient(circle at 30% 25%,#fff4b6,#f4cb48 65%,#d6a930)}.loading-ball.blue{background:radial-gradient(circle at 30% 25%,#c2e5ff,#4f9ee8 65%,#367dc0);animation-delay:-.4s}.load-title{font-size:clamp(35px,7vw,52px)}.load-title span{font-size:13px;letter-spacing:2px;opacity:.65;margin-top:19px}@keyframes float-together{0%,100%{transform:translateY(5px)}50%{transform:translateY(-9px)}}@media(prefers-reduced-motion:reduce){.loading-ball{animation:none}}

/* Warm, restrained house interface. */
:root{color:#f4ead6}header .brand{text-shadow:0 2px 16px #170e08a0}.brand span{opacity:.8}nav button{background:#30251f9c;color:#f1e5ce;border-color:#decba33b}#help-button{border-color:#decba35c}.desktop-controls{color:#f4ead6;text-shadow:0 1px 4px #0008}.desktop-controls kbd{color:#f3e8d4;background:#30251f9c;border-color:#decba33b}#room-name{position:absolute;left:36px;top:100px;font:italic 17px Georgia,serif;color:#f2e5cc;text-shadow:0 2px 10px #170e08;pointer-events:none}#welcome{color:#f5e8ce;text-shadow:0 1px 7px #170e08;top:140px}#loader{color:#4b3a2b;background:#eae1cf}#error{color:#4b3a2b}.house-rooms{display:grid;gap:7px;padding:15px 0;border-bottom:1px solid #d5c8b5;font-size:11px}#fly-button{background:#30251fd9;color:#f4ead6;border-color:#decba33b}#fly-button kbd{background:#ffffff15;color:#f4ead6}#load-status{color:#4b3a2b}@media(max-width:600px){header{flex-wrap:wrap;gap:14px}.brand{font-size:28px}.brand span{letter-spacing:1.2px}nav{gap:5px}nav button{padding:9px 10px}#room-name{left:22px;top:127px;font-size:14px}#welcome{top:156px;font-size:15px}}
/* Six worlds: compact, readable controls for close-scale flight. */
#world-subtitle{position:absolute;top:126px;left:36px;font-size:11px;color:#f0e5cd;text-shadow:0 1px 8px #000;pointer-events:none;opacity:.8}#flight-readout{position:absolute;bottom:84px;left:36px;display:flex;gap:14px;align-items:center;text-shadow:0 1px 6px #000;pointer-events:none}#flight-state{font-size:9px;letter-spacing:1.6px}#altitude{font-size:12px;font-variant-numeric:tabular-nums}#world-transition{position:absolute;inset:0;background:#eae1cf;color:#4b3a2b;z-index:15;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility .35s}#world-transition.active{opacity:1;visibility:visible;pointer-events:auto}#transition-name{font:34px Georgia,serif}#world-transition .loading-pair{margin:0}.setting{display:flex;flex-direction:column;gap:10px;font-size:12px;margin-top:22px}.setting select{padding:12px;border:1px solid #cbbb9d;background:#eee5d5;border-radius:5px;font:12px Arial;color:#453c2d}.setting input{accent-color:#556344;width:100%}#welcome{max-width:90vw;text-align:center;white-space:normal}#back-hall[hidden]{display:none}#error[hidden],#loader[hidden]{display:none}#view-toggle{min-width:75px}#world-subtitle{display:none}
@media(pointer:coarse){#flight-readout{left:28px;bottom:145px;font-size:10px}#interaction{bottom:155px}#bird-flight{bottom:max(30px,env(safe-area-inset-bottom));gap:12px}#altitude-controls button{width:46px;height:46px}#joystick{bottom:max(0px,env(safe-area-inset-bottom))}}
@media(max-width:600px){header{left:20px;right:20px}.brand{font-size:25px}nav{max-width:none;gap:5px}nav button{padding:8px 10px}#room-name{top:120px;left:22px}#welcome{top:150px;font-size:14px}#flight-readout{left:24px}#transition-name{font-size:26px;text-align:center}.load-title{font-size:38px}}
/* Final control spacing, including small phones and landscape safe areas. */
#stage:focus-visible{outline:1px solid #f4dfac;outline-offset:-3px}#interaction{max-width:calc(100vw - 32px)}#interact-button{max-width:100%;white-space:normal}#altitude{min-width:42px}#world-transition{padding:24px}#help-modal{overscroll-behavior:contain}#photo-modal{overscroll-behavior:contain}#joystick,#fly-up,#fly-down{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media(max-width:600px){header{display:block}.brand{margin-bottom:12px}nav{display:flex;flex-wrap:nowrap;justify-content:flex-start;max-width:100%;gap:5px}nav button{font-size:9px;padding:8px;min-height:36px}#help-button{flex:0 0 36px}#view-toggle{min-width:62px}#switch-bird{font-size:9px}#room-name{top:125px}#welcome{top:154px}#bird-flight{right:max(18px,env(safe-area-inset-right))}#touch-controls{bottom:max(28px,env(safe-area-inset-bottom))}}
@media(max-height:500px) and (pointer:coarse){header{top:12px;left:max(20px,env(safe-area-inset-left));display:flex;align-items:center}.brand{font-size:21px;margin-bottom:0}#room-name{top:65px;font-size:12px}#welcome{top:88px;font-size:12px}#interaction{bottom:35px}#joystick{width:76px;height:76px}#stick{left:20px;top:20px}#flight-readout{bottom:115px}#bird-flight{bottom:20px;flex-direction:row}#altitude-controls button{width:40px;height:40px}}
/* Console controls: tactile faces, coloured action markers and a clear focus state. */
body button,nav button,#interact-button,#fly-button,#reset-position,.photo-nav button,#altitude-controls button,dialog .close,#help-button,#error button{background:#232827;color:#fffdf3;border:1px solid #687069;border-bottom:3px solid #101412;border-radius:6px;box-shadow:inset 0 1px #ffffff25,0 2px 3px #0004;font-family:system-ui,sans-serif;font-weight:650;letter-spacing:.02em}
body button:focus-visible{outline:3px solid #bce484;outline-offset:3px}body button:active{transform:translateY(1px)}
#back-hall::before,#view-toggle::before,#fly-button::before,#interact-button::before{display:inline-grid;place-items:center;border-radius:50%;width:18px;height:18px;color:#15201b;font:800 11px/1 system-ui;margin-right:5px;box-shadow:inset 0 1px 1px #fff8}
#back-hall::before{content:'B';background:#ef8a7a}#view-toggle::before{content:'Y';background:#e9c963}#fly-button::before{content:'A';background:#9aca72}#interact-button::before{content:'X';background:#8dbce7}
#speech{position:absolute;z-index:2;pointer-events:none;transform:translate(-52%,-115%);background:#fff9e9;color:#28232b;border:2px solid #332e35;border-radius:42% 46% 39% 35% / 55% 56% 42% 49%;padding:7px 15px 9px;box-shadow:2px 3px #332e35;font:bold 16px/1.15 Georgia,serif;white-space:nowrap}
#speech::after{content:'';position:absolute;width:9px;height:9px;bottom:-6px;left:50%;background:#fff9e9;border-bottom:2px solid #332e35;border-right:2px solid #332e35;transform:skew(-15deg) rotate(45deg)}
#speech[hidden]{display:none}#loader{background:#181f1c;color:#f4eddb}#loader #load-status{color:#e5dabe}#loader .loading-pair{height:23px;margin:12px 0;gap:7px}#loader .loading-ball{width:9px;height:9px}.photo-reel{width:min(28vh,180px);aspect-ratio:4/5;background:#242326 url('assets/memory-reel.jpg') no-repeat;background-size:800% 600%;animation:memory-reel 7.2s steps(1,end) infinite;box-shadow:0 0 0 5px #f6efd8}#loader.done .photo-reel{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.photo-reel{animation:none}}
#music-toggle[aria-pressed="true"]{color:#ffe58a}
