/* ============================================================
   B.LEAGUE スタッツサイト 共通スタイル
   - モバイルファースト（基本 = スマホ幅 375px 想定、min-width で PC 調整）
   - 配色は白基調＋グレー罫線のデータ系。チームカラーは使わない
   - 外部CDN・Webフォント・アイコンフォントは使用しない
   ============================================================ */

:root {
  --c-text: #1b1f24;
  --c-muted: #5f6b76;
  --c-border: #dfe3e8;
  --c-border-strong: #c2c9d1;
  --c-bg: #ffffff;
  --c-bg-alt: #f5f7f9;
  --c-bg-head: #eceff3;
  --c-hover: #e4eefa;
  --c-accent: #1f4e79;

  /* サイトヘッダー（position:sticky）の高さ。ブレークポイントごとに実測値以上の値を入れる。
     .table-wrap の最大高さと、アンカーリンクの scroll-margin-top をこの1変数から算出する。
     ※ 表の thead は「.table-wrap という箱」に対して sticky しているので、
        thead の top はビューポート基準ではない。--header-h を足してはいけない（top:0 のまま）。 */
  --header-h: 80px;

  /* 表の左端固定列（#列）の幅。JS を使わないため CSS 変数で一元管理する */
  --sticky-1-w: 36px;
  --table-font: 13px;
  --cell-pad-y: 6px;
  --cell-pad-x: 7px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}

/* ページ自体は横スクロールさせない（横スクロールは .table-wrap の内側だけ） */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
}

img,
table {
  max-width: 100%;
}

a {
  color: var(--c-accent);
}

/* アンカーリンク（表の見出し → /glossary/#df-rating など）の飛び先が
   sticky ヘッダーの下に隠れないようにする */
[id] {
  scroll-margin-top: calc(var(--header-h) + 8px);
}

/* ---------- ヘッダー / フッター ---------- */

/* ヘッダーは画面上部に sticky 固定する（スクロール中も検索とナビが使える）。
   - 背景は完全に不透明（透過色・backdrop-filter は使わない。本文が透けるため）
   - z-index は 100。ヘッダー内の検索候補(.ps-list=50) > 表の sticky セル(1〜4) より前面。
     表の sticky セルがヘッダーの上に浮かないようにするための序列
   - 祖先に overflow:hidden があると sticky が効かないので、body 直下のまま動かさないこと */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-alt);
}

.site-header .wrap {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* 1段目: サイト名（左）と検索（右）を横並びにする。
   スマホは「サイト名＋虫眼鏡ボタン」、PC は「サイト名＋入力欄」。
   入力欄を開いたときだけ折り返して2行目に全幅で出す（ヘッダーが伸びるのは利用者の操作なのでよい）。 */
.site-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 10px;
}

/* サイトタイトルは2段。1行目=サイト名（大きく）、2行目=説明（小さく）。
   スマホでは高さを抑えるため2行目（.site-title-sub）を出さない */
.site-title {
  display: inline-block;
  color: var(--c-text);
  text-decoration: none;
}

.site-title-name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.site-title-sub {
  display: none; /* PC幅（min-width:768px）でだけ表示する */
  margin-top: 1px;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-muted);
  line-height: 1.3;
}

/* サイト内メニュー（横並び・スマホでは折り返す） */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 2px;
  font-size: 13px;
}

.site-nav a {
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

/* ---------- 選手検索（static/search.js） ----------
   ヘッダー（全ページ）とトップページの大型フォームで共通のスタイル。
   - スマホは虫眼鏡ボタンをタップして入力欄を開く。PC幅（min-width:768px）は常時表示
   - 候補リストは入力欄の直下に絶対配置。左右は入力欄に合わせるので画面幅を超えない
   - 入力欄のフォントは16px（iOSの自動ズーム防止）、行の高さは44px前後（タップしやすさ） */

.player-search-area {
  margin-top: 6px;
}

.player-search[hidden] {
  display: none;
}

.ps-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
  background: var(--c-bg);
  color: var(--c-accent);
  cursor: pointer;
}

