/* ================================================================
   ko-bracket-global.css  —  wwwroot/css/ko-bracket-global.css
   Must be global (not scoped) — styles here are used across
   KoBracketPanel.razor and cannot live in scoped .razor.css files
   because MudBlazor internal elements don't receive Blazor scope
   attributes, and child component styles don't inherit from parent.

   5 THEMES — apply one class to .ko-bracket-scroll-container:
     .ko-bracket-theme-indigo   (1) Indigo Pro      — crisp, modern
     .ko-bracket-theme-carbon   (2) Carbon Edge     — dark-first, premium
     .ko-bracket-theme-rose     (3) Rose Gold       — warm & elegant
     .ko-bracket-theme-slate    (4) Slate Authority — neutral, corporate
     .ko-bracket-theme-forest   (5) Forest Energy   — deep green, athletic

   Sections:
     1.  View options bar + MudSwitch horizontal override
     2.  Bracket structural styles (theme-agnostic)
     3.  Edit mode + swap panel
     4.  Qualifier / final column
     5.  Feeder strip
     6.  Card lift overrides
     7.  Score readability overrides
     8.  Themes 1–5 (full token sets)
     9.  Responsive
     10. MudSelect / MudButton overrides (swap panel internals)
   ================================================================ */


/* ================================================================
   1. VIEW OPTIONS BAR
   ================================================================ */

.spl-view-options {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 8px 14px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.spl-view-label {
    font-size: 0.60rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
    margin-right: 2px;
    white-space: nowrap;
}

/* MudSwitch horizontal override — MudBlazor defaults to column layout */
.spl-view-options .mud-switch-root {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

.spl-view-options .mud-switch-span-label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    cursor: pointer;
}

.spl-view-options .mud-switch-content {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.spl-view-options .mud-button-root.mud-switch-base {
    padding: 4px !important;
}




/* ================================================================
   SHARED STRUCTURAL STYLES  (theme-agnostic)
   ================================================================ */

.ko-bracket-bracket,
.ko-bracket-navigator,
.ko-bracket-qualifier-column,
.ko-bracket-qualifier-card {
    font-family: var(--ko-bracket-font);
}


/* ── Round Navigator ─────────────────────────────────────────── */

.ko-bracket-navigator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}


/* ── Bracket canvas / scroll container ──────────────────────── */

.ko-bracket-scroll-container {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--ko-bracket-border-card) transparent;
    /* Fixed dark canvas — same for every theme */
    border-radius: 14px;
    padding: 20px 16px 28px;
    margin-top: 10px;
    background: #13151f !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.18);
}

    .ko-bracket-scroll-container::-webkit-scrollbar {
        height: 4px;
    }

    .ko-bracket-scroll-container::-webkit-scrollbar-thumb {
        background: var(--ko-bracket-border-card);
        border-radius: 10px;
    }


/* ── Bracket layout ─────────────────────────────────────────── */

.ko-bracket-bracket {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    min-width: max-content;
    padding: 12px 4px 8px;
}

.ko-bracket-round-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    animation: ko-bracket-fade-in 0.35s ease both;
}

    .ko-bracket-round-section:nth-child(1) {
        animation-delay: 0.00s;
    }

    .ko-bracket-round-section:nth-child(2) {
        animation-delay: 0.06s;
    }

    .ko-bracket-round-section:nth-child(3) {
        animation-delay: 0.12s;
    }

    .ko-bracket-round-section:nth-child(4) {
        animation-delay: 0.18s;
    }

    .ko-bracket-round-section:nth-child(5) {
        animation-delay: 0.24s;
    }

@keyframes ko-bracket-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ── Column ─────────────────────────────────────────────────── */

.ko-bracket-column {
    width: 234px;
    min-width: 234px;
    max-width: 234px;
    display: flex;
    flex-direction: column;
}

.ko-bracket-bracket.ko-bracket-edit-mode .ko-bracket-column {
    width: 295px;
    min-width: 295px;
    max-width: 295px;
}

.ko-bracket-column--numbered {
    width: 262px;
    min-width: 262px;
    max-width: 262px;
}

    .ko-bracket-column--numbered .ko-bracket-matches-container {
        padding-left: 28px;
    }


/* ── Column header pill ─────────────────────────────────────── */

.ko-bracket-header {
    font-family: var(--ko-bracket-font);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: var(--ko-bracket-header-tracking, 0.13em);
    text-transform: uppercase;
    color: var(--ko-bracket-header-color);
    text-align: center;
    padding: 6px 12px 7px;
    margin: 0 6px 10px;
    background: var(--ko-bracket-bg-header);
    border: 1px solid var(--ko-bracket-header-border);
    border-radius: var(--ko-bracket-header-radius, 20px);
}


/* ── SVG connector column ───────────────────────────────────── */

.ko-bracket-connector-col {
    width: 44px;
    flex-shrink: 0;
    position: relative;
    align-self: flex-start; /* fix: prevents bracket canvas growing on click */
}

.ko-bracket-connector-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    overflow: visible;
    pointer-events: none;
}

    .ko-bracket-connector-svg line,
    .ko-bracket-connector-svg path {
        stroke: var(--ko-bracket-conn-line);
        stroke-width: 1.5px;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .ko-bracket-connector-svg circle {
        fill: var(--ko-bracket-conn-line);
    }


/* ── Matches container / pool ───────────────────────────────── */

.ko-bracket-matches-container {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}

.ko-bracket-pool {
    display: flex;
    flex-direction: column;
}

    .ko-bracket-pool + .ko-bracket-pool {
        margin-top: 10px;
    }


/* ── Match row / draw slot numbers ─────────────────────────── */

.ko-bracket-match-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.ko-bracket-draw-numbers {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    width: 22px;
    flex-shrink: 0;
    padding-right: 6px;
}

.ko-bracket-slot-number {
    font-family: var(--ko-bracket-font-mono);
    font-size: 0.57rem;
    font-weight: 500;
    color: var(--ko-bracket-text-disabled);
    line-height: 1;
    user-select: none;
}

.ko-bracket-match-row .ko-bracket-match-wrapper {
    flex: 1;
    min-width: 0;
}

.ko-bracket-match-wrapper {
    display: block;
    position: relative;
    z-index: 1;
}

    .ko-bracket-match-wrapper:has(.ko-bracket-swap-panel) {
        z-index: 100;
    }

    .ko-bracket-match-wrapper + .ko-bracket-match-wrapper {
        margin-top: 10px;
    }


/* ── Match card ─────────────────────────────────────────────── */

.ko-bracket-match-num {
    font-size: 0.62rem;
    font-weight: 700;
    color: #4fd1c5;
    letter-spacing: 0.06em;
    padding: 0 2px 2px;
}

.ko-bracket-match {
    border: var(--ko-bracket-card-border-width, 1px) solid var(--ko-bracket-border-card);
    border-radius: var(--ko-bracket-radius);
    overflow: visible;
    background: var(--ko-bracket-bg-card);
    box-shadow: var(--ko-bracket-shadow-card);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    position: relative;
}

    .ko-bracket-match::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--ko-bracket-accent-bar-w, 3px);
        background: transparent;
        transition: background 0.2s ease;
        border-radius: var(--ko-bracket-radius) 0 0 var(--ko-bracket-radius);
    }

    .ko-bracket-match:hover {
        box-shadow: var(--ko-bracket-shadow-hover);
        border-color: var(--ko-bracket-accent);
        background: var(--ko-bracket-bg-card-hover);
    }

        .ko-bracket-match:hover::before {
            background: var(--ko-bracket-accent);
        }


