/* ============================================================
   [FILE: core/css/layout.css]
   Назначение: структура каркаса. Позиционирование, размеры,
   flex/grid. Без цветов, градиентов, теней, скруглений.
   Вся стилистика — в game/css/theme.css.
   ============================================================ */


/* ============================================================
   [BLOCK: game-wrapper]
   ============================================================ */
.game-wrapper {
  position: fixed;
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding-top:    max(var(--wrapper-pad), env(safe-area-inset-top));
  padding-right:  max(var(--wrapper-pad), env(safe-area-inset-right));
  padding-bottom: max(var(--wrapper-pad), env(safe-area-inset-bottom));
  padding-left:   max(var(--wrapper-pad), env(safe-area-inset-left));

  gap: var(--gap-sm);

  overflow: hidden;
  touch-action: manipulation;
}


/* ============================================================
   [BLOCK: header]
   ============================================================ */
.header {
  flex: 0 0 auto;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  min-height: var(--header-h);

  padding: 0 var(--safe-pad);
  margin-bottom: 0;   /* ← отступ даёт gap в game-wrapper */
}

/* ============================================================
   [BLOCK: header-brand]
   Контейнер для логотипа или названия. Содержимое задаётся
   в index.html конкретной игры.
   ============================================================ */
.header-brand {
  display: flex;
  align-items: center;
  justify-content: center;

  max-width: 100%;
  max-height: 100%;

  padding: 0 8px;         /* ← защита от края */

  overflow: hidden;
}

.header-logo {
  display: block;

  max-width: 100%;        /* не шире контейнера */
  max-height: var(--header-h);

  width: auto;
  height: auto;

  object-fit: contain;
}

/* ============================================================
   [BLOCK: canvas-container]
   ============================================================ */
.canvas-container {
  flex: 0 0 auto;

  width:  min(100%, 360px);
  height: min(100%, 360px);

  /*margin-bottom: var(--gap-md);*/
  
  touch-action: manipulation;
}


/* ============================================================
   [BLOCK: canvas]
   ============================================================ */
canvas {
  display: block;
  width: 100%;
  height: 100%;

  image-rendering: pixelated;
  touch-action: manipulation;
  cursor: pointer;
}