/* ============================================================
   deck-v2skin.css — デッキ編集画面をバトル画面(v2)のトンマナに統一するスキン
   deck.css の後に読み込み、#deck-screen スコープで上書きする。
   トークンは battle-v2.css と同一（ホロ発光パネル・金アクセント）。
   PC = 3カラム（プール / 詳細・参照 / デッキ）。
   スマホ(<900px) = 同じ3要素を下部タブで切り替える1カラム。
   ============================================================ */

#deck-screen {
  --v2-bg: #040a18;
  --v2-panel-solid: #0a1730;
  --v2-line: #2e7fd4;
  --v2-line-bright: #55c8ff;
  --v2-glow: rgba(70, 170, 255, 0.45);
  --v2-glow-soft: rgba(70, 170, 255, 0.18);
  --v2-text: #eaf6ff;
  --v2-text-muted: #8fb3d9;
  --v2-gold: #f5c542;
  --v2-gold-glow: rgba(245, 197, 66, 0.55);
  --v2-red: #ff5555;

  background:
    radial-gradient(1200px 700px at 50% -10%, #0a1e42 0%, transparent 55%),
    radial-gradient(900px 500px at 85% 110%, #0a1a38 0%, transparent 60%),
    var(--v2-bg);
  color: var(--v2-text);
  gap: 12px;
  padding: 12px;
}

/* ---- 3パネルをホロパネル化 ---- */
#deck-screen .card-list-panel,
#deck-screen .deck-center-col,
#deck-screen .deck-edit-panel {
  background-color: var(--v2-panel-solid);
  background-image: linear-gradient(rgba(8, 22, 48, 0.62), rgba(8, 22, 48, 0.78)), url('/images/ui-v2/panel-holo.png');
  background-size: auto, 280px;
  border: 1px solid var(--v2-line);
  border-radius: 10px;
  box-shadow: 0 0 12px var(--v2-glow-soft), inset 0 0 18px rgba(40, 110, 200, 0.10);
}

/* ---- 中央カラム（タブ + 詳細 / 参照） ---- */
#deck-screen .deck-center-col {
  width: 320px;
  min-width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#deck-screen .deck-center-col .card-detail-panel {
  width: auto;
  min-width: 0;
  flex: 1;
  background: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
#deck-screen .detail-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 10px 0;
  flex: 0 0 auto;
}
#deck-screen .detail-tab {
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--v2-text-muted);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  cursor: pointer;
}
#deck-screen .detail-tab.active {
  color: var(--v2-gold);
  border-color: var(--v2-gold);
  box-shadow: 0 0 8px var(--v2-gold-glow);
  font-weight: 700;
}

/* 参照ペイン */
#deck-screen .ref-deck-body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 10px 12px 12px; }
#deck-screen .ref-deck-body.hidden { display: none; }
#deck-screen .ref-deck-head .deck-select { width: 100%; }
#deck-screen .ref-deck-note { font-size: 11px; color: var(--v2-text-muted); margin: 6px 0 8px; }
#deck-screen .ref-deck-scroll { flex: 1; overflow-y: auto; min-height: 0; }
#deck-screen .ref-deck-sec {
  font-size: 11px; letter-spacing: .12em; color: var(--v2-text-muted);
  margin: 8px 0 6px; border-bottom: 1px solid rgba(70, 170, 255, .25); padding-bottom: 3px;
}
#deck-screen .ref-deck-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
#deck-screen .ref-card { position: relative; cursor: pointer; }
/* デッキ一覧と同じ属性フレーム合成（card-composite）で表示 */
#deck-screen .ref-card .card-composite.ref-comp {
  width: 100%; aspect-ratio: 2 / 3;
  border-radius: 6px;
  transition: box-shadow .12s, transform .12s;
}
#deck-screen .ref-card:hover .card-composite.ref-comp { box-shadow: 0 0 12px var(--v2-glow); transform: translateY(-2px); }
#deck-screen .ref-card .lv {
  position: absolute; top: 2px; left: 2px;
  font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 4px;
  background: rgba(0, 0, 0, .8); color: var(--v2-gold);
}
#deck-screen .ref-card .n {
  position: absolute; top: 2px; right: 2px;
  font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 4px;
  background: rgba(0, 0, 0, .8); color: var(--v2-text);
}
#deck-screen .ref-card .nm {
  font-size: 9.5px; text-align: center; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--v2-text-muted);
}
#deck-screen .ref-empty { color: var(--v2-text-muted); font-size: 12px; padding: 12px 0; }

