/* Premium public bracket — Color Studio HUD on the live page only.

   Loaded last from views/bracket.ejs. Every rule is scoped to
   body.bk-scope.bracket-page so Bracket Studio preview, PNG cards and
   organizer HQ keep their existing look. Kit / Color Studio tokens that
   are not 'inherit' still win on group frames, glows, match cards and
   table chips because those files use !important on data-ck-* / data-bk-*.
   This sheet only upgrades inherit chrome and paints page chrome
   (hero, tabs, meta HUD, clash, trophies) with --ck-lead / --ck-spark. */

body.bk-scope.bracket-page {
    --bp-lead: var(--ck-lead, var(--theme-primary, #ff3c3c));
    --bp-support: var(--ck-support, var(--theme-secondary, #ff6a00));
    --bp-spark: var(--ck-spark, var(--theme-accent, #ff8a33));
}

/* ── Hero ─────────────────────────────────────────────────── */
body.bk-scope.bracket-page .bracket-hero {
    background:
        radial-gradient(circle at 12% 8%, var(--theme-glow1, rgba(255,60,60,.18)), transparent 42%),
        radial-gradient(circle at 88% 78%, var(--theme-glow2, rgba(255,106,0,.16)), transparent 46%),
        linear-gradient(180deg, var(--theme-bg-start, #0a0e16) 0%, var(--theme-bg-mid, #070a10) 58%, var(--theme-bg-end, #04060a) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--bp-lead) 28%, transparent);
}
body.bk-scope.bracket-page .bracket-hero.has-banner {
    background:
        linear-gradient(180deg, rgba(5,6,10,.32) 0%, rgba(5,6,10,.78) 100%),
        var(--bracket-hero-banner) center / cover no-repeat;
}
body.bk-scope.bracket-page .bracket-hero.has-banner::before,
body.bk-scope.bracket-page .bracket-hero.has-banner::after {
    opacity: .28;
}
body.bk-scope.bracket-page .bracket-hero::before {
    background:
        radial-gradient(circle at 16% 20%, color-mix(in srgb, var(--bp-lead) 22%, transparent), transparent 42%),
        radial-gradient(circle at 84% 72%, color-mix(in srgb, var(--bp-spark) 16%, transparent), transparent 46%);
}
body.bk-scope.bracket-page .bracket-hero::after {
    background: radial-gradient(circle at 72% 0%, color-mix(in srgb, var(--bp-spark) 14%, transparent), transparent 48%);
}

body.bk-scope.bracket-page .hero-content::before,
body.bk-scope.bracket-page .hero-content::after {
    content: none;
    display: none;
}
body.bk-scope.bracket-page .bracket-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bp-spark);
    background: color-mix(in srgb, var(--bp-lead) 16%, rgba(0,0,0,.35));
    border: 1px solid color-mix(in srgb, var(--bp-lead) 38%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--bp-lead) 22%, transparent);
}
body.bk-scope.bracket-page .bracket-hero-kicker i { font-size: 0.7rem; }

body.bk-scope.bracket-page .bracket-hero .page-title .title-main {
    font-family: Rajdhani, Inter, sans-serif;
    font-style: italic;
    font-weight: 800;
    letter-spacing: .04em;
    text-shadow: 0 8px 22px rgba(0,0,0,.4);
}
body.bk-scope.bracket-page .bracket-hero .page-title .title-sub {
    color: color-mix(in srgb, var(--bp-spark) 70%, #9ca3af);
}

body.bk-scope.bracket-page .organizer-logo {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--bp-lead) 18%, rgba(8,10,16,.92)), rgba(6,8,12,.94));
    border: 1px solid color-mix(in srgb, var(--bp-lead) 42%, transparent);
    box-shadow:
        0 18px 40px rgba(0,0,0,.4),
        0 0 0 1px color-mix(in srgb, var(--bp-spark) 18%, transparent) inset,
        0 0 28px color-mix(in srgb, var(--bp-lead) 22%, transparent);
}

body.bk-scope.bracket-page .bracket-live-strip {
    max-width: 820px;
    border-color: color-mix(in srgb, var(--bp-lead) 48%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--bp-lead) 22%, rgba(10,12,18,.88)), rgba(8,10,16,.72));
    box-shadow: 0 12px 28px rgba(0,0,0,.28), 0 0 24px color-mix(in srgb, var(--bp-lead) 22%, transparent);
}
body.bk-scope.bracket-page .bracket-live-label { color: var(--bp-spark); }
body.bk-scope.bracket-page .bracket-live-dot {
    background: var(--bp-lead);
    animation: bpLivePulse 1.5s infinite;
}
@keyframes bpLivePulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bp-lead) 80%, transparent); }
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
body.bk-scope.bracket-page .bracket-live-pill {
    border-color: color-mix(in srgb, var(--bp-lead) 42%, transparent);
    background: color-mix(in srgb, var(--bp-lead) 12%, rgba(8,10,16,.7));
    color: var(--bp-spark);
}
body.bk-scope.bracket-page .bracket-live-pill:hover {
    border-color: color-mix(in srgb, var(--bp-spark) 70%, transparent);
    background: color-mix(in srgb, var(--bp-lead) 20%, rgba(12,14,20,.8));
}
body.bk-scope.bracket-page .bracket-live-platform { color: var(--bp-spark); }

