/* ═══════════════════════════════════════════════════════════════
   Zilla Engine · B+ stage visuals (boards 20–30)
   One family per stage format: elimination tree, step ladder, group
   board, split fork, swiss buckets, series cards, ladder, court queue,
   gauntlet chain, day timeline, mixer board.
   Tokens only (tokens.css). Prefix bp-sv-. Lives inside .bp-page.
   ═══════════════════════════════════════════════════════════════ */

.bp-sv { --row-h: 40px; --lab-h: 20px; --edge: 6px; --col-w: 220px; --gap-x: 34px;
  position: relative; color: var(--text); font-family: var(--bp-body); min-width: 0; }
.bp-sv *, .bp-sv *::before, .bp-sv *::after { box-sizing: border-box; }
.bp-sv a { color: inherit; text-decoration: none; }
.bp-sv .bp-d { font-family: var(--bp-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.bp-sv .bp-l { font-family: var(--bp-display); font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: .08em; line-height: 1.15; }
.bp-sv-meta { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.bp-sv-meta.bp-accent, .bp-sv .bp-accent { color: var(--acc); }
.bp-live-txt { color: var(--live); }
.bp-sv-foot { margin-top: 22px; }
.bp-sv-advline { margin-top: 18px; color: var(--acc); font-size: 13px; }
.bp-sv-list { display: grid; gap: var(--space-row); }

/* ── Empty states ── */
.bp-sv-empty { padding: 26px 20px; background: var(--surface); color: var(--muted); list-style: none; }
.bp-sv-empty .bp-d { font-size: 20px; color: var(--sub); }
.bp-sv-empty.is-dashed { background: transparent; border: 1px dashed var(--line-2); text-align: center; padding: 30px 16px; }

/* ── Slanted plate + rule (internal headers: Challenges, Win streaks…) ── */
.bp-sv-plate-row { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.bp-sv-plate-row .bp-sv-meta { margin: 0; white-space: nowrap; }
.bp-sv-plate { display: inline-block; background: var(--acc); color: var(--accent-ink); padding: 6px 18px 5px; transform: skewX(-12deg); flex: none; }
.bp-sv-plate > span { display: block; transform: skewX(12deg); font-size: 26px; }
.bp-sv-rule { flex: 1; height: 2px; background: linear-gradient(90deg, var(--acc), transparent); min-width: 20px; }

/* ── Tabs (mobile round / pane switchers) ── */
.bp-sv-tabs { display: none; gap: 6px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
.bp-sv-tab { flex: none; border: 0; cursor: pointer; padding: 7px 14px; background: var(--surface-2); color: var(--sub);
  transform: skewX(-12deg); font-size: 13px; }
.bp-sv-tab.is-on { background: var(--acc); color: var(--accent-ink); }

/* ══════════ Team side (one row of a game) ══════════ */
.bp-sv-s { --tc: var(--muted); display: flex; align-items: center; gap: 10px; height: var(--row-h); padding: 0 14px 0 calc(var(--edge) + 12px);
  position: relative; background:
    linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%), var(--surface); min-width: 0; }
.bp-sv-s::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--edge); background: var(--tc); }
.bp-sv-s .bp-crest { --s: 24px; font-size: 9px; }
.bp-sv-s__seed { color: var(--muted); font-size: 13px; width: 14px; text-align: right; flex: none; font-family: var(--bp-display); font-weight: 700; }
.bp-sv-s__name { font-size: 20px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-sv-s__score { font-size: 22px; flex: none; color: var(--text); }
.bp-sv-s.is-won .bp-sv-s__score { color: var(--acc); }
.bp-sv-s.is-lost { opacity: .45; }
.bp-sv-s.is-tbd { background: transparent; border: 1px dashed var(--line-2); color: var(--dim); }
.bp-sv-s.is-tbd::before { display: none; }
.bp-sv-s.is-tbd .bp-sv-s__name { font-family: var(--bp-display); font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--dim); }
.bp-sv-s + .bp-sv-s { margin-top: 2px; }

/* ══════════ Game (label + two sides) ══════════ */
.bp-sv-g { position: relative; min-width: 0; }
.bp-sv-g__lab { font-size: 11.5px; line-height: 14px; color: var(--muted); margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-sv-g.is-live .bp-sv-g__lab { color: var(--live); }
.bp-sv-g__box { display: block; position: relative; }
a.bp-sv-g__box:hover .bp-sv-s:not(.is-tbd) { background-color: var(--surface-2); }
.bp-sv-g.is-live .bp-sv-g__box { outline: 2px solid var(--live); outline-offset: 0; background: color-mix(in srgb, var(--live) 10%, transparent); }
.bp-sv-g.is-bye .bp-sv-s.is-tbd { opacity: .5; }

/* ══════════ Champion card ══════════ */
.bp-sv-champ { --tc: var(--muted); position: relative; display: inline-block; min-width: 260px; max-width: 100%;
  padding: 16px 22px 18px; border-top: 4px solid var(--acc);
  background: linear-gradient(110deg, color-mix(in srgb, var(--tc) 35%, var(--surface)), var(--surface) 70%); }
.bp-sv-champ__sub { color: var(--champion); font-size: 12px; display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.bp-sv-champ__row { display: flex; align-items: center; gap: 14px; }
.bp-sv-champ__row .bp-crest { --s: 48px; }
.bp-sv-champ__row .bp-d { font-size: 40px; }

/* ══════════ 1 · Elimination tree ══════════ */
.bp-sv-tree-sec + .bp-sv-tree-sec { margin-top: 34px; }
.bp-sv-sec { font-size: 14px; color: var(--sub); margin: 0 0 14px; }
.bp-sv-tree { display: flex; align-items: stretch; gap: var(--gap-x); overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.bp-sv-col { flex: none; width: var(--col-w); display: flex; flex-direction: column; }
.bp-sv-col__head { display: none; } /* boards label each game instead; the round name lives in the mobile tabs */
.bp-sv-col__body { position: relative; }
.bp-sv-col__body { flex: 1; display: flex; flex-direction: column; }
/* Each pair and each game takes an equal share of the column, so game n of round r+1
   sits exactly between games 2n-1 and 2n of round r (box centre = slot centre + lab-h/2). */
.bp-sv-pair { position: relative; flex: 1; display: flex; flex-direction: column; }
.bp-sv-pair > .bp-sv-g { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 9px 0; }
.bp-sv-g__lab { height: 14px; }
/* connector: right stub from each game, vertical join for pairs, left stub into next column */
.bp-sv-col.has-join .bp-sv-pair.is-two::after { content: ''; position: absolute; right: calc(var(--gap-x) / -2);
  top: calc(25% + var(--lab-h) / 2); bottom: calc(25% - var(--lab-h) / 2); border-right: 2px solid var(--line-2); }
.bp-sv-col.has-join .bp-sv-g__box::after,
.bp-sv-col.has-feed .bp-sv-g__box::after { content: ''; position: absolute; right: calc(var(--gap-x) / -2); top: 50%; width: calc(var(--gap-x) / 2); border-top: 2px solid var(--line-2); }
.bp-sv-col.has-in .bp-sv-g__box::before { content: ''; position: absolute; left: calc(var(--gap-x) / -2); top: 50%; width: calc(var(--gap-x) / 2); border-top: 2px solid var(--line-2); }
.bp-sv.is-in_progress .bp-sv-col.has-join .bp-sv-pair.is-two::after,
.bp-sv.is-finished .bp-sv-col.has-join .bp-sv-pair.is-two::after { border-color: color-mix(in srgb, var(--acc) 85%, transparent); }
.bp-sv.is-in_progress .bp-sv-g.is-final .bp-sv-g__box::after,
.bp-sv.is-finished .bp-sv-g.is-final .bp-sv-g__box::after { border-color: var(--acc); }
.bp-sv-col--champ { width: auto; }
.bp-sv-col--champ .bp-sv-champ { margin-top: var(--lab-h); }
.bp-sv-col--champ .bp-sv-champ::before { content: ''; position: absolute; right: 100%; top: 50%; width: var(--gap-x); border-top: 2px solid var(--acc); }
.bp-sv-col--champ .bp-sv-col__body { justify-content: center; }
.bp-sv-third { position: absolute; left: 0; right: 0; top: calc(50% + var(--row-h) + var(--lab-h) + 34px); }
.bp-sv-tree.is-short { padding-bottom: calc(var(--row-h) * 2 + var(--lab-h) + 40px); }

/* ══════════ 2 · Step ladder ══════════ */
.bp-sv-steps { --step: 68px; display: flex; align-items: flex-end; gap: var(--gap-x); overflow-x: auto; padding: 4px 0 6px; }
.bp-sv-step { flex: none; width: var(--col-w); display: flex; flex-direction: column; gap: 18px;
  padding-bottom: calc(var(--rise) * var(--step)); position: relative; }
/* elbow: from the feeding game's centre, right, then up to the top row of the next step's game */
.bp-sv-step.has-up > .bp-sv-g:last-child .bp-sv-g__box::after { content: ''; position: absolute; right: calc(var(--gap-x) / -2);
  bottom: 50%; height: calc(var(--step) + var(--row-h) / 2 + 1px); width: calc(var(--gap-x) / 2);
  border-right: 2px solid var(--line-2); border-bottom: 2px solid var(--line-2); }
.bp-sv-step.has-in > .bp-sv-g:first-child .bp-sv-g__box::before { content: ''; position: absolute; left: calc(var(--gap-x) / -2);
  top: calc(var(--row-h) / 2); width: calc(var(--gap-x) / 2); border-top: 2px solid var(--line-2); }
.bp-sv.is-in_progress .bp-sv-step.has-up > .bp-sv-g.is-final:last-child .bp-sv-g__box::after,
.bp-sv.is-finished .bp-sv-step.has-up > .bp-sv-g.is-final:last-child .bp-sv-g__box::after { border-color: var(--acc); }
.bp-sv-step--champ .bp-sv-champ::before { content: ''; position: absolute; right: 100%; top: calc(100% - var(--row-h) - 1px); width: var(--gap-x); border-top: 2px solid var(--acc); }
.bp-sv-step--champ { width: auto; justify-content: flex-end; }

/* ══════════ Rows (group table, ladder, split, mixer, streaks) ══════════ */
.bp-sv-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bp-sv-row { --tc: var(--muted); display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px 0 10px; position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, transparent), transparent 62%), var(--surface); min-width: 0; }
.bp-sv-row .bp-crest { --s: 24px; font-size: 9px; }
.bp-sv-row__rank { width: 26px; text-align: center; font-size: 24px; color: color-mix(in srgb, var(--text) 55%, transparent); flex: none; }
.bp-sv-rows > .bp-sv-row:first-child .bp-sv-row__rank { color: var(--text); }
.bp-sv-row__slash { width: 4px; height: 70%; background: var(--tc); transform: skewX(-12deg); flex: none; margin-right: 2px; }
.bp-sv-row__name { font-size: 20px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-sv-row__wl { font-size: 20px; flex: none; min-width: 44px; text-align: right; }
.bp-sv-row__pts { font-size: 20px; flex: none; min-width: 34px; text-align: right; color: var(--acc); }
/* boards: group tables do not mark live rows (the grid cell does); the split fork does */
.bp-sv-split .bp-sv-row.is-live, .bp-sv-ladder .bp-sv-row.is-live { outline: 2px solid var(--live); outline-offset: -2px; }
.bp-sv-row.is-dim { opacity: .45; }
.bp-sv-row.is-tbd { background: transparent; border: 1px dashed var(--line-2); padding-left: 14px; color: var(--dim); }
.bp-sv-row.is-tbd .bp-l { font-size: 12px; }
.bp-sv-rows--sm .bp-sv-row { height: 34px; }
.bp-sv-rows--sm .bp-sv-row__name, .bp-sv-rows--sm .bp-sv-row__wl { font-size: 18px; }
.bp-sv-rows--sm .bp-sv-row__rank { font-size: 19px; }
.bp-sv-rows--sm .bp-crest { --s: 20px; font-size: 8px; }
.bp-sv-rows--lg .bp-sv-row { height: 46px; }
.bp-sv-rows--lg .bp-sv-row__name { font-size: 22px; }
.bp-sv-q { background: var(--acc); color: var(--accent-ink); font-size: 11px; padding: 2px 6px; flex: none; }
.bp-sv-up { color: var(--acc); font-size: 12px; flex: none; }
.bp-sv-adv { list-style: none; display: flex; align-items: center; gap: 10px; color: var(--acc); font-size: 11px; height: 18px; }
.bp-sv-adv::before, .bp-sv-adv::after { content: ''; flex: 1; border-top: 2px dashed color-mix(in srgb, var(--acc) 80%, transparent); }
.bp-sv-adv > span { flex: none; }

/* ══════════ 3 · Group board ══════════ */
.bp-sv-gb { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 50px; align-items: start; }
.bp-sv-gb__games { display: none; }
.bp-sv-gb__gridlab { margin-top: 20px; }
.bp-sv-grid-scroll { overflow-x: auto; }
.bp-sv-grid { border-collapse: separate; border-spacing: 4px; }
.bp-sv-grid th { padding: 0 0 4px; font-weight: 400; }
.bp-sv-grid th .bp-crest { --s: 24px; font-size: 9px; }
.bp-sv-grid tbody th { padding: 0 10px 0 0; }
.bp-sv-grid td { width: 46px; height: 46px; padding: 0; background: var(--surface); text-align: center; vertical-align: middle; }
.bp-sv-grid td.is-self { background: repeating-linear-gradient(135deg, var(--surface) 0 5px, var(--surface-2) 5px 10px); }
.bp-sv-grid td.r-w { background: var(--acc); }
.bp-sv-cell { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 18px; }
.bp-sv-cell + .bp-sv-cell { border-top: 1px solid var(--bg); height: 50%; }
.bp-sv-cell--w { color: var(--accent-ink); background: var(--acc); }
.bp-sv-cell--l { color: var(--muted); }
.bp-sv-cell--d { color: var(--sub); }
.bp-sv-cell--live { outline: 2px solid var(--live); outline-offset: -2px; background: color-mix(in srgb, var(--live) 22%, var(--surface)); color: var(--text); }
.bp-sv-cell--live .bp-l { font-size: 9px; }

/* ══════════ 4 · Split fork ══════════ */
.bp-sv-split { display: grid; grid-template-columns: minmax(0, 330px) minmax(90px, 140px) minmax(0, 300px) auto; gap: 0 4px; align-items: center; }
.bp-sv-split__p1 { align-self: start; }
.bp-sv-split__fork { position: relative; align-self: stretch; min-height: 260px; }
.bp-sv-split__fork svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bp-sv-split__fork path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.bp-sv-fork__a { stroke: var(--line-2); stroke-dasharray: 5 5; }
.bp-sv-fork__b { stroke: var(--line-2); stroke-dasharray: 5 5; }
.bp-sv-split.is-split .bp-sv-fork__a { stroke: var(--acc); stroke-dasharray: none; }
.bp-sv-split.is-split .bp-sv-fork__b { stroke: var(--muted); stroke-dasharray: none; }
.bp-sv-split__label { position: absolute; left: 6px; right: 0; top: 50%; transform: translateY(-50%); font-size: 11px; text-align: center; }
.bp-sv-split__branches { display: grid; gap: 28px; }
.bp-sv-split__champ { padding-left: 26px; }
.bp-sv-livenote { display: inline-flex; align-items: center; gap: 6px; color: var(--live); font-size: 11.5px; margin-top: 8px; }

/* ══════════ 5 · Swiss buckets ══════════ */
.bp-sv-swiss { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.bp-sv-bucket { background: color-mix(in srgb, var(--surface) 60%, transparent); border-top: 3px solid var(--line-2); padding: 12px 10px 14px; display: grid; gap: 4px; align-content: start; min-height: 200px; }
.bp-sv-bucket.is-top { border-top-color: var(--acc); }
.bp-sv-bucket__rec { font-size: 36px; margin: 2px 4px 8px; }
.bp-sv-bucket__game + .bp-sv-bucket__game { margin-top: 10px; }
.bp-sv-bucket__game.is-live .bp-sv-livenote { margin-top: 6px; }
.bp-sv-bucket__foot { color: var(--muted); font-size: 11px; margin-top: 8px; }
.bp-sv-bucket .bp-sv-s { height: 40px; }
.bp-sv-bucket .bp-sv-s__name { font-size: 19px; }
.bp-sv-bucket .bp-sv-s__seed { display: none; }

/* ══════════ 6 · Series cards ══════════ */
.bp-sv-series { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
.bp-sv-card { background: var(--panel); border-top: 3px solid var(--line-2); padding: 10px 10px 12px; display: grid; gap: 4px; min-width: 0; }
.bp-sv-card.is-live { border-top-color: var(--live); }
.bp-sv-card.is-over { border-top-color: var(--acc); }
.bp-sv-card__head { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--muted); margin: 0 0 6px; }
.bp-sv-card.is-live .bp-sv-card__head { color: var(--live); }
.bp-sv-srow { --tc: var(--muted); display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px 0 calc(var(--edge) + 12px); position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 24%, transparent), transparent 60%), var(--surface); }
.bp-sv-srow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--edge); background: var(--tc); }
.bp-sv-srow .bp-crest { --s: 26px; font-size: 10px; }
.bp-sv-srow__name { font-size: 23px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-sv-srow__w { font-size: 26px; width: 26px; text-align: right; flex: none; }
.bp-sv-srow.is-won .bp-sv-srow__w { color: var(--acc); }
.bp-sv-srow.is-lost { opacity: .45; }
.bp-sv-boxes { display: inline-flex; gap: 3px; flex: none; }
.bp-sv-box { display: block; width: 18px; height: 16px; background: var(--surface-2); transform: skewX(-12deg); }
.bp-sv-box.is-win { background: var(--tc); }
.bp-sv-box.is-live { background: transparent; outline: 2px solid var(--live); outline-offset: -2px; }

/* ══════════ 7 · Ladder ══════════ */
.bp-sv-ladder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.bp-sv-chal { display: grid; gap: 6px; }
.bp-sv-chal__item { position: relative; display: block; background: var(--surface); border-left: 3px solid var(--line-2); padding: 12px 14px; }
.bp-sv-chal__item .bp-d { font-size: 21px; padding-right: 70px; }
.bp-sv-chal__item .bp-sv-meta { margin: 4px 0 0; font-size: 11px; }
.bp-sv-chal__item.is-live { border-left-color: var(--live); background: linear-gradient(90deg, color-mix(in srgb, var(--live) 26%, var(--surface)), var(--surface) 75%); }
.bp-sv-chal__item.is-done { border-left-color: var(--acc); }
.bp-sv-chal__item.is-empty .bp-d { color: var(--text); }
.bp-sv-livetag { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) skewX(-12deg); background: var(--live); color: var(--white);
  font-size: 11px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; }

/* ══════════ 8 · Court queue ══════════ */
.bp-sv-kotc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.bp-sv-court { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 190px; background: var(--panel); border: 1px solid var(--line-2); margin: 0 0 18px; }
.bp-sv-court::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--line-2); }
.bp-sv-court.is-live { border-color: color-mix(in srgb, var(--live) 50%, var(--line-2)); }
.bp-sv-court.is-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.bp-sv-court.is-empty::after, .bp-sv-court.is-empty .bp-sv-court__circle { display: none; }
.bp-sv-court__lab { position: absolute; left: 12px; top: 10px; font-size: 11px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; z-index: 1; }
.bp-sv-court.is-live .bp-sv-court__lab { color: var(--live); }
.bp-sv-court__circle { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; border: 1px solid var(--line-2); border-radius: 50%; transform: translate(-50%, -50%); }
.bp-sv-court__half { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 34px 10px 18px; position: relative; z-index: 1; min-width: 0; }
.bp-sv-court__half .bp-crest { --s: 46px; }
.bp-sv-court__name { font-size: 26px; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-sv-court__score { font-size: 48px; }
.bp-sv-court__score.is-acc { color: var(--acc); }
.bp-sv-king { background: var(--acc); color: var(--accent-ink); font-size: 11px; padding: 3px 10px; transform: skewX(-12deg); }
.bp-sv-queue { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; }
.bp-sv-qcard { --tc: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; background: var(--surface); border-top: 2px solid var(--tc); min-width: 0; }
.bp-sv-qcard .bp-crest { --s: 22px; font-size: 9px; }
.bp-sv-qcard .bp-d { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-sv-qcard .bp-sv-meta { margin: 0; font-size: 9.5px; }
.bp-sv-kotc__side .bp-sv-row { margin-bottom: 4px; }
.bp-sv-pips { display: inline-flex; gap: 5px; flex: none; }
.bp-sv-pip { width: 10px; height: 16px; background: var(--surface-3); transform: skewX(-12deg); }
.bp-sv-pip.is-on { background: var(--acc); }

/* ══════════ 9 · Gauntlet chain ══════════ */
.bp-sv-chain { list-style: none; margin: 0; padding: 18px 0 6px; display: flex; gap: 18px; overflow-x: auto; align-items: flex-end; }
.bp-sv-link { --tc: var(--muted); flex: 0 0 190px; position: relative; }
.bp-sv-link + .bp-sv-link::before { content: ''; position: absolute; left: -18px; width: 18px; top: 50%; border-top: 2px solid var(--line-2); }
.bp-sv-link__card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 14px; min-height: 120px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 45%, var(--surface)), var(--surface)); border-top: 3px solid color-mix(in srgb, var(--tc) 70%, var(--line-2)); position: relative; }
.bp-sv-link__card .bp-crest { --s: 52px; }
.bp-sv-link__name { font-size: 24px; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-sv-link__role { font-size: 10.5px; color: var(--muted); text-align: center; }
.bp-sv-link__score { font-size: 30px; }
.bp-sv-link.is-holder .bp-sv-link__card { border-top-color: var(--acc); background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 30%, var(--surface-2)), var(--surface)); transform: translateY(-18px); }
.bp-sv-link.is-holder .bp-sv-link__role { color: var(--acc); }
.bp-sv-link.is-live .bp-sv-link__card { border-top-color: var(--live); transform: translateY(-18px); }
.bp-sv-link.is-live .bp-sv-link__role { color: var(--live); }
.bp-sv-link.is-beaten { opacity: .38; }
.bp-sv-link.is-beaten + .bp-sv-link::before, .bp-sv-link.is-holder + .bp-sv-link::before { border-color: var(--acc); }

