/* レスポンシブデザイン */
/* solitaire.html で後段に読まれるため、!important なしで上書きが有効（後ろは mobile.css・comments.css） */

/* プール行の最小高さ（デスクトップ向け: 現行レイアウトで有効） */
@media (min-width: 1000px) {
  #poolRow {
    min-height: calc(var(--slot-height) * 1.0);
  }
  #poolRow2 {
    min-height: calc(var(--slot-height) * 1.0);
  }
}

/* 注: サイドバーの自動開閉・slot-width のレスポンシブ算出は
       JS側 (main.js / sidebar-toggle.js) で matchMedia を用いて処理する。 */


/* ════════════════════════════════════════════════════
   縦持ちスマホ (<768px 横幅)
   ════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 横スクロール防止 ── */
  /* .sol-main には overflow-x を指定しない: プール(.pool)の独立スクロールを妨げないため。
     フィールド盤面の横溢れは JS の fitFieldToViewport() が計算で防ぐ。 */
  #mainContainer {
    overflow-x: hidden;
    /* カード詳細パネル分の左パディングオフセットを解除 */
    padding-left: 4px;
    padding-right: 4px;
  }

  /* ── デッキ/EXデッキ: 横スクロール可能なカードプール ── */
  /* カードが画面外にはみ出す場合に横スワイプで閲覧・選択できるようにする */
  .pool {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* iOS 慣性スクロール */
    overscroll-behavior-x: contain;   /* スクロール連鎖をプール内で止める */
  }
  /* プール行を折り返しなし・横並びに固定 */
  .pool .tier-row {
    flex-wrap: nowrap;
    min-width: max-content;
  }
  .sol-field-area {
    padding: 0 2px 4px 2px;
  }

  /* ── カード詳細パネルは非表示（PC向けホバー機能） ── */
  .sol-cip-col,
  #cipToggle {
    display: none;
  }

  /* ── 墓地/除外を縦積みにして横幅を節約 ── */
  /* row のままだと 2 × 1.2 × slot-width ≈ 138px 必要 → 縦にして節約 */
  .side-slots-container {
    flex-direction: column;
  }
  /* column 配置では align-self:stretch が横方向にしか効かないため、
     flex:1 で各エリアが side-slots-container の高さを均等に占有するようにする */
  .side-slots-container .sol-side-area {
    flex: 1;
    min-height: calc(var(--slot-height) + 32px); /* label + slot の最低高さ保証 */
    max-height: none;    /* モバイルはフィールドと縦並びなので高さ制限不要 */
    overflow: visible;
  }

  /* ── タッチドラッグ中のカード表示 ── */
  /* 指の上方に浮かせて「持ち上げ感」を演出し、ドロップ先の視認性を確保 */
  .touch-dragging {
    transform: scale(1.12);
    transform-origin: center bottom;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  }

  /* 盤面スロットの最小幅制約を解除（slot-width が小さくなるため） */
  #mainContainer,
  .pool {
    min-width: 0;
  }

  /* ── 手札 / EXデッキ のスペース配分 ── */
  /* 手札エリアが広すぎるため 3:2 で分割し EXデッキに十分な幅を確保 */
  .sol-hand-area {
    flex: 3 1 0;
    min-width: 0;
  }
  #imagePool2 {
    flex: 2 1 0;
    min-width: 0;
  }
  /* 手札の center-slot: 固定幅 (6×slot-width) を解除して親の幅に追従。
     カードが溢れたときは横スクロールで全カードを閲覧できるようにする。 */
  .sol-hand-area .center-slot {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* ── リプレイバー: スマホ視聴向け再構成 ── */

  /* 下部に固定して常に操作できるようにする */
  #replayBarContainer.replay-bar {
    position: sticky;
    bottom: 0;
    z-index: 40;
    border-radius: 8px 8px 0 0;
    padding: 6px 8px;
    gap: 6px;
  }

  /* タップ領域を 44px 以上に拡大 (Apple/Material ガイドライン) */
  .replay-btn {
    min-height: 44px;
    min-width: 44px;
    font-size: 0.95rem;
    padding: 8px 14px;
  }
  /* 再生ボタン（solitaire-brand.css の .replay-btn.replay-play-btn）は詳細度が高く上の指定に勝つため、
     ここでも同じ大きさを指定して、隣より小さく見えないようにする（2026-10-16） */
  .replay-btn.replay-play-btn { font-size: 0.95rem; padding: 8px 14px; }

  /* 行1: スライダー (幅いっぱい) + カウンター */
  #replaySlider {
    order: 1;
    flex: 1 1 calc(100% - 52px);
    height: 28px;
  }
  #replayCounter {
    order: 2;
    flex: 0 0 auto;
    font-size: 0.9rem;
    align-self: center;
    white-space: nowrap;
  }

  /* 行2: 前 / 取消 / 再生 / 次  (均等配置) */
  #replayBack  { order: 3; flex: 1 1 0; }
  #replayUndo  { order: 4; flex: 1 1 0; }
  #replayPlay  { order: 5; flex: 2 1 0; } /* 再生を目立たせる */
  #replayFwd   { order: 6; flex: 1 1 0; }

  /* 編集系コントロールはモバイルで非表示（視聴に特化） */
  #replayExport,
  #replayShare,
  #replayShareX,
  #pcShareSheetOpen,
  #pcRangeClearBtn,
  #pcRecordBtn {
    display: none;
  }
  /* 整理③でボタンを「見る／戻す／残す」のまとまり（.replay-group）に入れたため、
     ここでは囲みを無いものとして扱い、上の order 指定を従来どおり効かせる */
  #replayBarContainer .replay-group {
    display: contents;
  }

  /* ════════════════════════════════════════════════════
     縦持ちスマホのみ（フェーズ1・設計書 §8.1）
     横向きスマホ（後発の @media landscape ブロック）には一切影響しない。
     新規UI部品（下部バー・縦タブ・重ね表示・アクションシート・詳細パネル・
     簡易メニュー）の見た目は mobile.css が担当し、ここではレイアウトの骨格
     （1カラム化・並べ替え・非表示化）のみを扱う。
     ════════════════════════════════════════════════════ */
  @media (orientation: portrait) {

    /* ── 盤面列を縦1カラムのflexコンテナ化し、order で並べ替える ──
       .main-content / #mainContainer / .center-row を display:contents にして
       墓地/除外(.side-slots-container)・手札(.sol-hand-area)・EX(#imagePool2)を
       DOM移動なしに .sol-field-area の直接の flex 子として扱う（制約2）。
       確認結果: .custom-layout の自然高さ（盤面3段）は .side-slots-container
       （横並び2分割・重ね表示で1行分）より常に大きいため、.main-content の
       align-items:stretch が外れても .custom-layout の offsetHeight
       （fitFieldToViewport の --field-height 計測元）は変化しない。
       .sol-field-area の getBoundingClientRect()（correctSlotWidthByMeasurement
       が使う）も実際のレンダリング結果を見るため display:contents の影響を受けない。
       → 新コンテナ方式への切替は不要と判断（display:contents を採用）。 */
    .sol-field-area {
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      gap: var(--gap);
      /* 下部固定バー(52px)分の余白は padding では確保しない。
         correctSlotWidthByMeasurement に bottomReserve=52 を渡し（main.js §8.2）、
         .sol-field-area の下端自体が (innerHeight-52) を超えないよう slotW 側を
         縮小して収める設計（padding を足すと二重計算になり、必要以上に縮んでしまう）。 */
    }
    #mainContainer,
    .main-content,
    .center-row {
      display: contents;
    }

    .custom-layout         { order: 1; }
    .sol-hand-area         { order: 2; flex: none; width: 100%; margin-left: 0; }
    /* A-2: 墓地｜除外の左右2分割をやめ、各1行・全幅の縦積みにする（縦タブ拡張は廃止） */
    .side-slots-container  { order: 3; flex-direction: column; }
    #imagePool2             { order: 4; flex: none; width: 100%; margin-top: 0; }
    #replayBarContainer     { order: 6; }

    /* A-2: 767pxブロック(21行目〜)の .sol-side-area { flex:1 } は横2分割用の均等配分だったため、
       縦積みでは打ち消して各1行の自然高さにする（min-heightはB-8のまま活かす）。
       align-self:stretch（solitaire-brand.css）は親のクロス軸（columnなら横）に効くため、
       width指定なしでも全幅になるが、意図を明確にするため明示する。 */
    .side-slots-container .sol-side-area {
      flex: none;
      width: 100%;
    }

    /* B-2: .sol-hand-area / #imagePool2 は padding+border を持つため、width:100% と
       box-sizing:content-box(既定)の組み合わせで実際の幅が100%を超えて右端が画面外に出ていた。
       .side-slots-container 自体は無指定だが、子の .sol-side-area も同じ理由でチェック対象に含める。 */
    .sol-hand-area,
    #imagePool2,
    .side-slots-container .sol-side-area {
      box-sizing: border-box;
    }

    /* 手札center-slotの固定min-width(400px)を解除（小さいslot-widthでも溢れないように） */
    .sol-hand-area .center-slot {
      min-width: 0;
    }

    /* B-8: 縦タブ方式ではラベルがカード列と横並びのため、767pxブロックの
       min-height: calc(var(--slot-height) + 32px)（ラベル行の高さを見込んだ値）は過大。
       手札行と同じ「カード高＋枠余白」に揃える（2026-09-03 追加修正で padding 6px→2px に
       伴い枠余白 10px→6px に更新。padding上下2px×2＋border上下2px＝6px）。 */
    .side-slots-container .sol-side-area {
      min-height: calc(var(--slot-height) + 6px);
    }

    /* デッキ行は非表示（中身の #poolRow は残す。既存のドロー処理・リプレイ処理を変えない） */
    #imagePool { display: none; }

    /* 左右パネルと端のトグルボタンはスマホでは非表示。
       デッキ読込は #solSidebar 自体をボトムシート化して流用する（制約7）。
       左右トグルボタンの非表示は sidebar-toggle.js が isPhone && !isLandscape 判定で行う。 */
    #solSidebar,
    #solRightPanel {
      display: none;
    }
    /* ボトムシートとして開いた時だけ表示に戻す（sol-sheet-open は mobile-ui.js が付与） */
    #solSidebar.sol-sheet-open {
      display: block;
    }

    /* フェーズ3で追加・タスクB-1で経路のみ廃止: 上の767pxブロックにある編集系コントロールの
       display:none を打ち消す指定。#replayBarContainer 自体は mobile.css で縦向きスマホでは
       常時 display:none のため、この打ち消し自体は現在どの経路でも画面に効果を及ぼさない
       （旧オーバーレイ .sol-mobile-fullbar-open は廃止済み）。実害が無いため据え置き
       （削除するとしても本ブロックのみで完結する）。 */
    #replayExport,
    #replayShare,
    #replayShareX {
      display: revert;
    }
  }
}


