/* Telegram's control inset is additional to the device notch/navigation inset. */
html[data-telegram=true]{
  --app-safe-top:calc(max(env(safe-area-inset-top,0px),var(--app-system-safe-top,0px)) + var(--app-content-safe-top,0px));
  --app-safe-right:calc(max(env(safe-area-inset-right,0px),var(--app-system-safe-right,0px)) + var(--app-content-safe-right,0px));
  --app-safe-bottom:calc(max(env(safe-area-inset-bottom,0px),var(--app-system-safe-bottom,0px)) + var(--app-content-safe-bottom,0px));
  --app-safe-left:calc(max(env(safe-area-inset-left,0px),var(--app-system-safe-left,0px)) + var(--app-content-safe-left,0px));
}
html[data-telegram=true] :is(#world,#vignette,#home,#hud,#modal-layer,#loading){bottom:auto;height:var(--app-viewport-height,100dvh)}
html[data-telegram=true] #home{top:var(--app-safe-top);left:var(--app-safe-left);right:var(--app-safe-right);height:calc(var(--app-viewport-height,100dvh) - var(--app-safe-top) - var(--app-safe-bottom))}
html[data-telegram=true] :is(#modal-layer,#loading){padding:var(--app-safe-top) var(--app-safe-right) var(--app-safe-bottom) var(--app-safe-left)}
html[data-telegram=true] .pixel-panel{max-height:calc(var(--app-viewport-height,100dvh) - var(--app-safe-top) - var(--app-safe-bottom) - 24 * var(--ui));max-width:calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 16 * var(--ui))}
html[data-telegram=true] #dialog:is([data-kind=pause],[data-kind=settings]){top:var(--app-safe-top);left:var(--app-safe-left);right:var(--app-safe-right);bottom:auto;width:auto;height:calc(var(--app-viewport-height,100dvh) - var(--app-safe-top) - var(--app-safe-bottom));max-height:none;max-width:none}
html[data-telegram=true] .hud-bottom{bottom:var(--app-safe-bottom)!important}
html[data-telegram=true] #survival-hud{bottom:calc(32 * var(--ui) + var(--app-safe-bottom))}
html[data-telegram=true] body.touch .hud-top{top:calc(var(--app-safe-top) + 4 * var(--ui));left:calc(var(--app-safe-left) + 4 * var(--ui));right:calc(var(--app-safe-right) + 4 * var(--ui))}
html[data-telegram=true] body.touch #joystick{left:calc(var(--app-safe-left) + 22px);bottom:calc(var(--app-safe-bottom) + 110px)}
html[data-telegram=true] body.touch #touch-actions{right:calc(var(--app-safe-right) + 18px);bottom:calc(var(--app-safe-bottom) + 112px)}
html[data-telegram=true] #chat-entry{left:var(--app-safe-left);right:var(--app-safe-right);bottom:calc(var(--app-viewport-bottom,0px) + var(--app-safe-bottom))}
html[data-telegram=true] #chat-log{left:var(--app-safe-left);bottom:calc(var(--app-viewport-bottom,0px) + var(--app-safe-bottom) + 40 * var(--ui));max-width:calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 4 * var(--ui))}
html[data-telegram=true] body[data-chat=true] #chat-log{bottom:calc(var(--app-viewport-bottom,0px) + var(--app-safe-bottom) + 14 * var(--ui))}
html[data-telegram=true] #toast{bottom:calc(var(--app-viewport-bottom,0px) + var(--app-safe-bottom) + 68 * var(--ui))}
html[data-telegram=true] .client-update{top:calc(var(--app-safe-top) + 8px);max-width:calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 16px)}