/* ==========================================================================
   KGES 2026 — the leaderboard (leaderboard/index.html, js/leaderboard.js).
   On top of css/styles.css, which the page also loads: the page is a .portal like the team
   dashboard and the staff pages (the hall photograph, the glow and the grid, the same depth as
   the landing page), its views are the admin panel's .tabs, and "No scores yet" is
   .portal__empty. These are only the pieces those do not have: the organiser's banner, the
   "not open yet" panel and the table.
   The staff pages' .table turns into a stack of cards on a phone. A leaderboard is read across a
   row, so this one keeps its rows and scrolls sideways inside its own frame instead, with the
   place and the team held still at the left.
   ========================================================================== */

.lb-head { margin-bottom: 26px; }
.lb-updated { font-variant-numeric: tabular-nums; }

/* The organiser looking while the leaderboard is hidden from everyone else. */
.lb-preview {
  margin: 0 0 6px; padding: 14px 18px; border-radius: 16px;
  border: 1px solid rgba(243, 140, 46, .5); background: rgba(243, 140, 46, .1);
  font-size: 14px; line-height: 1.55; color: var(--ink-75); text-wrap: pretty;
}
.lb-preview strong { color: var(--accent-2); font-weight: 700; }
.lb-preview a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.lb-preview a:hover { color: var(--accent-hover); }

/* Not open yet, and the first request failing: one calm card, the staff pages' .card surface. */
.lb-closed {
  max-width: 560px; padding: 30px 30px 28px; border-radius: 24px; border: 1px solid var(--line-10);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(3, 13, 39, .72) 38%);
  box-shadow: 0 40px 90px -60px rgba(0, 0, 0, .9);
}
.lb-closed__title { font-family: var(--font-display); font-stretch: 100%; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.lb-closed__text { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-60); text-wrap: pretty; }
.lb-closed__go { margin-top: 24px; }
.lb-closed--trouble { border-color: rgba(243, 140, 46, .4); }

.lb-tabs { margin: 22px 0 16px; }
.lb-lede { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--ink-55); }
.lb-empty { margin: 0; }
.lb-note { margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--ink-40); }

/* The table's frame. Solid, not see-through: the place and team cells stay put while the score
   columns slide under them, so they paint this same colour over whatever is passing beneath. */
.lb-scroll {
  --lb-bg: #071230;
  position: relative; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  border-radius: 20px; border: 1px solid var(--line-10); background: var(--lb-bg);
  box-shadow: 0 40px 90px -60px rgba(0, 0, 0, .9);
}
.lb-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* separate, not collapse: a collapsed border does not travel with a sticky cell. */
.lb-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.lb-table th, .lb-table td {
  padding: 14px 16px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--line-06); background: var(--lb-bg);
}
.lb-table thead th {
  padding-top: 13px; padding-bottom: 13px; border-bottom-color: var(--line-10);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; line-height: 1.35; color: var(--ink-45);
}
.lb-table tbody tr:last-child > * { border-bottom: 0; }

/* Place and team, held at the left. The team's left edge is the place column's width, so the two
   numbers below must stay equal (and again in the phone block). */
.lb-table .lb-c-rank { position: sticky; left: 0; z-index: 1; width: 64px; min-width: 64px; max-width: 64px; text-align: center; padding-left: 12px; padding-right: 4px; }
.lb-table th.lb-c-rank { text-align: center; }
.lb-table .lb-c-team { position: sticky; left: 64px; z-index: 1; min-width: 200px; max-width: 340px; box-shadow: inset -1px 0 0 var(--line-08); }
.lb-table tbody .lb-c-team { font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }

.lb-table .lb-c-num { min-width: 96px; text-align: right; white-space: nowrap; }
.lb-table thead .lb-c-num { white-space: normal; text-wrap: balance; }
.lb-table tbody .lb-c-num { color: var(--ink-75); }
.lb-table thead .lb-c-total { color: var(--accent); }
.lb-table tbody .lb-c-total { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.lb-none { color: var(--ink-30); }

.lb-rank {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 99px;
  font-size: 13px; font-weight: 700; color: var(--ink-55);
}
/* The first three places: a warm wash along the row and the place in orange, no more. */
.lb-table .lb-top > * { background: linear-gradient(var(--lb-tint), var(--lb-tint)), var(--lb-bg); }
.lb-top { --lb-tint: rgba(243, 140, 46, .055); }
.lb-top--1 { --lb-tint: rgba(243, 140, 46, .1); }
.lb-top--1 .lb-rank { background: var(--accent); color: var(--navy); font-weight: 800; }
.lb-top--2 .lb-rank, .lb-top--3 .lb-rank { color: var(--accent-2); box-shadow: inset 0 0 0 1px rgba(243, 140, 46, .55); }

/* A phone: place, team and total only; the per-round or per-module scores sit as one line under
   the team's name (js/leaderboard.js breakdown), so nothing scrolls sideways. */
.lb-brk { display: none; }
@media (max-width: 640px) {
  .lb-table .lb-c-mid { display: none; }
  .lb-brk { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--ink-55); }
  .lb-table .lb-c-team { position: static; min-width: 0; max-width: none; box-shadow: none; }
  .lb-table .lb-c-rank { position: static; }
}
@media (max-width: 767px) {
  .lb-head { margin-bottom: 18px; }
  .lb-closed { padding: 24px 22px 22px; }
  .lb-closed__title { font-size: 23px; }
  .lb-closed__go { width: 100%; }
  .lb-tabs { margin-top: 18px; }
  /* The admin panel's phone tabs are three to a row, each a third wide and on one line; module
     names are longer than its tab names, so here each takes the room its name needs and wraps. */
  .lb-tabs .tab { flex: 1 1 auto; white-space: normal; line-height: 1.25; }
  .lb-table { font-size: 13px; }
  .lb-table th, .lb-table td { padding: 12px 10px; }
  .lb-table .lb-c-rank { width: 48px; min-width: 48px; max-width: 48px; padding-left: 8px; padding-right: 2px; }
  .lb-table .lb-c-team { left: 48px; min-width: 10em; max-width: 46vw; }
  .lb-table tbody .lb-c-team { font-size: 14px; }
  .lb-table .lb-c-num { min-width: 76px; }
  .lb-table tbody .lb-c-total { font-size: 15px; }
  .lb-rank { min-width: 26px; height: 26px; padding: 0 5px; font-size: 12px; }
}