/* Summer League games store — index, box score, and player game logs.
   Reuses scoreboard/sl-stats-table chrome from player-detail.css; this file
   adds the page layout, filter controls, badges, and box-score components. */

.slg-page {
  padding: 2rem 0 4rem;
}

/* ----------------------------------------------------------------- Header */
.slg-head {
  margin-bottom: 1.5rem;
}
.slg-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-emerald);
  margin: 0 0 0.25rem;
}
.slg-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--color-slate-900);
  margin: 0 0 0.5rem;
}
.slg-sub {
  font-family: var(--font-body);
  color: var(--color-slate-500);
  max-width: 60ch;
  margin: 0;
  line-height: 1.5;
}
.slg-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.85rem;
  margin: 1rem 0 0;
}
.slg-cta {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: var(--color-accent-emerald, #10b981);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.slg-cta:hover { filter: brightness(0.95); }
.slg-head__actions-hint {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-slate-500, #64748b);
}

/* ----------------------------------------------------------------- Filters */
.slg-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
}
.slg-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.slg-field__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-slate-500);
}
.slg-select {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 0.4rem 0.625rem;
  min-width: 11rem;
  border: 1px solid var(--color-slate-300);
  border-radius: 0.375rem;
  background: var(--color-white);
  color: var(--color-slate-900);
  cursor: pointer;
}
.slg-select:focus {
  outline: 2px solid var(--color-accent-emerald);
  outline-offset: -1px;
}
.slg-apply {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.45rem 0.875rem;
  border: none;
  border-radius: 0.375rem;
  background: var(--color-accent-emerald);
  color: var(--color-white);
  cursor: pointer;
}
.slg-clear {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-slate-500);
  text-decoration: none;
  padding: 0.45rem 0.5rem;
  margin-left: auto;
}
.slg-clear:hover { color: var(--color-accent-rose); }

.slg-playerchip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-slate-700);
  background: #ecfdf5;
  border: 1px solid var(--color-accent-emerald);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  margin-bottom: 1rem;
}
.slg-playerchip__x {
  text-decoration: none;
  color: var(--color-slate-500);
  font-size: 1rem;
  line-height: 1;
}
.slg-playerchip__x:hover { color: var(--color-accent-rose); }

/* ------------------------------------------------------------ Result meta */
.slg-resultmeta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.slg-count {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-slate-900);
}
.slg-pageof {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-slate-500);
}

/* ------------------------------------------------------------------ Board */
.slg-board {
  /* Contain the absolutely-positioned .scanlines overlay (inset:0) to this card.
     Without a positioned ancestor the overlay escapes to the viewport and blankets
     the whole page with the CRT scanline texture. */
  position: relative;
  margin-bottom: 1.25rem;
}
.slg-tablewrap {
  width: 100%;
  overflow-x: auto;
  padding: 0.5rem;
}

