#knockoutTab {
  max-height: 100vh; /* fit to screen height */
  overflow-y: auto;  /* enable vertical scroll */
  padding-right: 6px; /* little space so scrollbar doesn't overlap */
  margin-top: 80px;
}

/* Optional: make scrollbar look nicer */
#knockoutTab::-webkit-scrollbar {
  width: 8px;
}
#knockoutTab::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}
#knockoutTab::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

#knockoutTab .bracket-frame{display:grid;grid-template-columns:1fr 350px 1fr;gap:14px;align-items:start;margin-bottom: 30px;}
#knockoutTab .bracket-side{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;}
#knockoutTab .left-side{direction:ltr;} #knockoutTab .right-side{direction:rtl;} #knockoutTab .right-side>*{direction:ltr;}

#knockoutTab .side-round>h3,
#knockoutTab .center-final>h3{color:#fff;text-align:center;margin:0 0 4px;font-weight:700;letter-spacing:.2px;font-size:15px}

/* Center trophy */
#knockoutTab .bracket-center {
  display: grid;
  grid-template-rows: auto auto; /* cup first, then final */
  gap: 7px;
  justify-items: center;
}

#knockoutTab .cup-wrap {
  grid-row: 1; /* cup goes to the first row */
  margin-top: -5px;
}

#knockoutTab .center-final {
  grid-row: 2; /* final match goes to the second row */
}
#knockoutTab .cup-image{max-width:138px;height:auto;opacity:.95}

/* Cards */
#knockoutTab .ko-card{background:rgb(20, 20, 20);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:8px;margin-bottom:6px;box-shadow:0 3px 10px rgba(0,0,0,.22);font-size:12.5px; width: 350px;  min-width: 350px;
  max-width: 350px;}
#knockoutTab .ko-placeholder{border:1px dashed rgba(255,255,255,.22);color:#f8f8f8}
#knockoutTab .ko-placeholder-row{padding:6px;text-align:center}

/* Two-row compact tie */
#knockoutTab .ko-row-2{display:grid;gap:15px}

/* LEFT row: [User][Team][Home][Away][CB] */
#knockoutTab .ko-team-row{display:grid;align-items:center;gap:6px;grid-template-columns:96px minmax(120px,1fr) 34px 34px 18px; justify-content: center; margin: 0px;}

/* RIGHT row: [CB][Home][Away][Team][User] */
#knockoutTab .ko-team-row.right{grid-template-columns:18px 34px 34px minmax(120px,1fr) 96px}

/* Inputs/selects compact */
#knockoutTab .user-dropdown,#knockoutTab .score-input{height:24px;width:100%;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;padding:0 6px;font-size:12.5px}
#knockoutTab .user-dropdown:disabled{opacity:.6;cursor:not-allowed}
#knockoutTab .score-input{text-align:center;font-weight:700;font-variant-numeric:tabular-nums;padding:0;height: 20px; width: 30px;font-size: 12px;}
#knockoutTab .score-input::-webkit-outer-spin-button,#knockoutTab .score-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#knockoutTab .score-input[type="number"]{-moz-appearance:textfield}

/* Team name centered */
#knockoutTab .team-name{color:#fff;text-align:center;justify-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Winner checkbox */
#knockoutTab .winner-checkbox{width:16px;height:16px;justify-self:center;accent-color:#4ade80}

.ko-team-row.winner-row {background-color: rgba(0, 128, 0, 0.664); border-radius:8px; }

#knockoutTab .side-round .round-body{
  display:grid;            /* also set in JS */
  align-content:start;
  gap:6px;                 /* grid gap controls spacing; cards have margin:0 */
}

/* Cards inside the positioning grid must not add external margin */
#knockoutTab .side-round .round-body .ko-card{ margin:0; }

/* Let the stretched card center its own inner content nicely */
#knockoutTab .side-round .round-body .ko-card,
#knockoutTab .side-round .round-body .ko-placeholder{
  display:grid;
  align-content:center;
}

#knockoutTab .ko-card { position: relative; }             /* anchor for the pseudo-element */
#knockoutTab .side-round .round-body { --rowH: 18px; }    /* keep in sync with your JS ROW_H_PX */

/* tune link length (how far the line reaches into the gap toward the adjacent column) */
:root { --linkLen: 18px; }  /* feel free to bump to 20–24px if you widen column gaps */

