.bracket-view { --br-blue:#40c9ff; --br-gold:#ffda52; color:#eaf3ff; background:#070d19; border:1px solid #294568; border-radius:14px; overflow:hidden; margin:22px 0; isolation:isolate; min-width:0; max-width:100%; }
.bracket-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 18px; background:#101d30; border-bottom:1px solid #294568; }
.bracket-toolbar h2 { margin:0 auto 0 0; font:800 23px/1.2 "Jost",system-ui,sans-serif; }
.bracket-toolbar button,.bracket-toolbar a { border:1px solid #35557c; border-radius:7px; background:#152b45; color:#eff6ff; padding:8px 12px; font:700 14px/1.2 system-ui,sans-serif; text-decoration:none; cursor:pointer; }
.bracket-toolbar button:hover,.bracket-toolbar a:hover { background:#234e72; border-color:#40c9ff; }
.bracket-toolbar :is(button,a):focus-visible,.bracket-viewport:focus-visible { outline:3px solid #ffda52; outline-offset:-3px; }
.bracket-zoom { min-width:45px; font:700 13px system-ui,sans-serif; text-align:center; }
.bracket-status { min-height:24px; padding:8px 18px; margin:0; color:#b5cbe3; font:500 13px/1.5 system-ui,sans-serif; background:#0c1728; }
.bracket-viewport { height:min(72vh,850px); min-height:360px; min-width:0; max-width:100%; overflow:auto; position:relative; overscroll-behavior:contain; scrollbar-color:#3c719c #0c1728; cursor:grab; touch-action:pan-x pan-y; background:radial-gradient(ellipse at top left,#14243c,#070d19 60%); }
.bracket-viewport.dragging { cursor:grabbing; user-select:none; }
.bracket-space { position:relative; overflow:hidden; contain:layout paint; }
.bracket-canvas { position:absolute; left:0; top:0; transform-origin:0 0; }
.bracket-wires { position:absolute; left:0; top:0; pointer-events:none; fill:none; stroke:#42628b; stroke-width:2; }
.bracket-match { position:absolute; box-sizing:border-box; border:1px solid #2d486a; background:#111f34; border-radius:8px; box-shadow:0 4px 10px #0005; }
.bracket-match>header { position:absolute; left:1px; bottom:calc(100% + 5px); width:100%; display:flex; align-items:center; gap:8px; color:#9dbce1; font:600 12px/1.2 system-ui,sans-serif; white-space:nowrap; }
.bracket-match>header span { overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.bracket-match>header b { flex:none; color:#bad9f5; padding-right:3px; }
.bracket-player { height:33px; display:grid; grid-template-columns:16px minmax(0,1fr) 28px; gap:7px; padding:0 10px; align-items:center; color:#c1d2e8; font:500 17px/1.2 "Jost",system-ui,sans-serif; }
.bracket-player+.bracket-player { border-top:1px solid #263a54; }
.bracket-avatar { position:relative; display:block; width:16px; height:16px; overflow:hidden; border-radius:50%; background:#264362; }
.bracket-avatar::before { content:attr(data-initial); position:absolute; inset:0; display:grid; place-items:center; font:700 10px/1 system-ui,sans-serif; color:#eaf3ff; }
.bracket-avatar img { position:relative; display:block; width:16px; height:16px; object-fit:cover; border-radius:50%; }
.bracket-player-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bracket-player b { text-align:right; font-size:20px; }
.bracket-player.winner { color:#fff; background:#ffda5211; font-weight:800; }
.bracket-player.winner b { color:#ffda52; }
.bracket-match.live { border:2px solid #40c9ff; box-shadow:0 0 0 3px #40c9ff12; }
.bracket-match.live>header b { color:#40c9ff; }
.bracket-match.final { border-color:#cda83e; }
.bracket-match.selected { border-color:#ffda52; box-shadow:0 0 0 2px #ffda5240; }
.bracket-wires path.selected { stroke:#ffda52; stroke-width:3; }
.bracket-match.bye { opacity:.6; }
.bracket-fullscreen { overflow:hidden!important; }
.bracket-view.is-fullscreen { position:fixed; inset:0; z-index:10000; margin:0; border-radius:0; display:flex; flex-direction:column; }
.bracket-view.is-fullscreen .bracket-viewport { height:auto; min-height:0; flex:1; }
.bracket-obs-body { margin:0; background:#070d19; overflow:hidden; font-family:system-ui,sans-serif; }
.bracket-obs-body .bracket-view { margin:0; border:0; border-radius:0; height:100vh; display:flex; flex-direction:column; }
.bracket-obs-body .bracket-toolbar { padding:22px 32px; border-bottom:3px solid #40c9ff; }
.bracket-obs-body .bracket-toolbar h2 { font-size:34px; }
.bracket-obs-body .bracket-toolbar :is(button,a,.bracket-zoom) { display:none; }
.bracket-obs-body .bracket-status { font-size:20px; min-height:30px; padding:12px 32px; }
.bracket-obs-body .bracket-viewport { flex:1; min-height:0; height:auto; overflow:hidden; }
@media(max-width:700px) { .bracket-toolbar { padding:12px; } .bracket-toolbar h2 { flex-basis:100%; font-size:21px; } .bracket-toolbar button,.bracket-toolbar a { padding:8px; font-size:12px; } .bracket-viewport { height:65vh; min-height:320px; } }