/* ==============================
    Table Styles
 ============================== */

/* 基本的なテーブルスタイル - 余白を最小限に */
.table-scroll-wrapper {
  overflow-x: auto;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 10px 0;
  padding: 0 2px; /* 10px → 2px に大幅削減 */
}

/* 全テーブルの基本余白を統一・最小化 */
.table-scroll-wrapper table,
.table-scroll-wrapper .match-table,
.table-scroll-wrapper .stats-table,
.table-scroll-wrapper .summary-table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* 全テーブルセルの基本余白を統一・最小化 */
.table-scroll-wrapper th,
.table-scroll-wrapper td,
.table-scroll-wrapper .match-table th,
.table-scroll-wrapper .match-table td,
.table-scroll-wrapper .stats-table th,
.table-scroll-wrapper .stats-table td,
.table-scroll-wrapper .summary-table th,
.table-scroll-wrapper .summary-table td {
  padding: 4px 6px; /* 全テーブルの基本余白を統一 */
  border: 1px solid #ddd;
  font-size: var(--font-sm); /* 統一されたフォントサイズ */
  font-family: "Futura", "Kanit", Arial, sans-serif; /* 統一されたフォントファミリー */
  text-align: center; /* デフォルトで中央揃え */
  color: var(--color-text); /* 統一されたテキスト色 */
}

/* 全テーブルヘッダーの統一スタイル */
.table-scroll-wrapper thead th,
.table-scroll-wrapper .match-table thead th,
.table-scroll-wrapper .stats-table thead th,
.table-scroll-wrapper .summary-table thead th {
  background-color: var(--color-primary); /* CSS変数を使用 */
  color: white;
  font-weight: bold;
  font-size: var(--font-sm); /* 統一されたフォントサイズ */
}

/* モバイルでの余白をさらに最小化 */
@media (max-width: 768px) {
  .table-scroll-wrapper {
    padding: 0 1px; /* モバイルではさらに削減 */
  }

  .table-scroll-wrapper th,
  .table-scroll-wrapper td,
  .table-scroll-wrapper .match-table th,
  .table-scroll-wrapper .match-table td,
  .table-scroll-wrapper .stats-table th,
  .table-scroll-wrapper .stats-table td,
  .table-scroll-wrapper .summary-table th,
  .table-scroll-wrapper .summary-table td {
    padding: 3px 4px; /* モバイルではさらに最小化 */
  }
}

/* ==============================
   Tab Styles
============================== */

.tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.tab-btn {
  background-color: var(--color-primary); /* CSS変数に統一 */
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
  margin: 0 5px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  font-size: var(--font-md);
}

