/* Live event / projector — extracted from app/views/live/event.php.
   --bb-proj-scrim is set by a tiny inline style in the view (PHP). */

/* Heat timeline state colours — past dimmed, live highlighted. */
.bb-heat-past    { opacity: 0.45; filter: grayscale(0.6); }
.bb-heat-live    { box-shadow: 0 0 0 2px var(--color-accent), 0 0 18px var(--color-accent-glow) !important; }
.bb-heat-upcoming { border-color: color-mix(in srgb, var(--color-muted) 45%, transparent) !important; }
.bb-heat-live > .card-header,
.card.bb-heat-live > .card-header { background: color-mix(in srgb, var(--color-accent) 15%, transparent) !important; }
.bb-projector-flow {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin-top: 0px;
}
/* Live-first ordering: when anything live is on screen (winner reveal,
   live battles, or active cypher heats), hoist the live focal area
   above the completed-results blocks. Default DOM order (completed at
   top) is preserved when nothing is live. Per stakeholder directive
   2026-05-01 superseding the 2026-04-30 "completed always first" rule. */
.bb-live-flow { display: flex; flex-direction: column; }
.bb-live-flow.has-live-active #liveMessage { order: -2; }
.bb-live-flow.has-live-active #liveAnchor,
.bb-live-flow.has-live-active #winnerRevealWrap,
.bb-live-flow.has-live-active #liveBattlesWrap,
.bb-live-flow.has-live-active #activeHeatsWrap { order: -1; }
/* Empty-LIVE rotation slide cross-fade. */
.bb-empty-slide       { transition: opacity 400ms ease-in-out; opacity: 1; }
.bb-empty-slide-out   { opacity: 0; }
.bb-empty-slide-in    { opacity: 1; }
.bb-empty-cat-card    { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 16px; }
.bb-empty-cat-card .bb-progress-bar { height: 6px; background: var(--color-surface-2); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.bb-empty-cat-card .bb-progress-bar > span { display: block; height: 100%; background: var(--color-accent); }

.bb-live-anchor { scroll-margin-top: 8px; }
.bb-past-results-heading { letter-spacing: 0.08em; }
.bb-bracket-wrap { overflow: hidden; }
/* Non-projector: original inline display:flex!important defeated .d-none so
   the bracket rail stays in layout. Projector hides it via :has() below. */
body:not(.bb-projector):not(:has(.bb-projector-flow)) #bracketWrap.bb-bracket-wrap { display: flex !important; }
.bb-bracket-inner { flex: 1; min-width: 0; overflow: auto; background: var(--color-bg); }
.bb-empty-standby {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.bb-champion-card { max-width: 600px; }
.bb-reconnection-overlay {
    background: color-mix(in srgb, var(--color-bg) 80%, transparent);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.bb-reconnection-spinner { width: 4rem; height: 4rem; }

/* #344 full-bleed projector background */
.bb-proj-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #0A0A0F;
    background-image:
        linear-gradient(
            color-mix(in srgb, black calc(var(--bb-proj-scrim, 0.55) * 100%), transparent),
            color-mix(in srgb, black calc(var(--bb-proj-scrim, 0.55) * 100%), transparent)
        ),
        var(--bb-proj-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bb-proj-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    z-index: 1000;
}

/* Projector-only: hide chrome and non-focal sections.
   body.bb-projector is the no-:has fallback for older venue browsers. */
body.bb-projector .bb-navbar,
body.bb-projector .bb-sidebar,
body:has(.bb-projector-flow) .bb-navbar,
body:has(.bb-projector-flow) .bb-sidebar { display: none !important; }
body.bb-projector,
body:has(.bb-projector-flow) { background: #0A0A0F !important; color: #E8DCC8; }
/* Content sits above the full-bleed #projectorBg (z-index:0). */
body.bb-projector main,
body:has(.bb-projector-flow) main { padding-top: 10px !important; position: relative; z-index: 1; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
/* FB#19 (#225) — projector shows only the one current item or "Stand by":
   suppress every list/bracket/results/schedule section. The focal cards
   (#liveBattlesWrap, #activeHeatsWrap, #winnerRevealWrap,
   #headlineTransitionWrap, #standbyWrap, #announcementWrap) stay. */
body.bb-projector #bracketWrap,
body.bb-projector #cypherLeaderboardWrap,
body.bb-projector #cypherPendingWrap,
body.bb-projector #pastHeatsWrap,
body.bb-projector #advancedParticipantsWrap,
body.bb-projector #scheduleWrap,
body.bb-projector #emptyCategoriesWrap,
body.bb-projector #nextHeatsWrap,
body.bb-projector #recentResultsCard,
body.bb-projector #pastResultsHeader,
body:has(.bb-projector-flow) #bracketWrap,
body:has(.bb-projector-flow) #cypherLeaderboardWrap,
body:has(.bb-projector-flow) #cypherPendingWrap,
body:has(.bb-projector-flow) #pastHeatsWrap,
body:has(.bb-projector-flow) #advancedParticipantsWrap,
body:has(.bb-projector-flow) #scheduleWrap,
body:has(.bb-projector-flow) #emptyCategoriesWrap,
body:has(.bb-projector-flow) #nextHeatsWrap,
body:has(.bb-projector-flow) #recentResultsCard,
body:has(.bb-projector-flow) #pastResultsHeader { display: none !important; }

/* #1085 (epic #1077 S8 AC1) — projector team draft board. A full-screen layer
   above the live content (z 1400) and below the admin scene overlay (1500) and
   the reconnection overlay (2000). Sized in vh for a 1920x1080 projector read
   from the back of a hall; projector-draft-board.js shrinks a section's
   --bb-pdb-scale only when its content would not fit, so nothing is clipped.
   Names wrap between words and never mid-word. Its own dark palette, so every
   site theme and projector theme (auto / light / dark background) reads the
   same. */
.bb-pdb { position: fixed; inset: 0; z-index: 1400; overflow: hidden; background: #07070c; color: #fff; font-family: inherit; line-height: 1.15; }
.bb-pdb[hidden] { display: none !important; }
.bb-pdb-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--bb-pdb-bg, none) center / cover no-repeat; opacity: .18; }
.bb-pdb-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; gap: 2.2vh; padding: 3vh 2.4vw; box-sizing: border-box; }
.bb-pdb-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 2vw; }
.bb-pdb-stage { font-size: 6.4vh; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #ffd23f; }
.bb-pdb-cat { font-size: 3.6vh; font-weight: 700; color: #e6e8ee; text-align: center; }
.bb-pdb-count { font-size: 6.4vh; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; color: #fff; }
.bb-pdb.is-stale .bb-pdb-count { opacity: .7; }
.bb-pdb-loading { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; font-size: 5vh; font-weight: 700; color: #c9ccd6; }
.bb-pdb-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: .85fr 1fr 1.25fr; gap: 1.6vw; }
.bb-pdb-main.is-pool-empty { grid-template-columns: .85fr 2.25fr; }
.bb-pdb-main > section { min-width: 0; min-height: 0; overflow: hidden; border-radius: 1.4vh; padding: 2.4vh 1.4vw; background: rgba(12, 12, 20, .88); border: 1px solid rgba(255, 255, 255, .18); font-size: calc(var(--bb-pdb-scale, 1) * 3.6vh); box-sizing: border-box; }
.bb-pdb-label { margin: 0 0 1.4vh; font-size: 2.9vh; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffd23f; line-height: 1.1; }
.bb-pdb-n { display: inline-block; min-width: 1.6em; padding: 0 .35em; border-radius: .4em; background: #ffd23f; color: #07070c; text-align: center; letter-spacing: 0; }
.bb-pdb-name, .bb-pdb-picker, .bb-pdb-picked, .bb-pdb-clock-name, .bb-pdb-member { overflow-wrap: break-word; word-break: normal; hyphens: none; min-width: 0; }
.bb-pdb-pts { font-variant-numeric: tabular-nums; color: #e6e8ee; white-space: nowrap; }
.bb-pdb-no { font-weight: 900; color: #c9ccd6; font-variant-numeric: tabular-nums; text-align: right; }
.bb-pdb-empty { font-size: 1em; font-weight: 700; color: #c9ccd6; }
.bb-pdb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4em; }
.bb-pdb-list.is-dense { grid-template-columns: 1fr 1fr; gap: .35em .6em; }

.bb-pdb-clock { border: .55vh solid #ffd23f !important; box-shadow: 0 0 4vh rgba(255, 210, 63, .28); display: flex; flex-direction: column; }
.bb-pdb-clock-name { font-size: 2.2em; font-weight: 900; line-height: 1.05; margin-bottom: .4em; }
.bb-pdb-clock-total { padding-top: .3em; font-size: 1.15em; font-weight: 800; color: #ffd23f; font-variant-numeric: tabular-nums; }
.bb-pdb-clock-done { margin: auto 0; font-size: 1.9em; font-weight: 900; text-align: center; color: #ffd23f; }
.bb-pdb-next { margin-top: auto; padding-top: 1.2em; }
.bb-pdb-next .bb-pdb-label { color: #c9ccd6; }
.bb-pdb-next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25em; font-size: .9em; }
.bb-pdb-next-list li { display: grid; grid-template-columns: 1.6em 1fr; gap: .45em; align-items: baseline; color: #e6e8ee; }
.bb-pdb-members { list-style: none; margin: 0; padding: 0; font-size: .82em; color: #e6e8ee; }
.bb-pdb-members li { display: flex; justify-content: space-between; gap: .6em; padding: .1em 0; }
.bb-pdb-members .bb-pdb-pts { color: #c9ccd6; }
.bb-pdb-members li.is-absent .bb-pdb-member { text-decoration: line-through; color: #9a9fae; }

.bb-pdb-team { padding: .3em .5em; border-radius: .35em; background: rgba(255, 255, 255, .09); }
.bb-pdb-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5em; }
.bb-pdb-row .bb-pdb-name { flex: 1 1 auto; font-weight: 800; }
.bb-pdb-pool-list.is-dense .bb-pdb-row { flex-direction: column; align-items: flex-start; gap: 0; }
.bb-pdb-pool-list.is-dense .bb-pdb-row .bb-pdb-pts { font-size: .8em; color: #c9ccd6; }
.bb-pdb-team .bb-pdb-members { font-size: .72em; margin-top: .1em; }
.bb-pdb-team.is-absent { background: transparent; border: 2px dashed rgba(255, 255, 255, .35); }
.bb-pdb-team.is-absent .bb-pdb-name { text-decoration: line-through; color: #9a9fae; }
.bb-pdb-badge { display: inline-block; margin-top: .15em; font-size: .62em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .1em .45em; border-radius: .3em; background: #ffb4a8; color: #2a0700; }

.bb-pdb-pick { display: grid; grid-template-columns: 1.4em minmax(0, 1fr) auto; align-items: baseline; gap: .45em; padding: .3em .5em; border-radius: .35em; background: rgba(255, 255, 255, .09); border-left: .28em solid transparent; }
.bb-pdb-formed { display: flex; flex-direction: column; min-width: 0; }
.bb-pdb-picker { font-weight: 800; }
.bb-pdb-picked { font-weight: 800; color: #ffe58a; }
.bb-pdb-plus { color: #ffd23f; font-weight: 900; }
.bb-pdb-picks-list.is-dense .bb-pdb-pick { grid-template-columns: 1.3em minmax(0, 1fr) auto; gap: .35em; padding: .28em .4em; }
.bb-pdb-picks-list.is-dense .bb-pdb-pick > .bb-pdb-pts { font-size: .8em; color: #c9ccd6; }
.bb-pdb-pick.is-latest { background: rgba(255, 210, 63, .22); border-left-color: #ffd23f; }
@keyframes bb-pdb-pick-in {
    from { opacity: 0; transform: translateY(-.6em) scale(.97); }
    to { opacity: 1; transform: none; }
}
@keyframes bb-pdb-pick-glow {
    0% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0); }
    25% { box-shadow: 0 0 0 .22em rgba(255, 210, 63, .9); }
    100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0); }
}
.bb-pdb-pick.is-new { animation: bb-pdb-pick-in .55s ease-out both, bb-pdb-pick-glow 2s ease-out .35s both; }
@media (prefers-reduced-motion: reduce) {
    .bb-pdb-pick.is-new { animation: none; }
}

/* #1085 PART 2 (AC3) — projector stage overview: the current team draft
   stage's pairings while nothing is on stage. Same layer, palette and fit
   rule as the draft board (.bb-pdb-*), shown only when the board is not. */
.bb-pso { position: fixed; inset: 0; z-index: 1400; overflow: hidden; background: #07070c; color: #fff; font-family: inherit; line-height: 1.15; }
.bb-pso[hidden] { display: none !important; }
.bb-pso .bb-pdb-head { align-items: center; }
.bb-pso .bb-pdb-stage { font-size: 4.6vh; }
.bb-pso .bb-pdb-cat { font-size: 2.8vh; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #c9ccd6; }
.bb-pso .bb-pdb-count { font-size: 2.8vh; font-weight: 600; color: #c9ccd6; }
.bb-pso-grid { flex: 1 1 auto; min-height: 0; overflow: hidden; display: grid; grid-auto-rows: 1fr; align-content: stretch; gap: 2.4vh 2vw; font-size: calc(var(--bb-pdb-scale, 1) * min(3.1vh, 1.6vw)); }
.bb-pso-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.bb-pso-grid.cols-1 { grid-template-columns: 1fr; font-size: calc(var(--bb-pdb-scale, 1) * min(3.4vh, 2.4vw)); }
.bb-pso-battle { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto 1fr; gap: 1.6vh; padding: 2.4vh 2vw; border-radius: 1.6vh; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .12); }
.bb-pso-vs { display: flex; align-items: center; gap: 1em; font-size: .8em; font-weight: 800; color: #ffd23f; letter-spacing: .08em; }
.bb-pso-vs::before, .bb-pso-vs::after { content: ""; flex: 1; height: 1px; background: rgba(255, 210, 63, .35); }
.bb-pso-side { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; padding: 1.6vh 1.4vw; border-radius: 1.2vh; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03); }
.bb-pso-side.is-winner { border-color: #ffd23f; background: rgba(255, 210, 63, .09); }
.bb-pso-side.is-loser { opacity: .6; }
.bb-pso-side.is-empty .bb-pso-team { color: #9a9fae; font-weight: 600; }
.bb-pso-names { align-self: stretch; list-style: none; margin: 0; padding: 0; font-weight: 500; line-height: 1.35; color: #f2f3f7; }
.bb-pso-names.is-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3em; }
.bb-pso-names li { white-space: nowrap; }
.bb-pso-names s { color: #9a9fae; }
.bb-pso-won { display: inline-block; margin-top: .7em; font-size: .6em; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: .1em .45em; border-radius: .3em; background: #ffd23f; color: #07070c; }
.bb-pso-note { color: #9a9fae; font-size: .85em; }
.bb-pso-short { display: inline-block; margin-top: .2em; font-size: .55em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .1em .45em; border-radius: .3em; background: #ffb4a8; color: #2a0700; }
/* #2194 (UAT-23) — every box of the overview is the same size (the grid's
   equal rows and columns, one font size for the grid): a team of more than
   four shows three names and "+N" (the rest in its title), so no box grows.
   A side lists its dancers one per line, each a .bb-name that fitNames()
   shrinks to the side's width (they ran out of the box in two columns).
   A battle on stage gets a strong red border and a LIVE tag in its corner. */
.bb-pso-battle { position: relative; }
.bb-pso-more { color: #c9ccd6; font-weight: 700; }
.bb-pso-battle.is-live { border: .4vh solid #e94560; box-shadow: 0 0 2.6vh rgba(233, 69, 96, .55); }
.bb-pso-live { position: absolute; z-index: 1; top: .3vh; right: 1vw; padding: .1em .6em; border-radius: .3em; background: #c8102e; color: #fff; font-size: .6em; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 700px), (max-aspect-ratio: 4/5) {
    .bb-pso .bb-pdb-head { grid-template-columns: 1fr auto; row-gap: .6vh; }
    .bb-pso .bb-pdb-stage { font-size: 7vw; }
    .bb-pso .bb-pdb-count { font-size: 3.6vw; }
    .bb-pso .bb-pdb-cat { grid-column: 1 / -1; grid-row: 2; text-align: left; font-size: 3.6vw; }
    .bb-pso-grid.cols-2, .bb-pso-grid.cols-1 { grid-template-columns: 1fr; font-size: calc(var(--bb-pdb-scale, 1) * 4.2vw); }
    .bb-pso-battle { grid-template-rows: none; padding: 1.4vh 3vw; gap: 1vh; }
    .bb-pso-side { padding: 1.2vh 3vw; }
}
@keyframes bb-pso-win { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0); } 30% { box-shadow: 0 0 0 .25em rgba(255, 210, 63, .9); } 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0); } }
.bb-pso-side.is-new-winner { animation: bb-pso-win 2s ease-out both; }
@media (prefers-reduced-motion: reduce) {
    .bb-pso-side.is-new-winner { animation: none; }
}

/* #1085 PART 2 (AC2) — a team battle's members on the live battle card
   (team-draft-live.js), on /live and the projector. Theme tokens, so the list
   reads on every theme's card (PR #1109 review, finding 4: fixed light greys
   vanished on the white standard / modern cards); the projector's own dark
   surface keeps the projector palette. */
/* #2194 (UAT-19/26, organizer decision D9) — the members ARE the team's
   name: one per line, bold, with no generated "A, B & C" above them. One list
   (TeamDraftLive.membersHtml()) and one size on /live and on the projector:
   is-big on a battle card alone, which follows the viewport (the smaller of
   its height and width, so a 5 v 4 fits a 1280x720 projector and a phone
   keeps both columns), the base size on two cards side by side. */
.td-live-members { list-style: none; margin: .35rem 0 0; padding: 0; color: var(--color-text); font-size: clamp(1rem, min(2.6vh, 2.4vw), 1.6rem); line-height: 1.25; }
.td-live-members .bb-name { font-weight: 700; }
.td-live-members.is-big { font-size: clamp(1.1rem, min(4.4vh, 4.6vw), 3rem); line-height: 1.2; }
.td-live-members .td-lineup-withdrawn, .td-live-note, .td-live-pts { color: var(--color-muted); }
.td-live-note, .td-live-pts { font-size: .85em; }
.td-live-short { display: inline-block; margin-top: .35rem; font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .1rem .5rem; border-radius: .3rem; background: #ffb4a8; color: #2a0700; }
.td-live-members.is-big + .td-live-short { font-size: 1.1rem; }

/* #2194 (UAT-27, D10) — a team draft battle's winner is an arrow pointing at
   the winning side (winArrowHtml() in live/event.php), in the text colour and
   labelled, so it reads without colour; it replaces the winner's name under
   a round's badge and in the recent results. The round result markers under
   each side (.bb-live-dots) stay on one line wherever that line fits, and
   wrap as before where it does not: a nowrap row ran past its column on a
   phone (5 rounds at 360 px, 6 at 390) and the card's overflow: hidden cut
   its last dots off. A recent team draft result is its two sides (their
   members) with the arrow and "vs" between them. */
.bb-win-arrow { display: inline-flex; align-items: center; justify-content: center; font-size: 1.5em; line-height: 1; color: var(--color-text); vertical-align: middle; }
.bb-win-arrow svg { display: block; }
.bb-win-arrow.is-left svg { transform: scaleX(-1); }
.bb-recent-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem; }
.bb-recent-side { min-width: 0; }
.bb-recent-side + .bb-recent-mid + .bb-recent-side { text-align: right; }
.bb-recent-mid { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.bb-recent-draft .td-live-members { margin: 0; font-size: 1rem; }

/* PR #1109 review, finding 2 — the organizer's message and the active
   announcement, mirrored into the board / overview (they sit under the
   full-screen layer otherwise). A gold strip at the foot of the layer; the
   sections above shrink to make room (fit()). */
.bb-pdb-notice { flex: 0 0 auto; border-radius: 1.2vh; padding: 1.2vh 1.6vw; background: #ffd23f; color: #07070c; line-height: 1.2; overflow-wrap: break-word; }
.bb-pdb-notice-msg { font-size: 3.6vh; font-weight: 900; }
.bb-pdb-notice-ann { font-size: 3vh; font-weight: 600; }
.bb-pdb-notice-msg + .bb-pdb-notice-ann { margin-top: .6vh; padding-top: .6vh; border-top: 2px solid rgba(7, 7, 12, .25); }
.bb-pdb-notice-ann strong { font-weight: 900; }

/* #1112 — the live battle card's dancer names. The card is a themed surface
   (.bb-card: var(--color-surface), white on standard / modern, on /live and on
   the projector alike), so the names take the theme's text colour; a fixed
   white (Bootstrap .text-white) vanished on the light themes. */
.bb-live-name { color: var(--color-text); }

/* #2200 — a dancer's name is one unbreakable unit on LIVE and the projector
   (nameHtml() in live/event.php, team-draft-live.js): a line wraps between
   names, never at a hyphen or inside a word. fitNames() shrinks a name wider
   than its box, and only one that still does not fit at half its size gets
   .bb-name-wrap: it then wraps between its words, and mid-word only as the
   last resort, its lines spaced for its own smaller size (inline-block).
   The battle card's two name columns share the card's width (min-width: 0),
   so a long name cannot push the other side off the card. Its rounds sit in
   a grid, badges on one row and each round's winner under its badge: a
   column is at least its badge wide, and a winner's name gets only the
   width the card has left (min-width: 0), so it neither pushes a badge off
   the card nor is cut. A team member's name that must wrap stays inline, so
   its points follow it on the same line. */
.bb-name { white-space: nowrap; }
.bb-name.bb-name-wrap { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.bb-live-card .row > .col { min-width: 0; }
.td-lineup-name .bb-name.bb-name-wrap { display: inline; }
.bb-live-rounds { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; justify-content: center; justify-items: center; align-items: center; width: 100%; }
.bb-live-round { display: contents; }
/* #2243 — two rounds' winners side by side touched on a phone ("Spin
   EchoFloor Pilot"): fitNames() fitted each name to its whole column. The
   winner takes a little side padding, inside its column (max-width: 100%,
   border-box), and the name is fitted to the width inside it, so two names
   keep a gap of about 4 px. A column's least width is still its badge, so a
   row that hardly fits is no wider than before; only one with room to spare
   grows. More padding put "Spin Echo" on two lines in an EN 390 row of five. */
.bb-live-round > small { min-width: 0; max-width: 100%; align-self: start; padding: 0 .16em; }
/* #2222 — the active (or confirming) round's badge, as the inline style it
   replaces: big, outlined and spaced from its neighbours. Below 576 px its
   20 px side margins and wide padding made a 3-round row wider than the card,
   so the first badge was cut at the card's left edge; there the badge keeps
   its outline and size of text but takes less room. */
.bb-live-rounds .bb-live-round-active { border: 2px solid #fff; font-size: 1.1em; padding: 1.5em 1.75em !important; box-shadow: 0 0 12px rgba(255,193,7,0.5); margin: 0 20px; }
/* #2232 — a fourth badge (a tiebreaker round, "TB") still did not fit a phone
   card: the row needs about 316 px where it has 270. From four rounds on,
   every badge's text is smaller there, the active one's too (it keeps its
   outline and glow), so five still fit; rows of one to three are as above. */
@media (max-width: 575.98px) {
    .bb-live-rounds .bb-live-round-active { padding: 1em .9em !important; margin: 0 6px; }
    .bb-live-rounds:has(> .bb-live-round:nth-child(4)) > .bb-live-round > .badge { font-size: .65em; }
/* #2188 — two TIE-BREAK rounds make a row of five too wide for a phone even at
   that size (LT 360: 347 px where it has 270), which cut both ends. From five
   badges on, a label may take two lines; rows of up to four keep one line. */
    .bb-live-rounds:has(> .bb-live-round:nth-child(5)) > .bb-live-round > .badge { white-space: normal; }
}
/* #2213 — LIVE Recent Results: a long one-word winner ran off the card on a
   phone. The row wraps, so the winner takes a line of its own (still on the
   right) when the battle and the winner do not fit side by side. The winner
   cell is a grid: the name in a box of its own that may shrink (min-width: 0),
   the trophy beside its last line, so fitNames() fits the name to the width
   left after the trophy instead of to the whole row. */
.bb-recent-row { flex-wrap: wrap; column-gap: .5rem; }
.bb-recent-winner { display: grid; grid-template-columns: minmax(0, auto) auto; column-gap: .3em; align-items: end; min-width: 0; margin-left: auto; text-align: end; }
.bb-recent-winner-name { min-width: 0; }

/* #1125 — the live battle card's border. A fixed white border vanished on
   the light themes' white card and pale page, so /live takes the theme's
   muted token there (3:1 or more against the page, WCAG 1.4.11). The dark
   themes keep the white border, and so does the projector, whose page is
   always near-black whatever the theme. #1193: the page as painted
   (data-scb-scheme), so a background override that flips it flips these. */
.bb-live-card { border-color: var(--color-muted) !important; }
html[data-scb-scheme="dark"] .bb-live-card,
body.bb-projector .bb-live-card,
body:has(.bb-projector-flow) .bb-live-card { border-color: #fff !important; }

/* #1112 — the winner reveal card, the same themed surface. Gold and grey read
   on the dark themes and keep their look there; the light themes switch to
   their own warn and muted tokens (gold on white is 1.4:1). */
.bb-reveal-sub { color: #aaa; }
.bb-reveal-gold { color: #ffd700; }
.bb-reveal-winner { text-shadow: 0 0 30px rgba(255, 215, 0, 0.7); }
html[data-scb-scheme="light"] .bb-reveal-sub { color: var(--color-muted); }
html[data-scb-scheme="light"] .bb-reveal-gold { color: var(--color-warn); }
html[data-scb-scheme="light"] .bb-reveal-winner { text-shadow: none; }
/* #1125 — the reveal card's gold border is 1.3:1 on the light themes' page;
   /live takes their warn token there. Dark themes and the projector keep gold. */
.bb-reveal-card { border-color: var(--color-warn) !important; }
html[data-scb-scheme="dark"] .bb-reveal-card,
body.bb-projector .bb-reveal-card,
body:has(.bb-projector-flow) .bb-reveal-card { border-color: #ffd700 !important; }