#bracket-content {
    width: 96vw;
    max-width: 1700px;
    padding: 32px 0 80px;
    overflow-x: auto;
}

#bracket-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    gap: 16px;
    flex-wrap: wrap;
}

.header-text {
    margin: 0;
    color: #fff;
    font-family: "Abolition", sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.header-text.title { font-size: 36px; line-height: 1; }

.header-text.subtitle {
    font-size: 16px;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.45);
    margin-top: 6px;
    font-family: "Archimoto V01", sans-serif;
    font-weight: normal;
}

.nav-to-standings {
    font-family: "Archimoto V01", sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 8px 16px;
    border-radius: 2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.nav-to-standings:hover { color: #fff; border-color: rgba(255,255,255,0.4); }

/* ── Bracket layout ── */
#bracket-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "wr1 wf gf"
        "lr1 lf gf";
    column-gap: 24px;
    row-gap: 20px;
    align-items: center;
    position: relative;
    min-height: 70vh;
}

#col-wr1 { grid-area: wr1; }
#col-wf  { grid-area: wf;  }
#col-lr1 { grid-area: lr1; }
#col-lf  { grid-area: lf;  }
#col-gf  { grid-area: gf;  }

.bracket-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: center;
}

.round-label {
    font-family: "Brachial", sans-serif;
    font-weight: 800;
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.grand-finals-label {
    color: rgba(255,200,50,0.95);
    font-size: 16px;
    letter-spacing: 2px;
}

.winners-finals-label,
.losers-finals-label { font-size: 14px; }

.round-slots {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.round-slots.centered { justify-content: center; flex: 1; }

/* ── Bracket card ── */
.bracket-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
}

.bracket-card-link:hover .bracket-card { border-color: rgba(255,255,255,0.25); }

.bracket-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.15s;
    position: relative;
}

.live-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: "Archimoto V01 Black", sans-serif;
    font-size: 9px;
    color: #fff;
    background: #dc2626;
    padding: 2px 6px;
    border-radius: 2px;
    animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

.bracket-card.completed { border-color: rgba(255,255,255,0.15); }

.bracket-card.losers-card { border-color: rgba(255,120,80,0.15); }

.bracket-card.grand-finals-card {
    border: 2px solid rgba(255,200,50,0.45);
    background: rgba(255,200,50,0.04);
}

.match-label {
    font-family: "Archimoto V01", sans-serif;
    font-size: 12px;
    letter-spacing: 1.8px;
    color: rgba(255,255,255,0.25);
    padding: 10px 14px 0;
    text-transform: uppercase;
}

.tbd-card { padding: 20px; text-align: center; }

/* ── Matchup rows ── */
.matchup {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.matchup-team {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    height: 36px;
    border-radius: 3px;
    transition: background 0.1s;
}

.matchup-team.winner { }
.matchup-team.loser  { opacity: 0.4; }

.bracket-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.matchup-name {
    font-family: "Archimoto V01 Black", sans-serif;
    font-size: 14px;
    color: #fff;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.matchup-name.tbd-text {
    color: rgba(255,255,255,0.25);
    font-family: "Archimoto V01", sans-serif;
}

.matchup-score {
    font-family: "Archimoto V01 Black", sans-serif;
    font-size: 17px;
    color: rgba(255,255,255,0.7);
    min-width: 22px;
    text-align: right;
}

.matchup-vs {
    font-family: "Archimoto V01", sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.2);
    text-align: center;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tbd { opacity: 0.5; }

/* ── Champion banner ── */
.champion-banner {
    background: rgba(255,200,50,0.12);
    border-top: 1px solid rgba(255,200,50,0.25);
    padding: 10px 12px;
    text-align: center;
}

.champion-label {
    display: block;
    font-family: "Archimoto V01", sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    color: rgba(255,200,50,0.7);
    margin-bottom: 4px;
}

.champion-name {
    font-family: "Abolition", sans-serif;
    font-size: 20px;
    letter-spacing: 3px;
    color: rgba(255,200,50,1);
}

/* ── Legend ── */
#bracket-legend {
    display: flex;
    gap: 24px;
    margin-top: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.legend-item {
    font-family: "Archimoto V01", sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 4px 12px;
    border-radius: 2px;
}

.winners-legend { color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.12); }
.losers-legend  { color: rgba(255,120,80,0.7);  border: 1px solid rgba(255,120,80,0.2); }
.gf-legend      { color: rgba(255,200,50,0.8);  border: 1px solid rgba(255,200,50,0.25); }

/* ── Skeleton placeholders ── */
@keyframes skeleton-shimmer {
    from { background-position: -200% 0; }
    to   { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.03) 25%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.03) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 2.4s ease-in-out infinite;
    border-radius: 2px;
}

.matchup-skeleton {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.matchup-team-skeleton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    height: 36px;
}

.skeleton-logo { width: 22px; height: 22px; flex-shrink: 0; }
.skeleton-name { height: 12px; flex: 1; }
.skeleton-vs   { height: 17px; width: 26px; margin: 0 auto; }

/* ── Responsive ── */
@media screen and (max-width: 1024px) {
    #bracket-content { width: 96vw; }
    #bracket-wrap {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: "wr1 wf" "lr1 lf" "gf gf";
        padding-right: 0;
        gap: 20px;
    }
    #col-gf {
        position: static;
        transform: none;
        width: auto;
        grid-area: gf;
        justify-self: stretch;
        max-width: none;
    }
}

@media screen and (max-width: 600px) {
    #bracket-content { width: 100%; padding: 16px 12px 80px; box-sizing: border-box; }
    .header-text.title { font-size: 22px; }
    #bracket-wrap {
        grid-template-columns: 1fr;
        grid-template-areas: "wr1" "wf" "lr1" "lf" "gf";
    }
    #col-gf { max-width: 100%; justify-self: stretch; }
    .matchup-name { font-size: 11px; }
}