/* Board tab and the shared leaderboard (lb- classes also used by the reveal). */

/* ---------- Leaderboard ---------- */
.lb { display: flex; flex-direction: column; gap: 8px; }

.lb-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.4ch auto minmax(0, 1fr) auto;
  grid-template-areas: "rank faces info score";
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  min-height: 56px;
  padding: 8px 12px 8px 8px;
  background: var(--ink-2);
  border-left: 6px solid var(--tc, transparent);
  min-width: 0;
}
/* Tappable rows (Board): a button that looks exactly like the plain row. */
button.lb-row {
  appearance: none;
  width: 100%;
  margin: 0;
  border: 0;
  border-left: 6px solid var(--tc, transparent);
  border-radius: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.lb-row.lb-tap:active { background: var(--ink-3); }
.lb-row.lb-tap:focus-visible { outline: 3px solid var(--butter); outline-offset: -3px; }
.lb-row.lb-tap.lb-me:focus-visible { outline-color: var(--butter); }
.lb-row.lb-me { outline: 3px solid var(--accent); outline-offset: -3px; }
.lb-row.lb-moving { z-index: 1; will-change: transform; }

.lb-rank { grid-area: rank; font-variant-numeric: tabular-nums; color: var(--butter); white-space: nowrap; }
.lb-faces { grid-area: faces; display: flex; gap: 0; }
.lb-faces .avatar { flex: none; }
.lb-info { grid-area: info; display: flex; flex-direction: column; min-width: 0; }
.lb-names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lb-thru { white-space: nowrap; }
.lb-score { grid-area: score; display: flex; flex-direction: column; align-items: flex-end; min-width: 0; text-align: right; }
.lb-vs, .lb-total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-vs.good { color: var(--mint); }
.lb-vs.bad { color: var(--pink); }
.lb-vs.even { color: var(--butter); }

/* Narrow phones: names and "thru" drop under the faces so nothing is squeezed. */
@media (max-width: 400px) {
  .lb-row {
    grid-template-columns: 2.4ch minmax(0, 1fr) auto;
    grid-template-areas:
      "rank faces score"
      "info info info";
  }
  .lb-info { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .lb-names { flex: 1 1 auto; }
}

.lb-flash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tc, var(--accent));
  opacity: 0;
  pointer-events: none;
  animation: lb-flash 900ms ease-out;
}
@keyframes lb-flash {
  0% { opacity: .55; }
  100% { opacity: 0; }
}

/* ---------- Board view ---------- */
.board .bd-main { gap: 24px; }
.board .stack > .stack { gap: 12px; }

.bd-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
}
.bd-face-name, .bd-face-sub {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-face.off .avatar { opacity: .4; filter: grayscale(1); outline-color: var(--butter-dim); }
.bd-face.off .bd-face-name { color: var(--butter-dim); }

.bd-feed { display: flex; flex-direction: column; }
.bd-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.bd-text { min-width: 0; overflow-wrap: anywhere; }
.bd-time { flex: none; font-variant-numeric: tabular-nums; }

.bd-foot { gap: 8px; padding-top: 8px; }
.bd-foot .btn { flex: 1 1 auto; }

/* ---------- Team sheet: score by hole ---------- */
.th { display: flex; flex-direction: column; gap: var(--gap); }

.th-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "faces names" "stats stats";
  align-items: center;
  gap: 8px 12px;
  padding: 8px 8px 8px 12px;
  background: var(--ink);
  border-left: 6px solid var(--tc, var(--accent));
}
.th-faces { grid-area: faces; display: flex; gap: 0; }
.th-faces .avatar { flex: none; }
.th-names { grid-area: names; min-width: 0; overflow-wrap: anywhere; }
.th-stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.th-stat { display: flex; flex-direction: column; min-width: 0; }
.th-label { white-space: nowrap; }
.th-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.th-num.rank { color: var(--butter); }
.th-num.good { color: var(--mint); }
.th-num.bad { color: var(--pink); }
.th-num.even { color: var(--butter); }

/* One grid per row so columns line up; member columns share what is left. No horizontal scroll at 320px. */
.th-table { display: flex; flex-direction: column; font-size: var(--fs-body); }
.th-row {
  display: grid;
  grid-template-columns: 2ch 3ch repeat(var(--n, 2), minmax(0, 1fr)) 4.2ch 5ch;
  column-gap: 4px;
  align-items: center;
  min-height: 36px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.th-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-hdr { min-height: 36px; font-weight: 700; }
.th-r { text-align: right; }
.th-sips { text-align: center; }
.th-hdr .th-name { text-align: center; }
.th-row .good { color: var(--mint); }
.th-row .bad { color: var(--pink); }
.th-row .even { color: var(--butter); }
.th-row.future { color: var(--butter-dim); }

.th-enter .th-row:not(.th-hdr) {
  animation: th-in 120ms ease-out backwards;
  animation-delay: calc(var(--i, 0) * 8ms);
}
@keyframes th-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.th-sec { display: flex; flex-direction: column; }
.th-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
}
.th-what { min-width: 0; overflow-wrap: anywhere; }
.th-line > span:last-child { flex: none; font-variant-numeric: tabular-nums; }