.ps-field {
  display: none;
  position: relative;
  margin-top: 6px;
}

.player-search.is-open .ps-field,
.player-search.ps-always .ps-field {
  display: block;
}

.ps-input {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}

.ps-input:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

.ps-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 60vh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
  background: var(--c-bg);
}

.ps-list[hidden] {
  display: none;
}

.ps-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-height: 44px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
}

.ps-item:last-child {
  border-bottom: 0;
}

.ps-item.is-active,
.ps-item:hover {
  background: var(--c-hover);
}

.ps-name {
  font-weight: 700;
  color: var(--c-accent);
}

.ps-meta {
  font-size: 12px;
  color: var(--c-muted);
}

.ps-empty {
  padding: 12px 10px;
  color: var(--c-muted);
  font-size: 13px;
  list-style: none;
}

.ps-noscript {
  margin: 6px 0 0;
  font-size: 13px;
}

/* トップページの大型フォーム（h1 の直下・常時表示） */
.player-search-hero {
  margin: 14px 0 4px;
  max-width: 520px;
}

.player-search-hero .ps-field {
  margin-top: 0;
}

.player-search-hero .ps-input {
  height: 48px;
}

/* ヘッダー内の検索だけ、ラッパー2枚（.player-search-area / .player-search）を
   display:contents で「箱ごと消す」。こうすると虫眼鏡ボタンと入力欄が
   .site-header-row の直接の flex アイテムになり、
     ボタン → サイト名と同じ行の右端
     入力欄 → 開いたときだけ折り返して2行目に全幅
   をラッパーを増やさずに実現できる。
   ※ JS 未実行時は [hidden] が効いたままでなければならないので :not([hidden]) を付ける。 */
.site-header-row .player-search-area {
  display: contents;
}

.site-header-row .player-search:not([hidden]) {
  display: contents;
}

.site-header-row .ps-toggle {
  flex: 0 0 auto;
}

.site-header-row .ps-field {
  flex: 1 0 100%;
  margin-top: 6px;
  margin-bottom: 2px;
}

/* JS 無効時のフォールバック文言も1行使い切る（flex アイテムになるため） */
.site-header-row .ps-noscript {
  flex: 1 0 100%;
}

@media (min-width: 768px) {
  .ps-toggle {
    display: none;
  }

  .player-search .ps-field {
    display: block;
    max-width: 320px;
  }

  /* PC: 入力欄はサイト名の右側に横並びにする（折り返さない）。
     ヘッダーが1段ぶん低くなる */
  .site-header-row .ps-field {
    flex: 0 1 320px;
    margin-top: 0;
    margin-bottom: 0;
  }

  .player-search-hero .ps-field {
    max-width: none;
  }
}

/* ---------- パンくず ---------- */

.breadcrumb {
  font-size: 12px;
  color: var(--c-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: 6px;
  color: var(--c-border-strong);
}

.site-footer {
  margin-top: 32px;
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-alt);
  color: var(--c-muted);
  font-size: 13px;
}

.site-footer .wrap {
  padding-top: 16px;
  padding-bottom: 24px;
}

.site-footer p {
  margin: 4px 0;
}

/* ---------- 見出し ---------- */

h1 {
  font-size: 20px;
  line-height: 1.35;
  margin: 18px 0 4px;
}

h1 .season {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
  margin-top: 2px;
}

h2 {
  font-size: 16px;
  margin: 24px 0 8px;
  padding-left: 8px;
  border-left: 4px solid var(--c-accent);
}

h3 {
  font-size: 14px;
  margin: 16px 0 6px;
}

.section-note {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--c-muted);
}

.lead {
  margin: 10px 0 16px;
  font-size: 14px;
}

/* ---------- リンクリスト ---------- */

.link-list {
  margin: 8px 0 16px;
  padding-left: 1.2em;
  font-size: 14px;
}

