/* ================================
   Utilities - 共通ユーティリティクラス
   ================================ */

/**
 * レスポンシブスクロール可能なGridレイアウト
 * モバイルで横スクロール可能なgridコンテナ用のユーティリティクラス
 * 
 * 使用例:
 * <div class="responsive-scrolling-grid halftime-winrate-grid">
 *   <div class="halftime-winrate-header">...</div>
 *   <div class="halftime-winrate-row">...</div>
 * </div>
 */
.responsive-scrolling-grid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .responsive-scrolling-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-xs);
  }

  .responsive-scrolling-grid > * {
    min-width: 0; /* gridアイテムの最小幅制約を解除 */
    width: 100%;
  }
}