/* ── Slot ───────────────────────────────────────────────────── */

.ko-bracket-slot {
    padding: 8px 12px 8px 14px;
    min-height: 40px;
    display: flex;
    align-items: center;
    position: relative;
    transition: background 0.15s ease;
}

    .ko-bracket-slot + .ko-bracket-slot {
        border-top: 1px solid var(--ko-bracket-border-divider);
    }

/* Clip slot backgrounds to card border-radius */
.ko-bracket-match > .ko-bracket-slot:first-child {
    border-radius: var(--ko-bracket-radius) var(--ko-bracket-radius) 0 0;
    overflow: hidden;
}

.ko-bracket-match > .ko-bracket-slot:last-child {
    border-radius: 0 0 var(--ko-bracket-radius) var(--ko-bracket-radius);
    overflow: hidden;
}

.ko-bracket-match > .ko-bracket-slot:only-child {
    border-radius: var(--ko-bracket-radius);
    overflow: hidden;
}

.ko-bracket-slot.ko-bracket-slot--winner {
    background: var(--ko-bracket-winner-bg);
}

.ko-bracket-slot.ko-bracket-slot--bye {
    background: var(--ko-bracket-bye-stripe, repeating-linear-gradient(135deg,transparent 0,transparent 5px,rgba(150,150,180,0.10) 5px,rgba(150,150,180,0.10) 10px)), var(--ko-bracket-bg-card-bye);
}

.ko-bracket-slot:hover {
    background: var(--ko-bracket-accent-light);
    cursor: pointer;
}

.ko-bracket-slot.ko-bracket-slot--winner:hover {
    background: var(--ko-bracket-accent-mid);
}

/* Winner — coloured left border bar */
.ko-bracket-slot--winner {
    border-left: 3px solid var(--ko-bracket-winner-color) !important;
    padding-left: 11px !important;
}


/* ── Slot row contents ──────────────────────────────────────── */

.ko-bracket-slot-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0;
}

.ko-bracket-player-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    flex-shrink: 1;
}

.ko-bracket-badge-wrap {
    margin-left: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.ko-bracket-spacer {
    flex: 1;
    min-width: 6px;
}


/* ── Player name ────────────────────────────────────────────── */

.ko-bracket-slot-name {
    font-family: var(--ko-bracket-font);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.35;
    color: var(--ko-bracket-text-primary);
    letter-spacing: 0em;
}

    .ko-bracket-slot-name.ko-bracket-winner-name {
        font-weight: 700;
        color: var(--ko-bracket-text-primary);
    }

    .ko-bracket-slot-name.ko-bracket-loser-name {
        font-weight: 400;
        color: var(--ko-bracket-text-primary);
        opacity: 0.85;
    }

.ko-bracket-bye-text {
    font-family: var(--ko-bracket-font);
    font-size: 0.70rem;
    font-style: italic;
    font-weight: 500;
    color: var(--ko-bracket-text-secondary);
}


/* ── Seed badge ─────────────────────────────────────────────── */

.ko-bracket-seed-badge,
.ko-bracket-seed-badge.mud-chip,
.ko-bracket-seed-badge .mud-chip-label {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    min-height: unset !important;
    padding: 0 0 0 3px !important;
    margin: 0 !important;
    font-family: var(--ko-bracket-font) !important;
    font-size: 0.70rem !important;
    font-weight: 500 !important;
    color: var(--ko-bracket-text-primary) !important;
    opacity: 0.75 !important;
    letter-spacing: 0em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-transform: none !important;
}


/* ── Outcome badge ──────────────────────────────────────────── */

.ko-bracket-outcome-badge {
    border-radius: 4px !important;
    padding: 1px 5px !important;
    font-family: var(--ko-bracket-font) !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
    height: auto !important;
    min-width: unset !important;
    white-space: nowrap;
}


/* ── Score column ───────────────────────────────────────────── */

.ko-bracket-score-col {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    margin-left: 8px;
}

.ko-bracket-winner-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ko-bracket-winner-color);
    flex-shrink: 0;
    margin-right: 3px;
    box-shadow: 0 0 4px var(--ko-bracket-winner-color);
}

.ko-bracket-set {
    font-family: 'DM Mono', 'Fira Mono', monospace;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 18px;
    text-align: right;
    padding: 0;
    background: none !important;
    border-radius: 0;
    line-height: 1;
    letter-spacing: -0.01em;
}

    .ko-bracket-set.ko-bracket-set--win {
        color: var(--ko-bracket-winner-color);
        font-weight: 700;
        background: none !important;
        box-shadow: none;
    }

    .ko-bracket-set.ko-bracket-set--loss {
        color: var(--ko-bracket-text-primary);
        font-weight: 400;
        background: none !important;
        opacity: 0.65;
    }


/* ── Finish match button row ────────────────────────────────── */

.ko-bracket-finish-btn-row {
    display: flex;
    justify-content: flex-end;
    padding: 0 6px 2px;
    border-top: 1px solid var(--ko-bracket-border-divider);
}


/* ================================================================
   EDIT MODE
   ================================================================ */

/* Idle — dashed amber outline on clickable R1 slots */
.ko-bracket-slot--edit-idle {
    cursor: pointer;
    outline: 1.5px dashed rgba(255,200,60,0.40);
    outline-offset: -2px;
    transition: background 0.12s, outline-color 0.12s;
}

    .ko-bracket-slot--edit-idle:hover {
        background: rgba(255,200,60,0.07) !important;
        outline-color: rgba(255,200,60,0.75);
    }

/* Selected — panel open */
.ko-bracket-slot--edit-selected {
    cursor: pointer;
    outline: 2px solid #ffc93c !important;
    outline-offset: -2px;
    background: rgba(255,201,60,0.12) !important;
    animation: ko-bracket-sel-pulse 1.6s ease-in-out infinite;
}

@keyframes ko-bracket-sel-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(255,201,60,0.15);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(255,201,60,0.28);
    }
}

/* Locked — BYE / TBD slots */
.ko-bracket-slot--edit-locked {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.3);
}

/* Leading pip icon inside slot row */
.ko-bracket-edit-pip {
    font-size: 0.88rem;
    margin-right: 5px;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
    color: #ffc93c;
}


/* ── Edit hint banner ───────────────────────────────────────── */

.ko-bracket-edit-banner {
    margin: 0 0 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-family: var(--ko-bracket-font, inherit);
}

.ko-bracket-edit-banner--idle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(100,150,255,0.07);
    border: 1px solid rgba(100,150,255,0.22);
    border-radius: 8px;
    color: var(--ko-bracket-text-secondary, #aaa);
}

