/* =========================================================================
   bracket.css — single-elimination brackets (one-sided + split views).

   One-sided view: every round is a single vertical column flowing left →
   right into the Grand Final, with the champion box in its own column
   beside the final.

   Columns are FIXED WIDTH: collapsing a round never reshapes or stretches
   the rest of the bracket — the remaining columns simply slide over.

   Collapse behaviour:
   - Overworld (.bracket--compact): per-round arrows; a collapsed round is a
     slim strip that can be expanded in place. Fully-decided rounds start
     collapsed automatically (server-side).
   - The Portal (.bracket--sequential): no per-round arrows — the round bar
     above the bracket collapses rounds in order (left → right) and expands
     them back (right → left). Collapsed rounds are hidden entirely.

   Split view (.bracket--double): half the field on each side, Grand Final
   in the middle, champion above the final match.

   Blocky look: square nodes, thick borders, hard paper-cut shadows.
   ========================================================================= */

.bracket {
  --cgap: 26px;            /* half the horizontal space between columns */
  --vgap: 18px;            /* vertical breathing room between matches   */
  --colw: 190px;           /* fixed column width — collapse never stretches */
  --line: #3A4A6B;
  --node-bg: #141A26;
  --node-bd: #2B3650;
  --node-shadow: #05070C;
  --accent: #54E36B;
  --label: #7A8696;
  --final: #FCC433;
  color: #EAF0F8;
}

.bracket__rows {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 320px;
  overflow-x: auto;        /* safety net — collapsed rounds keep it inside */
  padding: 8px 2px 14px;
}

/* ---- columns --------------------------------------------------------- */
.bcol {
  display: flex;
  flex-direction: column;
  width: var(--colw);
  min-width: var(--colw);
  flex: 0 0 var(--colw);   /* fixed: collapsing others must not stretch us */
}
.bcol:not(:last-child) { margin-right: calc(var(--cgap) * 2); }

.bcol__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-bottom: 14px;
}
.bcol__label {
  font-family: var(--font-pixel, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--label);
  text-align: center;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bcol__label--final { color: var(--final); }

/* Grand Final column — slightly wider + keep the title above neighbours after shrink */
.bracket--double .bcol--mid,
.bracket:not(.bracket--double) .bcol--final {
  width: calc(var(--colw) + 14px);
  min-width: calc(var(--colw) + 14px);
  flex: 0 0 calc(var(--colw) + 14px);
}
.bcol--mid .bcol__head,
.bcol--final .bcol__head {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}

/* collapse arrow (Overworld only) — sits beside the round name */
.bcol__toggle {
  flex: none;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .14);
  color: var(--label);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.bcol__toggle:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }

.bcol__matches {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  row-gap: var(--vgap);
  min-width: 0;
}
.bcol__matches--center { justify-content: center; }

/* ---- collapsed rounds — hide completely (never squish the layout) ----- */
.bcol__strip { display: none; }
.bracket--compact .bcol--collapsed,
.bracket--sequential .bcol--collapsed,
.bracket--double .bcol--collapsed { display: none; }