/* A helper that draws a vertical line + two horizontal ticks in one pseudo-element */
@supports (background: linear-gradient(#fff, #fff)) {
  /* ---- Quarter-finals connectors: connect to two R16 ties ---- */
  /* LEFT side: draw to the LEFT of the QF card */
  #knockoutTab .left-side .round-1-4 .round-body .ko-card::before,
  /* When first round is 1/16 (R32), the next round is 1/8; connect those too */
  #knockoutTab .left-side .round-1-8:first-child .round-body .ko-card.has-r32::before {
    content: "";
    position: absolute;
    /* place the connector box to the left of the card */
    right: 100%;
    width: var(--linkLen);
    height: calc(var(--rowH) * 4);              /* BASE_SPAN (4 rows) */
    top: calc(50% - (var(--rowH) * 2));         /* center vertically */
    /* three lines using multiple backgrounds:
       1) vertical at the box's right edge
       2) top horizontal at the top edge
       3) bottom horizontal at the bottom edge
    */
    background:
      linear-gradient(to bottom, rgb(250, 249, 249), rgb(250, 249, 249)) right center / 2px 100% no-repeat,
      linear-gradient(to right,  rgb(250, 249, 249), rgb(250, 249, 249)) left top    / 100% 2px  no-repeat,
      linear-gradient(to right,  rgb(250, 249, 249), rgb(250, 249, 249)) left bottom / 100% 2px  no-repeat;
    pointer-events: none;
  }

  /* RIGHT side: mirror to the RIGHT of the QF card */
  #knockoutTab .right-side .round-1-4 .round-body .ko-card::before,
  #knockoutTab .right-side .round-1-8:first-child .round-body .ko-card.has-r32::before {
    content: "";
    position: absolute;
    left: 100%;
    width: var(--linkLen);
    height: calc(var(--rowH) * 4);
    top: calc(50% - (var(--rowH) * 2));
    background:
      linear-gradient(to bottom, rgb(250, 249, 249), rgb(250, 249, 249)) left center / 2px 100% no-repeat,
      linear-gradient(to left,   rgb(250, 249, 249), rgb(250, 249, 249)) right top    / 100% 2px  no-repeat,
      linear-gradient(to left,   rgb(250, 249, 249), rgb(250, 249, 249)) right bottom / 100% 2px  no-repeat;
    pointer-events: none;
  }

  /* ---- Semi-finals connectors: connect to two QF ties (spans 8 rows total) ---- */
  #knockoutTab .left-side .round-1-2 .round-body .ko-card::before {
    content: "";
    position: absolute;
    right: 100%;
    width: var(--linkLen);
    height: calc(var(--rowH) * 8);              /* span for two QFs = 8 rows */
    top: calc(50% - (var(--rowH) * 4));
    background:
      linear-gradient(to bottom, rgb(250, 249, 249), rgb(250, 249, 249)) right center / 2px 100% no-repeat,
      linear-gradient(to right,  rgb(250, 249, 249), rgb(250, 249, 249)) left top    / 100% 2px  no-repeat,
      linear-gradient(to right,  rgb(250, 249, 249), rgb(250, 249, 249)) left bottom / 100% 2px  no-repeat;
    pointer-events: none;
  }
  #knockoutTab .right-side .round-1-2 .round-body .ko-card::before {
    content: "";
    position: absolute;
    left: 100%;
    width: var(--linkLen);
    height: calc(var(--rowH) * 8);
    top: calc(50% - (var(--rowH) * 4));
    background:
      linear-gradient(to bottom, rgb(250, 249, 249), rgb(250, 249, 249)) left center / 2px 100% no-repeat,
      linear-gradient(to left,   rgb(250, 249, 249), rgb(250, 249, 249)) right top    / 100% 2px  no-repeat,
      linear-gradient(to left,   rgb(250, 249, 249), rgb(250, 249, 249)) right bottom / 100% 2px  no-repeat;
    pointer-events: none;
  }

  /* Optional: soften the line color a bit for dark backgrounds */
  #knockoutTab .ko-card::before {
    filter: drop-shadow(0 0 1px rgba(0,0,0,.35));
  }
}

:root { --finalLink: 18px; }  /* tweak 24–36px to taste */ 

