/* 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: 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;
}

/* PC: col-display 内の mobile-only badge (Lv, gate) は非表示。専用列で表示。 */
.col-display .display-lv-mobile,
.col-display .display-gate-mobile { display: none; }

/* 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 8px;
  min-width: 0;
}

.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;
}
.gate-pill.rookie  { background: #dcfce7; color: #15803d; }
.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; }
.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; }

.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; }
}