.ko-bracket-edit-banner-icon {
    flex-shrink: 0;
    font-size: 1rem !important;
    opacity: 0.8;
}


/* ================================================================
   SWAP PANEL
   Fixed dark palette — readable on ALL bracket themes.
   ================================================================ */

.ko-bracket-swap-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    margin: 0;
    min-width: 0;
    max-width: 240px;
    width: 240px;
    background: #1e2235;
    border: 1.5px solid rgba(255,201,60,0.55);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,201,60,0.12);
    overflow: visible;
    animation: ko-bracket-panel-in 0.18s ease-out both;
}

    /* Invisible bridge — closes gap between card and panel so cursor does not lose hover */
    .ko-bracket-swap-panel::before {
        content: '';
        position: absolute;
        top: -8px;
        left: 0;
        right: 0;
        height: 8px;
    }

@keyframes ko-bracket-panel-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Arrow pointing up */
.ko-bracket-swap-panel::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 20px;
    width: 13px;
    height: 13px;
    background: #1e2235;
    border-left: 1.5px solid rgba(255,201,60,0.55);
    border-top: 1.5px solid rgba(255,201,60,0.55);
    transform: rotate(45deg);
}

.ko-bracket-swap-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 7px 8px 6px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ko-bracket-swap-panel-icon {
    color: #ffc93c;
    flex-shrink: 0;
    font-size: 0.95rem !important;
    margin-top: 1px;
}

.ko-bracket-swap-panel-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.3;
}

.ko-bracket-swap-panel-label {
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #ffc93c;
}

.ko-bracket-swap-panel-name {
    color: #e8eaf5;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}

.ko-bracket-swap-panel-seed {
    font-size: 0.75rem;
    font-weight: 400;
    color: #9098b8;
}

.ko-bracket-swap-panel-close {
    margin-left: auto;
    flex-shrink: 0;
    color: #9098b8 !important;
}

    .ko-bracket-swap-panel-close:hover {
        color: #e8eaf5 !important;
    }

.ko-bracket-swap-panel-body {
    padding: 7px 10px 9px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* Select input — force visibility on dark panel */
.ko-bracket-swap-panel-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

    .ko-bracket-swap-panel-actions .mud-button-root {
        font-size: 0.70rem !important;
        min-width: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        letter-spacing: 0.02em !important;
        height: 30px !important;
        min-height: 30px !important;
    }


/* ================================================================
   QUALIFIER / FINAL COLUMN CARD
   ================================================================ */

.ko-bracket-qualifier-column .ko-bracket-header {
    color: var(--ko-bracket-qualifier-header);
    border-color: var(--ko-bracket-qualifier-border);
    background: var(--ko-bracket-qualifier-bg);
}

.ko-bracket-qualifier-card {
    border: var(--ko-bracket-qualifier-border-w, 1.5px) solid var(--ko-bracket-qualifier-border) !important;
    border-radius: var(--ko-bracket-radius);
    background-color: #1e2130 !important; /* guaranteed dark base */
    overflow: hidden;
    box-shadow: var(--ko-bracket-shadow-card);
    transition: box-shadow 0.2s ease;
    position: relative;
}

    .ko-bracket-qualifier-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--ko-bracket-accent-bar-w, 3px);
        background: var(--ko-bracket-qualifier-border);
        border-radius: var(--ko-bracket-radius) 0 0 var(--ko-bracket-radius);
        opacity: 0.75;
    }

    .ko-bracket-qualifier-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--ko-bracket-qualifier-bg);
        pointer-events: none;
        border-radius: var(--ko-bracket-radius);
    }

    .ko-bracket-qualifier-card:hover {
        box-shadow: var(--ko-bracket-shadow-qualifier);
    }

    .ko-bracket-qualifier-card.ko-bracket-qualifier-card--done {
        background-color: #1e2130 !important;
    }

        .ko-bracket-qualifier-card.ko-bracket-qualifier-card--done::after {
            background: var(--ko-bracket-qualifier-bg-done);
        }

        .ko-bracket-qualifier-card.ko-bracket-qualifier-card--done::before {
            opacity: 1;
        }

.ko-bracket-qualifier-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 4px 14px;
    border-bottom: 1px solid rgba(128,200,150,0.2);
}

.ko-bracket-qualifier-label {
    font-family: var(--ko-bracket-font);
    font-size: 0.60rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ko-bracket-qualifier-label);
    opacity: 0.85;
}

.ko-bracket-qualified-badge {
    font-family: var(--ko-bracket-font);
    font-size: 0.57rem;
    font-weight: 700;
    color: var(--ko-bracket-qualifier-label);
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.30);
    border-radius: 4px;
    padding: 1px 6px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ko-bracket-qualifier-name {
    padding: 6px 12px 8px 14px;
    font-family: var(--ko-bracket-font);
    font-size: 0.80rem;
    font-weight: 600;
    color: #e8eaf5; /* always readable on dark-tinted card */
    min-height: 32px;
    display: flex;
    align-items: center;
    letter-spacing: var(--ko-bracket-name-tracking, -0.01em);
}

    .ko-bracket-qualifier-name.ko-bracket-qualifier-name--done {
        color: #ffffff;
        font-weight: 700;
    }

    .ko-bracket-qualifier-name:not(.ko-bracket-qualifier-name--done) {
        opacity: 0.5;
    }

@keyframes ko-bracket-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}


/* ================================================================
   FEEDER STRIP
   Small-screen context: shows previous-round matchups feeding
   into each focused match.
   ================================================================ */

