/* =====================================================
   phase-board-landscape.css
   Purpose : 横向きスマホで3行×6枚（約110px）カード配置
   Author  : Asunaro仕様
   ===================================================== */

/* ---------- 横向きレイアウト専用 ---------- */
@media screen and (max-width: 900px) and (orientation: landscape) {

  /* === ゲームボード全体 === */
  #board {
    display: grid;
    grid-template-columns: repeat(6, minmax(110px, 1fr));
    grid-auto-rows: 110px;
    gap: 8px;
    justify-content: center;
    padding: 8px 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* === 各カード（汎用）=== */
  #board .card,
  #board .pair-card {
    width: 110px;
    height: 110px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px);
    scroll-snap-align: center;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  }

  /* === ホバー演出 === */
  #board .card:hover,
  #board .pair-card:hover {
    transform: scale(1.04);
  }

  /* === タイトルバー（Phaseタイトルなど）=== */
  .topbar {
    padding: 6px 10px;
    font-size: 14px;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* === 戻るボタン === */
  .topbar .back-btn {
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
    border: 0;
    color: #fff;
    cursor: pointer;
  }

  /* === PairsセレクトUI === */
  #pairs {
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
  }

  /* === 全体背景に対して余白を確保 === */
  body, html {
    overflow-x: hidden;
    background-size: cover;
    background-position: center;
  }
}
@media screen and (max-width: 1100px) and (orientation: landscape) {
  #board{
    --card-size:110px;
    grid-template-columns: repeat(6, minmax(110px, 1fr)) !important;
    grid-auto-rows:110px !important;
    gap:8px; justify-content:center; padding:8px 12px;
    overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  }
  #board .card, #board .pair-card{
    width:110px !important; height:110px !important; border-radius:10px;
  }
}

/* === 横向きスマホ時：ヘッダーをタイトに === */
@media (max-width: 1100px) and (orientation: landscape) {
  /* ヘッダー（class名の揺れを拾う）*/
  :where(.topbar, .hero, header[role="banner"], .header){
    padding: 6px 10px !important;   /* 上下を詰める */
    min-height: 48px !important;
    gap: 8px !important;
  }
  /* タイトル */
  :where(.topbar, .hero, header[role="banner"], .header) h1{
    margin: 0 0 4px !important;
    font-size: clamp(18px, 2.6vw, 24px) !important;
    line-height: 1.15 !important;
  }
  /* サブタイトル等 */
  :where(.topbar, .hero, .header) .subtitle{
    margin: 0 !important;
    font-size: 12px !important;
    opacity: .9;
  }
  /* 右側アクションの余白 */
  :where(.topbar, .hero, .header) .actions{
    gap: 8px !important;
  }
  /* 丸ボタン（アルバム切替／クリア状態リセット） */
  :where(.topbar, .hero, .header) .pill,
  :where(.topbar, .hero, .header) button{
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 640px) {
  /* 横スクロールで全枚数を見せる */
  #album.album--mobile-scroll,
  #album.album--mobile-scroll .album-v2,
  #album.album--mobile-scroll .album-grid,
  #album.album--mobile-scroll .albumGrid {
    /* スクロールさせる要素（親でも子でもOK） */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* 実際に“横に並べる”のはグリッド本体 */
  #album.album--mobile-scroll .album-v2,
  #album.album--mobile-scroll .album-grid,
  #album.album--mobile-scroll .albumGrid {
    display: grid;
    grid-auto-flow: column;                 /* 横方向に流す */
    grid-auto-columns: minmax(110px, 1fr);  /* 各サムネ幅（端末に応じて調整可） */
    gap: 8px;
    padding: 8px 4px;
  }

  #album.album--mobile-scroll img {
    width: 110px;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
  }

  /* 見切れ防止の余白（任意） */
  #album.album--mobile-scroll .album-title { margin-bottom: 6px; }
}