/* THE bracket. One rule set behind the tournament bracket and the clan-war bracket — they were
   two visual implementations of the same thing, and the clan-war one had no connectors and no
   vertical centring. A new bracket surface uses these classes; it does not copy them.

   Markup shape:
     .bkt-scroll > .bkt-grid > .bkt-round* > (.bkt-round-title + .bkt-round-matches > .bkt-match*)
   A match holds two .bkt-seat rows separated by .bkt-vs, plus optional .bkt-tags / .bkt-watch. */

/* .bf-open has no padding of its own, so this is the bracket's only clearance from the panel
   border — 2px read as flush. Horizontal padding matches .tn-pad. */
.bkt-scroll { overflow-x: auto; padding: 14px 18px 16px; }
.bkt-grid {
  display: flex; align-items: stretch; gap: 34px;
  min-width: min-content;
}
.bkt-round { display: flex; flex-direction: column; min-width: 208px; }
.bkt-round-title {
  font-family: var(--font-display); font-size: 0.9rem; color: var(--bronze-2);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--divider);
  text-align: center;
  /* It is a <button>: strip the control chrome, keep the type ramp. */
  width: 100%; background: none; border-top: 0; border-left: 0; border-right: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: inherit; cursor: pointer;
}
.bkt-round-title:hover { color: var(--bronze); }
.bkt-round-title:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: 2px; }
.bkt-round-caret { font-size: 0.7em; opacity: 0.8; }
.bkt-round-n {
  font-size: 0.62rem; letter-spacing: 0; font-family: var(--font-sans);
  padding: 1px 6px; border-radius: 100px; border: 1px solid var(--bronze-2); color: var(--ink);
}
/* Per-round hit count. The affordance for a query too broad to auto-open: it says WHERE the
   matches are so one round can be opened, instead of every round springing open at once. */
.bkt-round-hits {
  font-size: 0.62rem; letter-spacing: 0; font-family: var(--font-sans);
  padding: 1px 6px; border-radius: 100px;
  background: var(--laurel); color: #fff;
}
.bkt-round-hits:empty { display: none; }
.bkt-round.has-hits .bkt-round-title { color: var(--ink); }
/* Collapsed: the column shrinks to its header so the rounds beside it gain the width. */
.bkt-round.is-collapsed { min-width: 0; }
.bkt-round.is-collapsed .bkt-round-matches { display: none; }
.bkt-round.is-collapsed .bkt-round-label { display: none; }
.bkt-round-matches {
  display: flex; flex-direction: column; justify-content: space-around;
  flex: 1 1 auto; gap: 14px;
  /* Clear of the round title's rule; without it the first match sits on the divider. */
  padding-top: 8px;
}
.bkt-match {
  position: relative;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.bkt-match.is-live   { border-color: var(--bronze); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bronze) 40%, transparent); }
.bkt-match.is-done   { opacity: 0.92; }
.bkt-round + .bkt-round .bkt-match::before {
  content: ''; position: absolute; left: -18px; top: 50%; width: 18px; height: 1px;
  background: var(--divider);
}
/* Phone: stack the rounds instead of scrolling sideways. A round only ever needs to be one
   card wide here, so the columns become full-width sections and the horizontal scroller goes
   away entirely — measured at 375px, a 4-round bracket was 934px in a 375px viewport.
   Rounds keep DOM order (round 1 → final): reversing to put the final on top would put tab
   order bottom-to-top over the Review buttons and player links. */
/* Phone-only: desktop renders every round, so there is never a remainder to reveal. Declared
   BEFORE the media query — same specificity, so a later rule would win unconditionally. */
.bkt-more { display: none; }