/* ---- カード表示設定バー（サイズ+カード上に表示するステータス） ---- */
#deck-screen .pool-display-bar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 4px 0 6px;
}
#deck-screen .pd-label { color: var(--v2-text-muted); font-size: 10.5px; margin: 0 2px 0 6px; }
#deck-screen .pd-label:first-child { margin-left: 0; }
#deck-screen .pd-group { display: flex; gap: 3px; flex-wrap: wrap; }
#deck-screen .pd-btn {
  padding: 2px 9px; font-size: 10.5px; line-height: 1.5;
  border-radius: 999px; border: 1px solid var(--v2-line);
  background: rgba(255, 255, 255, .04); color: var(--v2-text-muted); cursor: pointer;
}
#deck-screen .pd-btn.on { color: #fff; border-color: var(--v2-gold); background: rgba(245, 197, 66, .16); }
#deck-screen .skilltype-btns { display: flex; gap: 4px; flex-wrap: wrap; }

/* カード上のステータス帯（カードプール・デッキ共通） */
#deck-screen .card-stat-strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .8);
  font-size: 9px; line-height: 1.4; padding: 1px 2px 2px;
  display: flex; flex-wrap: wrap; gap: 0 6px; justify-content: center;
  color: #fff; z-index: 1; pointer-events: none;
  border-radius: 0 0 4px 4px;
}
#deck-screen .card-stat-strip .s { white-space: nowrap; }
#deck-screen .card-stat-strip .k { color: var(--v2-gold); font-weight: 700; font-size: 8px; margin-right: 1px; }

/* ---- ボタン・入力類をv2調に ---- */
#deck-screen .filter-btn,
#deck-screen .search-mode-btn,
#deck-screen .deck-toolbar-btn,
#deck-screen .btn {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--v2-line);
  color: var(--v2-text);
  border-radius: 8px;
  transition: box-shadow .12s, border-color .12s;
}
#deck-screen .filter-btn:hover,
#deck-screen .search-mode-btn:hover,
#deck-screen .deck-toolbar-btn:hover,
#deck-screen .btn:hover { box-shadow: 0 0 10px var(--v2-glow); border-color: var(--v2-line-bright); }
#deck-screen .filter-btn.active,
#deck-screen .search-mode-btn.active {
  color: var(--v2-gold);
  border-color: var(--v2-gold);
  box-shadow: 0 0 8px var(--v2-gold-glow);
  background: rgba(245, 197, 66, .08);
}
#deck-screen .btn-primary {
  background: linear-gradient(180deg, rgba(46, 127, 212, .55), rgba(20, 60, 120, .6));
  border-color: var(--v2-line-bright);
  font-weight: 700;
}
#deck-screen .deck-toolbar-btn-danger { border-color: rgba(255, 85, 85, .6); color: #ff9a9a; }
#deck-screen .deck-toolbar-btn-danger:hover { box-shadow: 0 0 10px rgba(255, 85, 85, .45); }

#deck-screen .card-search-input,
#deck-screen .deck-select,
#deck-screen .tag-input,
#deck-screen .range-input {
  background: rgba(2, 8, 20, .7);
  border: 1px solid var(--v2-line);
  color: var(--v2-text);
  border-radius: 8px;
}
#deck-screen .card-search-input:focus,
#deck-screen .deck-select:focus { outline: none; border-color: var(--v2-line-bright); box-shadow: 0 0 10px var(--v2-glow); }

/* 見出し・枚数カウント */
#deck-screen h2 { color: var(--v2-text); letter-spacing: .12em; }
#deck-screen .deck-section-title { color: var(--v2-text-muted); letter-spacing: .1em; }
#deck-screen .deck-count { color: var(--v2-gold); font-weight: 700; }

/* フッター: 横並びを維持しつつv2調（縦書き対策で高さも揃える） */
#deck-screen .deck-edit-footer { border-top: 1px solid var(--v2-line); gap: 6px; }
#deck-screen .deck-edit-footer .btn { writing-mode: horizontal-tb; white-space: nowrap; padding: 10px 8px; font-size: 12.5px; flex: 1; }

/* スクロールバー */
#deck-screen ::-webkit-scrollbar { width: 8px; }
#deck-screen ::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
#deck-screen ::-webkit-scrollbar-thumb { background: rgba(70, 170, 255, .35); border-radius: 4px; }

/* ---- スマホ用タブバー（PCでは非表示） ---- */
#deck-screen .deck-mtabs { display: none; }

/* ============================================================
   スマホ(<900px): 同じ3要素を1カラム+下部タブで切り替え
   ============================================================ */
