/* =========================================================
   Results 系 共通スタイル（.res- 接頭辞で統一）
   - results.php（一覧カード）
   - results_detail.php（9ボール詳細グリッド）
   ========================================================= */
:root{
  /* 配色・サイズ */
  --res-bg: #f6f7f9;
  --res-fg: #222;
  --res-muted: #555;
  --res-border: #e5e7eb;
  --res-card-bg: #fff;
  --res-chip-bg: #edf2ff;
  --res-chip-fg: #2643a2;
  --res-chip-bd: #cdd8ff;
  --res-ace-bg: #fef3c7;
  --res-ace-fg: #92400e;
  --res-ace-bd: #fde68a;

  --res-blue: #2563eb;
  --res-pink: #db2777;

  --res-max-width: 980px;          /* 詳細画面の標準幅 */
  --res-max-width-narrow: 520px;   /* 一覧画面の基準幅 */

  /* 詳細ボード（9ボール表）の列サイズ系 */
  --res-gap: 6px;                  /* 列間ギャップ */
  --res-cell-size: 36px;           /* ボールセルの最小サイズ */
  --res-cell-font: 18px;           /* ボールセル内の数字フォント */
  --res-name-font: 14px;
  --res-meta-font: 12px;
  --res-score-col: 60px;           /* 右端の得点列の幅 */
  --res-label-col: 120px;          /* 左のP1/P2ラベル列の幅 */
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--res-bg); color: var(--res-fg); }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  line-height: 1.45;
}

/* コンテナ（幅違いは modifier で制御） */
.res-container { max-width: var(--res-max-width); width: 100%; margin: 0 auto; padding: 12px; }
.res-container--narrow { max-width: var(--res-max-width-narrow); }

/* トップバー（Menuボタン設置用） */
.res-topbar{
  position: sticky; top: 8px; z-index: 10;
  display:flex; gap:8px; align-items:center;
  margin-bottom:8px;
}
.res-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 12px; border-radius:999px; gap:6px;
  background:#111827; color:#fff; border:1px solid #0b1220; text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  font-size:14px; font-weight:700;
}
.res-btn:active{ transform: translateY(1px); }

/* 日付セクション */
.res-date-block { margin: 12px 0 18px; }
.res-date-header {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 10px; background: #fff; border: 1px solid var(--res-border); border-radius: 10px;
  font-weight: 700; position: sticky; top: 0; z-index: 1;
}
.res-date-title { }
.res-date-sub { font-size: 12px; color: var(--res-muted); margin-left: auto; }

/* カードリスト（一覧） */
.res-cards { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }

