/* PCの横長画面だけの見た目。mobile.css のあとに読み込む。
 * device-layout.js が desktop と判定し、かつ窓の横幅が 1120px 以上のときだけ効く。
 * ゲームの状態は app.js のまま。ここで変えるのは並べ方だけ。 */

/* ── ホーム：左に見出し、右にステージ選択。1画面に収めてスクロールさせない ── */
@media (min-width: 1120px) {
  html[data-device-layout="desktop"] body:has(.game-layout.stage-selecting) .page-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(560px, 700px);
    grid-template-areas:
      "top top"
      "hero game"
      "foot foot";
    column-gap: 28px;
    align-items: start;
  }

  html[data-device-layout="desktop"] body:has(.game-layout.stage-selecting) .topbar {
    grid-area: top;
  }

  html[data-device-layout="desktop"] body:has(.game-layout.stage-selecting) .hero {
    grid-area: hero;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-height: 0;
    padding: 30px 2% 0 4%;
  }

  html[data-device-layout="desktop"] body:has(.game-layout.stage-selecting) .hero h1 {
    font-size: clamp(34px, 3.4vw, 54px);
  }

  html[data-device-layout="desktop"] body:has(.game-layout.stage-selecting) .hero-alpacas {
    min-height: 210px;
    margin-top: 12px;
  }

  html[data-device-layout="desktop"] body:has(.game-layout.stage-selecting) .hero-alpaca-one { right: 22%; }
  html[data-device-layout="desktop"] body:has(.game-layout.stage-selecting) .hero-alpaca-two { right: 50%; }
  html[data-device-layout="desktop"] body:has(.game-layout.stage-selecting) .spark-two { right: 64%; }

  html[data-device-layout="desktop"] .game-layout.stage-selecting {
    grid-area: game;
    max-width: none;
    margin: 18px 0 0;
  }

  html[data-device-layout="desktop"] body:has(.game-layout.stage-selecting) .site-footer {
    grid-area: foot;
  }
}

/* ── ステージ中：盤面を画面の高さに合わせ、3つの札を横一列に並べる ──
 * 左＝牧場の仲間、まん中＝盤面（横向き 17列13行）、右＝WAVEボタン・選んだ子の札・記録。
 * 盤面の横幅は「画面の高さから、盤の上下にあるもの（HUD・見出し・余白）を引いた高さ」
 * を 17:13 に広げて決める。だから縦にスクロールしなくても盤面ぜんぶが見える。 */
@media (min-width: 1120px) {
  html[data-device-layout="desktop"] body:has(.game-layout[data-phase]:not([data-phase="stageSelect"])) .page-shell {
    width: min(1800px, calc(100% - 10px));
    padding-top: 6px;
    padding-bottom: 8px;
  }

  /* 盤面の上下にあるものの高さ。ページの余白＋札の余白＋HUD＋見出し（124px）に、
   * 初回の練習で盤面の上に出る案内（tutorial-coach）の実測の高さ（--board-coach、
   * app.js の syncBoardChrome が渡す）を足す。
   * 左右の列は幅を固定し、余った横幅はぜんぶ盤面に回す（画面の高さが許すぶんまで）。 */
  html[data-device-layout="desktop"] .game-layout[data-phase]:not([data-phase="stageSelect"]) {
    --board-chrome: calc(124px + var(--board-coach, 0px));
    grid-template-columns:
      250px
      minmax(520px, calc((100svh - var(--board-chrome)) * 17 / 13 + 22px))
      250px;
    justify-content: center;
    gap: 14px;
  }

  html[data-device-layout="desktop"] .game-layout[data-phase]:not([data-phase="stageSelect"]) .board-wrap {
    --board-height: calc(100svh - var(--board-chrome));
    min-height: 0;
  }

  /* 右の列：上からWAVE（問題）ボタン、選んだ子の札、いちばん下に記録。 */
  html[data-device-layout="desktop"] .game-layout[data-phase]:not([data-phase="stageSelect"]) .learning-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: var(--stage-panel-height, auto);
    min-height: 0;
    padding: 12px;
    overflow: hidden;
  }

  /* 狭い列なので2つのボタンは縦に積む。主役のWAVE（問題）ボタンを上に。 */
  html[data-device-layout="desktop"] .game-layout[data-phase]:not([data-phase="stageSelect"]) .stage-actions {
    order: 1;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0;
  }

  html[data-device-layout="desktop"] .game-layout[data-phase]:not([data-phase="stageSelect"]) .stage-actions #study-button {
    order: -1;
    padding: 14px 12px;
    font-size: 15px;
  }

  html[data-device-layout="desktop"] .game-layout[data-phase]:not([data-phase="stageSelect"]) .stage-actions #call-alpaca-button {
    padding: 9px 12px;
    font-size: 12px;
  }

  html[data-device-layout="desktop"] .game-layout[data-phase]:not([data-phase="stageSelect"]) .learning-panel .battle-bottom {
    order: 2;
    margin: 0;
    min-height: 0;
    overflow: auto;
  }

  html[data-device-layout="desktop"] .game-layout[data-phase]:not([data-phase="stageSelect"]) .learning-panel .selected-card {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid #cfe0bd;
  }

  html[data-device-layout="desktop"] .game-layout[data-phase]:not([data-phase="stageSelect"]) .learning-panel .selected-card > div {
    flex: 1 1 140px;
    min-width: 0;
  }

  html[data-device-layout="desktop"] .game-layout[data-phase]:not([data-phase="stageSelect"]) .learning-panel .selected-card #upgrade-button {
    flex: 1 1 100%;
    padding: 9px 10px;
    font-size: 12px;
  }

  html[data-device-layout="desktop"] .game-layout[data-phase]:not([data-phase="stageSelect"]) .learning-panel .mini-stats {
    order: 3;
    margin-top: auto;
  }
}