/* SPSP ranking table shared styles.
 *
 * 全体ランキング (site/index.html), ローカルランキング (site/local/ranking.html),
 * シード生成 (site/seed/index.html) で共通利用する `<table id="ranktable">` のスタイル。
 *
 * 各ページは <link rel="stylesheet" href="(prefix)ranking-table.css"> で読み込み、
 * ページ固有のスタイル (header, method-tabs, footer 等) は別途各ページの <style> に置く。
 */

/* === Table base === */
#ranktable {
  width: 100%; border-collapse: collapse;
  background: #fff;
  table-layout: fixed;
  font-size: 13px;
}
/* 直接の子 th/td のみに適用 (= 入れ子の .tour-table 等が中に居ても影響しない). */
#ranktable > thead > tr > th {
  text-align: left; padding: 10px 8px;
  background: #fff; border-bottom: 2px solid #e5e7eb;
  font-size: 12px; color: #6b7280; text-transform: uppercase;
  user-select: none; position: sticky; top: var(--nav-height, 42px); z-index: 2;
  cursor: pointer; font-weight: 600;
}
#ranktable > thead > tr > th:hover { color: #dc2626; }
#ranktable > thead > tr > th.sortable::after { content: "↕"; opacity: 0.3; margin-left: 4px; font-size: 10px; }
#ranktable > thead > tr > th.sorted-asc::after { content: "↑"; opacity: 1; }
#ranktable > thead > tr > th.sorted-desc::after { content: "↓"; opacity: 1; }
#ranktable > tbody > tr > td { padding: 8px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
#ranktable tr.main-row { cursor: pointer; transition: background 0.1s; }
#ranktable tr.main-row:hover { background: #f9fafb; }
#ranktable tr.main-row.expanded { background: #ffffff; }
#ranktable > tbody > tr.detail-row { background: #fafafa; }
#ranktable > tbody > tr.detail-row > td { padding: 0; }
.detail-inner { padding: 16px 20px; }

/* === Column widths === */
#ranktable th.col-rank, #ranktable td.col-rank {
  width: 100px; text-align: right; font-variant-numeric: tabular-nums;
}
#ranktable th.col-display, #ranktable td.col-display {
  width: auto; min-width: 200px;
}
#ranktable th.col-score, #ranktable td.col-score {
  width: 100px; text-align: right; font-variant-numeric: tabular-nums;
}
#ranktable th.col-avg-rank, #ranktable td.col-avg-rank {
  width: 90px; text-align: right; font-variant-numeric: tabular-nums; color: #6b7280;
}
#ranktable th.col-tour-count, #ranktable td.col-tour-count {
  width: 70px; text-align: right;
}
#ranktable th.col-bt-weekday, #ranktable td.col-bt-weekday {
  width: 80px; text-align: center;
}
#ranktable th.col-tjpr-lv, #ranktable td.col-tjpr-lv {
  width: 70px; text-align: center;
}
#ranktable th.col-other-rank, #ranktable td.col-other-rank {
  width: 70px; text-align: right; color: #6b7280;
}
/* Local-only extra columns (= 参加 / 最終参加 / シリーズ pill) */
#ranktable th.col-n, #ranktable td.col-n {
  width: 60px; text-align: right; font-variant-numeric: tabular-nums; color: #6b7280;
}
#ranktable th.col-last, #ranktable td.col-last {
  width: 100px; text-align: center; font-variant-numeric: tabular-nums;
  color: #6b7280; font-size: 11px;
}

#ranktable td.col-score .raw {
  font-size: 10px; color: #9ca3af; margin-left: 6px;
}

/* Lv / 計測中 バッジは PC でも名前の横に表示 (スマホと同じ)。
   専用列 (tjpr_lv / bt_weekday) は columns 配列から除外済みなので display:none 不要。 */
.col-display .display-lv-mobile,
.col-display .display-gate-mobile { display: inline-block; }

/* col-display: 名前 (display-line) を必ず単独行、その下に top-tours 1 行 (省略) */
.col-display { min-width: 0; }
.col-display .display-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 2px;
  min-width: 0;
}
/* 名前の直後 (= 最初のバッジ) だけは少し余白を残す. */
.col-display .display-line > .player-name + * { margin-left: 6px; }
/* メイン使用キャラ絵文字 (= 名前の左). */
.main-char-emoji { margin-right: 2px; }

