/* CHG-0054: one fixed application shell and one scrolling route. */
:root{--app-viewport-height:100dvh;--app-viewport-top:0px;--app-viewport-bottom:0px;--app-safe-top:env(safe-area-inset-top,0px);--app-safe-right:env(safe-area-inset-right,0px);--app-safe-bottom:env(safe-area-inset-bottom,0px);--app-safe-left:env(safe-area-inset-left,0px);--app-dock-height:55px;--app-route-footer-height:0px}
html:has(body[data-mode=mobile]){height:100%;overflow:hidden;overscroll-behavior:none}
html body[data-mode=mobile],html body[data-mode=mobile][data-screen]{position:fixed;top:var(--app-viewport-top);bottom:auto;left:0;right:0;display:flex;flex-direction:column;box-sizing:border-box;width:min(100%,var(--mobile-frame-width,430px));height:var(--app-viewport-height);min-height:0;max-height:var(--app-viewport-height);margin:0 auto;padding:var(--app-safe-top) var(--app-safe-right) 0 var(--app-safe-left);overflow:hidden;overscroll-behavior:none}
html body[data-mode=mobile]>.app-header{position:relative;inset:auto;flex:none;width:100%;height:auto;min-height:0;max-width:none;margin:0;background:#fff}
html body[data-mode=mobile]>.app-header:empty{display:none}
html body[data-mode=mobile]>.app-shell{display:flex;flex-direction:column;flex:1 1 0;min-height:0;max-height:none;width:100%;max-width:none;margin:0;padding:0;overflow:hidden}
html body[data-mode=mobile][data-screen] #app-view{position:relative;inset:auto;left:auto;right:auto;bottom:auto;top:auto;transform:none;width:100%;height:auto;min-height:0;max-height:none;flex:1 1 0;box-sizing:border-box;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;overflow-anchor:none;scroll-padding:12px 0 calc(var(--app-route-footer-height) + 16px);-webkit-overflow-scrolling:touch}
html body[data-mode=mobile] #app-view>.page{min-height:0;height:auto;max-height:none;padding-bottom:calc(var(--app-route-footer-height) + 20px)!important}
html body[data-mode=mobile][data-screen=game] .game-grid{grid-template-rows:var(--mobile-game-main-height,300px) auto auto auto;min-height:0;max-height:none}
html body[data-mode=mobile][data-screen=game] .game-main{height:var(--mobile-game-main-height,300px);min-height:0;max-height:none}
html body[data-mode=mobile] .mobile-bottom-dock{position:relative;inset:auto;left:auto;right:auto;bottom:auto;transform:none;flex:none;width:100%;max-width:none;margin:0;padding:0 0 var(--app-safe-bottom);box-sizing:border-box;overflow:hidden}
html body[data-mode=mobile] .mobile-bottom-dock>.mobile-nav{min-height:55px;height:55px;padding:6px 0 7px;box-sizing:border-box}
html body[data-mode=mobile] #app-view :is(.friends-invite-dock,.tickets-download-dock){position:fixed;left:calc(50% + var(--app-safe-left)*.5 - var(--app-safe-right)*.5);right:auto;bottom:calc(var(--app-viewport-bottom) + var(--app-dock-height));width:calc(min(100vw,var(--mobile-frame-width,430px)) - var(--app-safe-left) - var(--app-safe-right));max-width:none;transform:translateX(-50%);box-sizing:border-box;margin:0;z-index:99}
html[data-look] body[data-mode=mobile][data-screen] :is(#dialog,#route-panel){position:fixed;top:calc(var(--app-viewport-top) + var(--app-safe-top) + 12px);bottom:calc(var(--app-viewport-bottom) + var(--app-safe-bottom) + 12px);left:0;right:0;margin:auto;box-sizing:border-box;width:calc(min(100vw,var(--mobile-frame-width,430px)) - var(--app-safe-left) - var(--app-safe-right) - 24px);height:fit-content;max-height:calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom) - 24px);min-height:0;overflow:hidden;overscroll-behavior:none}
html[data-look] body[data-mode=mobile][data-screen] :is(#dialog,#route-panel) .app-dialog-content{height:auto;min-height:0;max-height:calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom) - 50px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
html body[data-mode=mobile] :is(#dialog,#route-panel) .page{min-height:0;height:auto;padding-bottom:12px!important}
/* Auxiliary ticket pages stay inside their scrollable dialog. */
html body[data-mode=mobile] #route-panel .tickets-download-dock{position:static;inset:auto;width:100%;max-width:none;transform:none;margin:0;padding:10px 0 0;align-self:stretch;box-shadow:none}
html body[data-mode=mobile] #app-view :is(.burn-history-list,.statistics-list-scroll,.leaders-list,.friends-list){height:auto;max-height:none;overflow:visible}
html body[data-mode=mobile] .pull-refresh-indicator{top:calc(var(--app-viewport-top) + var(--app-safe-top) + 12px);left:50%;transform:translateX(-50%)}
html body[data-mode=mobile] .toast{bottom:calc(var(--app-viewport-bottom) + var(--app-dock-height) + var(--app-route-footer-height) + 12px)}
html[data-telegram-mini-app] body[data-mode=mobile]{touch-action:pan-y}
html[data-telegram-mini-app] body[data-mode=mobile] :is(input,textarea,select){font-size:16px}
.profile-connection-status{margin:12px 0 0;align-items:flex-start;text-align:left}
.profile-connection-status p{overflow-wrap:anywhere}

/* CHG-0056: continue each section underneath Telegram's transparent controls.
   Game uses two adjacent crops of one gradient, so there is no colour seam. */
html body[data-mode=mobile][data-screen]{--app-header-color:#ffffff;--app-header-image:none}
html body[data-mode=mobile][data-screen=game]{--app-header-color:#dcefff;--app-header-image:var(--hero-background)}
html body[data-mode=mobile][data-screen=burning]{--app-header-color:var(--burn-card)}
html body[data-mode=mobile][data-screen]::before{content:'';position:absolute;top:0;left:var(--app-safe-left);right:var(--app-safe-right);height:var(--app-safe-top);pointer-events:none;background-color:var(--app-header-color);background-image:var(--app-header-image);background-repeat:no-repeat;background-position:center top;background-size:100% calc(var(--mobile-game-main-height,300px) + var(--app-safe-top))}
html[data-look] body[data-mode=mobile][data-screen=game] .game-main{background-repeat:no-repeat;background-position:center bottom;background-size:100% calc(100% + var(--app-safe-top))}