/* ===== Legend container ===== */

/* Adjust this to your navbar height */
:root { --navH: 150px; }

/* Sticky INSIDE the scroller */
.rtc-legend{
  position: sticky;
  top: 0;                 /* top of the scroll container */
  z-index: 10;

  /* Excel-like: content scrolls "behind" */
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);

  /* make it feel like a header row */
  padding: 10px 10px;
  margin: -12px -16px 12px -16px;  /* cancels scroller padding so it spans full width */
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.rtc-legend{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  padding:10px 6px;
  margin-bottom:10px;
  font-size:14px;
  opacity:0.95;
}

/* ===== color swatches ===== */
.rtc-lg{
  width:12px;
  height:12px;
  border-radius:3px;
  display:inline-block;
  margin-left:10px;
  margin-right:6px;
}

/* match tile meaning */
.rtc-lg.win  { background:#14b85a; }
.rtc-lg.draw { background:#9aa0a6; }
.rtc-lg.loss { background:#d64545; }

/* tie-breaker meaning */
.rtc-lg.away { background:#ff9900; }
.rtc-lg.seed { background:#ffd400; }
.rtc-lg.pk   { background:#1e90ff; }

/* legend text */
.rtc-lg-text{
  font-weight:800;
  margin-right:10px;
}

/* pipe separator */
.rtc-lg-sep{
  margin:0 10px;
  opacity:0.6;
  font-weight:900;
}