/*
 * Smart Parlays Galaxy - Galaxy Matchups card builder + Top-three rankings (members demo).
 * Everything is prefixed .bg- so it can sit next to styles.css without clashes.
 * Uses the site variables: --bg --panel --panel-2 --panel-3 --line --line-strong --text --muted --faint
 * --violet --cyan --gold --green --red --brand.
 */

.bg-wrap {
  --bg-sticky-top: 128px;
  --bg-slot-w: 46px;
  --bg-player-w: 188px;
  position: relative;
  min-width: 0;
  max-width: 100%;
}
.bg-wrap *, .bg-wrap *::before, .bg-wrap *::after { box-sizing: border-box; }
.bg-wrap [hidden] { display: none !important; }

.bg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
}
.bg-main { min-width: 0; }
.bg-dyn { scroll-margin-top: calc(var(--bg-sticky-top) + 12px); }   /* scrolled-to cards land under the app header */
/* Teams column (owner, 2026-10-10): on wide windows the team chips sit in a sticky left column with its own
   scrollbar, so the next team is always in view while the card scrolls; narrower windows keep them above the card. */
.bg-teams { grid-column: 1 / -1; min-width: 0; }
.bg-teams-t { display: none; }
@media (min-width: 1400px) {
  .bg-layout.bg-has-teams { grid-template-columns: 236px minmax(0, 1fr) 340px; }
  .bg-teams {
    grid-column: auto; position: sticky; top: var(--bg-sticky-top); align-self: start;
    max-height: calc(100vh - var(--bg-sticky-top) - 16px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin;
  }
  .bg-teams-t { display: block; margin: 2px 0 8px; font: 700 11.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .bg-teams .bg-picker { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 0; }
  .bg-teams .bg-pgrp { padding: 8px 10px; }
  .bg-teams .bg-pgrp-h { flex-wrap: wrap; gap: 2px 8px; }
  .bg-teams .bg-chips { flex-direction: column; align-items: stretch; gap: 5px; margin-top: 6px; }
  .bg-wrap .bg-teams .bg-chip { justify-content: space-between; text-align: left; padding: 6px 10px; }
}
/* Two games per lane (owner, 2026-10-10 evening): on very wide windows the team column doubles up so it scrolls
   half as far, and the card pages (Cards, Shots by period) centre the 1100px card in the room that is left, so it
   sits closer to My combination instead of leaving that room empty. The List page keeps one lane: its table
   uses the full width. Measured at 2560px: card 786-1886, panel from 2033. */
@media (min-width: 1900px) {
  .bg-layout.bg-has-teams.bg-cardpage { grid-template-columns: 466px minmax(0, 1fr) 340px; }
  .bg-cardpage .bg-teams .bg-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bg-cardpage .bg-main > .bg-head, .bg-cardpage .bg-main > .bg-dyn, .bg-cardpage .bg-main > .bg-chg {
    max-width: 1100px; margin-left: auto; margin-right: auto;
  }
}

/* ---------- page header ---------- */
.bg-head { margin-bottom: 18px; }
.bg-wrap .bg-title { font-size: 30px; margin: 0 0 4px; }
.bg-sub { margin: 0 0 4px; color: var(--muted); }
.bg-method { margin: 0 0 12px; color: var(--faint); font-size: 13px; max-width: 80ch; }
.bg-note {
  display: inline-block; margin: 0;
  padding: 5px 14px; border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .07);
  color: #fde68a; font-size: 12.5px; font-weight: 600;
}

/* ---------- research versions and what changed ---------- */
.bg-vers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 10px; }
.bg-vers-t { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.bg-vers .bg-chips { margin-top: 0; }
.bg-wrap .bg-ver { padding: 5px 11px; font-size: 12.5px; min-height: 30px; }
.bg-ver b { margin-left: 4px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
.bg-ver-old {
  margin: 0 0 12px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .07);
  color: #fde68a; font-size: 13px;
}
.bg-chg { margin: 28px 0 0; scroll-margin-top: 90px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.bg-chg > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.bg-chg-t { font-weight: 700; color: var(--text); }
.bg-chg-s { font-size: 12.5px; color: var(--muted); }
.bg-chg-list {
  list-style: none; margin: 10px 0 2px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px;
}
.bg-chg-card { min-width: 0; padding: 8px 12px; background: var(--panel-2); border-radius: var(--radius-sm); }
.bg-chg-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; }
.bg-chg-card ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.bg-chg-card li + li { margin-top: 3px; }
.bg-chg-card li b { color: var(--text); }
.bg-chg-was { color: var(--faint); }
.bg-chg-none { margin: 28px 0 0; font-size: 13px; color: var(--muted); }
.bg-chip-chg { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--cyan); vertical-align: middle; }
.bg-flag {
  display: inline-block; margin-left: 4px; padding: 1px 5px; border: 1px solid; border-radius: 4px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; line-height: 1.4; vertical-align: middle;
}
.bg-flag-new { color: #6ee7b7; border-color: rgba(110, 231, 183, .5); background: rgba(16, 185, 129, .12); }
.bg-flag-moved { color: #93c5fd; border-color: rgba(147, 197, 253, .5); background: rgba(59, 130, 246, .12); }
.bg-flag-changed { color: #fcd34d; border-color: rgba(252, 211, 77, .5); background: rgba(245, 158, 11, .12); }
/* The card-style view draws names on a light tile. */
.bgc-name .bg-flag-new { color: #065f46; border-color: #34d399; background: #d1fae5; }
.bgc-name .bg-flag-moved { color: #1e3a8a; border-color: #60a5fa; background: #dbeafe; }
.bgc-name .bg-flag-changed { color: #78350f; border-color: #fbbf24; background: #fef3c7; }
/* An earlier version is for looking only: building stays on the latest. */
.bg-ro .bg-add, .bg-ro .bgc-check, .bg-ro .bg-pill, .bg-ro .bg-addall, .bg-ro .bg-morebtn,
.bg-ro .bg-props-row, .bg-ro .bgc-picker, .bg-ro .bg-morebox { display: none !important; }

/* ---------- team picker ---------- */
.bg-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.bg-pgrp {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0;
}
.bg-pgrp-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12.5px; color: var(--muted);
}
.bg-pgrp-h b { font-family: var(--display); font-size: 14px; letter-spacing: .02em; color: var(--text); }
.bg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bg-wrap .bg-chip { padding: 6px 12px; font-size: 12.5px; min-height: 32px; }
.bg-chip-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--gold); color: #1b1300; font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center; line-height: 1;
}

/* ---------- card section ---------- */
.bg-card {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; min-width: 0;
}
.bg-cardhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.bg-ch-l { min-width: 0; flex: 1 1 320px; }
.bg-wrap .bg-ch-t { font-size: 20px; margin: 0 0 2px; }
.bg-ch-s { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 70ch; }
.bg-ch-r { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bg-wrap .badge.bg-status { background: rgba(124, 92, 255, .22); color: #ddd6fe; }

.bg-seg {
  display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px;
  overflow: hidden; background: rgba(7, 11, 26, .5);
}
.bg-seg button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 7px 14px; font-weight: 600; font-size: 13px; white-space: nowrap;
}
.bg-seg button:hover { color: var(--text); }
.bg-seg button[aria-pressed="true"] { background: var(--panel-3); color: var(--text); }

/* ---------- interactive table ---------- */
.bg-tablewrap {
  overflow-x: auto; overflow-y: hidden; max-width: 100%;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.bg-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.bg-table th, .bg-table td { border-bottom: 1px solid var(--line); vertical-align: middle; }
.bg-table thead th {
  position: relative; background: var(--panel-2); color: var(--muted);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 6px; text-align: left; white-space: nowrap;
}
.bg-table tbody th { font-weight: 700; text-align: left; }
.bg-row { --rb: var(--panel); }
.bg-row.bg-alt, .bg-props-row.bg-alt { --rb: #131c42; }
.bg-props-row { --rb: var(--panel); }
.bg-row > td, .bg-row > th, .bg-props-row > td { background: var(--rb); }
.bg-row.bg-first > td, .bg-row.bg-first > th { border-top: 1px solid var(--line-strong); }

.bg-table .bg-sticky { position: sticky; z-index: 2; }
.bg-table thead .bg-sticky { z-index: 3; background: var(--panel-2); }
.bg-c-slot { left: 0; width: var(--bg-slot-w); min-width: var(--bg-slot-w); max-width: var(--bg-slot-w); padding: 6px 4px 6px 10px; }
.bg-c-player { left: var(--bg-slot-w); width: var(--bg-player-w); min-width: var(--bg-player-w); max-width: var(--bg-player-w); padding: 6px 8px; box-shadow: 1px 0 0 var(--line-strong), 6px 0 10px -6px rgba(0, 0, 0, .55); }
.bg-slot { font-family: var(--display); font-weight: 700; font-size: 12.5px; color: var(--cyan); letter-spacing: .02em; }
.bg-th-hint { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); margin-left: 4px; }

.bg-c-game {
  min-width: 82px; width: 82px; text-align: center !important; padding-top: 10px !important;
  box-shadow: inset 0 4px 0 var(--gc, var(--faint));
}
.bg-c-game span { display: block; line-height: 1.25; }
.bg-gh-o { color: var(--text); font-size: 12px; letter-spacing: .02em; }
.bg-gh-d { color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.bg-gh-p { font-size: 10px; letter-spacing: .08em; color: var(--faint); }
.bg-gh-pre { color: #a5f3fc; }
.bg-gh-reg { color: #fde68a; }

.bg-cell { padding: 6px 5px; text-align: center; }
.bg-cell-in {
  display: block; padding: 6px 6px 6px 8px; border-radius: 7px;
  border-left: 4px solid var(--cc, var(--faint));
  background: rgba(150, 165, 255, .08);
  background: color-mix(in srgb, var(--cc, #6b77a8) 20%, transparent);
  color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bg-cell-in.bg-hit-g { font-weight: 800; background: color-mix(in srgb, var(--cc, #6b77a8) 34%, transparent); }
.bg-cell-in.bg-hit-a { font-weight: 700; }
.bg-cell-in.bg-na { border-left-color: var(--line-strong); color: var(--faint); background: transparent; }
.bg-tot { text-align: center; width: 44px; min-width: 44px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.bg-table thead .bg-tot { color: var(--muted); }
/* sort by a totals column: click G / A / S2+ / S3+ (most on top), click again for lineup order */
.bg-sortbtn { all: unset; cursor: pointer; display: inline-block; padding: 2px 4px; border-radius: 6px; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.bg-sortbtn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.bg-sortbtn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.bg-tot.bg-sort-on .bg-sortbtn { color: var(--cyan); }
.bg-sort-side { display: block; font-size: 8px; line-height: 1; letter-spacing: .1em; margin-top: 2px; }
.bg-tot.bg-sort-cell, .bg-att-t.bg-sort-cell { color: var(--cyan); }
/* the attack side of a list row: the player's own last games under the defense cells (same lane, lighter) */
.bg-row.bg-has-att > td, .bg-row.bg-has-att > th { border-bottom: 0; }
.bg-att-row { --rb: var(--panel); }
.bg-att-row.bg-alt { --rb: #131c42; }
.bg-att-row > td, .bg-att-row > th { background: var(--rb); padding-top: 0; padding-bottom: 7px; }
.bg-att-who { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-att-c { padding: 0 5px 7px; }
.bg-att-in { display: flex; gap: 6px; }
.bg-att-g { display: flex; flex-direction: column; align-items: center; padding: 2px 6px 2px 8px; border-radius: 6px; border-left: 4px solid color-mix(in srgb, var(--cc, var(--faint)) 45%, transparent); background: color-mix(in srgb, var(--text) 6%, transparent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bg-att-in .bg-att-g { min-width: 66px; }
.bg-att-g.bg-att-none { border-left-color: var(--line); background: transparent; color: var(--faint); font-size: 11px; }
.bg-att-g.bg-att-last { background: color-mix(in srgb, var(--text) 3%, transparent); border-left-style: dashed; }
.bg-att-g.bg-att-last small, .bg-att-g.bg-att-last b { color: var(--faint); }
.bg-att-g small { font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--faint); }
.bg-att-g b { font-size: 11px; font-weight: 700; color: var(--muted); }
.bg-att-t { font-size: 12px; color: var(--muted); }

/* player cell */
.bg-pl { display: flex; align-items: flex-start; gap: 8px; }
.bg-pl + .bg-pl { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.bg-pl-body { min-width: 0; flex: 1; }
.bg-pl-name { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.bg-pl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }
.bg-pl-none { color: var(--faint); font-size: 12px; font-style: italic; }
.bg-num { color: var(--faint); font-size: 12px; }
.bg-add {
  display: grid; justify-items: center; gap: 1px; flex: none; width: 30px; cursor: pointer;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.bg-add input { width: 18px; height: 18px; margin: 0; accent-color: var(--cyan); cursor: pointer; }
.bg-add:hover { color: var(--text); }

.bg-pp {
  font-size: 10px; font-weight: 800; letter-spacing: .04em; line-height: 1;
  padding: 3px 6px; border-radius: 999px; white-space: nowrap;
  background: rgba(52, 211, 153, .14); color: #6ee7b7; border: 1px solid rgba(52, 211, 153, .4);
}
.bg-pp.bg-pp2 { background: rgba(150, 165, 255, .12); color: #c7d2fe; border-color: rgba(150, 165, 255, .4); }
.bg-inj {
  font-size: 10px; font-weight: 800; letter-spacing: .04em; line-height: 1;
  padding: 3px 6px; border-radius: 999px; background: rgba(248, 113, 113, .14); color: #fecaca; border: 1px solid rgba(248, 113, 113, .45);
}
.bg-rkb { font-size: 10.5px; font-weight: 800; line-height: 1; padding: 3px 6px; border-radius: 6px; border: 1px solid transparent; }
.bg-rkb-g { background: rgba(251, 191, 36, .16); color: var(--gold); border-color: rgba(251, 191, 36, .5); }
.bg-rkb-p { background: rgba(34, 211, 238, .14); color: var(--cyan); border-color: rgba(34, 211, 238, .5); }
.bg-rkb-s { background: rgba(124, 92, 255, .2); color: #c4b5fd; border-color: rgba(124, 92, 255, .6); }

/* second line: the prop pills for a ticked player */
.bg-props-row > td { padding: 0; }
.bg-props-inner {
  position: sticky; left: 0; width: var(--bg-wrap-w, 100%); max-width: 100%;
  display: grid; gap: 8px; padding: 8px 12px 12px;
}
.bg-pblock {
  display: grid; gap: 8px; padding: 9px 12px; border-radius: 10px;
  background: rgba(7, 11, 26, .5); border: 1px solid var(--line);
}
.bg-pblock-n { font-weight: 700; font-size: 13px; }
.bg-propset { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bg-pg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bg-pg-t { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); min-width: 44px; }
.bg-pg-p { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.bg-wrap .bg-pill { min-height: 30px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; }
.bg-wrap .bg-pill[aria-pressed="true"] { box-shadow: 0 0 0 1px rgba(34, 211, 238, .35), 0 0 14px rgba(34, 211, 238, .18); }

.bg-scrollhint { display: none; margin: 8px 2px 0; color: var(--faint); font-size: 12px; }
.bg-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: rgba(7, 11, 26, .45); border: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px;
}
.bg-legend b { color: var(--text); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.bg-legend i {
  font-style: normal; font-weight: 800; color: var(--text); font-family: var(--display);
  background: var(--panel-3); border-radius: 5px; padding: 1px 6px; margin-right: 4px;
}
.bg-legend p { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: var(--faint); }

.bg-imgscroll {
  max-height: 78vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #000;
}
.bg-imgscroll img { width: 100%; height: auto; }
.bg-imgscroll .empty { border: 0; }

/* ---------- rankings ---------- */
.bg-tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; max-width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; overflow-x: auto; scrollbar-width: none;
}
.bg-tab {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: 14px; white-space: nowrap;
}
.bg-tab:hover { color: var(--text); }
.bg-tab[aria-selected="true"] { background: var(--brand); color: #fff; }

.bg-details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); margin-bottom: 14px; }
.bg-details > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; list-style-position: inside; }
.bg-det-s { color: var(--cyan); font-weight: 500; font-size: 13px; margin-left: 6px; }
.bg-details[open] > summary { border-bottom: 1px solid var(--line); }
.bg-details .bg-imgscroll { margin: 12px; }
.bg-rk-hint { margin: 0 0 14px; color: var(--faint); font-size: 12.5px; }

.bg-rkgame { margin-bottom: 18px; }
.bg-rkgame-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 15px; margin: 0 0 8px; padding: 0 2px;
}
.bg-rkgame-h > span:first-child { font-family: var(--display); letter-spacing: .02em; }
.bg-rkgame-t { font: 500 13px var(--font); color: var(--muted); }
.bg-rkteams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bg-rkteam { background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 0; }
.bg-rkteam-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; margin-bottom: 8px; font-size: 13.5px; }
.bg-rkteam-h b { margin-right: 6px; }
.bg-rkteam-h span:last-child { color: var(--muted); font-size: 12.5px; }
.bg-rklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bg-addall { width: 100%; margin-top: 10px; }
/* Sellers */
.bg-sell-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 4px 0 10px; }
.bg-sell-n { background: rgba(248, 113, 113, .16); color: var(--red); border: 1px solid rgba(248, 113, 113, .45); }
.bg-sell-t { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--cyan); }
.bg-sell-off { color: var(--faint); font-weight: 500; }
.bg-sell-act { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 6px; max-width: 280px; }
.bg-sell-act .bg-morebox { flex-basis: 100%; }
.bg-addall[aria-pressed="true"] { border-color: var(--cyan); background: rgba(34, 211, 238, .12); }
.bg-rk-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start;
  padding: 10px; border-radius: 10px; background: rgba(7, 11, 26, .4); border: 1px solid var(--line);
}
.bg-rk-n {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); color: #fff; font: 700 13px var(--display);
}
.bg-rk-main { min-width: 0; }
.bg-rk-line { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.bg-slotchip { font-size: 11px; font-weight: 700; color: var(--cyan); background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .3); border-radius: 6px; padding: 1px 6px; }
.bg-rk-reason { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.bg-rk-act { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.bg-morebtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; background: transparent; color: var(--cyan); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 3px 6px; border-radius: 6px;
}
.bg-morebtn:hover { text-decoration: underline; }
.bg-morebtn::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.bg-morebtn[aria-expanded="true"]::after { transform: rotate(-135deg); }
.bg-n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--gold); color: #1b1300; font-size: 10.5px; font-weight: 700; display: inline-grid; place-items: center; }
.bg-morebox { grid-column: 2 / -1; padding-top: 6px; border-top: 1px dashed var(--line); margin-top: 4px; }
.bg-empty-s { margin: 0; color: var(--faint); font-size: 13px; }

/* ---------- My combination panel ---------- */
.bg-panel {
  position: sticky; top: var(--bg-sticky-top);
  max-height: calc(100vh - var(--bg-sticky-top) - 16px);
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px;
}
.bg-panel:focus { outline: none; }
.bg-panel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.bg-ph { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bg-wrap .bg-ph-t { font-size: 17px; margin: 0; flex: 1; }
.bg-linkbtn { background: none; border: 0; color: var(--cyan); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.bg-linkbtn:hover { text-decoration: underline; }
.bg-ph-x {
  display: none; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.bg-ph-x:hover { color: var(--text); border-color: var(--line-strong); }

.bg-empty-panel { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 18px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }
.bg-empty-panel p { margin: 0 0 6px; }
.bg-empty-panel p:last-child { margin: 0; }
.bg-empty-panel b { color: var(--text); }

.bg-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; }
.bg-dot { color: var(--faint); }
.bg-mode { font-weight: 700; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; }
.bg-same { color: #fde68a; background: rgba(251, 191, 36, .14); }
.bg-multi { color: #a5f3fc; background: rgba(34, 211, 238, .12); }
.bg-caps { margin: 4px 0 10px; color: var(--faint); font-size: 12px; }
.bg-over { color: var(--red); font-weight: 700; }

.bg-pgame { margin-bottom: 10px; }
.bg-pgame-h {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  margin: 0 0 4px; padding: 5px 8px; border-radius: 7px;
  background: rgba(34, 211, 238, .07); color: #a5f3fc; font: 600 12.5px var(--font);
}
.bg-pgame-t { color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap; }
.bg-legl { list-style: none; margin: 0; padding: 0; }
.bg-leg { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.bg-leg:last-child { border-bottom: 0; }
.bg-leg-t { min-width: 0; overflow-wrap: anywhere; }
.bg-leg-tm { color: var(--muted); }
.bg-leg-p { color: var(--gold); font-weight: 600; }
.bg-live {
  display: inline-block; vertical-align: middle; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1.3;
  padding: 1px 6px; border-radius: 5px;
  color: var(--muted); background: rgba(150, 165, 255, .12); border: 1px solid var(--line-strong);
}
.bg-x {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer;
}
.bg-x:hover { color: var(--red); border-color: rgba(248, 113, 113, .5); }

.bg-warns { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.bg-warns li {
  color: #fecaca; background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .42);
  border-radius: 8px; padding: 7px 10px; font-size: 12.5px; line-height: 1.4;
}
.bg-actions { margin-top: 12px; }
.bg-wrap .bg-send { width: 100%; }
.bg-fine { margin: 8px 0 0; }

.bg-loading {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px;
  border: 1px solid rgba(34, 211, 238, .35); border-radius: 12px; background: rgba(34, 211, 238, .07); color: #a5f3fc; font-size: 13.5px;
}
.bg-spin {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid rgba(34, 211, 238, .25); border-top-color: var(--cyan);
  animation: bg-spin .8s linear infinite;
}
@keyframes bg-spin { to { transform: rotate(360deg); } }
.bg-error {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 10px;
  color: #fecaca; background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .5); font-size: 13.5px;
}

.bg-done { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.bg-done-h { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.bg-ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(52, 211, 153, .2); color: var(--green); font-size: 13px; font-weight: 800; }
.bg-stale { margin: 0; padding: 7px 10px; border-radius: 8px; background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .4); color: #fde68a; font-size: 12.5px; }
.bg-wrap .bg-open-link { width: 100%; white-space: normal; text-align: center; }
.bg-books { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bg-books li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 10px; font-size: 13px; border-bottom: 1px solid var(--line); }
.bg-books li:last-child { border-bottom: 0; }
.bg-book-n { font-weight: 600; overflow-wrap: anywhere; }
.bg-book-m { color: var(--muted); font-size: 12px; white-space: nowrap; }
.bg-book-m.bg-warn { color: var(--gold); }
.bg-book-o { font-family: var(--display); font-variant-numeric: tabular-nums; color: var(--green); white-space: nowrap; }
.bg-slip-l { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.bg-slip-f { display: block; width: 100%; height: 680px; border: 0; border-radius: 10px; background: #fff; }
/* Link created with mismatched props (owner, 2026-10-11): the slip that came back differs from the combination.
   Also used by the card view's "Create my link" (app.js), so nothing here depends on .bg-wrap. */
.bg-mismatch {
  box-sizing: border-box; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  color: #fde68a; background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .6); border-left-width: 4px;
}
.bg-mismatch-h { margin: 0 0 6px; font-weight: 700; }
.bg-mismatch-l { margin: 0; padding-left: 18px; display: grid; gap: 3px; overflow-wrap: anywhere; }
.bg-mismatch-d { margin-top: 8px; }
.bg-mismatch-d > summary { cursor: pointer; font-weight: 600; }
.bg-mismatch-d > .bg-mismatch-l { margin-top: 4px; }
:root[data-theme="light"] .bg-mismatch { color: #78350f; background: #fef3c7; border-color: #d97706; }

/* ---------- mobile launcher + bottom sheet ---------- */
.bg-fab {
  display: none; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 80;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 8px 24px rgba(79, 125, 255, .35);
}
.bg-scrim { display: none; position: fixed; inset: 0; z-index: 85; background: rgba(3, 5, 14, .72); backdrop-filter: blur(3px); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .bg-rkteams { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .bg-layout { grid-template-columns: minmax(0, 1fr); }
  .bg-main { padding-bottom: 80px; }
  .bg-fab { display: inline-flex; }
  .bg-scrim:not([hidden]) { display: block; }
  .bg-ph-x { display: grid; }
  .bg-panel {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 90;
    max-height: 88vh; max-height: 88dvh;
    border-radius: 18px 18px 0 0; border-bottom: 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .bg-panel.bg-open { transform: none; visibility: visible; transition: transform .25s ease; }
  .bg-scrollhint { display: block; }
}
@media (max-width: 640px) {
  .bg-wrap { --bg-slot-w: 36px; --bg-player-w: 148px; }
  .bg-wrap .bg-title { font-size: 25px; }
  .bg-card { padding: 12px; }
  .bg-c-slot { padding-left: 6px; padding-right: 2px; }
  .bg-c-player { padding: 6px; }
  .bg-add { width: 26px; }
  .bg-picker { grid-template-columns: minmax(0, 1fr); }
  .bg-rk-row { grid-template-columns: 28px minmax(0, 1fr); }
  .bg-rk-act { grid-column: 2 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .bg-morebox { grid-column: 1 / -1; }
  .bg-th-hint { display: none; }
  .bg-legend { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-panel, .bg-panel.bg-open { transition: none; }
  .bg-spin { animation-duration: 2s; }
}

/* ======================================================================
   Card-style Galaxy Matchups view (.bgc-): an interactive HTML version of the card image
   ====================================================================== */
.bgc-note { margin: -6px 0 14px; color: var(--faint); font-size: 12.5px; }

.bgc-card {
  container-type: inline-size; container-name: bgc;
  width: 100%; max-width: 1100px; min-width: 0;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  background: #f3f6fb; color: #12263f;
}

/* header band */
.bgc-head { background: #12263f; color: #e8eef8; padding: 16px 26px 16px; }
.bgc-brand { font: 600 17px var(--display); padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.bgc-head-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 12px; }
.bgc-kicker { color: #c5d0e3; font-weight: 600; font-size: 14px; letter-spacing: .03em; }
.bgc-date { color: #c5d0e3; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-align: right; }
.bgc-head .bgc-team { margin: 8px 0 2px; color: #fff; font: 800 30px/1.1 var(--display); font-size: clamp(24px, 4.2cqi, 40px); letter-spacing: 0; overflow-wrap: anywhere; }
.bgc-vs { color: #c9d4e6; font-size: 16px; }
.bgc-head-foot { margin-top: 10px; color: #b7c4d9; font-weight: 700; font-size: 12.5px; letter-spacing: .03em; align-items: flex-end; }
.bgc-head-foot span:last-child { text-align: right; white-space: nowrap; }

/* body */
.bgc-body { padding: 8px 22px 22px; }
.bgc-sec { margin: 18px 0 0; padding-bottom: 6px; border-bottom: 2px solid #cfd8e6; font: 800 15px var(--display); letter-spacing: .02em; color: #12263f; }
.bgc-colheads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 6px; text-align: center; color: #6b7a93; font-weight: 700; font-size: 12.5px; letter-spacing: .08em; }
/* Each heading mirrors the tile's three columns, so the words sit over the jersey's neck, not the tile's middle. */
.bgc-colheads span { display: grid; grid-template-columns: minmax(80px, .75fr) 116px minmax(0, 1.25fr); gap: 4px; padding: 0 11px; }
.bgc-colheads span > b { grid-column: 2; font-weight: inherit; }
.bgc-colheads.bgc-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bgc-grid { display: grid; gap: 10px; align-items: stretch; }
.bgc-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bgc-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* slot tile */
.bgc-tile {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 8px 10px 10px; border-radius: 12px; background: #ebeff6; border: 2px solid transparent;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.bgc-tile.bgc-on { background: #e4f5fa; border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 24px rgba(34, 211, 238, .38); }
.bgc-slot {
  position: absolute; left: 10px; top: 8px; z-index: 1; min-width: 54px;
  padding: 4px 14px 4px 10px; border-radius: 8px; background: #dde5f1; color: #1b2b46; font: 800 13px var(--display);
}
.bgc-players { display: grid; gap: 10px; }
.bgc-players.bgc-multi .bgc-pl + .bgc-pl { padding-top: 10px; border-top: 1px dashed #bcc8da; }
.bgc-pl { position: relative; min-width: 0; }
/* The rank-tag column is only as wide as its tags need, so the jersey sits closer to them; the attack side gets the rest. */
.bgc-pl-top { display: grid; grid-template-columns: minmax(80px, .75fr) auto minmax(0, 1.25fr); align-items: start; gap: 4px; }
.bgc-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 34px 6px 0 0; }
.bgc-tag { background: #12263f; color: #fff; border-radius: 5px; padding: 3px 8px; font-weight: 800; font-size: 10.5px; letter-spacing: .02em; white-space: nowrap; }
.bgc-jersey { display: block; width: 116px; height: auto; filter: drop-shadow(0 2px 3px rgba(18, 38, 63, .28)); }
.bgc-j-last { font: 700 8.5px var(--display); letter-spacing: .05em; }
.bgc-j-num { font: 800 46px var(--display); }
/* Attack side: the power-play chip sits tight against the jersey's shoulder, and the player's last games
   line up with the chip's left edge underneath it; the numbers run to the right. */
.bgc-ppcol { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 0 0 2px; }
.bgc-form { text-align: left; font: 600 11px/1.3 var(--font); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: #5f6f8a; white-space: nowrap; }
.bgc-form small { display: block; font-size: 8px; font-weight: 700; letter-spacing: .08em; color: #8a97ae; margin-bottom: 1px; }
.bgc-form span { display: block; }
.bgc-form b { display: inline-block; width: 11px; margin-right: 3px; text-align: left; color: #12263f; }
/* A narrow tile: the chip would meet the pick circle, so it starts under the circle instead. */
.bgc-tile { container-type: inline-size; }
@container (max-width: 318px) {
  .bgc-pl-top { grid-template-columns: minmax(70px, .6fr) auto minmax(0, 1.4fr); }
  .bgc-tags { padding-right: 2px; }
  .bgc-ppcol { padding: 34px 0 0 0; }
  .bgc-tag { padding: 2px 6px; font-size: 10px; }   /* so a long rank tag never touches the bigger jersey */
  .bgc-ppcol .bgc-pp { padding: 3px 5px; }   /* (.bgc-ppcol keeps these ahead of the base .bgc-pp rule below) */
  .bgc-ppcol .bgc-pp small { font-size: 7.5px; letter-spacing: .04em; }
  .bgc-ppcol .bgc-pp b { font-size: 14px; }
  .bgc-form { font-size: 10.5px; }
}
.bgc-pp { background: #fff; border: 1.5px solid #7f8fb0; border-radius: 8px; padding: 4px 7px; text-align: center; line-height: 1.15; color: #12263f; }
.bgc-pp small { display: block; font-size: 8px; font-weight: 700; letter-spacing: .06em; color: #6b7a93; }
.bgc-pp b { display: block; font: 800 15px var(--display); }
.bgc-inj { font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
/* The name sits in the tile grid's second row, centered under the jersey; a long name spills evenly past both sleeves. */
.bgc-name { grid-column: 2; position: relative; height: 21px; margin: 2px 0 8px; font: 700 17px/1.2 var(--font); color: #12263f; }
.bgc-name > span { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; }
.bgc-noplayer { padding: 46px 0 36px; text-align: center; color: #7a8aa3; font-style: italic; font-size: 13px; }

/* round check button, top-right of the tile */
.bgc-check { position: absolute; top: 0; right: 0; z-index: 3; width: 24px; height: 24px; cursor: pointer; }
.bgc-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.bgc-check span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #94a3b8; background: #fff; transition: background .15s ease, border-color .15s ease; }
.bgc-check:hover span { border-color: #0891b2; }
.bgc-check input:checked + span { background: var(--cyan); border-color: #0891b2; }
.bgc-check input:checked + span::after {
  content: ""; position: absolute; left: 7px; top: 2px; width: 5px; height: 11px;
  border: solid #06222b; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.bgc-check input:focus-visible + span { outline: 2px solid #0e7490; outline-offset: 2px; }

/* chosen props + picker */
.bgc-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.bgc-badges:not(:empty) { margin-bottom: 8px; }
.bgc-badge { display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer; padding: 3px 8px; border-radius: 999px; background: #12263f; color: #67e8f9; font: 800 10.5px var(--font); letter-spacing: .03em; }
.bgc-badge span { opacity: .7; font-size: 12px; line-height: 1; }
.bgc-badge:hover span { opacity: 1; }
.bgc-picker { margin-bottom: 8px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #cdd7e6; }
.bgc-picker .bg-propset { gap: 6px 14px; }
.bgc-card .bg-pg-t { color: #5b6b85; min-width: 40px; }
.bgc-card .bg-pill { min-height: 28px; padding: 4px 10px; background: #fff; color: #12263f; border-color: #b6c2d6; box-shadow: none; }
.bgc-card .bg-pill:hover { border-color: #0891b2; }
.bgc-card .bg-pill[aria-pressed="true"] { background: var(--cyan); border-color: #0891b2; color: #06222b; box-shadow: none; }

/* history cells */
.bgc-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.bgc-cell {
  display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 38px; padding: 4px 2px;
  border-radius: 6px; color: #0f172a; font-weight: 700; font-size: 12px; line-height: 1.25; text-align: center; overflow-wrap: anywhere;
}
.bgc-totals { margin-top: auto; padding-top: 10px; text-align: center; color: #5f6f8a; font-weight: 600; font-size: 12px; letter-spacing: .02em; }

/* shots by period: one strip per period, newest game first */
.bgp { margin: 2px 0 4px; }
.bgp-grid { display: grid; grid-template-columns: 22px repeat(var(--n, 10), minmax(0, 1fr)); gap: 3px; align-items: center; }
.bgp-l { font: 800 10px var(--display); color: #5f6f8a; }
.bgp-h { font: 700 8px/1.1 var(--font); color: #5f6f8a; text-align: center; letter-spacing: .02em; overflow: hidden; white-space: nowrap; }
.bgp-h.bgp-last { color: #a3adc2; }
.bgp-c { display: grid; place-items: center; height: 22px; border-radius: 5px; font: 800 11.5px var(--font); color: #0f172a; background: #e8edf9; }
.bgp-v1 { background: #bae6fd; }
.bgp-v2 { background: #67e8f9; }
.bgp-v3 { background: #22d3ee; }
.bgc-keys i.bgp-v0 { background: #e8edf9; }
.bgp-sum { margin-top: 5px; font-size: 11.5px; color: #5f6f8a; font-weight: 600; }
.bgp-sum b { color: #12263f; margin-right: 4px; }
.bgp-none { padding: 14px 0 8px; text-align: center; color: #7a8aa3; font-style: italic; font-size: 12px; }
.bgc-period .bgc-pl + .bgp { margin-top: 0; }
/* the defense side of the period tile: what this defense allowed to the slot, per period (sits at the tile's foot,
   so the blocks line up across a row even when a neighbour tile lists two players) */
.bgp-def { margin: auto 0 0; padding-top: 8px; border-top: 1px dashed #bcc8da; }
.bgp-def-h { margin-bottom: 5px; font: 700 9.5px/1.2 var(--font); letter-spacing: .06em; color: #6b7a93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bgp-def-h b { color: #12263f; }
.bgp-vq { background: #f3f6fb; color: #94a3b8; box-shadow: inset 0 0 0 1px #d5deea; }

/* top three by period: rows 1+/2+/3+, columns 1st/2nd/3rd period */
.bgp-ranks { margin: 0 0 6px; }
.bgp-ranks .bgc-sec { margin-top: 0; }
.bgp-ranks .bgc-sec span { font: 600 11px var(--font); color: #6b7a93; margin-left: 8px; letter-spacing: .04em; text-transform: none; }
.bgp-rk-grid { display: grid; grid-template-columns: 74px repeat(3, minmax(0, 1fr)); gap: 6px 8px; margin-top: 10px; }
.bgp-rk-h { font: 700 11px var(--font); letter-spacing: .08em; color: #6b7a93; text-align: center; }
.bgp-rk-l { font: 800 12px var(--display); color: #12263f; padding-top: 8px; align-self: start; }
.bgp-rk-cell { background: #fff; border: 1px solid #d5deea; border-radius: 8px; padding: 6px 8px; min-height: 40px; min-width: 0; }
.bgp-rk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.bgp-rk-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: #12263f; min-width: 0; }
.bgp-rk-list li b { width: 12px; color: #6b7a93; font-size: 11px; flex: none; }
.bgp-rk-name { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bgp-rk-list small { color: #6b7a93; font-size: 10px; font-weight: 700; flex: none; }
.bgp-rk-n { font-weight: 800; color: #0e7490; font-variant-numeric: tabular-nums; flex: none; }
.bgc-card .bgp-rk-list .bg-pill { min-height: 22px; padding: 1px 8px; font-size: 10.5px; flex: none; }
.bgp-rk-none { color: #a3adc2; font-size: 11.5px; }
/* The block follows the card's own width like the lineup grids below it (the card narrows when the
   combination panel is open): one period per row once the card is under 820px. */
@container bgc (max-width: 819px) {
  .bgp-rk-grid { grid-template-columns: 1fr; }
  .bgp-rk-h, .bgp-rk-grid > span:first-child { display: none; }
  .bgp-rk-l { padding-top: 4px; }
  .bgp-rk-cell::before { content: attr(data-period); display: block; font: 700 10px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #6b7a93; margin-bottom: 4px; }
}

/* footer */
.bgc-foot { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid #d5deea; color: #475569; }
.bgc-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; }
.bgc-keys b { color: #12263f; letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; }
.bgc-key { display: inline-flex; align-items: center; }
.bgc-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; }
.bgc-foot p { margin: 8px 0 0; font-size: 12px; color: #64748b; }

/* layout follows the card's own width (desktop: 3 columns, phones: 1) */
@container bgc (max-width: 819px) {
  .bgc-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bgc-colheads:not(.bgc-c2) { display: none; }
  .bgc-gap { display: none; }
}
@container bgc (max-width: 519px) {
  .bgc-g3, .bgc-g2 { grid-template-columns: minmax(0, 1fr); }
  .bgc-colheads { display: none; }
  .bgc-head { padding: 14px 16px; }
  .bgc-body { padding: 4px 12px 16px; }
  .bgc-head-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  .bgc-head-foot span:last-child { text-align: left; }
  .bgc-vs { font-size: 14px; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 899px) {
    .bgc-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bgc-colheads:not(.bgc-c2), .bgc-gap { display: none; }
    .bgp-rk-grid { grid-template-columns: 1fr; }
    .bgp-rk-h, .bgp-rk-grid > span:first-child { display: none; }
    .bgp-rk-cell::before { content: attr(data-period); display: block; font: 700 10px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #6b7a93; margin-bottom: 4px; }
  }
  @media (max-width: 560px) {
    .bgc-g3, .bgc-g2 { grid-template-columns: minmax(0, 1fr); }
    .bgc-colheads { display: none; }
  }
}