/* ============================================================
   Eliminatorias (bracket) — screen-specific layout
   ------------------------------------------------------------
   Only layout/connector/placeholder rules the bracket needs and
   that don't already exist. Everything is built from Quantia DS
   tokens (--accent, --brand-2, --ok, --border, --q-gradient-h,
   radii, plum shadows) + the app's existing .qm-* classes — no
   new colors or type. Scoped under .qm-bk-*.
   ============================================================ */

/* ---------- header controls ---------- */
.qm-bk-controls {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
}
.qm-bk-controls .qm-filters { margin-top: 0; flex: 1; }
.qm-bk-full {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-weight: 800; font-size: 13px;
  color: var(--brand-2); background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 8px 14px; transition: all .15s;
  white-space: nowrap;
}
.qm-bk-full:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

/* ---------- mode toggle (Proyección ↔ Solo confirmados) ---------- */
.qm-bk-modebar { margin: 14px 0 4px; }
.qm-bk-toggle {
  display: inline-flex; padding: 4px; gap: 4px; background: var(--bg-3);
  border-radius: var(--radius-pill); border: 1px solid var(--border);
}
.qm-bk-toggle button {
  font-family: var(--font-head); font-weight: 800; font-size: 13px;
  padding: 8px 16px; border-radius: var(--radius-pill); color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 7px; transition: all .18s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}
.qm-bk-toggle button.on { background: var(--q-gradient-h); color: #fff; box-shadow: var(--shadow-sm); }
.qm-bk-toggle button:not(.on):hover { color: var(--fg-1); }
.qm-bk-modenote {
  font-size: 12.5px; color: var(--fg-3); margin-top: 9px; display: flex;
  align-items: center; gap: 7px; font-weight: 600;
}
.qm-bk-modenote .warn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }

/* ---------- match card internals (shell reuses .qm-match.compact) ---------- */
.qm-bk-match { margin: 0; width: 100%; }
.qm-bk-match.is-confirmed { border-color: rgba(31,138,91,.4); }
.qm-bk-match .qm-bk-top {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 9px;
}
.qm-bk-match .qm-bk-top .qm-bk-when { margin: 0; text-align: right; }
.qm-bk-when.qm-bk-live { color: var(--accent); font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.qm-bk-when.qm-bk-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: qm-pulse 1.1s infinite; }
.qm-bk-match .qm-bk-rnd {
  font-family: var(--font-head); font-weight: 800; font-size: 10.5px; letter-spacing: .04em;
  color: var(--brand-2); background: var(--q-mist); padding: 3px 9px; border-radius: var(--radius-pill);
  text-transform: uppercase;
}
.qm-bk-match .qm-bk-id { font-size: 10.5px; color: var(--q-grey-300); font-weight: 700; font-family: var(--font-head); }
.qm-bk-match .qm-bk-top .spacer { flex: 1; }
.qm-chip.confirmed { background: rgba(31,138,91,.14); color: var(--ok); }
.qm-chip.confirmed .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* a single team row */
.qm-bk-side {
  display: flex; align-items: center; gap: 9px; padding: 5px 0; min-width: 0;
}
.qm-bk-side + .qm-bk-side { border-top: 1px dashed var(--border); }
.qm-bk-side .fl { font-size: 21px; line-height: 1; flex: none; filter: drop-shadow(0 1px 2px rgba(46,11,61,.16)); }
.qm-bk-side .nm {
  font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--fg-1);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qm-bk-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qm-bk-meta .nm-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.qm-bk-meta .qm-bk-pos { align-self: flex-start; }
.qm-bk-side .abbr { font-size: 10px; color: var(--fg-3); font-weight: 700; letter-spacing: .05em; margin-left: 5px; }
.qm-bk-side .spacer { flex: 1; }
.qm-bk-ok { display: inline-flex; align-items: center; color: var(--ok); flex: none; }
.qm-bk-side .sc {
  font-family: var(--font-head); font-weight: 900; font-size: 18px; color: var(--fg-2); flex: none;
  font-variant-numeric: tabular-nums;
}
.qm-bk-side .sc .pen { font-size: 11px; font-weight: 800; color: var(--q-grey-300); margin-left: 2px; }
/* advancing team highlight */
.qm-bk-side.win .nm { color: var(--accent); }
.qm-bk-side.win .sc { color: var(--accent); }
.qm-bk-side.win { position: relative; }
.qm-bk-side.win::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 3px; background: var(--accent);
}
.qm-bk-side.out .nm, .qm-bk-side.out .sc { color: var(--q-grey-300); }