.link-list li {
  margin: 4px 0;
}

.link-list-cols {
  columns: 2;
  column-gap: 16px;
}

.page-links {
  margin: 20px 0 0;
  font-size: 13px;
}

/* 選手ページの所属チーム表示 */
.player-meta {
  margin: 4px 0 12px;
  font-size: 14px;
}

.player-team + .player-team::before {
  content: " / ";
  color: var(--c-muted);
}

/* ---------- 用語解説 ---------- */

.glossary {
  margin: 0 0 20px;
}

.glossary dt {
  margin-top: 14px;
  font-weight: 700;
  font-size: 14px;
}

.glossary dd {
  margin: 4px 0 0;
  padding-left: 0;
  font-size: 14px;
  color: var(--c-text);
}

.glossary code {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-bg-alt);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* ---------- チーム概要カード ---------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.kpi {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-bg-alt);
  padding: 10px 12px;
}

.kpi-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c-muted);
}

.kpi-value {
  display: block;
  margin-top: 2px;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* リーグ順位の併記（例: (4位)）。kpi-value の直後に置く */
.kpi-sub {
  display: block;
  margin-top: -2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-muted);
}

/* スマホでは1行2列で折り返し、右端で切れないようにする */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.mini {
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--c-bg);
}

.mini-label {
  display: block;
  font-size: 11px;
  color: var(--c-muted);
}

.mini-value {
  display: block;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- 表（モバイル対応の肝） ----------
   .table-wrap の内側だけをスクロールさせ、
   左2列(#・選手名)を position:sticky で左固定、thead を上固定にする。
   sticky が効かない古い環境でも「横スクロールできる表」として読める。   */

/* 箱ごと sticky ヘッダーの下に収まる高さにする。
   thead 側で --header-h を足してはいけない（thead はこの箱に対して sticky なので top:0 のまま）。 */
.table-wrap {
  position: relative;
  max-width: 100%;
  max-height: calc(100vh - var(--header-h) - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-bg);
  margin: 0 0 8px;
}

/* sticky は border-collapse:collapse と相性が悪い（罫線がスクロールで消える）ため
   separate + border-spacing:0 とし、罫線はセル側の border で描く */
table.stats {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: var(--table-font);
}

table.stats th,
table.stats td {
  padding: var(--cell-pad-y) var(--cell-pad-x);
  white-space: nowrap;
  border-bottom: 1px solid var(--c-border);
  border-right: 1px solid #eef1f4;
  background: var(--c-bg); /* sticky セルが透けないように必ず不透明 */
}

table.stats tbody tr:last-child th,
table.stats tbody tr:last-child td {
  border-bottom: 0;
}

/* ヘッダー行（縦スクロール時に上固定） */
table.stats thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--c-bg-head);
  font-weight: 600;
  text-align: right;
  border-bottom: 2px solid var(--c-border-strong);
}

/* 左固定列 */
.sticky-col {
  position: sticky;
  z-index: 1;
}

