/* ── BRACKETS ── */
.bracket-toolbar {
  display:flex; flex-direction:column; border-bottom:1px solid var(--border);
  background:var(--panel);
  position:sticky; top:calc(var(--header-h,56px) + var(--tabs-h,38px)); z-index:100;
}
.bracket-toolbar-divs {
  display:flex; gap:8px; flex-wrap:wrap;
  padding:10px 20px 8px; align-items:center;
  border-bottom:1px solid var(--toolbar-inner-border);
}
.bracket-toolbar-controls {
  display:flex; gap:8px; align-items:center;
  padding:7px 20px; flex-wrap:wrap;
}
.bracket-search-wrap { margin-right:auto; }
.div-btn {
  font-family:'DM Sans',sans-serif; font-size:12px; padding:4px 11px;
  border-radius:14px; border:1px solid var(--border); background:var(--div-btn-bg);
  color:var(--muted); cursor:pointer; transition:all 0.15s; letter-spacing:1px;
}
.div-btn:hover { border-color:#555; color:var(--text); }
.div-btn.active { color:#fff; border-color:transparent; background:var(--div-color,var(--red)); }
.refresh-btn {
  font-family:'DM Sans',sans-serif; font-size:11px;
  padding:4px 11px; border-radius:6px; border:1px solid var(--border);
  background:var(--div-btn-bg); color:var(--muted); cursor:pointer;
}
.zoom-group {
  display:flex; align-items:center;
  border:1px solid var(--border); border-radius:6px; overflow:hidden;
}
.zoom-btn {
  font-family:'DM Sans',sans-serif; font-size:13px; line-height:1;
  padding:4px 10px; background:var(--div-btn-bg); color:var(--muted);
  border:none; cursor:pointer; transition:background 0.1s, color 0.1s;
}
.zoom-btn:hover { background:var(--autocomplete-hover); color:var(--text); }
.zoom-reset {
  font-size:10px; min-width:42px; text-align:center;
  border-left:1px solid var(--border); border-right:1px solid var(--border);
  color:var(--muted); letter-spacing:0.5px;
}
.zoom-reset:hover { color:var(--text); }

/* ── BRACKET SEARCH ── */
.bracket-search-wrap {
  position:relative; display:flex; align-items:center;
}
.bracket-search {
  font-family:'DM Sans',sans-serif; font-size:12px; padding:4px 28px 4px 9px;
  border-radius:6px; border:1px solid var(--border); background:var(--input-bg);
  color:var(--text); outline:none; width:160px; transition:border-color 0.15s, width 0.2s;
}
.bracket-search:focus { border-color:#555; width:200px; }
.bracket-search::placeholder { color:var(--muted); }
.bracket-search-clear {
  position:absolute; right:7px; top:50%; transform:translateY(-50%);
  color:var(--muted); cursor:pointer; font-size:13px; line-height:1;
  display:none; background:none; border:none; padding:0;
}
.bracket-search-clear.visible { display:block; }
.bracket-autocomplete {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--autocomplete-bg); border:1px solid var(--border); border-radius:6px;
  z-index:200; overflow:hidden; display:none; box-shadow:0 4px 12px rgba(0,0,0,0.15);
  max-height:200px; overflow-y:auto;
}
.bracket-autocomplete.open { display:block; }
.bac-item {
  font-family:'DM Sans',sans-serif; font-size:12px; padding:7px 10px;
  cursor:pointer; color:var(--muted); transition:background 0.1s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bac-item:hover, .bac-item.focused { background:var(--autocomplete-hover); color:var(--text); }
.bac-item mark { background:none; color:var(--red); font-weight:700; }

/* Highlighted bracket card */
.b-card.search-highlight {
  box-shadow: 0 0 0 2px #C8102E, 0 0 18px 4px rgba(200,16,46,0.35);
  border-color: #C8102E !important;
  opacity: 1 !important;
  filter: none !important;
}
.b-card.search-dim {
  opacity: 0.2 !important;
  filter: saturate(0.1) !important;
}

/* Bracket uses CSS transform to scale to viewport width */
.bracket-outer-wrap {
  /* touch-action:pan-x pan-y hands BOTH axes to the browser's native touch
     scrolling — vertical bubbles to the page, horizontal is handled directly
     by this element's own overflow-x:auto, and the browser's scroll-chaining
     resolves diagonal drags smoothly on its own. JS only drives panning for
     mouse (which has no native drag-to-scroll); trying to referee touch axes
     ourselves via pointer events raced against the browser's own gesture
     recognizer and felt laggy/insensitive. Only pinch-zoom is excluded (not
     implied by pan-x/pan-y) so the custom 2-finger pinch handler still owns it.
  */
  width:100%; overflow-x:auto; padding:16px 20px; cursor:grab; touch-action:pan-x pan-y;
}
.bracket-scaler {
  transform-origin:top left;
  margin:0 auto;
  /* width and transform set by JS */
}

.round-label-bar {
  position:sticky; z-index:90; background:var(--black);
  top:calc(var(--header-h,56px) + var(--tabs-h,38px) + var(--toolbar-h,0px));
  border-bottom:1px solid var(--border);
  height:24px; overflow:hidden; display:none;
}
.round-label-bar.active { display:block; }
.round-label-bar .rlb-item {
  position:absolute; top:0; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:'DM Sans',sans-serif; font-size:10px; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}

.bracket-title {
  font-family:'Bebas Neue',sans-serif; font-size:22px;
  letter-spacing:2px; margin-bottom:10px; text-align:center;
}
.bracket-row { display:flex; align-items:flex-start; min-width:max-content; }

.round-label {
  font-family:'DM Sans',sans-serif; font-size:10px; letter-spacing:2px;
  color:transparent; text-transform:uppercase; text-align:center;
  padding:5px 5px 7px; height:24px; white-space:nowrap;
}
/* The floating Finals block isn't part of the sticky round-label-bar system
   (that's what keeps .round-label's text transparent above), so it needs
   its own actually-visible label. */
.finals-tag {
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:700; letter-spacing:2px;
  color:var(--text); text-transform:uppercase; text-align:center;
  padding:5px 5px 7px; white-space:nowrap;
}

/* bracket cards */
/* TMS status colors (muted for dark theme) */
.b-card { border:2px solid var(--conn-color); }
.b-card.s-called_to_holding  { border-color: #8a7040; }
.b-card.s-in_staging         { border-color: #3a8060; }
.b-card.s-on_route_to_ring   { border-color: #6050a0; }
.b-card.s-checked_in_at_ring { border-color: #7060a0; }
.b-card.s-competing          { border-color: #4060a0; }
.b-card.s-done               { border-color: #2a4060; }
.b-card.s-canceled           { border-color: #804040; }

/* Status dot in footer */
.b-status-dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
}
.s-called_to_holding  .b-status-dot { background: rgb(242,229,205); }
.s-in_staging         .b-status-dot { background: rgb(183,225,205); }
.s-on_route_to_ring   .b-status-dot { background: rgb(180,167,214); }
.s-checked_in_at_ring .b-status-dot { background: rgb(217,210,233); }
.s-competing          .b-status-dot { background: rgb(201,218,248); }
.s-done               .b-status-dot { background: rgb(164,194,244); }
.s-canceled           .b-status-dot { background: rgb(244,204,204); }

.b-card {
  width:220px; background:var(--card-bg); box-shadow:var(--card-shadow);
  border-radius:7px; overflow:hidden; flex-shrink:0; transition:border-color 0.3s, opacity 0.2s;
}
.b-card .tb { height:3px; background:var(--b-tb-bg); }
.b-card.bye-card { opacity:0.22; border-style:dashed; }
.b-card.bye-card.done { opacity:0.3; }
/* Dim non-winner parts of completed cards; leave the winner row (and its
   checkmark) at full brightness so it stands out rather than getting washed
   out by the card-wide dimming. */
.b-card.done:not(.bye-card) .tb,
.b-card.done:not(.bye-card) .b-foot,
.b-card.done:not(.bye-card) .b-team:not(.winner) { opacity:0.4; filter:saturate(0.3); }
.b-team {
  display:flex; align-items:flex-start; gap:6px;
  padding:7px 9px; font-size:13px; font-weight:600;
  border-bottom:1px solid var(--b-team-border); line-height:1.3; color:var(--text);
  transition:opacity 0.2s, filter 0.2s;
}
.b-team:last-of-type { border-bottom:none; }
.b-team.blue-bg { background:var(--b-blue-bg); }
.b-team.red-bg  { background:var(--b-red-bg); }
.b-team.winner { background:var(--b-win-bg); font-weight:700; }
.b-team.loser  { color:var(--loser-color); }
.b-win-check {
  flex-shrink:0; width:15px; height:15px; border-radius:3px;
  border:1.5px solid #5FFF9A; background:#5FFF9A; color:#08150c;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:900; line-height:1;
  align-self:flex-start; margin-top:1px;
}
/* Never truncate the team name or LMH tag — wrap instead of ellipsis-hiding
   them. CARD_H in the JS layout math is sized to leave room for this. */
.b-name { flex:1; overflow-wrap:break-word; word-break:break-word; white-space:normal; }
.b-foot {
  display:flex; gap:6px; padding:5px 9px; align-items:center;
  background:var(--foot-bg); border-top:1px solid var(--b-team-border);
  font-family:'DM Sans',sans-serif;
}
.b-foot .bn { color:var(--text); font-weight:700; font-size:12px; }
.b-foot .bs { color:var(--muted); font-size:10px; letter-spacing:0.5px; }
.b-foot .br { color:var(--yellow); font-weight:700; font-size:11px; margin-left:auto; }

.center-msg { padding:50px; text-align:center; font-family:'DM Sans',sans-serif; font-size:13px; color:var(--muted); }

/* ── CHAMPION ── */
.champion-card {
  width:220px; margin-top:14px; border-radius:9px; overflow:hidden;
  background:var(--card-bg); box-shadow:var(--card-shadow);
  border:2px solid #d4af37;
}
.champion-card .champion-label {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:6px 9px; font-family:'DM Sans',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:#08150c;
  background:linear-gradient(90deg,#d4af37,#f5d576,#d4af37);
}
.champion-card .champion-name {
  padding:12px 10px; text-align:center; font-size:15px; font-weight:700;
  color:var(--text); word-break:break-word;
}
.champion-card .champion-name.tbd { color:var(--muted); font-weight:600; opacity:0.6; }
.center-msg.err { color:#ef4444; }