.tab-btn:hover {
  background-color: var(--color-primary-light, #004a9f);
}

/* キーボード操作の可視化 */
.tab-btn:focus-visible {
  outline: 3px solid #ffbf47; /* アクセント色 */
  outline-offset: 2px;
}

.tab-btn.active {
  background-color: var(--color-accent);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ===============================
      テーブル汎用スタイル
      =============================== */
.summary-table-wrapper {
  overflow-x: auto;
  margin: 10px 0;
  padding: 0 2px; /* 10px → 2px に統一 */
}

/* 得失点差の表示スタイル */
.summary-table .goal-difference {
  font-weight: bold;
}

.summary-table .goal-difference.positive {
  color: #0d6efd; /* 青色：プラス */
}

.summary-table .goal-difference.negative {
  color: #dc3545; /* 赤色：マイナス */
}

.summary-table .goal-difference.neutral {
  color: #6c757d; /* グレー：ゼロ */
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0; /* セル間の空白を完全に削除 */
  font-size: var(--font-sm);
  background-color: #fff;
  table-layout: fixed; /* 列幅を固定 */
}

.summary-table th,
.summary-table td {
  border: 1px solid #ddd;
  padding: 4px 6px; /* 基本設定に統一 */
  text-align: center;
  white-space: normal;
  /* フォントと色は基本設定で統一済み */
}

/* ===============================
      順位表専用スタイル
      =============================== */

/* 順位表の列幅最適化 - より適切な幅に調整 */
.match-table .col-rank,
.sticky-match-table .col-rank {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  text-align: center !important;
  padding: 4px 4px !important;
  font-weight: bold !important;
  background-color: white !important;
  color: var(--color-text) !important;
}

.match-table .col-team,
.sticky-match-table .col-team {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  padding: 4px 8px !important;
  text-align: left !important;
  font-weight: 500 !important;
  background-color: white !important;
  color: var(--color-text) !important;
}

.match-table .col-points,
.sticky-match-table .col-points {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  text-align: center !important;
  font-weight: bold !important;
  background-color: white !important;
  color: var(--color-text) !important;
  padding: 4px 4px !important;
}

.match-table .col-compact,
.sticky-match-table .col-compact {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  text-align: center !important;
  padding: 4px 4px !important;
  font-weight: 500 !important;
}

/* 順位表の行ハイライト - より強力なセレクタ */
.match-table .standings-highlight,
.sticky-match-table .standings-highlight,
.match-table tr.standings-highlight,
.sticky-match-table tr.standings-highlight {
  background-color: #e6f3ff !important;
  font-weight: bold !important;
}

/* 行ハイライト時のセル背景色も確実に適用 */
.match-table .standings-highlight td,
.sticky-match-table .standings-highlight td {
  background-color: #e6f3ff !important;
}

/* 勝点列の見出し色を確実に白色に */
.match-table thead th.col-points,
.sticky-match-table thead th.col-points {
  color: white !important;
}

/* 順位表全体のパディングを基本設定に統一 */
.match-table.sticky-match-table th,
.match-table.sticky-match-table td,
.sticky-match-table th,
.sticky-match-table td {
  padding: 4px 6px; /* 基本設定に統一 */
}

/* チーム名列のみ少し余白を確保 */
.match-table.sticky-match-table .col-team,
.sticky-match-table .col-team {
  padding: 4px 8px; /* 基本設定に統一、チーム名は少し広く */
}

/* 得失点差の色分け - より強力なセレクタ */
.match-table .goal-diff-positive,
.sticky-match-table .goal-diff-positive {
  color: #0066cc !important;
  font-weight: bold !important;
}

.match-table .goal-diff-negative,
.sticky-match-table .goal-diff-negative {
  color: #cc0000 !important;
  font-weight: bold !important;
}

.match-table .goal-diff-zero,
.sticky-match-table .goal-diff-zero {
  color: #333333 !important;
  font-weight: bold !important;
}

.summary-table thead th {
  background-color: var(--color-primary); /* CSS変数を使用 */
  color: white;
  font-weight: bold;
  font-size: var(--font-sm); /* 統一されたフォントサイズ */
}

.summary-table tbody th {
  background-color: #f0f0f0;
  font-weight: bold;
  width: 60px; /* 固定幅に変更 */
  min-width: 60px;
  max-width: 60px;
}

.summary-table td:nth-child(2),
.summary-table td:nth-child(3),
.summary-table td:nth-child(4) {
  width: 80px; /* 固定幅に変更 */
  min-width: 80px;
  max-width: 80px;
}

/* スマートフォン対応 */
@media (max-width: 768px) {
  .summary-table {
    font-size: 0.75rem; /* フォントサイズを小さく */
  }

  .summary-table th,
  .summary-table td {
    padding: 4px 6px; /* パディングを縮小 */
    width: 50px; /* 固定幅に変更 */
    min-width: 50px;
    max-width: 50px;
  }

  .summary-table tbody th {
    width: 50px; /* 先頭列をさらに縮小 */
    min-width: 50px;
    max-width: 50px;
  }

  .summary-table td:nth-child(2),
  .summary-table td:nth-child(3),
  .summary-table td:nth-child(4) {
    width: 70px; /* 他の列も縮小 */
    min-width: 70px;
    max-width: 70px;
  }
}

/* ===============================
      統一テーブルデザイン（summary-table準拠）
      =============================== */
:where(
    .summary-table,
    .match-table,
    .stats-table,
    .ranking-table,
    #halftimeWinrateTable
  ) {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0; /* セル間の空白を完全に削除 */
  font-size: var(--font-sm);
  background-color: #fff;
  table-layout: fixed; /* autoからfixedに変更して列幅を厳密に制御 */
}

:where(
    .summary-table,
    .match-table,
    .stats-table,
    .ranking-table,
    #halftimeWinrateTable
  )
  th,
:where(
    .summary-table,
    .match-table,
    .stats-table,
    .ranking-table,
    #halftimeWinrateTable
  )
  td {
  border: 1px solid #ddd;
  padding: 4px 6px; /* 基本設定に統一 */
  text-align: center;
  white-space: normal;
  overflow: hidden; /* 内容が列幅を超えた場合の処理 */
  text-overflow: ellipsis; /* 長いテキストを省略表示 */
  /* フォントと色は基本設定で統一済み */
}

/* stats-tableの基本スタイル */
.stats-table th,
.stats-table td {
  border: 1px solid #ccc;
  padding: 4px 6px; /* 基本設定に統一 */
  text-align: center;
  /* フォントと色は基本設定で統一済み */
}

/* match-tableの基本スタイル */
.match-table th,
.match-table td {
  padding: 4px 6px; /* 基本設定に統一 */
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid #ddd;
  /* フォントと色は基本設定で統一済み */
}

/* スクロール枠：20行表示（ヘッダ1行 + データ20行）を想定 */
.table-scroll-wrapper.table-rows-20 {
  --row-h: 44px;
  max-height: calc(var(--row-h) * 21);
  overflow-y: auto;
  overflow-x: auto;
}

/* match-tableの先頭行の色を統一 */
.match-table thead th {
  background-color: var(--color-primary); /* CSS変数を使用 */
  color: white;
  /* フォントとサイズは基本設定で統一済み */
}

/* ===============================
      選手スタッツテーブル表示用
      =============================== */

.stats-table {
  border-collapse: collapse;
  border-spacing: 0; /* セル間の空白を完全に削除 */
  width: 100%;
  min-width: 1200px; /* 年号表示に十分な幅を確保 */
  table-layout: fixed; /* 固定列幅に変更 */
}

/* stats-tableの先頭列（1列目）のスタイル - 150pxで固定 */
.stats-table th:first-child,
.stats-table td:first-child {
  background: #fff;
  text-align: left;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  padding: 4px 8px; /* 基本設定に統一、左寄せのため少し広く */
  border-right: 2px solid #ddd;
}

/* 2列目以降の列幅を内容に合わせて設定 */
.stats-table th:not(:first-child),
.stats-table td:not(:first-child) {
  min-width: 150px; /* 年号表示に十分な幅 */
  padding: 4px 6px; /* 基本設定に統一 */
  white-space: nowrap; /* 文字の折り返しを防ぐ */
  text-align: center; /* 中央揃え */
}

/* スマートフォン対応 */
@media (max-width: 768px) {
  .stats-table {
    min-width: 1000px; /* 年号表示に十分な幅を確保 */
  }

  .match-table {
    min-width: 800px; /* スマートフォンでの最小幅を調整 */
  }

  /* スマートフォンでのテーブル固定を強化 */
  .table-wrap {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* スマートフォンでの列幅調整 - 先頭列は150pxで固定 */
  .stats-table th:first-child,
  .stats-table td:first-child {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }

  .stats-table th:not(:first-child),
  .stats-table td:not(:first-child) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
  }
}
/* stats-tableの先頭行の色を統一 */
.stats-table thead th {
  background-color: var(--color-primary); /* CSS変数を使用 */
  color: white;
  /* フォントとサイズは基本設定で統一済み */
}
/* ===============================
     選手プロフィール画像調整
     =============================== */
.player-photo {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
/* ===============================
AI解説セクション（選手ページ用）
=============================== */
.ai-comment-section {
  background-color: #f5f8fc;
  border: 1px solid #d0d8e8;
  border-radius: 10px;
  padding: 1rem 1.25rem; /* ← 上下・左右とも少しだけ狭くしたよ♪ */
  margin: 1.5rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.ai-comment-header {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
  border-bottom: 2px solid #d0d8e8;
  padding-bottom: 0.3rem;
}

.ai-comment-text {
  font-size: var(--font-md);
  line-height: 1.6;
  color: var(--color-text);
}

/* ===============================
 修正追記：選手テーブル列幅最適化
 =============================== */

.match-table {
  width: 100%;
  table-layout: fixed; /* autoからfixedに変更 */
  border-collapse: collapse;
  border-spacing: 0; /* セル間の空白を完全に削除 */
  min-width: 1100px; /* 横スクロール基準になる最小幅 */
}

.match-table th.sticky,
.match-table td.sticky {
  text-align: left;
  padding-left: 16px;
  width: 140px; /* 固定幅に変更 */
  min-width: 140px;
  max-width: 140px;
}

/* 最小幅を列ごとに明示（順序：#、名前、出場数…） */
.match-table th:nth-child(1),
.match-table td:nth-child(1) {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
} /* # */
.match-table th:nth-child(2),
.match-table td:nth-child(2) {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
} /* Name */
.match-table th:nth-child(3),
.match-table td:nth-child(3) {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
} /* Apps */
.match-table th:nth-child(4),
.match-table td:nth-child(4) {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
} /* Starts */
.match-table th:nth-child(5),
.match-table td:nth-child(5) {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
} /* Sub */
.match-table th:nth-child(6),
.match-table td:nth-child(6) {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
} /* Minutes */
.match-table th:nth-child(7),
.match-table td:nth-child(7) {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
} /* Rating */
.match-table th:nth-child(8),
.match-table td:nth-child(8) {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
} /* Goals */
.match-table th:nth-child(9),
.match-table td:nth-child(9) {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
} /* Assists */
.match-table th:nth-child(10),
.match-table td:nth-child(10) {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
} /* Yellow */
.match-table th:nth-child(11),
.match-table td:nth-child(11) {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
} /* Red */

#playerStatsTab .match-table thead th {
  text-align: center;
}

/* ===============================
     シーズン軌跡可視化
     =============================== */
.season-form-content {
  width: 100%; /* 80%から100%に変更してチームサマリーテーブルと揃える */
  margin: 0 auto;
}

.season-form-visualization {
  display: flex;
  flex-wrap: nowrap;
  gap: 0; /* セル間隔を0に */
  height: 60px; /* 高さを60pxに変更 */
  overflow-x: auto;
  padding: 10px 0;
  min-height: 60px;
  background-color: #f0f0f0; /* デバッグ用背景色 */
}

.season-form-cell {
  flex: 0 0 auto;
  width: 20px;
  min-width: 20px;
  height: 60px; /* 高さを60pxに変更 */
  border-radius: 0; /* 角丸を削除 */
  cursor: pointer;
  transition: transform 0.2s ease;
  position: relative;
  border: none; /* 枠線を削除 */
  display: block;
  background-color: var(--form-cell-bg, #ccc);
}

.season-form-cell:hover {
  transform: scale(1.1);
  z-index: 10;
}

/* 勝敗の色分け - より強力なセレクタ */
.season-form-visualization .season-form-cell.win {
  background: linear-gradient(
    135deg,
    var(--form-win-dark, #1e3a8a),
    var(--form-win, #3b82f6)
  );
  background-color: var(--form-win, #3b82f6);
}

.season-form-visualization .season-form-cell.draw {
  background: linear-gradient(
    135deg,
    var(--form-draw-light, #f8fafc),
    var(--form-draw, #e2e8f0)
  );
  background-color: var(--form-draw, #e2e8f0);
}

.season-form-visualization .season-form-cell.loss {
  background: linear-gradient(
    135deg,
    var(--form-loss-light, #fecaca),
    var(--form-loss, #dc2626)
  );
  background-color: var(--form-loss, #dc2626);
}

/* ホバー時のツールチップ */
.season-form-cell::after {
  content: attr(data-score);
  position: absolute;
  bottom: 65px; /* 60pxの高さに合わせて調整 */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.season-form-cell:hover::after {
  opacity: 1;
}

/* ===============================
                 シーズン軌跡可視化（サーモグラフィ風）
                 =============================== */

.season-form-controls {
  margin-bottom: 16px;
}

.control-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.control-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}

.control-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

.sigma-control {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.sigma-label {
  font-size: 11px;
  color: var(--color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

#sigmaSlider {
  width: 100%;
  accent-color: var(--color-primary);
}

#sigmaValue {
  font-size: 11px;
  color: var(--color-muted);
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.season-form-canvases {
  margin-bottom: 16px;
}

#mainCanvas {
  width: 100%;
  height: 120px; /* 80pxから120pxに変更 */
  display: block;
  background: var(--color-bg);
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid #ddd; /* 枠線を追加 */
}

#cellsCanvas {
  width: 100%;
  height: 24px;
  display: block;
  background: var(--color-bg);
  border-radius: 6px;
  border: 1px solid #ddd; /* 枠線を追加 */
}

.season-form-legend {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 4px 0;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  font-size: 11px;
  color: var(--color-text);
  white-space: nowrap;
  flex-shrink: 0;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.legend-dot.blue {
  background: #0a74ff;
}

.legend-dot.white {
  background: #ffffff;
  border: 1px solid #cbd5e1;
}

.legend-dot.red {
  background: #ff2a2a;
}

/* ===== 専用Sticky Tables実装 ===== */

/* ラッパー共通（3種を対象） */
.table-scroll-wrapper,
.table-container,
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative; /* stickyの基準点を明確化 */
  /* 左白帯を完全に防ぐ */
  padding-left: 0;
  margin-left: 0;
}

/* ===== stats-table専用sticky実装 ===== */
.sticky-stats-table {
  border-collapse: separate; /* iOS の sticky 背景崩れ回避 */
  border-spacing: 0;
  width: 100%;
  table-layout: fixed; /* 固定列幅に変更 */
}

/* stats-table: 先頭行（ヘッダー）固定 */
.sticky-stats-table thead th {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-primary); /* CSS変数を使用 */
  color: white;
  background-clip: padding-box;
}

/* stats-table: 左端列固定 */
.sticky-stats-table th:first-child,
.sticky-stats-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 50;
  background-color: #fff;
  background-clip: padding-box;
}

/* stats-table: 左上の交差セル（先頭行 × 左端列）は最前面に */
.sticky-stats-table thead th:first-child {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 200;
  background-color: var(--color-primary); /* CSS変数を使用 */
  color: white;
}

/* ===== match-table専用sticky実装 ===== */
.sticky-match-table {
  border-collapse: separate; /* iOS の sticky 背景崩れ回避 */
  border-spacing: 0;
  width: 100%;
  table-layout: fixed; /* 固定列幅に変更 */
}

/* match-table: 先頭行（ヘッダー）固定 */
.sticky-match-table thead th {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-primary); /* CSS変数を使用 */
  color: white;
  background-clip: padding-box;
}

/* match-table: 左端列固定 */
.sticky-match-table th:first-child,
.sticky-match-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 50;
  background-color: #fff;
  background-clip: padding-box;
}

/* match-table: 左上の交差セル（先頭行 × 左端列）は最前面に */
.sticky-match-table thead th:first-child {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 200;
  background-color: var(--color-primary); /* CSS変数を使用 */
  color: white;
}

/* ==============================
   テーブルレイアウト修正
   ============================== */

/* ========== 1) ハーフタイム勝率テーブルの左右余白最適化 ========== */
#halftimeWinrateTable {
  table-layout: fixed; /* 均等幅にする */
  width: 100%; /* テーブル全体を横幅いっぱいに */
  border-collapse: collapse;
}

#halftimeWinrateTable th,
#halftimeWinrateTable td {
  white-space: normal; /* nowrapからnormalに変更して改行を許可 */
  text-align: center; /* 数字を中央寄せ */
  line-height: 1.2; /* 行間を調整 */
}

#halftimeWinrateTable th {
  background-color: var(
    --color-primary
  ); /* チームサマリーテーブルと同じ背景色に統一 */
  color: white; /* チームサマリーテーブルと同じ文字色に統一 */
  font-weight: bold; /* チームサマリーテーブルと同じフォントウェイトに統一 */
  font-size: var(
    --font-sm
  ); /* チームサマリーテーブルと同じフォントサイズに統一 */
}

/* 1列目（区分列）だけ幅固定 */
#halftimeWinrateTable th:first-child {
  min-width: 80px;
  width: 80px;
  text-align: center; /* 「区分」ヘッダーは中央寄せ */
}

#halftimeWinrateTable td:first-child {
  min-width: 80px;
  width: 80px;
  text-align: center; /* 「ホーム」「アウェイ」なども中央寄せに統一 */
  background-color: #f0f0f0; /* チームサマリーテーブルと同じ背景色に統一 */
  font-weight: bold; /* チームサマリーテーブルと同じフォントウェイトに統一 */
}

/* 2列目以降は均等幅 */
#halftimeWinrateTable th:not(:first-child),
#halftimeWinrateTable td:not(:first-child) {
  width: calc((100% - 80px) / 4); /* 残りを4列で均等配分 */
  min-width: 120px; /* PCでの最小幅を設定 */
  max-width: 200px; /* PCでの最大幅を制限 */
}

/* PCでのテーブル幅制限 */
@media (min-width: 1024px) {
  #halftimeWinrateTable {
    max-width: 800px; /* PCでcontainer幅に収まるように制限 */
    margin: 0 auto; /* 中央揃え */
  }

  #halftimeWinrateTable th:not(:first-child),
  #halftimeWinrateTable td:not(:first-child) {
    width: 140px; /* PCで固定幅に設定 */
    min-width: 140px;
    max-width: 140px;
  }
}

/* ========== 2) Players：スマホでヘッダー＆左列を固定 ========== */
#playerStatsTab .match-table .sticky-col {
  position: sticky;
  left: 0;
  z-index: 150; /* 既存のz-index: 50より上に */
  background: #fff;
  box-shadow: 2px 0 0 rgba(0, 0, 0, 0.04); /* 左列の境界をうっすら */
}