.sticky-1 {
  left: 0;
  width: var(--sticky-1-w);
  min-width: var(--sticky-1-w);
  max-width: var(--sticky-1-w);
  text-align: right;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.sticky-2 {
  left: var(--sticky-1-w);
  text-align: left;
  font-weight: 500;
  /* 固定列の右端に境界線（スクロールしても見える） */
  box-shadow: 1px 0 0 0 var(--c-border-strong);
}

/* 選手名はスマホでは最大幅を制限し、はみ出しは省略表示（…）にする。
   固定列全体（#列36px + 選手名）で画面幅375pxの40%以内に収める。
   td直接のmax-widthはFirefoxのテーブルレイアウトで無視されるため、
   内側のspan(.cell-name)に付ける */
.sticky-2 .cell-name {
  display: block;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 左上の交差セルは左右両方 sticky。他より前面に出す */
table.stats thead th.sticky-col {
  z-index: 4;
}

table.stats thead th.sticky-1,
table.stats thead th.sticky-2 {
  text-align: left;
}

/* 交互色（zebra）。sticky 列も同じ色を明示指定して追従させる */
table.stats tbody tr:nth-child(even) th,
table.stats tbody tr:nth-child(even) td {
  background: var(--c-bg-alt);
}

/* 行ハイライト（PCはhover、スマホはタップ時の :active / :focus-within） */
table.stats tbody tr:hover th,
table.stats tbody tr:hover td,
table.stats tbody tr:active th,
table.stats tbody tr:active td,
table.stats tbody tr:focus-within th,
table.stats tbody tr:focus-within td {
  background: var(--c-hover);
}

/* 数値セル */
.c-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 文字セル（対戦相手・H/A など） */
.c-txt {
  text-align: left;
}

.c-name {
  white-space: nowrap;
}

/* 表ヘッダーから用語解説へのリンク（控えめな見た目にする） */
table.stats thead th a.gl {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--c-border-strong);
}

table.stats thead th a.gl:hover,
table.stats thead th a.gl:focus {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

/* 表内リンク（チーム名・選手名） */
table.stats td a {
  color: var(--c-accent);
  text-decoration: none;
}

table.stats td a:hover,
table.stats td a:focus {
  text-decoration: underline;
}

/* 左固定列の幅バリエーション（--sticky-1-w を表単位で上書きする）
   v-season       … 行頭が「シーズン」列（例: 2025-26）
   v-date         … 行頭が「日付」列（例: 2025-10-03、試合ログ）
   v-lineup       … 行頭が長いテキスト列（5人組・アシスト連携）
   v-state        … 行頭が点差状況の区分名
   v-metrics(-wide) … 1行だけの指標表（守備サマリー / OREB / ATO） */
table.stats.v-season {
  --sticky-1-w: 72px;
}

table.stats.v-date {
  --sticky-1-w: 92px;
}

/* 固定列は画面幅375pxの40%以内（=150px以内）に収める。5人の名前は折り返して表示する */
table.stats.v-lineup {
  --sticky-1-w: 148px;
}

table.stats.v-state {
  --sticky-1-w: 132px;
}

table.stats.v-metrics {
  --sticky-1-w: 104px;
}

table.stats.v-metrics-wide {
  --sticky-1-w: 60px;
}

table.stats.v-season .sticky-1,
table.stats.v-date .sticky-1,
table.stats.v-lineup .sticky-1,
table.stats.v-state .sticky-1,
table.stats.v-metrics .sticky-1,
table.stats.v-metrics-wide .sticky-1 {
  text-align: left;
  color: var(--c-text);
}

/* 行頭が長いテキストの表は、固定列の右端に境界線を出し、折り返しを許可する */
table.stats.v-lineup .sticky-1,
table.stats.v-state .sticky-1 {
  box-shadow: 1px 0 0 0 var(--c-border-strong);
}

table.stats.v-lineup .sticky-1 .cell-name,
table.stats.v-state .sticky-1 .cell-name {
  display: block;
  max-width: var(--sticky-1-w);
  white-space: normal;
  line-height: 1.35;
}

/* ---------- 少サンプル行（sample_flag が OK 以外） ---------- */

/* 参考値であることが分かるよう、行全体を薄いグレー文字にする（背景は変えない）。
   固定列の色は上の v-* 変種（table.stats.v-lineup .sticky-1 等）が指定しているため、
   それを上回る詳細度になるよう .sticky-col 付きのセレクタも併記する */
table.stats tbody tr.row-insufficient th,
table.stats tbody tr.row-insufficient td,
table.stats tbody tr.row-insufficient th.sticky-col,
table.stats tbody tr.row-insufficient td.sticky-col {
  color: var(--c-muted);
}

.badge-insufficient {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 400;
  white-space: nowrap;
  color: var(--c-muted);
}

/* ---------- チャンピオンシップ（CS）の行 ---------- */

/* レギュラーシーズンの行と見分けが付くよう、左に細いアクセント罫線と薄い背景を付ける。
   色は既存の配色トークンだけを使う（チームカラー・新しい色は増やさない）。 */
table.stats tbody tr.row-cs th,
table.stats tbody tr.row-cs td,
table.stats tbody tr.row-cs th.sticky-col,
table.stats tbody tr.row-cs td.sticky-col {
  background: var(--c-bg-alt);
}

table.stats tbody tr.row-cs th:first-child,
table.stats tbody tr.row-cs td:first-child {
  box-shadow: inset 3px 0 0 var(--c-accent);
}

/* ---------- 注意書き（少サンプルなど） ---------- */

.notice {
  margin: 10px 0 16px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  background: var(--c-bg-alt);
  font-size: 13px;
  color: var(--c-text);
}

.cross-links {
  margin: 4px 0 12px;
}

/* 印が付くセルは省略表示（…）にせず折り返す（印が消えないようにする） */
.cell-name.has-badge {
  white-space: normal;
}

.sticky-2 .cell-name.has-badge {
  max-width: 124px;
  overflow: visible;
  line-height: 1.35;
}

/* ---------- 折りたたみ（全件表示 / 試合単位の表） ---------- */

.table-details {
  margin: 0 0 8px;
}

.table-details > summary {
  cursor: pointer;
  padding: 6px 2px;
  font-size: 13px;
  color: var(--c-accent);
}

.table-details > summary:hover {
  text-decoration: underline;
}

/* ---------- 個人リーダーボード ---------- */

.leader-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 16px;
}

.leader-card h3 {
  margin-top: 12px;
  padding-left: 6px;
  border-left: 3px solid var(--c-border-strong);
}

/* リーダーボードは「順位 / 選手 / 数値」の3列。チーム名は独立した列にせず
   選手名セルの2行目に小さく出す（スマホ375pxで横スクロールさせないため）。
   sticky セルの背景・z-index には触らない（内側の .cell-name だけを調整）。 */
.leader-card table.stats .sticky-2 .cell-name {
  max-width: 156px;
  overflow: visible;
  white-space: normal;
  line-height: 1.3;
}

/* table.stats td a（詳細度 0,1,2）より後ろで勝てるようセレクタを合わせる */
.leader-team,
table.stats td a.leader-team {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--c-muted);
}