body.bk-scope.bracket-page .bracket-watch-live-btn {
    background: linear-gradient(135deg, var(--bp-lead), var(--bp-support));
    border: 1px solid color-mix(in srgb, var(--bp-spark) 55%, transparent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--bp-lead) 38%, transparent);
}
body.bk-scope.bracket-page .bracket-last-updated {
    border-color: color-mix(in srgb, var(--bp-lead) 28%, transparent);
    background: color-mix(in srgb, var(--bp-lead) 10%, rgba(8,10,16,.6));
}

body.bk-scope.bracket-page .bracket-status-legend {
    border-color: color-mix(in srgb, var(--bp-lead) 22%, transparent);
    background: color-mix(in srgb, var(--bp-lead) 8%, rgba(8,10,16,.45));
}
body.bk-scope.bracket-page .bracket-status-legend-label { color: var(--bp-spark); }

/* ── Sponsors ─────────────────────────────────────────────── */
body.bk-scope.bracket-page .bracket-sponsors-bar {
    background: linear-gradient(90deg, color-mix(in srgb, var(--bp-lead) 10%, #0d0d12), #101018 50%, color-mix(in srgb, var(--bp-spark) 8%, #0d0d12));
    border-bottom: 2px solid color-mix(in srgb, var(--bp-lead) 38%, transparent);
}
body.bk-scope.bracket-page .bracket-sponsors-bar::before {
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--bp-lead) 10%, transparent) 0%, transparent 70%);
}
body.bk-scope.bracket-page .bracket-sponsors-label { color: var(--bp-spark); }

