/* UI and the world share a logical stage; no device-specific HUD hierarchy. */
#game{position:fixed;inset:0 auto auto 0;container:game-viewport / size;transform:scale(var(--ui-scale,1));transform-origin:top left;--dock:116px}
#game #bottom-bar{transform:translateY(calc(-1 * var(--keyboard-shift,0px)))}
.gamepad #touch-controls{display:block;inset:0 auto auto 0;width:var(--screen-width);height:var(--screen-height);transform:scale(var(--inverse-ui-scale));transform-origin:top left}
.gamepad #touch-controls .movement,.gamepad #mobile-actions{bottom:var(--gamepad-bottom)}
/* Keep the same panels and physical thumb area; the scroll viewport must fit one 30px guide button. */
.gamepad #game #quest-tracker{pointer-events:auto;max-height:max(30px,calc((var(--screen-height) - var(--gamepad-bottom) - var(--mobile-combat-height) - 10px) * var(--inverse-ui-scale) - var(--quest-top,132px)))}
.gamepad #gain-feed{right:calc((var(--pad-right) + 28px) * var(--inverse-ui-scale))}
.gamepad:has(#modal-backdrop:not([hidden])) #touch-controls,.gamepad:has(#chat:focus-within) #touch-controls{visibility:hidden}
.gamepad .opening-keycaps{display:none}
#game:has(.opening-scene[data-stage="combat"]) #boss-hud{top:20px}
.gamepad #rotate{display:none}
@media(orientation:portrait) and (max-width:800px){.gamepad #rotate{display:flex}}
/* Keyboard focus can scroll the browser viewport, but never resizes the game. */
.gamepad #chat:focus-within{position:relative;z-index:12}