table.stats td a.leader-team:hover,
table.stats td a.leader-team:focus {
  color: var(--c-accent);
}

/* ---------- 表のソート（static/sort.js） ----------
   thead の th をクリック/Enter でソート。ソート中の列に ▲▼ を出す。
   sticky ヘッダーの背景・z-index には触らない（::after を足すだけ）。 */

table.stats thead th[tabindex] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* リンク(a.gl)はソートを発火しないので、カーソルもリンクのままにする */
table.stats thead th[tabindex] a.gl {
  cursor: pointer;
}

table.stats thead th[aria-sort]::after {
  margin-left: 3px;
  font-size: 9px;
  color: var(--c-accent);
}

table.stats thead th[aria-sort="ascending"]::after {
  content: "▲";
}

table.stats thead th[aria-sort="descending"]::after {
  content: "▼";
}

/* ---------- 広告枠 ----------
   config/site.json の adsense_client_id と ad_slots.<枠名> が両方入っているときだけ
   この要素が出力される（空の間は枠そのものを描画しない）。
   タグ有効時はレイアウトシフト防止のため固定高さを確保する。 */

.ad-slot {
  min-height: 100px;
  margin: 16px 0;
  overflow: hidden;
}

.ad-slot .adsbygoogle {
  display: block;
  width: 100%;
}

/* ---------- 自社商品・ブログ導線バナー常設枠 ---------- */

.promo-section {
  margin-top: 28px;
}

.promo-banner {
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-bg-alt);
}

.promo-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.promo-text {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--c-muted);
}

.promo-link {
  margin: 8px 0 0;
  font-size: 13px;
}

/* ---------- トップページ / 404 の導線カード ---------- */