/* ── Page width ───────────────────────────────────────────── */
body.bk-scope.bracket-page .bracket-content {
    max-width: 1560px !important;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

/* ── Stage tabs ───────────────────────────────────────────── */
body.bk-scope.bracket-page .stage-tabs { gap: 0.85rem; }
body.bk-scope.bracket-page .stage-tab {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--bp-lead) 12%, rgba(12,14,20,.94)),
            rgba(8,10,14,.92));
    border: 1px solid color-mix(in srgb, var(--bp-lead) 28%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bp-spark) 14%, transparent);
}
body.bk-scope.bracket-page .stage-tab::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--bp-spark), var(--bp-lead));
    opacity: .55;
}
body.bk-scope.bracket-page .stage-tab.active {
    border-color: color-mix(in srgb, var(--bp-spark) 55%, transparent);
    box-shadow:
        0 12px 28px rgba(0,0,0,.28),
        0 0 22px color-mix(in srgb, var(--bp-lead) 28%, transparent);
}
body.bk-scope.bracket-page .stage-tab.active::before { opacity: 1; }
body.bk-scope.bracket-page .stage-tab-number {
    color: color-mix(in srgb, var(--bp-spark) 72%, #9ca3af);
    letter-spacing: .14em;
    font-weight: 800;
}
body.bk-scope.bracket-page .stage-tab strong {
    font-family: Rajdhani, Inter, sans-serif;
    font-style: italic;
    letter-spacing: .04em;
}
body.bk-scope.bracket-page .stage-tab-type {
    display: block;
    margin-top: 0.18rem;
    color: color-mix(in srgb, var(--bp-spark) 55%, #94a3b8);
    font-size: 0.72rem;
}

/* ── Stage panel ──────────────────────────────────────────── */
body.bk-scope.bracket-page .stage-panel {
    background:
        linear-gradient(165deg,
            color-mix(in srgb, var(--bp-lead) 8%, rgba(10,12,18,.94)),
            rgba(6,8,12,.92));
    border: 1px solid color-mix(in srgb, var(--bp-lead) 24%, transparent);
    box-shadow:
        0 18px 40px rgba(0,0,0,.32),
        inset 0 1px 0 color-mix(in srgb, var(--bp-spark) 12%, transparent);
}
body.bk-scope.bracket-page .stage-title {
    font-family: Rajdhani, Inter, sans-serif;
    font-style: italic;
    letter-spacing: .05em;
    text-transform: uppercase;
}
body.bk-scope.bracket-page .stage-type-badge {
    background: color-mix(in srgb, var(--bp-lead) 16%, rgba(0,0,0,.35));
    border-color: color-mix(in srgb, var(--bp-lead) 40%, transparent);
    color: var(--bp-spark);
}
body.bk-scope.bracket-page .stage-status {
    color: color-mix(in srgb, var(--bp-spark) 80%, #e2e8f0);
    border-color: color-mix(in srgb, var(--bp-lead) 32%, transparent);
    background: color-mix(in srgb, var(--bp-lead) 12%, rgba(0,0,0,.35));
}
body.bk-scope.bracket-page .stage-status--completed,
body.bk-scope.bracket-page .stage-status.completed {
    color: #86efac;
    border-color: rgba(16,185,129,.42);
    background: rgba(16,185,129,.12);
}
body.bk-scope.bracket-page .stage-status--in_progress,
body.bk-scope.bracket-page .stage-status.in_progress {
    color: var(--bp-spark);
    border-color: color-mix(in srgb, var(--bp-spark) 50%, transparent);
    background: color-mix(in srgb, var(--bp-lead) 18%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--bp-lead) 28%, transparent);
}

/* ── Stage meta HUD ───────────────────────────────────────── */
body.bk-scope.bracket-page .stage-meta-grid {
    gap: 0.8rem;
}
body.bk-scope.bracket-page .meta-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    position: relative;
    overflow: hidden;
    padding: 0.95rem 1rem 0.95rem 1.05rem;
    border-radius: 14px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--bp-lead) 16%, rgba(10,12,18,.94)),
            rgba(6,8,12,.9));
    border: 1px solid color-mix(in srgb, var(--bp-lead) 32%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--bp-spark) 20%, transparent),
        0 10px 22px rgba(0,0,0,.22);
}
body.bk-scope.bracket-page .meta-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--bp-spark), var(--bp-lead));
}
body.bk-scope.bracket-page .meta-card::after {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 120px;
    height: 80px;
    background: radial-gradient(circle, color-mix(in srgb, var(--bp-spark) 22%, transparent), transparent 70%);
    pointer-events: none;
}
body.bk-scope.bracket-page .meta-icon {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--bp-spark);
    font-size: 1.02rem;
    background: color-mix(in srgb, var(--bp-lead) 20%, rgba(0,0,0,.4));
    box-shadow: 0 0 18px color-mix(in srgb, var(--bp-lead) 30%, transparent);
}
body.bk-scope.bracket-page .meta-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}
body.bk-scope.bracket-page .meta-label {
    margin: 0 0 0.12rem;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--bp-spark) 72%, #9ca3af);
}
body.bk-scope.bracket-page .meta-value {
    font-family: Rajdhani, Inter, sans-serif;
    font-size: 1.28rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: .04em;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 6px 16px rgba(0,0,0,.35);
}

