/* Mallang World: viewport-safe gameplay HUD, 2026-11-06 */
body.mallang-playing{overflow:hidden!important;}
body.mallang-playing .app-shell{height:100dvh;min-height:0;overflow:hidden!important;}
body.mallang-playing .site-header,body.mallang-playing .site-footer{display:none!important;}
body.mallang-playing main#views{height:100dvh;min-height:0;width:100%;display:block;}
body.mallang-playing #screen-game.view.active{display:flex!important;flex-direction:column;width:100%;height:100dvh;min-height:0!important;max-width:1600px;margin:0 auto;padding:6px 10px 8px!important;overflow:hidden;}
body.mallang-playing .game-heading{flex:0 0 auto;min-height:0;margin:0;gap:8px;padding:3px 8px 7px;}
body.mallang-playing .game-stage-title{min-width:0;}
body.mallang-playing .game-stage-title strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.mallang-playing .canvas-shell{flex:1 1 auto;height:0!important;min-height:0!important;max-height:none!important;border-radius:17px 17px 0 0;overflow:hidden;}
body.mallang-playing .game-footer{flex:0 0 auto;min-height:0;padding:7px 15px;gap:10px;border-radius:0 0 16px 16px;}
body.mallang-playing .game-footer .keyboard-legend{display:none!important;}
body.mallang-playing .orientation-prompt{display:none!important;}
body.mallang-playing .touch-controls{opacity:1!important;}
@media(max-width:900px){
 body.mallang-playing #screen-game.view.active{padding:3px 5px 4px!important;}
 body.mallang-playing .game-heading{padding:2px 6px 5px;min-height:34px;gap:5px;}
 body.mallang-playing .game-hud-stats{gap:7px;}
 body.mallang-playing .game-stage-title strong{font-size:12px;}
 body.mallang-playing .game-stage-title span{font-size:8px;margin-bottom:1px;}
 body.mallang-playing .canvas-shell{border-radius:9px 9px 0 0;}
 body.mallang-playing .game-footer{padding:3px 8px;gap:6px;min-height:29px;}
 body.mallang-playing .game-footer .footer-char img{width:26px;height:26px;}
 body.mallang-playing .game-footer .footer-char small{display:none;}
 body.mallang-playing .touch-controls{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(7px,env(safe-area-inset-bottom));}
 body.mallang-playing .touch-dpad{display:none;}
 body.mallang-playing .action-btn{height:clamp(42px,12vh,64px);width:clamp(42px,12vh,64px);border-radius:16px;}
 body.mallang-playing .jump-btn{height:clamp(52px,14vh,72px);width:clamp(52px,14vh,72px);}
 body.mallang-playing .action-btn span{font-size:20px;}
 body.mallang-playing .action-btn small{font-size:9px;}
 body.mallang-playing .touch-actions{gap:5px;}
 body.mallang-playing #soloJoystick{max-height:clamp(62px,19vh,98px);max-width:clamp(62px,19vh,98px);}
}
@media(max-height:430px) and (orientation:landscape){
 body.mallang-playing .game-heading{height:35px;}
 body.mallang-playing .game-footer{height:30px;overflow:hidden;}
 body.mallang-playing .game-footer .footer-char{min-width:0;}
 body.mallang-playing .game-footer .footer-char img{display:none;}
 body.mallang-playing .game-progress{min-width:72px;}
 body.mallang-playing .game-footer .footer-char small{display:none!important;}
 body.mallang-playing .game-toast{font-size:11px;padding:5px 9px;}
}
@media(max-width:420px) and (orientation:portrait){
 body.mallang-playing .game-footer .footer-char{min-width:85px;}
 body.mallang-playing .game-footer .footer-char b{font-size:9px;}
 body.mallang-playing .game-progress{min-width:90px;}
 body.mallang-playing .game-heading .back-btn{padding:1px 4px;font-size:15px;}
 body.mallang-playing .game-hud-stats .header-icon{height:27px;width:27px;}
}

/* Fixed game viewport: remove inherited page offsets in short landscape windows. */
body.mallang-playing #screen-game.view.active{position:fixed!important;inset:0!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;padding:4px 7px!important;max-width:none!important;width:100vw!important;height:100dvh!important;min-height:0!important;z-index:100;box-sizing:border-box;}
body.mallang-playing #soloJoystick{display:grid!important;pointer-events:auto;}
body.mallang-playing .touch-dpad{display:none!important;}
body.mallang-playing .game-footer{display:flex!important;}
body.mallang-playing #gameCanvas{display:block;width:100%!important;height:100%!important;}
@media(max-width:900px){body.mallang-playing #screen-game.view.active{padding:2px 4px!important;}}

body.mallang-playing #screen-game.view.active{animation:none!important;transform:none!important;transition:none!important;}