/* ScrambleDeck ドラフトモード画面スタイル。
   カードの見た目(.card と .layer-*)は battle.css を、カード一覧グリッド(.deck-pool-grid)・
   デッキ行(.deck-row)・確認ダイアログ(.deck-confirm-*)は deck.css をそのまま流用する。
   ここで定義するのはドラフト固有の部品だけ：ピック盤面・局面の切り替え・ボタン・結果表示。 */

/* 局面は1ページの中で hidden 属性を付け外しして切り替える。
   セクション側で display を持つと hidden が効かなくなるため、明示的に打ち消しておく。 */
.draft-phase[hidden] { display: none; }
.draft-phase { padding: clamp(8px, 1.6vh, 16px) clamp(12px, 3vw, 28px); }
/* ピック局面だけは左右の余白も盤面へ回す（カード1枚ぶんの幅がここから出る）。 */
#pickPhase { padding: 6px clamp(8px, 2vw, 16px); }

/* 上部バーはこの画面では細くする。ピック盤面はカードの大きさを「残り高さ」から逆算するので、
   バーが高いぶんだけカードが小さくなる（横持ちのスマホでは数pxが効く）。 */
.draft-page .deck-topbar { padding: 5px clamp(10px, 2vw, 20px); }
.draft-page .deck-title { font-size: clamp(13px, 2.2vw, 18px); }

/* 画面名は上部バーの中央に置く。左右のボタンは幅が違うので、flexの流れに任せると中央から
   ずれる（狭い方に寄る）。バー自体を基準に絶対配置して、左右の幅に依らず画面の中央へ固定する。
   クリックはボタンへ通したいので pointer-events は切る（見出しは押す対象ではない）。 */
.draft-page .deck-topbar { position: sticky; } /* 絶対配置の基準（sticky＝位置指定済みなので基準になる） */
.draft-page .deck-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 50%;
  text-align: center;
  pointer-events: none;
}

/* 上部バーの在庫は「オプション・戻る・放棄」の3つ（画面名は絶対配置でこの流れから外れている）。
   space-between のままだと3つが等間隔に散り、戻るがバーの中央＝画面名の上へ来てしまう。
   戻るに右側の余白を全部持たせて、オプションのすぐ右へ寄せ直す（並びは他の画面と同じ）。 */
.draft-page .deck-back { margin-right: auto; }

/* 放棄＝進行中のランを捨てる操作。主動線ではないので、上部バーの「‹ トップ」と同じ
   控えめな見た目（半透明の白）にそろえる。 */
.draft-abandon-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-light);
  font-size: clamp(12px, 2vw, 15px);
  white-space: nowrap;
  cursor: pointer;
}
.draft-abandon-btn:hover { background: rgba(255, 255, 255, 0.25); }

/* 各局面の1行説明。「今なにをする場面か」をここだけ読めば分かるようにする。
   背景画像の上に直接白文字を置くと明るい部分で読めなくなるため、薄暗い黒の帯を敷く。
   幅は文字ぶんだけ（fit-content）にして中央へ寄せる＝画面幅いっぱいの帯にはしない。
   全体をopacityで薄めると帯まで一緒に薄まるので、透過は文字色と背景色それぞれのalphaで持たせる。 */
.draft-lead {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(6px, 1.2vh, 12px);
  padding: clamp(4px, 0.8vh, 8px) clamp(10px, 2vw, 18px);
  border-radius: 999px;
  text-align: left; /* 折り返した時に行頭を揃える */
  font-size: clamp(12px, 2vw, 17px);
  color: var(--text-light);
  background: rgba(0, 0, 0, 0.55);
}

/* ── 2段組みレイアウト（ピック局面・勝利報酬局面で共用） ──────────────
   左＝主役（ピックの盤面／報酬の候補20枚）、右＝手持ちの確認用一覧。
   どちらの局面も「今なにを持っているか」を見ながら左を選ぶ、という同じ形をしている。
   狭い画面では右の一覧を下へ回す。
   3列グリッドにして左端に一覧と同じ幅の空き列を置く。右にだけ一覧があると主役が画面中央から
   一覧の幅の半分だけ左へずれるので、同じ幅の余白で釣り合わせて主役を画面中央に保つ。 */
.draft-split {
  --draft-side-w: clamp(130px, 17vw, 220px);
  display: grid;
  grid-template-columns: var(--draft-side-w) minmax(0, 1fr) var(--draft-side-w);
  align-items: start;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 20px);
}
.draft-split-main { grid-column: 2; }
/* ピック局面だけは左の空き列を持たない2列組み。盤面は横幅を使い切れるだけ使いたい
   （カード幅は縦から逆算するが、狭い画面では横が先に足りなくなる）ので、釣り合いのための
   空き列に130〜220pxを譲らない。盤面は中央ではなく残り幅の中で中央に置く。
   一覧側も少し細くして、そのぶんを盤面へ回す。 */
