/* Mobile viewport is fixed; only content panes scroll. */
@media (max-width:600px), (hover:none) and (pointer:coarse){
 html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
 body{display:block;padding:0;background:#101c30}
 .desktop-note,.desktop-bottom{display:none}
 .phone{position:fixed;top:var(--viewport-top,0px);left:0;width:100%;height:var(--viewport-height,100dvh);min-height:0;max-height:none;border:0;border-radius:0;box-shadow:none;padding-top:env(safe-area-inset-top,0px);overflow:hidden}
 .hud{flex:0 0 auto;padding-top:6px}.top-line{flex:0 0 auto}
 .scene{flex:1 1 0;min-height:0;margin:0 10px;border-radius:16px}
 .phone[data-tab=care] .scene,.phone[data-tab=room] .scene{flex:0 0 clamp(130px,27dvh,245px);min-height:0}
 .content-pane{flex:1 1 0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding-bottom:16px}
 .player{flex:0 0 auto;margin:8px 10px 0;padding:9px 12px 6px}
 .quick-care{flex:0 0 auto;padding:6px 10px}
 .nav{flex:0 0 auto;margin-top:0;padding:6px max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));z-index:10}
 .nav button{min-height:48px;flex:1;max-width:84px}
 .yt-dock{flex:0 0 auto;margin:6px 10px;padding:0 6px 4px}
 .yt-dock iframe{height:200px;min-height:200px;min-width:200px}
 .yt-dock p{font-size:10px;line-height:1.35;margin:4px 0}
 .youtube-active[data-tab=home] .scene{flex:1 1 0;min-height:0}
 input[type=text],input[type=search],input[type=password],select{font-size:16px}
 dialog{max-height:calc(var(--viewport-height,100dvh) - 24px);overflow-y:auto;overscroll-behavior:contain;margin:auto}
 #pet-button{min-height:0;height:52%;width:48%;left:17%}
 .phone:not([data-tab=home]) #pet-button{height:65%}
 .keyboard-open .scene,.keyboard-open .quick-care,.keyboard-open .top-line{display:none!important}
 .keyboard-open .yt-dock{display:none!important}
}
@media (max-width:600px) and (max-height:700px){
 .hud{padding-bottom:2px}.top-line{padding-bottom:6px}
 .room-label{top:10px}.room-label small{display:none}
 .compact-stats{top:12px;width:90px;gap:3px}.mini{padding:3px 5px}
 .bubble{top:25%;font-size:8px;max-width:130px}
 .player-meta .album-button{width:40px;height:40px}
 .quick-care img{height:27px;width:36px}.quick-care button{min-height:44px}
 .scene-footer{bottom:8px}.speaker{height:42px;width:22px}
 .youtube-active .top-line{display:none}
 .youtube-active .yt-dock p{max-height:28px;overflow-y:auto}
 .phone[data-tab=care] .scene,.phone[data-tab=room] .scene{flex-basis:140px}
}
@media (max-height:520px) and (hover:none), (max-width:600px) and (max-height:520px){
 .phone .scene,.phone .quick-care,.phone .top-line{display:none!important}
 .phone .hud{padding-top:0}.profile>img{height:36px;width:36px}
 .phone.youtube-active .hud{display:none}
 .phone.youtube-active .yt-dock{margin-top:0}
 .nav img{height:22px}.nav button{min-height:44px}
}



@media(max-width:600px),(hover:none) and (pointer:coarse){.quick-care{margin:8px 10px 0;padding:7px 6px;border-radius:18px}}

@media(max-width:600px),(hover:none) and (pointer:coarse){.player{margin-bottom:14px}}
@media(max-height:700px){.player{margin-bottom:10px}}