/* Index table */
.slg-table {
  width: 100%;
}
.slg-row { cursor: pointer; transition: background var(--transition-speed); }
.slg-row:hover { background: #ecfdf5; }
.slg-row--dim { opacity: 0.78; }
.slg-game-link {
  color: var(--color-slate-900);
  text-decoration: none;
  font-weight: 600;
}
.slg-game-link:hover { color: var(--color-accent-emerald); text-decoration: underline; }

.slg-col-matchup { text-align: left !important; min-width: 16rem; }
.slg-matchup {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.slg-team { color: var(--color-slate-500); }
.slg-team b { color: var(--color-slate-700); margin-left: 0.25rem; }
.slg-team--win { color: var(--color-slate-900); font-weight: 600; }
.slg-team--win b { color: var(--color-accent-emerald); }
.slg-at { color: var(--color-slate-300); font-size: 0.75rem; }

/* Badges */
.slg-status, .slg-quality {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: 0.25rem;
}
.slg-status--final { background: var(--color-slate-100); color: var(--color-slate-600); }
.slg-status--scheduled { background: #fef3c7; color: #92400e; }
.slg-status--unknown { background: var(--color-slate-100); color: var(--color-slate-400); }
.slg-quality--full { background: #d1fae5; color: #065f46; }
.slg-quality--partial { background: #fef3c7; color: #92400e; }
.slg-quality--box_only { background: var(--color-slate-100); color: var(--color-slate-500); }
.slg-quality--raw_only { background: #fee2e2; color: #991b1b; }

.slg-empty {
  text-align: center;
  color: var(--color-slate-500);
  padding: 2rem 1rem;
}
.slg-empty--block { display: block; }
.slg-empty a { color: var(--color-accent-emerald); }

/* ------------------------------------------------------------- Pagination */
.slg-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.slg-pager__btn {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--color-slate-300);
  border-radius: 0.375rem;
  background: var(--color-white);
  color: var(--color-slate-700);
  text-decoration: none;
}
.slg-pager__btn:hover { border-color: var(--color-accent-emerald); color: var(--color-accent-emerald); }
.slg-pager__btn--off { opacity: 0.4; pointer-events: none; }
.slg-pager__info { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-slate-500); }

/* ============================================================ Box score */
.slg-back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-slate-500);
  text-decoration: none;
  margin-bottom: 1rem;
}
.slg-back:hover { color: var(--color-accent-emerald); }

.slg-game__head {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.slg-game__teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.slg-game__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 8rem;
}
.slg-game__tname {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-slate-700);
}
.slg-game__tscore {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--color-slate-400);
  line-height: 1.1;
}
.slg-game__team--win .slg-game__tname { color: var(--color-slate-900); }
.slg-game__team--win .slg-game__tscore { color: var(--color-accent-emerald); }
.slg-game__ttag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-slate-400);
}
.slg-game__at { font-family: var(--font-mono); color: var(--color-slate-300); }
.slg-game__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-slate-500);
}
.slg-dot { color: var(--color-slate-300); }

.slg-modebar { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; }

.slg-boxes {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 960px) {
  .slg-boxes { grid-template-columns: 1fr 1fr; }
}
.slg-bx {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.slg-bx__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(to right, #d1fae5, #a7f3d0);
  border-bottom: 2px solid var(--color-accent-emerald);
}
.slg-bx__name { font-family: var(--font-heading); font-size: 1rem; color: var(--color-slate-900); }
.slg-bx__tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: #065f46;
}
.slg-bx__score {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-slate-900);
  margin-left: auto;
}
.slg-bx-namecol { text-align: left !important; min-width: 9rem; }
.slg-bx-name { text-align: left !important; }
.slg-bx-name a { color: var(--color-slate-900); text-decoration: none; font-weight: 600; }
.slg-bx-name a:hover { color: var(--color-accent-emerald); text-decoration: underline; }
.slg-bx-name--starter a::after,
.slg-bx-name--starter .slg-bx-name--stub::after {
  content: " ·";
  color: var(--color-accent-amber);
}
.slg-bx-name--stub { color: var(--color-slate-400); }
.slg-bx-dnp td { color: var(--color-slate-400); font-style: italic; text-align: left !important; }
.slg-strong { font-weight: 600; color: var(--color-slate-900); }

/* ========================================================== Player logs */
.slg-season { margin-bottom: 1.5rem; }
.slg-season__head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.slg-season__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-slate-900);
  margin: 0;
}
.slg-season__gp {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-slate-500);
}

/* ===================================================== Landing + season hub */

/* Year strip */
.slg-yearstrip {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.25rem 0 1.25rem;
}
.slg-yeartile {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-slate-200);
  border-radius: 0.375rem;
  background: var(--color-white);
  color: var(--color-slate-600);
  text-decoration: none;
}
.slg-yeartile:hover { border-color: var(--color-accent-emerald); color: var(--color-accent-emerald); }
.slg-yeartile--active {
  background: var(--color-accent-emerald);
  border-color: var(--color-accent-emerald);
  color: var(--color-white);
}

/* Hero */
.slg-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 1px solid var(--color-accent-emerald);
  border-radius: var(--border-radius);
}
.slg-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #065f46;
  margin: 0 0 0.25rem;
}
.slg-hero__title { font-family: var(--font-heading); font-size: 1.5rem; margin: 0 0 0.4rem; }
.slg-hero__title a { color: var(--color-slate-900); text-decoration: none; }
.slg-hero__title a:hover { color: var(--color-accent-emerald); }
.slg-hero__meta { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-slate-600); margin: 0; }
.slg-hero__leader {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-decoration: none;
  padding-left: 1rem;
}
.slg-hero__leader-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #065f46;
}
.slg-hero__leader-name { font-family: var(--font-heading); font-size: 1.05rem; color: var(--color-slate-900); }
.slg-hero__leader-stat { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--color-accent-emerald); }
.slg-hero__leader-stat small { font-size: 0.7rem; color: var(--color-slate-500); }

