.bracket-root{--line:rgba(124,58,237,.32);--line-strong:rgba(124,58,237,.6);--slot-h:60px;--cover-sz:38px;--name-fs:10px;--gap-y:5px;--gap-x:14px;display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"left final right";gap:var(--gap-x);align-items:stretch;padding:6px 4px}.bracket-root[data-size="8"]{--slot-h:86px;--cover-sz:56px;--name-fs:12px;--gap-y:8px;--gap-x:20px}.bracket-root[data-size="16"]{--slot-h:60px;--cover-sz:38px;--name-fs:10px;--gap-y:4px;--gap-x:12px}.bracket-root[data-size="32"]{--slot-h:40px;--cover-sz:22px;--name-fs:9px;--gap-y:2px;--gap-x:6px}.bracket-root[data-size="32"] .bracket-slot{padding:3px 2px 1px;gap:2px}.bracket-root[data-size="32"] .bracket-vote-num,.bracket-root[data-size="32"] .bracket-voted-mark{width:11px;height:11px;font-size:7px;padding:0}.bracket-root[data-size="32"] .bracket-voted-mark:after{width:6px;height:6px}.bracket-half{display:flex}.bracket-half.left{grid-area:left;flex-direction:row}.bracket-half.right{grid-area:right;flex-direction:row-reverse}.bracket-final{grid-area:final;display:flex;align-items:stretch;justify-content:center}.bracket-final-stack{display:grid;grid-template-rows:1fr auto 1fr;align-items:center;justify-items:center;width:100%;max-width:220px;height:100%}.bracket-round-col{display:flex;flex-direction:column;justify-content:space-around;flex:1;gap:var(--gap-y);padding:2px 0;min-width:0}.bracket-match{position:relative;display:flex;flex-direction:column;width:100%;max-width:calc(var(--slot-h) * .85);margin:0 auto;gap:var(--gap-y)}.bracket-root[data-size="32"] .bracket-match{max-width:calc(var(--slot-h) * 1.05)}.bracket-match.is-final{max-width:calc(var(--slot-h) * 1.1)}.bracket-slot,.bracket-slots-stack{display:flex;flex-direction:column;gap:3px}.bracket-slot{position:relative;align-items:center;width:100%;height:var(--slot-h);padding:4px 4px 2px;background:rgba(124,58,237,.04);border:1px solid var(--color-border);border-radius:var(--radius-3xl);color:var(--color-foreground);font-size:var(--name-fs);line-height:1.1;transition:border-color .2s,background .2s;overflow:visible}.bracket-slot-cover{flex:0 0 auto;width:var(--cover-sz);height:var(--cover-sz);border-radius:var(--radius-2xl);background-size:cover;background-position:50%;background-color:var(--color-border);box-shadow:0 1px 3px rgba(0,0,0,.4);transition:filter .3s,opacity .3s}.bracket-slot-name{width:100%;font-weight:600;letter-spacing:-.01em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-foreground);transition:color .3s,opacity .3s}.bracket-vote-num{right:2px;font-size:9px;font-weight:700;color:var(--color-accent-amber,#f59e0b);background:var(--color-card);padding:0 4px;min-width:14px;border-radius:999px;border:1px solid color-mix(in oklab,var(--color-accent-amber,#f59e0b) 40%,transparent);line-height:1}.bracket-vote-num,.bracket-voted-mark{position:absolute;top:2px;height:14px;display:flex;align-items:center;justify-content:center}.bracket-voted-mark{left:2px;width:14px;border-radius:999px;background:var(--color-primary);font-size:8px;color:#fff;box-shadow:0 0 0 1px var(--color-card),0 2px 4px rgba(0,0,0,.3)}.bracket-voted-mark:after{content:"";width:7px;height:7px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41Z'/%3E%3C/svg%3E") center/contain no-repeat}.bracket-match.is-pending .bracket-slot{opacity:.5}.bracket-match.is-pending .bracket-slot-cover{filter:grayscale(.8)}.bracket-match.is-open .bracket-slot{border-color:color-mix(in oklab,var(--color-primary) 35%,transparent);background:color-mix(in oklab,var(--color-primary) 8%,transparent)}.bracket-slot.is-winner{border-color:var(--color-accent-green,#10b981);background:color-mix(in oklab,var(--color-accent-green,#10b981) 12%,transparent);box-shadow:0 0 0 1px color-mix(in oklab,var(--color-accent-green,#10b981) 25%,transparent),0 4px 12px -4px color-mix(in oklab,var(--color-accent-green,#10b981) 40%,transparent)}.bracket-slot.is-winner .bracket-vote-num{color:var(--color-accent-green,#10b981);border-color:color-mix(in oklab,var(--color-accent-green,#10b981) 40%,transparent)}.bracket-slot.is-loser{border-color:color-mix(in oklab,var(--color-accent-red,#ef4444) 25%,transparent);background:color-mix(in oklab,var(--color-accent-red,#ef4444) 4%,transparent)}.bracket-slot.is-loser .bracket-slot-cover{filter:grayscale(.85);opacity:.4}.bracket-slot.is-loser .bracket-slot-name{color:var(--color-muted);opacity:.65;text-decoration:line-through}.bracket-slot.is-loser .bracket-vote-num{color:var(--color-accent-red,#ef4444);border-color:color-mix(in oklab,var(--color-accent-red,#ef4444) 40%,transparent);opacity:.85}.bracket-x{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;opacity:0}.bracket-slot.is-loser .bracket-x{opacity:1}.bracket-x line{stroke:var(--color-accent-red,#ef4444);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 4px color-mix(in oklab,var(--color-accent-red,#ef4444) 60%,transparent));stroke-dasharray:200;stroke-dashoffset:200}.bracket-slot.is-loser .bracket-x line:first-child{animation:bracketDrawX .38s ease-out forwards}.bracket-slot.is-loser .bracket-x line:nth-child(2){animation:bracketDrawX .38s ease-out .14s forwards}@keyframes bracketDrawX{to{stroke-dashoffset:0}}.bracket-slot.is-empty{background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--color-border) 70%,transparent) 0 6px,color-mix(in oklab,var(--color-card) 70%,transparent) 6px 12px);border-style:dashed;color:var(--color-muted)}.bracket-half.left .bracket-round-col:not(.is-semis) .bracket-match.is-pair-top:not(.is-final):after{content:"";position:absolute;top:50%;right:calc(-1 * var(--gap-x) / 2);width:calc(var(--gap-x) / 2);height:calc(50% + var(--gap-y) + 1px);border-top:1px solid var(--line);border-right:1px solid var(--line);border-top-right-radius:6px;pointer-events:none}.bracket-half.left .bracket-round-col:not(.is-semis) .bracket-match.is-pair-bot:not(.is-final):after{content:"";position:absolute;bottom:50%;right:calc(-1 * var(--gap-x) / 2);width:calc(var(--gap-x) / 2);height:calc(50% + var(--gap-y) + 1px);border-bottom:1px solid var(--line);border-right:1px solid var(--line);border-bottom-right-radius:6px;pointer-events:none}.bracket-half.left .bracket-round-col.is-semis .bracket-match:after{content:"";position:absolute;top:50%;right:calc(-1 * var(--gap-x));width:var(--gap-x);height:1px;background:var(--line);pointer-events:none}.bracket-half.left .bracket-round-col:not(.is-round-0) .bracket-match:before{content:"";position:absolute;top:50%;left:calc(-1 * var(--gap-x) / 2);width:calc(var(--gap-x) / 2);height:1px;background:var(--line);pointer-events:none}.bracket-half.right .bracket-round-col:not(.is-semis) .bracket-match.is-pair-top:not(.is-final):after{content:"";position:absolute;top:50%;left:calc(-1 * var(--gap-x) / 2);width:calc(var(--gap-x) / 2);height:calc(50% + var(--gap-y) + 1px);border-top:1px solid var(--line);border-left:1px solid var(--line);border-top-left-radius:6px;pointer-events:none}.bracket-half.right .bracket-round-col:not(.is-semis) .bracket-match.is-pair-bot:not(.is-final):after{content:"";position:absolute;bottom:50%;left:calc(-1 * var(--gap-x) / 2);width:calc(var(--gap-x) / 2);height:calc(50% + var(--gap-y) + 1px);border-bottom:1px solid var(--line);border-left:1px solid var(--line);border-bottom-left-radius:6px;pointer-events:none}.bracket-half.right .bracket-round-col.is-semis .bracket-match:after{content:"";position:absolute;top:50%;left:calc(-1 * var(--gap-x));width:var(--gap-x);height:1px;background:var(--line);pointer-events:none}.bracket-half.right .bracket-round-col:not(.is-round-0) .bracket-match:before{content:"";position:absolute;top:50%;right:calc(-1 * var(--gap-x) / 2);width:calc(var(--gap-x) / 2);height:1px;background:var(--line);pointer-events:none}.bracket-match.is-closed:after,.bracket-match.is-closed:before{border-color:var(--line-strong)!important;background:var(--line-strong)}.bracket-match.is-final .bracket-slot{background:linear-gradient(180deg,color-mix(in oklab,var(--color-primary) 12%,transparent),color-mix(in oklab,var(--color-primary) 3%,transparent));border-color:color-mix(in oklab,var(--color-primary) 40%,transparent)}.bracket-match.is-final .bracket-slot.is-winner{background:linear-gradient(180deg,color-mix(in oklab,var(--color-accent-green,#10b981) 22%,transparent),color-mix(in oklab,var(--color-accent-green,#10b981) 5%,transparent))}.bracket-final-label{text-align:center;font-size:9px;font-weight:700;letter-spacing:.3em;color:var(--color-primary-light,#a78bfa);text-transform:uppercase}.bracket-final-stack>.bracket-champion-display{align-self:end;margin-bottom:10px}.bracket-final-stack>.bracket-match.is-final{align-self:center}.bracket-final-stack>.bracket-final-label{align-self:start;margin-top:8px}.bracket-champion-display{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 16px;border-radius:var(--radius-3xl);border:1px dashed var(--color-border);background:color-mix(in oklab,var(--color-primary) 5%,transparent);width:100%;max-width:200px;opacity:.55;transition:opacity .4s,border-color .4s,border-style .4s,box-shadow .4s,background .4s}.bracket-champion-display-label{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--color-primary-light,#a78bfa);font-weight:700}.bracket-champion-display-cover{position:relative;width:130px;height:130px;border-radius:var(--radius-3xl);background:var(--color-background);background-size:cover;background-position:50%;box-shadow:0 6px 16px -6px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}.bracket-champion-display-placeholder{font-size:48px;font-weight:800;color:var(--color-muted);opacity:.5}.bracket-champion-display-name{font-size:13px;font-weight:700;text-align:center;color:var(--color-foreground);letter-spacing:-.01em;min-height:1.2em;max-width:180px;line-height:1.2}.bracket-champion-display.is-decided{opacity:1;border-style:solid;border-color:var(--color-cta);background:linear-gradient(180deg,color-mix(in oklab,var(--color-cta) 18%,transparent),color-mix(in oklab,var(--color-primary) 8%,transparent));box-shadow:0 16px 36px -10px color-mix(in oklab,var(--color-cta) 40%,transparent),0 0 0 1px color-mix(in oklab,var(--color-cta) 30%,transparent)}.bracket-champion-display.is-decided .bracket-champion-display-cover{box-shadow:0 0 0 3px color-mix(in oklab,var(--color-cta) 40%,transparent),0 12px 28px -6px rgba(0,0,0,.5)}.bracket-champion-display.is-decided .bracket-champion-display-label{color:var(--color-cta)}@media (max-width:640px){.bracket-root[data-size="8"]{--slot-h:64px;--cover-sz:42px;--name-fs:10px;--gap-y:6px;--gap-x:12px}.bracket-root[data-size="16"]{--slot-h:44px;--cover-sz:28px;--name-fs:8px;--gap-y:3px;--gap-x:8px}.bracket-root[data-size="32"]{--slot-h:28px;--cover-sz:18px;--name-fs:0;--gap-y:1px;--gap-x:4px}.bracket-root[data-size="32"] .bracket-slot{padding:2px 1px;gap:1px}.bracket-root[data-size="32"] .bracket-slot-name{display:none}.bracket-root[data-size="32"] .bracket-vote-num,.bracket-root[data-size="32"] .bracket-voted-mark{width:9px;height:9px;font-size:6px}.bracket-root[data-size="32"] .bracket-voted-mark:after{width:5px;height:5px}.bracket-final-stack{max-width:140px}.bracket-champion-display{max-width:130px;padding:8px 10px;gap:6px}.bracket-champion-display-cover{width:80px;height:80px}.bracket-champion-display-placeholder{font-size:32px}.bracket-champion-display-name{font-size:11px;max-width:120px}.bracket-final-label{font-size:8px;letter-spacing:.2em}}@media (max-width:420px){.bracket-root[data-size="16"] .bracket-slot-name{display:none}.bracket-root[data-size="16"]{--slot-h:36px;--cover-sz:24px;--gap-x:6px}.bracket-root[data-size="16"] .bracket-slot{padding:3px 2px;gap:1px}.bracket-root[data-size="32"]{--slot-h:22px;--cover-sz:14px;--gap-x:3px}.bracket-root[data-size="32"] .bracket-vote-num,.bracket-root[data-size="32"] .bracket-voted-mark{width:8px;height:8px;font-size:5px}.bracket-final-stack{max-width:116px}.bracket-champion-display-cover{width:64px;height:64px}.bracket-champion-display-name{font-size:10px}}