/* ── Inherit group cards (leave Color Studio washes alone) ── */
body.bk-scope.bracket-page[data-ck-cardwash="inherit"] .group-card {
    background:
        linear-gradient(165deg,
            color-mix(in srgb, var(--bp-lead) 10%, rgba(16,18,24,.96)),
            rgba(10,12,16,.97)) !important;
}
body.bk-scope.bracket-page[data-ck-cardedge="inherit"] .group-card {
    border: 1px solid color-mix(in srgb, var(--bp-lead) 26%, transparent) !important;
    border-left: 3px solid color-mix(in srgb, var(--bp-spark) 75%, var(--bp-lead)) !important;
}
body.bk-scope.bracket-page[data-ck-cardglow="inherit"][data-bk-glow="inherit"][data-bk-shadow="inherit"] .group-card {
    box-shadow:
        0 16px 36px rgba(0,0,0,.32),
        0 0 22px color-mix(in srgb, var(--bp-lead) 16%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--bp-spark) 12%, transparent) !important;
}
body.bk-scope.bracket-page .group-name {
    font-family: Rajdhani, Inter, sans-serif;
    font-style: italic;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body.bk-scope.bracket-page .group-analytics-btn,
body.bk-scope.bracket-page .group-history-toggle {
    border-color: color-mix(in srgb, var(--bp-lead) 28%, transparent);
    background: color-mix(in srgb, var(--bp-lead) 10%, rgba(255,255,255,.04));
}
body.bk-scope.bracket-page .group-analytics-btn:hover,
body.bk-scope.bracket-page .group-history-toggle:hover {
    border-color: color-mix(in srgb, var(--bp-spark) 55%, transparent);
    background: color-mix(in srgb, var(--bp-lead) 16%, rgba(255,255,255,.06));
}

/* ── Standings tables (desktop breathing room) ────────────── */
@media (min-width: 721px) {
    body.bk-scope.bracket-page .bracket-content .group-table:not(.group-table--pr) {
        table-layout: auto;
        width: 100%;
    }
    body.bk-scope.bracket-page .bracket-content .group-table:not(.group-table--pr) thead th:nth-child(3) {
        width: auto;
        min-width: 220px;
    }
    body.bk-scope.bracket-page .bracket-content .group-table:not(.group-table--pr) thead th:nth-child(4),
    body.bk-scope.bracket-page .bracket-content .group-table:not(.group-table--pr) thead th:nth-child(5),
    body.bk-scope.bracket-page .bracket-content .group-table:not(.group-table--pr) thead th:nth-child(6) {
        width: 92px;
        min-width: 78px;
        text-align: center;
    }
    body.bk-scope.bracket-page .bracket-content .group-table tbody td:nth-child(4),
    body.bk-scope.bracket-page .bracket-content .group-table tbody td:nth-child(5),
    body.bk-scope.bracket-page .bracket-content .group-table tbody td:nth-child(6),
    body.bk-scope.bracket-page .bracket-content .group-table tbody td:last-child,
    body.bk-scope.bracket-page .bracket-content .cross-cumulative-table .col-num {
        font-family: Rajdhani, Inter, sans-serif;
        font-style: italic;
        font-weight: 700;
        letter-spacing: .04em;
        font-size: 1.05rem;
    }
    body.bk-scope.bracket-page .bracket-content .group-table .team-name,
    body.bk-scope.bracket-page .bracket-content .group-table .team-name-link,
    body.bk-scope.bracket-page .bracket-content .cross-cum-name {
        font-size: 0.98rem;
        font-weight: 700;
    }
    body.bk-scope.bracket-page .bracket-content .group-table thead th,
    body.bk-scope.bracket-page .bracket-content .cross-cumulative-table thead th {
        color: color-mix(in srgb, var(--bp-spark) 70%, #94a3b8);
        letter-spacing: .14em;
    }
}

/* ── Cross-group ──────────────────────────────────────────── */
body.bk-scope.bracket-page .cross-roster-card,
body.bk-scope.bracket-page .cross-cumulative-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--bp-lead) 10%, rgba(10,12,18,.92)),
            rgba(7,8,12,.9));
    border: 1px solid color-mix(in srgb, var(--bp-lead) 26%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bp-spark) 12%, transparent);
}
body.bk-scope.bracket-page .cross-roster-card::before,
body.bk-scope.bracket-page .cross-cumulative-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--bp-spark), var(--bp-lead));
}
body.bk-scope.bracket-page .cross-roster-title,
body.bk-scope.bracket-page .cross-cumulative-title {
    font-family: Rajdhani, Inter, sans-serif;
    font-style: italic;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body.bk-scope.bracket-page .cross-cumulative-title i { color: var(--bp-spark); }
body.bk-scope.bracket-page .cross-cumulative-table .col-pos { color: var(--bp-spark); }

body.bk-scope.bracket-page .pr-hud {
    padding: 0.35rem 0 0.9rem;
}
body.bk-scope.bracket-page .pr-hud__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-size: 0.86rem;
    color: #cbd5e1;
}
body.bk-scope.bracket-page .pr-hud__meta strong { color: var(--bp-spark); }
body.bk-scope.bracket-page .pr-hud__closed {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    background: rgba(16,185,129,.18);
    color: #bbf7d0;
    border: 1px solid rgba(16,185,129,.4);
    font-weight: 700;
    font-size: 0.75rem;
}
body.bk-scope.bracket-page .pr-hud__track {
    margin-top: 0.55rem;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bp-lead) 10%, rgba(255,255,255,.06));
    border: 1px solid color-mix(in srgb, var(--bp-lead) 22%, transparent);
}
body.bk-scope.bracket-page .pr-hud__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--bp-lead), var(--bp-spark));
    transition: width 0.4s ease;
}

