.bk { position: relative; display: grid; gap: 10px; min-width: 0; }
.bk-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bk-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-family: var(--font-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; color: var(--dim); }
.bk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bk-legend i { width: 18px; height: 2px; border-radius: 2px; background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
.bk-legend i.lg-live { background: repeating-linear-gradient(90deg, var(--live) 0 4px, transparent 4px 7px); box-shadow: none; }
.bk-hint { color: var(--dim); text-transform: none; letter-spacing: 0.02em; font-family: var(--font-body); font-weight: 500; font-size: 12px; }
@media (hover: none) { .bk-hint { display: none; } }
.bk-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 11px; border: 1px solid var(--line); background: rgba(6, 7, 11, 0.6); }
.bk-zoom .btn { width: 34px; min-height: 34px; border: 0; }
.bk-zoom .btn svg { width: 16px; height: 16px; }
.bk-zoom-v { min-width: 50px; text-align: center; font-size: 12px; color: var(--muted); }

.bk-scroll { position: relative; overflow: auto; overscroll-behavior-x: contain; border-radius: 16px; border: 1px solid var(--line); cursor: grab; scrollbar-width: thin; scrollbar-color: rgba(255, 31, 48, 0.4) transparent;
  background: radial-gradient(900px 400px at 85% 50%, rgba(255, 207, 77, 0.05), transparent 60%), radial-gradient(700px 400px at 0% 0%, rgba(255, 31, 48, 0.07), transparent 60%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(0deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 40px 40px, rgba(5, 6, 10, 0.72); }
.bk-scroll:focus-visible { outline-offset: -2px; }
.bk.dragging .bk-scroll { cursor: grabbing; user-select: none; }
.bk-stage { position: relative; }
.bk-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.bk-lines { position: absolute; inset: 0; overflow: visible; pointer-events: none; }

.bk-path { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 1.5; stroke-linecap: round; transition: stroke 0.2s, opacity 0.2s; }
.bk-path.live { stroke: rgba(255, 45, 63, 0.75); stroke-dasharray: 0.02 0.015; animation: bk-flow 1.2s linear infinite; }
.bk-path.win { stroke: var(--red); stroke-width: 2.25; filter: drop-shadow(0 0 4px rgba(255, 31, 48, 0.8)); }
.bk-path.win.final { stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(255, 207, 77, 0.8)); }
@keyframes bk-flow { to { stroke-dashoffset: -0.07; } }

.bk-head { position: absolute; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 2px 10px; border-bottom: 1px solid var(--line-hi); }
.bk-head strong { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 19px; letter-spacing: 0.02em; transform: skewX(-8deg); white-space: nowrap; }
.bk-head-l { position: absolute; left: 2px; top: 0; font-family: var(--font-label); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; font-size: 10px; color: var(--dim); }
.bk-head strong { margin-top: 14px; }
.bk-head .dot, .bk-head .ic, .bk-head-n { margin: 14px 0 0 auto; }
.bk-head .ic { width: 16px; height: 16px; }
.bk-head-n { font-size: 11px; color: var(--dim); }
.bk-head.live { border-bottom-color: rgba(255, 45, 63, 0.6); }
.bk-head.live strong { color: #fff; text-shadow: 0 0 18px var(--red-glow); }
.bk-head.done { border-bottom-color: rgba(37, 226, 140, 0.25); }
.bk-head.champ strong { color: var(--gold); text-shadow: 0 0 24px rgba(255, 207, 77, 0.45); }
.bk-head.champ { border-bottom-color: rgba(255, 207, 77, 0.35); }

.bk-series { position: absolute; width: var(--cw); transition: opacity 0.2s, transform 0.2s var(--ease); }
.bk-meta { position: absolute; left: 2px; right: 2px; bottom: calc(100% + 4px); display: flex; align-items: center; gap: 7px; height: 16px; font-family: var(--font-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; }
.bk-meta .live-tag { height: 16px; font-size: 10px; padding: 0 6px 0 5px; border-radius: 4px; }
.bk-meta .live-tag::before { width: 5px; height: 5px; }
.bk-what { color: #ff9aa2; overflow: hidden; text-overflow: ellipsis; }
.bk-ready { color: var(--amber); }
.bk-bo { margin-left: auto; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.bk-box { position: relative; overflow: hidden; border-radius: 11px; border: 1px solid var(--line-hi); background: linear-gradient(180deg, rgba(28, 31, 46, 0.95), rgba(14, 16, 24, 0.96)); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.9); transition: border-color 0.2s, box-shadow 0.2s; }
.bk-series.click { cursor: pointer; }
.bk-series.click:hover .bk-box { border-color: rgba(255, 255, 255, 0.3); }
.bk-series.click:focus-visible { outline: none; }
.bk-series.click:focus-visible .bk-box { outline: 2px solid var(--red-2); outline-offset: 2px; }
.bk-series.ghost .bk-box { background: rgba(255, 255, 255, 0.02); border-style: dashed; box-shadow: none; }
.bk-series.live .bk-box { border-color: rgba(255, 45, 63, 0.75); animation: bk-live 2s var(--ease) infinite; }
.bk-series.ready .bk-box { border-color: rgba(255, 178, 46, 0.55); }
.bk-series.third .bk-box { border-color: rgba(228, 146, 90, 0.45); }
@keyframes bk-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 63, 0.5), 0 12px 30px -16px rgba(0, 0, 0, 0.9); } 60% { box-shadow: 0 0 0 7px rgba(255, 45, 63, 0), 0 0 30px -4px rgba(255, 45, 63, 0.45); } }
.bk-series.live .bk-box::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 60, 75, 0.12) 50%, transparent 70%); background-size: 250% 100%; animation: bk-scan 2.4s linear infinite; pointer-events: none; }
@keyframes bk-scan { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.bk-meta, .bk-box { transition: opacity 0.2s; }
.bk-row { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 34px; align-items: center; height: var(--row); padding-left: 4px; font-size: 14px; transition: background 0.15s, opacity 0.2s; }
.bk-row + .bk-row { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.bk-row::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c, rgba(255, 255, 255, 0.12)); }
.bk-seed { font-family: var(--font-mono); font-size: 11px; color: var(--dim); text-align: center; }
.bk-team { display: flex; align-items: center; gap: 6px; min-width: 0; padding-right: 6px; }
.bk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bk-tag { flex: none; padding: 0 5px; border-radius: 5px; font-family: var(--font-label); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; background: rgba(255, 255, 255, 0.07); color: var(--muted); }
.bk-score { height: 100%; display: grid; place-items: center; font-family: var(--font-display); font-size: 18px; color: var(--muted); background: rgba(255, 255, 255, 0.03); border-left: 1px solid rgba(255, 255, 255, 0.05); }
.bk-row.win .bk-name { color: #fff; }
.bk-row.win .bk-score { color: #fff; background: linear-gradient(135deg, var(--red), var(--red-deep)); text-shadow: 0 0 12px rgba(255, 255, 255, 0.4); }
.bk-row.win .bk-tag { background: var(--red-soft); color: #ff8c95; }
.bk-row.lose { opacity: 0.5; }
.bk-row.tbd .bk-name { color: var(--dim); font-weight: 500; font-style: italic; }
.bk-row.bye .bk-name { color: var(--dim); letter-spacing: 0.04em; }
.bk-series.live .bk-score { color: #fff; }
.bk-canvas.compact .bk-row { font-size: 13px; grid-template-columns: 18px minmax(0, 1fr) 30px; }
.bk-canvas.compact .bk-score { font-size: 16px; }
.bk-canvas.compact .bk-head strong { font-size: 16px; }

.bk-hl .bk-series:not(.hl) > * { opacity: 0.32; }
.bk-hl .bk-row.hl { background: rgba(255, 31, 48, 0.14); opacity: 1; }
.bk-hl .bk-row.hl .bk-name { color: #fff; }
.bk-hl .bk-path { opacity: 0.35; }
.bk-hl .bk-path.win.hl { opacity: 1; stroke: #fff; stroke-width: 2.75; filter: drop-shadow(0 0 6px rgba(255, 31, 48, 1)); }
.bk-hl .bk-champ:not(.hl) > * { opacity: 0.4; }

.bk-champ { position: absolute; display: grid; place-items: center; align-content: center; gap: 4px; padding: 14px 12px; text-align: center; border-radius: 16px; border: 1px dashed rgba(255, 207, 77, 0.35); background: radial-gradient(circle at 50% 0%, rgba(255, 207, 77, 0.12), transparent 70%), rgba(14, 15, 22, 0.9); transition: opacity 0.2s; }
.bk-champ .bk-cup { width: 38px; height: 38px; color: rgba(255, 207, 77, 0.45); }
.bk-champ.set { border: 1px solid rgba(255, 207, 77, 0.7); background: radial-gradient(circle at 50% 0%, rgba(255, 207, 77, 0.28), transparent 70%), linear-gradient(180deg, rgba(40, 34, 18, 0.95), rgba(16, 14, 10, 0.96)); box-shadow: 0 0 0 1px rgba(255, 207, 77, 0.15), 0 20px 60px -20px rgba(255, 207, 77, 0.55); overflow: hidden; }
.bk-champ.set::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 200, 0.22) 50%, transparent 65%); background-size: 300% 100%; animation: bk-gold 4.5s var(--ease) infinite; pointer-events: none; }
@keyframes bk-gold { 0%, 50% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.bk-champ.set .bk-cup { color: var(--gold); filter: drop-shadow(0 0 14px rgba(255, 207, 77, 0.8)); }
.bk-champ-tag { font-family: var(--font-label); font-weight: 800; font-size: 12px; letter-spacing: 0.12em; color: var(--gold); }
.bk-champ-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 22px; line-height: 1.05; transform: skewX(-8deg); }
.bk-champ-open { font-family: var(--font-display); text-transform: uppercase; font-size: 20px; color: var(--muted); transform: skewX(-8deg); }
.bk-champ-roster { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.bk-third-l { position: absolute; display: flex; align-items: center; gap: 7px; height: 18px; font-family: var(--font-label); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; color: var(--bronze); }
.bk-third-l .ic { width: 15px; height: 15px; }

.bk-wait .bk-series, .bk-wait .bk-champ, .bk-wait .bk-head, .bk-wait .bk-third-l { opacity: 0; }
.bk-wait .bk-path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.bk-anim .bk-series, .bk-anim .bk-champ, .bk-anim .bk-head, .bk-anim .bk-third-l { animation: bk-in 0.55s var(--ease-out) both; animation-delay: calc(var(--r, 1) * 110ms); }
.bk-anim .bk-path:not(.live) { stroke-dasharray: 1; animation: bk-draw 0.7s var(--ease-out) both; animation-delay: calc(var(--r, 1) * 110ms + 160ms); }
@keyframes bk-in { from { opacity: 0; translate: -12px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes bk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.bk-section { display: grid; gap: 12px; min-width: 0; }
.bk-section-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bk-section-h h4 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 24px; transform: skewX(-8deg); }
.bk-note { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.bk-note .ic { color: var(--dim); }
.bk-table tbody tr { transition: background 0.15s; }
.bk-table tr.st-in td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.bk-table tr.st-out td, .bk-table tr.st-dq td { opacity: 0.55; }
.bk-table tr.bk-cut td { border-top: 1px dashed rgba(255, 31, 48, 0.55); }
.bk-tcell { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 260px; font-weight: 600; }
.bk-swatch { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--dim)); box-shadow: 0 0 10px var(--c, transparent); }
.bk-rec { font-size: 15px; }
.bk-hist { display: flex; gap: 4px; }
.bk-hist i { width: 14px; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }
.bk-hist i.w { background: var(--green); box-shadow: 0 0 8px rgba(37, 226, 140, 0.5); }
.bk-hist i.l { background: var(--red); }
.bk-hist i.bye { background: var(--blue); }
.bk-hist i.live { background: var(--amber); animation: blink 1.2s infinite; }
.bk-pos { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-family: var(--font-display); font-size: 15px; background: rgba(255, 255, 255, 0.05); }
.bk-pos.in { background: var(--green-soft); color: var(--green); }
.bk-pts { font-family: var(--font-display); font-size: 18px; color: #fff; }
.bk-form { display: flex; gap: 4px; }
.bk-form i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; font-style: normal; font-family: var(--font-label); font-weight: 800; font-size: 11px; background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.bk-form i.w { background: var(--green-soft); color: var(--green); }
.bk-form i.l { background: var(--red-soft); color: #ff8c95; }
.bk-form i.d { background: var(--amber-soft); color: var(--amber); }
@media (max-width: 640px) { .bk-table .hide-sm { display: none; } .bk-tcell { max-width: 160px; } }

.bk-rounds { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.bk-round { display: grid; align-content: start; gap: 6px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.bk-round.live { border-color: rgba(255, 45, 63, 0.45); }
.bk-round-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; }
.bk-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border-radius: 9px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.035); color: inherit; font: inherit; font-size: 13px; cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s; }
.bk-mini:hover { border-color: var(--line-hi); background: rgba(255, 255, 255, 0.06); }
.bk-mini.live { border-color: rgba(255, 45, 63, 0.5); }
.bk-mside { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.bk-mside:last-child { flex-direction: row-reverse; }
.bk-mside.win { color: #fff; font-weight: 700; }
.bk-mside.win b { color: var(--red-2); }
.bk-mside.lose { opacity: 0.5; }
.bk-vs { color: var(--dim); }

.bk-dvs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: start; }
.bk-dside { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 16px 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); border-top: 3px solid var(--c, var(--line-hi)); }
.bk-dside.win { border-color: rgba(255, 31, 48, 0.5); box-shadow: 0 16px 40px -20px var(--red-glow); }
.bk-dname { display: flex; align-items: center; gap: 6px; font-family: var(--font-label); font-weight: 800; font-size: 18px; letter-spacing: 0.03em; max-width: 100%; }
.bk-dname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-dscore { font-family: var(--font-display); font-size: 54px; line-height: 1; transform: skewX(-8deg); }
.bk-dside.win .bk-dscore { color: var(--red-2); text-shadow: 0 0 24px var(--red-glow); }
.bk-dx { align-self: center; font-family: var(--font-label); font-weight: 800; letter-spacing: 0.2em; color: var(--dim); }
.bk-droster { display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.bk-droster a:hover { color: var(--red-2); }

@media (prefers-reduced-motion: reduce) {
  .bk-wait .bk-series, .bk-wait .bk-champ, .bk-wait .bk-head, .bk-wait .bk-third-l { opacity: 1; }
  .bk-wait .bk-path { stroke-dashoffset: 0; }
}