.mobile-hud{position:fixed;z-index:6;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none}
.mobile-hud[hidden]{display:none!important}
#moveJoystick{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));width:116px;height:116px;border:1px solid #f1e7d74d;border-radius:50%;background:#1626214a;pointer-events:auto;touch-action:none;display:grid;place-items:center;box-shadow:inset 0 0 0 21px #e6dcc009}
#moveJoystick::before{content:'+';font:300 27px system-ui;color:#fff5}
#moveStick{position:absolute;left:50%;top:50%;width:48px;height:48px;background:#e7d6ae8c;border:1px solid #fff7;border-radius:50%;pointer-events:none;box-shadow:0 3px 16px #0002;will-change:transform}
#mobileAction{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:max(36px,env(safe-area-inset-bottom));min-width:116px;min-height:48px;padding:12px 20px;border:1px solid #ead5a8a6;border-radius:30px;background:#e8d8b3;color:#26332e;pointer-events:auto;font:500 14px 'DM Sans',sans-serif;box-shadow:0 3px 24px #0002;touch-action:manipulation}
#mobileAction:disabled{opacity:.55}
.mobile-look-hint{position:absolute;right:max(25px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));font-size:10px;color:#fff9;text-shadow:0 1px 6px #000;pointer-events:none}
.mobile-tip{position:fixed;z-index:7;left:50%;top:max(78px,calc(env(safe-area-inset-top) + 62px));transform:translateX(-50%);width:min(440px,calc(100% - 32px));box-sizing:border-box;padding:11px 14px;border:1px solid #d3ba8555;border-radius:12px;background:#20312be8;color:#f4ecda;font:12px/1.5 'DM Sans',sans-serif;box-shadow:0 8px 30px #0002;display:flex;align-items:center;gap:16px}
.mobile-tip button{flex:none;background:none;border:0;color:#e8d0a0;min-height:44px;padding:0 6px;font-size:12px}
#orientationPrompt{width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:30px 25px;box-sizing:border-box;border:1px solid #d3ba8555;border-radius:20px;background:#23352f;color:#f6efdf;text-align:center}
#orientationPrompt::backdrop{background:#101b17d9;backdrop-filter:blur(8px)}
#orientationPrompt h2{font:400 36px/1.1 'Italiana',Georgia,serif;margin:18px 0 12px}
#orientationPrompt p{font-size:14px;line-height:1.6;margin:12px 0 20px;color:#e1dfd2}
.rotate-phone{width:78px;height:42px;border:2px solid #dec89e;border-radius:9px;margin:0 auto;position:relative;transform:rotate(-12deg)}
.rotate-phone::after{content:'↻';position:absolute;right:-26px;top:-17px;font:30px system-ui;color:#dec89e}
#orientationPrompt button{width:100%;min-height:48px;border-radius:8px;padding:12px 16px;font:500 14px 'DM Sans',sans-serif;cursor:pointer}
#orientationFullscreen{background:#e5d4b0;color:#24382e;border:0}
#orientationPortrait{background:transparent;color:#eee5d3;border:1px solid #d3ba8550;margin-top:10px}
#fullscreenBtn{display:none}
.touch-ui{overscroll-behavior:none}
.touch-ui #world{touch-action:none}
.touch-ui #fullscreenBtn{display:inline-grid;place-items:center;font-size:21px}
.touch-ui #touchPad,.touch-ui #controlsHint,.touch-ui .time,.touch-ui .render-badge,.touch-ui #crosshair{display:none!important}
.touch-ui .topbar{padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));gap:12px}
.touch-ui .brand{gap:10px;font-size:12px}.touch-ui .brand small{font-size:6px}.touch-ui .monogram{font-size:44px}
.touch-ui .topbar nav{gap:6px}.touch-ui .topbar nav button{min-height:44px;min-width:44px;padding:8px 12px;font-size:12px}.touch-ui .topbar #mapBtn{width:auto}.touch-ui .topbar #mapBtn span{display:inline}
.touch-ui #qualityBtn{display:none}
.touch-ui .bottom{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
.touch-ui .playing .bottom{display:none}.touch-ui.playing .bottom{display:none}
.touch-ui .live-info{left:max(18px,env(safe-area-inset-left));top:80px;bottom:auto;pointer-events:none;transition:opacity .35s}
.touch-ui .live-info h2{font-size:25px;margin:6px 0}.touch-ui .live-info .eyebrow{font-size:8px}.touch-ui .live-info p{display:none}
.touch-ui.playing.explored .live-info{opacity:0}
.touch-ui .person-label{min-height:44px;padding:9px 13px;gap:10px;max-width:180px}.touch-ui .person-label .person-icon{display:none}.touch-ui .person-label strong{font-size:12px}.touch-ui .person-label small{font-size:10px}
.touch-ui .welcome{left:max(24px,env(safe-area-inset-left));right:24px;bottom:max(45px,calc(env(safe-area-inset-bottom) + 32px));max-width:520px}
.touch-ui .welcome h1{font-size:clamp(50px,10vw,78px);line-height:.98;margin:18px 0}
.touch-ui .welcome>p{font-size:14px;line-height:1.6}.touch-ui .welcome .primary{min-height:50px;font-size:14px}.touch-ui .welcome-foot{font-size:8px;margin-top:18px}
.touch-ui #toast{bottom:max(155px,calc(env(safe-area-inset-bottom) + 145px));max-width:calc(100% - 44px);font-size:12px;text-align:center}
.touch-ui #map,.touch-ui #help{width:min(680px,calc(100% - 24px));padding:25px;max-height:calc(100dvh - 24px);border-radius:14px}
.touch-ui dialog .close{min-width:44px;min-height:44px}.touch-ui #help dl{font-size:13px}.touch-ui #help p{font-size:12px;line-height:1.6}
.mobile-help{display:none}.touch-ui .mobile-help{display:block}.touch-ui .desktop-help{display:none}
.touch-ui .comfort-settings label{min-height:44px;display:flex;gap:10px;align-items:center}.touch-ui .comfort-settings select{padding:10px;font-size:14px;background:#f4f0e6;color:#28352e;border:1px solid #aaa;border-radius:5px;max-width:65%}
.photo-mode .mobile-hud,.photo-mode .mobile-tip{display:none!important}
.touch-ui .portrait-controls{padding:14px;max-height:40dvh}.touch-ui .portrait-controls__eyebrow,.touch-ui .portrait-controls__footer>span{display:none}
.touch-ui .portrait-controls__header{margin-bottom:8px}.touch-ui .portrait-controls__header h2{font-size:30px;margin:0}
.touch-ui .portrait-controls__group{float:none;display:block;width:100%;margin:0 0 8px}.touch-ui .portrait-controls__group+.portrait-controls__group{margin-left:0}
.touch-ui .portrait-controls__group legend{display:none}.touch-ui .portrait-controls__segments button{min-height:44px;font-size:12px;padding:8px 4px}
.touch-ui .portrait-controls__close{width:44px;height:44px}.touch-ui .portrait-controls__motion{margin:0}.touch-ui .portrait-controls__blink{min-height:44px;font-size:12px!important}
.touch-ui .portrait-controls__conversation{min-height:46px;font-size:13px!important}.touch-ui .portrait-controls__footer{padding-top:4px}.touch-ui .portrait-controls__footer button{min-height:44px;font-size:12px}
@media(orientation:landscape) and (max-height:600px){
 .touch-ui .welcome{bottom:max(24px,env(safe-area-inset-bottom));max-width:540px}.touch-ui .welcome h1{font-size:clamp(40px,11vh,62px);margin:10px 0}.touch-ui .welcome>p{margin:12px 0}.touch-ui .welcome-foot{display:none}.touch-ui .welcome .eyebrow{font-size:8px}
 .touch-ui .brand>span:last-child{display:none}.touch-ui .topbar nav{gap:5px}.touch-ui .topbar #portraitBtn{font-size:11px}
 .touch-ui .live-info{top:70px}.touch-ui .live-info h2{font-size:21px}
 .touch-ui #map h2{font-size:27px;margin:9px 0}.touch-ui #map>p{font-size:12px;margin:8px 0}
 .touch-ui .view-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.touch-ui .view-cards button{padding:12px}.touch-ui .view-cards p{display:none}.touch-ui .view-cards span{float:none;font-size:11px}.touch-ui .view-cards h3{font-size:21px;margin:5px 0}.touch-ui .view-cards b{margin-top:8px}
 .touch-ui .portrait-controls{top:max(65px,calc(env(safe-area-inset-top) + 56px));bottom:max(12px,env(safe-area-inset-bottom));left:auto;right:max(12px,env(safe-area-inset-right));transform:none;width:230px;box-sizing:border-box;max-height:none;padding:12px}
 .touch-ui .portrait-controls__header h2{font-size:26px}.touch-ui .portrait-controls__segments{grid-template-columns:repeat(2,minmax(0,1fr))}.touch-ui .portrait-controls__segments button{font-size:11px}.touch-ui .portrait-controls__footer{display:none}
 .touch-ui #loading h2{font-size:27px;margin:12px}.touch-ui .load-monogram{font-size:64px;margin-bottom:5px}.touch-ui #loading p{margin-top:14px}
}
@media(max-width:420px){.touch-ui .topbar #mapBtn span{display:none}.touch-ui .topbar nav button{padding:8px}.touch-ui .brand>span:last-child{display:none}.touch-ui .welcome{right:18px}.touch-ui .welcome h1{font-size:59px}}
@media(prefers-reduced-motion:reduce){.mobile-tip,.touch-ui .live-info{transition:none}}

.touch-ui:not(.playing) .topbar nav{display:none}

/* CSS owns the render surface; Three.js only resizes its drawing buffer. */
html,body{width:100%;height:100%;min-height:100%;margin:0}
#world{display:block;width:100%;height:100%;height:100dvh}
.app-launch-link{display:inline-flex;align-items:center;justify-content:center;background:#26362f70;border:1px solid #ead8b35c;border-radius:8px;padding:11px 17px;min-height:44px;color:inherit;text-align:left;font-size:12px;backdrop-filter:blur(8px)}
.touch-ui .welcome .app-launch-link{margin-top:9px;color:#f1e5ce}
#help .app-launch-link{color:#344038}
.app-standalone #fullscreenBtn{display:none!important}
#appGuide{width:min(490px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:auto;padding:30px;border-radius:18px;background:#26362f;color:#f4ecdd;border:1px solid #ead8b333}
#appGuide::backdrop{background:#0b1512bf;backdrop-filter:blur(7px)}
#appGuide .close{color:#eddfc2;min-width:44px;min-height:44px}
.app-guide-brand{font:italic 64px/1 Georgia,serif;color:#ead8b3;margin-bottom:18px}
#appGuide h2{font:400 39px/1.05 Georgia,serif;letter-spacing:-1px;margin:18px 0}
#appGuide p{color:#e6ddcbbf;font-size:13px;line-height:1.65}
#appGuide ol{padding-left:22px;font-size:14px;line-height:1.6;margin:22px 0}
#appGuide li{padding-left:6px;margin-bottom:14px}
#appGuide li::marker{color:#d5bb88}
#appGuide .app-guide-note{font-size:11px;border-top:1px solid #ead8b324;padding-top:14px}
#appGuide .primary{width:100%;min-width:0;min-height:48px;margin-top:18px;align-items:center}
.touch-ui .mobile-help dt{margin-top:10px}
.touch-ui .mobile-help dt:first-child{margin-top:0}
@media(orientation:landscape) and (max-height:600px){
 .touch-ui .welcome h1{margin:8px 0}.touch-ui .welcome>p{margin:8px 0}.touch-ui .welcome .app-launch-link{padding:9px 15px;margin:6px 0 0;min-height:44px}
 #appGuide{width:min(720px,calc(100% - 28px));padding:23px 30px}.app-guide-brand{display:none}#appGuide h2{font-size:28px;margin:12px 0}#appGuide h2 br{display:none}#appGuide li{margin-bottom:8px}#appGuide ol{margin:15px 0}
}

#appGuide .share-symbol{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;vertical-align:-4px;margin-right:3px}
#appGuide .app-guide-tip{font-size:12px}
#appGuide #appInstallStatus{color:#ead8b3}
