/* ═══════════════════════════════════════════════════════════════════
   BRACKET TREE — knockout tree for brackets.html
   Same principle as the Fan Zone widget tree in landingb.html:
   rounds are flex columns, `justify-content:space-around` puts each
   later round's cards on the midpoints of the pair that feeds them,
   and the connectors are an SVG overlay measured after paint, so they
   hold at any width without a single hardcoded offset.
   ═══════════════════════════════════════════════════════════════════ */

.bt-root{
  /* neutral scaffolding, derived from the page theme so any client palette
     stays legible — never hardcode a colour below, read these. */
  --bt-ink: var(--fourth-color, #eef4fb);
  --bt-muted: var(--fifth-color, rgba(238,244,251,.55));
  --bt-accent: var(--primary-color, #00d4ff);
  --bt-fs: clamp(11px, var(--secondary-font-size, 13px), 16px);
  width:100%;
  font-family: var(--secondary-font-family, var(--font-family, inherit));
  color: var(--bt-ink);
}

/* ── Category chips ───────────────────────────────────────────────── */
.bt-chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;padding:0 10px 10px}
.bt-chip{flex:0 0 auto;padding:4px 11px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:calc(var(--bt-fs) * .846);
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--bt-muted);background:color-mix(in srgb,var(--bt-ink) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--bt-ink) 10%,transparent);transition:all .2s}
.bt-chip:hover{color:var(--bt-ink)}
.bt-chip.active{color:var(--sixth-color,#000);border-color:transparent;
  background:color-mix(in srgb,var(--bt-accent) 88%,transparent)}

/* ── Tree ─────────────────────────────────────────────────────────── */
.bt-wrap{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding:10px 10px 12px;
  -webkit-mask:linear-gradient(90deg,#000 0,#000 calc(100% - 16px),transparent 100%)}
.bt-wrap::-webkit-scrollbar{display:none}
.bt-tree{position:relative;display:flex;gap:26px;min-width:min-content}
/* display:block is load-bearing: landing.min.css carries a blanket
   `svg{display:none}` and every page that links it inherits the ban, so
   the connector layer was laid out at 0x0 and painted nothing even once
   the paths were in it. */
.bt-lines{position:absolute;inset:0;pointer-events:none;overflow:visible;display:block}
.bt-lines path{fill:none;stroke:color-mix(in srgb,var(--bt-ink) 20%,transparent);stroke-width:1.5}

.bt-round{display:flex;flex-direction:column;flex:0 0 132px}
.bt-head{font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bt-muted);text-align:center;
  padding-bottom:8px;margin-bottom:2px;
  border-bottom:1px solid color-mix(in srgb,var(--bt-ink) 10%,transparent)}
/* the column that holds the cards — space-around is what makes the rounds
   line up, so nothing else may set its distribution */
.bt-col{flex:1;display:flex;flex-direction:column;justify-content:space-around}

.bt-match{position:relative;border-radius:8px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--bt-ink) 10%,transparent);
  background:color-mix(in srgb,var(--bt-ink) 5%,transparent);transition:all .2s}
.bt-match:hover{border-color:color-mix(in srgb,var(--bt-accent) 50%,transparent)}
.bt-match.pending{background:transparent}
.bt-when{font-weight:700;letter-spacing:.06em;
  color:var(--bt-accent);text-align:center;padding:4px 0 3px;
  border-bottom:1px solid color-mix(in srgb,var(--bt-ink) 8%,transparent)}
.bt-side{display:flex;align-items:center;gap:6px;padding:5px 7px;font-variant-numeric:tabular-nums}
.bt-side+.bt-side{border-top:1px solid color-mix(in srgb,var(--bt-ink) 6%,transparent)}
.bt-side img{width:20px;height:15px;object-fit:cover;flex-shrink:0;border-radius:2px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bt-ink) 14%,transparent)}
.bt-noflag{width:20px;height:15px;flex-shrink:0;border-radius:2px;
  background:color-mix(in srgb,var(--bt-ink) 9%,transparent)}
.bt-code{flex:1;min-width:0;font-weight:700;
  letter-spacing:.03em;color:var(--bt-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-pts{font-weight:700;color:var(--bt-muted)}
/* the winner is the only thing in the tree that gets full ink */
.bt-side.won{background:color-mix(in srgb,var(--bt-accent) 12%,transparent)}
.bt-side.won .bt-code{color:var(--bt-ink)}
.bt-side.won .bt-pts{color:var(--bt-accent)}

/* ── Medal games (3rd place, 5th place) ───────────────────────────── */
.bt-medals{padding:0 10px}
.bt-pool-header{font-weight:700;font-size:calc(var(--bt-fs) * .846);letter-spacing:.09em;
  text-transform:uppercase;color:var(--bt-muted);padding:14px 0 6px}
.bt-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--bt-ink) 8%,transparent);
  background:color-mix(in srgb,var(--bt-ink) 4%,transparent)}
.bt-row+.bt-row{margin-top:4px}
.bt-row .bt-team{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.bt-row .bt-when{border:none;padding:0;min-width:74px;text-align:left}

.bt-empty{padding:24px 12px;text-align:center;color:var(--bt-muted);
  font-size:var(--bt-fs);font-weight:600}

/* Narrow phones: tighter columns so three rounds still fit before scroll */
@media (max-width:480px){
  .bt-round{flex:0 0 116px}
  .bt-tree{gap:20px}
}