/* ── Clash Squad ──────────────────────────────────────────── */
body.bk-scope.bracket-page .clash-basic-title,
body.bk-scope.bracket-page .clash-basic-round-title,
body.bk-scope.bracket-page .clash-basic-label {
    font-family: Rajdhani, Inter, sans-serif;
    font-style: italic;
    letter-spacing: .04em;
}
body.bk-scope.bracket-page .clash-basic-round {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--bp-lead) 10%, rgba(14,20,31,.94)),
            rgba(8,12,18,.94));
    border-color: color-mix(in srgb, var(--bp-lead) 28%, transparent);
}
body.bk-scope.bracket-page[data-ck-matchwash="inherit"][data-bk-matchcard="inherit"] .clash-basic-match {
    background: color-mix(in srgb, var(--bp-lead) 8%, rgba(8,12,18,.92));
    border-color: color-mix(in srgb, var(--bp-lead) 28%, #273447);
}
body.bk-scope.bracket-page .clash-basic-match:hover {
    border-color: color-mix(in srgb, var(--bp-spark) 48%, transparent);
}
body.bk-scope.bracket-page .clash-basic-score,
body.bk-scope.bracket-page .clash-basic-score-chip {
    font-family: Rajdhani, Inter, sans-serif;
    font-style: italic;
    font-weight: 700;
    color: var(--bp-spark);
    border-color: color-mix(in srgb, var(--bp-spark) 40%, transparent);
}
body.bk-scope.bracket-page .clash-basic-team.winner {
    border-color: color-mix(in srgb, var(--bp-spark) 45%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--bp-lead) 22%, transparent);
}
body.bk-scope.bracket-page .clash-final-card,
body.bk-scope.bracket-page .clash-bronze-card {
    background: color-mix(in srgb, var(--bp-lead) 10%, rgba(15,23,42,.78));
    border-color: color-mix(in srgb, var(--bp-spark) 42%, transparent);
}
body.bk-scope.bracket-page .clash-final-label,
body.bk-scope.bracket-page .clash-bronze-label { color: var(--bp-spark); }

/* ── Trophies + details ───────────────────────────────────── */
body.bk-scope.bracket-page .bracket-bottom-title {
    font-family: Rajdhani, Inter, sans-serif;
    font-style: italic;
    letter-spacing: .08em;
    color: var(--bp-spark);
}
body.bk-scope.bracket-page .bracket-details-card,
body.bk-scope.bracket-page .br-trophy-card {
    background:
        linear-gradient(115deg,
            color-mix(in srgb, var(--bp-lead) 10%, rgba(10,12,18,.92)),
            rgba(7,8,12,.9));
    border: 1px solid color-mix(in srgb, var(--bp-lead) 24%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bp-spark) 12%, transparent);
}
body.bk-scope.bracket-page .br-trophy-card.mvp {
    background: linear-gradient(110deg, rgba(245,197,66,.16), rgba(12,10,4,.9));
    border-color: rgba(245,197,66,.38);
}
body.bk-scope.bracket-page .br-trophy-title {
    font-family: Rajdhani, Inter, sans-serif;
    font-style: italic;
    letter-spacing: .05em;
}
body.bk-scope.bracket-page .br-trophy-spot {
    border-style: solid;
    border-color: color-mix(in srgb, var(--bp-spark) 40%, transparent);
    background: color-mix(in srgb, var(--bp-lead) 16%, rgba(2,6,23,.7));
    color: var(--bp-spark);
    box-shadow: 0 0 20px color-mix(in srgb, var(--bp-lead) 22%, transparent);
}
body.bk-scope.bracket-page .br-trophy-spot.mvp {
    background: radial-gradient(circle at 32% 28%, #ffe9a3, #d4a017 58%, #8a6a10);
    color: #1a1204;
    border-color: rgba(245,197,66,.55);
}
body.bk-scope.bracket-page .bracket-detail-icon {
    background: color-mix(in srgb, var(--bp-lead) 18%, rgba(0,0,0,.4));
    border-color: color-mix(in srgb, var(--bp-lead) 40%, transparent);
    color: var(--bp-spark);
}
body.bk-scope.bracket-page .bracket-detail-value {
    font-family: Rajdhani, Inter, sans-serif;
    font-style: italic;
    font-weight: 700;
    color: #fff;
}
body.bk-scope.bracket-page .bracket-detail-value--prize { color: var(--bp-spark); }

/* ── Pickers + history ────────────────────────────────────── */
body.bk-scope.bracket-page .mobile-group-picker {
    border-color: color-mix(in srgb, var(--bp-lead) 28%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--bp-lead) 10%, rgba(26,26,36,.9)), rgba(12,12,18,.92));
}
body.bk-scope.bracket-page .mobile-group-picker label { color: var(--bp-spark); }
body.bk-scope.bracket-page .history-modal-card {
    border: 1px solid color-mix(in srgb, var(--bp-lead) 28%, transparent);
    box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 28px color-mix(in srgb, var(--bp-lead) 18%, transparent);
}

