/* Shared touch layouts: safe areas, readable controls, portrait and landscape. */
@media(max-width:760px){
 body:has(#stands) header,body:has(#stands) main,body:has(#stands) footer{padding-inline:20px}
 body:has(#stands) .top-label{max-width:110px;line-height:1.5;text-align:right}
 body:has(#stands) .project-title{gap:6px;min-width:0}
 body:has(#stands) .info strong{font-size:clamp(19px,5vw,24px)}
 body:has(#stands) .event{font-size:clamp(13px,3.6vw,16px)}
 body:has(#stands) .info{gap:6px;padding-inline:7px}
 body:has(#stands) .arrow{width:36px;height:36px}
 body:has(#stands) footer{margin-top:35px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
 body:has(#stands):before{background-image:linear-gradient(90deg,#101010ed 5%,#1313139c 70%),url('/assets/catalog-scenography-mobile.webp')}
 body:has(#view) header{inset:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) auto calc(12px + env(safe-area-inset-left))}
 .project .brand-logo{width:115px}.project{gap:14px}.project-label img{width:72px;height:40px}
 #music{width:44px;height:44px}#volume-control{width:170px;padding:14px;background:#181818e8;border:1px solid #fff5;border-radius:14px;top:50px}#music-volume{height:30px}#volume-control label{font-size:13px}
 #loading,#welcome{background-image:linear-gradient(#00000012,#00000020),url('assets/loading-scenography-mobile.webp')}
 #loading{padding:20px;overflow:auto}.loading-panel{margin-top:70px;padding:26px 20px;gap:16px;width:min(520px,100%)}.loading-panel .eyebrow{font-size:10px;line-height:1.5}#load-joke{font-size:13px;line-height:1.6}
 #welcome{padding:calc(80px + env(safe-area-inset-top)) 16px calc(44px + env(safe-area-inset-bottom));align-items:center}
 .welcome-card{width:100%;margin:0;max-height:calc(100dvh - 145px);padding:24px 14px;overflow:auto;border-radius:24px}
 .welcome-card h1{font-size:36px}.welcome-card p{font-size:14px;margin-bottom:18px}.instruction-cards{gap:7px}.instruction{min-height:135px;padding:12px 3px}.instruction small{font-size:11px}.instruction b{font-size:12px}.welcome-card .primary{min-height:48px;font-size:16px;margin-top:25px}
 #toolbar{width:calc(100% - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:570px;gap:2px;padding:10px 5px;bottom:calc(28px + env(safe-area-inset-bottom));border-radius:24px;justify-content:space-around}
 #toolbar button,#toolbar button.active{min-width:0;flex:1;font-size:9px;gap:7px!important;min-height:60px}#toolbar button .dock-icon{width:42px;height:42px}.dock-icon svg{width:23px;height:23px}
 #copyright{bottom:calc(8px + env(safe-area-inset-bottom));font-size:10px}
 #touch{left:calc(12px + env(safe-area-inset-left));bottom:calc(125px + env(safe-area-inset-bottom))}#touch button{width:46px;height:46px;margin:1px;border-radius:50%;background:#20202095;backdrop-filter:blur(8px)}
 dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 30px);padding:20px 14px;border-radius:20px}#close{width:44px;height:44px;top:4px;right:6px}dialog h2{font-size:20px;margin-right:40px}.render-gallery #detail-content>img{height:52dvh;max-height:52dvh}.gallery-thumbs button{min-height:48px}.gallery-controls button{min-width:44px;min-height:44px}
 .help-modal .welcome-card{width:100%;max-height:none;margin:0}.floorplan-modal #close,.render-gallery #close{display:block;background:#171717bb;border-radius:50%;z-index:3}.floorplan-modal img{max-height:80dvh}
 .render-gallery{padding-top:48px}.render-gallery .gallery-controls{height:52dvh}.render-gallery #close{top:0;right:0}
 body:has(form[action='/access']){padding:140px 18px 30px;background-image:url('/assets/loading-scenography-mobile.webp');background-attachment:scroll}body:has(form[action='/access']) main{padding:26px 22px}input[type=password]{font-size:16px}
}
@media(pointer:coarse){.hotspot{min-width:44px;min-height:44px}#touch button:active{color:#171717;background:#ffca00}}
@media(max-height:500px) and (orientation:landscape){
 #welcome{padding:16px 75px 30px}.welcome-card{max-height:calc(100dvh - 50px);padding:16px}.welcome-card h1{font-size:28px}.welcome-card p{margin-bottom:12px}.instruction{min-height:100px}.instruction b{margin-top:7px}.key-art,.mouse-art,.target-art{transform:scale(.7);height:48px}.welcome-card .primary{margin:16px auto 20px}#welcome .opening-brand{bottom:7px}
 #toolbar{max-width:480px;left:auto;right:12px;transform:none;bottom:22px;padding:6px}#toolbar button .dock-icon{width:36px;height:36px}#toolbar button{min-height:48px}#copyright{left:auto;right:12px;width:480px;bottom:5px}#touch{bottom:25px}.loading-panel{margin-top:0;padding:16px;gap:8px}.loading-panel .spinner{display:none}.render-gallery #detail-content>img{height:45dvh}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
#view{touch-action:none;overscroll-behavior:none}#touch{display:none!important}
#rotate-notice{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:28px;background:#101010f5;color:#fff;text-align:center;touch-action:none}#rotate-notice[hidden]{display:none}
.rotate-card{max-width:360px;padding:32px 24px;border:1px solid #ffffff40;border-radius:28px;background:linear-gradient(135deg,#ffffff18,#ffffff05);box-shadow:inset 0 1px 1px #fff3,0 20px 60px #0007}.rotate-card>span{display:block;font-size:72px;color:#ffc400;line-height:1}.rotate-card h2{font-size:29px;margin:20px 0 12px}.rotate-card p{font-size:17px;line-height:1.5}.rotate-card small{display:block;margin-top:22px;font-size:13px;color:#ccc;line-height:1.6}
@media(max-height:600px) and (orientation:landscape){#toolbar{width:min(570px,calc(100vw - 40px));left:50%;right:auto;transform:translateX(-50%);bottom:24px;gap:5px;padding:7px 12px}#toolbar button{min-width:50px;font-size:10px;gap:4px!important}#toolbar button .dock-icon{width:36px;height:36px}#copyright{left:0;right:0;width:100%;bottom:6px}.render-gallery #close,.floorplan-modal #close{display:block;z-index:3;background:#171717bb;border-radius:50%;width:44px;height:44px;top:-40px;right:0}.render-gallery .gallery-controls{height:45dvh}.render-gallery #detail-content>img{height:45dvh;max-height:45dvh}}
.gesture-art{height:72px;display:flex;align-items:center;justify-content:center}.gesture-art svg{height:68px;width:68px;fill:none;stroke:#f5f5f5;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.gesture-art .gesture-arrow{stroke:#ffc400}.mobile-welcome .instruction b{font-size:14px}.mobile-welcome .instruction small{font-size:12px;white-space:normal;line-height:1.4}
@media(max-height:600px) and (orientation:landscape){#welcome:has(.mobile-welcome){padding:12px 60px 25px}.mobile-welcome{width:min(700px,100%);max-height:calc(100dvh - 38px);padding:15px 22px;margin:0}.mobile-welcome h1{font-size:28px;margin:0 0 6px}.mobile-welcome p{font-size:13px;margin:0 0 10px}.mobile-welcome .instruction-cards{gap:12px;margin-top:0}.mobile-welcome .instruction{min-height:0;padding:8px}.mobile-welcome .gesture-art{height:46px}.mobile-welcome .gesture-art svg{height:46px;width:46px}.mobile-welcome .target-art{height:44px;width:44px;font-size:26px;transform:none;margin:0 auto}.mobile-welcome .instruction b{margin-top:5px;font-size:12px}.mobile-welcome .instruction small{font-size:10px}.mobile-welcome .primary{padding:10px 20px;font-size:16px;margin:12px auto 7px;min-height:44px}.mobile-welcome>small{font-size:10px}.help-modal .mobile-welcome{padding:30px 22px 16px}}
