/* Swiss round board (T-237, t/flow.mjs): shared by /t/<ID> (dashboard tokens, light/dark) and the landing demo (public tokens);
   every color falls back to the dark observatory values. Columns = rounds, cards = record groups with their pairings. */
.flow-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
/* T-286: on /t/<ID> the board breaks out of the 960px column to use the browser width (centered, 16px gutters). */
main > .flow-wrap { margin-inline: min(0px, (100% - min(100vw - 32px, 1440px)) / 2); }
.sboard { --b-panel: var(--panel, #171a1b); --b-line: var(--line, #2e3231); --b-fg: var(--fg, #eeece3); --b-muted: var(--muted, #8f8d84);
  --b-gold: var(--accent, #d99b26); --b-gold-hi: var(--accent-bright, #eeb64c); --b-live: var(--bad, #e2725f);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(176px, 1fr); gap: 0 48px; align-items: center; overflow: auto hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding: 4px 4px 12px; scrollbar-width: none; min-width: 0; color: var(--b-fg); position: relative; }
/* Columns stretch to fill the width; only when they cannot fit (phones, long events) the board swipes sideways, without a visible bar. */
.sboard::-webkit-scrollbar { display: none; }
.sboard:focus-visible { outline: 2px solid var(--b-gold); outline-offset: 2px; border-radius: 12px; }
.sb-col { display: grid; gap: 14px; align-content: center; scroll-snap-align: start; position: relative; z-index: 1; }
.sb-col h3 { margin: 0; font: 500 11px var(--font-data, ui-monospace, Menlo, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--b-muted); display: flex; align-items: center; gap: 6px; }
.sb-col.now h3 { color: var(--b-fg); }
.sb-col .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--b-live); animation: sb-pulse 1.6s ease-in-out infinite; }
.sb-bucket { background: var(--b-panel); border: 1px solid var(--b-line); border-radius: 12px; padding: 8px; display: grid; gap: 6px; }
.sb-bucket.cut { border-color: var(--b-gold); background: color-mix(in oklab, var(--b-gold) 10%, var(--b-panel)); }
.sb-bucket.mine { box-shadow: 0 0 0 1px var(--b-gold), 0 0 18px -6px var(--b-gold-hi); }
.sb-bucket .rec { margin: 0; display: flex; justify-content: space-between; align-items: center; font: 600 15px var(--font-data, ui-monospace, Menlo, monospace); font-variant-numeric: tabular-nums; }
.sb-bucket.cut .rec { color: var(--b-gold); }
.sb-bucket .you { font: 600 10px var(--font-data, ui-monospace, Menlo, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--bg, #101213); background: var(--b-gold); border-radius: 999px; padding: 1px 7px; }
.sb-list, .sb-players { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sb-players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm { position: relative; display: grid; gap: 4px; padding: 6px 8px; border-radius: 8px; background: color-mix(in oklab, var(--b-fg) 4%, transparent); }
.sm .vs { font-size: 11px; color: var(--b-muted); padding-left: 32px; }
.sm.mine { background: color-mix(in oklab, var(--b-gold) 14%, transparent); }
.sm.live { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--b-live) 70%, transparent); }
.sm .tag { position: absolute; top: -7px; right: 6px; font: 600 9px var(--font-data, ui-monospace, Menlo, monospace); letter-spacing: .1em; text-transform: uppercase; font-style: normal; background: var(--b-live); color: #fff; border-radius: 4px; padding: 0 4px; animation: sb-pulse 1.6s ease-in-out infinite; }
.sp { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; transition: opacity .25s, color .25s; cursor: pointer; }
.sp .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp .sc { font: 600 12px var(--font-data, ui-monospace, Menlo, monospace); color: var(--b-muted); margin-left: auto; padding-left: 6px; }
.sp.w { color: var(--b-gold); font-weight: 600; } .sp.w .sc { color: var(--b-gold); }
.sp.l { color: var(--b-muted); } .sp.l .av { filter: grayscale(.7) brightness(.8); }
.sp.tbd { color: var(--b-muted); cursor: default; }
.av { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 10px var(--font-body, system-ui, sans-serif); letter-spacing: .02em; color: #101213; background: #8f8d84; box-shadow: 0 0 0 2px var(--b-panel); }
.av.c0 { background: #d99b26; } .av.c1 { background: #6f98b3; } .av.c2 { background: #8db36e; } .av.c3 { background: #c98a6b; } .av.c4 { background: #a99bd6; } .av.c5 { background: #d8c690; }
.sp.tbd .av { background: transparent; color: var(--b-muted); box-shadow: inset 0 0 0 1px var(--b-line); }
.sp.me .av { box-shadow: 0 0 0 2px var(--b-panel), 0 0 0 4px var(--b-gold); }
.sboard.tracing .sp:not(.on) { opacity: .28; }
.sp.on .av { box-shadow: 0 0 0 2px var(--b-panel), 0 0 0 4px var(--b-gold-hi), 0 0 14px var(--b-gold-hi); }
.sp.on { color: var(--b-gold-hi); opacity: 1; }
.champ { margin: 8px 0 0; text-align: center; font: italic 400 22px var(--font-display, Georgia, serif); color: var(--b-gold); }
.champ-name { margin: 0; display: flex; justify-content: center; }
.champ-name .sp { font-size: 14px; }
.sb-note { margin: 0; font-size: 12px; color: var(--b-muted, #8f8d84); }
/* Glowing lines (flowLinks/dots in t/flow.mjs): behind the cards, visible in the gaps between columns. */
/* Sized to the box, not the attributes: a line layer as big as scrollWidth fed back into it and caused both scrollbars (T-286). */
.sboard svg.links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; grid-area: 1 / 1; }
.sboard .fe { fill: none; stroke-width: 1.75; stroke-linecap: round; transition: opacity .25s; }
.sboard .fe.win { stroke: color-mix(in oklab, var(--b-gold) 75%, transparent); filter: drop-shadow(0 0 3px color-mix(in oklab, var(--b-gold-hi) 70%, transparent)); }
.sboard .fe.loss { stroke: color-mix(in oklab, var(--b-muted) 40%, transparent); }
.sboard .fdot { fill: var(--b-gold-hi); filter: drop-shadow(0 0 4px var(--b-gold-hi)); }
.sboard .fdot.l { fill: var(--b-muted); filter: none; }
.sboard.tracing .fe:not(.on), .sboard.tracing .fdot:not(.on) { opacity: .08; }
.sboard .fe.on { stroke: var(--b-gold-hi); stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--b-gold-hi)); }
@keyframes sb-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .sb-col .dot, .sm .tag { animation: none; } .sp, .sboard .fe { transition: none; } .sboard .fdot { display: none; } }