/* ============================================================
   NBA Playoff Bracket — CSS Grid + SVG connectors
   ============================================================ */

/* Scroll wrapper */
.bracket-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
}

/* ---- 13-column × 8-row grid ---- */
.bracket-grid {
    display: grid;
    grid-template-columns:
        minmax(170px, 1fr)   /* 1  W R1       */
        36px                 /* 2  connector   */
        minmax(170px, 1fr)   /* 3  W Semis     */
        36px                 /* 4  connector   */
        minmax(170px, 1fr)   /* 5  W CF        */
        36px                 /* 6  connector   */
        minmax(200px, 1.2fr) /* 7  Finals      */
        36px                 /* 8  connector   */
        minmax(170px, 1fr)   /* 9  E CF        */
        36px                 /* 10 connector   */
        minmax(170px, 1fr)   /* 11 E Semis     */
        36px                 /* 12 connector   */
        minmax(170px, 1fr);  /* 13 E R1        */
    grid-template-rows: repeat(8, minmax(68px, 1fr));
    min-width: 1300px;
    gap: 0;
    align-items: center;
}

/* ---- Conference & round labels (above the grid) ---- */
.bracket-labels {
    display: grid;
    grid-template-columns:
        minmax(170px, 1fr) 36px minmax(170px, 1fr) 36px minmax(170px, 1fr) 36px
        minmax(200px, 1.2fr) 36px
        minmax(170px, 1fr) 36px minmax(170px, 1fr) 36px minmax(170px, 1fr);
    min-width: 1300px;
    margin-bottom: 0.25rem;
}

.bracket-conf-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-navy);
    padding: 0.25rem 0;
}

.bracket-conf-label--west { grid-column: 1 / 6; text-align: left; }
.bracket-conf-label--east { grid-column: 9 / 14; text-align: right; }

.bracket-round-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8b95a5;
    text-align: center;
    padding: 0.25rem 0;
}

/* ---- Grid placement helpers ---- */
/* West Round 1 (column 1) */
.bk-w-r1-1 { grid-column: 1; grid-row: 1 / 3; }
.bk-w-r1-2 { grid-column: 1; grid-row: 3 / 5; }
.bk-w-r1-3 { grid-column: 1; grid-row: 5 / 7; }
.bk-w-r1-4 { grid-column: 1; grid-row: 7 / 9; }

/* West Semis (column 3) */
.bk-w-sf-1 { grid-column: 3; grid-row: 2 / 4; }
.bk-w-sf-2 { grid-column: 3; grid-row: 6 / 8; }

/* West Conf Finals (column 5) */
.bk-w-cf   { grid-column: 5; grid-row: 4 / 6; }

/* Finals (column 7) */
.bk-finals { grid-column: 7; grid-row: 4 / 6; margin-top: -20px; }

/* Champion banner (column 7, below finals) */
.bk-champion { grid-column: 7; grid-row: 6 / 9; }

/* East Conf Finals (column 9) */
.bk-e-cf   { grid-column: 9; grid-row: 4 / 6; }

/* East Semis (column 11) */
.bk-e-sf-1 { grid-column: 11; grid-row: 2 / 4; }
.bk-e-sf-2 { grid-column: 11; grid-row: 6 / 8; }

/* East Round 1 (column 13) */
.bk-e-r1-1 { grid-column: 13; grid-row: 1 / 3; }
.bk-e-r1-2 { grid-column: 13; grid-row: 3 / 5; }
.bk-e-r1-3 { grid-column: 13; grid-row: 5 / 7; }
.bk-e-r1-4 { grid-column: 13; grid-row: 7 / 9; }

/* Connectors (SVG columns) */
.bk-conn { display: flex; align-items: stretch; align-self: stretch; }
.bk-conn svg { width: 100%; height: 100%; }
.bk-conn svg line { stroke: #c8ced6; stroke-width: 2; }

.bk-conn-w-r1-upper { grid-column: 2; grid-row: 1 / 5; }
.bk-conn-w-r1-lower { grid-column: 2; grid-row: 5 / 9; }
.bk-conn-w-sf       { grid-column: 4; grid-row: 2 / 8; }
.bk-conn-w-cf       { grid-column: 6; grid-row: 4 / 6; }
.bk-conn-e-cf       { grid-column: 8; grid-row: 4 / 6; }
.bk-conn-e-sf       { grid-column: 10; grid-row: 2 / 8; }
.bk-conn-e-r1-upper { grid-column: 12; grid-row: 1 / 5; }
.bk-conn-e-r1-lower { grid-column: 12; grid-row: 5 / 9; }

/* ============================================================
   Matchup card
   ============================================================ */
.bk-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04);
    overflow: hidden;
    margin: 4px 0;
    font-size: 0.82rem;
}