/* a placeholder team row (berth not yet known) */
.qm-bk-side.ph .nm { color: var(--q-grey-500); font-weight: 700; }
.qm-bk-seed {
  font-family: var(--font-head); font-weight: 800; font-size: 10px; letter-spacing: .03em;
  color: var(--brand-2); background: var(--q-mist); border-radius: 6px; padding: 3px 7px; flex: none;
}
/* origin tag (position + group) on resolved Round-of-32 teams */
.qm-bk-pos {
  font-family: var(--font-head); font-weight: 800; font-size: 9.5px; letter-spacing: .02em;
  color: var(--brand-2); background: var(--q-mist); border-radius: 5px; padding: 2px 6px; flex: none;
  white-space: nowrap;
}
/* placeholder card: dashed border */
.qm-bk-match.is-ph { border-style: dashed; border-color: var(--border-strong); background: var(--bg-2); box-shadow: none; }
.qm-bk-match .qm-bk-when { font-size: 11px; color: var(--fg-3); font-weight: 600; margin-top: 8px; text-align: center; }
.qm-bk-projtag {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px;
  font-size: 10.5px; font-weight: 800; font-family: var(--font-head); color: var(--warn);
  letter-spacing: .02em;
}
.qm-bk-side .nm .abbr { color: var(--warn); margin-left: 6px; font-size: 9px; text-transform: uppercase; }

/* third-place aside (below the board on desktop) */
.qm-bk-aside { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--border); }
.qm-bk-desktop-only { display: block; }
@media (max-width: 720px) { .qm-bk-desktop-only { display: none; } }