/* カード共通 */
.res-card {
  position: relative; background: var(--res-card-bg); border: 1px solid var(--res-border);
  border-radius: 16px; padding: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* カードヘッダ（Roundとメタ） */
.res-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.res-round {
  font-size: 12px; font-weight: 700; padding: 3px 8px; background: var(--res-chip-bg); color: var(--res-chip-fg);
  border: 1px solid var(--res-chip-bd); border-radius: 999px; white-space: nowrap;
}
.res-meta { font-size: 12px; color: var(--res-muted); margin-left: auto; text-align: right; }

/* プレイヤーブロック（一覧の左右） */
.res-players {
  display: grid; grid-template-columns: 1fr 64px 1fr; gap: 8px; align-items: stretch;
}
.res-player {
  padding: 10px; border-radius: 12px; background: #f1f5f9;
  display: grid; grid-template-rows: auto auto; gap: 6px; position: relative; min-width: 0;
}
.res-player--p1 .res-name { color: var(--res-blue); }
.res-player--p2 .res-name { color: var(--res-pink); }
.res-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-score { font-size: 22px; font-weight: 800; }
.res-vs { display: grid; place-items: center; font-size: 12px; color: #666; }
.res-vs > span { padding: 6px 10px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #fafafa; font-weight: 700; }

/* ACE バッジ（一覧：プレイヤーブロック右上／詳細：9番セル右上） */
.res-ace {
  position: absolute; top: -6px; right: -6px; transform: translate(-2px, 2px);
  font-size: 10px; font-weight: 900; padding: 4px 6px; border-radius: 999px;
  background: var(--res-ace-bg); color: var(--res-ace-fg); border: 1px solid var(--res-ace-bd);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* ===== 詳細ボード（9ボール×2段） ===== */
.res-game-card {
  position: relative; background: var(--res-card-bg); border: 1px solid var(--res-border);
  border-radius: 12px; padding: 10px 10px 12px; margin: 10px 0; box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.res-board-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: var(--res-meta-font); color: #666; margin-bottom: 8px;
}
.res-board-meta .res-meta-id { font-weight: 600; color: #444; }

.res-board {
  display: grid;
  grid-template-columns: var(--res-label-col) repeat(9, minmax(var(--res-cell-size), 1fr)) var(--res-score-col);
  gap: var(--res-gap);
  align-items: center;
  width: 100%;
}
.res-board-spacer { height: var(--res-cell-size); }

.res-row-label {
  display: flex; align-items: center; justify-content: flex-start;
  font-size: var(--res-name-font); font-weight: 600; color: #222; padding-left: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.res-ball-head, .res-score-head {
  height: var(--res-cell-size); display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #666;
  background: #f0f0f0; border: 1px solid #e2e2e2; border-radius: 8px;
}
.res-cell {
  height: var(--res-cell-size);
  min-width: var(--res-cell-size);
  display: grid; place-items: center;
  border-radius: 10px; background: #fafafa; border: 1px solid #e8e8e8;
  font-size: var(--res-cell-font); user-select: none; position: relative;
}
.res-cell[data-owned="p1"]      { background: #eaf3ff; border-color: #d2e6ff; }  /* 通常（P1） */
.res-cell[data-owned="p2"]      { background: #fff0ea; border-color: #ffd9c9; }  /* ← タイポ修正（先頭に . を追加） */
.res-cell[data-owned="p1-side"] { background: #bcd6ff; border-color: #96c1ff; }  /* サイド（P1） */
.res-cell[data-owned="p2-side"] { background: #ffc2a6; border-color: #ff9f75; }  /* サイド（P2） */

/* 右端の得点セル：フォント小さめ（常時） */
.res-score-cell {
  height: var(--res-cell-size);
  display: grid; place-items: center;
  border-radius: 10px; border: 1px solid #ddd; background: #f9f9f9; font-weight: 700;
  font-size: 16px;                      /* ← 得点だけ常時やや小さく */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.res-score-cell[data-side="p1"] { color: #205dbe; }
.res-score-cell[data-side="p2"] { color: #c85a20; }

/* 9番セルの ACE バッジ位置（詳細用） */
.res-cell[data-bn="9"] .res-ace { top: -6px; right: -6px; transform: none; padding: 2px 6px; }

/* === モバイル調整（幅520px以下）=== */
@media (max-width: 520px) {
  :root {
    --res-gap: 4px;           /* 余白を少し詰める */
    --res-cell-size: 26px;    /* ボールセル縮小（32→26） */
    --res-score-col: 44px;    /* 得点列やや細く（52→44） */
    --res-label-col: 64px;    /* ← 左ラベル列を更に圧縮（68→64） */
  }

  .res-ball-head, .res-score-head { font-size: 11px; }
  .res-row-label { font-size: 12px; }
  .res-score { font-size: 20px; }      /* 一覧側のスコアも微調整 */
  .res-name  { font-size: 13px; }

  /* 得点フォントをさらに小さくして収まりを確保 */
  .res-score-cell { font-size: 13px; }
}

/* === さらに狭い端末（幅380px以下）の保険 === */
@media (max-width: 380px) {
  :root {
    --res-gap: 3px;
    --res-cell-size: 24px;   /* 24pxまで縮小 */
    --res-score-col: 40px;   /* 得点列さらに細く */
    --res-label-col: 56px;   /* ← 左ラベル列さらに圧縮（60→56） */
  }

  .res-cell { font-size: 14px; }
  .res-row-label { font-size: 11.5px; }
}

/* === results.phpモーダルと同じクラス名でページにも適用（はみ出し防止）=== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden; /* 横スクロール抑止 */
}

img, svg, canvas, video {
  max-width: 100%;
  height: auto;
}

/* カード幅と中央寄せ（モーダル相当の見た目） */
.res-game-card{
  width: min(92vw, 980px);
  max-width: 980px;
  margin-inline: auto;
  border-radius: 16px;
}

/* メタ行は折り返し許可＋省略表記で溢れ対策 */
.res-board-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.res-board-meta span,
.res-meta-id{
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 9ボード本体：変数はモーダルCSSと同値。グリッド定義も保険で付与 */
.res-board{
  --res-label-col: 88px;
  --res-cell-size: 28px;
  --res-gap: 4px;
  --res-score-col: 52px;

  display: grid;
  grid-template-columns: var(--res-label-col)
                         repeat(9, var(--res-cell-size))
                         var(--res-score-col);
  gap: var(--res-gap);
  align-items: center;
  min-width: 0; /* 子要素縮小許可 */
}

/* ラベル/セル/ヘッダは中央寄せ・最小幅ゼロで縮む */
.res-row-label,
.res-ball-head,
.res-score-head,
.res-cell,
.res-score-cell{
  min-width: 0;
  display: grid;
  place-items: center;
}

/* テキストの省略（長いプレイヤー名など） */
.res-row-label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 4px; /* モーダル準拠の余白 */
}

/* 端末幅に応じたスケール（モーダルCSSの@mediaをそのまま移植） */
@media (max-width: 600px){
  .res-board{
    --res-label-col: 58px;
    --res-cell-size: 24px;
    --res-gap: 3px;
    --res-score-col: 40px;
  }
  .res-row-label{ font-size: 12px; }
  .res-ball-head,
  .res-score-head{ font-size: 11px; }
  .res-score-cell{ font-size: 13px; }
}
@media (max-width: 380px){
  .res-board{
    --res-label-col: 52px;
    --res-cell-size: 22px;
    --res-gap: 3px;
    --res-score-col: 38px;
  }
  .res-row-label{ font-size: 11.5px; }
}