/* Standalone phone layout. The desktop showcase remains in musex.html. */
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
html body{display:block;padding:0;background:var(--bg)}
.stage{display:block;width:100%;height:100%;max-width:none;margin:0}
.stage>.phone{width:100%;max-width:600px;height:100%;height:100dvh;margin:0 auto;padding:0;border:0;border-radius:0;background:var(--bg);box-shadow:none}
.phone>.phone-screen{border-radius:0;min-height:0;padding-top:env(safe-area-inset-top,0px)}
.notch,.statusbar,#renderSupport{display:none!important}
.screens{min-height:0}
.screen{padding:12px max(18px,env(safe-area-inset-right)) 24px max(18px,env(safe-area-inset-left));overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.phone .tabbar{height:auto;min-height:68px;padding:6px 8px max(8px,env(safe-area-inset-bottom));gap:2px}
.tab{min-height:52px;touch-action:manipulation}
.phone .screen input:not([type=range]):not([type=checkbox]):not([type=color]),.phone .screen select,.phone-dialog input{font-size:16px!important}
.btn,.back,.src-seg button,.preview-switch button,.select-options button{min-height:44px;touch-action:manipulation}
.screen .btn,.screen .card,.screen .row>*{min-width:0}
.phone-modal-layer{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.phone-dialog{max-height:100%}
#mobileSetup{padding:14px 16px;margin-top:12px}
#mobileSetup p{margin:7px 0 12px}
#mobileSetup .btn{width:100%}
#mobileDeviceStatus p{margin:8px 0;max-width:none!important;text-align:left!important;overflow-wrap:anywhere}
#mobileDeviceStatus details{margin-top:12px}
#mobileDeviceStatus summary{min-height:44px;display:flex;align-items:center;color:var(--accent)}
.mobile-help{margin:12px 0;line-height:1.6}
.mobile-help a{color:var(--accent)}
@media(max-width:360px){.screen{padding-left:12px;padding-right:12px}.card{padding:13px}.shop-columns{gap:8px}#audioControls{gap:8px}.tab{font-size:10px}}
@media(orientation:landscape) and (max-height:500px){.phone .tabbar{min-height:54px;padding-top:2px}.tab{min-height:44px}.tab svg{width:20px;height:20px}}