/* GameCraft NTL Leaderboard
 *
 * Own prefix (gc-lb) rather than reusing ce-ntl__, so this can sit on a test
 * page next to the existing leaderboard without either one's styles leaking
 * into the other. Colours match CE's: #d13237 red, #071b37 navy, #17b8a6 teal
 * for averages.
 */

.gc-lb {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 24px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  box-sizing: border-box;
}

.gc-lb--error {
  border-color: #f3c6c8;
  background: #fff7f7;
}

.gc-lb__title {
  margin: 0 0 20px;
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
}
.gc-lb__title span { color: #d13237; }

/* ── Period tabs ─────────────────────────────────────────────────────── */
.gc-lb__tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.gc-lb__tab {
  appearance: none;
  background: #f8f8f8;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 26px;
  color: #333;
  cursor: pointer;
  text-align: center;
  transition: background .2s, border-color .2s, color .2s;
}
.gc-lb__tab:hover { background: #f0f0f0; border-color: #ccc; }
.gc-lb__tab.is-active {
  background: #d13237;
  border-color: #d13237;
  color: #fff;
}

.gc-lb__tab-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .7;
}
.gc-lb__tab-name  { display: block; font-size: 17px; font-weight: 700; }
.gc-lb__tab-dates { display: block; font-size: 11px; opacity: .7; margin-top: 2px; }

/* ── Panels and the card grid ────────────────────────────────────────── */
.gc-lb__panel { display: none; }
.gc-lb__panel.is-active { display: block; }

.gc-lb__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.gc-lb__card {
  position: relative;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 16px 12px 12px;
  overflow: hidden;
}
.gc-lb__card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: 5px 5px 0 0;
  background: #0f2244;
}
.gc-lb__card--cumulative::before { background: #d13237; }
.gc-lb__card--average::before    { background: #17b8a6; }

.gc-lb__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #0f2244;
}
.gc-lb__card--cumulative .gc-lb__kicker { color: #d13237; }
.gc-lb__card--average    .gc-lb__kicker { color: #0c7867; }

.gc-lb__card h4 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: #1a1a1a;
  border-bottom: 2px solid #0f2244;
}
.gc-lb__card--cumulative h4 { border-bottom-color: #d13237; }
.gc-lb__card--average    h4 { border-bottom-color: #17b8a6; }

.gc-lb__sub {
  font-weight: 400;
  font-size: 12px;
  text-transform: none;
  color: #666;
}

.gc-lb__day-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #0f2244;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Rows ────────────────────────────────────────────────────────────── */
.gc-lb__list { list-style: none; margin: 0; padding: 0; }

.gc-lb__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  font-size: 15px;
}
.gc-lb__row:last-child { margin-bottom: 0; }

.gc-lb__rank {
  flex: 0 0 auto;
  min-width: 30px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  background: #d13237;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gold, silver, bronze by RANK VALUE, not row position.
   nth-child() would give two teams tied for 2nd a silver and a bronze — which
   is precisely the unfairness the tie handling exists to remove, reappearing
   as a colour. The rank class is emitted server-side for this reason. */
.gc-lb__rank--1 { background: #ffd700; color: #1a1a1a; }
.gc-lb__rank--2 { background: #c0c0c0; color: #1a1a1a; }
.gc-lb__rank--3 { background: #cd7f32; color: #fff; }

.gc-lb__team {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 0 8px;
}

.gc-lb__name {
  font-weight: 600;
  font-size: 14px;
  color: #1a1a1a;
  overflow-wrap: anywhere;
}

.gc-lb__league,
.gc-lb__games,
.gc-lb__tie-note {
  font-size: 11px;
  margin-top: 3px;
  width: fit-content;
}
.gc-lb__league {
  color: #666;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 4px;
}
.gc-lb__games { color: #888; }

/* A tie is stated in words as well as the T prefix — a repeated rank number
   otherwise reads as a rendering bug. */
.gc-lb__tie-note {
  color: #0c7867;
  background: #e6f7f4;
  border: 1px solid #b7e8dc;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.gc-lb__score {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 13px;
  color: #d13237;
  background: #fff5f5;
  border: 1px solid #ffcccc;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.gc-lb__card--average .gc-lb__score {
  color: #0b5c50;
  background: #e6f7f4;
  border-color: #b7e8dc;
}

.gc-lb__prize {
  flex: 0 0 auto;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #0f2244;
  white-space: nowrap;
}

/* Displaced by the one-prize rule — still readable, clearly not winning. */
.gc-lb__row.is-ineligible {
  opacity: .42;
  filter: grayscale(60%);
  cursor: help;
}
.gc-lb__rank--out {
  background: #999;
  color: #fff;
  font-weight: 700;
}

.gc-lb__empty { color: #999; font-size: 14px; text-align: center; padding: 14px 0; }

.gc-lb__foot {
  margin: 22px 0 0;
  text-align: center;
  font-size: 11px;
  color: #999;
}

/* ── Narrow screens ──────────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
  .gc-lb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .gc-lb { padding: 16px; }
  .gc-lb__grid { grid-template-columns: 1fr; }
  .gc-lb__title { font-size: 22px; }
  .gc-lb__tab { padding: 10px 16px; }
  .gc-lb__tab-name { font-size: 15px; }
  .gc-lb__league { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   0.2.0 — header, archived dropdown, team detail
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header row ──────────────────────────────────────────────────────── */
.gc-lb__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  margin-bottom: 20px;
}
.gc-lb__head .gc-lb__title { margin: 0; }

.gc-lb__export {
  position: absolute;
  right: 0;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #071b37;
  background: #f1f4f8;
  border: 1px solid #d7dee8;
  border-radius: 6px;
  padding: 7px 14px;
  white-space: nowrap;
}
.gc-lb__export:hover { background: #e7edf5; color: #071b37; }

/* On a phone the absolute position would sit on top of the title. */
@media (max-width: 640px) {
  .gc-lb__head { flex-direction: column; gap: 10px; }
  .gc-lb__export { position: static; }
}

/* ── Archived dropdown ───────────────────────────────────────────────── */
.gc-lb__archive { position: relative; }

.gc-lb__tab--archive {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
}
.gc-lb__caret { font-size: 11px; opacity: .8; }

.gc-lb__archive-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  z-index: 30;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gc-lb__archive-menu[hidden] { display: none; }

.gc-lb__archive-item {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.gc-lb__archive-item:hover { background: #f4f4f4; }

.gc-lb__archive-note {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: #fbf7ee;
  border: 1px solid #efe2c8;
  border-radius: 8px;
  font-size: 13px;
  color: #7a6433;
  text-align: center;
}

.gc-lb__loading {
  text-align: center;
  color: #777;
  font-size: 14px;
  padding: 28px 0;
}

/* ── Clickable rows ──────────────────────────────────────────────────── */
.gc-lb__row[data-team] { cursor: pointer; }
.gc-lb__row[data-team]:hover { background: #f7f9fc; }
.gc-lb__row[data-team]:focus-visible {
  outline: 2px solid #17b8a6;
  outline-offset: -2px;
}

.gc-lb__reason {
  display: block;
  font-size: 11px;
  color: #8a8a8a;
  line-height: 1.35;
  margin-top: 3px;
}

/* ── Team detail drawer ──────────────────────────────────────────────────
   Slides in from the right rather than appearing over the middle of the
   board, so the standings stay visible behind it and the panel reads as
   somewhere you went rather than something that interrupted you. */
.gc-lb__modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
}
.gc-lb__modal[hidden] { display: none; }

.gc-lb__modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7,27,55,.5);
  opacity: 0;
  transition: opacity .3s ease;
}
.gc-lb__modal.is-open .gc-lb__modal-backdrop { opacity: 1; }

/* Inset from the edges so the panel reads as a card over the page rather
   than as a new page that has taken over the right-hand side. The transform
   overshoots by the gap so it still starts fully off-screen. */
.gc-lb__modal-box {
  position: absolute;
  top: 24px;
  right: 24px;
  bottom: 24px;
  width: calc(100% - 48px);
  max-width: 880px;
  display: flex;
  flex-direction: row;
  background: transparent;
  transform: translateX(calc(100% + 24px));
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
  overflow: visible;
}

/* THE SCROLL BUG THIS REPLACES: a column flex child defaults to
   min-height:auto, which is its content height, so `flex: 1 1 auto` could
   never shrink and the body overflowed the panel instead of scrolling it.
   Every link in the chain down to the scrolling element needs min-height: 0. */
.gc-lb__modal-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(7,27,55,.35);
  overflow: hidden;
}
.gc-lb__modal-body > .gc-lb__detail {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── The close tab ───────────────────────────────────────────────────────
   A pull-tab on the panel's outer edge, near the top where a close control is
   looked for, dropped below the very top so it reads as attached to the panel
   rather than as part of its title bar. */
.gc-lb__drawer-tab {
  position: absolute;
  top: 64px;
  left: 0;              /* sits in the 64px the panel reserves for it */
  width: 64px;
  height: 104px;
  appearance: none;
  border: 0;
  border-radius: 14px 0 0 14px;
  background: #d13237;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  box-shadow: -6px 10px 24px rgba(7,27,55,.28);
  transition: background .18s;
}
.gc-lb__drawer-tab:hover { background: #b02a2e; }
.gc-lb__drawer-tab:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.gc-lb__drawer-tab-x { width: 34px; height: 34px; display: block; }
.gc-lb__drawer-tab-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.gc-lb__modal.is-open .gc-lb__modal-box { transform: translateX(0); }

/* Someone who has asked for less motion gets the panel, not the journey. */
@media (prefers-reduced-motion: reduce) {
  .gc-lb__modal-box,
  .gc-lb__modal-backdrop { transition: none; }
}

/* ── Team detail panel ───────────────────────────────────────────────────
   Built to match the existing [ntl_scores] detail panel: navy title bar,
   round logo, four stat cards with tinted icon badges, red score column. */

/* The bar runs edge to edge, so the box itself carries no padding. */
.gc-lb__detail-body {
  padding: 24px 26px 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}

.gc-lb__detail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
  background: #071b37;
  color: #fff;
  padding: 16px 20px 16px 26px;
  flex: 0 0 auto;
}
.gc-lb__detail-bar h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.gc-lb__detail-bar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.gc-lb__detail-context {
  font-size: 12px;
  font-weight: 600;
  color: #b9c6d8;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
/* Hidden on desktop: the tab down the left edge is the close control, and two
   of them is one too many. The phone breakpoint brings this one back. */
.gc-lb__detail-close {
  display: none;
  align-items: center;
  gap: 8px;
  appearance: none;
  background: #d13237;
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s;
}
.gc-lb__detail-close span { font-size: 20px; line-height: 1; }
.gc-lb__detail-close:hover { background: #b02a2e; }
.gc-lb__detail-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ── Team header ─────────────────────────────────────────────────────── */
.gc-lb__detail-header {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 24px;
}
.gc-lb__detail-heading h4 {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: #1a1a1a;
  text-transform: uppercase;
}
.gc-lb__detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 14px;
  color: #555;
}

/* Round, like the league badges. The letter sits underneath; a logo that
   loads covers it, and a logo that 404s removes itself and uncovers it. */
.gc-lb__avatar {
  position: relative;
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  border-radius: 50%;
  overflow: hidden;
  background: #071b37;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(7,27,55,.18);
}
.gc-lb__avatar-letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
}
.gc-lb__avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Four headline stats ─────────────────────────────────────────────── */
.gc-lb__stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 620px) { .gc-lb__stat-grid { grid-template-columns: repeat(2, 1fr); } }

.gc-lb__stat-card {
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 12px;
  padding: 20px 12px 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(7,27,55,.05);
}

.gc-lb__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
}
.gc-lb__stat-icon--gold  { background: #fdf4e3; }
.gc-lb__stat-icon--red   { background: #fdeeee; }
.gc-lb__stat-icon--slate { background: #eef2f7; }
.gc-lb__stat-icon--amber { background: #fdf4e3; }

.gc-lb__stat-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.gc-lb__stat-card strong {
  display: block;
  font-size: 34px;
  font-weight: 700;
  color: #071b37;
  line-height: 1.15;
  margin: 6px 0 2px;
}
.gc-lb__stat-card.is-primary strong { color: #d13237; }
.gc-lb__stat-card small {
  font-size: 11px;
  font-weight: 600;
  color: #9a9a9a;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── History + season statistics ─────────────────────────────────────── */
.gc-lb__detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.gc-lb__detail-card {
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(7,27,55,.05);
}
.gc-lb__detail-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
}
.gc-lb__detail-card-head h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.gc-lb__detail-card-head h4 small {
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: #8a8a8a;
  letter-spacing: .05em;
}
.gc-lb__detail-card-head > span {
  font-size: 12px;
  font-weight: 600;
  color: #8a8a8a;
  white-space: nowrap;
}

.gc-lb__detail-table-wrap { overflow-x: auto; }

.gc-lb__history {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.gc-lb__history th {
  position: sticky;
  top: 0;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8a8a8a;
  background: #f7f9fc;
  padding: 10px 18px;
  border-top: 1px solid #eceff4;
  border-bottom: 1px solid #eceff4;
}
.gc-lb__history td {
  padding: 13px 18px;
  border-bottom: 1px solid #f2f4f7;
  color: #333;
}
.gc-lb__history tr:last-child td { border-bottom: 0; }

/* Score is the column people scan, so it carries the brand red, as before. */
.gc-lb__history td.gc-lb__num { text-align: right; white-space: nowrap; }
.gc-lb__history td:nth-child(3) { color: #d13237; font-weight: 700; }
.gc-lb__history td:nth-child(4) { color: #071b37; font-weight: 700; }
.gc-lb__history td small { color: #9a9a9a; font-weight: 600; }
.gc-lb__star { color: #e0a800; }
.gc-lb__empty-detail { text-align: center; color: #999; padding: 26px 0; }

/* ── Season statistics ───────────────────────────────────────────────── */
.gc-lb__mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 18px 18px;
}
@media (max-width: 560px) { .gc-lb__mini-grid { grid-template-columns: repeat(2, 1fr); } }

.gc-lb__mini {
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 10px;
  padding: 13px 4px;
  text-align: center;
}

.gc-lb__mini span {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}
.gc-lb__mini strong {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #071b37;
  line-height: 1.2;
  margin: 5px 0 1px;
}
.gc-lb__mini.is-primary strong { color: #d13237; }
.gc-lb__mini small {
  font-size: 10px;
  font-weight: 600;
  color: #9a9a9a;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.gc-lb__best-callout {
  display: flex;
  gap: 12px;
  margin: 0 18px 18px;
  padding: 14px;
  background: #fdf4e3;
  border: 1px solid #f2e4bd;
  border-radius: 10px;
  font-size: 13px;
  color: #7a6433;
}
.gc-lb__best-callout > span { font-size: 18px; line-height: 1; }
.gc-lb__best-callout strong { display: block; margin-bottom: 3px; color: #6b5526; }
.gc-lb__best-callout p { margin: 0; line-height: 1.5; }

/* A date that wraps to two lines makes the table twice as tall for no
   reason, and the venue column is the one that should give way first. */
.gc-lb__history td:first-child { white-space: nowrap; }
.gc-lb__history td:nth-child(4) { white-space: nowrap; }
.gc-lb__history td small {
  font-size: 12px;
  font-weight: 600;
  color: #9a9a9a;
  margin-left: 2px;
}

/* ── Show / hide displaced teams ─────────────────────────────────────────
   Hidden until the button is pressed, matching the existing board. */
.gc-lb__list .gc-lb__row.is-ineligible { display: none; }
.gc-lb__list.is-expanded .gc-lb__row.is-ineligible { display: flex; }

.gc-lb__view-full {
  display: block;
  width: 100%;
  appearance: none;
  margin-top: 4px;
  padding: 13px 16px;
  background: #f1f3f7;
  border: 0;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.gc-lb__view-full:hover {
  background: #17b8a6;
  color: #fff;
}

/* ── Drawer on a phone ───────────────────────────────────────────────────
   Four columns at 390px only fit if they give up some padding and the
   field-size suffix, which is the least important thing on the row. */
@media (max-width: 560px) {
  .gc-lb__detail-body { padding: 18px 16px 36px; }
  .gc-lb__detail-bar  { padding: 14px 16px; }

  .gc-lb__detail-header { gap: 14px; }
  .gc-lb__avatar { width: 64px; height: 64px; flex-basis: 64px; }
  .gc-lb__avatar-letter { font-size: 27px; }
  .gc-lb__detail-heading h4 { font-size: 22px; }
  .gc-lb__detail-meta { font-size: 13px; gap: 2px 12px; }

  .gc-lb__stat-card { padding: 14px 8px 12px; }
  .gc-lb__stat-icon { width: 42px; height: 42px; font-size: 18px; margin-bottom: 8px; }
  .gc-lb__stat-card strong { font-size: 26px; }

  .gc-lb__history { font-size: 13px; }
  .gc-lb__history th { padding: 9px 8px; }
  .gc-lb__history td { padding: 11px 8px; }
  /* The date is the column that can afford to wrap here; without this the
     table is wider than the phone and the Place column falls off the edge. */
  .gc-lb__history td:first-child { white-space: normal; }

  .gc-lb__detail-card-head { flex-wrap: wrap; gap: 4px; padding: 14px 14px 12px; }
  .gc-lb__mini-grid { padding: 0 14px 14px; }
  .gc-lb__best-callout { margin: 0 14px 14px; }
}

/* On a phone the panel is the whole screen, so a 56px rail down the side is
   56px of content gone. The tab steps aside and the bar button comes back. */
@media (max-width: 560px) {
  .gc-lb__modal-box {
    top: 12px; right: 12px; bottom: 12px;
    width: calc(100% - 24px);
    transform: translateX(calc(100% + 12px));
  }
  .gc-lb__drawer-tab { display: none; }
  .gc-lb__detail-close { display: inline-flex; }
}

/* The tab hangs off the panel's left edge, so the panel needs room for it. */
.gc-lb__modal-box { padding-left: 64px; }
@media (max-width: 560px) { .gc-lb__modal-box { padding-left: 0; } }

/* ── All Teams standings ─────────────────────────────────────────────────
   The full field under the leader cards: ranked, searchable, a page at a
   time. Every row opens the same team drawer the cards do. */
.gc-lb__standings {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 2px solid #eceff4;
}

.gc-lb__standings-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 4px;
}
.gc-lb__standings-head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.gc-lb__standings-sub {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.gc-lb__standings-hint {
  margin: 0 0 16px;
  font-size: 13px;
  color: #8a8a8a;
}

.gc-lb__standings-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gc-lb__search {
  appearance: none;
  width: 260px;
  max-width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  color: #333;
  background: #fff;
  border: 1px solid #dfe4ec;
  border-radius: 8px;
}
.gc-lb__search:focus {
  outline: none;
  border-color: #17b8a6;
  box-shadow: 0 0 0 3px rgba(23,184,166,.16);
}
.gc-lb__standings-count {
  font-size: 12px;
  font-weight: 700;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.gc-lb__standings-wrap {
  overflow-x: auto;
  border: 1px solid #e8ecf1;
  border-radius: 12px;
}
.gc-lb__standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.gc-lb__standings-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8a8a8a;
  background: #f7f9fc;
  padding: 11px 14px;
  border-bottom: 1px solid #eceff4;
  white-space: nowrap;
}
.gc-lb__standings-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f2f4f7;
  color: #333;
}
.gc-lb__standings-table tr:last-child td { border-bottom: 0; }
.gc-lb__standings-table th.gc-lb__num,
.gc-lb__standings-table td.gc-lb__num { text-align: right; white-space: nowrap; }

.gc-lb__standings-table tr[data-team] { cursor: pointer; }
.gc-lb__standings-table tr[data-team]:hover { background: #f7f9fc; }
.gc-lb__standings-table tr[data-team]:focus-visible {
  outline: 2px solid #17b8a6;
  outline-offset: -2px;
}

.gc-lb__standings-rank  { font-weight: 700; color: #071b37; width: 1%; }
.gc-lb__standings-code  { color: #9a9a9a; font-size: 13px; white-space: nowrap; }
.gc-lb__standings-name  { font-weight: 600; color: #1a1a1a; }
.gc-lb__standings-league{ color: #666; font-size: 13px; }
.gc-lb__standings-score { font-weight: 700; color: #d13237; }
.gc-lb__standings-gap   { color: #9a9a9a; }

.gc-lb__standings-empty td {
  text-align: center;
  color: #999;
  padding: 30px 0;
}

.gc-lb__more {
  display: block;
  margin: 14px auto 0;
  appearance: none;
  padding: 12px 34px;
  background: #f1f3f7;
  border: 0;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.gc-lb__more:hover { background: #17b8a6; color: #fff; }
.gc-lb__more[hidden] { display: none; }

@media (max-width: 640px) {
  .gc-lb__standings-head { align-items: flex-start; }
  .gc-lb__standings-tools { width: 100%; }
  .gc-lb__search { flex: 1 1 auto; width: auto; }
  .gc-lb__standings-table { font-size: 13px; }
  .gc-lb__standings-table th,
  .gc-lb__standings-table td { padding: 10px 9px; }
  .gc-lb__standings-league { display: none; }
  .gc-lb__standings-table th:nth-child(4) { display: none; }
}
/* ── Rules button and National / Local tabs ──────────────────────────────
   Colours and wording follow the old board's. */
.gc-lb__rules-row { margin-bottom: 16px; }
.gc-lb__rules {
  appearance: none;
  background: #d13237;
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 18px;
}
.gc-lb__rules:hover { background: #b02a2e; }

.gc-lb__view-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.gc-lb__view-tab {
  appearance: none;
  align-items: center;
  background: #f8f8f8;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  color: #071b37;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  text-align: left;
}
.gc-lb__view-tab:hover { background: #f0f0f0; border-color: #ccc; }
.gc-lb__view-tab.is-active { background: #071b37; border-color: #071b37; color: #fff; }
.gc-lb__view-tab-icon { font-size: 24px; line-height: 1; }
.gc-lb__view-tab strong { display: block; font-size: 16px; }
.gc-lb__view-tab em { display: block; font-size: 13px; font-style: normal; opacity: .8; }

.gc-lb [hidden] { display: none !important; }

/* ── Local League ──────────────────────────────────────────────────────── */
.gc-lb__local-filters {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 12px;
  margin-bottom: 20px;
}
.gc-lb__local-field span {
  color: #666;
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.gc-lb__local-field select {
  background: #fff;
  border: 1px solid #ccd3dc;
  border-radius: 8px;
  box-sizing: border-box;
  color: #1a1a1a;
  font-size: 16px;
  padding: 10px 12px;
  width: 100%;
}
.gc-lb__local-prompt {
  color: #444;
  margin: 28px auto;
  max-width: 600px;
  text-align: center;
}
.gc-lb__standings--local { margin-top: 0; }
.gc-lb__local-info {
  background: #071b37;
  border-radius: 8px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 14px;
  text-decoration: none;
}
.gc-lb__local-notes {
  background: #f7f9fc;
  border-left: 4px solid #071b37;
  border-radius: 4px;
  color: #333;
  margin: 0 0 12px;
  padding: 10px 14px;
  white-space: pre-line;
}
.gc-lb__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; font-size: 13px; color: #555; }
.gc-lb__legend-item { padding: 2px 8px; border-left: 4px solid transparent; }
.gc-lb__legend-item.is-cumulative,
.gc-lb__standings-table tr.is-cumulative td:first-child { border-left: 4px solid #cc0000; }
.gc-lb__legend-item.is-venue-leader,
.gc-lb__standings-table tr.is-venue-leader:not(.is-cumulative) td:first-child { border-left: 4px solid #666; }
.gc-lb__legend-item.is-day-leader,
.gc-lb__standings-table tr.is-day-leader { background: #fff6e0; }

@media (max-width: 640px) {
  .gc-lb__view-tabs { grid-template-columns: 1fr; }
  .gc-lb__local-filters { grid-template-columns: 1fr; }
  .gc-lb__rules { width: 100%; }
  .gc-lb__standings--local .gc-lb__standings-table th:nth-child(2),
  .gc-lb__standings--local .gc-lb__standings-table td:nth-child(2) { display: none; }
}