/* 左上の交差セル（ヘッダーの1列目）は一段上 */
#playerStatsTab .match-table thead th.sticky-col {
  z-index: 250; /* 既存のz-index: 200より上に */
  background: var(--color-primary); /* CSS変数を使用 */
  color: #fff;
}

/* ========== 3) Results：基本設定を活用 ========== */
/* 基本設定で統一済みのため、個別設定は不要 */

/* ========== 4) J1順位表：基本設定を活用 ========== */
/* 基本設定で統一済みのため、個別設定は不要 */

/* ===============================
   Player（player.html）スタッツ表の詰め＆固定を最適化
   =============================== */

/* 1) 基本設定を活用 */
.stats-table th,
.stats-table td {
  padding: 4px 6px; /* 基本設定に統一 */
  font-size: var(--font-sm);
}

/* 2) sticky の安定化（交差セルの重なり順を強める） */
.sticky-stats-table thead th {
  z-index: 120;
}
.sticky-stats-table thead th:first-child {
  z-index: 220;
}
.sticky-stats-table th:first-child,
.sticky-stats-table td:first-child {
  z-index: 110;
}

/* 3) 最左列が広がりすぎるのを防止（幅を clamp で制御） */
.sticky-stats-table th:first-child,
.sticky-stats-table td:first-child {
  width: clamp(96px, 22vw, 140px);
  min-width: clamp(96px, 22vw, 140px);
  max-width: 140px;
  text-align: left;
  padding-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 4) 2列目以降も詰めて、スマホで切れにくく */
