/* ============================================================
   排行榜（班級 / 全校 × 中打 / 英打）— SPEC v3.0 第 4、6、9 節
   只用 css/style.css :root 既有 tokens，不新增色票。
   分頁按鈕沿用既有 .lesson-tab；卡片沿用 .card / --radius-card。
   ============================================================ */

.board-card {
  max-width: var(--content-max);
}

.board-topline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}

.board-topline h2 {
  margin: 0;
}

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

.board-scope-tabs {
  margin-top: 8px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--line);
}

.board-note {
  margin: 14px 0 10px;
}

/* --- 榜單 -------------------------------------------------------------- */
.board-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 72px 72px 64px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--panel);
  margin-bottom: 6px;
}

.board-head {
  border-color: var(--transparent);
  background: var(--transparent);
  padding-block: 2px;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}

.board-rank {
  color: var(--primary-deep);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.board-who {
  display: grid;
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.board-who-name {
  display: block;
  min-width: 0;
}

.board-who small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  /* 「N 次測驗 · 最佳 9/7 10:42」在桌機放同一副行 */
  white-space: nowrap;
}

.board-tests-word {
  font-style: normal;
}

.board-you {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--white);
  font-size: 11px;
  vertical-align: 2px;
}

.board-speed,
.board-acc,
.board-score {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.board-speed b {
  color: var(--primary-deep);
  font-size: 18px;
}

.board-acc {
  color: var(--muted);
}

.board-score {
  color: var(--amber-ink);
  font-weight: 700;
}

/* Top 3：金 / 主色 / 琥珀，全部取自既有 tokens */
.board-row.top-1 {
  border-color: var(--gold);
  background: var(--amber-soft);
  box-shadow: var(--shadow-card);
}

.board-row.top-2 {
  border-color: var(--line-strong);
  background: var(--panel2);
}

.board-row.top-3 {
  border-color: var(--amber);
  background: var(--panel2);
}

.board-row.top-1 .board-rank,
.board-row.top-2 .board-rank,
.board-row.top-3 .board-rank {
  font-size: 20px;
}

.board-row.is-self {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1.5px var(--primary-soft);
}

.board-empty {
  margin: 18px 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* --- 我的名次 ---------------------------------------------------------- */
.board-self {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-card);
  background: var(--primary-soft);
}

.board-self-label {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}

.board-self strong {
  color: var(--primary-deep);
  font-size: 22px;
}

.board-self-stat {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
}

.board-self-when {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.board-refresh {
  margin-top: 14px;
}

/* --- 中尺寸：561–900px -------------------------------------------------- */
@media (min-width: 561px) and (max-width: 900px) {
  .board-row {
    grid-template-columns: 40px minmax(0, 1fr) 62px 62px 56px;
  }
}

/* --- 小尺寸：≤560px ---------------------------------------------------- */
@media (max-width: 560px) {
  .board-topline {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 8px;
  }

  .board-row {
    grid-template-columns: 34px minmax(0, 1fr) 58px 52px;
    padding: 9px 10px;
  }

  .board-row .board-score {
    display: none;
  }

  .board-head .board-score {
    display: none;
  }

  .board-who {
    font-size: 14px;
  }

  /* 手機版副行只有 123px。截成省略號會把破紀錄時間吃掉（實測 371px 只剩
     「最佳 9/7 1…」），而那正是這一行的重點。
     作法：收掉「測驗」兩個字（136px → 114px，回到一行），真的還是放不下時
     讓它換行而不是截斷。 */
  .board-tests-word {
    display: none;
  }

  .board-who small {
    white-space: normal;
  }

  .board-speed b {
    font-size: 16px;
  }
}