/* ── Group insight HUD (under standings) ─────────────────── */
body.bk-scope.bracket-page .group-insights {
    gap: 0.7rem;
    margin-top: 0.85rem;
}
body.bk-scope.bracket-page .insight-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    position: relative;
    overflow: hidden;
    padding: 0.85rem 0.85rem 0.85rem 0.95rem;
    border-radius: 14px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--bp-lead) 16%, rgba(10,12,18,.94)),
            rgba(6,8,12,.9));
    border: 1px solid color-mix(in srgb, var(--bp-lead) 32%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--bp-spark) 20%, transparent),
        0 10px 22px rgba(0,0,0,.22);
}
body.bk-scope.bracket-page .insight-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--bp-spark), var(--bp-lead));
}
body.bk-scope.bracket-page .insight-card::after {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 110px;
    height: 72px;
    background: radial-gradient(circle, color-mix(in srgb, var(--bp-spark) 22%, transparent), transparent 70%);
    pointer-events: none;
}
body.bk-scope.bracket-page .insight-icon {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--bp-spark);
    font-size: 0.95rem;
    background: color-mix(in srgb, var(--bp-lead) 20%, rgba(0,0,0,.4));
    box-shadow: 0 0 16px color-mix(in srgb, var(--bp-lead) 28%, transparent);
}
body.bk-scope.bracket-page .insight-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
}
body.bk-scope.bracket-page .insight-label {
    margin: 0 0 0.12rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--bp-spark) 72%, #9ca3af);
}
body.bk-scope.bracket-page .insight-value {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-family: Rajdhani, Inter, sans-serif;
    font-size: 1.18rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: .04em;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 6px 16px rgba(0,0,0,.35);
}
body.bk-scope.bracket-page .insight-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.bk-scope.bracket-page .insight-sub {
    margin-top: 0.12rem;
    font-family: Rajdhani, Inter, sans-serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--bp-spark);
}
body.bk-scope.bracket-page .insight-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--bp-spark) 40%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--bp-lead) 22%, transparent);
    margin-right: 0;
}
body.bk-scope.bracket-page .map-thumb {
    width: 44px;
    height: 28px;
    border-radius: 8px;
    margin-right: 0;
    border-color: color-mix(in srgb, var(--bp-spark) 40%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--bp-lead) 22%, transparent);
}
body.bk-scope.bracket-page .match-history {
    border-color: color-mix(in srgb, var(--bp-lead) 26%, transparent);
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--bp-lead) 14%, transparent), transparent 42%),
        linear-gradient(165deg,
            color-mix(in srgb, var(--bp-lead) 8%, rgba(10,12,20,.94)),
            rgba(6,8,12,.94));
}

@media (max-width: 720px) {
    body.bk-scope.bracket-page .meta-card { padding: 0.72rem 0.75rem 0.72rem 0.85rem; gap: 0.55rem; }
    body.bk-scope.bracket-page .meta-icon { width: 36px; height: 36px; font-size: 0.88rem; }
    body.bk-scope.bracket-page .meta-value { font-size: 1.02rem; }
    body.bk-scope.bracket-page .stage-tab { min-width: 0; }
    body.bk-scope.bracket-page .insight-card { padding: 0.62rem 0.55rem 0.62rem 0.7rem; gap: 0.45rem; }
    body.bk-scope.bracket-page .insight-icon { width: 32px; height: 32px; font-size: 0.8rem; border-radius: 10px; }
    body.bk-scope.bracket-page .insight-value { font-size: 0.98rem; }
    body.bk-scope.bracket-page .insight-label { font-size: 0.54rem; }
    body.bk-scope.bracket-page .insight-avatar { width: 22px; height: 22px; }
    body.bk-scope.bracket-page .map-thumb { width: 36px; height: 22px; }
}