/* Reflow existing controls; all world coordinates and camera magnification stay intact. */
#mobileMenu,#mobileBag,#orientationHint{display:none}
@media (any-pointer:coarse) and (max-width:1100px){
 :root{--safe-left:max(10px,env(safe-area-inset-left));--safe-right:max(10px,env(safe-area-inset-right));--safe-top:max(6px,env(safe-area-inset-top));--safe-bottom:max(8px,env(safe-area-inset-bottom))}
 body{overscroll-behavior:none}
 button,select{min-height:44px;touch-action:manipulation}
 .bar{left:var(--safe-left);right:var(--safe-right);top:var(--safe-top);transform:none;width:auto;max-width:none;justify-content:flex-end;flex-wrap:nowrap;background:transparent;padding:0;gap:6px;pointer-events:none}
 .bar>button{pointer-events:auto;min-width:48px;font-size:14px;background:#fff9e9ee;padding:8px 10px}
 #mobileMenu,#mobileBag{display:block}
 .bar>#mood,.bar>#hunger,.bar>.zoomControls,.bar>#fullscreen,.bar>#clawCollection,.bar>#guideInn,.bar>#cancelGuide{display:none}
 .bar #travelMode{font-size:13px;max-width:190px}
 .bar #pause{order:8}.bar #mobileMenu{order:9}
 .mobile-menu-open .bar{flex-wrap:wrap;width:300px;left:auto;max-height:calc(100dvh - 30px);overflow:auto;background:#fff9e9fa;padding:8px;pointer-events:auto;border:1px solid #b9b09b;z-index:30}
 .mobile-menu-open .bar>.zoomControls{display:flex;pointer-events:auto}
 .mobile-menu-open .bar>#fullscreen,.mobile-menu-open .bar>#clawCollection,.mobile-menu-open .bar>#guideInn,.mobile-menu-open .bar>#cancelGuide:not([hidden]){display:block}
 .mobile-menu-open .bar button{min-height:44px}
 #clock.worldClock{left:var(--safe-left);top:var(--safe-top);font-size:13px;padding:8px;max-width:180px}
 #mapPanel{top:calc(var(--safe-top) + 45px);left:var(--safe-left);max-height:calc(100dvh - 185px);overflow:auto}
 #mapPanel:not(.expanded) #cityMap{width:100px!important;height:100px!important}
 .mapModes{max-width:135px}.mapModes button{min-width:60px;min-height:44px;font-size:12px}
 #mapPanel.expanded{background:#fff9e9ed;border-radius:10px;max-width:calc(100vw - 30px);z-index:25;max-height:calc(100dvh - 65px)}
 #mapPanel.expanded #cityMap{max-width:min(60vw,380px);height:auto!important}
 #mapShopSelect{min-height:44px;font-size:16px}
 header .status{left:auto;right:var(--safe-right);top:calc(var(--safe-top) + 48px);bottom:auto;max-width:270px;gap:4px 8px;font-size:12px;padding:4px 8px;justify-content:flex-end}
 #bagPanel{display:none;top:calc(var(--safe-top) + 88px);right:var(--safe-right);max-height:calc(100dvh - 115px);overflow:auto;width:230px;font-size:14px;pointer-events:auto;z-index:26}
 .mobile-bag-open #bagPanel{display:block}.inCentralPark #bagPanel,.claw-playing #bagPanel{display:none}
 #foodList small{font-size:12px}
 .controls{display:grid;left:auto;right:var(--safe-right);bottom:var(--safe-bottom);grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:5px}
 .ctrl{padding:0;background:#fff9e9db;border:2px solid #6d826e;touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none;user-select:none}
 .ctrl:active{background:#476d53;color:white}
 #interactionPrompts{left:auto;right:var(--safe-right);bottom:var(--safe-bottom);transform:none;max-width:260px;width:calc(100vw - 195px);max-height:calc(100dvh - 112px);align-items:stretch;gap:6px}
 #interactionPrompts>#shopPrompt,#interactionPrompts>#innPrompt,#interactionPrompts>#feedCat{width:100%;padding:8px;border-width:2px}
 #shopPromptTitle{font-size:16px}#shopPromptDetail{font-size:13px}#innPrompt h2{font-size:16px}#innPrompt p{font-size:14px;margin:4px 0}
 #parkControls{left:auto;right:var(--safe-right);bottom:var(--safe-bottom);transform:none;width:240px;max-width:calc(100vw - 185px);padding:6px;gap:4px}
 #parkHint{font-size:13px;flex-basis:100%}#parkControls button{font-size:14px}
 #toast{top:62px;max-width:calc(100vw - 330px);font-size:13px;padding:7px 10px}
 #guestTask{right:var(--safe-right);bottom:var(--safe-bottom);width:260px;max-height:calc(100dvh - 108px);overflow:auto;padding:8px}
 #guestTask p{font-size:13px;margin:5px 0}#guestTask button{font-size:14px}
 #guestTask[data-phase="ringing"]{top:65px;left:50%;bottom:auto;width:320px;max-width:calc(100vw - 30px)}
 #clawEnter{left:auto;right:var(--safe-right);bottom:var(--safe-bottom);transform:none;font-size:14px}
 #clawControls{bottom:var(--safe-bottom);max-width:calc(100vw - 40px);width:max-content;padding:5px 10px}#clawControls button{min-height:44px;font-size:14px;margin:2px}
 #clawWall{inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);z-index:40}
 #overlay:not(:has(#homeStory:not([hidden]))){z-index:35}
 #overlay article:has(#homeStory:not([hidden])){width:min(850px,100%);min-height:0;padding:8px;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:5px;max-height:100dvh;overflow:auto}
 #homeStoryFrame:not([hidden]){grid-column:1;grid-row:1 / 6;max-height:calc(100dvh - 30px);aspect-ratio:16/9}
 #overlay article:has(#homeStory:not([hidden]))>*:not(#homeStoryFrame){grid-column:2;margin:4px}
 #homeStorySelect{font-size:16px;max-width:100%}
 #overlay article:has(#homeStory:not([hidden])) p{font-size:13px}
 .claw-playing #mobileBag,.claw-playing #home{display:none}
 body:has(#homeStory:not([hidden])) .bar,body:has(#homeStory:not([hidden])) .controls,body:has(#homeStory:not([hidden])) header .status{visibility:hidden}
 .caption{display:none}
}
@media (any-pointer:coarse) and (max-width:1100px) and (orientation:portrait){
 #orientationHint{display:block;position:fixed;left:10px;right:10px;top:calc(env(safe-area-inset-top) + 58px);margin:0;padding:10px;text-align:center;border-radius:8px;background:#fff0bfdc;color:#574521;z-index:29;font-size:14px;pointer-events:none}
 .bar{top:calc(var(--safe-top) + 105px);flex-wrap:wrap;justify-content:flex-end;left:auto;right:var(--safe-right)}
 #clock.worldClock{top:var(--safe-top)}
 #mapPanel{top:calc(var(--safe-top) + 105px)}
 header .status{top:calc(var(--safe-top) + 210px);max-width:190px}
 #bagPanel{top:calc(var(--safe-top) + 265px);max-height:calc(100dvh - 290px)}
 #interactionPrompts{max-height:calc(100dvh - 325px);width:calc(100vw - 185px)}
 #toast{top:calc(var(--safe-top) + 275px);max-width:90%}
 .mobile-menu-open .bar{top:calc(var(--safe-top) + 105px)}
 #overlay article:has(#homeStory:not([hidden])){display:flex;flex-direction:column;width:100%}
 #homeStoryFrame:not([hidden]){max-height:45dvh;flex-shrink:0;width:100%}
}