/* Drabinka – kolumny rund połączone liniami; na wąskim ekranie przewijana w bok */
.bk-scroll { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.bk { display: flex; width: max-content; min-width: 100%; }
.bk-col { display: flex; flex-direction: column; width: 156px; flex: none; }
.bk-col.in { margin-left: 26px; }
.bk-col.champ { width: 140px; }
.bk-head { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 10px; white-space: nowrap; }
.bk-body { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.bk-pair { flex: 1; display: flex; flex-direction: column; justify-content: space-around; position: relative; }
/* klamra łącząca dwa pojedynki z pojedynkiem w kolejnej rundzie */
.bk-pair::after { content: ""; position: absolute; right: -14px; top: 25%; bottom: 25%; width: 14px; border: 2px solid var(--line); border-left: 0; border-radius: 0 6px 6px 0; }
.bk-cell { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 5px 0; position: relative; }
.bk-col.in .bk-cell::before { content: ""; position: absolute; left: -12px; top: 50%; width: 12px; border-top: 2px solid var(--line); }
.bk-cell.straight::after { content: ""; position: absolute; right: -14px; top: 50%; width: 14px; border-top: 2px solid var(--line); }
.bk-match { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bk-match.bye { opacity: .7; }
.bk-p { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font: 600 13px Inter, system-ui, sans-serif; padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-p + .bk-p { border-top: 1px solid var(--line); }
button.bk-p { cursor: pointer; }
button.bk-p:hover { background: var(--panel2); }
.bk-p.won { background: var(--accent); color: var(--accent-ink); }
button.bk-p.won:hover { background: var(--accent); }
.bk-p.lost { color: var(--muted); text-decoration: line-through; }
.bk-p.tbd { color: var(--muted); font-weight: 500; font-style: italic; }
.bk-champ { width: 100%; text-align: center; border: 2px dashed var(--line); border-radius: 12px; padding: 12px 8px; font: 400 18px Anton, Impact, sans-serif; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
.bk-champ span { display: block; font-size: 22px; margin-bottom: 2px; }
.bk-champ.set { border: 2px solid var(--accent); color: var(--accent); }

/* system brazylijski: zwycięzcy | finały | przegrani (lustrzanie, w stronę środka) */
.bk.double { gap: 22px; align-items: stretch; }
.bk-side { display: flex; flex-direction: column; flex: none; }
.bk-side > .bk { flex: 1; min-width: 0; }
.bk-title { font: 400 15px Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); text-align: center; padding: 6px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; white-space: nowrap; }
.bk-side.mid { width: 210px; padding: 0 18px; border-left: 1px dashed var(--line); border-right: 1px dashed var(--line); }
.bk-center { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.bk-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.bk-label.final { color: var(--accent); }
.bk-center .bk-champ { margin: 6px 0 4px; }
.mirror > .bk { flex-direction: row-reverse; }
.mirror .bk-col.in { margin-left: 0; margin-right: 26px; }
.mirror .bk-col.in .bk-cell::before { left: auto; right: -12px; }
.mirror .bk-pair::after { right: auto; left: -14px; border: 2px solid var(--line); border-right: 0; border-radius: 6px 0 0 6px; }
.mirror .bk-cell.straight::after { right: auto; left: -14px; }
.mirror .bk-p { text-align: right; }

/* karta z drabinką może być szersza niż kolumna strony (na dużych ekranach widać całość naraz) */
.bk-wide { width: min(calc(100vw - 32px), 1600px); position: relative; left: 50%; transform: translateX(-50%); }
.bk-side:first-child .bk-title { text-align: left; padding-left: 4px; }
.bk-side.mirror .bk-title { text-align: right; padding-right: 4px; }

/* system grupowy: etapy jeden pod drugim, grupy A i B obok siebie (na telefonie jedna pod drugą) */
.gs-stage { margin-bottom: 22px; }
.gs-title { text-align: left; padding-left: 4px; }
.gs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.gs-card { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; }
.gs-name { font: 400 18px Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; }
.gs-name small { font: 600 11px Inter, system-ui, sans-serif; color: var(--muted); text-transform: none; letter-spacing: 0; }
.gs-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; background: none; border: 0; border-radius: 0; }
.gs-table th { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--line); }
.gs-table td { padding: 6px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.gs-table .r { text-align: right; width: 30px; font-variant-numeric: tabular-nums; }
.gs-table .n { width: 24px; color: var(--muted); font-weight: 700; }
.gs-table .nm { font-weight: 600; overflow-wrap: anywhere; }
.gs-table .ord { width: 1%; white-space: nowrap; text-align: right; }
.gs-table .ord .mini { padding: 3px 6px; font-size: 12px; }
.gs-table tr.adv td { background: rgba(215,255,58,.08); }
.gs-table tr.feed td { color: var(--muted); font-style: italic; font-weight: 500; }
.gs-adv { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: var(--accent); color: var(--accent-ink); border-radius: 99px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.gs-round { margin-top: 8px; }
.gs-rname { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.gs-matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.gs-finals { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end; }
.gs-finals .bk-label { margin: 0 0 5px; }