.sticky-stats-table th:not(:first-child),
.sticky-stats-table td:not(:first-child) {
  width: clamp(72px, 18vw, 120px);
  min-width: clamp(72px, 18vw, 120px);
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 6px; /* 基本設定に統一 */
}

/* スマホでも確実に効かせる微調整 */
@media (max-width: 768px) {
  .stats-table th,
  .stats-table td {
    padding: 3px 4px; /* 基本設定のモバイル版に統一 */
  }

  .sticky-stats-table th:first-child,
  .sticky-stats-table td:first-child {
    width: clamp(90px, 28vw, 120px);
    min-width: clamp(90px, 28vw, 120px);
    max-width: 120px;
  }

  .sticky-stats-table th:not(:first-child),
  .sticky-stats-table td:not(:first-child) {
    width: clamp(64px, 22vw, 110px);
    min-width: clamp(64px, 22vw, 110px);
    max-width: 110px;
    padding: 3px 4px; /* 基本設定のモバイル版に統一 */
  }
}

/* =========================================================
   Player: スマホでの stats-table を列数に依存せず統一表示
   目的：
   - 列数が少ない（例：1シーズン）場合でもセル幅・フォント感が
     大きく見えないよう、内容幅で固定し横スクロールに統一。
   スコープ：
   - player.html 内の .table-scroll-wrapper > #stats-table のみ
   注意：
   - 既存の sticky / フォント / 先頭列幅の仕様は維持
   ========================================================= */
