/* ═══════════════════════════════════
   Playoff Bracket Frontend Styles v2
   ═══════════════════════════════════ */

/* ─── Error ─── */

.playoff-bracket-error {
    text-align: center;
    color: #666;
    padding: 20px;
    font-style: italic;
}

/* ─── Playoff Picture Badge ─── */

.playoff-live-badge {
    text-align: center;
    font-size: 12px;
    color: #0073aa;
    background: #f0f6fc;
    border: 1px solid #c3d4e6;
    border-radius: 4px;
    padding: 6px 12px;
    margin-bottom: 10px;
}

/* ═══════════════════════════
   Single Bracket Layout
   ═══════════════════════════ */

.playoff-bracket-single {
    overflow-x: auto;
}

.playoff-bracket-single .bracket-rounds-row {
    display: flex;
    gap: 0;
    padding: 10px 0;
    align-items: flex-start;
}

/* ═══════════════════════════
   Dual Bracket Layout
   ═══════════════════════════ */

.playoff-bracket-dual {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px 0;
    align-items: flex-start;
}

.playoff-dual-side {
    flex: 1;
    min-width: 0;
}

.playoff-dual-left .bracket-rounds-row,
.playoff-dual-right .bracket-rounds-row {
    display: flex;
    gap: 0;
    align-items: flex-start;
}

.playoff-dual-center {
    flex: 0 0 220px;
    text-align: center;
    align-self: center;
    border: 2px solid #0073aa;
    border-radius: 8px;
    padding: 16px;
    background: #f7fbff;
}

.playoff-dual-title {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px 0;
    padding: 6px 12px;
    background: #23282d;
    color: #fff;
    border-radius: 4px;
}

/* ═══════════════════════════
   Rounds
   ═══════════════════════════ */

.playoff-round {
    min-width: 200px;
    flex-shrink: 0;
    position: relative;
    padding: 0 16px;
}

.playoff-round-title {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #444;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #0073aa;
}

.playoff-round-matchups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

/* ═══════════════════════════
   Connector Lines
   ═══════════════════════════ */

/* Horizontal connector from each matchup to the right */
.playoff-round:not(:last-child) .playoff-matchup::after {
    content: '';
    position: absolute;
    right: -16px;
    top: 50%;
    width: 16px;
    height: 2px;
    background: #bbb;
}

/* Horizontal connector from left into each matchup (rounds after the first) */
.playoff-round:not(:first-child) .playoff-matchup::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 50%;
    width: 16px;
    height: 2px;
    background: #bbb;
}

/* No connectors on byes */
.playoff-matchup.playoff-bye::after,
.playoff-matchup.playoff-bye::before {
    display: none;
}

/* ═══════════════════════════
   Matchup Info (Game #, Field, Date/Time)
   ═══════════════════════════ */

.playoff-matchup-info {
    font-size: 10px;
    color: #666;
    text-align: center;
    padding: 3px 8px;
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════
   Matchup
   ═══════════════════════════ */

.playoff-matchup {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    position: relative;
}

.playoff-matchup.playoff-bye {
    border-style: dashed;
    opacity: 0.6;
}

.playoff-team {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    gap: 6px;
    font-size: 13px;
    line-height: 1.3;
}

.playoff-team + .playoff-team {
    border-top: 1px solid #eee;
}

.playoff-team.playoff-winner {
    background: #e6f4ea;
    font-weight: 600;
}

.playoff-seed {
    font-weight: 700;
    color: #0073aa;
    min-width: 22px;
    text-align: center;
    font-size: 11px;
    flex-shrink: 0;
}

.playoff-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playoff-score {
    font-weight: 700;
    min-width: 24px;
    text-align: center;
    color: #333;
    background: #f0f0f1;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 12px;
}

/* ═══════════════════════════
   Champion
   ═══════════════════════════ */

.playoff-champion {
    text-align: center;
    flex-shrink: 0;
    align-self: center;
    min-width: 150px;
    padding: 0 16px;
}

.playoff-champion-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #444;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid #d4a200;
}

.playoff-champion-name {
    font-size: 18px;
    font-weight: 700;
    color: #0073aa;
    padding: 10px;
    border: 2px solid #d4a200;
    border-radius: 6px;
    background: #fffbe6;
}

/* ═══════════════════════════
   Responsive
   ═══════════════════════════ */

@media (max-width: 768px) {
    .playoff-bracket-dual {
        flex-direction: column;
    }
    .playoff-dual-center {
        flex: 0 0 auto;
        align-self: stretch;
    }
    .playoff-round {
        min-width: 160px;
    }
}