/* Section title + see-all */
.slg-section-title { font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-slate-900); margin: 0; }
.slg-leaders__head, .slg-recent-block .slg-leaders__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 0.75rem;
}
.slg-seeall { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-accent-emerald); text-decoration: none; }
.slg-seeall:hover { text-decoration: underline; }
.slg-leaders, .slg-recent-block { margin-bottom: 1.75rem; }

/* Leaderboards grid */
.slg-leaders__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .slg-leaders__grid { grid-template-columns: repeat(3, 1fr); } }
.slg-lboard {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.slg-lboard__title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #065f46;
  background: linear-gradient(to right, #d1fae5, #a7f3d0);
  padding: 0.5rem 0.875rem;
  border-bottom: 2px solid var(--color-accent-emerald);
}
.slg-lboard__list { list-style: none; margin: 0; padding: 0.5rem 0.875rem; }
.slg-lboard__row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.25rem 0; }
.slg-lboard__rank { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-slate-400); width: 1rem; }
.slg-lboard__name { flex: 1; color: var(--color-slate-900); text-decoration: none; font-size: 0.9rem; }
.slg-lboard__name:hover { color: var(--color-accent-emerald); }
.slg-lboard__val { font-family: var(--font-mono); font-weight: 600; color: var(--color-slate-900); }
.slg-lboard__val small { color: var(--color-slate-400); font-weight: 400; }
.slg-lboard__empty { padding: 0.875rem; color: var(--color-slate-400); font-size: 0.85rem; }

/* Venue cards */
.slg-venues { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1.75rem; }
@media (min-width: 640px) { .slg-venues { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.slg-venue-card {
  display: block;
  padding: 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: border-color var(--transition-speed), transform var(--transition-speed);
}
.slg-venue-card:hover { border-color: var(--color-accent-emerald); transform: translateY(-2px); }
.slg-venue-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.slg-venue-card__name { font-family: var(--font-heading); font-size: 1rem; color: var(--color-slate-900); }
.slg-venue-card__stats { display: flex; gap: 1rem; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-slate-600); }
.slg-venue-card__stats b { color: var(--color-slate-900); }
.slg-venue-card__dates { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-slate-400); margin-top: 0.4rem; }

/* Breadcrumb link in the eyebrow */
.slg-crumb { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.slg-crumb:hover { opacity: 0.8; }

.slg-section-note { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-slate-400); }

/* ===================================================== Venue + team pages */
.slg-pos { color: var(--color-accent-emerald); }
.slg-neg { color: var(--color-accent-rose); }

/* Standings table */
.slg-standings__team { text-align: left !important; min-width: 11rem; }
.slg-standings__team a { color: var(--color-slate-900); text-decoration: none; font-weight: 600; }
.slg-standings__team a:hover { color: var(--color-accent-emerald); text-decoration: underline; }

/* Team-season header */
.slg-team-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.slg-team-record { text-align: right; }
.slg-team-record__wl {
  display: block;
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-slate-900);
  line-height: 1;
}
.slg-team-record__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-slate-400);
}

/* Quick stats strip */
.slg-quickstats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.slg-quickstat {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius);
  padding: 1rem;
  text-align: center;
}
.slg-quickstat__v {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-slate-900);
}
.slg-quickstat__l {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-slate-400);
}

/* Roster table */
.slg-roster__name { text-align: left !important; min-width: 11rem; }
.slg-roster__name a { color: var(--color-slate-900); text-decoration: none; font-weight: 600; }
.slg-roster__name a:hover { color: var(--color-accent-emerald); text-decoration: underline; }

