/* =========================================================
   大きな画面（フルHDを全画面表示したときなど）の拡大
   ★Web公開版・オフライン版で共通。

   ★このファイルは必ず「いちばん最後」に読み込むこと。
     battle.css / solo.css / characters.css にも同じ要素への指定があり
     詳細度が同じなので、後に読んだほうが勝つ。
     実測: theme.css に置いたときは battle.css の
     #battle-title-screen{max-width:1040px} に負けて枠が広がらなかった。

   目的: 大きなモニタで見たときに、タイトルやメニューが画面の
        真ん中で小さくまとまって見えるのを解消する。

   ★適用条件を「幅も高さも十分にある画面」に限っているのは、
     ノートPCの狭い画面で大きくしすぎると逆に収まらなくなるため。
     実測: 1366x768 に当てるとタイトルが48pxはみ出して縦スクロールが出た。
     そのため幅1500px以上かつ高さ860px以上に絞っている。
     ここを緩めるときは、必ず 1366x768 で縦スクロールが出ないか確認すること。
   ========================================================= */

@media (min-width: 1500px) and (min-height: 860px) {
  /* ---- タイトル画面の枠を広げる ---------------------------
     対戦(#battle-title-screen)・ソロ(#title-screen)とも
     もとは max-width:1040px。全画面だと左右が余りすぎる。 */
  #battle-title-screen,
  #title-screen {
    max-width: min(1560px, 88vw);
    gap: var(--space-5);
  }

  /* #app 側の上限も広げないと、上の max-width が効かない */
  #app {
    max-width: min(1660px, 94vw);
  }

  /* ---- ロゴ ---------------------------------------------
     上段の画像と下段の文字は必ずセットで拡大すること。
     画像だけ大きくすると、下の「路上整備ゲーム」が相対的に
     小さく見えて不釣り合いになる。 */
  .game-logo__brand-img {
    width: min(88vw, 720px);
  }

  /* theme.css の 4rem(64px) を上書きする。
     ロゴ画像の拡大率(420→720px)に合わせて 1.4 倍にしている。 */
  .game-logo__title {
    font-size: 5.6rem;
    -webkit-text-stroke-width: 5px;
  }

  /* ---- 右側の操作パネル ----------------------------------
     ★縦の余白は欲張らないこと。Web公開版はシェアボタンがあるぶん
       オフライン版よりパネルが100pxほど高い。space-5/space-4 にすると
       1600x900 で16pxはみ出して縦スクロールが出た。 */
  .title-panel {
    padding: var(--space-4) var(--space-4);
    gap: var(--space-3);
  }

  /* ソロは中身が少なくカードが短くなりがちなので、下限を引き上げる。
     左カラムと同じ高さになるため、キャラクターもこれに合わせて育つ。 */
  #title-screen .title-panel {
    min-height: min(72vh, 760px);
  }

  .game-tagline {
    font-size: 1.24rem;
    line-height: 1.7;
  }

  /* ---- ボタン類 ------------------------------------------ */
  .btn {
    font-size: 1.16rem;
    padding: 14px 26px;
  }

  .btn--big {
    padding-block: 19px;
    font-size: 1.34rem;
  }

  .btn.sub-link {
    font-size: 1.05rem;
  }

  /* パネルが広くなったぶん、中のボタン列も広げないと
     真ん中に細い列が1本あるだけの間延びした見た目になる。
     もとはどちらも max-width:340px。 */
  .title-buttons,
  .sub-links {
    max-width: 480px;
  }

  /* ---- むずかしさセレクター ------------------------------- */
  .difficulty-selector {
    max-width: 480px;
    padding: var(--space-4);
  }

  .difficulty-label {
    font-size: 1.12rem;
  }

  .difficulty-btn {
    font-size: 1.04rem;
    padding: var(--space-3) var(--space-2);
  }

  .difficulty-icon {
    font-size: 1.85rem;
  }

  /* ---- あそびかたパネル（ソロ） --------------------------- */
  .howto h2 {
    font-size: 1.4rem;
  }

  .howto li {
    font-size: 1.05rem;
    line-height: 1.7;
  }

  /* ---- けっか画面 ---------------------------------------- */
  .game-title {
    font-size: 2.4rem;
  }

  .result-winner {
    font-size: 2.6rem;
  }

  .result-stats {
    font-size: 1.2rem;
  }

  /* ---- キャラクター紹介ページ ----------------------------- */
  .catalog-page {
    max-width: min(1500px, 92vw);
  }

  .catalog-header h1 {
    font-size: 3rem;
  }

  .catalog-header p {
    font-size: 1.2rem;
  }

  .chain-note p {
    font-size: 1.16rem;
  }

  /* ★カード自体のサイズは characters.css の「7体を1列」ブロックに任せる。
     ここで grid や画像サイズを上書きすると1列に収まらなくなり、
     フルHDでフッターが画面外に出てしまう。 */

  /* ---- おはなし ------------------------------------------
     ★.story-box だけ広げても効かない。親の .screen が max-width:780px で
       止めているので、#story-screen 側もあわせて広げること。 */
  #story-screen {
    max-width: min(1100px, 88vw);
  }

  .story-box {
    max-width: min(1100px, 88vw);
  }
}