.top-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 8px 0 16px;
}

/* カードは div。リンクにするのは見出し（ページ名）だけで、説明文は通常の文字色のまま。
   ただしモバイルで押しやすいよう、見出しリンクの疑似要素をカード全面に広げて
   カードのどこをタップしてもリンクが効くようにする（stretched link）。
   見た目は .kpi（チーム概要のKPIカード）と同じ系統に揃えている。 */
.top-card {
  position: relative;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-bg-alt);
}

.top-card:hover,
.top-card:focus-within {
  border-color: var(--c-accent);
  background: var(--c-hover);
}

.top-card-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.top-card-title a {
  text-decoration: none;
}

.top-card-title a:hover {
  text-decoration: underline;
}

/* カード全面をタップ領域にする */
.top-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
}

.top-card-text {
  display: block;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text);
}

/* トップページの指標名リンク（中黒区切りで折り返す） */
.metric-links {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.9;
}

/* シーズン一覧（/seasons/）のカード内リンク。
   .top-card-title a::after がカード全面を覆うので、
   カード内の個別リンクは position + z-index で前面に出してタップできるようにする。 */
.season-cards .season-card-links {
  position: relative;
  z-index: 1;
  margin: 6px 0 0;
  font-size: 13px;
}

/* 免責事項（全ページのフッター） */
.site-footer .disclaimer {
  color: var(--c-text);
}

/* ---------- PC 調整 ---------- */

@media (min-width: 768px) {
  :root {
    /* PC はサイト名が2段＋ナビ1行になるぶんヘッダーが高い（実測値以上の値を入れる） */
    --header-h: 96px;
    --sticky-1-w: 44px;
    --table-font: 14px;
    --cell-pad-y: 7px;
    --cell-pad-x: 10px;
  }

  body {
    font-size: 16px;
  }

  .site-header .wrap {
    padding-top: 10px;
    padding-bottom: 8px;
  }

  /* PC はサイト名を2段のまま出す（スマホでは非表示） */
  .site-title-sub {
    display: block;
  }

  .wrap {
    padding: 0 20px;
  }

  h1 {
    font-size: 26px;
  }

  h1 .season {
    font-size: 14px;
  }

  h2 {
    font-size: 19px;
    margin-top: 32px;
  }

  .kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .mini-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .leader-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .link-list-cols {
    columns: 4;
  }

  /* スマホは1列（既定）、タブレット以上は2列、広い画面は3列（末尾で指定） */
  .top-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-nav {
    margin-top: 4px;
    font-size: 14px;
    gap: 4px 18px;
  }

  .sticky-2 .cell-name {
    max-width: none;
  }

  .sticky-2 .cell-name.has-badge {
    max-width: none;
    white-space: nowrap;
  }

  .kpi-value {
    font-size: 26px;
  }

  table.stats.v-lineup {
    --sticky-1-w: 300px;
  }

  table.stats.v-state {
    --sticky-1-w: 160px;
  }

  table.stats.v-metrics {
    --sticky-1-w: 124px;
  }

  /* 点差状況の区分名はPC幅なら1行に収まる。5人組はPC幅でも折り返す（名前5つは長い） */
  table.stats.v-state .sticky-1 .cell-name {
    white-space: nowrap;
  }
}

/* 主なページのカードは広い画面で3列にする */
@media (min-width: 1000px) {
  .top-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* フッターのサイト情報リンク（プライバシーポリシー / 免責事項 / 運営者情報） */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  font-size: 12px;
}

/* ---------- クラブ一覧（/teams/） ----------

   シーズン非依存のクラブ一覧。列が1つ・比較用ではない・ソート不要なので
   表ではなくリストで組む（表にすると左固定列の幅 --sticky-1-w（既定36px）に
   クラブ名が収まらず、36px地点から始まる2列目と重なって両方読めなくなる）。
   モバイルファースト。1件は
     1行目 = クラブ名（そのクラブの最新シーズンのページへ）
     2行目 = シーズン別ページへのリンク（降順）
   の2行構成にし、タップ領域は44px前後を確保する。
   色は既存のトークン（--c-accent / --c-muted / --c-border / --c-bg-alt / --c-hover）だけを使う。 */

