/* Knockout bracket — horizontal columns, scrollable on mobile */

.br-scroll {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-4);
  /* Visual hint there's more to the right */
  mask-image: linear-gradient(to right, black 95%, transparent);
  /* Bound the height so iOS treats it as a self-contained scroll box.
     Both x AND y scroll INSIDE; the page above + below scrolls
     normally outside. Without a max-height, iOS Safari traps every
     vertical gesture inside the overflow-x container. */
  max-height: 70svh;
  border-radius: var(--r-md);
}

.br-tree {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: var(--s-5);
  min-width: 1100px;
  padding: var(--s-4) var(--s-2);
}

/* Desktop has no need for the height cap — mouse + trackpad can drive
   a tall horizontal-scroll panel just fine. */
@media (min-width: 901px) {
  .br-scroll { max-height: none; overflow-y: visible; }
}

.br-col__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.18em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
  text-align: center;
  position: sticky;
  top: 0;
  background: linear-gradient(to bottom, var(--color-bg) 70%, transparent);
  padding: var(--s-2) 0;
  z-index: 2;
}

.br-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--s-3);
  height: 100%;
}

/* Match cards in the bracket */
.br-match {
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color var(--t-fast) var(--ease-out);
}
.br-match--empty {
  background: transparent;
  border-style: dashed;
  color: var(--color-text-mute);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  padding: var(--s-3);
  text-align: center;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.br-match--live { border-color: rgba(255,59,48,0.45); box-shadow: var(--glow-live); }
.br-match--done { opacity: 0.95; }

.br-match__when {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-mute);
  text-align: center;
  margin-bottom: 2px;
}

.br-side {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--s-2);
  align-items: center;
  padding: 4px 0;
  border-top: 1px dotted var(--color-border);
}
.br-side:first-of-type { border-top: none; }
.br-side--win .br-side__code { color: var(--color-gold); }
.br-side--win .br-side__score { color: var(--color-gold); }

.br-side__flag {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface);
}
.br-side__flag--tbd { background: var(--color-surface); border: 1px dashed var(--color-border); }

.br-side__main { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.br-side__code {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.br-side__owner {
  font-size: 10px;
  color: var(--color-gold);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.br-side__score {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  min-width: 18px;
  text-align: right;
  color: var(--color-text-dim);
}
.br-side__score--blank::after { content: '–'; color: var(--color-text-mute); }

/* Highlight tiers per column */
.br-col--final .br-match {
  border-color: rgba(245,197,24,0.45);
  background: linear-gradient(135deg, rgba(245,197,24,0.08), var(--color-bg-elev));
}
.br-col--sf .br-match { border-color: rgba(245,197,24,0.25); }

@media (max-width: 600px) {
  .br-tree { gap: var(--s-3); min-width: 980px; }
  .br-col__title { font-size: var(--fs-sm); }
}