:root{
 --app-safe-top:max(env(safe-area-inset-top,0px),var(--telegram-inset-top,0px));
 --app-safe-bottom:max(env(safe-area-inset-bottom,0px),var(--telegram-inset-bottom,0px));
 --app-safe-left:max(env(safe-area-inset-left,0px),var(--telegram-inset-left,0px));
 --app-safe-right:max(env(safe-area-inset-right,0px),var(--telegram-inset-right,0px));
}
html{overscroll-behavior:none}
html:has(body[data-screen=arena]),body[data-screen=arena]{overflow:hidden;overscroll-behavior:none;height:var(--app-height,100dvh);width:100%}
body[data-screen=arena]{position:fixed;inset:0}
body[data-screen=arena] main,body[data-screen=arena] .arena{height:var(--app-height,100dvh)}
body[data-screen=arena] #game-map,body[data-screen=arena] #game-map *{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
body[data-screen=arena] :is(.empire-ranking,.frontier-command){overscroll-behavior:contain}
body[data-telegram=true]:not([data-screen=arena]) .topbar{margin-top:var(--app-safe-top)}
body[data-telegram=true]:not([data-screen=arena]) .shell{padding-left:var(--app-safe-left);padding-right:var(--app-safe-right)}
body[data-telegram=true]:not([data-screen=arena]) main{min-height:calc(var(--app-height,100dvh) - var(--app-safe-top) - 94px)}
body[data-telegram=true][data-screen=play] .game-lobby{min-height:calc(var(--app-height,100dvh) - var(--app-safe-top) - 94px)}
body[data-telegram=true] .battle-room{padding-top:calc(25px + var(--app-safe-top));padding-bottom:calc(36px + var(--app-safe-bottom))}
body[data-telegram=true] dialog{max-height:calc(var(--app-height,100dvh) - var(--app-safe-top) - var(--app-safe-bottom) - 24px);top:var(--app-safe-top);bottom:var(--app-safe-bottom);margin-block:auto}
body[data-telegram=true] .guided-game .is-deploying .guided-coach,body[data-telegram=true].guided-game .is-deploying .guided-coach{top:calc(118px + var(--app-safe-top))}
@media(max-width:700px){
 input:not([type=range]):not([type=checkbox]),select,textarea{font-size:16px}
 body[data-telegram=true]:not([data-screen=arena]) main,body[data-telegram=true][data-screen=play] .game-lobby{min-height:calc(var(--app-height,100dvh) - var(--app-safe-top) - 77px)}
 body[data-telegram=true] .mobile-nav{left:calc(11px + var(--app-safe-left));width:calc(100% - 22px - var(--app-safe-left) - var(--app-safe-right))}
}
@media(max-width:900px) and (orientation:landscape){
 body[data-telegram=true][data-screen=arena] .arena-header{top:calc(6px + var(--app-safe-top));left:calc(8px + var(--app-safe-left));right:calc(8px + var(--app-safe-right))}
 body[data-telegram=true][data-screen=arena] .game-hud{top:calc(8px + var(--app-safe-top));left:calc(158px + var(--app-safe-left))}
 body[data-telegram=true][data-screen=arena] .empire-ranking{top:calc(105px + var(--app-safe-top));left:calc(8px + var(--app-safe-left))}
 body[data-telegram=true][data-screen=arena] .arena-side.frontier-command{right:calc(8px + var(--app-safe-right))!important;bottom:calc(10px + var(--app-safe-bottom))!important}
 body[data-telegram=true][data-screen=arena] .map-zoom{left:calc(8px + var(--app-safe-left));bottom:calc(8px + var(--app-safe-bottom))}
 body[data-telegram=true][data-screen=arena] .is-deploying .deployment-heading{top:calc(8px + var(--app-safe-top))}
}