/* Shared connected bracket for the admin reveal and public spectator board. */
.tldb-panel { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.tldb-toolbar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .78rem; color: #efd5bd; padding: 0 4px 8px; }
.tldb-toolbar label { display: flex; gap: 6px; align-items: center; cursor: pointer; margin: 0; }
.tldb-toolbar input { accent-color: #ff8c42; }
.tldb-viewport { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid #674125; border-radius: 10px; background: #21150e; padding: 12px; }
.tldb-viewport:focus-visible { outline: 2px solid #ffb366; outline-offset: 2px; }
.tldb-bracket { display: grid; grid-template-columns: repeat(var(--tldb-rounds), 224px); gap: 36px; width: max-content; padding-right: 2px; }
.tldb-round { min-width: 0; position: relative; }
.tldb-round .tldb-round-title { position: sticky; top: -12px; z-index: 2; margin: 0; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: #454545; color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; box-shadow: 0 3px 6px #0005; }
.tldb-matches { position: relative; height: var(--tldb-height); }
.tldb-match { position: absolute; width: 100%; height: 88px; border: 2px solid #ff8c42; background: #fff; color: #282828; box-sizing: border-box; }
.tldb-final { border-color: #e8bf20; box-shadow: 0 0 14px #e8bf201c; }
.tldb-match-label { box-sizing: border-box; height: 20px; padding: 2px 6px; background: #f3f0ed; color: #71655a; font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.tldb-row { display: flex; align-items: center; gap: 5px; box-sizing: border-box; height: 32px; padding: 2px 6px; border-top: 1px solid #ddd; font-size: 12px; line-height: 14px; }
.tldb-slot-number { font-size: 10px; color: #8f7e6f; flex: 0 0 18px; }
.tldb-row .tldb-name { color: #888; font-weight: 600; white-space: normal; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tldb-revealed .tldb-name { color: #bb4900; }
.tldb-bye .tldb-name { color: #666; font-weight: 400; }
.tldb-advanced { background: linear-gradient(100deg, #257b3c, #b95717); }
.tldb-advanced .tldb-name, .tldb-advanced .tldb-slot-number { color: #fff; }
.tldb-seed { flex: 0 0 auto; font-size: 9px; line-height: 12px; min-width: 12px; text-align: center; border: 1px solid #aaa7; border-radius: 3px; color: #777; background: #f8f8f8; }
.tldb-active { box-shadow: 0 0 0 3px #ffb366, 0 0 18px #ff8c4260; z-index: 1; }
.tldb-connectors { position: absolute; top: 0; left: 100%; overflow: visible; pointer-events: none; fill: none; stroke: #ff8c42; stroke-width: 2px; }
.tldv-knockout .tldb-panel { height: 65vh; }
@media (max-width: 900px) {
    .tld-knockout .tldb-panel { flex: 0 0 auto; height: 58vh; min-height: 320px; }
}
@media (max-width: 720px) {
    .tldv-knockout .tldb-panel { flex: 0 0 auto; height: 58vh; min-height: 320px; }
}