.ko-bracket-feeder-strip {
    margin: 4px 0 6px;
    padding: 7px 10px;
    background: rgba(99, 179, 237, 0.07);
    border-left: 2px solid rgba(99, 179, 237, 0.55);
    border-radius: 0 6px 6px 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ko-bracket-feeder-label {
    font-size: 0.60rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #63b3ed;
    margin-bottom: 2px;
}

.ko-bracket-feeder-match {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ko-bracket-feeder-slot {
    font-size: 0.74rem;
    color: var(--ko-bracket-text-primary, #c8cde8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

    .ko-bracket-feeder-slot.ko-bracket-feeder-winner {
        color: #68d391;
        font-weight: 700;
    }

    .ko-bracket-feeder-slot.ko-bracket-feeder-loser {
        color: #8890b0;
        text-decoration: line-through;
        text-decoration-color: rgba(136,144,176,0.4);
    }

.ko-bracket-feeder-vs {
    font-size: 0.62rem;
    color: var(--ko-bracket-text-secondary, #9098b8);
    flex-shrink: 0;
    padding-top: 2px;
}

.ko-bracket-feeder-mnum {
    font-size: 0.60rem;
    font-weight: 700;
    color: #63b3ed;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    opacity: 0.85;
}


/* ================================================================
   CARD LIFT — ensure theme cards contrast against the #13151f canvas
   Light-mode themes: cards are white/light — fine as-is.
   Dark-mode themes: explicitly lift card bg above the canvas.
   ================================================================ */

.mud-theme-dark .ko-bracket-theme-indigo,
[data-mud-theme="dark"] .ko-bracket-theme-indigo {
    --ko-bracket-bg-card: #20223a;
    --ko-bracket-bg-card-bye: #191b2e;
}

.ko-bracket-theme-carbon {
    --ko-bracket-bg-card: #22252f;
    --ko-bracket-bg-card-bye: #1c1f26;
}

.mud-theme-dark .ko-bracket-theme-rose,
[data-mud-theme="dark"] .ko-bracket-theme-rose {
    --ko-bracket-bg-card: #2a1a1c;
    --ko-bracket-bg-card-bye: #221416;
}

.mud-theme-dark .ko-bracket-theme-slate,
[data-mud-theme="dark"] .ko-bracket-theme-slate {
    --ko-bracket-bg-card: #1c2838;
    --ko-bracket-bg-card-bye: #151f2c;
}

.mud-theme-dark .ko-bracket-theme-forest,
[data-mud-theme="dark"] .ko-bracket-theme-forest {
    --ko-bracket-bg-card: #152218;
    --ko-bracket-bg-card-bye: #0e1a11;
}

/* Connector lines — brighter on dark canvas */
.mud-theme-dark .ko-bracket-theme-indigo,
[data-mud-theme="dark"] .ko-bracket-theme-indigo {
    --ko-bracket-conn-line: #3a3e68;
}

.ko-bracket-theme-carbon {
    --ko-bracket-conn-line: #383c52;
}

.mud-theme-dark .ko-bracket-theme-rose,
[data-mud-theme="dark"] .ko-bracket-theme-rose {
    --ko-bracket-conn-line: #5a3040;
}

.mud-theme-dark .ko-bracket-theme-slate,
[data-mud-theme="dark"] .ko-bracket-theme-slate {
    --ko-bracket-conn-line: #2e4058;
}

.mud-theme-dark .ko-bracket-theme-forest,
[data-mud-theme="dark"] .ko-bracket-theme-forest {
    --ko-bracket-conn-line: #284038;
}


/* ================================================================
   SCORE READABILITY OVERRIDES — solid win / muted loss per theme
   ================================================================ */

.ko-bracket-theme-indigo {
    --ko-bracket-score-win-fill: #4f5ef7;
    --ko-bracket-score-win-text: #ffffff;
    --ko-bracket-score-win-shadow: rgba(79,94,247,0.30);
    --ko-bracket-score-loss-color: #b0b5cc;
    --ko-bracket-score-loss-bg: rgba(160,165,192,0.08);
}

.mud-theme-dark .ko-bracket-theme-indigo,
[data-mud-theme="dark"] .ko-bracket-theme-indigo {
    --ko-bracket-score-win-fill: #5c6bff;
    --ko-bracket-score-win-shadow: rgba(92,107,255,0.40);
    --ko-bracket-score-loss-color: #4a4e6a;
    --ko-bracket-score-loss-bg: transparent;
}

.ko-bracket-theme-carbon {
    --ko-bracket-score-win-fill: #00d4ff;
    --ko-bracket-score-win-text: #060809;
    --ko-bracket-score-win-shadow: rgba(0,212,255,0.35);
    --ko-bracket-score-loss-color: #3a3e52;
    --ko-bracket-score-loss-bg: transparent;
}

.mud-theme-light .ko-bracket-theme-carbon,
[data-mud-theme="light"] .ko-bracket-theme-carbon {
    --ko-bracket-score-win-fill: #0090aa;
    --ko-bracket-score-win-text: #ffffff;
    --ko-bracket-score-win-shadow: rgba(0,144,170,0.25);
    --ko-bracket-score-loss-color: #9099b8;
    --ko-bracket-score-loss-bg: rgba(144,153,184,0.10);
}

.ko-bracket-theme-rose {
    --ko-bracket-score-win-fill: #c0524a;
    --ko-bracket-score-win-text: #ffffff;
    --ko-bracket-score-win-shadow: rgba(192,82,74,0.30);
    --ko-bracket-score-loss-color: #c8a09a;
    --ko-bracket-score-loss-bg: rgba(200,160,154,0.10);
}

.mud-theme-dark .ko-bracket-theme-rose,
[data-mud-theme="dark"] .ko-bracket-theme-rose {
    --ko-bracket-score-win-fill: #e8624a;
    --ko-bracket-score-win-shadow: rgba(232,98,74,0.40);
    --ko-bracket-score-loss-color: #5a3038;
    --ko-bracket-score-loss-bg: transparent;
}

.ko-bracket-theme-slate {
    --ko-bracket-score-win-fill: #0284c7;
    --ko-bracket-score-win-text: #ffffff;
    --ko-bracket-score-win-shadow: rgba(2,132,199,0.28);
    --ko-bracket-score-loss-color: #94a3b8;
    --ko-bracket-score-loss-bg: rgba(148,163,184,0.10);
}

.mud-theme-dark .ko-bracket-theme-slate,
[data-mud-theme="dark"] .ko-bracket-theme-slate {
    --ko-bracket-score-win-fill: #0ea5e9;
    --ko-bracket-score-win-shadow: rgba(14,165,233,0.38);
    --ko-bracket-score-loss-color: #364858;
    --ko-bracket-score-loss-bg: transparent;
}

.ko-bracket-theme-forest {
    --ko-bracket-score-win-fill: #16a34a;
    --ko-bracket-score-win-text: #ffffff;
    --ko-bracket-score-win-shadow: rgba(22,163,74,0.28);
    --ko-bracket-score-loss-color: #90b098;
    --ko-bracket-score-loss-bg: rgba(144,176,152,0.10);
}

.mud-theme-dark .ko-bracket-theme-forest,
[data-mud-theme="dark"] .ko-bracket-theme-forest {
    --ko-bracket-score-win-fill: #22c55e;
    --ko-bracket-score-win-text: #052e16;
    --ko-bracket-score-win-shadow: rgba(34,197,94,0.38);
    --ko-bracket-score-loss-color: #2e5040;
    --ko-bracket-score-loss-bg: transparent;
}


/* ================================================================
   THEME 1: INDIGO PRO
   ================================================================ */
.ko-bracket-theme-indigo {
    --ko-bracket-font: 'DM Sans', system-ui, sans-serif;
    --ko-bracket-font-mono: 'DM Mono', monospace;
    --ko-bracket-radius: 10px;
    --ko-bracket-header-radius: 20px;
    --ko-bracket-seed-radius: 5px;
    --ko-bracket-accent-bar-w: 3px;
    --ko-bracket-header-tracking: 0.13em;
    --ko-bracket-name-tracking: -0.01em;
    --ko-bracket-bg-card: #ffffff;
    --ko-bracket-bg-card-bye: #f8f8fb;
    --ko-bracket-bg-card-hover: #f0f4ff;
    --ko-bracket-bg-header: linear-gradient(135deg,#f0f2ff,#e8eaff);
    --ko-bracket-border-card: #e2e5f0;
    --ko-bracket-border-divider: #eceef5;
    --ko-bracket-border-header: #d0d4e8;
    --ko-bracket-text-primary: #1a1d2e;
    --ko-bracket-text-secondary: #5a5f7a;
    --ko-bracket-text-disabled: #c0c4d8;
    --ko-bracket-text-bye: #c0c4d8;
    --ko-bracket-accent: #4f5ef7;
    --ko-bracket-accent-light: rgba(79,94,247,0.08);
    --ko-bracket-accent-mid: rgba(79,94,247,0.16);
    --ko-bracket-winner-color: #4f5ef7;
    --ko-bracket-winner-bg: rgba(79,94,247,0.07);
    --ko-bracket-loser-color: #a0a5c0;
    --ko-bracket-seed-bg: #4f5ef7;
    --ko-bracket-seed-color: #ffffff;
    --ko-bracket-conn-line: #c5c9e0;
    --ko-bracket-header-color: #6670a0;
    --ko-bracket-header-border: #d0d4e8;
    --ko-bracket-qualifier-border: #10b981;
    --ko-bracket-qualifier-bg: rgba(16,185,129,0.06);
    --ko-bracket-qualifier-bg-done: rgba(16,185,129,0.12);
    --ko-bracket-qualifier-label: #059669;
    --ko-bracket-qualifier-header: #059669;
    --ko-bracket-score-win-color: #4f5ef7;
    --ko-bracket-score-win-bg: rgba(79,94,247,0.10);
    --ko-bracket-score-loss-color: #a0a5c0;
    --ko-bracket-shadow-card: 0 1px 3px rgba(26,29,46,0.07), 0 0 0 1px rgba(26,29,46,0.05);
    --ko-bracket-shadow-hover: 0 8px 24px rgba(79,94,247,0.15), 0 0 0 1.5px rgba(79,94,247,0.3);
    --ko-bracket-shadow-qualifier: 0 4px 16px rgba(16,185,129,0.15), 0 0 0 1.5px rgba(16,185,129,0.35);
    --ko-bracket-bye-stripe: repeating-linear-gradient(135deg,transparent,transparent 5px,rgba(192,196,216,0.12) 5px,rgba(192,196,216,0.12) 10px);
}

    .mud-theme-dark .ko-bracket-theme-indigo,
    [data-mud-theme="dark"] .ko-bracket-theme-indigo,
    .ko-bracket-theme-indigo.dark {
        --ko-bracket-bg-card: #1a1c2a;
        --ko-bracket-bg-card-bye: #141520;
        --ko-bracket-bg-card-hover: #22263c;
        --ko-bracket-bg-header: linear-gradient(135deg,#1e2038,#191b30);
        --ko-bracket-border-card: #2a2e48;
        --ko-bracket-border-divider: #212438;
        --ko-bracket-border-header: #2e3250;
        --ko-bracket-text-primary: #e8eaf5;
        --ko-bracket-text-secondary: #8890b8;
        --ko-bracket-text-disabled: #3a3e5a;
        --ko-bracket-text-bye: #3a3e5a;
        --ko-bracket-accent: #7c8eff;
        --ko-bracket-accent-light: rgba(124,142,255,0.10);
        --ko-bracket-accent-mid: rgba(124,142,255,0.20);
        --ko-bracket-winner-color: #7c8eff;
        --ko-bracket-winner-bg: rgba(124,142,255,0.10);
        --ko-bracket-loser-color: #50547a;
        --ko-bracket-seed-bg: #3d4bcc;
        --ko-bracket-seed-color: #e0e4ff;
        --ko-bracket-conn-line: #2e3254;
        --ko-bracket-header-color: #6870a8;
        --ko-bracket-header-border: #252840;
        --ko-bracket-qualifier-border: #34d399;
        --ko-bracket-qualifier-bg: rgba(52,211,153,0.08);
        --ko-bracket-qualifier-bg-done: rgba(52,211,153,0.14);
        --ko-bracket-qualifier-label: #34d399;
        --ko-bracket-qualifier-header: #34d399;
        --ko-bracket-score-win-color: #7c8eff;
        --ko-bracket-score-win-bg: rgba(124,142,255,0.14);
        --ko-bracket-score-loss-color: #3a3e5a;
        --ko-bracket-shadow-card: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
        --ko-bracket-shadow-hover: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1.5px rgba(124,142,255,0.35);
        --ko-bracket-shadow-qualifier: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1.5px rgba(52,211,153,0.4);
        --ko-bracket-bye-stripe: repeating-linear-gradient(135deg,transparent,transparent 5px,rgba(58,62,90,0.18) 5px,rgba(58,62,90,0.18) 10px);
    }


/* ================================================================
   THEME 2: CARBON EDGE
   ================================================================ */
.ko-bracket-theme-carbon {
    --ko-bracket-font: 'Sora', system-ui, sans-serif;
    --ko-bracket-font-mono: 'DM Mono', monospace;
    --ko-bracket-radius: 8px;
    --ko-bracket-header-radius: 6px;
    --ko-bracket-seed-radius: 4px;
    --ko-bracket-accent-bar-w: 2px;
    --ko-bracket-header-tracking: 0.18em;
    --ko-bracket-name-tracking: 0em;
    --ko-bracket-card-border-width: 1px;
    --ko-bracket-bg-card: #1e2027;
    --ko-bracket-bg-card-bye: #191b21;
    --ko-bracket-bg-card-hover: #252830;
    --ko-bracket-bg-header: #13151a;
    --ko-bracket-border-card: #2e3140;
    --ko-bracket-border-divider: #252838;
    --ko-bracket-border-header: #2e3140;
    --ko-bracket-text-primary: #e2e6f0;
    --ko-bracket-text-secondary: #707890;
    --ko-bracket-text-disabled: #363a4a;
    --ko-bracket-text-bye: #363a4a;
    --ko-bracket-accent: #00d4ff;
    --ko-bracket-accent-light: rgba(0,212,255,0.06);
    --ko-bracket-accent-mid: rgba(0,212,255,0.12);
    --ko-bracket-winner-color: #00d4ff;
    --ko-bracket-winner-bg: rgba(0,212,255,0.07);
    --ko-bracket-loser-color: #484c60;
    --ko-bracket-seed-bg: #00d4ff;
    --ko-bracket-seed-color: #0a0c10;
    --ko-bracket-conn-line: #2e3140;
    --ko-bracket-header-color: #505870;
    --ko-bracket-header-border: #2e3140;
    --ko-bracket-qualifier-border: #a78bfa;
    --ko-bracket-qualifier-bg: rgba(167,139,250,0.07);
    --ko-bracket-qualifier-bg-done: rgba(167,139,250,0.14);
    --ko-bracket-qualifier-label: #a78bfa;
    --ko-bracket-qualifier-header: #a78bfa;
    --ko-bracket-score-win-color: #00d4ff;
    --ko-bracket-score-win-bg: rgba(0,212,255,0.10);
    --ko-bracket-score-loss-color: #404460;
    --ko-bracket-shadow-card: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
    --ko-bracket-shadow-hover: 0 0 0 1.5px rgba(0,212,255,0.5), 0 8px 24px rgba(0,212,255,0.12);
    --ko-bracket-shadow-qualifier: 0 0 0 1.5px rgba(167,139,250,0.5), 0 6px 20px rgba(167,139,250,0.12);
    --ko-bracket-bye-stripe: repeating-linear-gradient(135deg,transparent,transparent 6px,rgba(46,49,64,0.35) 6px,rgba(46,49,64,0.35) 12px);
}

/* Light mode fallback */
.mud-theme-light .ko-bracket-theme-carbon,
[data-mud-theme="light"] .ko-bracket-theme-carbon {
    --ko-bracket-bg-card: #f5f7fa;
    --ko-bracket-bg-card-bye: #eef0f5;
    --ko-bracket-bg-card-hover: #eaedfa;
    --ko-bracket-bg-header: #e8ebf2;
    --ko-bracket-border-card: #d8dce8;
    --ko-bracket-border-divider: #e4e7f0;
    --ko-bracket-text-primary: #1a1e2e;
    --ko-bracket-text-disabled: #c0c4d8;
    --ko-bracket-text-bye: #c0c4d8;
    --ko-bracket-header-color: #6070a0;
    --ko-bracket-conn-line: #c4c8da;
    --ko-bracket-shadow-card: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
}


/* ================================================================
   THEME 3: ROSE GOLD
   ================================================================ */
.ko-bracket-theme-rose {
    --ko-bracket-font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --ko-bracket-font-mono: 'DM Mono', monospace;
    --ko-bracket-radius: 12px;
    --ko-bracket-header-radius: 12px;
    --ko-bracket-seed-radius: 50%;
    --ko-bracket-accent-bar-w: 3px;
    --ko-bracket-header-tracking: 0.10em;
    --ko-bracket-name-tracking: -0.01em;
    --ko-bracket-qualifier-border-w: 1.5px;
    --ko-bracket-bg-card: #fffcfb;
    --ko-bracket-bg-card-bye: #fdf8f6;
    --ko-bracket-bg-card-hover: #fff5f2;
    --ko-bracket-bg-header: linear-gradient(135deg,#fff0ec,#ffe8e2);
    --ko-bracket-border-card: #f0e0da;
    --ko-bracket-border-divider: #f5ebe7;
    --ko-bracket-border-header: #e8cec6;
    --ko-bracket-text-primary: #2a1a16;
    --ko-bracket-text-secondary: #8a5a52;
    --ko-bracket-text-disabled: #d8bfba;
    --ko-bracket-text-bye: #d8bfba;
    --ko-bracket-accent: #c0524a;
    --ko-bracket-accent-light: rgba(192,82,74,0.07);
    --ko-bracket-accent-mid: rgba(192,82,74,0.14);
    --ko-bracket-winner-color: #b8421a;
    --ko-bracket-winner-bg: rgba(192,82,74,0.07);
    --ko-bracket-loser-color: #c8a09a;
    --ko-bracket-seed-bg: linear-gradient(135deg,#c8a060,#d4804a);
    --ko-bracket-seed-color: #ffffff;
    --ko-bracket-conn-line: #e0c8c0;
    --ko-bracket-header-color: #a06860;
    --ko-bracket-header-border: #e8cec6;
    --ko-bracket-qualifier-border: #b8942a;
    --ko-bracket-qualifier-bg: rgba(184,148,42,0.07);
    --ko-bracket-qualifier-bg-done: rgba(184,148,42,0.14);
    --ko-bracket-qualifier-label: #9a7a18;
    --ko-bracket-qualifier-header: #9a7a18;
    --ko-bracket-score-win-color: #b8421a;
    --ko-bracket-score-win-bg: rgba(184,66,26,0.09);
    --ko-bracket-score-loss-color: #c8a09a;
    --ko-bracket-shadow-card: 0 1px 4px rgba(80,20,10,0.06), 0 0 0 1px rgba(80,20,10,0.05);
    --ko-bracket-shadow-hover: 0 8px 24px rgba(192,82,74,0.12), 0 0 0 1.5px rgba(192,82,74,0.28);
    --ko-bracket-shadow-qualifier: 0 4px 16px rgba(184,148,42,0.15), 0 0 0 1.5px rgba(184,148,42,0.35);
    --ko-bracket-bye-stripe: repeating-linear-gradient(135deg,transparent,transparent 5px,rgba(216,192,186,0.15) 5px,rgba(216,192,186,0.15) 10px);
}

    .mud-theme-dark .ko-bracket-theme-rose,
    [data-mud-theme="dark"] .ko-bracket-theme-rose,
    .ko-bracket-theme-rose.dark {
        --ko-bracket-bg-card: #221618;
        --ko-bracket-bg-card-bye: #1c1214;
        --ko-bracket-bg-card-hover: #2c1e20;
        --ko-bracket-bg-header: linear-gradient(135deg,#2e1820,#26141a);
        --ko-bracket-border-card: #3e2428;
        --ko-bracket-border-divider: #321e22;
        --ko-bracket-border-header: #4a2c32;
        --ko-bracket-text-primary: #f2e8e6;
        --ko-bracket-text-secondary: #a07880;
        --ko-bracket-text-disabled: #4a3035;
        --ko-bracket-text-bye: #4a3035;
        --ko-bracket-accent: #f08070;
        --ko-bracket-accent-light: rgba(240,128,112,0.09);
        --ko-bracket-accent-mid: rgba(240,128,112,0.18);
        --ko-bracket-winner-color: #f09080;
        --ko-bracket-winner-bg: rgba(240,128,112,0.10);
        --ko-bracket-loser-color: #6a4048;
        --ko-bracket-seed-bg: linear-gradient(135deg,#c8a060,#d4804a);
        --ko-bracket-seed-color: #ffffff;
        --ko-bracket-conn-line: #4a2e32;
        --ko-bracket-header-color: #a06068;
        --ko-bracket-header-border: #4a2c32;
        --ko-bracket-qualifier-border: #d4aa40;
        --ko-bracket-qualifier-bg: rgba(212,170,64,0.08);
        --ko-bracket-qualifier-bg-done: rgba(212,170,64,0.16);
        --ko-bracket-qualifier-label: #d4aa40;
        --ko-bracket-qualifier-header: #d4aa40;
        --ko-bracket-score-win-color: #f09080;
        --ko-bracket-score-win-bg: rgba(240,128,112,0.12);
        --ko-bracket-score-loss-color: #5a3038;
        --ko-bracket-shadow-card: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,180,160,0.06);
        --ko-bracket-shadow-hover: 0 8px 28px rgba(0,0,0,0.5), 0 0 0 1.5px rgba(240,128,112,0.35);
        --ko-bracket-shadow-qualifier: 0 4px 20px rgba(0,0,0,0.45), 0 0 0 1.5px rgba(212,170,64,0.4);
        --ko-bracket-bye-stripe: repeating-linear-gradient(135deg,transparent,transparent 5px,rgba(74,48,53,0.25) 5px,rgba(74,48,53,0.25) 10px);
    }


/* ================================================================
   THEME 4: SLATE AUTHORITY
   ================================================================ */
.ko-bracket-theme-slate {
    --ko-bracket-font: 'DM Sans', system-ui, sans-serif;
    --ko-bracket-font-mono: 'DM Mono', monospace;
    --ko-bracket-radius: 8px;
    --ko-bracket-header-radius: 8px;
    --ko-bracket-seed-radius: 4px;
    --ko-bracket-accent-bar-w: 4px;
    --ko-bracket-header-tracking: 0.16em;
    --ko-bracket-name-tracking: 0em;
    --ko-bracket-card-border-width: 1px;
    --ko-bracket-bg-card: #ffffff;
    --ko-bracket-bg-card-bye: #f8f9fc;
    --ko-bracket-bg-card-hover: #f0f5ff;
    --ko-bracket-bg-header: #edf1f7;
    --ko-bracket-border-card: #dde3ee;
    --ko-bracket-border-divider: #eaeff7;
    --ko-bracket-border-header: #ccd4e4;
    --ko-bracket-text-primary: #0f1623;
    --ko-bracket-text-secondary: #546080;
    --ko-bracket-text-disabled: #bcc5d8;
    --ko-bracket-text-bye: #bcc5d8;
    --ko-bracket-accent: #0284c7;
    --ko-bracket-accent-light: rgba(2,132,199,0.07);
    --ko-bracket-accent-mid: rgba(2,132,199,0.14);
    --ko-bracket-winner-color: #0284c7;
    --ko-bracket-winner-bg: rgba(2,132,199,0.07);
    --ko-bracket-loser-color: #94a3b8;
    --ko-bracket-seed-bg: #0f1623;
    --ko-bracket-seed-color: #f0f5ff;
    --ko-bracket-conn-line: #c8d2e4;
    --ko-bracket-header-color: #546080;
    --ko-bracket-header-border: #ccd4e4;
    --ko-bracket-qualifier-border: #0284c7;
    --ko-bracket-qualifier-bg: rgba(2,132,199,0.05);
    --ko-bracket-qualifier-bg-done: rgba(2,132,199,0.10);
    --ko-bracket-qualifier-label: #0369a1;
    --ko-bracket-qualifier-header: #0369a1;
    --ko-bracket-score-win-color: #0284c7;
    --ko-bracket-score-win-bg: rgba(2,132,199,0.08);
    --ko-bracket-score-loss-color: #94a3b8;
    --ko-bracket-shadow-card: 0 1px 2px rgba(15,22,35,0.06), 0 0 0 1px rgba(15,22,35,0.05);
    --ko-bracket-shadow-hover: 0 6px 20px rgba(2,132,199,0.12), 0 0 0 1.5px rgba(2,132,199,0.28);
    --ko-bracket-shadow-qualifier: 0 4px 16px rgba(2,132,199,0.14), 0 0 0 1.5px rgba(2,132,199,0.35);
    --ko-bracket-bye-stripe: repeating-linear-gradient(135deg,transparent,transparent 5px,rgba(188,197,216,0.14) 5px,rgba(188,197,216,0.14) 10px);
}

    .mud-theme-dark .ko-bracket-theme-slate,
    [data-mud-theme="dark"] .ko-bracket-theme-slate,
    .ko-bracket-theme-slate.dark {
        --ko-bracket-bg-card: #16202e;
        --ko-bracket-bg-card-bye: #111927;
        --ko-bracket-bg-card-hover: #1e2c3e;
        --ko-bracket-bg-header: #101820;
        --ko-bracket-border-card: #243040;
        --ko-bracket-border-divider: #1c2838;
        --ko-bracket-border-header: #2a3a4e;
        --ko-bracket-text-primary: #e0e8f4;
        --ko-bracket-text-secondary: #708098;
        --ko-bracket-text-disabled: #304050;
        --ko-bracket-text-bye: #304050;
        --ko-bracket-accent: #38bdf8;
        --ko-bracket-accent-light: rgba(56,189,248,0.08);
        --ko-bracket-accent-mid: rgba(56,189,248,0.16);
        --ko-bracket-winner-color: #38bdf8;
        --ko-bracket-winner-bg: rgba(56,189,248,0.09);
        --ko-bracket-loser-color: #405060;
        --ko-bracket-seed-bg: #e0e8f4;
        --ko-bracket-seed-color: #0f1623;
        --ko-bracket-conn-line: #243040;
        --ko-bracket-header-color: #607080;
        --ko-bracket-header-border: #2a3a4e;
        --ko-bracket-qualifier-border: #38bdf8;
        --ko-bracket-qualifier-bg: rgba(56,189,248,0.07);
        --ko-bracket-qualifier-bg-done: rgba(56,189,248,0.13);
        --ko-bracket-qualifier-label: #38bdf8;
        --ko-bracket-qualifier-header: #38bdf8;
        --ko-bracket-score-win-color: #38bdf8;
        --ko-bracket-score-win-bg: rgba(56,189,248,0.12);
        --ko-bracket-score-loss-color: #364858;
        --ko-bracket-shadow-card: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
        --ko-bracket-shadow-hover: 0 8px 28px rgba(0,0,0,0.5), 0 0 0 1.5px rgba(56,189,248,0.35);
        --ko-bracket-shadow-qualifier: 0 4px 20px rgba(0,0,0,0.45), 0 0 0 1.5px rgba(56,189,248,0.4);
        --ko-bracket-bye-stripe: repeating-linear-gradient(135deg,transparent,transparent 5px,rgba(36,48,64,0.3) 5px,rgba(36,48,64,0.3) 10px);
    }


/* ================================================================
   THEME 5: FOREST ENERGY
   ================================================================ */
.ko-bracket-theme-forest {
    --ko-bracket-font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --ko-bracket-font-mono: 'DM Mono', monospace;
    --ko-bracket-radius: 10px;
    --ko-bracket-header-radius: 8px;
    --ko-bracket-seed-radius: 6px;
    --ko-bracket-accent-bar-w: 3px;
    --ko-bracket-header-tracking: 0.14em;
    --ko-bracket-name-tracking: -0.01em;
    --ko-bracket-bg-card: #f7fbf8;
    --ko-bracket-bg-card-bye: #f2f7f3;
    --ko-bracket-bg-card-hover: #edf7f0;
    --ko-bracket-bg-header: linear-gradient(135deg,#e8f5ec,#dff0e4);
    --ko-bracket-border-card: #d4e8da;
    --ko-bracket-border-divider: #e0ede4;
    --ko-bracket-border-header: #c4dccb;
    --ko-bracket-text-primary: #0d2016;
    --ko-bracket-text-secondary: #406050;
    --ko-bracket-text-disabled: #b4ceba;
    --ko-bracket-text-bye: #b4ceba;
    --ko-bracket-accent: #16a34a;
    --ko-bracket-accent-light: rgba(22,163,74,0.08);
    --ko-bracket-accent-mid: rgba(22,163,74,0.16);
    --ko-bracket-winner-color: #16a34a;
    --ko-bracket-winner-bg: rgba(22,163,74,0.08);
    --ko-bracket-loser-color: #90b098;
    --ko-bracket-seed-bg: #16a34a;
    --ko-bracket-seed-color: #ffffff;
    --ko-bracket-conn-line: #c0d8c8;
    --ko-bracket-header-color: #406858;
    --ko-bracket-header-border: #c4dccb;
    --ko-bracket-qualifier-border: #ca8a04;
    --ko-bracket-qualifier-bg: rgba(202,138,4,0.07);
    --ko-bracket-qualifier-bg-done: rgba(202,138,4,0.14);
    --ko-bracket-qualifier-label: #a16207;
    --ko-bracket-qualifier-header: #a16207;
    --ko-bracket-score-win-color: #16a34a;
    --ko-bracket-score-win-bg: rgba(22,163,74,0.10);
    --ko-bracket-score-loss-color: #90b098;
    --ko-bracket-shadow-card: 0 1px 3px rgba(13,32,22,0.07), 0 0 0 1px rgba(13,32,22,0.05);
    --ko-bracket-shadow-hover: 0 8px 24px rgba(22,163,74,0.14), 0 0 0 1.5px rgba(22,163,74,0.30);
    --ko-bracket-shadow-qualifier: 0 4px 16px rgba(202,138,4,0.16), 0 0 0 1.5px rgba(202,138,4,0.35);
    --ko-bracket-bye-stripe: repeating-linear-gradient(135deg,transparent,transparent 5px,rgba(180,206,186,0.18) 5px,rgba(180,206,186,0.18) 10px);
}

    .mud-theme-dark .ko-bracket-theme-forest,
    [data-mud-theme="dark"] .ko-bracket-theme-forest,
    .ko-bracket-theme-forest.dark {
        --ko-bracket-bg-card: #0f1f16;
        --ko-bracket-bg-card-bye: #0b1912;
        --ko-bracket-bg-card-hover: #16281d;
        --ko-bracket-bg-header: linear-gradient(135deg,#142010,#101c0e);
        --ko-bracket-border-card: #1e3428;
        --ko-bracket-border-divider: #182c20;
        --ko-bracket-border-header: #264030;
        --ko-bracket-text-primary: #d8f0e0;
        --ko-bracket-text-secondary: #5a8868;
        --ko-bracket-text-disabled: #2a4034;
        --ko-bracket-text-bye: #2a4034;
        --ko-bracket-accent: #4ade80;
        --ko-bracket-accent-light: rgba(74,222,128,0.08);
        --ko-bracket-accent-mid: rgba(74,222,128,0.16);
        --ko-bracket-winner-color: #4ade80;
        --ko-bracket-winner-bg: rgba(74,222,128,0.09);
        --ko-bracket-loser-color: #2e5040;
        --ko-bracket-seed-bg: #16a34a;
        --ko-bracket-seed-color: #f0fff4;
        --ko-bracket-conn-line: #1e3428;
        --ko-bracket-header-color: #4a7058;
        --ko-bracket-header-border: #264030;
        --ko-bracket-qualifier-border: #fbbf24;
        --ko-bracket-qualifier-bg: rgba(251,191,36,0.08);
        --ko-bracket-qualifier-bg-done: rgba(251,191,36,0.15);
        --ko-bracket-qualifier-label: #fbbf24;
        --ko-bracket-qualifier-header: #fbbf24;
        --ko-bracket-score-win-color: #4ade80;
        --ko-bracket-score-win-bg: rgba(74,222,128,0.12);
        --ko-bracket-score-loss-color: #2e5040;
        --ko-bracket-shadow-card: 0 2px 8px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
        --ko-bracket-shadow-hover: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1.5px rgba(74,222,128,0.35);
        --ko-bracket-shadow-qualifier: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1.5px rgba(251,191,36,0.4);
        --ko-bracket-bye-stripe: repeating-linear-gradient(135deg,transparent,transparent 5px,rgba(30,52,40,0.3) 5px,rgba(30,52,40,0.3) 10px);
    }


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 959px) {
    /* Focus mode — fill width */
    .ko-bracket-scroll-container {
        overflow-x: hidden;
    }

    .ko-bracket-bracket {
        min-width: unset;
        width: 100%;
        justify-content: center;
        padding: 12px 16px 8px;
        box-sizing: border-box;
    }

    .ko-bracket-round-section {
        width: 100%;
        justify-content: center;
    }

    .ko-bracket-column,
    .ko-bracket-column--numbered {
        width: 100%;
        min-width: unset;
        max-width: 100%;
        flex: 1;
    }

    .ko-bracket-matches-container,
    .ko-bracket-pool,
    .ko-bracket-match-row {
        width: 100%;
    }

    .ko-bracket-match {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 600px) {
    .ko-bracket-slot-name {
        font-size: 0.70rem;
    }

    .ko-bracket-set {
        font-size: 0.62rem;
        min-width: 16px;
    }

    .ko-bracket-connector-col {
        width: 30px;
    }

    .ko-bracket-connector-svg {
        width: 30px;
    }

    .ko-bracket-slot {
        padding: 6px 8px 6px 10px;
        min-height: 32px;
    }
}



/* ================================================================
   10. MUDSELECT / MUDBUTTON OVERRIDES  (swap panel internals)
   ================================================================ */

.ko-bracket-swap-select {
    width: 100%;
}

    .ko-bracket-swap-select .mud-input-root,
    .ko-bracket-swap-select .mud-input,
    .ko-bracket-swap-select input,
    .ko-bracket-swap-select .mud-input-root input {
        font-size: 0.70rem !important;
        color: #e8eaf5 !important;
    }

    .ko-bracket-swap-select .mud-select-input {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        height: auto !important;
        min-height: 1.3em;
        line-height: 1.35;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        color: #e8eaf5 !important;
        font-size: 0.70rem !important;
    }

    .ko-bracket-swap-select .mud-input::placeholder,
    .ko-bracket-swap-select input::placeholder,
    .ko-bracket-swap-select .mud-select-input {
        color: #7880a0 !important;
        opacity: 1 !important;
    }

    .ko-bracket-swap-select .mud-input-outlined-border {
        border-color: rgba(255,201,60,0.30) !important;
    }

    .ko-bracket-swap-select:hover .mud-input-outlined-border,
    .ko-bracket-swap-select:focus-within .mud-input-outlined-border {
        border-color: rgba(255,201,60,0.60) !important;
    }

    .ko-bracket-swap-select .mud-input-label {
        color: #7880a0 !important;
        font-size: 0.82rem !important;
    }

    .ko-bracket-swap-select .mud-list-item-text,
    .ko-bracket-swap-select .mud-select-item,
    .ko-bracket-swap-select .mud-list-item {
        white-space: normal !important;
        word-break: break-word;
        font-size: 0.78rem !important;
        font-weight: 500;
        line-height: 1.4;
        padding-top: 4px;
        padding-bottom: 4px;
    }

.ko-bracket-swap-panel-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

    .ko-bracket-swap-panel-actions .mud-button-root {
        font-size: 0.70rem !important;
        min-width: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        letter-spacing: 0.02em !important;
        height: 30px !important;
        min-height: 30px !important;
    }