/* Overworld: chips to re-open hidden rounds */
.bracket-collapsed-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.bracket-collapsed-bar:empty { display: none; }
.bracket-collapsed-bar__chip {
  font-family: var(--font-pixel, monospace);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--label);
  background: rgba(255, 255, 255, .05);
  border: 1.5px dashed rgba(255, 255, 255, .2);
  padding: 7px 12px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.bracket-collapsed-bar__chip:hover { color: #fff; border-color: var(--accent); }

/* ---- round bar (The Portal — one button, sequential collapse) -------- */
.bracket-roundbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.bracket-roundbar__btn {
  flex: none;
  font-family: var(--font-pixel, monospace);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #C4CEDD;
  background: rgba(255, 255, 255, .05);
  border: 2px solid rgba(255, 255, 255, .18);
  padding: 10px 16px;
  min-width: 210px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.bracket-roundbar__btn:hover:not(:disabled) { color: #fff; border-color: var(--accent, #54E36B); }
.bracket-roundbar__btn:disabled { opacity: .35; cursor: default; }
.bracket-roundbar--pair {
  flex-wrap: wrap;
}
.bracket-roundbar--pair .bracket-roundbar__btn {
  min-width: 108px;
}
.bracket-roundbar__info {
  flex: 1;
  font-family: 'Minecraft', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5C6675;
}

/* Portal: round labels (keep readable but fit long translations) */
.portal .bcol__label {
  font-size: 11px;
  letter-spacing: 0.55px;
}

/* bracket layout toggle (one-sided vs split) */
.bracket-view-toggle {
  display: inline-flex;
  border: 2px solid rgba(255, 255, 255, .18);
  margin-bottom: 14px;
}
.bracket-view-toggle__btn {
  font-family: var(--font-pixel, monospace);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8A98AD;
  background: transparent;
  border: none;
  padding: 9px 16px;
  cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.bracket-view-toggle__btn.is-on {
  color: #fff;
  background: rgba(124, 77, 255, .22);
}
.bracket-view-toggle__btn + .bracket-view-toggle__btn {
  border-left: 2px solid rgba(255, 255, 255, .18);
}

.bmatch {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
}

/* ---- node: a blocky slab with a hard offset shadow ------------------- */
.bnode {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--node-bg);
  border: 2px solid var(--node-bd);
  box-shadow: 4px 4px 0 var(--node-shadow);
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.bnode:hover {
  border-color: var(--accent);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--node-shadow);
}

/* Ongoing match — live green glow + pulsing dot */
.bnode--ongoing {
  border-color: var(--accent);
  box-shadow:
    4px 4px 0 var(--node-shadow),
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: bnode-live-pulse 2.4s ease-in-out infinite;
}
.bnode--ongoing::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--node-bg), 0 0 10px var(--accent);
  animation: bnode-live-dot 1.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.bnode--ongoing:hover {
  border-color: var(--accent);
  box-shadow:
    5px 5px 0 var(--node-shadow),
    0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 30%, transparent);
}
.bmatch:has(.bnode--ongoing) { z-index: 1; }

@keyframes bnode-live-pulse {
  0%, 100% {
    box-shadow:
      4px 4px 0 var(--node-shadow),
      0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
      0 0 14px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  50% {
    box-shadow:
      4px 4px 0 var(--node-shadow),
      0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
      0 0 24px color-mix(in srgb, var(--accent) 32%, transparent);
  }
}
@keyframes bnode-live-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .65; transform: scale(.82); }
}

