/* =====================================================================
   Leaderboards.
   ===================================================================== */

.board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.board-tab {
  appearance: none;
  cursor: pointer;
  min-height: 44px;   /* touch floor — these are the main navigation here */
  padding: 10px 15px;
  border: 1px solid var(--edge2);
  border-radius: 999px;
  background: var(--well);
  color: var(--soft);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
}
.board-tab:hover { border-color: var(--gold); color: var(--paper); }
.board-tab.sel {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 16%, var(--well));
  color: var(--paper);
}

.board-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.board-table th {
  text-align: left;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--edge2);
}
.board-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--edge2);
  vertical-align: middle;
}
.board-table th.num, .board-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.board-table tr:last-child td { border-bottom: 0; }
.board-table tr.is-you { background: color-mix(in srgb, var(--lantern) 10%, transparent); }

.board-name { font-weight: 600; }
.ai-tag {
  margin-left: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--dim);
  border: 1px solid var(--edge2);
  border-radius: 3px;
  padding: 1px 4px;
}

.belt-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--belt, var(--soft));
  border: 1px solid var(--belt, var(--edge2));
}

.board-you-pin { margin-top: 16px; }
.board-you-pin > p { margin: 0 0 6px; }

@media (max-width: 620px) {
  .board-table th:nth-child(3), .board-table td:nth-child(3) { display: none; }
  .board-table th, .board-table td { padding: 8px 6px; font-size: 13px; }
}