.draft-split-pick {
  --draft-side-w: clamp(120px, 15vw, 180px);
  align-items: stretch;                 /* .draft-split の start だと盤面が上端に張り付く */
  grid-template-columns: minmax(0, 1fr) var(--draft-side-w);
  grid-template-rows: minmax(0, 1fr);   /* 行を残り高さに固定＝右の欄が下へはみ出さない */
  flex: 1 1 auto;                       /* #pickPhase(縦flex)の残り高さをこの2段組みが受け取る */
  min-height: 0;
}
.draft-split-pick .draft-split-main { grid-column: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
.draft-split-pick .draft-side { grid-column: 2; }

.draft-side {
  grid-column: 3;
  width: 100%;
  padding: clamp(8px, 1.2vw, 14px);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
}
.draft-side-heading {
  margin: 0 0 6px;
  font-size: clamp(11px, 1.8vw, 15px);
  font-weight: bold;
  color: var(--text-light);
}
/* 一覧の高さは画面に合わせる。盤面と操作ボタンが縦を使い切るので、はみ出す分はこの欄の中だけで送る。
   deck.css の .deck-list は「溢れたら親パネルごとスクロール」前提（flex:none・スクロール無し）なので、
   ドラフト側は親にスクロールが無い＝max-height だけでは中身が外へはみ出して下のボタンに重なる。
   この欄では一覧自身をスクロールさせる。 */
.draft-side .deck-list { max-height: min(62vh, 460px); overflow-y: auto; }
/* ピック局面はこの欄に操作ボタンも入る。一覧が伸びてもボタンを画面内に残したいので、
   欄を縦flexにして「余った高さは一覧が取る／ボタン帯は縮まない」形にする。
   欄の高さは盤面と同じ予算（画面高 − 上部バーと余白の128px）で頭打ちにし、盤面より低い時は
   align-self:stretch で盤面の高さまで伸ばす＝ボタンは常に欄の最下部に見える。 */
.draft-side-pick {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.draft-side-pick .deck-list {
  flex: 1 1 auto;
  min-height: 0;                   /* flex子は既定で中身より縮まない。0にしないとスクロールにならない */
  max-height: none;                /* 高さは残り全部。固定の上限は使わない */
}
.draft-side-pick .draft-actions {
  flex: none;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(6px, 1vh, 10px);
}
.draft-side-pick .draft-btn {
  padding: clamp(6px, 1.2vh, 10px) clamp(6px, 1vw, 12px);
  font-size: clamp(11px, 1.5vw, 15px);
}
/* ピック局面の一覧は欄が細い（幅は盤面へ回している）。行を詰めて字を小さくし、
   カード名が「ファ…」で切れる範囲をできるだけ狭める。 */
.draft-side-pick .deck-row {
  gap: 5px;
  padding: 3px 6px;
  font-size: clamp(10px, 1.5vw, 13px);
}
.draft-side-pick .deck-list { gap: 3px; }

/* 取り消せない確認用の一覧なので、押せそうに見せない（deck.css の赤ホバー＝1枚戻す、を打ち消す）。 */
.draft-picked-row { cursor: default; }
.draft-picked-row:hover { background: rgba(255, 255, 255, 0.08); }

/* 狭い画面では右の一覧を下へ回す。ただしピック局面は除く：この画面はスマホ横持ち（幅860px未満・
   高さ400px前後）が主戦場で、縦積みにすると操作ボタンごと画面外へ落ちる。縦持ちは回転案内で
   丸ごと塞いでいるので、ピック局面に「幅が狭い＝縦に伸ばしてよい」場面は存在しない。 */
@media (max-width: 860px) {
  .draft-split:not(.draft-split-pick) { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .draft-split:not(.draft-split-pick) .draft-split-main { grid-column: 1; width: 100%; }
  .draft-split:not(.draft-split-pick) .draft-side { grid-column: 1; width: min(100%, 420px); }
  .draft-split:not(.draft-split-pick) .draft-side .deck-list { max-height: 30vh; }
}

/* ── ピック盤面 ─────────────────────────────────────────────────────
   横6枚の列が上下2本＝2行×6列。カードを押して列を選ぶので、外周に選択ボタンの帯は持たない。
   スクロールさせず1画面に収めたいので、カード幅は2つの上限の小さい方で決める：
     ・縦…上部バーと余白を引いた残り高さから逆算（カード2段(高さ=幅×7/5)＋段間のgapで 2.95×幅）
     ・横…右の一覧と余白を引いた残り幅を6等分
   縦持ちのスマホでは縦が、幅の狭い横持ちでは横が先に足りなくなるので、両方を見る必要がある。 */
.draft-board {
  --draft-card-w: min(
    calc((100dvh - 78px) / 2.95),
    calc((100vw - var(--draft-side-w) - 60px) / 6),
    160px);
  display: grid;
  grid-template-columns: repeat(6, var(--draft-card-w));
  justify-content: center;
  align-items: center;
  gap: clamp(4px, 0.8vh, 10px);
  /* 上下2段は「どちらか一方を取る」2択なので、段の切れ目は列間より広く取って別の塊に見せる。
     カード幅の逆算式(2.95)が段間に見込んでいる 0.15×幅 の枠内に収める。 */
  row-gap: calc(var(--draft-card-w) * 0.12);
  margin: 0 auto;
}

.draft-pick-card {
  width: 100%;
  cursor: pointer;                 /* 押す対象＝その列を選ぶ */
}
.draft-pick-card:hover { transform: none; filter: none; } /* 一覧なので battle.css の拡大ホバーは切る */
/* 選択中の一列。カードのPNGの形に沿って金色で光らせ、少し前に出す。
   選んだ時点で「この6枚が取れる」が確定するので、途中の色（青）は使わず1段階だけにする。 */
.draft-pick-card.selected {
  outline: none;                   /* battle.css の .card.selected の金縁は使わず、光だけで示す */
  filter: drop-shadow(0 0 5px #ffd76a) drop-shadow(0 0 14px #ffd76a) brightness(1.15);
  transform: scale(1.05);
  z-index: 2;
}
/* 選んでいない側の列は沈める。上下2本しかない＝「光っている方」より
   「暗くない方」の方が速く読めるので、選択中は必ず対比を付ける。 */
.draft-board.has-selection .draft-pick-card:not(.selected) { filter: brightness(0.5) saturate(0.7); }
/* カードデータが欠けた枠（保存データの互換ずれ）。落とさずに空きとして見せる。 */
.draft-pick-empty {
  aspect-ratio: 5 / 7;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

/* ── ボタン ─────────────────────────────────────────────────────────
   トップ画面の .title-btn と同じ位置づけの、この画面の共通ボタン。 */
.draft-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  margin-top: clamp(8px, 1.6vh, 16px);
}
/* 背景が画像なので、半透明の白だけでは文字も輪郭も沈む。タイトル画面の .title-btn と同じく
   「濃い塗り＋白フチ＋文字に影」の3点で、背景の絵柄によらず読めるようにする。 */
.draft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: clamp(7px, 1.4vh, 12px) clamp(14px, 2.6vw, 26px);
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--text-light);
  font-size: clamp(13px, 2.2vw, 18px);
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  cursor: pointer;
}
.draft-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.85);
  border-color: #fff;
}
/* 押せない状態も「そこにボタンがある」ことは見えていてほしいので、消えるほどは薄めない。 */
.draft-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.draft-btn-primary {
  background: var(--mine-color);
  border-color: #cfe8ff;
}
.draft-btn-primary:hover:not(:disabled) { background: #2f8fe6; }

/* デッキ欄の下に置く「対戦する」のように、枠いっぱいに広げたいボタン。 */
.draft-btn-block {
  display: block;
  width: 100%;
  margin-top: clamp(8px, 1.4vh, 14px);
}

/* 対戦ボタンの下に置く連勝メーター。1マス＝1勝で、左から埋まる。
   数字（N勝 / 5）も横に添えて、マスを数えなくても分かるようにする。 */
.draft-win-meter {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.2vw, 10px);
  margin-top: clamp(8px, 1.4vh, 14px);
}
.draft-win-cells {
  display: flex;
  flex: 1 1 auto;
  gap: 4px;
}
.draft-win-cell {
  flex: 1 1 0;
  height: clamp(16px, 2.6vh, 26px);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.45);
}
/* 勝った分のマス。完走の金色（.draft-result系）と同じ系統にして「積み上がっている」感じを出す。 */
.draft-win-cell.filled {
  border-color: #ffe9a8;
  background: linear-gradient(180deg, #ffe9a8, #f0b73f);
  box-shadow: 0 0 6px rgba(240, 183, 63, 0.6);
}
.draft-win-text {
  flex: 0 0 auto;
  font-size: clamp(17px, 2.9vw, 23px);
  font-weight: bold;
  white-space: nowrap;
}

/* ── デッキ構築・勝利報酬 ────────────────────────────────────────────
   deck.html と違いページ送りボタンを画面下に固定しないので、その分の下余白は要らない。 */
.draft-page .deck-layout { padding: 0; }
/* ドラフトの一覧は見開きバインダーを使わない（ページめくりが無く、全枚数をそのまま並べる）。
   deck.css の .deck-pool-grid は deck.js が --pool-cols/--pool-col-w を入れる前提の作りで、
   変数を入れない側では既定の5列×1fr＝ペイン幅の1/5まで上限なしに引き伸ばされてしまう。
   ここでは列数を幅なりに増やす自動詰めへ戻し、カード幅にも上限を掛ける。 */
/* 列は「上限で頭打ちの固定幅」にする。minmax(…, 1fr) だと余った幅が列に配られて上限(130px)を
   超えて伸び、そのぶん列数が減る（667px幅で3列＝30枚を見るのにスクロールが増える）。
   加えて低い画面では高さからも上限を掛ける：カード2段(高さ=幅×1.4)＋上部バー・説明行のぶんが
   入る大きさに抑えて、常に2段が同時に見えるようにする。 */
.draft-page .deck-pool-grid {
  --draft-pool-card-w: clamp(84px, min(12vw, calc((100dvh - 132px) / 2.9)), 130px);
  grid-template-columns: repeat(auto-fill, var(--draft-pool-card-w));
  justify-content: center;
  align-content: start;
}

/* body(.deck-page)は100dvh固定・overflow:hidden で、スクロールは中の各ペインが自前で持つ作り。
   ところが局面セクション(.draft-phase)はただのブロックなので、ここで高さの鎖が切れる：
   中の .deck-layout / .draft-split は高さが中身なりに伸び、自分は溢れていない＝スクロールバーを
   出さないまま、body の overflow:hidden に下端を切り落とされる（画面の低いスマホでプールや
   所持一覧に触れなくなる）。局面自体を「残り高さいっぱいの縦flex」にして鎖を繋ぎ直す。
   ピック局面は 100dvh 基準で別途詰めてあるので触らない。 */
#pickPhase:not([hidden]),
#buildPhase:not([hidden]),
#rewardPhase:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* 1行説明は高さを譲らない固定行。縮むのは下の本体だけ。 */
#buildPhase .draft-lead,
#rewardPhase .draft-lead { flex: none; }

/* 勝利報酬は相手のデッキ20枚を並べるだけ。1枚選ぶと即座に確定するので、選べることを見た目で示す。 */
.draft-reward-grid .pool-card { cursor: pointer; }
/* 報酬局面は2ペインを別々にスクロールさせず、2段組みの領域ごと1本でスクロールする。
   狭い画面では2ペインが縦に積まれる（下の860pxブレークポイント）ため、ペイン単位のスクロールだと
   入れ子のスクロール枠が縦に2つ並ぶ形になり、どちらを触っているのか分からなくなる。 */
#rewardPhase .draft-split {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* 上の1本スクロールに任せるので、一覧側の内側スクロール(.draft-side の既定)は解除する。 */
#rewardPhase .draft-side .deck-list { max-height: none; overflow-y: visible; }

/* ── 結果画面 ───────────────────────────────────────────────────────── */
.draft-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vh, 16px);
  min-height: 60vh;
}
/* 見出しと記録をまとめて乗せる板。背景画像の明暗に関わらず文字が読めるように、
   黒の半透明＋背後のぼかしで下地を作る。 */