@media (max-width: 768px) {
  .bkt-scroll { overflow-x: visible; padding: 12px 12px 14px; }
  /* column-reverse puts the FINAL on top — the match you opened the page for. Safe here in a
     way it would not be on desktop: every earlier round renders collapsed, so its matches are
     display:none and out of the tab order, leaving only the round headers to traverse. */
  .bkt-grid { flex-direction: column-reverse; gap: 14px; min-width: 0; }
  .bkt-round { min-width: 0; }
  /* No taper to preserve once stacked; space-around would strand the cards apart. */
  .bkt-round-matches { justify-content: flex-start; }
  /* The stub points left, into the previous COLUMN — there is no column beside it now. */
  .bkt-round + .bkt-round .bkt-match::before { display: none; }
  .bkt-round-title { justify-content: space-between; text-align: left; }
  .bkt-round.is-collapsed .bkt-round-label { display: block; }
  .bkt-round.is-collapsed .bkt-round-title { margin-bottom: 0; border-bottom-color: transparent; }
  /* Sits under the reversed stack, i.e. after the EARLIEST round shown. */
  .bkt-more { display: flex; justify-content: center; padding-top: 14px; }
}

.bkt-seat {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 6px; border-radius: var(--radius-s); min-width: 0;
}
.bkt-seat.is-winner { background: color-mix(in srgb, var(--laurel) 14%, transparent); font-weight: 600; }

/* Bracket search. Highlight-and-dim, never filter: a seat removed from the tree breaks the
   round columns, and a player's path is the thing you are looking for. */
/* Sits in .tn-section-head, which is a space-between flex row, so this lands at the right end
   on the title's line. */
/* No width of its own: the field is .nl-search-mini (list-screen.css) — a magnifier that opens
   on focus and stays open while it holds a query. bracket.css links AFTER list-screen.css, so a
   `flex` here would win on order and pin it open. */
.bkt-search-count { flex: none; white-space: nowrap; }
/* Outline, not a fill: is-winner already owns the seat's background. */
.bkt-grid.is-filtering .bkt-seat.is-match {
  box-shadow: inset 0 0 0 2px var(--bronze-2);
  border-radius: var(--radius-s);
}
.bkt-grid.is-filtering .bkt-seat:not(.is-match) { opacity: 0.35; }
@media (prefers-reduced-motion: no-preference) {
  .bkt-seat { transition: opacity 0.12s ease, box-shadow 0.12s ease; }
}
/* Circle + centring come from .avatar-chip; a host sets size only. */
.bkt-av { width: 22px; height: 22px; font-size: 0.7rem; }
.bkt-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; }
.bkt-win { flex: none; color: var(--laurel-2); font-weight: 700; }
.bkt-tbd, .bkt-bye { color: var(--ink-3); font-size: 0.82rem; font-style: italic; padding: 4px 6px; }
.bkt-vs { height: 1px; background: var(--divider); margin: 0 6px; position: relative; }
.bkt-livedot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--bronze);
}
.bkt-watch {
  margin-top: 4px; align-self: stretch; text-align: center;
  background: var(--bronze-gradient); color: var(--on-bronze); border: 0;
  border-radius: var(--radius-s); padding: 4px 8px; font: inherit; font-size: 0.76rem;
  font-weight: 600; cursor: pointer;
}
.bkt-watch:hover { background: var(--bronze-gradient-hover); }
/* Review is the quieter twin of Watch: a finished board is not competing for attention the way
   a live one is, but it is the same control in the same place. */
.bkt-watch.is-review {
  background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--border);
}
.bkt-watch.is-review:hover { background: var(--bg-3); color: var(--ink); border-color: var(--border-strong); }
.bkt-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px 2px; }
.bkt-tag {
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 999px;
  background: var(--bg-2); color: var(--ink-3); border: 1px solid var(--border);
}
.bkt-tag.is-extra    { color: var(--bronze-2); border-color: color-mix(in srgb, var(--bronze) 45%, transparent); }
.bkt-tag.is-decider  { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.bkt-tag.is-coinflip { color: var(--amethyst-2); border-color: color-mix(in srgb, var(--amethyst) 45%, transparent); }
.bkt-tag.is-replay   { color: var(--lapis-2); border-color: color-mix(in srgb, var(--lapis) 45%, transparent); }
.bkt-tag.is-forfeit,
.bkt-tag.is-void     { color: var(--porphyry-2); border-color: color-mix(in srgb, var(--porphyry) 40%, transparent); }