/* iPhone 11 (414×896 CSS px) を基準に、ノッチ・ホームバーを含めて一画面へ収める。 */
.app {
  width: min(100%, 414px);
  height: 100svh;
  max-height: 896px;
}

.game-shell {
  width: min(calc(100vw - 24px), 390px);
  max-width: 390px;
  aspect-ratio: 208 / 400;
}

.topbar,
.quick-tools,
.drawer { max-width: 414px; }

@media (orientation: landscape) and (max-height: 600px) {
  .app::before {
    content: "縦向きで遊ぶと見やすいです";
    display: block;
    position: fixed;
    z-index: 20;
    top: max(4px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 9px;
    color: var(--brass-1);
    border: 2px solid var(--brass-2);
    background: var(--wood-1);
    box-shadow: inset 0 0 0 2px var(--wood-3);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
  }

  .game-shell { width: min(62vh, 390px); }
}