/* full board (all rounds) vs mobile slice (selected round + peek) */
.qm-bk-fullboard { display: block; }
.qm-bk-sliceboard { display: none; }
/* desktop boards break out of the 720px content cap to use the viewport width */
.qm-bk-deskwindow, .qm-bk-fullboard {
  position: relative; left: 50%; transform: translateX(-50%); width: min(95vw, 1280px);
}
.qm-bk-fullboard { width: min(96vw, 1560px); }
/* narrow-desktop 3-stage window: 3 columns always fit (responsive width), centered */
.qm-bk-deskwindow .qm-bk-board { justify-content: center; overflow-x: clip; }
.qm-bk-deskwindow .qm-bk-col { width: calc((100% - 112px) / 3); max-width: 400px; }
.qm-bk-finalwrap .qm-bk-col { width: 300px; max-width: none; }
.qm-bk-finalwrap { display: flex; flex-direction: column; align-items: center; }
.qm-bk-champ-lg { margin-top: 16px; font-size: 14px; }
.qm-bk-champ-lg svg { width: 42px; height: 42px; }
.qm-bk-spacer { flex: none; align-self: stretch; }
.qm-bk-champ {
  display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 22px 0 4px;
  color: var(--gold); font-family: var(--font-head); font-weight: 800; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ---------- multi-column board + connectors (desktop + mobile) ---------- */
.qm-bk-board {
  --bk-gap: 56px; --bk-stub: 28px;
  display: flex; gap: var(--bk-gap); overflow-x: auto; padding: 8px 4px 18px;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-left: 4px;
}
.qm-bk-col {
  display: flex; flex-direction: column; flex: none; width: 234px; scroll-snap-align: start; position: relative;
}
/* selected-stage highlight: a soft vertical lane behind the round's column */
.qm-bk-col.is-selected::before {
  content: ""; position: absolute; inset: -2px -12px; z-index: -1;
  background: var(--q-mist); border-radius: var(--radius-lg);
}
.qm-bk-col.is-selected .qm-bk-col-head { color: var(--accent); }
.qm-bk-col-head {
  font-family: var(--font-head); font-weight: 800; font-size: 13px; color: var(--fg-1);
  text-align: center; padding-bottom: 10px; position: sticky; top: 0;
}
.qm-bk-col-head small { display: block; font-weight: 700; font-size: 10.5px; color: var(--fg-3); margin-top: 2px; }
.qm-bk-col-body { display: flex; flex-direction: column; flex: 1; }
.qm-bk-slot { flex: 1; display: flex; align-items: center; position: relative; min-height: 176px; }

/* connectors — explicit stub/vertical elements (no pseudo conflicts) */
.qm-bk-stub-r { position: absolute; left: 100%; top: 50%; width: var(--bk-stub, 28px); height: 2px; background: var(--border); }
.qm-bk-stub-l { position: absolute; right: 100%; top: 50%; width: var(--bk-stub, 28px); height: 2px; background: var(--border); }
.qm-bk-vert   { position: absolute; left: calc(100% + var(--bk-stub, 28px)); top: 50%; width: 2px; height: 100%; background: var(--border); }

/* the 3rd-place match sits below the final, set apart */
.qm-bk-col.final-col { justify-content: center; }
.qm-bk-3pl { margin-top: 26px; }
.qm-bk-3pl-lbl {
  font-family: var(--font-head); font-weight: 800; font-size: 11px; color: var(--fg-3);
  text-align: center; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em;
}

/* ---------- mobile single-round view ---------- */
.qm-bk-mobile { display: none; }
.qm-bk-mobile .qm-bk-list { display: flex; flex-direction: column; gap: 12px; }
.qm-bk-mobile .qm-bk-next {
  margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--border);
}
.qm-bk-next-head {
  display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800;
  font-size: 12px; color: var(--brand-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px;
}
.qm-bk-next-head .ln { flex: 1; height: 1px; background: var(--border); }
.qm-bk-mini {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px; background: var(--bg-2);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md); position: relative;
}
.qm-bk-mini + .qm-bk-mini { margin-top: 10px; }
.qm-bk-mini .tk {
  font-family: var(--font-head); font-weight: 800; font-size: 10px; color: var(--brand-2);
  background: var(--q-mist); border-radius: 5px; padding: 3px 7px; flex: none;
}
.qm-bk-mini .lbl { font-size: 12.5px; color: var(--fg-2); font-weight: 600; }
/* connector tick from a card down to its next-round mini */
.qm-bk-mini::before {
  content: ""; position: absolute; left: 26px; top: -10px; width: 2px; height: 10px; background: var(--border);
}

/* ---------- fullscreen overlay ---------- */
.qm-bk-overlay {
  position: fixed; inset: 0; z-index: 90; background: var(--bg-2);
  display: flex; flex-direction: column; animation: qm-fu .2s ease both;
}
.qm-bk-overlay-bar {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: #fff;
}
.qm-bk-overlay-bar .ti { font-family: var(--font-head); font-weight: 900; font-size: 16px; color: var(--fg-1); }
.qm-bk-overlay-bar .spacer { flex: 1; }
.qm-bk-overlay-close {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 800;
  font-size: 13px; color: var(--fg-2); background: var(--bg-3); border-radius: var(--radius-pill); padding: 8px 14px;
}
.qm-bk-overlay-scroll { flex: 1; overflow: auto; padding: 20px; }
.qm-bk-overlay-scroll .qm-bk-board { min-height: 100%; display: flex; }   /* force-show even on mobile */

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  /* hide the long intro + fullscreen button so the round chips get full width */
  .qm-bk > .qm-sub { display: none; }
  .qm-bk-full { display: none; }
  .qm-bk-controls { margin-top: 12px; }
  .qm-bk-col-head { position: static; }
  /* swap to the single-round slice (centered like a bracket, sized per round) */
  .qm-bk-fullboard { display: none; }
  .qm-bk-sliceboard { display: block; }
  .qm-bk-sliceboard .qm-bk-board { --bk-gap: 28px; --bk-stub: 14px; scroll-snap-type: x proximity; }
  .qm-bk-sliceboard .qm-bk-col, .qm-bk-sliceboard .qm-bk-spacer { scroll-snap-align: start; }
  .qm-bk-sliceboard .qm-bk-col { width: 230px; }
  .qm-bk-sliceboard .qm-bk-slot { min-height: 128px; }
}