@media (max-width: 768px) {
  /* まず既存の最小幅指定を無効化（拡大の原因を除去） */
  .table-scroll-wrapper #stats-table.stats-table {
    min-width: auto !important;
    width: max-content !important; /* 列幅の合計で確定（引き伸ばさない） */
  }

  /* 列幅を変数化して明示固定：先頭列とシーズン列を統一 */
  :root {
    --stats-first-col-w: 150px; /* 既存仕様に合わせる */
    --stats-col-w: 110px; /* シーズン列（何列でも同じ幅） */
  }

  /* 先頭列＝指標名セル（sticky列） */
  .table-scroll-wrapper #stats-table.stats-table th:first-child,
  .table-scroll-wrapper #stats-table.stats-table td:first-child {
    width: var(--stats-first-col-w) !important;
    min-width: var(--stats-first-col-w) !important;
    max-width: var(--stats-first-col-w) !important;
  }

  /* 2列目以降＝各シーズン列（列数に関わらず一定） */
  .table-scroll-wrapper #stats-table.stats-table th:not(:first-child),
  .table-scroll-wrapper #stats-table.stats-table td:not(:first-child) {
    width: var(--stats-col-w) !important;
    min-width: var(--stats-col-w) !important;
    max-width: var(--stats-col-w) !important;
  }

  /* ラッパー側で横スクロール（既存ラッパに適用） */
  .table-scroll-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* フォントは常に統一（既存変数を強制適用） */
  .table-scroll-wrapper #stats-table.stats-table th,
  .table-scroll-wrapper #stats-table.stats-table td {
    font-size: var(--font-sm) !important;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 3px 4px; /* 既存のモバイル縮小値に合わせる */
  }
}

