/* SportOS 3.14.0 — brackets: a league's playoffs or a cup, rounds as columns joined by lines, ending in the trophy.
   Built on the site's theme tokens, light and dark. On a phone the bracket scrolls sideways. */
.bk-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 2px 14px;scroll-snap-type:x proximity;margin:6px 0 18px}
.bk{--bk-line:color-mix(in srgb,var(--text3) 55%,transparent);--bk-hot:var(--accent,var(--primary));--bk-gap:30px;
  display:grid;grid-template-columns:repeat(var(--rounds),minmax(232px,1fr)) minmax(190px,.8fr);column-gap:var(--bk-gap);row-gap:16px;min-width:min-content}
.bk-col{grid-row:1;display:flex;flex-direction:column;min-width:0;scroll-snap-align:start}
.bk-champ{grid-column:calc(var(--rounds) + 1)}
.bk-third{grid-row:2;max-width:320px}
.bk-label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-text);margin:0 0 10px;text-align:center}
.bk-body{flex:1;display:flex;flex-direction:column}
.bk-pair{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:14px;position:relative;padding:7px 0}
.bk-col:not(.bk-final):not(.bk-champ) .bk-pair::after{content:'';position:absolute;right:calc(var(--bk-gap) / -2);top:25%;bottom:25%;border-right:2px solid var(--bk-line)}
.bk-col:not(.bk-final):not(.bk-champ) .bk-pair:has(> .bk-tie:only-child)::after{display:none}

/* A tie */
.bk-tie{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px 10px 9px;box-shadow:0 6px 18px -12px rgba(0,0,0,.45);transition:border-color .25s,transform .25s}
.bk-tie:hover{border-color:color-mix(in srgb,var(--bk-hot) 55%,var(--border))}
.bk-col:not(.bk-final):not(.bk-champ) .bk-tie::after{content:'';position:absolute;right:calc(var(--bk-gap) / -2 - 1px);top:50%;width:calc(var(--bk-gap) / 2);border-top:2px solid var(--bk-line)}
.bk-col + .bk-col:not(.bk-champ) .bk-tie::before{content:'';position:absolute;left:calc(var(--bk-gap) / -2 - 1px);top:50%;width:calc(var(--bk-gap) / 2);border-top:2px solid var(--bk-line)}
.bk-final .bk-tie{border:2px solid color-mix(in srgb,var(--bk-hot) 70%,var(--border));box-shadow:0 10px 30px -14px var(--bk-hot)}
.bk-head{display:flex;justify-content:space-between;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.bk-side{display:grid;grid-template-columns:18px 26px 1fr auto;align-items:center;gap:7px;padding:4px 0;font-size:14px;min-width:0}
.bk-side + .bk-side{border-top:1px dashed var(--border)}
.bk-seed{font-family:var(--font-mono);font-size:11px;color:var(--text3);text-align:right}
.bk-logo img,.bk-logo i{width:26px;height:26px;border-radius:50%;object-fit:contain;background:#fff;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800;color:#111;border:1px solid var(--border)}
.bk-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.bk-nm a{color:inherit;text-decoration:none}.bk-nm a:hover{color:var(--primary-text)}
.bk-side b{font-family:var(--font-display);font-size:18px;min-width:22px;text-align:right;font-variant-numeric:tabular-nums}
.bk-won .bk-nm,.bk-won b{color:var(--text);font-weight:800}
.bk-won b{color:var(--bk-hot)}
.bk-won .bk-seed{color:var(--bk-hot)}
.bk-lost{opacity:.55}
.bk-tbd .bk-nm{font-weight:500;font-style:italic;color:var(--text3)}
.bk-bye{padding-bottom:8px}.bk-bye .bk-side{opacity:.9}
.bk-games{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.bk-games a,.bk-games span{font-size:11px;font-family:var(--font-mono);padding:3px 7px;border-radius:999px;background:var(--surface2);color:var(--text2);text-decoration:none;border:1px solid var(--border)}
.bk-games a:hover{color:var(--text);border-color:var(--bk-hot)}

/* The trophy */
.bk-champ .bk-body{justify-content:center;align-items:center}
.bk-cup{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 12px 16px;border-radius:20px;width:100%;
  background:radial-gradient(80% 60% at 50% 35%,color-mix(in srgb,var(--bk-hot) 22%,transparent),transparent 70%)}
.bk-cup::before{content:'';position:absolute;left:calc(var(--bk-gap) * -1 - 1px);top:50%;width:var(--bk-gap);border-top:2px solid var(--bk-line)}
.bk-trophy{width:min(150px,80%);height:auto;max-height:190px;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.35));animation:bkFloat 5s ease-in-out infinite}
.bk-crowned .bk-trophy{filter:drop-shadow(0 0 26px color-mix(in srgb,var(--bk-hot) 70%,transparent)) drop-shadow(0 12px 22px rgba(0,0,0,.35))}
.bk-cup b{font-family:var(--font-display);font-size:19px;line-height:1.15}
.bk-cup small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3)}
.bk-champ-logo{width:44px;height:44px;border-radius:50%;object-fit:contain;background:#fff;border:2px solid var(--bk-hot);margin-top:-4px}
@keyframes bkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.bk-trophy{animation:none}}

/* A trophy beside a competition's name */
.cmp-hero{display:flex;align-items:center;gap:20px;margin:0 0 16px}
.cmp-hero img{width:86px;height:104px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.3))}
.cmp-champ{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;margin:0 0 16px;border:1px solid color-mix(in srgb,var(--accent,var(--primary)) 50%,var(--border));
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent,var(--primary)) 18%,var(--surface)),var(--surface))}
.cmp-champ img{width:40px;height:40px;object-fit:contain;border-radius:50%;background:#fff}
.cmp-champ b{font-family:var(--font-display);font-size:18px}.cmp-champ small{display:block;color:var(--text3);font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* The playoff line in a table */
tr.po-cut td,tr.po-cut th{border-bottom:2px dashed var(--accent,var(--primary))!important}
.po-key{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);margin:8px 0 18px}
.po-key i{display:inline-block;width:22px;border-top:2px dashed var(--accent,var(--primary))}
.po-seed{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;font-size:10px;font-weight:800;background:color-mix(in srgb,var(--accent,var(--primary)) 22%,transparent);color:var(--text)}

@media (max-width:640px){
  .bk{--bk-gap:22px;grid-template-columns:repeat(var(--rounds),minmax(212px,1fr)) minmax(170px,.8fr)}
  .cmp-hero{gap:12px}.cmp-hero img{width:60px;height:74px}
}