.top-tours {
  margin-top: 2px;
  font-size: 11px; color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; max-width: 100%;
  line-height: 1.3;
}
.top-tours a { color: #6b7280; text-decoration: none; }
.top-tours a:hover { color: #dc2626; text-decoration: underline; }
.top-tours .num {
  font-size: 0.9em; color: #6b7280; font-weight: 500;
  margin-left: 1px; font-variant-numeric: tabular-nums;
}
.top-tours .place {
  color: #111827; font-weight: 600; font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.top-tours .sep { color: #d1d5db; margin: 0 5px; }
.top-tours .tour-chip { display: inline; }

.lv-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600;
  background: #e5e7eb; color: #6b7280;
}
.lv-badge.lv-5 { background: #fef3c7; color: #92400e; }
.lv-badge.lv-4 { background: #ede9fe; color: #6b21a8; }
.lv-badge.lv-3 { background: #f3f4f6; color: #2563eb; }
.lv-badge.lv-2 { background: #dcfce7; color: #16a34a; }
.lv-badge.lv-1 { background: #f3f4f6; color: #6b7280; }

.gate-pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
}
/* 計測中 (= 2年で集計対象大会 3 未満. 灰色順位扱いと連動) */
.gate-pill.rookie  { background: #e5e7eb; color: #6b7280; }
.gate-pill.veteran { background: #e0e7ff; color: #3730a3; }

.yn-yes { color: #16a34a; }
.yn-no  { color: #dc2626; opacity: 0.7; }

.rank-frac { color: #6b7280; font-size: 11px; }
.global-rank-badge { color: #9ca3af; font-size: 10px; margin-left: 6px; }

/* 海外 / 全一 バッジ. padding を gate-pill より詰めて 2px 6px に.
   margin-left は display-line の gap (= 4px 8px) で吸収されるため設定しない. */
.overseas-badge {
  display: inline-block; padding: 1px 6px; border-radius: 9px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  background: #e5e7eb; color: #6b7280;
}
.zenichi-badge {
  display: inline-block; padding: 1px 6px; border-radius: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  background: #dc2626; color: #fff;
}
.zenichi-badge.zenichi-1 { background: #dc2626; }  /* 赤 */
.zenichi-badge.zenichi-2 { background: #f97316; }  /* オレンジ */
.zenichi-badge.zenichi-3 { background: #ec4899; }  /* ピンク */
.local-extras-mobile { display: none; color: #9ca3af; font-size: 10px; margin-left: 6px; }
@media (max-width: 720px) {
  .local-extras-mobile { display: inline; }
}
.player-name { color: #dc2626; font-weight: 500; text-decoration: none; }
.player-name:hover { text-decoration: underline; }
#ranktable tr.unranked { opacity: 0.55; }
#ranktable tr.unranked .player-name { color: #6b7280; }

/* 灰色勢 = 海外勢 (ホワイトリスト: site/data/overseas.json) + 計測中
   (= 2年で集計対象大会 3 未満、metadata.provisional). 順位は JP-only counter での
   相当順位 (= jp_counter+1) を表示し、背景を薄灰色 + 順位数字を薄灰色にして区別する. */
#ranktable tr.main-row.is-overseas,
#ranktable tr.main-row.is-provisional { background: #f5f5f5; }
#ranktable tr.main-row.is-overseas:hover,
#ranktable tr.main-row.is-provisional:hover { background: #ececec; }
#ranktable tr.main-row.is-overseas .col-rank,
#ranktable tr.main-row.is-overseas td.col-other-rank,
#ranktable tr.main-row.is-provisional .col-rank,
#ranktable tr.main-row.is-provisional td.col-other-rank { color: #b8b8b8; }
#ranktable tr.main-row.is-overseas .rank-frac,
#ranktable tr.main-row.is-provisional .rank-frac { color: #cfcfcf; }

.empty-msg {
  padding: 20px; text-align: center; color: #9ca3af; font-size: 13px;
}

/* === Mobile responsive (card layout) === */
@media (max-width: 720px) {
  .top-tours { font-size: 10px; }
  .top-tours .sep { margin: 0 4px; }

  /* Card layout: 3-col grid (rank big, name + meta center, avg-rank/score right) */
  #ranktable, #ranktable thead, #ranktable tbody, #ranktable tr, #ranktable td {
    display: block;
  }
  #ranktable { width: 100%; max-width: 100%; }
  #ranktable thead { display: none; }
  #ranktable tr.main-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 1px;
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
  }
  #ranktable tr.main-row td {
    padding: 0 !important; border: none; min-width: 0;
    text-align: left; width: auto;
  }
  #ranktable td.col-rank {
    grid-column: 1; grid-row: 1 / span 2;
    font-size: 18px; font-weight: 700; color: #111827;
    align-self: center; min-width: 28px;
  }
  .rank-frac { display: block; font-size: 9px; color: #9ca3af; font-weight: 400; line-height: 1.1; }
  #ranktable td.col-display {
    grid-column: 2; grid-row: 1 / span 2;
    align-self: center;
    font-size: 14px;
    display: flex; flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }
  /* col-display 内 Lv badge / gate-pill (mobile only) */
  .col-display .display-lv-mobile,
  .col-display .display-gate-mobile { display: inline-block; }
  /* 右側: 平均順位 (上) + 平均スコア (下) */
  #ranktable td.col-avg-rank {
    grid-column: 3; grid-row: 1;
    font-size: 13px; font-weight: 700; color: #dc2626;
    text-align: right; line-height: 1.1;
  }
  #ranktable td.col-score {
    grid-column: 3; grid-row: 2;
    font-size: 10px; color: #9ca3af;
    text-align: right; line-height: 1.1;
  }
  /* Mobile: 補助列は非表示 (display 内に statically 入れたものを使う) */
  #ranktable tr.main-row td.col-tjpr-lv,
  #ranktable tr.main-row td.col-tour-count,
  #ranktable tr.main-row td.col-bt-weekday,
  #ranktable tr.main-row td.col-other-rank,
  #ranktable tr.main-row td.col-n,
  #ranktable tr.main-row td.col-last {
    display: none !important;
  }

  /* Detail row (= 直接の子 td のみ scope, 中の .tour-table 等には影響しない) */
  #ranktable > tbody > tr.detail-row {
    background: #fafafa; width: 100%; max-width: 100%;
    box-sizing: border-box;
  }
  #ranktable > tbody > tr.detail-row > td {
    padding: 0; width: 100%; max-width: 100%;
    box-sizing: border-box; border: none;
  }
  .detail-inner { padding: 10px 8px; box-sizing: border-box; }
}

/* 超狭幅: iPhone SE 等 (= 380px 以下) */
@media (max-width: 380px) {
  #ranktable tr.main-row { padding: 9px 6px; column-gap: 6px; }
  #ranktable td.col-rank { font-size: 16px; min-width: 24px; }
  #ranktable td.col-display { font-size: 13px; }
  #ranktable td.col-avg-rank { font-size: 12px; }
  #ranktable td.col-score { font-size: 9px; }
}