/* Schedule result chips */
.slg-loc { color: var(--color-slate-400); font-family: var(--font-mono); }
.slg-res {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  width: 1.1rem;
  text-align: center;
  border-radius: 0.2rem;
  margin-right: 0.4rem;
}
.slg-res--w { background: #d1fae5; color: #065f46; }
.slg-res--l { background: #fee2e2; color: #991b1b; }

/* ===================================================== Championship bracket */
.slg-bracket-block { margin-bottom: 1.75rem; }
.slg-bracket {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  padding: 1.25rem;
  overflow-x: auto;
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius);
}
.slg-bracket__round {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 0 0 auto;
}
.slg-bracket__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-slate-400);
  text-align: center;
}
.slg-bracket__round--final .slg-bracket__label { color: var(--color-accent-amber); }
.slg-bm {
  display: block;
  min-width: 11rem;
  border: 1px solid var(--color-slate-200);
  border-radius: 0.5rem;
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--transition-speed), transform var(--transition-speed);
}
.slg-bm:hover { border-color: var(--color-accent-emerald); transform: translateY(-2px); }
.slg-bracket__round--final .slg-bm { border-color: var(--color-accent-amber); box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25); }
.slg-bm__team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-slate-500);
}
.slg-bm__team:first-child { border-bottom: 1px solid var(--color-slate-100); }
.slg-bm__team--win { color: var(--color-slate-900); font-weight: 600; background: #ecfdf5; }
.slg-bm__team--win .slg-bm__score { color: var(--color-accent-emerald); }
.slg-bm__name { letter-spacing: 0.02em; }
.slg-bm__score { font-variant-numeric: tabular-nums; }

/* ===================================================== Team logos */
.slg-tlogo {
  height: 1.1rem;
  width: 1.1rem;
  object-fit: contain;
  vertical-align: -0.2rem;
  margin-right: 0.35rem;
}
.slg-tlogo--lg { height: 2.75rem; width: 2.75rem; vertical-align: middle; margin-right: 0; }
.slg-team-head__id { display: flex; align-items: center; gap: 0.9rem; }
/* Franchise cross-link under the team-season title + muted inline meta. */
.slg-franchise-link {
  display: inline-block;
  margin-top: 0.25rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #c2410c);
  text-decoration: none;
}
.slg-franchise-link:hover { text-decoration: underline; }
.slg-muted { color: var(--muted, #6b7280); font-weight: 400; }
/* In the bracket cards, the logo sits inside the name flex item. */
.slg-bm__name { display: inline-flex; align-items: center; }
.slg-bm__name .slg-tlogo { margin-right: 0.4rem; }

/* ===================================================== Leaders page */
.slg-modetabs { flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1rem; }
.slg-modetabs .season-btn { text-decoration: none; }
.slg-num { min-width: 5rem; }
.slg-leaders-table { width: 100%; }
.slg-rank { color: var(--color-slate-400); font-variant-numeric: tabular-nums; }
.slg-lead-name { text-align: left !important; min-width: 11rem; }
.slg-lead-name a { color: var(--color-slate-900); text-decoration: none; font-weight: 600; }
.slg-lead-name a:hover { color: var(--color-accent-emerald); text-decoration: underline; }
.slg-sort {
  color: var(--color-slate-600);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.slg-sort:hover { color: var(--color-accent-emerald); }
.slg-sort--active { color: var(--color-slate-900); font-weight: 600; }
.slg-sort__arrow { color: var(--color-accent-emerald); font-size: 0.7rem; }
.slg-col-ph { color: var(--color-slate-300); }

/* ===================================================== Explorer */
.slg-explorer-head { margin-bottom: 1rem; }
.slg-explorer-sub { font-family: var(--font-body); color: var(--color-slate-700); max-width: 42rem; margin-top: 0.3rem; }
.slg-explorer-subjects { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.slg-subject-tab {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: var(--color-slate-700);
  background: #fff;
}
.slg-subject-tab.is-active {
  background: var(--color-slate-900);
  color: #fff;
  border-color: var(--color-slate-900);
}
.slg-explorer-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  padding: 1.1rem;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius);
  background: var(--color-slate-50, #f8fafc);
  margin-bottom: 1.25rem;
}
.slg-filter { display: flex; flex-direction: column; gap: 0.25rem; }
.slg-filter label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-slate-500, #64748b);
}
.slg-filter select, .slg-filter input {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-slate-300);
  border-radius: 6px;
  background: #fff;
}
.slg-filter--actions { justify-content: flex-end; }
.slg-explorer-run {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  background: var(--color-accent-emerald, #10b981);
  color: #fff;
  cursor: pointer;
}
.slg-explorer-run:hover { filter: brightness(0.95); }
.slg-explorer-count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-slate-500, #64748b);
  margin-bottom: 0.5rem;
}
.slg-explorer-count__csv {
  color: var(--color-accent-emerald, #10b981);
  text-decoration: none;
  font-weight: 600;
}
.slg-explorer-count__csv:hover { text-decoration: underline; }
.slg-explorer-banner {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.4;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--color-amber-300, #fcd34d);
  background: var(--color-amber-50, #fffbeb);
  color: var(--color-amber-800, #92400e);
}
.slg-explorer-banner__icon { flex: 0 0 auto; font-size: 0.95rem; line-height: 1.2; }
.slg-explorer-soon { padding: 2rem; text-align: center; }
.slg-explorer-results.is-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.1s; }
.slg-explorer-table th a { color: inherit; text-decoration: none; }
.slg-explorer-table th a:hover { text-decoration: underline; }
.slg-explorer__label { text-align: left; }

/* -- Clean Explorer results table ---------------------------------------------
   The Explorer uses a flat, readable data-table look instead of the retro
   scoreboard chrome: drop the green dot-matrix + CRT scanline textures and lean
   on a crisp header rule, light row dividers, and a row hover. Scoped to the
   Explorer so other SL scoreboards keep their retro treatment. */
.slg-explorer-results .stats-scoreboard {
  background-image: none; /* remove green dot-matrix texture */
  outline: none;
  border: 1px solid var(--color-slate-200);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.slg-explorer-results .scanlines {
  display: none; /* remove CRT scanline overlay */
}

/* The table can carry 24+ columns (base box stats + advanced composites). Override
   .sl-stats-table's width:100% — at full width the auto layout compresses columns
   until the right-aligned numbers collide ("25.415.3"). Size to content + nowrap so
   every cell keeps its padding; the .slg-tablewrap (overflow-x:auto) scrolls. */
.slg-explorer-table {
  width: auto;
  min-width: 100%;
}
.slg-explorer-table th,
.slg-explorer-table td {
  white-space: nowrap;
  padding: 0.45rem 0.6rem;
}

/* Header row: light fill + a solid break line. (Not sticky-to-top — the global
   navbar is position:fixed, so a top:0 sticky header would hide behind it.) */
.slg-explorer-table thead th {
  background: var(--color-slate-50, #f8fafc);
  color: var(--color-slate-600, #475569);
  font-size: 0.625rem;
  border-bottom: 2px solid var(--color-slate-300, #cbd5e1);
}
.slg-explorer-table thead th.slg-sort-active {
  color: var(--color-accent-emerald, #10b981);
  background: #ecfdf5;
}

/* Clean horizontal break line between every row; none after the last. */
.slg-explorer-table tbody td,
.slg-explorer-table tbody th {
  border-bottom: 1px solid var(--color-slate-100, #f1f5f9);
}
.slg-explorer-table tbody tr:last-child td,
.slg-explorer-table tbody tr:last-child th {
  border-bottom: none;
}
.slg-explorer-table tbody tr:hover td,
.slg-explorer-table tbody tr:hover th.slg-explorer__label {
  background: #ecfdf5;
}
/* Subtle tint on the active sort column so the eye tracks it down the table. */
.slg-explorer-table tbody td.slg-strong {
  background: rgba(16, 185, 129, 0.05);
  font-weight: 600;
  color: var(--color-slate-900);
}

/* Keep the player/label column pinned while scrolling the dense stat columns.
   Backgrounds are section-aware so the pinned cell matches its row (header fill,
   body white, emerald on hover) and hides columns sliding underneath. */
.slg-explorer-table th.slg-explorer__label,
.slg-explorer-table td.slg-explorer__label {
  position: sticky;
  left: 0;
  z-index: 1;
}
.slg-explorer-table thead th.slg-explorer__label {
  background: var(--color-slate-50, #f8fafc);
}
.slg-explorer-table tbody th.slg-explorer__label {
  background: var(--color-white, #fff);
}
.slg-explorer-table tbody tr:hover th.slg-explorer__label {
  background: #ecfdf5;
}
.slg-explorer-pager { display: flex; gap: 0.6rem; margin-top: 1rem; justify-content: center; }
.slg-pager-btn {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--color-slate-200);
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-slate-700);
  background: #fff;
}
.slg-pager-btn:hover { background: var(--color-slate-50, #f8fafc); }