/* ============================================================
   Upper & Lower (Double Elimination) — additive styles.
   Base .bracket/.round/.round-label/.match/.player all come
   from styles-bracket.css — we only add UL-specific rules.
   ============================================================ */

/* ── Root layout: flex row [brackets col] + [grand final col] ── */

.ul-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    position: relative; /* needed for SVG overlay */
    margin: 0 auto;
    width: fit-content;
}

/* SVG connector overlay */
.ul-connector-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

/* Left column: upper bracket + lower bracket stacked */
.ul-brackets-col {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-width: 0;
}

/* Right column: grand final, vertically centred */
.ul-gf-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 0 0 auto;
    padding: 20px 20px 20px 40px;
    border-left: none;
    margin-left: 20px;
}

.ul-gf-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 280px;
}

.ul-gf-sub {
    font-size: 0.78rem;
    color: rgba(180, 210, 255, 0.5);
    margin: -4px 0 4px;
}

/* ── Section dividers ─────────────────────────────────────── */

.ul-section-divider {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 24px 20px 8px;
    justify-content: center;
}

.ul-section-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.02em;
    text-shadow: 0 0 8px rgba(255, 140, 100, 0.5);
}

.ul-section-sub {
    font-size: 0.8rem;
    color: rgba(200, 220, 255, 0.7);
    font-weight: 500;
}

.ul-section-lower .ul-section-title {
    color: #b388ff;
}

.ul-section-grand-final .ul-section-title {
    color: #ffd54f;
}

/* ── Bracket rows ─────────────────────────────────────────── */

.ul-bracket-row {
    padding-top: 0;
    padding-bottom: 20px;
    margin: 0; /* override .bracket { margin: 0 auto } — centering is on .ul-wrapper */
}

/* ── Rounds (flow layout; rounds 2+ get absolute positioning via JS) */

.ul-round {
    position: relative;
    min-width: 280px;
    gap: 16px;
}

/* Lower bracket round label: purple */
.ul-lower-label {
    color: #b388ff !important;
    background: linear-gradient(135deg, rgba(30, 15, 80, 0.9), rgba(20, 10, 60, 0.95)) !important;
    border-left-color: #b388ff !important;
}

/* Grand Final round label: gold */
.ul-grand-final-label {
    color: #ffd54f !important;
    background: linear-gradient(135deg, rgba(60, 40, 5, 0.9), rgba(40, 25, 0, 0.95)) !important;
    border-left-color: #ffd54f !important;
    box-shadow: 0 2px 8px rgba(240, 180, 41, 0.2) !important;
}

/* ── Match badge — small "MATCH #N" text above each card ──── */

.ul-match-badge {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(150, 200, 255, 0.5);
    padding: 6px 12px 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Grand Final match: gold border */
.ul-gf-col .match {
    border-color: rgba(240, 180, 41, 0.6);
    box-shadow: 0 4px 16px rgba(240, 180, 41, 0.15);
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 900px) {
    .ul-wrapper {
        flex-direction: column;
    }

    .ul-gf-col {
        border-left: none;
        border-top: 2px dashed rgba(240, 180, 41, 0.4);
        margin-left: 0;
        margin-top: 16px;
        padding: 20px 20px 8px;
    }
}