/* The interface takes its cues from brass room plaques and printed catalogues. */
:root{--house-ink:#273c34;--house-paper:#eee5cf;--house-brass:#d7bd86}
.atmosphere-mixer{display:flex;align-items:center;gap:9px;width:100%;padding:14px 0;margin-top:17px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:10px;color:var(--cream)}.atmosphere-mixer svg{width:15px;height:15px}.atmosphere-mixer svg:last-child{margin-left:auto;color:var(--gold)}
.masthead .eyebrow{letter-spacing:.19em!important;color:#f4e5c7}.masthead h1{font-size:35px}.masthead{filter:drop-shadow(0 2px 8px #18261d66)}
.house-wayfinding{position:absolute;left:33px;top:103px;z-index:4;display:flex;align-items:center;gap:16px}.house-wayfinding button{display:flex;align-items:center;gap:12px;background:linear-gradient(130deg,#f5eddaee,#e5d9bfe8);color:#334d41;border:1px solid #fff6e299;border-radius:12px;padding:11px 14px;box-shadow:0 6px 30px #12282020;backdrop-filter:blur(18px);transition:background .2s,transform .3s}.house-wayfinding button:hover{transform:translateY(-2px);background:#fff3d9}.house-wayfinding button>span:nth-child(2){text-align:left}.house-wayfinding small{display:block;font-size:7px;letter-spacing:.19em;margin-bottom:5px;color:#786b51}.house-wayfinding strong{display:block;font:17px Georgia,serif;letter-spacing:-.2px}.house-map-icon{width:28px;display:grid;place-items:center}.house-map-icon svg{width:27px;height:27px;stroke-width:1.1}.room-number{font:27px Georgia,serif;color:#9c8b63;padding-left:16px;border-left:1px solid #9e8b6638;line-height:35px}.house-map-arrow{font-size:19px;color:#8e7d57}.life-count{font-size:8px;letter-spacing:.04em;color:#f4ead3;text-shadow:0 1px 10px #163329;display:flex;align-items:center;gap:6px}.life-count:before{content:'';width:4px;height:4px;background:#d5dfb1;border-radius:50%;box-shadow:0 0 0 3px #bac79a1c}
.district-nav{top:179px;left:33px;background:#243c32bc;padding:3px}.district-nav button{font-size:9px;padding:8px 11px}.room-places{position:absolute;left:33px;top:179px;display:flex;padding:3px;background:#243c32d9;border:1px solid #e9d8af22;border-radius:24px;gap:2px;z-index:4;backdrop-filter:blur(16px)}.room-places:empty{display:none}.room-places button{border-radius:20px;padding:9px 12px;font-size:9px;color:#e0ddc8}.room-places button:hover,.room-places button.chosen{background:#e8d1a42a;color:#fae4bc}.annex .district-nav{display:none}.annex #routeBtn,.annex #stopBtn,.annex [data-camera=station]{display:none}.annex .dock{width:min(820px,calc(100% - 60px))}
.immersion-entry{position:absolute;right:33px;top:91px;z-index:4;display:flex;align-items:center;gap:7px}.immersion-entry button{height:40px;display:flex;align-items:center;gap:9px;background:#253d33e3;border:1px solid #d5bc7b66;border-radius:30px;padding:0 17px;color:#f2dfb8;font-size:11px;box-shadow:0 6px 24px #14261e26;backdrop-filter:blur(14px);transition:background .2s,transform .2s}.immersion-entry button:hover{background:#4c5b40;transform:translateY(-2px)}.immersion-entry svg{width:16px;height:16px}.immersion-entry kbd{font:8px inherit;border:1px solid #d2b4803d;border-radius:4px;padding:3px 5px;margin-left:4px;color:#bdb493}.immersion-entry #soundMixerButton{padding:0;width:40px;justify-content:center;border-color:#d4c4992b}
.sound-panel{position:absolute;z-index:35;right:33px;top:147px;width:296px;padding:23px 24px 20px;border-radius:18px;border:1px solid #dfcf9f6b;background:linear-gradient(145deg,#f1e9d6fb,#e2d6bdfb);color:#35493b;box-shadow:0 24px 75px #0c1c2544;backdrop-filter:blur(25px)}.sound-panel[hidden]{display:none}.sound-panel-top{display:flex;justify-content:space-between;align-items:center}.sound-panel .eyebrow{color:#817253;font-size:7px}.sound-panel-top button{font-size:24px;line-height:1;color:#817253;margin:-8px -6px -8px 0}.sound-panel h2{font:28px/1.15 Georgia,serif;letter-spacing:-.7px;margin:19px 0 9px;max-width:190px}.sound-panel p{font-size:10px;line-height:1.8;color:#78806b;margin:0 0 17px}.sound-enable{width:100%;background:#3f5948;color:#f1e4c7;border-radius:8px;padding:11px;font-size:10px;margin-bottom:3px}.sound-enable:hover{background:#527058}.sound-panel label{display:flex;justify-content:space-between;font-size:10px;margin:23px 0 13px}.sound-panel output{color:#937c4f;font-variant-numeric:tabular-nums}.sound-panel input[type=range]{--gold:#9b8050;background:linear-gradient(to right,#9b8050 0%,#9b8050 var(--fill),#c7bda5 var(--fill),#c7bda5 100%)}.sound-status{font-size:8px;color:#8b7857;line-height:1.6;text-align:left;padding:15px 0 0;margin-top:22px;border-top:1px solid #9d8e6b3b;width:100%}.headphone-note{display:block;font:italic 12px Georgia,serif;color:#6c785f;margin-top:8px}
.room-transition{position:fixed;inset:0;background:#233c32;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s,visibility .7s}.room-transition.visible{opacity:1;visibility:visible;pointer-events:auto}.room-transition>span{font:italic 90px Georgia,serif;color:#dac4964a;margin-bottom:30px}.room-transition .eyebrow{font-size:8px;letter-spacing:.3em;color:#bcb597}.room-transition h2{font:40px Georgia,serif;color:#e8d9b8;font-weight:400;margin:15px 0}.transition-rule{width:55px;height:1px;background:#b99d5c;margin-top:15px}
.building .house-wayfinding,.building .room-places,.building .immersion-entry,.hidden-ui #houseUI{display:none}.building .sound-panel{display:none}
#cinemaUI{display:none;position:absolute;inset:0;pointer-events:none;z-index:20;color:#e4ddc9}.cinematic #cinemaUI{display:block}.cinematic #ui,.cinematic .mode-switch,.cinematic .district-nav,.cinematic .house-wayfinding,.cinematic .room-places,.cinematic .immersion-entry,.cinematic #restore{opacity:0;pointer-events:none!important;visibility:hidden}.cinematic #editorOverlay{display:none}.cinema-matte{position:absolute;left:0;right:0;height:7vh;background:#101b17}.cinema-matte.top{top:0}.cinema-matte.bottom{bottom:0}.cinema-wordmark{position:absolute;left:33px;top:2.6vh;font:9px Georgia,serif;letter-spacing:.16em;color:#d9cba9}.cinema-wordmark i{font:6px Arial,sans-serif;letter-spacing:.2em;color:#7f8d7d;margin-left:12px}.cinema-caption{position:absolute;left:44px;bottom:14vh;text-shadow:0 2px 18px #0d201bb3;transition:opacity 2.8s}.cinema-caption>span{font-size:7px;letter-spacing:.26em;color:#dfd0af}.cinema-caption h2{font:44px Georgia,serif;letter-spacing:-1.1px;margin:12px 0 7px;font-weight:400}.cinema-caption p{font:italic 15px Georgia,serif;color:#d0ceba;margin:0}.cinema-session{position:absolute;right:33px;bottom:2.6vh;display:flex;align-items:center;gap:10px;font-size:6px;letter-spacing:.17em;color:#81927f}.cinema-live-dot{width:4px;height:4px;border-radius:50%;background:#b4c59c}.cinema-session time{font-size:9px;letter-spacing:.08em;color:#bfb898;margin-left:9px;font-variant-numeric:tabular-nums}#cinemaExit{position:absolute;right:33px;top:2.1vh;font-size:9px;color:#b9bba5;display:flex;align-items:center;gap:16px;padding:5px 0;pointer-events:auto}#cinemaExit kbd{font:7px Arial,sans-serif;border:1px solid #8f9c7d40;border-radius:4px;padding:3px 5px}#cinemaExit:hover{color:#fff1cd}#cinemaControls{position:absolute;left:50%;bottom:11vh;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:9px 15px;border:1px solid #d9cfaa30;border-radius:35px;background:#172e25b8;backdrop-filter:blur(22px);box-shadow:0 8px 35px #18231922;pointer-events:auto;transition:opacity 1.5s,transform 1.5s}#cinemaControls button{display:flex;align-items:center;gap:7px;padding:8px 4px;font-size:9px;white-space:nowrap;color:#e6dcc0}#cinemaControls button:hover{color:#fff4d8}#cinemaControls svg{width:14px;height:14px}.cinema-separator{height:20px;width:1px;background:#d0c89c30}.cinema-camera-label{font-size:8px;color:#b1b69f}#cinemaShot{background:#1b3328;color:#e6dcc0;border:1px solid #cfc6952a;border-radius:15px;padding:7px 9px;font:9px inherit;max-width:140px}.cinema-idle #cinemaControls{opacity:0;transform:translate(-50%,8px);pointer-events:none}.cinema-idle .cinema-caption{opacity:0}.cinema-idle #cinemaControls:focus-within{opacity:1;transform:translateX(-50%);pointer-events:auto}.cinematic .sound-panel{top:auto;bottom:20vh}
@media(min-width:1600px){.cinema-caption h2{font-size:52px}}
@media(max-width:1100px){.life-count{display:none}.house-wayfinding{left:24px}.immersion-entry{right:24px}.masthead h1{font-size:30px}.district-nav{left:24px}.house-wayfinding strong{font-size:16px}}
@media(max-width:820px){.masthead .eyebrow{font-size:6px!important;max-width:180px}.masthead h1{font-size:28px}.mode-switch{top:79px}.house-wayfinding{top:137px;left:17px;right:17px;justify-content:space-between}.house-wayfinding button{padding:9px 12px;gap:8px}.house-wayfinding strong{font-size:15px}.house-wayfinding small{font-size:6px}.room-number{font-size:24px;padding-left:12px;line-height:28px}.house-map-icon{width:24px}.house-map-icon svg{width:24px;height:24px}.immersion-entry{top:140px;right:17px;gap:4px}.immersion-entry button{font-size:9px;padding:0 11px;height:37px;gap:5px}.immersion-entry kbd{display:none}.immersion-entry #soundMixerButton{display:none}.district-nav{top:201px;left:17px;transform:none;max-width:calc(100% - 34px);border-radius:18px}.room-places{left:17px;right:17px;top:201px;overflow:auto;scrollbar-width:none;width:max-content;max-width:calc(100% - 34px)}.room-places button{font-size:8px;white-space:nowrap;padding:9px 10px}.sound-panel{right:17px;top:202px;max-height:calc(100dvh - 220px);overflow:auto}.annex .dock{width:calc(100% - 28px)}.annex .view-caption{max-width:75%}.view-caption p{display:none}.cinema-caption{left:25px;bottom:23vh}.cinema-caption h2{font-size:34px}.cinema-caption p{font-size:13px}.cinema-wordmark{left:20px;font-size:7px}.cinema-wordmark i{display:none}#cinemaExit{right:20px;gap:8px;font-size:8px}#cinemaControls{gap:7px;padding:7px 10px;bottom:10vh;width:max-content;max-width:calc(100% - 25px)}#cinemaControls button{font-size:8px}#cinemaShot{font-size:8px;padding:7px;max-width:110px}.cinema-camera-label{display:none}.cinema-session{right:21px;font-size:5px}.cinema-session time{font-size:8px}.room-transition h2{font-size:29px}.room-transition>span{font-size:70px}.cinematic .sound-panel{bottom:21vh;max-height:66vh}}
@media(max-width:380px){.house-wayfinding strong{font-size:13px}.house-wayfinding button{padding:8px}.house-map-arrow{display:none}.house-wayfinding .room-number{padding-left:7px}.immersion-entry{right:13px}.immersion-entry button{font-size:8px;padding:0 9px}.cinema-separator{display:none}#cinemaControls{gap:5px}#cinemaMix{display:none}}
@media(max-height:600px) and (min-width:700px){.house-wayfinding{top:81px}.district-nav,.room-places{top:148px}.immersion-entry{top:80px}.sound-panel{top:128px;max-height:calc(100dvh - 147px);overflow:auto}.cinema-caption{bottom:27vh}.cinema-caption h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){.room-transition,#cinemaControls,.cinema-caption{transition:none}}

/* Keep captions legible over pale floors and sea without tinting the model. */
#ui{isolation:isolate}
#ui::before{z-index:-1}
#ui::after{height:300px;background:linear-gradient(transparent,#12241d0a 15%,#12241d9c);z-index:-1}
.view-caption{text-shadow:0 2px 12px #14261dd9;pointer-events:none!important}
.view-caption .eyebrow{color:#ece2c9}
.view-caption p{color:#e3dfcd;font-size:11px;line-height:1.65}
.speed-badge{text-shadow:0 2px 12px #14261dcc}
@media(max-width:820px){#ui::after{height:280px;background:linear-gradient(transparent,#14261db8)}.view-caption p{display:none}}

/* Readable touch controls stay at the edges; the railway keeps the centre. */
@media(max-width:820px){
 .house-wayfinding{right:169px}
 .house-wayfinding button{min-width:0;max-width:100%;min-height:46px}
 .house-wayfinding button>span:nth-child(2){min-width:0}
 .house-wayfinding strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .house-wayfinding .room-number,.house-wayfinding .house-map-arrow{display:none}
 .immersion-entry button{height:44px;min-height:44px;font-size:13px;padding:0 12px;gap:6px}
 .immersion-entry #cinemaStart{min-width:132px}
 .room-places,.district-nav{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;flex-wrap:nowrap;width:max-content}
 .room-places button,.district-nav button{flex:0 0 auto;min-width:44px;min-height:44px;font-size:13px;line-height:1.25;padding:10px 13px;white-space:nowrap}
 #cinemaExit{right:12px;top:max(8px,env(safe-area-inset-top));min-height:44px;font-size:13px;padding:10px 12px}
 #cinemaExit kbd{display:none}
 #cinemaControls{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2px 6px;width:min(400px,calc(100% - 28px));max-width:none;padding:7px 9px;border-radius:18px;bottom:max(20px,env(safe-area-inset-bottom))}
 #cinemaControls .cinema-separator{display:none}
 #cinemaControls button{justify-content:center;min-width:44px;min-height:44px;padding:8px 6px;font-size:13px;gap:5px}
 #cinemaPause{grid-column:1;grid-row:1}
 #cinemaShot{grid-column:2;grid-row:1;min-height:44px;min-width:0;width:100%;max-width:none;padding:8px;font-size:13px;border-radius:10px}
 #cinemaMute{grid-column:1;grid-row:2}
 #cinemaControls #cinemaMix{display:flex;grid-column:2;grid-row:2}
 #cinemaMix:after{content:'Mix sound'}
 .cinema-caption{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 152px)}
 .cinema-session{display:none}
 .cinematic .sound-panel{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 126px);max-height:calc(100dvh - max(20px,env(safe-area-inset-bottom)) - 150px)}
 .sound-panel-top button{display:grid;place-items:center;min-width:44px;min-height:44px}
 .sound-enable,.atmosphere-mixer{min-height:44px;font-size:13px}
}
@media(max-width:380px){
 .house-wayfinding .house-map-icon{display:none}
 #cinemaControls button{font-size:12px}
}