/* One layout container reserves separate space for interaction and supplies. */
#game #interactionDock{position:fixed;z-index:7;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;width:min(310px,calc(100vw - 28px));pointer-events:none}
#game #interactionDock #interact{position:relative;inset:auto;transform:none;max-width:100%;width:100%;min-height:46px;margin:0;white-space:normal;line-height:1.35;pointer-events:auto;font-size:14px}
#game #interactionDock #quickItems{position:relative;inset:auto;transform:none;display:flex;gap:4px;max-width:100%;pointer-events:auto}
#game #interactionDock #quickItems button{width:52px;height:68px;min-height:68px;padding:3px;overflow:hidden}
#game #interactionDock #quickItems button b{font-size:11px;line-height:1.25}
#game #interactionDock #quickItems .quick-config{width:25px!important}
#game #interactionDock #interact:active{transform:scale(.97)}
#game:has(#panel:not(.hidden)) #interactionDock,#game:has(#welcome:not(.hidden)) #interactionDock,#game:has(#sceneLoading:not(.hidden)) #interactionDock{visibility:hidden;pointer-events:none}
#game #interactionDock #quickItems.hidden{display:none!important}
#game #joystick{z-index:6;pointer-events:none!important}
#game .desktop-hint{display:none}
#game #navigationStatus{bottom:calc(235px + env(safe-area-inset-bottom))}
@media(orientation:landscape){
 #game #interactionDock{bottom:calc(16px + env(safe-area-inset-bottom));width:min(310px,40vw)}
 #game #navigationStatus{bottom:calc(157px + env(safe-area-inset-bottom))}
}
@media(orientation:portrait){
 #game:not(.safe-scene) #interactionDock{bottom:calc(285px + env(safe-area-inset-bottom))}
 #game:not(.safe-scene) #navigationStatus{bottom:calc(425px + env(safe-area-inset-bottom))}
}