.draft-result-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.2vh, 12px);
  padding: clamp(16px, 3vh, 32px) clamp(20px, 5vw, 56px);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  text-align: center;
}
.draft-result-headline {
  margin: 0;
  font-size: clamp(28px, 7vw, 64px);
  font-weight: bold;
  color: var(--text-light);
}
/* 完走（7連勝）だけ金色にして、脱落と一目で区別できるようにする。 */
.draft-result-headline.draft-result-clear {
  color: #ffd76a;
  text-shadow: 0 0 18px rgba(255, 215, 106, 0.6);
}
.draft-result-record {
  margin: 0;
  font-size: clamp(14px, 2.6vw, 22px);
  color: var(--text-light);
  opacity: 0.85;
}

/* 構築局面のデッキ欄は、ピック局面の欄(.draft-side-pick)と同じ「一覧だけスクロール／
   ボタン帯は最下部に固定」にする。deck.css の .deck-current はパネルごと1本スクロールで、
   20行の一覧の下にボタンが続く形なので、画面の低いスマホでは最下部まで送らないと
   「対戦する」が見えない（パッと見でどこにあるか分からない）。 */
#buildPhase .deck-current { overflow: hidden; }
#buildPhase .deck-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#buildPhase .draft-btn-block,
#buildPhase .draft-win-meter { flex: none; }