/* 全ゲーム共通: ビューポートに合わせてゲーム領域をスケール */

body.game-shell {
  margin: 0;
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}

body.game-shell .back-link {
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
}

/* キャンバス＋オーバーレイ HUD（単一ステージ） */
#game-container.game-stage {
  position: relative;
  --gw: var(--game-aspect-w, 3);
  --gh: var(--game-aspect-h, 4);
  --inset: 24px;
  width: min(
    calc(100vw - var(--inset)),
    calc((100dvh - var(--inset)) * var(--gw) / var(--gh)),
    calc((100vh - var(--inset)) * var(--gw) / var(--gh))
  );
  aspect-ratio: var(--gw) / var(--gh);
  max-height: min(
    calc(100dvh - var(--inset)),
    calc(100vh - var(--inset)),
    calc((100vw - var(--inset)) * var(--gh) / var(--gw))
  );
  flex-shrink: 0;
}

#game-container.game-stage > #game-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* HUD + キャンバス + コントロール（縦並び） */
#game-container.game-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.5vmin, 12px);
  width: min(calc(100vw - 24px), calc(100dvh - 24px), calc(100vh - 24px));
  max-height: min(calc(100dvh - 24px), calc(100vh - 24px));
  flex-shrink: 0;
}

#game-container.game-column > #game-canvas {
  display: block;
  width: 100%;
  aspect-ratio: var(--game-aspect-w, 1) / var(--game-aspect-h, 1);
  flex: 0 1 auto;
  min-height: 0;
  max-width: min(
    calc(100vw - 24px),
    calc(100dvh - 160px),
    calc(100vh - 160px)
  );
  max-height: min(
    calc(100dvh - 160px),
    calc(100vh - 160px),
    calc(100vw - 24px)
  );
}

/* DOM ベースのパネル型 */
#game-container.game-panel {
  width: min(
    calc(100vw - 24px),
    calc((100dvh - 24px) * 0.72),
    calc((100vh - 24px) * 0.72),
    560px
  );
  max-height: min(calc(100dvh - 24px), calc(100vh - 24px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 1;
}

/* 大画面ではパネル型もう少し広げる */
@media (min-height: 800px) {
  #game-container.game-panel {
    width: min(
      calc(100vw - 32px),
      calc((100dvh - 32px) * 0.78),
      calc((100vh - 32px) * 0.78),
      640px
    );
  }
}