/* ================================
   match.html 専用スタイル
   ================================ */

/* 基本設定 */
/* cardの見た目（背景/ボーダー/影/パディング）は共通のLiquid Glass cardスタイルに任せる */
body[data-page="match"] .card {
  margin-bottom: 24px;
}

.match-shell[hidden] {
  display: none !important;
}

/* ページヘッダー */
.match-page-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.match-back-link {
  color: var(--color-primary);
  font-size: var(--font-sm);
  font-weight: 600;
  text-decoration: none;
}

.match-back-link:hover {
  color: var(--color-primary-dark);
}

.match-back-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 12px;
}

/* 試合カード（エンブレム・スコア・情報） */
.match-header {
  margin-bottom: 24px;
  padding-bottom: 24px;
  /* Fallback for older browsers */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.team-score-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.team-score-container .team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.team-score-container .team-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.team-score-container .team-name {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

.team-score-container .score {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text);
  min-width: 70px;
  text-align: center;
  line-height: 1.2;
}

.score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 90px;
}

.score-status {
  font-size: 12px;
  color: var(
    --color-text-light,
    color-mix(in srgb, var(--color-text) 65%, transparent)
  );
  text-align: center;
}

.score-period-label,
.score-period-value {
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  color: var(
    --color-text-light,
    color-mix(in srgb, var(--color-text) 65%, transparent)
  );
}

.score-period-value {
  font-weight: 600;
}

.match-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text);
  opacity: 0.8;
  line-height: 1.3;
}

.match-info-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

.match-info .league,
.match-info .round,
.match-info .season,
.match-info .stadium {
  white-space: nowrap;
}

/* タブ */
.match-tabs-card .tabs {
  margin-bottom: 20px;
}

/* index.html のタブスタイルと統一 */
.match-tabs .tab-btn {
  font-size: var(--font-md);
  padding: 12px 20px;
  border-radius: 5px;
  white-space: nowrap;
}

/* モバイル対応：タブボタンのサイズを縮小 */
@media (max-width: 768px) {
  .match-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .match-tabs .tab-btn {
    font-size: 13px;
    padding: 8px 12px;
    margin: 0;
    width: 100%;
  }
}

.match-tabs-card .tab-content {
  padding-top: 8px;
}

.match-tabs-card .section-title {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  text-align: left;
  margin-bottom: 12px;
  line-height: 1.2;
}

.match-tabs-card .section-subtitle {
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--color-text);
  line-height: 1.3;
}

/* Player stats */
.player-stats-ranking,
.player-stats-detail {
  margin-top: 24px;
}

.player-stats-ranking h3,
.player-stats-detail h3 {
  text-align: center;
}

.player-stats-metrics-switcher,
.player-stats-team-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  justify-content: center;
}

.player-stats-metric-btn,
.player-stats-team-btn {
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid
    color-mix(in srgb, var(--color-primary) 45%, var(--color-background));
  background-color: color-mix(
    in srgb,
    var(--color-primary) 5%,
    var(--color-background)
  );
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

/* モバイルでタブを2列グリッドに整列 */
@media (max-width: 768px) {
  .player-stats-metrics-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
  }

  /* 奇数個の場合、最後のボタンを中央寄せ（2-2-1のレイアウト） */
  .player-stats-metrics-switcher .player-stats-metric-btn:nth-child(odd):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: auto;
  }
}

.player-stats-metric-btn.is-active,
.player-stats-team-btn.is-active {
  background-color: var(--color-button);
  border-color: var(--color-button);
  color: var(--color-background);
}

.player-stats-metric-btn:focus-visible,
.player-stats-team-btn:focus-visible {
  outline: 2px solid var(--color-button);
  outline-offset: 2px;
}

.player-stats-ranking-table {
  width: 100%;
  min-width: 360px; /* スマホでもほぼ収まる程度まで縮小 */
  border-collapse: collapse;
  table-layout: fixed;
}

