/* Резерв под системные кнопки VK (… и ×).
   Панель висит поверх iframe в правом верхнем углу на всех экранах мини-аппы.
   Признак ставит platform.js: html[data-vk-chrome="true"] — по launch-параметрам
   и по факту VKWebAppInit. Флот уже заворачивали на модерации за перекрытые
   кнопки, поэтому зона 132x56 резервируется на каждом экране.

   На игровом экране высота — дефицитный ресурс (доска считается от 100dvh),
   поэтому вместо padding-top шапка сужается: пауза уезжает левее зоны VK,
   вертикальный бюджет не меняется. */

@media (max-width: 700px) {
  html[data-vk-chrome="true"] { --vk-chrome-w: 132px; --vk-chrome-h: 56px; }

  html[data-vk-chrome="true"] .game-screen header,
  html[data-vk-chrome="true"] .journey-screen header {
    width: min(560px, calc(100% - var(--vk-chrome-w) - env(safe-area-inset-right, 0px)));
    align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
  }

  /* Меню скроллится: там дешевле отступ, чем перекомпоновка шапки бренда. */
  html[data-vk-chrome="true"] .menu-screen {
    padding-top: calc(var(--vk-chrome-h) + env(safe-area-inset-top, 0px));
  }

  /* Модалка центрируется по вертикали: без отступа её верх (заголовок и
     кнопка закрытия) может оказаться под системными кнопками. */
  html[data-vk-chrome="true"] .modal { padding-top: calc(var(--vk-chrome-h) + 8px); }
  html[data-vk-chrome="true"] .card { max-height: calc(100dvh - var(--vk-chrome-h) - 38px); }
}

@media (max-width: 700px) and (max-height: 560px) {
  html[data-vk-chrome="true"] { --vk-chrome-h: 50px; }
}