/* ================================
   Halftime Winrate Grid Component
   ガイドライン 1.2/1.3 準拠: 非データ用途の table 禁止
   ================================ */

/* ハーフタイム勝率 Grid コンテナ */
/* ヘッダーと各行を縦に並べるため、1列のグリッド */
.halftime-winrate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: var(--space-lg) 0;
}

/* ヘッダー行 */
.halftime-winrate-header {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-primary);
  color: var(--color-surface);
  font-weight: 600;
  font-size: var(--font-sm);
  border-radius: 8px 8px 0 0;
}

.halftime-winrate-header__item {
  text-align: center;
}

/* データ行 */
.halftime-winrate-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-top: none;
  background-color: var(--color-surface);
  align-items: center;
}

.halftime-winrate-row:last-child {
  border-radius: 0 0 8px 8px;
}

.halftime-winrate-row__label {
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
}

.halftime-winrate-row__value {
  text-align: center;
  font-size: var(--font-sm);
  color: var(--color-text);
  padding: var(--space-xs);
  border-radius: 4px;
}

/* 勝率に応じた色分け（既存のクラス名を維持） */
.halftime-winrate-row__value.halftime-rate-81-100 {
  background-color: color-mix(in srgb, var(--color-win) 20%, transparent);
  color: var(--color-win);
  font-weight: 700;
}

.halftime-winrate-row__value.halftime-rate-61-80 {
  background-color: color-mix(in srgb, var(--color-win) 15%, transparent);
  color: var(--color-win);
  font-weight: 600;
}

.halftime-winrate-row__value.halftime-rate-41-60 {
  background-color: color-mix(in srgb, var(--color-draw) 20%, transparent);
  color: var(--color-text);
  font-weight: 500;
}

.halftime-winrate-row__value.halftime-rate-21-40 {
  background-color: color-mix(in srgb, var(--color-lose) 15%, transparent);
  color: var(--color-lose);
  font-weight: 600;
}

.halftime-winrate-row__value.halftime-rate-0-20 {
  background-color: color-mix(in srgb, var(--color-lose) 20%, transparent);
  color: var(--color-lose);
  font-weight: 700;
}

/* エラー表示用スタイル */
.halftime-winrate-row--empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-lg);
}

/* モバイル対応：gridレイアウトを維持し、横幅をcontainer内に収める */
/* 
 * レスポンシブスクロール機能は utilities.css の .responsive-scrolling-grid で提供されます。
 * HTMLで .halftime-winrate-grid に .responsive-scrolling-grid クラスを追加する必要があります。
 * （例: <div class="halftime-winrate-grid responsive-scrolling-grid">）
 */
@media (max-width: 768px) {
  .halftime-winrate-header,
  .halftime-winrate-row {
    gap: var(--space-xs);
    padding: var(--space-sm);
  }
}