.bteam {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  font-size: 16px;
  line-height: 1.1;
}
.bteam + .bteam { border-top: 2px solid var(--node-bd); }
.bteam__head {
  flex: none;
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
}
.bteam__seed {
  flex: none;
  width: 20px;
  padding: 2px 0;
  text-align: center;
  font-family: var(--font-pixel, monospace);
  font-size: 9px;
  color: #8A98AD;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
}
.bteam__seed--none { background: transparent; border-color: transparent; }
.bteam__seed--none::before { content: "·"; color: #38425C; }
.bteam__name {
  flex: 1 1 0%;
  width: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #C4CEDD;
}
.bteam__tbd { color: #4C566B; font-style: italic; font-weight: 500; }
.bteam__score {
  flex: none;
  min-width: 22px;
  text-align: center;
  font-family: var(--font-pixel, monospace);
  font-size: 13px;
  color: #8A98AD;
}
.bteam__score:empty { display: none; }

.bteam--win { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.bteam--win .bteam__name { color: #fff; }
.bteam--win .bteam__score { color: var(--accent); }
.bteam--win .bteam__head { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.bteam--win .bteam__seed { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.bteam--lose { opacity: .55; }

/* final node gets a gold frame */
.bnode--final {
  border-color: var(--final);
  box-shadow: 4px 4px 0 var(--node-shadow), 0 0 22px color-mix(in srgb, var(--final) 14%, transparent);
}
.bnode--final .bteam--win { background: color-mix(in srgb, var(--final) 16%, transparent); box-shadow: inset 3px 0 0 var(--final); }
.bnode--final .bteam--win .bteam__head { border-color: color-mix(in srgb, var(--final) 40%, transparent); }
.bnode--final .bteam--win .bteam__score,
.bnode--final .bteam--win .bteam__seed { color: var(--final); }

/* ---- champion box ----------------------------------------------------- */
.bracket__champion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 2px dashed color-mix(in srgb, var(--final) 40%, transparent);
  color: #8A98AD;
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
}
.bracket__champion.is-set {
  border-style: solid;
  border-color: var(--final);
  background: color-mix(in srgb, var(--final) 12%, transparent);
  box-shadow: 4px 4px 0 var(--node-shadow);
  color: var(--final);
}
.bracket__champion-crown {
  flex: none;
  font-size: 15px;
  line-height: 1;
}
.bracket__champion-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-pixel, monospace);
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
}

/* champion column beside the grand final (one-sided view) */
.bcol--champ {
  width: 170px;
  min-width: 170px;
  flex-basis: 170px;
}

/* split view: champion overlays top; final stays vertically centered */
.bcol__champwrap { margin-bottom: 18px; }

.bracket--double .bcol--mid .bcol__matches--center {
  position: relative;
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
  min-height: 0;
}
.bracket--double .bcol--mid .bcol__champwrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  width: 100%;
  z-index: 2;
  flex-shrink: 0;
}
.bracket--double .bcol--mid .bcol__champwrap .bracket__champion {
  pointer-events: auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.bracket--double .bcol--mid .bcol__finalwrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  min-height: 0;
}
.bracket--double .bcol--mid .bcol__finalwrap .bmatch--final {
  position: relative;
  z-index: 1;
  width: 100%;
  flex: 0 0 auto;
  align-self: stretch;
}

/* ---- connector lines (chunky, squared) -------------------------------- */
.bnode::before, .bnode::after,
.bmatch::before, .bmatch::after { content: ""; position: absolute; background: var(--line); display: none; }

/* == one-sided view: everything flows rightward ========================= */
/* outgoing horizontal from every match */
.bracket:not(.bracket--double) .bcol:not(.bcol--champ):not(.bcol--collapsed) .bmatch::after {
  display: block;
  right: calc(-1 * var(--cgap)); top: 50%;
  width: var(--cgap); height: 3px;
}
/* the final's outgoing line runs all the way to the champion box */
.bracket:not(.bracket--double) .bcol--final .bmatch::after {
  width: calc(var(--cgap) * 2);
  right: calc(-2 * var(--cgap));
}
/* no dangling stub when the champion slot is still empty */
.bracket:not(.bracket--double) .bcol--final:has(+ .bcol--champ .bracket__champion:not(.is-set)) .bmatch::after {
  display: none;
}
/* single-match rounds must not draw a pairing stub downward */
.bracket:not(.bracket--double) .bcol:not(.bcol--final):not(.bcol--champ):not(.bcol--collapsed) .bmatch:only-child::before {
  display: none;
}
/* vertical join of each feeding pair */
.bracket:not(.bracket--double) .bcol:not(.bcol--final):not(.bcol--champ):not(.bcol--collapsed) .bmatch::before {
  display: block;
  right: calc(-1 * var(--cgap)); width: 3px;
}
.bracket:not(.bracket--double) .bcol:not(.bcol--final):not(.bcol--champ):not(.bcol--collapsed) .bmatch:nth-child(odd)::before { top: 50%; height: calc(50% + var(--vgap) / 2 + 2px); }
.bracket:not(.bracket--double) .bcol:not(.bcol--final):not(.bcol--champ):not(.bcol--collapsed) .bmatch:nth-child(even)::before { bottom: 50%; height: calc(50% + var(--vgap) / 2 + 2px); }
/* incoming horizontal into every match after round one */
.bracket:not(.bracket--double) .bcol:not(:first-child):not(.bcol--champ) .bnode::before {
  display: block;
  left: calc(-1 * var(--cgap) - 2px); top: 50%;
  width: calc(var(--cgap) + 2px); height: 3px;
}
/* a collapsed/hidden feeder round: no dangling stubs */
.bracket:not(.bracket--double) .bcol--collapsed + .bcol .bnode::before,
.bracket:not(.bracket--double) .bcol:first-child .bnode::before,
.bcol--collapsed .bmatch::before,
.bcol--collapsed .bmatch::after { display: none; }
/* if the first VISIBLE column follows hidden ones, kill its incoming stubs */
.bracket--sequential .bcol--collapsed + .bcol .bnode::before { display: none; }

/* == split view: left half flows right, right half flows left =========== */
.bracket--double .bcol--side-l .bmatch::after {
  display: block;
  right: calc(-1 * var(--cgap)); top: 50%;
  width: var(--cgap); height: 3px;
}
.bracket--double .bcol--side-l .bmatch::before {
  display: block;
  right: calc(-1 * var(--cgap)); width: 3px;
}
.bracket--double .bcol--side-l .bmatch:nth-child(odd)::before { top: 50%; height: calc(50% + var(--vgap) / 2 + 2px); }
.bracket--double .bcol--side-l .bmatch:nth-child(even)::before { bottom: 50%; height: calc(50% + var(--vgap) / 2 + 2px); }
/* single-match rounds (e.g. semifinals) must not draw a pairing stub downward */
.bracket--double .bcol--side-l .bmatch:only-child::before,
.bracket--double .bcol--side-r .bmatch:only-child::before { display: none; }
.bracket--double .bcol--side-l:not(:first-child) .bnode::before {
  display: block;
  left: calc(-1 * var(--cgap) - 2px); top: 50%;
  width: calc(var(--cgap) + 2px); height: 3px;
}

.bracket--double .bcol--side-r .bmatch::after {
  display: block;
  left: calc(-1 * var(--cgap)); top: 50%;
  width: var(--cgap); height: 3px;
}
.bracket--double .bcol--side-r .bmatch::before {
  display: block;
  left: calc(-1 * var(--cgap)); width: 3px;
}
.bracket--double .bcol--side-r .bmatch:nth-child(odd)::before { top: 50%; height: calc(50% + var(--vgap) / 2 + 2px); }
.bracket--double .bcol--side-r .bmatch:nth-child(even)::before { bottom: 50%; height: calc(50% + var(--vgap) / 2 + 2px); }
.bracket--double .bcol--side-r:not(:last-child) .bnode::before {
  display: block;
  right: calc(-1 * var(--cgap) - 2px); left: auto; top: 50%;
  width: calc(var(--cgap) + 2px); height: 3px;
}

/* feeder semis → grand final (span the full column gap) */
.bracket--double .bcol--side-l:has(+ .bcol--mid) .bmatch::after {
  width: calc(var(--cgap) * 2);
  right: calc(-2 * var(--cgap));
}
.bracket--double .bcol--mid + .bcol--side-r .bmatch::after {
  width: calc(var(--cgap) * 2);
  left: calc(-2 * var(--cgap));
}

/* the grand final receives a stub from each side (on bmatch, like feeder semis) */
.bracket--double .bcol--mid .bmatch--final::before {
  display: block;
  left: calc(-2 * var(--cgap) - 2px); top: 50%;
  width: calc(var(--cgap) * 2 + 2px); height: 3px;
}
.bracket--double .bcol--mid .bmatch--final::after {
  display: block;
  right: calc(-2 * var(--cgap) - 2px); top: 50%;
  width: calc(var(--cgap) * 2 + 2px); height: 3px;
}

/* split view: no dangling stubs beside hidden rounds */
.bracket--double .bcol--collapsed .bmatch::before,
.bracket--double .bcol--collapsed .bmatch::after { display: none; }
.bracket--double .bcol--side-l.bcol--collapsed + .bcol--side-l .bnode::before { display: none; }
.bracket--double .bcol--side-l.bcol--collapsed + .bcol--mid .bmatch--final::before { display: none; }
.bracket--double .bcol--side-r.bcol--collapsed + .bcol--side-r .bnode::before { display: none; }
.bracket--double .bcol--mid:has(+ .bcol--side-r.bcol--collapsed) .bmatch--final::after { display: none; }

/* outermost visible round after shrink — kill stubs pointing into hidden columns */
.bracket:not(.bracket--double) .bcol--leading:not(.bcol--champ) .bnode::before,
.bracket--double .bcol--side-l.bcol--leading .bnode::before,
.bracket--double .bcol--side-r.bcol--trailing .bnode::before {
  display: none !important;
}

/* After shrink, leave extra space before the Grand Final column */
.bracket--double .bcol--side-l.bcol--leading:has(+ .bcol--mid),
.bracket:not(.bracket--double) .bcol--leading:has(+ .bcol--final) {
  margin-right: calc(var(--cgap) * 2 + 12px);
}
.bracket--double .bcol--mid:has(+ .bcol--side-r.bcol--trailing) {
  margin-right: calc(var(--cgap) * 2 + 12px);
}

/* ---- editable (admin) / inspectable (portal) ------------------------- */
.is-editable .bnode,
.is-inspectable .bnode { cursor: pointer; }
[data-match-base] .bnode { cursor: pointer; }

/* ---- compact + expandable (The Overworld) ---------------------------- */
.bracket--compact { --colw: 172px; }
.bracket--compact .bteam { padding: 6px 8px; font-size: 14px; gap: 7px; }
.bracket--compact .bteam__name { font-size: 14px; }
.bracket--compact .bracket__rows { min-height: 240px; }
.bracket--compact .bcol__label { font-size: 11px; letter-spacing: 1px; }
.bracket--compact .bcol--champ { width: 150px; min-width: 150px; flex-basis: 150px; }

.bracket-expander { position: relative; }
.bracket-expander:not(.is-open) .bracket__rows {
  max-height: 380px;
  overflow-y: hidden;
}
.bracket-expander__fade {
  position: absolute;
  left: 0; right: 0; bottom: 44px;
  height: 90px;
  pointer-events: none;
  background: linear-gradient(transparent, #10131C);
}
.bracket-expander.is-open .bracket-expander__fade { display: none; }
.bracket-expander__btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 11px 14px;
  font-family: var(--font-pixel, monospace);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #C4CEDD;
  background: rgba(255, 255, 255, .05);
  border: 2px dashed rgba(255, 255, 255, .2);
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.bracket-expander__btn:hover { color: #fff; border-color: var(--accent); }

.bracket__champion:not(.is-set) {
  border-color: transparent;
  padding: 0;
  min-height: 0;
}

/* larger fields: tighter columns + smaller round labels for long i18n strings */
.bracket--teams-8 .bcol__label,
.bracket--teams-16 .bcol__label {
  font-size: 10.5px;
  letter-spacing: 0.45px;
}
.bracket--teams-32 .bcol__label,
.bracket--teams-64 .bcol__label {
  font-size: 9.5px;
  letter-spacing: 0.4px;
}
.bracket--teams-128 .bcol__label,
.bracket--teams-256 .bcol__label,
.bracket--teams-512 .bcol__label {
  font-size: 8.5px;
  letter-spacing: 0.3px;
}
.bracket--teams-32 .bcol, .bracket--teams-64 .bcol { --colw: 160px; }
.bracket--teams-32 .bteam, .bracket--teams-64 .bteam { padding: 6px 9px; font-size: 13px; }
.bracket--teams-128 .bcol, .bracket--teams-256 .bcol, .bracket--teams-512 .bcol { --colw: 150px; }
.bracket--teams-128 .bteam, .bracket--teams-256 .bteam, .bracket--teams-512 .bteam { padding: 5px 8px; font-size: 12.5px; }
.bracket--teams-32 .bcol, .bracket--teams-64 .bcol,
.bracket--teams-128 .bcol, .bracket--teams-256 .bcol, .bracket--teams-512 .bcol {
  width: var(--colw); min-width: var(--colw); flex-basis: var(--colw);
}

/* ---- match inspect modal --------------------------------------------- */
.match-inspect {
  background: #141A26;
  border: 2px solid #2B3650;
  box-shadow: 6px 6px 0 #05070C;
  color: #EAF0F8;
}
.match-inspect__head { border-bottom: 2px solid #2B3650; }
.match-inspect__teams { border: 2px solid #2B3650; }
.match-inspect__team {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 15px;
}
.match-inspect__team + .match-inspect__team { border-top: 2px solid #2B3650; }
.match-inspect__team.is-win { background: color-mix(in srgb, var(--accent, #54E36B) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent, #54E36B); }
.match-inspect__team.is-lose { opacity: .55; }
.match-inspect__seed {
  flex: none;
  min-width: 20px;
  text-align: center;
  font-family: var(--font-pixel, monospace);
  font-size: 9px;
  color: #8A98AD;
}
.match-inspect__name { flex: 1; min-width: 0; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-inspect__tbd { color: #4C566B; font-style: italic; font-weight: 500; }
.match-inspect__crown { flex: none; }
.match-inspect__score {
  flex: none;
  min-width: 26px;
  text-align: center;
  font-family: var(--font-pixel, monospace);
  font-size: 15px;
  color: #EAF0F8;
}
.match-inspect__team.is-win .match-inspect__score { color: var(--accent, #54E36B); }
.match-inspect__desc { margin-top: 14px; font-size: 14px; line-height: 1.6; color: #8A98AD; }
.match-inspect__label {
  font-family: var(--font-pixel, monospace);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #C8BFE0;
  margin-bottom: 8px;
}
.match-inspect__games { margin-top: 16px; }
.match-inspect__game { border: 2px solid #222B3A; background: #10131C; padding: 8px 10px; }
.match-inspect__game + .match-inspect__game { margin-top: 8px; }
.match-inspect__game-row { display: flex; align-items: center; gap: 10px; }
.match-inspect__game-no {
  flex: none;
  min-width: 18px;
  text-align: center;
  font-family: var(--font-pixel, monospace);
  font-size: 9px;
  color: var(--accent, #54E36B);
}
.match-inspect__game-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: #EAF0F8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-inspect__game-ft {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #FDE68A;
  opacity: 0.92;
}
.match-inspect__game-score { flex: none; display: flex; align-items: center; gap: 6px; font-family: var(--font-pixel, monospace); font-size: 13px; color: #FCC433; }
.match-inspect__game-score-team {
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
}
.match-inspect__game-score-team--a { color: #FCA5A5; }
.match-inspect__game-score-team--b { color: #93C5FD; }
.match-inspect__game-score-nums { flex: none; color: #FCC433; }
.match-inspect__game-video {
  flex: none;
  font-weight: 700;
  font-size: 12px;
  color: #FF6B6B;
  text-decoration: none;
}
.match-inspect__game-video:hover { text-decoration: underline; }
.match-inspect__game-desc { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: #8A98AD; }

/* ---- fit-to-width bracket shell (Overworld + Portal) ----------------- */
.bracket-fit {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: auto;
  overflow-y: visible;
}

.bracket-fit [data-bracket-fit-target] {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  transform-origin: top center;
}

.bracket-fit__scaler {
  display: block;
  max-width: 100%;
  overflow: visible;
}

.bracket-fit [data-bracket-collapse] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 100%;
}

/* One-sided on mobile, split on desktop — The Overworld */
@media (max-width: 768px) {
  .bracket-fit[data-overworld-bracket] .bracket-fit__single {
    display: block !important;
    width: 100%;
    max-width: 100%;
  }

  .bracket-fit[data-overworld-bracket] .bracket-fit__double {
    display: none !important;
  }

  /* The Portal: always one-sided on mobile */
  .portal .bracket-fit #bracket-single {
    display: block !important;
    width: 100%;
    max-width: 100%;
  }

  .portal .bracket-fit #bracket-double {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .bracket-fit[data-overworld-bracket] .bracket-fit__single {
    display: none !important;
  }

  .bracket-fit[data-overworld-bracket] .bracket-fit__double {
    display: block !important;
  }
}

.bracket-fit .bracket-roundbar {
  align-self: center;
}

.bracket-fit .bracket__rows {
  justify-content: center;
  overflow-x: visible;
}

/* Fit-to-width: shared column sizing for one-sided + split */
.bracket-fit .bracket {
  --colw: 128px;
  --cgap: 8px;
  --vgap: 8px;
}

.bracket-fit .bracket:not(.bracket--double) .bcol--champ {
  width: var(--colw);
  min-width: var(--colw);
  flex-basis: var(--colw);
}

/* Tighter split columns so more fits before scaling */
.bracket-fit .bracket--double .bcol--mid .bcol__champwrap {
  top: 2px;
}

.bracket-fit .bracket--double .bcol--mid .bcol__champwrap .bracket__champion {
  padding: 6px 8px;
}

.bracket-fit .bracket .bteam {
  padding: 4px 6px;
  font-size: 13px;
  gap: 6px;
}
.bracket-fit .bracket .bteam__name {
  font-size: 13.5px;
}

.bracket-fit .bracket .bcol__label {
  font-size: 8px;
  letter-spacing: 0.3px;
}

.bracket-fit .bracket--double .bcol--mid,
.bracket-fit .bracket:not(.bracket--double) .bcol--final {
  width: calc(var(--colw) + 18px);
  min-width: calc(var(--colw) + 18px);
  flex-basis: calc(var(--colw) + 18px);
}

.bracket-fit .bracket.bracket--few-rounds {
  --cgap: 12px;
}

.bracket-fit .bracket .bracket__rows {
  min-height: 160px;
}

.bracket-fit .bracket .bracket__champion {
  padding: 8px 10px;
  font-size: 11px;
  gap: 6px;
}

.bracket-fit .bracket .bracket__champion-name {
  font-size: 9px;
  letter-spacing: 0.3px;
}

.bracket-fit .bracket .bracket__champion-crown {
  font-size: 13px;
}

/* Overworld: show full split preview — no vertical crop */
.bracket-fit .bracket-expander:not(.is-open) .bracket__rows {
  max-height: none;
  overflow-y: visible;
}

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 900px) {
  .bracket { --cgap: 16px; --vgap: 12px; --colw: 148px; }
  .bteam { font-size: 15px; padding: 7px 9px; }
  .bcol__label { font-size: 13px; }
}

.bracket-roundbar--mobile {
  display: none;
}

@media (max-width: 768px) {
  .bracket-view-toggle { display: none; }

  .bracket-roundbar--mobile[hidden] {
    display: none !important;
  }

  .bracket-roundbar--mobile {
    display: flex;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    gap: 10px;
  }

  .bracket-roundbar--mobile .bracket-roundbar__btn {
    min-width: 0;
    flex: 1 1 0;
    padding: 10px 12px;
    font-size: 10px;
  }

  .bracket-roundbar--mobile .bracket-roundbar__info {
    flex: 1.4 1 120px;
    text-align: center;
    color: #A79BC2;
    font-family: 'Minecraft', 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.35;
    align-self: center;
  }

  .bracket--mobile-pager .bcol--mobile-hidden {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .bracket--mobile-pager.is-mobile-measuring .bcol--mobile-hidden {
    height: auto !important;
    overflow: visible !important;
    visibility: hidden;
    opacity: 0;
  }

  .bracket--mobile-pager.is-mobile-scrolling .bcol--mobile-hidden {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    visibility: visible;
    opacity: 1;
  }

  .bracket--mobile-pager.is-mobile-scrolling .bcol {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1;
  }

  .bracket--mobile-pager {
    --colw: min(100%, 280px);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }

  .bracket-fit[data-overworld-bracket] .bracket-fit__single,
  .portal .bracket-fit #bracket-single {
    width: 100%;
    max-width: 100%;
  }

  .bracket-fit[data-overworld-bracket] .bracket-expander,
  .portal .bracket-fit #bracket-single .bracket-expander,
  .portal .bracket-fit #bracket-single [data-bracket-collapse] {
    width: 100%;
    max-width: 100%;
  }

  .bracket--mobile-pager .bracket__rows {
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 0;
    width: max-content;
    min-width: 100%;
    overflow: visible;
    transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }

  @media (prefers-reduced-motion: reduce) {
    .bracket--mobile-pager .bracket__rows {
      transition: none;
    }
  }

  .bracket-fit [data-bracket-fit-target]:has(.bracket--mobile-pager) {
    width: 100%;
    max-width: 100%;
    transform: none !important;
  }

  .bracket-fit:has(.bracket--mobile-pager) {
    min-height: 0 !important;
  }

  .bracket-fit:has(.bracket--mobile-pager) .bracket-roundbar--pair:not(.bracket-roundbar--mobile) {
    display: none;
  }
}