/* ════════════════════════════════════════════════════
   横向きスマホ (landscape + 高さ < 500px)
   ※ iPhone SE landscape (667×375) では上の縦向きブロックも適用されるが、
     このブロックが後発のため side-slots-container と sol-field-area を上書き
   ════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 499px) {

  /* ── 横スクロール防止 (sol-main は指定しない: プールスクロールを妨げないため) ── */
  #mainContainer {
    overflow-x: hidden;
    padding-left: 4px;
    padding-right: 4px;
  }

  /* カード詳細パネルは非表示 */
  .sol-cip-col,
  #cipToggle {
    display: none;
  }

  /* 盤面スロットの最小幅制約を解除 */
  #mainContainer,
  .pool {
    min-width: 0;
  }

  /* ── 縦向きブロックの上書き: 横向きは side-slots-container を横並びに戻す ── */
  /* 横幅に余裕があるため row を維持（JS 幅計算も 8.4 列で対応済み） */
  .side-slots-container {
    flex-direction: row;
  }

  /* sol-field-area パディングも元の値に戻す */
  .sol-field-area {
    padding: 0 6px 6px 10px;
  }

  /* ── リプレイバー: 下部固定 + 編集系非表示 ── */
  #replayBarContainer.replay-bar {
    position: sticky;
    bottom: 0;
    z-index: 40;
  }

  /* 編集系は非表示 */
  #replayExport,
  #replayShare,
  #replayShareX,
  #pcShareSheetOpen,
  #pcRangeClearBtn,
  #pcRecordBtn {
    display: none;
  }
  /* 整理③でボタンを「見る／戻す／残す」のまとまり（.replay-group）に入れたため、
     ここでは囲みを無いものとして扱い、上の order 指定を従来どおり効かせる */
  #replayBarContainer .replay-group {
    display: contents;
  }
}

/* ════════════════════════════════════════════════════
   A-3/Low-8: 「縦向き推奨」帯 専用メディアクエリ
   横向きスマホ用レイアウトブロック（@media (orientation:landscape) and (max-height:499px)）
   とは別に、max-width:1023px を追加した専用クエリに閉じる。
   これにより 1400×400 のような PC の横長ウィンドウ（幅は広いが高さを詰めたケース）では
   帯を出さない。viewport.js の MOBILE_LANDSCAPE_QUERY と条件を完全一致させること。
   ════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 499px) and (max-width: 1023px) {
  .sol-landscape-hint {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    background: var(--accent, #4a7cff);
    color: #fff;
    font-size: 0.76rem;
    font-family: var(--font);
    box-sizing: border-box;
  }
  .sol-landscape-hint[hidden] { display: none; }
  .sol-landscape-hint-close {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
  }
}