/* PCの960×600埋め込み用。スマホは従来のまま。
   画像とクリックボタンの共通の親を縮小するため、座標変更は不要。 */
@media (min-width: 900px) and (min-height: 560px) and (any-pointer: fine) {
  html { scrollbar-gutter: auto; }
  .app {
    height: 100vh;
    height: 100dvh;
    padding: 12px 16px 8px;
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr) 20px;
    gap: 6px;
  }
  .app > header {
    padding: 0 0 4px;
    flex-wrap: nowrap;
  }
  .app .brand { font-size: 20px; line-height: 1.2; }
  .app .brand small { margin-top: 3px; }
  .app > footer { padding: 0; line-height: 20px; }
  /* ゲーム中だけ余白を圧縮し、画像の高さを22px増やす（960×600）。 */
  .app:has(#game:not([hidden])) {
    padding: 8px 16px 6px;
    grid-template-rows: 46px minmax(0, 1fr) 20px;
    gap: 4px;
  }
  .app:has(#game:not([hidden])) > header { padding: 0; }
  .app:has(#game:not([hidden])) #sound { min-height: 44px; padding: 6px 14px; }
  /* 開始前・クリア後も既存の最小高さでiframeを押し広げない。 */
  .app .cover { min-height: 0; gap: 32px; }
  .app .cover-art { height: min(380px, calc(100dvh - 140px)); }
  .app .cover-copy h1 { font-size: 40px; margin-bottom: 16px; }
  .app .cover-copy > p:not(.eyebrow) { line-height: 1.7; }
  .app .ending { min-height: 0; padding: 12px 10px; align-self: center; }
  .app .ending-icon { font-size: 48px; }
  .app .ending h1 { font-size: 40px; margin-bottom: 16px; }
  #game:not([hidden]) {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    /* メッセージ2行42px + 上下余白16pxを、62px内に確保。 */
    grid-template-rows: 44px minmax(0, 1fr) 44px 62px;
    grid-template-areas: "heading heading" "picture inventory" "navigation inventory" "message inventory";
    gap: 4px 12px;
  }
  #game .room-heading { grid-area: heading; padding: 0; flex-wrap: nowrap; }
  #game .room-heading > div { display: flex; align-items: baseline; gap: 12px; }
  #game .room-heading #hint { min-height: 44px; padding: 6px 18px; }
  #game .room-heading .eyebrow { margin: 0; }
  #game .room-heading h1 { font-size: 23px; }
  #game .scene-scroll-help { display: none; }
  #game .scene-viewport {
    grid-area: picture;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
    overflow: visible;
    background: #101c19;
  }
  #game .scene-viewport .scene {
    /* 幅と高さの両方に収まる寸法。coverによる切り抜きは行わない。 */
    min-width: 0;
    width: min(100cqw, calc(100cqh * 1672 / 941));
    flex: 0 0 auto;
    aspect-ratio: 1672 / 941;
    box-shadow: none;
  }
  #game .room-nav { grid-area: navigation; margin: 0; }
  #game .room-nav button { min-height: 44px; padding: 6px 12px; }
  #game .message {
    grid-area: message;
    margin: 0;
    min-height: 0;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  #game .inventory {
    grid-area: inventory;
    padding: 12px;
    min-height: 0;
    align-self: stretch;
    background: #1c3030;
  }
  #game .inventory-heading { flex-direction: column; align-items: flex-start; gap: 4px; }
  #game .inventory-heading h2 { line-height: 1.4; }
  #game #selected-label { font-size: 14px; line-height: 1.5; }
  #game #items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 10px 0; }
  #game .item { min-height: 44px; padding: 6px 8px; gap: 8px; font-size: 14px; line-height: 1.4; }
  #game #inspect { width: 100%; min-height: 44px; padding: 8px; font-size: 14px; }
  #game .inventory .muted { font-size: 14px; line-height: 1.5; margin-top: 10px; }
}