/* ===============================
      J1順位表専用スタイル（より細かい調整）
      =============================== */

/* J1順位表の全体スタイル */
#standings-container .match-table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  min-width: 800px; /* 順位表の最小幅を設定 */
}

/* J1順位表の行スタイル */
#standings-container .match-table tbody tr {
  border-bottom: 1px solid #eee;
}

#standings-container .match-table tbody tr:hover {
  background-color: #f8f9fa;
}

/* 順位列の特別スタイル */
#standings-container .col-rank {
  background-color: #f8f9fa !important;
  font-weight: bold !important;
  color: var(--color-primary) !important;
}

/* チーム名列の特別スタイル */
#standings-container .col-team {
  border-right: 2px solid #ddd !important;
  background-color: #fff !important;
}

/* 勝点列の特別スタイル */
#standings-container .col-points {
  background-color: #f0f8ff !important;
  border: 2px solid var(--color-primary) !important;
}

/* 得失点差の色分け */
#standings-container .col-compact:last-child {
  font-weight: bold !important;
}

/* 得失点差がプラスの場合 */
#standings-container
  .col-compact:last-child:has(+ td[data-goal-diff="positive"]) {
  color: #0066cc !important;
}

/* 得失点差がマイナスの場合 */
#standings-container
  .col-compact:last-child:has(+ td[data-goal-diff="negative"]) {
  color: #cc0000 !important;
}