@media (max-width: 900px) {
  #deck-screen { flex-direction: column; padding: 8px 8px 64px; gap: 8px; }
  #deck-screen .card-list-panel,
  #deck-screen .deck-center-col,
  #deck-screen .deck-edit-panel {
    width: 100%; min-width: 0; flex: 1; min-height: 0;
    display: none;
  }
  /* data-mview で表示対象を切替（deck-edit.jsが設定） */
  #deck-screen[data-mview="pool"] .card-list-panel { display: flex; flex-direction: column; }
  #deck-screen[data-mview="center"] .deck-center-col { display: flex; }
  #deck-screen[data-mview="deck"] .deck-edit-panel { display: flex; }

  #deck-screen .deck-mtabs {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 100;
    background: rgba(4, 10, 24, .96);
    border-top: 1px solid var(--v2-line);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    gap: 6px;
  }
  #deck-screen .deck-mtab {
    flex: 1;
    padding: 10px 4px;
    font-size: 13px;
    color: var(--v2-text-muted);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--v2-line);
    border-radius: 8px;
  }
  #deck-screen .deck-mtab.active {
    color: var(--v2-gold);
    border-color: var(--v2-gold);
    box-shadow: 0 0 8px var(--v2-gold-glow);
    font-weight: 700;
  }
}

/* 見出しがツールバーに圧迫されて縦折れしないように */
#deck-screen .deck-edit-header { gap: 8px; }
#deck-screen .deck-edit-header h2 { font-size: 14px; white-space: nowrap; flex-shrink: 0; }
#deck-screen .deck-selector-toolbar { flex-wrap: nowrap; }
#deck-screen .deck-selector-toolbar .deck-select { min-width: 0; }

/* ---- 2026-07-07 FB修正 ---- */
/* ①デッキツールバーの見切れ: セレクタを縮ませてボタン4つを常に表示 */
#deck-screen .deck-edit-header { flex-wrap: nowrap; overflow: hidden; }
#deck-screen .deck-selector-toolbar { flex: 1; min-width: 0; display: flex; gap: 4px; align-items: center; }
#deck-screen .deck-selector-toolbar .deck-select { flex: 1; min-width: 60px; width: auto; }
#deck-screen .deck-toolbar-btn { flex: 0 0 auto; }

/* ②フッターの文字はみ出し: 3列グリッド2段にしてゆとりを確保 */
#deck-screen .deck-edit-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
#deck-screen .deck-edit-footer .btn {
  font-size: 12px;
  padding: 9px 4px;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

/* ③参照タブ中も下半分にカード詳細を表示（上=参照デッキ / 下=ホバー詳細） */
#deck-screen .deck-center-col.ref-mode .ref-deck-body { flex: 1.15; min-height: 0; order: 2; }
#deck-screen .deck-center-col.ref-mode .card-detail-panel {
  flex: 1;
  min-height: 0;
  order: 3;
  border-top: 1px solid var(--v2-line);
  overflow-y: auto;
}

/* ---- 2026-07-07 FB2: 参照カードのサイズ/参照時詳細のコンパクト化 ---- */
/* 参照デッキのカードは右のデッキパネル（62px）と同サイズ感。枠はシンプルなまま */
#deck-screen .ref-deck-cards { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 5px; }
#deck-screen .ref-card .nm { display: none; } /* この幅では読めないため省略（ホバーで下の詳細に表示） */

/* 参照モードの下半分カード詳細: 画像を小さく左に、テキストを右に。
   スクロールしなくても名前/ステータス/スキル効果が見渡せるコンパクト配置 */
#deck-screen .deck-center-col.ref-mode .card-detail-panel {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
}
#deck-screen .deck-center-col.ref-mode .card-detail-panel .card-detail-image {
  width: 92px; max-width: 92px; flex: 0 0 auto; margin: 0;
}
#deck-screen .deck-center-col.ref-mode .card-detail-panel > div:last-child { flex: 1; min-width: 0; }
#deck-screen .deck-center-col.ref-mode .card-detail-name { font-size: 13px; margin-bottom: 2px; }
#deck-screen .deck-center-col.ref-mode .card-detail-type,
#deck-screen .deck-center-col.ref-mode .card-detail-tribe { font-size: 10.5px; margin-bottom: 2px; }
#deck-screen .deck-center-col.ref-mode .card-detail-stats {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin: 4px 0 6px;
}
#deck-screen .deck-center-col.ref-mode .stat-box { padding: 2px 2px; }
#deck-screen .deck-center-col.ref-mode .stat-box .stat-label { font-size: 8.5px; }
#deck-screen .deck-center-col.ref-mode .stat-box .stat-value { font-size: 12px; }
#deck-screen .deck-center-col.ref-mode .skill-entry { margin: 2px 0 0; font-size: 11px; }
#deck-screen .deck-center-col.ref-mode .card-detail-skills { margin-top: 2px; }

/* ---- 2026-07-07 FB3: 金フレーム合成を廃止し、バトル画面と同じ素サムネ+属性色ボーダーに統一 ---- */
#deck-screen .card-composite .card-frame { display: none; }
#deck-screen .card-composite {
  border-radius: 6px;
  border: 1.5px solid var(--v2-line);
}
#deck-screen .card-composite.element-0 { border-color: #f0c040; }
#deck-screen .card-composite.element-1 { border-color: #a05ae0; }
#deck-screen .card-composite.element-2 { border-color: #e05050; }
#deck-screen .card-composite.element-3 { border-color: #4a90e0; }