/* static/layout.css */

/* Базовые переменные каркаса */
:root{
  --app-h: 100vh;
  --app-vh: 1vh;
  --app-vw: 100vw;

  --safe-top: 0px;
  --safe-bottom: 0px;

  /* compat (у тебя уже используются) */
  --sa-top: 0px;
  --sa-right: 0px;
  --sa-bottom: 0px;
  --sa-left: 0px;

  --dock-h: 96px;

  /* единые “каркасные” отступы */
  --pad: clamp(10px, 2.2vw, 16px);
  --radius: 18px;

  /* минимальные цели по тачу */
  --tap: 44px;
}

/* Единая ширина интерфейса на Desktop/Web, чтобы не растягивалось "на весь монитор" */
:root{
  --app-max: 560px;
}
/* Главный контейнер приложения */
#app.app-root{
  height: var(--app-h);
  max-height: var(--app-h);
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Верхний HUD — фиксированная зона в потоке */
#app.app-root > header.topbar{
  flex: 0 0 auto;
}

/* Stage: место для сцен */
#scenes{
  flex: 1 1 auto;
  min-height: 0;
  /* приложение целиком не скроллим */
  overflow: hidden;
  /* чтобы сцены не залезали под док */
  padding-bottom: calc(var(--dock-h) + max(var(--safe-bottom), env(safe-area-inset-bottom, 0px)));
  box-sizing: border-box;
}

/* На широких экранах центрируем сцену и ограничиваем ширину */
@media (min-width: 720px){
  #scenes{
    display: flex;
    justify-content: center;
  }
  #scenes > .scene{
    width: 100%;
    max-width: var(--app-max);
  }
}

/* Каждая сцена — самостоятельный скролл-контейнер */
.scene{
  height: 100%;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}

/* === FIX: сцены всегда занимают всю высоту stage === */
#scenes > .scene{
  display: flex;
  flex-direction: column;
}

/* Прячем сцену как и было */
.scene.hidden{ display:none; }

/* Нижний док — фиксированная зона (как у тебя), но даём ему “не схлопываться” */
.dock{
  flex: 0 0 auto;
}

/* ===== МОДАЛКИ: единый каркас ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;

  /* чтобы на маленьких экранах модалка не упиралась в края */
  padding:
    calc(var(--pad) + max(var(--safe-top), env(safe-area-inset-top, 0px)))
    var(--pad)
    calc(var(--pad) + max(var(--safe-bottom), env(safe-area-inset-bottom, 0px)))
    var(--pad);

  box-sizing: border-box;
}

/* fullscreen-модалки заполняют экран */
.modal.is-fullscreen{
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.modal.hidden{ display:none; }

/* Общий “card” модалки */
.modal .modal-card{
  width: min(560px, calc(100vw - (var(--pad) * 2)));
  max-height: calc(var(--app-h) - (var(--pad) * 2) - max(var(--safe-top), env(safe-area-inset-top, 0px)) - max(var(--safe-bottom), env(safe-area-inset-bottom, 0px)));
  min-height: 0;

  border-radius: var(--radius);
  overflow: auto;            /* важнейшее: контент скроллится внутри */
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* fullscreen card = на весь экран */
.modal.is-fullscreen .modal-card{
  width: 100vw;
  height: var(--app-h);
  max-height: var(--app-h);
  border-radius: 0;
  overflow: auto;
}

/* Кнопки (минимальная высота тапа) — без изменения цветов */
button, .btn{
  min-height: var(--tap);
}

/* Сверх-малые экраны: уменьшаем паддинги/радиусы, но сохраняем 44px tap */
@media (max-width: 360px), (max-height: 560px){
  :root{
    --pad: clamp(8px, 2.0vw, 12px);
    --radius: 14px;
  }

  .modal .modal-card{
    width: calc(100vw - (var(--pad) * 2));
  }
}

/* === FIX: mining выглядит одинаково на desktop и mobile === */
@media (min-width: 720px){
  .scene[data-scene="mining"]{
    justify-content: space-between;
  }

  .scene[data-scene="mining"] main{
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}