.club-list {
  margin: 8px 0 16px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-border);
}

.club-list li {
  padding: 5px 0 8px;
  border-bottom: 1px solid var(--c-border);
}

/* クラブ名。行いっぱいをタップ領域にする（上下padding込みで44px前後） */
.club-list .club-name {
  display: block;
  padding: 9px 2px;
  color: var(--c-accent);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

.club-list .club-name:hover,
.club-list .club-name:focus {
  text-decoration: underline;
}

/* 「B1 2024-25〜2025-26」など、現在B1にいないクラブの在籍シーズン注記 */
.club-list .club-span {
  display: block;
  padding: 0 2px 2px;
  font-size: 12px;
  color: var(--c-muted);
}

/* シーズン別ページへのリンク。折り返し可・1つ1つを44px前後のタップ領域にする */
.club-seasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.club-seasons a {
  display: inline-block;
  min-width: 80px;
  padding: 10px 12px;
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
  background: var(--c-bg-alt);
  color: var(--c-accent);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.club-seasons a:hover,
.club-seasons a:focus {
  background: var(--c-hover);
  text-decoration: underline;
}

/* PC は「クラブ名 … シーズンリンク」を1行に並べて縦の間延びを防ぐ。

   クラブ名の欄は **伸縮させず固定幅**（flex: 0 0 288px）にして、シーズンリンクを
   その右端から左寄せで始める。クラブ名の長さで開始位置が変わらないようにするため。
   （クラブ名を伸ばして右寄せにすると、在籍シーズン数がクラブごとに違う
   ＝降格クラブは少ない ので、バックフィルで10シーズンまで増えたときに
   行ごとに開始位置がバラバラになって読みにくい。）
   288px は現行の最長クラブ名（「名古屋ダイヤモンドドルフィンズ」等 15文字 / 17px ≒ 259px）に
   余裕を持たせた値。これより長い名前が来ても欄の中で折り返すだけで、開始位置は揃ったまま。 */
@media (min-width: 768px) {
  .club-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 16px;
  }

  .club-list .club-name {
    flex: 0 0 288px;
    min-width: 0;
    font-size: 17px;
  }

  .club-list .club-span {
    flex: 0 0 auto;
    padding-bottom: 0;
  }

  /* 残り幅を受け取り、中のリンクは左端から並ぶ（.club-seasons は justify-content 既定 = flex-start） */
  .club-seasons {
    flex: 1 1 auto;
  }
}

/* ---------- 選手ページ 試合ログのシーズン切替 ---------- */

/* プルダウンは HTML に hidden を付けて出力し、JS が起動できたときだけ外す
   （選手検索ウィジェットと同じ方式。JS無効の環境では動かないUIを見せない）。
   **display は絶対に指定しない。** 指定すると [hidden] の display:none を上書きして
   JS無効時にプルダウンが見えてしまう（.player-search が :not([hidden]) を
   付けているのと同じ理由）。ここは margin と文字サイズだけに留める。 */
.gamelog-picker {
  margin: 0 0 12px;
}

.gamelog-picker label {
  margin-right: 8px;
  font-size: 13px;
  color: var(--c-muted);
}

.gamelog-picker select {
  max-width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: inherit;
  font-size: 15px;
}


/* 節ごとのシーズン見出し（レギュラー用パネル／CS用パネルの中に置く）。
   プルダウンの選択肢と同じ文言なので、**JSが効いたときだけ JS 側で hidden にする**。
   JS無効時はこれが「どのシーズンの表か」を示す唯一の手がかりなので消してはいけない。
   .gamelog-picker と同じく **display は指定しない**（[hidden] を上書きしないため）。 */
.gamelog-season {
  margin: 4px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-muted);
}