.bk-card__header {
    background: var(--color-blue, #2d6aa5);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-card__team {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    border-bottom: 1px solid #eef0f2;
    gap: 6px;
    min-height: 30px;
}

.bk-card__team:last-child { border-bottom: none; }

.bk-card__team--winner {
    font-weight: 700;
}

.bk-card__seed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #6c757d;
    flex-shrink: 0;
}

.bk-card__name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-card__record {
    font-size: 0.75rem;
    color: #8b95a5;
    font-weight: 500;
    flex-shrink: 0;
}

.bk-card__team--winner .bk-card__record {
    color: var(--color-navy);
}

.bk-card__indicator {
    font-size: 0.6rem;
    color: var(--color-blue, #2d6aa5);
    flex-shrink: 0;
    margin-left: 2px;
}

/* ============================================================
   Finals card (center, special styling)
   ============================================================ */
.bk-finals-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 0.75rem;
}

.bk-finals-card__label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #8b95a5;
    margin-bottom: 0.5rem;
}

.bk-finals-card .bk-card {
    width: 100%;
    max-width: 200px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 0 0 2px var(--color-navy);
}

.bk-finals-card .bk-card__header {
    background: var(--color-navy);
    font-size: 0.72rem;
    padding: 4px 8px;
}

/* ============================================================
   Champion banner
   ============================================================ */
.bk-champion-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding-top: 0.5rem;
}

.bk-banner {
    background: linear-gradient(180deg, var(--color-navy) 0%, #15304d 100%);
    color: #fff;
    width: 160px;
    padding: 1rem 0.75rem 1.25rem;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    text-align: center;
    box-shadow: 0 4px 12px rgba(30,58,95,0.35);
}

.bk-banner__season {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    border: 2px solid var(--color-gold);
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.bk-banner__team {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--color-gold);
    letter-spacing: 1px;
    line-height: 1.1;
}

.bk-banner__title {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.7);
    margin-top: 0.35rem;
}

.bk-banner__name {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    margin-top: 0.15rem;
}

.bk-banner__prob {
    font-size: 0.65rem;
    color: var(--color-gold);
    margin-top: 0.35rem;
    font-weight: 600;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1400px) {
    .bracket-grid,
    .bracket-labels {
        min-width: 1200px;
    }
    .bracket-grid,
    .bracket-labels {
        grid-template-columns:
            minmax(150px, 1fr) 28px minmax(150px, 1fr) 28px minmax(150px, 1fr) 28px
            minmax(170px, 1.2fr) 28px
            minmax(150px, 1fr) 28px minmax(150px, 1fr) 28px minmax(150px, 1fr);
    }
}

@media (max-width: 767.98px) {
    .bracket-grid,
    .bracket-labels {
        min-width: 1050px;
        grid-template-columns:
            minmax(120px, 1fr) 24px minmax(120px, 1fr) 24px minmax(120px, 1fr) 24px
            minmax(140px, 1.2fr) 24px
            minmax(120px, 1fr) 24px minmax(120px, 1fr) 24px minmax(120px, 1fr);
    }
    .bracket-grid { grid-template-rows: repeat(8, minmax(58px, 1fr)); }
    .bracket-conf-label { font-size: 0.6rem; letter-spacing: 1px; }
    .bracket-round-label { font-size: 0.5rem; }
    .bk-card { font-size: 0.72rem; }
    .bk-card__header { font-size: 0.58rem; padding: 2px 6px; }
    .bk-card__team { padding: 4px 6px; gap: 4px; min-height: 26px; }
    .bk-card__seed { min-width: 14px; height: 14px; font-size: 0.58rem; }
    .bk-card__record { font-size: 0.68rem; }
    .bk-banner { width: 130px; padding: 0.75rem 0.5rem 1rem; }
    .bk-banner__season { font-size: 1.2rem; }
    .bk-banner__team { font-size: 1.4rem; }
}