.tov-bracket-component .tov-bracket-group + .tov-bracket-group { margin-top: 52px; }
.tov-bracket-component .tov-bracket-group > h3 { margin: 0 0 18px; color: var(--tov-muted); font-family: "Chakra Petch", ui-sans-serif, sans-serif; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.tov-bracket-component .tov-bracket-scroll { width: 100%; overflow-x: auto; padding: 2px 2px 24px; scrollbar-color: var(--tov-accent) var(--tov-surface-2); scrollbar-width: thin; }
.tov-bracket-component .tov-bracket-scroll:focus-visible { outline: 2px solid var(--tov-accent-strong); outline-offset: 4px; }
.tov-bracket-component .tov-bracket-rounds { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 320px); gap: 28px; width: max-content; min-width: 100%; align-items: stretch; }
.tov-bracket-component .tov-bracket-round { display: flex; flex-direction: column; min-width: 0; }
.tov-bracket-component .tov-bracket-round h4 { margin: 0 0 14px; padding: 11px 14px; border: 1px solid var(--tov-line); border-radius: var(--tov-radius); color: var(--tov-muted); background: var(--tov-surface); font-family: "Chakra Petch", ui-sans-serif, sans-serif; font-size: 11px; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.tov-bracket-component .tov-bracket-round-matches { display: flex; flex: 1; flex-direction: column; justify-content: space-around; gap: 16px; }
.tov-bracket-component .tov-bracket-match { display: block; overflow: hidden; border: 1px solid var(--tov-line); border-radius: var(--tov-radius); background: var(--tov-surface); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.tov-bracket-component .tov-bracket-match:hover,
.tov-bracket-component .tov-bracket-match:focus-visible { transform: translateY(-2px); border-color: var(--tov-line-strong); }
.tov-bracket-component .tov-bracket-match.is-live { border-color: color-mix(in srgb, var(--tov-live) 48%, var(--tov-line)); }
.tov-bracket-component .tov-bracket-match > div { display: flex; justify-content: space-between; padding: 10px 13px; border-bottom: 1px solid var(--tov-line); color: var(--tov-dim); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tov-bracket-component .tov-bracket-match.is-live > div span { color: var(--tov-live); }
.tov-bracket-component .tov-bracket-match p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0; padding: 11px 13px; color: var(--tov-muted); font-family: "Chakra Petch", ui-sans-serif, sans-serif; font-size: 13px; }
.tov-bracket-component .tov-bracket-match p + p { border-top: 1px solid var(--tov-line); }
.tov-bracket-component .tov-bracket-match p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tov-bracket-component .tov-bracket-match p b { font-size: 17px; }
.tov-bracket-component .tov-bracket-match p.is-winner { color: var(--tov-text); background: var(--tov-accent-soft); }
.tov-bracket-component .tov-bracket-match p.is-winner b { color: var(--tov-accent-strong); }
.tov-bracket-component .tov-bracket-match footer { padding: 10px 13px; border-top: 1px solid var(--tov-line); color: var(--tov-dim); font-size: 9px; }
.tov-bracket-component .tov-empty { padding: 46px; border: 1px dashed var(--tov-line-strong); border-radius: var(--tov-radius); color: var(--tov-muted); background: var(--tov-surface); text-align: center; }
@media (max-width: 640px) {
    .tov-bracket-component .tov-bracket-rounds { grid-auto-columns: minmax(260px, calc(100vw - 52px)); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .tov-bracket-component .tov-bracket-match { transition: none; }
    .tov-bracket-component .tov-bracket-match:hover,
    .tov-bracket-component .tov-bracket-match:focus-visible { transform: none; }
}