/* ====== 1) ハーフタイム勝率テーブル専用（幅＆色分け） ====== */
/* 横スクロールを発生させている .match-table の既定 min-width をこのIDだけ打ち消し */
#halftimeWinrateTable {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

/* PC時はスクロール枠を見せない（スマホは既存の挙動維持） */
@media (min-width: 1024px) {
  .table-scroll-wrapper > #halftimeWinrateTable,
  .table-scroll-wrapper:has(#halftimeWinrateTable) {
    overflow-x: visible !important;
  }
}

/* ％レンジに応じた色クラス（背景と文字色） */
.halftime-rate-81-100 {
  background: #0a74ff !important;
  color: #fff !important;
}
.halftime-rate-61-80 {
  background: #84b9ff !important;
  color: #111 !important;
} /* 白(#FFF)と青(#0A74FF)の中間 */
.halftime-rate-41-60 {
  background: #ffffff !important;
  color: #111 !important;
}
.halftime-rate-21-40 {
  background: #ff9595 !important;
  color: #111 !important;
} /* 白(#FFF)と赤(#FF2A2A)の中間 */
.halftime-rate-0-20 {
  background: #ff2a2a !important;
  color: #fff !important;
}

/* テキストが2行（% と (x/x)）になる前提で見やすく */
#halftimeWinrateTable td {
  line-height: 1.25;
}

/* ====== 3) 順位表（standings-container）配色の明示上書き ====== */
/* ヘッダーは青地・白文字（強制） */
#standings-container .match-table thead th {
  background: var(--color-primary, #0a74ff) !important;
  color: #fff !important;
}

/* 「順位」「チーム名」「勝点」は白背景・通常フォント色（既定の上に明示） */
#standings-container .match-table .col-rank,
#standings-container .match-table .col-team,
#standings-container .match-table .col-points,
#standings-container .match-table td.col-rank,
#standings-container .match-table td.col-team,
#standings-container .match-table td.col-points {
  background: #fff !important;
  color: var(--color-text, #111) !important;
  border-color: #ddd !important;
}

/* 勝点列だけ枠線・背景・文字色がズレるケースの再上書き */
#standings-container .match-table .col-points,
#standings-container .match-table td.col-points {
  background: #fff !important;
  color: var(--color-text, #111) !important;
  border: 1px solid #ddd !important;
}

/* =========================
   A) シーズン成績（Results）テーブル最適化
   スコープ: #seasonResultsTab 内のみ
   列: 0:節 / 1:日付 / 2:対戦相手 / 3:結果 / 4:スコア / 5:主審 / 6:会場
   ========================= */
#seasonResultsTab table.match-table,
#seasonResultsTab table.stats-table {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}

/* 必要時のみ横スクロール可（既存ラッパに適用） */
#seasonResultsTab .table-scroll-wrapper,
#seasonResultsTab .table-wrap,
#seasonResultsTab .table-container {
  overflow-x: auto;
}

/* 列幅（px） */
#seasonResultsTab table.match-table thead th:nth-child(1),
#seasonResultsTab table.stats-table thead th:nth-child(1),
#seasonResultsTab table.match-table tbody td:nth-child(1),
#seasonResultsTab table.stats-table tbody td:nth-child(1) {
  /* 節 */
  width: 48px;
  min-width: 48px;
  max-width: 48px;
}