/* ══════════ 10 · Day timeline ══════════ */
.bp-sv-tl__scroll { overflow-x: auto; }
.bp-sv-tl__grid { position: relative; min-width: 860px; padding: 26px 28px 8px 136px; }
.bp-sv-tl.is-lanes .bp-sv-tl__grid { padding-left: 0; }
.bp-sv-tl__ticks { right: 28px !important; }
.bp-sv-tl__ticks { position: absolute; left: 136px; right: 0; top: 0; height: 20px; }
.bp-sv-tl.is-lanes .bp-sv-tl__ticks { left: 0; }
.bp-sv-tl__ticks span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); }
.bp-sv-tl__row { position: relative; height: 68px; }
.bp-sv-tl__lab { position: absolute; left: -136px; width: 126px; top: 16px; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-sv-tl.is-lanes .bp-sv-tl__lab { display: none; }
.bp-sv-tl__track { position: relative; height: 100%; }
.bp-sv-tl__line { position: absolute; top: -26px; bottom: 0; border-left: 1px solid var(--line); }
.bp-sv-tl__game { position: absolute; top: 4px; height: 60px; padding: 6px 8px; background: var(--surface); border-top: 2px solid var(--line-2); overflow: hidden; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bp-sv-tl__game.is-final { border-top-color: var(--acc); }
.bp-sv-tl__game.is-live { border-top-color: var(--live); background: color-mix(in srgb, var(--live) 26%, var(--surface)); }
.bp-sv-tl__glab { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 4px; align-items: center; }
.bp-sv-tl__game.is-live .bp-sv-tl__glab { color: var(--live); }
.bp-sv-tl__teams { font-size: 15px; line-height: 1.05; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bp-sv-tl__now { --pl: 136px; position: absolute; top: 20px; bottom: 0; left: calc(var(--pl) + (100% - var(--pl) - 28px) * var(--x) / 100);
  border-left: 2px solid var(--live); pointer-events: none; }
.bp-sv-tl.is-lanes .bp-sv-tl__now { --pl: 0px; }
.bp-sv-tl__now span { position: absolute; bottom: -22px; left: 0; transform: translateX(-50%) skewX(-12deg); background: var(--live); color: var(--white); font-size: 10px; padding: 3px 8px; white-space: nowrap; }
.bp-sv-tl > .bp-sv-meta { margin-top: 30px; }
.bp-sv-tl__list { display: none; list-style: none; margin: 0; padding: 0; gap: 4px; }
.bp-sv-tl__item { display: flex; align-items: center; gap: 14px; padding: 8px 12px; background: var(--surface); border-left: 3px solid var(--line-2); }
.bp-sv-tl__item > .bp-d { font-size: 20px; width: 56px; flex: none; }
.bp-sv-tl__item > span:last-child { display: grid; gap: 3px; min-width: 0; }
.bp-sv-tl__item > span:last-child .bp-sv-meta { margin: 0; font-size: 10px; }
.bp-sv-tl__item > span:last-child .bp-d { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-sv-tl__item.is-final { border-left-color: var(--acc); }
.bp-sv-tl__item.is-live { border-left-color: var(--live); background: color-mix(in srgb, var(--live) 24%, var(--surface)); }

/* ══════════ 11 · Mixer board ══════════ */
.bp-sv-mix { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.bp-sv-mix__games { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.bp-sv-mix__card { background: var(--panel); border-top: 3px solid var(--line-2); padding: 10px 10px 12px; display: grid; gap: 6px; }
.bp-sv-mix__card.is-live { border-top-color: var(--live); }
.bp-sv-mix__card.is-final { border-top-color: var(--acc); }
.bp-sv-mix__no { font-size: 24px; }
.bp-sv-mix .bp-sv-row__pts { color: var(--text); }
.bp-sv-mix .bp-sv-row__pts.bp-accent { color: var(--acc); }
.bp-sv-mix__card > .bp-sv-meta { margin: 0 0 4px; font-size: 11px; }

/* ══════════ Compact (Home playoffs block) ══════════ */
.bp-sv--compact { --row-h: 38px; --col-w: 190px; --gap-x: 26px; }
.bp-sv--compact .bp-sv-s__name { font-size: 18px; }
.bp-sv--compact .bp-sv-s__score { font-size: 20px; }
.bp-sv--compact .bp-sv-champ__row .bp-d { font-size: 30px; }
.bp-sv--compact .bp-sv-gb, .bp-sv--compact .bp-sv-ladder, .bp-sv--compact .bp-sv-kotc, .bp-sv--compact .bp-sv-mix { grid-template-columns: minmax(0, 1fr); }
.bp-sv--compact .bp-sv-series { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.bp-sv--compact .bp-sv-swiss { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.bp-sv--compact .bp-sv-tl__grid { min-width: 640px; }

/* ══════════ Mobile (≤768) ══════════ */
@media (max-width: 768px) {
  .bp-sv { --row-h: 40px; --col-w: 100%; }
  .bp-sv-tabs { display: flex; }
  /* tree: one round at a time */
  .bp-sv-tree { display: block; overflow: visible; }
  .bp-sv-col { width: 100%; display: none; }
  .bp-sv-col.is-cur { display: flex; }
  .bp-sv-col__head { display: none; }
  .bp-sv-col--champ { display: flex; margin-top: 18px; }
  .bp-sv-col--champ .bp-sv-champ { margin-top: 0; }
  .bp-sv-col--champ .bp-sv-champ::before { display: none; }
  .bp-sv-pair > .bp-sv-g { padding: 7px 0; }
  .bp-sv-g__box::before, .bp-sv-g__box::after, .bp-sv-pair::after { display: none !important; }
  .bp-sv-third { position: static; margin-top: 18px; }
  .bp-sv-tree.is-short { padding-bottom: 0; }
  /* step ladder: stacked in play order */
  .bp-sv-steps { flex-direction: column; align-items: stretch; gap: 16px; }
  .bp-sv-step { width: 100%; padding-bottom: 0; }
  .bp-sv-step--champ .bp-sv-champ::before { display: none; }
  /* group board: one pane at a time */
  .bp-sv-gb { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bp-sv-pane { display: none; }
  .bp-sv-pane.is-on { display: block; }
  .bp-sv-gb__games.is-on { display: grid; gap: 14px; }
  .bp-sv-gb__gridlab { display: none; }
  .bp-sv-row__name { font-size: 18px; }
  /* split: stacked branches only */
  .bp-sv-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bp-sv-split__fork { display: none; }
  .bp-sv-split.is-split .bp-sv-split__p1 { display: none; }
  .bp-sv-split__champ { padding-left: 0; }
  .bp-sv-swiss, .bp-sv-series, .bp-sv-ladder, .bp-sv-kotc, .bp-sv-mix { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bp-sv-bucket { background: transparent; border-top: 0; padding: 0; min-height: 0; }
  .bp-sv-bucket__rec { font-size: 26px; margin: 4px 0; }
  .bp-sv-srow__name { font-size: 19px; }
  .bp-sv-box { width: 13px; height: 13px; }
  .bp-sv-court__name { font-size: 20px; }
  .bp-sv-court__score { font-size: 38px; }
  .bp-sv-queue { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* gauntlet: vertical list */
  .bp-sv-chain { flex-direction: column; align-items: stretch; gap: 4px; overflow: visible; padding-top: 0; }
  .bp-sv-link { flex: none; }
  .bp-sv-link + .bp-sv-link::before { display: none; }
  .bp-sv-link__card { flex-direction: row; min-height: 0; padding: 8px 12px; gap: 12px; border-top: 0; border-left: 3px solid var(--line-2);
    background: var(--surface); transform: none !important; }
  .bp-sv-link__card .bp-crest { --s: 26px; font-size: 10px; }
  .bp-sv-link__name { font-size: 20px; flex: 1; text-align: left; }
  .bp-sv-link.is-holder .bp-sv-link__card { border-left-color: var(--acc); }
  .bp-sv-link.is-live .bp-sv-link__card { border-left-color: var(--live); }
  .bp-sv-link__score { font-size: 22px; }
  /* timeline: list */
  .bp-sv-tl__scroll { display: none; }
  .bp-sv-tl__list { display: grid; }
  .bp-sv-tl > .bp-sv-meta { margin-top: 14px; }
  .bp-sv-champ { min-width: 0; width: 100%; }
  .bp-sv-champ__row .bp-d { font-size: 32px; }
  .bp-sv-plate > span { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-sv * { transition: none !important; animation: none !important; }
}