/**
 * styles/viewport.css
 *
 * PC/スマホで再生領域のサイズを4段階に切り替えるための共通CSS変数。
 * body の viewport-{mobile|tablet|desktop|wide} class（core/GameViewport.js が付与）に
 * 応じて、各画面の「プレイ領域」を決める基準値を CSS変数として再定義する。
 *
 *   --play-root-max-width : #game-root（ヘッダー・メッセージ欄を含む外枠）の最大幅
 *   --play-area-max-width : #inline-game-area / #js-game-root（ゲーム本体）の最大幅
 *   --game-board-scale    : 各ゲームの盤面を拡大したい場合に参照できる倍率（任意・現状未使用）
 *
 * mobile は既定値（:root）のままで、現状の見た目を変えない。
 * tablet/desktop/wide で段階的に広げる。
 *
 * ゲームごとの例外は body.game-{id}.viewport-{tier} で --play-area-max-width のみを
 * 上書きする（個別ゲームのCSS自体は変更せず、外枠の幅だけを調整する）。
 */

:root {
  --play-root-max-width: 420px;
  --play-area-max-width: 370px;
  --game-board-scale: 1;

  /* ─── 高さベースの予算（PCでも盤面が1画面に収まるようにするための基準値） ───
     --play-header-height    : #game-root padding-top(16) + .screen-header(44) + #game-message(39)
                                の実測合計(≈99px)に少し余裕を足した値。
     --play-bottom-safe-area : #game-root の padding-bottom(180px, games.css)と同じ値。
                                キャラクター（.char-actor / 吹き出し）のための余白で、
                                ここを実際の padding-bottom と揃えないと高さ予算が
                                実態より緩くなり、PCで再びオーバーフローする。
     --play-available-height : 上記2つを差し引いた「盤面が使える高さ」の目安。
                                各ゲーム固有CSSでは、ここからさらにそのゲーム自身の
                                ヘッダー/ボタン等の高さを引いて盤面サイズの上限に使う。 */
  --play-header-height: 120px;
  --play-bottom-safe-area: 180px;
  --play-available-height: calc(100vh - var(--play-header-height) - var(--play-bottom-safe-area));
}

body.viewport-tablet {
  --play-root-max-width: 720px;
  --play-area-max-width: 620px;
  --game-board-scale: 1.08;
}

body.viewport-desktop {
  --play-root-max-width: 960px;
  --play-area-max-width: 760px;
  --game-board-scale: 1.18;
}

body.viewport-wide {
  --play-root-max-width: 1120px;
  --play-area-max-width: 900px;
  --game-board-scale: 1.28;
}

/* ─── ゲーム別の例外 ───────────────────────────────────────────
   各ゲーム固有の事情に合わせて --play-area-max-width のみを上書きする。
   ゲーム本体のCSS（games/*/game.css 等）は変更しない。 */

/* パズル: .pz-play-area の上限(380px)も同じ変数を参照するように変更済みのため、
   ここを広げると盤面自体も広がる。 */
body.game-puzzle.viewport-desktop {
  --play-area-max-width: 760px;
}

/* 福笑い: .fw-app が自前で max-width:900px を持つため、外枠がそれより
   狭くならないように確保するだけ（fw-app自体のCSSは変更しない）。 */
body.game-fukuwarai.viewport-desktop {
  --play-area-max-width: 960px;
}

/* 神経衰弱(memory-card): 4列カードグリッドが大きすぎると崩れやすいため、
   汎用値(760px)より控えめに広げる。 */
body.game-memory-card.viewport-desktop {
  --play-area-max-width: 560px;
}

body.game-memory-card.viewport-tablet {
  --play-area-max-width: 640px;
}

/* ─── 高さも考慮した盤面サイズ（PCでスクロールが出ないようにする） ───────────
   横幅だけを var(--play-area-max-width) で広げると、PCでは縦方向の余白を
   考えずに正方形/グリッドが巨大化し、#screen-play(overflow-y:auto) 内で
   縦スクロールが必要になってしまう（パズル・神経衰弱で発生していた問題）。
   ここでは「横幅の上限」と「高さから逆算した上限」を min() で比較し、
   小さい方を最終サイズに使う。mobile（:root既定）は変更しないため、
   tablet/desktop/wide にのみ適用する。 */

/* パズル: .pz-play-area は正方形（.pz-board-wrap が aspect-ratio:1/1）なので、
   高さ予算からそのまま「使える幅」を出せる。
   98px = .pz-root の padding-top(8) + .pz-header(60+margin10) + padding-bottom(20)
          という、パズル自身がさらに必要とする縦の余白。 */
body.game-puzzle.viewport-tablet .pz-play-area,
body.game-puzzle.viewport-desktop .pz-play-area,
body.game-puzzle.viewport-wide .pz-play-area {
  width: min(
    calc(100vw - 16px),
    calc(var(--play-available-height, calc(100vh - 300px)) - 98px),
    var(--play-area-max-width, 380px)
  );
}

/* 神経衰弱(memory-card): #card-grid は4列固定で、もっとも行数が多い
   「むずかしい」(12組=24枚=6行)でも縦に収まるよう、高さ予算から
   逆算した幅を上限に加える。
     行の高さ計算: gridHeight = 6×cell + 5×gap(9)
     幅への変換  : gridWidth  = 4×cell + 3×gap(9)
                 → gridWidth ≦ (availableHeight − 90px) × 2/3 − 3px
   90px = #moves-display(約28px) + .btn-row(約58px) という神経衰弱自身の
   グリッド外の縦の高さ。 */
body.game-memory-card.viewport-tablet #card-grid,
body.game-memory-card.viewport-desktop #card-grid,
body.game-memory-card.viewport-wide #card-grid {
  max-width: min(
    var(--play-area-max-width, 370px),
    calc(((var(--play-available-height, calc(100vh - 300px)) - 90px) * 2 / 3) - 3px)
  );
}

body.game-memory-card.viewport-tablet #card-grid {
  max-width: min(
    var(--play-area-max-width, 370px),
    calc(((var(--play-available-height, calc(100vh - 300px)) - 48px) * 2 / 3) - 3px)
  );
}

@media (pointer: coarse) and (max-width: 1366px) {
  body.game-memory-card.viewport-desktop #card-grid {
    max-width: min(
      var(--play-area-max-width, 370px),
      calc(((100vh - var(--play-header-height, 120px) - 64px) * 2 / 3) - 3px)
    );
  }
}