.player-stats-ranking-table th,
.player-stats-ranking-table td {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.3;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

.player-stats-ranking-table thead th {
  background-color: var(--color-button);
  color: var(--color-background);
  text-align: center;
}

.player-stats-ranking-table tbody td {
  text-align: center;
}

/* Rank 列：固定幅（1〜5程度の数字を表示するためコンパクトに） */
.player-stats-ranking-rank {
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
  font-weight: 700;
  text-align: center;
}

.player-stats-ranking-team {
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-stats-ranking-player {
  font-weight: 600;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 数値列：コンパクト幅＋右寄せ */
.player-stats-ranking-value {
  width: 3.8rem;
  font-weight: 700;
  text-align: right;
}

/* 後方互換性のため、旧tableスタイルもサポート（段階的に削除予定） */
/* 削除予定: v2.0.0 または 2025年Q2以降（Grid形式への移行完了後） */
.player-stats-detail-table {
  display: none; /* Grid形式に移行したため非表示 */
}

/* Player Statsタブのテーブルコンテナをcontainer内に収める */
/* 注意: Grid版（.player-stats-detail-grid）の横スクロールは player-stats-detail.css で管理 */
.player-stats-detail .table-container,
.player-stats-detail .table-scroll-wrapper,
.player-stats-detail .table-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.player-stats-detail-table th,
.player-stats-detail-table td {
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  text-align: center;
}

.player-stats-detail-table thead th {
  background-color: var(--color-button);
  color: var(--color-background);
}

.player-stats-detail-table td.player-stats-detail-name {
  text-align: left;
  max-width: 480px; /* 名前が十分読める程度に拡大（必要に応じて調整） */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-stats-detail-table tbody tr:nth-child(odd) {
  background-color: color-mix(
    in srgb,
    var(--color-primary) 4%,
    var(--color-background)
  );
}

/* 個人スタッツ詳細テーブル：列幅調整（セマンティッククラス使用） */
/* 固定単位を使用して列幅を設定し、選手名列をautoにして残りのスペースを埋める */

/* 背番号（No）列 - 固定幅 */
.player-stats-detail-table .col-number {
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
  text-align: center;
}

/* 選手名列 - 残りの幅を自動で確保 */
.player-stats-detail-table .col-player-name {
  width: auto;
  min-width: 120px;
  text-align: left;
}

/* ポジション（POS）列 - コンパクトに */
.player-stats-detail-table .col-position {
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 2.5rem;
  text-align: center;
}

/* 数値系カラム（出場時間、ゴール、アシストなど） - 固定幅 */
.player-stats-detail-table .col-numeric {
  width: 3.5rem;
  min-width: 3.5rem;
  max-width: 3.5rem;
  text-align: right;
}

/* 数値系カラム（パス数、ドリブル成功数、シュート数、デュエル勝利数） - 固定幅 */
/* 固定単位を使用して合計が100%を超えないようにする（4列に適用されるため） */
.player-stats-detail-table .col-numeric-wide {
  width: 4.5rem;
  min-width: 4.5rem;
  max-width: 4.5rem;
  text-align: right;
}

/* ラインナップ */
.match-lineups-grid {
  display: block;
  margin-bottom: 24px;
}

.match-lineup-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.3;
}

/* 6列構成のテーブル */
.match-lineup-table--combined {
  width: 100%;
}

.match-lineup-table th {
  background-color: var(--color-button);
  color: var(--color-background);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 4px;
  text-align: center;
  line-height: 1.2;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.match-lineup-table th.lineup-meta-heading {
  font-size: 11px;
  opacity: 0.75;
}

.match-lineup-table td {
  padding: 6px 4px;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lineups: 6列構成
   1: HOME背番号
   2: HOMEポジ
   3: HOME選手名
   4: AWAY背番号
   5: AWAYポジ
   6: AWAY選手名
*/
/* 背番号列：現在の体感幅の 40〜50% 程度に縮小 */
.match-lineup-table--combined th:nth-child(1),
.match-lineup-table--combined td:nth-child(1),
.match-lineup-table--combined th:nth-child(4),
.match-lineup-table--combined td:nth-child(4) {
  width: 26px;       /* 目安：20〜28px の範囲で調整可 */
  min-width: 24px;
  max-width: 32px;
  padding: 6px 2px;
  text-align: center;
  white-space: nowrap;
}

/* ポジション列：略称(GK/DF/MF/FW)が収まる最小限に */
.match-lineup-table--combined th:nth-child(2),
.match-lineup-table--combined td:nth-child(2),
.match-lineup-table--combined th:nth-child(5),
.match-lineup-table--combined td:nth-child(5) {
  width: 34px;       /* 目安：28〜36px の範囲で調整可 */
  min-width: 30px;
  max-width: 40px;
  padding: 6px 2px;
  text-align: center;
  white-space: nowrap;
}

/* 選手名列：残りの幅をほぼすべて使用 */
.match-lineup-table--combined th:nth-child(3),
.match-lineup-table--combined td:nth-child(3),
.match-lineup-table--combined th:nth-child(6),
.match-lineup-table--combined td:nth-child(6) {
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 6px 4px;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
}

/* チーム名見出し（colspan=3） */
.match-lineup-table--combined th.lineup-team-heading {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 4px;
}

.match-lineup-table th:last-child,
.match-lineup-table td:last-child {
  border-right-width: 1px;
}

.match-table__number,
.match-table__position {
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-weight: 600;
}

.match-table__position {
  font-size: 12px;
}

/* ラインナップ用は横スクロールさせず、列幅を詰める */
.match-lineups-grid .table-scroll-wrapper {
  max-width: 100%;
  overflow-x: visible;
}

.lineup .match-table__name a {
  color: var(--color-text);
  text-decoration: none;
}

/* ホバー時はbase.cssのデフォルトスタイルを使用 */

.lineup-section-title {
  margin-bottom: 8px;
}

.lineup-section {
  margin-top: 24px;
}

.lineup-section--starters {
  margin-top: 16px;
}

.lineup-section-title--center {
  text-align: center;
}

.lineup-coach {
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-text);
  display: flex;
  gap: 6px;
  line-height: 1.3;
}

.lineup-coach__label {
  font-weight: 600;
  color: var(--color-primary);
}

.match-lineups-coaches {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.match-lineup-table th.lineup-team-heading {
  font-size: 13px;
}

/* 試合情報ブロック */
.match-info-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.match-info-block {
  padding: 16px;
  border-radius: 12px;
  background-color: color-mix(
    in srgb,
    var(--color-primary) 3%,
    var(--color-background)
  );
}

.match-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.match-info-list__label {
  font-size: 13px;
  color: var(--color-text);
  opacity: 0.7;
  margin-right: 8px;
}

.match-info-list__value {
  font-weight: 600;
  color: var(--color-text);
  font-size: 13px;
}

.match-info-weather.is-hidden {
  display: none !important;
}

.match-formation-inline {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin-bottom: 24px;
}

.formation-card {
  flex: 1 1 0;
  padding: 12px 16px;
  border-radius: 10px;
  background-color: color-mix(
    in srgb,
    var(--color-primary) 4%,
    var(--color-background)
  );
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 8%, transparent);
  font-size: 14px;
}

.formation-card__team {
  font-weight: 700;
  margin-bottom: 4px;
}

.formation-card__value {
  font-size: 16px;
  font-weight: 700;
}

/* フォーメーション図 */
[data-formation-wrapper] {
  margin-bottom: 24px;
}

.formation-header {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.formation-toggle {
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  /* デフォルト色（JS側でチームカラーが設定される場合は上書きされる） */
  border: 1px solid
    color-mix(in srgb, var(--color-primary) 45%, var(--color-background));
  background-color: color-mix(
    in srgb,
    var(--color-primary) 5%,
    var(--color-background)
  );
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
  white-space: nowrap;
}

.formation-toggle:hover:not(:disabled) {
  background-color: color-mix(
    in srgb,
    var(--color-primary) 10%,
    var(--color-background)
  );
}

.formation-toggle.is-active {
  /* JS側でチームカラーが設定される場合は、inline styleが優先される */
  background-color: var(--color-button);
  border-color: var(--color-button);
  color: var(--color-background);
}

.formation-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.formation-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.formation-info {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--color-text);
}

.formation-pitch-wrapper {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.formation-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3; /* 縦長寄りに調整（上下の余白を確保） */
  background: linear-gradient(
    135deg,
    #22c55e 0%,
    #16a34a 50%,
    #15803d 100%
  );
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px
    color-mix(in srgb, var(--color-primary) 15%, transparent);
  min-height: 350px;
  max-height: 500px;
}

@media (min-width: 769px) {
  .formation-pitch {
    aspect-ratio: 16 / 10; /* PCでも少し縦長寄りに調整 */
  }
}

/* ピッチの線（センターライン、ペナルティエリアなど） */
.formation-pitch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.35);
  z-index: 0;
}

.formation-pitch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  z-index: 0;
}

/* ペナルティエリア（簡易版） */
.formation-pitch {
  background-image: 
    /* 上側ペナルティエリア */
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 11%,
      transparent 11%
    ),
    /* 下側ペナルティエリア */
    linear-gradient(
      to top,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 11%,
      transparent 11%
    ),
    /* ベースグラデーション（暗すぎないように調整） */
    linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
}

