/* Bracket tree, shared by admin and kiosk. Colors come from variables set by app.css / kiosk.css. */
.bracket {
    --b-card: #fff;
    --b-border: #d5dae1;
    --b-line: #b5bdc8;
    --b-text: #1d2430;
    --b-muted: #7a8494;
    --b-win: #0f7b3e;
    --b-win-bg: #e9f7ef;
    --b-live: #d92d20;
    --b-ready: #2563eb;
    --b-gap: 34px;
    --b-width: 210px;
    display: inline-flex;
    flex-direction: column;
    gap: 28px;
    color: var(--b-text);
    font-size: 13px;
}
/* Double elimination: grand final sits to the right of both brackets, using wide screens better. */
.bracket.is-double { display: inline-grid; grid-template-columns: auto auto; column-gap: 40px; }
.bracket.is-double .b-W { grid-column: 1; grid-row: 1; }
.bracket.is-double .b-L { grid-column: 1; grid-row: 2; }
.bracket.is-double .b-GF { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.bracket-section .section-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--b-muted);
    margin: 0 0 8px;
}
.rounds { display: flex; gap: var(--b-gap); align-items: stretch; }
.round { display: flex; flex-direction: column; width: var(--b-width); flex: none; }
.round-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--b-muted);
    text-align: center;
    padding-bottom: 6px;
}
.round-body { flex: 1; display: flex; flex-direction: column; }
.grp { flex: 1; display: flex; flex-direction: column; justify-content: space-around; position: relative; }
.mw { position: relative; padding: 5px 0; }

/* Connector lines */
.grp-pair::after {
    content: '';
    position: absolute;
    right: calc(var(--b-gap) / -2);
    width: calc(var(--b-gap) / 2);
    top: 25%;
    bottom: 25%;
    border: 2px solid var(--b-line);
    border-left: none;
    border-radius: 0 4px 4px 0;
}
.grp-single::after {
    content: '';
    position: absolute;
    right: calc(var(--b-gap) / -2);
    width: calc(var(--b-gap) / 2);
    top: 50%;
    border-top: 2px solid var(--b-line);
}
.round.has-in .mw::before {
    content: '';
    position: absolute;
    left: calc(var(--b-gap) / -2);
    width: calc(var(--b-gap) / 2);
    top: 50%;
    border-top: 2px solid var(--b-line);
}

/* Match card */
.match {
    display: block;
    background: var(--b-card);
    border: 1px solid var(--b-border);
    border-radius: 6px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    height: 72px;
    box-sizing: border-box;
}
a.match:hover { border-color: var(--b-ready); box-shadow: 0 0 0 2px color-mix(in srgb, var(--b-ready) 25%, transparent); }
.m-head {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 10.5px;
    color: var(--b-muted);
    padding: 3px 8px 1px;
    height: 18px;
    box-sizing: border-box;
    white-space: nowrap;
}
.m-num { font-weight: 700; }
.m-where { overflow: hidden; text-overflow: ellipsis; }
.m-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    height: 26px;
    border-top: 1px solid var(--b-border);
}
.m-slot .seed { font-size: 10px; color: var(--b-muted); min-width: 12px; text-align: right; }
.m-slot .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-slot .score { font-weight: 700; min-width: 18px; text-align: right; }
.m-slot.win { background: var(--b-win-bg); }
.m-slot.win .name { font-weight: 700; color: var(--b-win); }
.m-slot.lose .name { color: var(--b-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--b-muted) 50%, transparent); }
.placeholder { color: var(--b-muted); font-style: italic; }
.match .muted { color: var(--b-muted); }

.match.bye { opacity: .45; border-style: dashed; }
.match.bye .m-head { display: none; }
.match.bye .m-slot { height: 35px; }
.match.bye .m-slot:first-of-type { border-top: none; }
.match.empty-bye { visibility: hidden; }
.match.st-ready { border-color: var(--b-ready); }
.match.st-in_progress { border-color: var(--b-live); box-shadow: 0 0 0 2px color-mix(in srgb, var(--b-live) 30%, transparent); }

.live-dot { color: var(--b-live); font-weight: 800; letter-spacing: .04em; }
.live-dot::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--b-live);
    margin-right: 4px;
    vertical-align: 1px;
    animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; } }

.tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
}
.tag.unpaid { background: #fdecea; color: #b42318; }
.tag.paid { background: #e9f7ef; color: #0f7b3e; }