#seasonResultsTab table.match-table thead th:nth-child(2),
#seasonResultsTab table.stats-table thead th:nth-child(2),
#seasonResultsTab table.match-table tbody td:nth-child(2),
#seasonResultsTab table.stats-table tbody td:nth-child(2) {
  /* 日付 */
  width: 88px;
  min-width: 88px;
  max-width: 88px;
}

#seasonResultsTab table.match-table thead th:nth-child(3),
#seasonResultsTab table.stats-table thead th:nth-child(3),
#seasonResultsTab table.match-table tbody td:nth-child(3),
#seasonResultsTab table.stats-table tbody td:nth-child(3) {
  /* 対戦相手 */
  width: 120px;
  min-width: 120px;
  max-width: 120px;
}

#seasonResultsTab table.match-table thead th:nth-child(4),
#seasonResultsTab table.stats-table thead th:nth-child(4),
#seasonResultsTab table.match-table tbody td:nth-child(4),
#seasonResultsTab table.stats-table tbody td:nth-child(4) {
  /* 結果(◯△● 等) */
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  text-align: center;
}

#seasonResultsTab table.match-table thead th:nth-child(5),
#seasonResultsTab table.stats-table thead th:nth-child(5),
#seasonResultsTab table.match-table tbody td:nth-child(5),
#seasonResultsTab table.stats-table tbody td:nth-child(5) {
  /* スコア(最大4文字) */
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  text-align: center;
}

#seasonResultsTab table.match-table thead th:nth-child(6),
#seasonResultsTab table.stats-table thead th:nth-child(6),
#seasonResultsTab table.match-table tbody td:nth-child(6),
#seasonResultsTab table.stats-table tbody td:nth-child(6) {
  /* 主審 */
  width: 120px;
  min-width: 120px;
  max-width: 120px;
}

#seasonResultsTab table.match-table thead th:nth-child(7),
#seasonResultsTab table.stats-table thead th:nth-child(7),
#seasonResultsTab table.match-table tbody td:nth-child(7),
#seasonResultsTab table.stats-table tbody td:nth-child(7) {
  /* 会場 */
  width: 120px;
  min-width: 120px;
  max-width: 120px;
}

/* 文字詰まり抑止（既存省略ルールを尊重） */
#seasonResultsTab table.match-table th,
#seasonResultsTab table.match-table td,
#seasonResultsTab table.stats-table th,
#seasonResultsTab table.stats-table td {
  white-space: nowrap;
}

/* =========================
   B) J1リーグ順位表 配色修正
   スコープ: #standings-container 内のみ
   要求: ヘッダーの「順位/チーム名/勝点」= 青地・白字、
        2行目以降 = 白背景
   ========================= */
#standings-container .match-table thead th.col-rank,
#standings-container .match-table thead th.col-team,
#standings-container .match-table thead th.col-points {
  background: var(--color-primary, #002f6c) !important;
  color: #fff !important;
}

/* 2行目以降（通常行）は白 */
#standings-container .match-table tbody tr td {
  background: #fff !important;
  color: var(--color-text, #111) !important;
}

/* 強調行（ある場合）だけは既存の水色を維持 */
#standings-container .match-table tbody tr.standings-highlight td {
  background: #e6f3ff !important;
}
/* スマートフォン対応: halftimeWinrateTable のフォントサイズを summary-table と揃える */
@media (max-width: 768px) {
  #halftimeWinrateTable.match-table,
  #halftimeWinrateTable.match-table th,
  #halftimeWinrateTable.match-table td {
    font-size: 0.75rem; /* summary-table と同じに統一 */
  }

  #halftimeWinrateTable.match-table th,
  #halftimeWinrateTable.match-table td {
    padding: 4px 6px; /* パディングも summary-table に合わせて縮小 */
  }
}

/* ==== FIX: Halftime table should fill container width on desktop & mobile ==== */
.table-scroll-wrapper #halftimeWinrateTable,
.table-wrap #halftimeWinrateTable {
  width: 100%;
  max-width: none; /* PCでの800px制限を解除 */
  margin: 0; /* 中央寄せの余白を撤廃 */
  box-sizing: border-box;
}

/* 念のためPCブレークポイントでも強制 */
@media (min-width: 1024px) {
  .table-scroll-wrapper #halftimeWinrateTable,
  .table-wrap #halftimeWinrateTable {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* スマホ時も幅100%（既存仕様と整合） */
@media (max-width: 768px) {
  .table-scroll-wrapper #halftimeWinrateTable,
  .table-wrap #halftimeWinrateTable {
    width: 100%;
    max-width: none;
  }
}