/* draw short lines out of the FINAL card to left & right */
#knockoutTab .center-final .ko-card::before,
#knockoutTab .center-final .ko-card::after{
  content:"";
  position:absolute;
  top:50%;
  height:2px;
  width:var(--finalLink);
  background:rgb(250, 249, 249);
  transform:translateY(-50%);
  pointer-events:none;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.35));
}
#knockoutTab .center-final .ko-card::before{ /* to the LEFT */
  left:calc(0px - var(--finalLink));
}
#knockoutTab .center-final .ko-card::after{  /* to the RIGHT */
  right:calc(0px - var(--finalLink));
}

#knockoutTab .center-final .ko-team-row {
  grid-template-columns: var(--userW) minmax(160px, max-content) 24px 24px;
  /* removes the "away" score column */
}

#knockoutTab .ko-card {
  overflow: visible;
}

/* 3) standardise the width we reserve for the player dropdown */
:root { --userW: 120px; }   /* adjust if you want a wider select */

/* Left rows: [User][Team][Home][Away][CB] */
#knockoutTab .ko-team-row {
  grid-template-columns: var(--userW) minmax(120px,1fr) 34px 34px 18px;
}

/* Right rows: [CB][Home][Away][Team][User] */
#knockoutTab .ko-team-row.right {
  grid-template-columns: 18px 34px 34px minmax(120px,1fr) var(--userW);
}

/* Make the select respect the column width and not grow */
#knockoutTab .user-dropdown {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;            /* cooperate with the grid */
  white-space: nowrap;
  overflow: hidden;
}

#knockoutTab .user-dropdown option {
  background: #333;
}

#knockoutTab .ko-team-row > * { min-width: 0; }

/* Same fixed width you’re using for the user select */
:root { --userW: 120px; }

/* LEFT single-leg row: [User][Team][Score][WinnerCB] */
#knockoutTab .ko-team-row.single-leg.left {
  grid-template-columns: var(--userW) minmax(120px,1fr) 34px 18px;
}

/* RIGHT single-leg row: [WinnerCB][Score][Team][User] */
#knockoutTab .ko-team-row.single-leg.right {
  grid-template-columns: 18px 34px minmax(120px,1fr) var(--userW);
}



:root {
  --koW: 350px;     /* card width (matches what you already use) */
  --koH: 68px;      /* card height – tune to your taste (60–76px works well) */
}

#knockoutTab .ko-card,
#knockoutTab .ko-placeholder {
  width: var(--koW);
  min-width: var(--koW);
  max-width: var(--koW);
  height: var(--koH);
  min-height: var(--koH);
  /* keep content centered inside fixed-height cards */
  display: grid;
  align-content: center;
}

/* 2) Make the side columns hug their content (the 350px cards) */
#knockoutTab .left-side {
  grid-template-columns: repeat(3, max-content) !important;
  justify-content: start !important;   /* push columns to the outer LEFT edge */
}
#knockoutTab .right-side {
  grid-template-columns: repeat(3, max-content) !important;
  justify-content: end !important;     /* push columns to the outer RIGHT edge */
}

/* 3) Anchor the cards inside each round column to the outer edges */
#knockoutTab .left-side .round-body  { justify-items: start !important; }
#knockoutTab .right-side .round-body { justify-items: end   !important; }
#knockoutTab .left-side  .ko-card    { justify-self: start !important; }
#knockoutTab .right-side .ko-card    { justify-self: end   !important; }



:root { --rightRailOffset: 20px; }  /* try 24–60px to taste */

#knockoutTab .right-side {
  margin-left: var(--rightRailOffset);
}



:root { --leftRailOffset: 2px; }  /* try 24–60px to taste */

#knockoutTab .left-side {
  margin-right: var(--leftRailOffset);
}


/* Mobile */
@media (max-width:900px){

  #knockoutTab{
    margin-top: 130px;
  }

  #knockoutTab .bracket-frame{margin-top: 30px;}

  #knockoutTab .ko-card{background:rgb(20, 20, 20);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:4px;margin-bottom:6px;box-shadow:0 3px 10px rgba(0,0,0,.22);font-size:12px}
  #knockoutTab .ko-row-2{display:grid;gap:10px}


  :root { --rightRailOffset: 10px; }  /* try 24–60px to taste */

#knockoutTab .right-side {
  margin-left: var(--rightRailOffset);
}

}