.formation-player {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 64px; /* 48px → 64px に拡大（名前の幅に合わせる） */
  min-width: 0;
  transform: translateX(-50%);
}

.formation-player__circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  position: relative;
}

.formation-player__number {
  /* 絶対配置はやめる（通常のブロック要素として縦並びの一番上に配置） */
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* フォールバック色（JS側でチームカラーが適用される） */
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  margin-bottom: 2px; /* 名前との間の余白 */
}

.formation-player__name {
  margin-top: 4px;
  font-size: 0.7rem;
  color: #ffffff;
  text-align: center;
  max-width: 64px; /* 48px → 64px に拡大（約33%増） */
  white-space: nowrap; /* 1行のみ表示、複数行は禁止 */
  overflow: hidden;
  text-overflow: ellipsis; /* 長い名前は1行目の最終文字を…で省略 */
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  line-height: 1.2;
}

.formation-player__stat {
  margin-top: 2px;
  font-size: 0.75rem;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  line-height: 1.2;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.4);
  display: inline-block;
  min-width: 32px;
}

.formation-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text);
  opacity: 0.7;
  font-size: 14px;
}

@media (max-width: 768px) {
  .formation-pitch {
    /* モバイルのみ：背景グランドの立幅を125%に拡大（上方向に延ばす） */
    min-height: 350px; /* 280px * 1.25 = 350px */
    max-height: 475px; /* 380px * 1.25 = 475px */
    aspect-ratio: 4 / 3.75; /* 縦幅を125%に拡大（4 / (3 * 1.25) = 4 / 3.75） */
    padding: 12px;
  }

  .formation-player {
    width: 54px; /* 44px → 54px に拡大 */
  }

  .formation-player__circle {
    width: 40px;
    height: 40px;
    font-size: 11px;
  }

  .formation-player__number {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .formation-player__name {
    font-size: 0.65rem;
    max-width: 54px; /* 44px → 54px に拡大 */
    white-space: nowrap; /* 1行のみ表示、複数行は禁止 */
    line-height: 1.2;
  }

  .formation-player__stat {
    font-size: 0.7rem;
    padding: 1px 4px;
    min-width: 28px;
  }

  .formation-toggle {
    padding: 6px 16px;
    font-size: 13px;
  }

  .formation-info {
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  .formation-pitch {
    /* モバイルのみ：背景グランドの立幅を125%に拡大（上方向に延ばす） */
    min-height: 300px; /* 240px * 1.25 = 300px */
    max-height: 400px; /* 320px * 1.25 = 400px */
    aspect-ratio: 4 / 3.75; /* 縦幅を125%に拡大（4 / (3 * 1.25) = 4 / 3.75） */
    padding: 10px;
  }

  .formation-player {
    width: 50px; /* 40px → 50px に拡大 */
  }

  .formation-player__circle {
    width: 36px;
    height: 36px;
    font-size: 10px;
  }

  .formation-player__number {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .formation-player__name {
    font-size: 0.6rem;
    max-width: 50px; /* 40px → 50px に拡大 */
    white-space: nowrap; /* 1行のみ表示、複数行は禁止 */
    line-height: 1.2;
  }

  .formation-player__stat {
    font-size: 0.65rem;
    padding: 1px 3px;
    min-width: 24px;
  }
}

/* イベントタイムライン */
.events-section {
  margin-bottom: 32px;
}

/* イベントタイムラインのチーム名表示（試合スタッツと同様の配置、VSは不要） */
.events-team-names {
  display: grid;
  grid-template-columns: 1.8fr minmax(0, 120px) 1.8fr; /* イベント列と揃える */
  align-items: center;
  font-weight: 600;
  font-size: 0.9rem;
  gap: 8px;
  margin-bottom: 16px;
  padding: 0 10px;
}

.events-team-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.events-team-name--home {
  text-align: right;
}

.events-team-name--away {
  text-align: left;
}

.events-team-name-spacer {
  /* 中央のスペーサー（VSは不要） */
  display: block;
  width: 100%;
  height: 0;
}

.events-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.events-row {
  display: grid;
  grid-template-columns: 1.8fr auto 1.8fr;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  width: 100%;
}

.events-cell {
  min-width: 0;
}

.events-cell--minute {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  opacity: 0.7;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}

/* イベントチップ（LiveScore/FlashScore風） */
.event-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
  font-size: 13px;
  line-height: 1.3;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.event-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.event-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.event-player-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
}

.event-description {
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.3;
  white-space: pre-line;
}

.event-chip--subst {
  color: var(--color-text);
}

.event-chip--yellow {
  color: #c58a00;
  border-color: #f4c542;
}

.event-chip--red {
  color: var(--color-accent);
  border-color: #e53935;
}

.event-chip--goal {
  color: var(--color-primary);
  border: 2px solid transparent;
  position: relative;
  isolation: isolate;
  /* 背景は Events側で固定するので、ここでは background を持たせない */
}

/* goalカード：Events内では2重backgroundで枠線表現（padding-box白 + border-box虹グラデ） */
.events-section .event-chip--goal {
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(
      90deg,
      #ff0000,
      #ff7a00,
      #ffef00,
      #00f11d,
      #00c5ff,
      #3b3bff,
      #a200ff
    ) border-box;
  background-clip: padding-box, border-box;
}

/* スタッツ */
.match-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.match-stats-header {
  display: grid;
  grid-template-columns: 1fr minmax(0, 120px) 1fr;
  align-items: center;
  font-weight: 600;
  font-size: 0.9rem;
  gap: 8px;
}

.match-stats-header__team {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-stats-header__team--home {
  text-align: right;
}

.match-stats-header__team--away {
  text-align: left;
}

.match-stats-header__spacer {
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.65;
}

.match-stats-grid {
  --match-stat-track: rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.match-stat-row {
  display: grid;
  /* PC: 中心ラベルを20%に縮小（40%の50%） */
  /* 横幅を可変にしてcontainerの幅に合わせる */
  /* 左右の空白幅を揃えるため、値セルとバーセルの幅を均等に */
  grid-template-columns: 1fr 32% 20% 32% 1fr;
  align-items: center;
  column-gap: var(--space-sm);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0; /* 最小幅制約を解除して可変にする */
}

.match-stat-cell {
  min-width: 0;
}

.match-stat-cell--value {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  line-height: 1.2;
}

.match-stat-cell--home-value {
  text-align: right;
}

.match-stat-cell--away-value {
  text-align: left;
}

.match-stat-label {
  font-size: 0.8rem;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.3;
  padding: 0 4px; /* PCでも文字とチャートバーが重ならないように調整 */
  min-width: 0; /* テキストオーバーフローを防ぐ */
  overflow-wrap: break-word; /* 長いテキストを折り返す */
}

/* ポジションヘッダー行（バタフライチャートのヘッダー） */
.compare-positions-row {
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-border, #d9e1ee);
  padding-bottom: 8px;
}

.compare-positions-cell {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text, #333);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.compare-positions-cell--left {
  grid-column: 2;
}

.compare-positions-cell--right {
  grid-column: 4;
}

.compare-positions-label {
  /* 中央ラベル列（20%）に配置、既存の項目名と同じフォント感 */
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text, #333);
  text-align: center;
}

/* ポジション行の値セルは中央揃えで表示 */
.match-stat-cell--position {
  text-align: center !important;
}


.match-stat-cell--bar {
  display: flex;
  align-items: center;
}

.match-stat-bar {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--match-stat-track);
}

.match-stat-bar--home::before,
.match-stat-bar--away::before {
  content: "";
  position: absolute;
  inset: 0;
}

.match-stat-bar--home::before {
  left: auto;
  right: 0;
  width: calc(var(--value, 0) * 1%);
  background-color: var(--bar-color, var(--color-primary));
}

.match-stat-bar--away::before {
  left: 0;
  right: auto;
  width: calc(var(--value, 0) * 1%);
  background-color: var(--bar-color, var(--color-accent, #ff5a5f));
}

.match-stat-value {
  font-weight: 600;
}

@media (max-width: 768px) {
  .match-stats-grid {
    width: 100%;
    max-width: 100%;
    overflow-x: visible; /* 横スクロールを無効化、container内に収める */
  }

  .match-stat-row {
    /* ガイドライン 3.2 準拠（Mobile）: 左右の空白幅を揃えるため、値セルとバーセルの幅を均等に */
    grid-template-columns: 1fr 22% 36% 22% 1fr;
    column-gap: var(--space-xs);
    width: 100%;
    max-width: 100%;
    /* min-widthを削除して横幅を可変にする */
  }

  /* モバイルでセルテキストの折り返しを有効化 */
  .match-stat-cell,
  .match-stat-label {
    white-space: normal; /* nowrap を上書き */
    overflow: visible; /* 切り落としを回避 */
    word-wrap: break-word;
    word-break: break-word;
  }

  .match-stat-cell--value {
    font-size: 0.75rem;
  }

  .match-stat-label {
    font-size: 0.75rem;
    padding-inline: 4px; /* 文字とチャートバーが重ならないようにpaddingを増やす */
    min-width: 0; /* テキストオーバーフローを防ぐ */
    overflow-wrap: break-word; /* 長いテキストを折り返す */
  }

  /* モバイルでのポジションヘッダー行 */
  .compare-positions-cell {
    font-size: 0.75rem;
  }

  .compare-positions-label {
    font-size: 0.75rem;
  }

  .match-stat-bar {
    height: 6px;
  }
}

.stats-empty-message {
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: var(
    --color-text-light,
    color-mix(in srgb, var(--color-text) 65%, transparent)
  );
}

/* エラー表示 */
.match-error {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-error);
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: 1.4;
  padding: var(--space-lg);
  margin-bottom: 24px;
}

.match-empty {
  font-size: 13px;
  color: var(--color-text);
  opacity: 0.75;
  display: block;
  padding: 6px 0;
  line-height: 1.3;
}

@media (max-width: 768px) {
  /* スマホでも Rank / Value はコンパクトな幅を維持する */
  .player-stats-ranking-rank {
    width: 2.5rem;
    min-width: 2.5rem;
    max-width: 2.5rem;
  }

  .player-stats-ranking-value {
    width: 3.4rem;
  }

  .player-stats-detail-table {
    width: 100%;
    max-width: 100%;
  }

  .player-stats-detail-name {
    max-width: none; /* スマホでは名前カラムの幅制限を外す */
  }

  /* モバイルでは列幅を少しコンパクトに（4項目なので横スクロール不要） */
  .player-stats-detail-table .col-number {
    width: 2.5rem;
    min-width: 2.5rem;
    max-width: 2.5rem;
  }

  .player-stats-detail-table .col-numeric {
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
  }

  .player-stats-detail-table .col-numeric-wide {
    width: 4rem;
    min-width: 4rem;
    max-width: 4rem;
  }

  .player-stats-detail-table .col-player-name {
    min-width: 100px; /* モバイルでは最小幅を少し小さく */
  }

  /* Player Statsタブのテーブルコンテナはモバイルで横スクロール不可 */
  /* 注意: Grid版（.player-stats-detail-grid）の横スクロールは player-stats-detail.css で管理 */
}

/* レスポンシブ */
/* Mobile: 375px - 768px */
@media (max-width: 768px) {

  .team-score-container {
    gap: 8px;
  }

  .team-score-container .team-logo {
    width: 48px;
    height: 48px;
  }

  .team-score-container .team-name {
    font-size: 12px;
  }

  .team-score-container .score {
    font-size: 1.5rem;
    min-width: 60px;
  }

  .match-info {
    font-size: 12px;
  }

  .score-block {
    gap: 1px;
  }

  .score-status,
  .score-period-label,
  .score-period-value {
    font-size: 11px;
  }

  .match-lineups-grid {
    /* 1テーブル6列構成のため、gridは不要 */
  }

  .match-lineup-table {
    font-size: 13px;
  }

  .match-lineup-table th,
  .match-lineup-table td {
    padding: var(--space-xxs) var(--space-xs);
  }

  .match-lineup-table--combined th:nth-child(1),
  .match-lineup-table--combined td:nth-child(1),
  .match-lineup-table--combined th:nth-child(4),
  .match-lineup-table--combined td:nth-child(4) {
    width: 22px;
    min-width: 20px;
    max-width: 26px;
  }

  .match-lineup-table--combined th:nth-child(2),
  .match-lineup-table--combined td:nth-child(2),
  .match-lineup-table--combined th:nth-child(5),
  .match-lineup-table--combined td:nth-child(5) {
    width: 30px;
    min-width: 26px;
    max-width: 34px;
  }

  .match-lineup-table--combined th:nth-child(3),
  .match-lineup-table--combined td:nth-child(3),
  .match-lineup-table--combined th:nth-child(6),
  .match-lineup-table--combined td:nth-child(6) {
    width: auto;
    min-width: 0;
    /* モバイルでは横幅がさらにタイトなので折り返し前提（white-space: normal はベーススタイルから継承） */
  }

  .events-row {
    grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1.4fr);
    gap: 4px;
    align-items: center;
  }

  .event-chip {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    padding: 6px 10px;
    font-size: 12px;
  }

  .match-formation-inline {
    gap: 8px;
  }

  .formation-card {
    padding: 10px;
    font-size: 12px;
  }

  .formation-card__value {
    font-size: 14px;
  }
}

/* 横スクロール防止 */
body[data-page="match"] {
  overflow-x: hidden;
}

.match-lineups-grid .table-scroll-wrapper,
.match-lineups-grid .table-wrap {
  overflow-x: visible;
}

.match-lineup-table {
  width: 100%;
  max-width: 100%;
}

/* 試合詳細ページでは共通の .match-table 最小幅(1100px)を無効化 */
body[data-page="match"] .match-table {
  min-width: 0;
}

/* =================================================
   match-tabs-card内のセクションタイトルスタイル
   ================================================= */
body[data-page="match"] .match-tabs-card > .tab-content > .section-title {
  margin: 0 0 16px;
}

/* =================================================
   Match page: separate container and cards
   (remove outer card, keep inner liquid glass cards)
   ================================================= */

.match-tabs-card {
  display: flex;
  flex-direction: column;
  gap: 24px; /* header card と tabs card の間隔 */
}

/* 以前 .match-header にあった「カード内の下線」系は残してOKだが、
   container化するので余白だけ整える */
.match-header.container {
  margin-bottom: 0; /* 親gapで管理する */
}

/* 既存：match-tabs-card .tabs { margin-bottom: 20px; } はそのままでOK */

/* =================================================
   Fix: match tab content is clipped by fixed height / overflow
   Scope: match page only
   ================================================= */

/* layout.cssの.card-slider__viewport { overflow: hidden; } をmatchページ限定で上書き
   横スライドは維持（overflow-x: hidden）、縦方向だけvisibleにして内容が伸びるようにする */
body[data-page="match"] .card-slider[data-card-slider="match"] .card-slider__viewport {
  overflow-x: hidden;
  overflow-y: visible;
  height: auto;
  max-height: none;
}

/* 念のため（もしまだ切れる場合の保険） */
body[data-page="match"] .card-slider[data-card-slider="match"] .card-slider__track,
body[data-page="match"] .card-slider[data-card-slider="match"] .card-slider__panel {
  height: auto;
  max-height: none;
}

/* match slider: 4 panels */
/* hidden属性があってもdisplayを維持してアニメーションを有効にする */
body[data-page="match"] .card-slider[data-card-slider="match"] .card-slider__panel[hidden] {
  display: block !important;
  visibility: hidden;
}

body[data-page="match"] .card-slider[data-card-slider="match"] .card-slider__track {
  transform: translateX(0%);
}

body[data-page="match"]
  .card-slider[data-card-slider="match"][data-active="events"]
  .card-slider__track {
  transform: translateX(-100%);
}

body[data-page="match"]
  .card-slider[data-card-slider="match"][data-active="stats"]
  .card-slider__track {
  transform: translateX(-200%);
}

body[data-page="match"]
  .card-slider[data-card-slider="match"][data-active="player-stats"]
  .card-slider__track {
  transform: translateX(-300%);
}

/* 共通.card側に overflow: hidden がある場合の保険 */
body[data-page="match"] .card {
  overflow: visible;
}

/* 切れてる要素の親要素にも上書き（予防的） */
body[data-page="match"] .lineup-section,
body[data-page="match"] .formation-pitch-wrapper,
body[data-page="match"] .match-lineups-grid {
  height: auto;
  max-height: none;
  overflow: visible;
}

/* 最後のcard-block内のcontainerのmargin-bottomを0にして、影が見えないようにする */
body[data-page="match"] .card-slider__panel .card-block:last-child .container {
  margin-bottom: 0;
}

/* ページタイトルスタイル */
body[data-page="match"] .match-page-title__league::after {
  content: " / ";
}

body[data-page="match"] .match-page-title__round {
  white-space: nowrap;
}

/* モバイルで改行 */
@media (max-width: 768px) {
  body[data-page="match"] .match-page-title__league::after {
    content: "";
  }
  
  body[data-page="match"] .match-page-title__round {
    display: block;
    margin-top: 4px;
  }
}