/* ===== bracket-left ===== */
:root{
  --row: 12px;
  --round1Width: 135px;
  --roundNWidth: 75px;
  --padLeft: 4px;
  --padRight: 4px;
}

body{
  font-family:sans-serif;
  font-size:11px;
  padding:10px;
  line-height:1.1;
}

main{
  display:flex;
  flex-direction:row;
  align-items:stretch;
}

/* rounds */
.round{
  display:flex;
  flex-direction:column;
  justify-content:center;
  list-style:none;
  padding:0;
  margin:0;
}

/* widths */
.round-1{ width:var(--round1Width); }
.round-2,
.round-3,
.round-4,
.round-5{ width:var(--roundNWidth); }

/* game rows are one fixed grid unit */
.round > li.game{
  flex: 0 0 var(--row);
  height: var(--row);
  min-height: var(--row);
  box-sizing:border-box;
  padding-left:var(--padLeft);
  display:flex;
  align-items:center;
  white-space:nowrap;
}

/* spacers must never collapse and must be allowed to grow */
.round > li.spacer,
.round > li.game-spacer{
  flex: 1 0 var(--row);
  min-height: var(--row);
  box-sizing:border-box;
  overflow:hidden;
}

/* half size caps */
.round > li.spacer:first-child,
.round > li.spacer:last-child{
  flex: 0.5 0 var(--row);
}

/* draw connector verticals, scoped by side */
.bracketShell.left li.game-spacer{
  border-right:1px solid #aaa;
  border-left:none;
}

.bracketShell.right li.game-spacer{
  border-left:1px solid #aaa;
  border-right:none;
}

/* force renderable content so empty lis are not treated as zero height */
.round > li.spacer::before,
.round > li.game-spacer::before{
  content:"\00a0";
  display:block;
  height:1px;
}

/* text and borders */
li.game span{
  margin-left:auto;
  margin-right:var(--padRight);
  font-size:10px;
}

li.game-top{
  border-bottom:1px solid #aaa;
}

li.game-top-low{
  border-bottom:1px solid #aaa;
}

/* left side: second segment vertical on the right */
.bracketShell.left li.game-top-low{
  border-right:1px solid #aaa;
  border-left:none;
}

li.game-bot-sm{
  font-size:9px;
}

/* left side: bottom connector on the right */
.bracketShell.left li.game-bot-sm{
  border-right:1px solid #aaa;
  border-left:none;
}

li.game-bot-blank{
  font-size:9px;
}

/* optional styling */
li.game.hit{
  background: rgba(255,230,0,0.5);
}

li.game.miss{
  text-decoration: line-through;
}

div.head{
  width:65%;
  margin:auto;
}

.custom{
  width:55px !important;
}

/* center text for rounds 2+ */
.round-2 li.game,
.round-3 li.game,
.round-4 li.game,
.round-5 li.game{
  justify-content:center;   /* center the flex content */
  text-align:center;
  padding-left:0;
}

/* undo the score being pushed to the far right */
.round-2 li.game span,
.round-3 li.game span,
.round-4 li.game span,
.round-5 li.game span{
  margin-left:6px;          /* small gap after team name */
  margin-right:0;
}

/* ===== bracket-right ===== */
:root{
  --row: 12px;
  --round1Width: 135px;
  --roundNWidth: 75px;
  --padLeft: 4px;
  --padRight: 4px;
}

body{
  font-family:sans-serif;
  font-size:11px;
  padding:10px;
  line-height:1.1;
}

main{
  display:flex;
  flex-direction:row;
  align-items:stretch;
}

/* rounds */
.round{
  display:flex;
  flex-direction:column;
  justify-content:center;
  list-style:none;
  padding:0;
  margin:0;
}

/* widths */
.round-1{ width:var(--round1Width); }
.round-2,
.round-3,
.round-4,
.round-5{ width:var(--roundNWidth); }

/* game rows are one fixed grid unit */
.round > li.game{
  flex: 0 0 var(--row);
  height: var(--row);
  min-height: var(--row);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  white-space:nowrap;
}

/* spacers must never collapse and must be allowed to grow */
.round > li.spacer,
.round > li.game-spacer{
  flex: 1 0 var(--row);
  min-height: var(--row);
  box-sizing:border-box;
  overflow:hidden;
}

/* half size caps */
.round > li.spacer:first-child,
.round > li.spacer:last-child{
  flex: 0.5 0 var(--row);
}

/* right side: additional connector borders live on the left */
.bracketShell.right li.game-top-low{
  border-left:1px solid #aaa;
  border-right:none;
}

.bracketShell.right li.game-bot-sm{
  border-left:1px solid #aaa;
  border-right:none;
}

/* force renderable content so empty lis are not treated as zero height */
.round > li.spacer::before,
.round > li.game-spacer::before{
  content:"\00a0";
  display:block;
  height:1px;
}

/* ---------- TEXT & ALIGNMENT ---------- */

/* round 1: left justified with small inset */
.round-1 li.game{
  justify-content:flex-start;
  text-align:left;
  padding-left:6px;
  padding-right:0;
}

.round-1 li.game span{
  margin-left:6px;
  margin-right:0;
  font-size:10px;
}

/* rounds 2+: centered */
.round-2 li.game,
.round-3 li.game,
.round-4 li.game,
.round-5 li.game{
  justify-content:center;
  text-align:center;
  padding-left:0;
  padding-right:0;
}

.round-2 li.game span,
.round-3 li.game span,
.round-4 li.game span,
.round-5 li.game span{
  margin-left:6px;
  margin-right:0;
  font-size:10px;
}

/* ---------- LINES ---------- */

li.game-top{
  border-bottom:1px solid #aaa;
}

li.game-top-low{
  border-bottom:1px solid #aaa;
}

li.game-bot-sm{
  font-size:9px;
}

li.game-bot-blank{
  font-size:9px;
}

/* optional styling */
li.game.hit{
  background: rgba(255,230,0,0.5);
}

li.game.miss{
  text-decoration: line-through;
}

div.head{
  width:65%;
  margin:auto;
}

.custom{
  width:55px !important;
}

/* ===== finalfour-left.css ===== */
.ff_left_only{
  display: flex;
  align-items: stretch;
  height: 550px;
  margin-top: -120px;
  position: relative;
}

.ff_left_only .round{
  height: 100%;
}

/* per column width controls */
.ff_left_only .ff_col1{ width: var(--ff-c1, 100px); }
.ff_left_only .ff_col2{ width: var(--ff-c2, 100px); }
.ff_left_only .ff_col3{ width: var(--ff-c3, 100px); }
.ff_left_only .ff_col4{ width: var(--ff-c4, 100px); }
.ff_left_only .ff_col5{ width: var(--ff-c5, 100px); }

/* mid columns are invisible spacing columns */
.ff_midcol li.game,
.ff_midcol li.game-spacer{
  border: none !important;
}

.ff_midcol{
  color: transparent;
}

/* shared midline style */
.ff_midline{
  position: absolute;
  height: 0;
  border-top: 1px solid #aaa;
  pointer-events: none;
  z-index: 5;
}

/* column 2 line */
.ff_midline2{
  top: var(--ff-line2-top, calc(50% - 70px));
  left: var(--ff-c1, 75px);
  width: var(--ff-c2, 75px);
}

/* column 4 line */
.ff_midline4{
  top: var(--ff-line4-top, var(--ff-line2-top, calc(50% + 70px)));
  left: calc(var(--ff-c1, 100px) + var(--ff-c2, 100px) + var(--ff-c3, 100px));
  width: var(--ff-c4, 75px);
}

/* COLUMN 5: move the vertical connector from right side to left side */
.ff_left_only .ff_col5 li{
  border-right: none !important;
}

.ff_left_only .ff_col5 li.game-spacer,
.ff_left_only .ff_col5 li.game-top-low,
.ff_left_only .ff_col5 li.game-bot-sm{
  border-right: none !important;
  border-left: 1px solid #aaa !important;
}

/* Column 2: teams that sit on the midline (scoped so columns 1-3 stay locked) */
.ff_midline2 .ff_midline_team{
  position: absolute;
  left: 50%;
  top: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* keep them tight to the line */
.ff_midline2 .ff_midline_team_top{
  transform: translate(-50%, calc(-100% - var(--ff-line2-team-gap, 2px)));
}

.ff_midline2 .ff_midline_team_bot{
  transform: translate(-50%, var(--ff-line2-team-gap, 2px));
}

/* match bracket-left.css sizing for small bottom team */
.ff_midline2 .game-bot-sm{
  font-size: 9px;
}

/* remove underline coming from game-top-low when used as a label */
.ff_midline2 .game-top-low{
  border-bottom: none !important;
  border-right: none !important;
}

/* Column 4: center teams on the midline exactly like column 2 */
.ff_midline4 .ff_midline_team{
  position: absolute;
  left: 50%;
  top: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.ff_midline4 .ff_midline_team_top{
  transform: translate(-50%, calc(-100% - var(--ff-line2-team-gap, 2px)));
}

.ff_midline4 .ff_midline_team_bot{
  transform: translate(-50%, var(--ff-line2-team-gap, 2px));
}

/* column 4 top team fix only */
.ff_c4_top_fix{
  font-size: 11px;
  line-height: 1.1;
  border-bottom: none !important;
  border-right: none !important;
}

/* column 4 bottom team fix only */
.ff_c4_bot_fix{
  font-size: 9px;
  line-height: 1.1;
  border: none !important;
}

/* add the missing space before points on midline top teams only */
.ff_midline2 .ff_midline_team_top span,
.ff_midline4 .ff_midline_team_top span{
  display: inline-block;
  margin-left: 4px;
}

/* ===== inline CSS extracted from Results_finalfour_fixed.html ===== */
* { box-sizing: border-box; }
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f5f5f5;
  color: #222;
}
.page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 18px 18px 28px 18px;
}
h1 {
  margin: 0 0 12px 0;
  font-size: 34px;
  font-weight: 700;
}

.topbar {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  padding: 14px;
  margin-bottom: 16px;
}

.snap-row {
  display: flex;
  width: 100%;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  overflow: hidden;
}

.snap-btn {
  flex: 1 1 0;
  border: 0;
  border-right: 1px solid #cfcfcf;
  background: #fff;
  padding: 12px 10px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  text-align: center;
  user-select: none;
  white-space: nowrap;
}
.snap-btn:last-child { border-right: 0; }
.snap-btn:hover { background: #f3f3f3; }
.snap-btn.active { background: #3b78b6; color: white; }
.snap-btn.disabled { background: #fafafa; color: #aaa; cursor: not-allowed; }

.snap-btn .short { display: none; }
.snap-btn .long { display: inline; }

@media (max-width: 700px) {
  .snap-btn { padding: 10px 6px; font-size: 13px; }
  .snap-btn .long { display: none; }
  .snap-btn .short { display: inline; }
}

/* ===== FINAL OVERRIDES FOR SIDE SPECIFIC LINES AND CENTERING ===== */

/* vertical connectors */
.bracketShell.left li.game-spacer{
  border-right: 1px solid #aaa !important;
  border-left: none !important;
}

.bracketShell.right li.game-spacer{
  border-left: 1px solid #aaa !important;
  border-right: none !important;
}

/* short vertical stubs on the line side only */
.bracketShell.left li.game-top-low,
.bracketShell.left li.game-bot-sm{
  border-right: 1px solid #aaa !important;
  border-left: none !important;
}

.bracketShell.right li.game-top-low,
.bracketShell.right li.game-bot-sm{
  border-left: 1px solid #aaa !important;
  border-right: none !important;
}

/* center all team text from round 2 onward, including bottom slots */
.bracketShell.left .round-2 li.game,
.bracketShell.left .round-3 li.game,
.bracketShell.left .round-4 li.game,
.bracketShell.left .round-5 li.game,
.bracketShell.right .round-2 li.game,
.bracketShell.right .round-3 li.game,
.bracketShell.right .round-4 li.game,
.bracketShell.right .round-5 li.game{
  justify-content: center !important;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.bracketShell.left .round-2 li.game-bot-sm,
.bracketShell.left .round-3 li.game-bot-sm,
.bracketShell.left .round-4 li.game-bot-sm,
.bracketShell.left .round-5 li.game-bot-sm,
.bracketShell.left .round-2 li.game-bot-blank,
.bracketShell.left .round-3 li.game-bot-blank,
.bracketShell.left .round-4 li.game-bot-blank,
.bracketShell.left .round-5 li.game-bot-blank,
.bracketShell.right .round-2 li.game-bot-sm,
.bracketShell.right .round-3 li.game-bot-sm,
.bracketShell.right .round-4 li.game-bot-sm,
.bracketShell.right .round-5 li.game-bot-sm,
.bracketShell.right .round-2 li.game-bot-blank,
.bracketShell.right .round-3 li.game-bot-blank,
.bracketShell.right .round-4 li.game-bot-blank,
.bracketShell.right .round-5 li.game-bot-blank{
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ensure point spans do not float away from centering */
.bracketShell.left .round-2 li.game span,
.bracketShell.left .round-3 li.game span,
.bracketShell.left .round-4 li.game span,
.bracketShell.left .round-5 li.game span,
.bracketShell.right .round-2 li.game span,
.bracketShell.right .round-3 li.game span,
.bracketShell.right .round-4 li.game span,
.bracketShell.right .round-5 li.game span{
  float: none !important;
  margin: 0 0 0 6px !important;
}

.live-row {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.live-btn {
  flex: 0 0 auto;
  border: 1px solid #cfcfcf;
  background: #ffffff;
  color: #1b5e20;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.live-btn:hover { background: #f3f3f3; }
.live-btn.active {
  background: #1b5e20;
  color: #ffffff;
  border-color: #1b5e20;
}

.main {
  display: grid;
  grid-template-columns: 0.32fr 0.68fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  .main { grid-template-columns: 1fr; }
}

.panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  padding: 12px;
}
.panel-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 700;
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.controls input[type="text"] {
  width: 190px;
  max-width: 100%;
  padding: 8px 10px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}
.controls button {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: #0066cc;
  color: white;
  cursor: pointer;
}
.controls button:hover { background: #0052a3; }

.table-wrap {
  overflow: auto;
  max-height: 560px;
  border: 1px solid #ddd;
  border-radius: 6px;
}
table {
  border-collapse: collapse;
  width: 100%;
  background: white;
}
th, td {
  border-bottom: 1px solid #eee;
  padding: 7px 8px;
  font-size: 13px;
  white-space: nowrap;
}
th {
  background: #f3f3f3;
  text-align: left;
  font-weight: 700;
}
td.num, th.num { text-align: right; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #e9f2ff; }
tr.selected { background: #fff2da; }

.subhead {
  margin: 10px 0 8px 0;
  font-weight: 700;
  color: #333;
}
.note {
  margin-top: 10px;
  color: #666;
  font-size: 13px;
}

.empty {
  padding: 14px;
  color: #666;
  background: #fafafa;
  border: 1px dashed #ddd;
  border-radius: 8px;
}

.error {
  margin-top: 10px;
  padding: 10px;
  background: #ffebee;
  color: #b71c1c;
  border-radius: 6px;
  border: 1px solid #f3b9c0;
}

.bracketHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.bracketHeader h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
.bracketHeader .sub {
  color: #666;
  font-size: 13px;
}

.pickLine { display: inline; }
.pickCorrect {
  background: #fff59d;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 400;
}
.pickWrong {
  text-decoration: line-through;
  color: #777;
  font-weight: 400;
}
.pickActual {
  display: block;
  font-size: 11px;
  color: #333;
  margin-top: 2px;
  font-weight: 400;
}

.pickActualInCell {
  color: #333;
  font-weight: 400;
}

.bracketShell {
  width: 100%;
  overflow: auto;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}
.bracketShell .bracketNote {
  color: #666;
  font-size: 12px;
  margin-top: 8px;
}

.bracketShell.left main { display: flex; flex-direction: row; }
.bracketShell.left .round {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 175px;
  list-style: none;
  padding: 0;
}
.bracketShell.left .round .spacer { flex-grow: 1; }
.bracketShell.left .round .spacer:first-child,
.bracketShell.left .round .spacer:last-child { flex-grow: .5; }
.bracketShell.left .round .game-spacer { flex-grow: 1; }
.bracketShell.left { font-family: sans-serif; font-size: small; line-height: 1.2em; }
.bracketShell.left li.game { padding-left: 5px; }
.bracketShell.left li.game span { float: right; margin-right: 5px; }
.bracketShell.left li.game-top { border-bottom: 1px solid #aaa; }
.bracketShell.left li.game-top-low { border-bottom: 1px solid #aaa; border-right: 1px solid #aaa; }
.bracketShell.left li.game-spacer { border-right: 1px solid #aaa; min-height: 20px; }
.bracketShell.left li.game-bottom { border-top: 1px solid #aaa; }
.bracketShell.left li.game-bot-sm { border-right: 1px solid #aaa; font-size: x-small; }
.bracketShell.left li.game-bot-blank { font-size: x-small; }

.bracketShell.right main { display: flex; flex-direction: row-reverse; }
.bracketShell.right .round {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 175px;
  list-style: none;
  padding: 0;
}
.bracketShell.right .round .spacer { flex-grow: 1; }
.bracketShell.right .round .spacer:first-child,
.bracketShell.right .round .spacer:last-child { flex-grow: .5; }
.bracketShell.right .round .game-spacer { flex-grow: 1; }
.bracketShell.right { font-family: sans-serif; font-size: small; line-height: 1.2em; }
.bracketShell.right li.game { padding-right: 5px; text-align: right; }
.bracketShell.right li.game span { float: left; margin-left: 5px; }
.bracketShell.right li.game-top { border-bottom: 1px solid #aaa; }
.bracketShell.right li.game-top-low { border-bottom: 1px solid #aaa; border-left: 1px solid #aaa; }
.bracketShell.right li.game-spacer { border-left: 1px solid #aaa; min-height: 20px; }
.bracketShell.right li.game-bottom { border-top: 1px solid #aaa; }
.bracketShell.right li.game-bot-sm { border-left: 1px solid #aaa; font-size: x-small; }
.bracketShell.right li.game-bot-blank { font-size: x-small; }


/* --- Updated compact bracket styles (scoped) --- */
.bracketShell.left{
  --row: 12px;
  --round1Width: 135px;
  --roundNWidth: 100px;
  --padLeft: 4px;
  --padRight: 4px;
}

.bracketShell.left{
  font-family:sans-serif;
  font-size:11px;
  padding:10px;
  line-height:1.1;
}

.bracketShell.left main{
  display:flex;
  flex-direction:row;
  align-items:stretch;
}

/* rounds */
.bracketShell.left .round{
  display:flex;
  flex-direction:column;
  justify-content:center;
  list-style:none;
  padding:0;
  margin:0;
}

/* widths */
.bracketShell.left .round-1{ width:var(--round1Width); }
.round-2,
.round-3,
.round-4,
.bracketShell.left .round-5{ width:var(--roundNWidth); }

/* game rows are one fixed grid unit */
.bracketShell.left .round > li.game{
  flex: 0 0 var(--row);
  height: var(--row);
  min-height: var(--row);
  box-sizing:border-box;
  padding-left:var(--padLeft);
  display:flex;
  align-items:center;
  white-space:nowrap;
}

/* spacers must never collapse and must be allowed to grow */
.round > li.spacer,
.bracketShell.left .round > li.game-spacer{
  flex: 1 0 var(--row);
  min-height: var(--row);
  box-sizing:border-box;
  overflow:hidden;
}

/* half size caps */
.round > li.spacer:first-child,
.bracketShell.left .round > li.spacer:last-child{
  flex: 0.5 0 var(--row);
}

/* draw connector */
.bracketShell.left li.game-spacer{
  border-right:1px solid #aaa;
}

/* force renderable content so empty lis are not treated as zero height */
.round > li.spacer::before,
.bracketShell.left .round > li.game-spacer::before{
  content:"\00a0";
  display:block;
  height:1px;
}

/* text and borders */
.bracketShell.left li.game span{
  margin-left:auto;
  margin-right:var(--padRight);
  font-size:10px;
}

.bracketShell.left li.game-top{
  border-bottom:1px solid #aaa;
}

.bracketShell.left li.game-top-low{
  border-bottom:1px solid #aaa;
  border-right:1px solid #aaa;
}

.bracketShell.left li.game-bot-sm{
  border-right:1px solid #aaa;
  font-size:9px;
}

.bracketShell.left li.game-bot-blank{
  font-size:9px;
}

/* optional styling */
.bracketShell.left li.game.hit{
  background: rgba(255,230,0,0.5);
}

.bracketShell.left li.game.miss{
  text-decoration: line-through;
}

.bracketShell.left div.head{
  width:65%;
  margin:auto;
}

.bracketShell.left .custom{
  width:55px !important;
}

/* center text for rounds 2+ */
.round-2 li.game,
.round-3 li.game,
.round-4 li.game,
.bracketShell.left .round-5 li.game{
  justify-content:center;   /* center the flex content */
  text-align:center;
  padding-left:0;
}

/* undo the score being pushed to the far right */
.round-2 li.game span,
.round-3 li.game span,
.round-4 li.game span,
.bracketShell.left .round-5 li.game span{
  margin-left:6px;          /* small gap after team name */
  margin-right:0;
}


.bracketShell.right{
  --row: 12px;
  --round1Width: 135px;
  --roundNWidth: 100px;
  --padLeft: 4px;
  --padRight: 4px;
}

.bracketShell.right{
  font-family:sans-serif;
  font-size:11px;
  padding:10px;
  line-height:1.1;
}

.bracketShell.right main{
  display:flex;
  flex-direction:row-reverse;
  align-items:stretch;
}

/* rounds */
.bracketShell.right .round{
  display:flex;
  flex-direction:column;
  justify-content:center;
  list-style:none;
  padding:0;
  margin:0;
}

/* widths */
.bracketShell.right .round-1{ width:var(--round1Width); }
.round-2,
.round-3,
.round-4,
.bracketShell.right .round-5{ width:var(--roundNWidth); }

/* game rows are one fixed grid unit */
.bracketShell.right .round > li.game{
  flex: 0 0 var(--row);
  height: var(--row);
  min-height: var(--row);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  white-space:nowrap;
}

/* spacers must never collapse and must be allowed to grow */
.round > li.spacer,
.bracketShell.right .round > li.game-spacer{
  flex: 1 0 var(--row);
  min-height: var(--row);
  box-sizing:border-box;
  overflow:hidden;
}

/* half size caps */
.round > li.spacer:first-child,
.bracketShell.right .round > li.spacer:last-child{
  flex: 0.5 0 var(--row);
}

/* draw vertical connector on the LEFT */
.bracketShell.right li.game-spacer{
  border-left:1px solid #aaa;
}

/* force renderable content so empty lis are not treated as zero height */
.round > li.spacer::before,
.bracketShell.right .round > li.game-spacer::before{
  content:"\00a0";
  display:block;
  height:1px;
}

/* ---------- TEXT & ALIGNMENT ---------- */

/* round 1: left justified with small inset */
.bracketShell.right .round-1 li.game{
  justify-content:flex-start;
  text-align:left;
  padding-left:6px;
  padding-right:0;
}

.bracketShell.right .round-1 li.game span{
  margin-left:6px;
  margin-right:0;
  font-size:10px;
}

/* rounds 2+: centered */
.round-2 li.game,
.round-3 li.game,
.round-4 li.game,
.bracketShell.right .round-5 li.game{
  justify-content:center;
  text-align:center;
  padding-left:0;
  padding-right:0;
}

.round-2 li.game span,
.round-3 li.game span,
.round-4 li.game span,
.bracketShell.right .round-5 li.game span{
  margin-left:6px;
  margin-right:0;
  font-size:10px;
}

/* ---------- LINES ---------- */

.bracketShell.right li.game-top{
  border-bottom:1px solid #aaa;
}

.bracketShell.right li.game-top-low{
  border-bottom:1px solid #aaa;
  border-left:1px solid #aaa;
}

.bracketShell.right li.game-bot-sm{
  border-left:1px solid #aaa;
  font-size:9px;
}

.bracketShell.right li.game-bot-blank{
  font-size:9px;
}

/* optional styling */
.bracketShell.right li.game.hit{
  background: rgba(255,230,0,0.5);
}

.bracketShell.right li.game.miss{
  text-decoration: line-through;
}

.bracketShell.right div.head{
  width:65%;
  margin:auto;
}

.bracketShell.right .custom{
  width:55px !important;
}

.bracketShell.final4{
  --row: 12px;
  --round1Width: 135px;
  --roundNWidth: 100px;
  --padLeft: 4px;
  --padRight: 4px;
}

.bracketShell.final4{
  font-family:sans-serif;
  font-size:11px;
  padding:10px;
  line-height:1.1;
}

.bracketShell.final4 main{
  display:flex;
  flex-direction:row;
  align-items:stretch;
}

/* rounds */
.bracketShell.final4 .round{
  display:flex;
  flex-direction:column;
  justify-content:center;
  list-style:none;
  padding:0;
  margin:0;
}

/* widths */
.bracketShell.final4 .round-1{ width:var(--round1Width); }
.round-2,
.round-3,
.round-4,
.bracketShell.final4 .round-5{ width:var(--roundNWidth); }

/* game rows are one fixed grid unit */
.bracketShell.final4 .round > li.game{
  flex: 0 0 var(--row);
  height: var(--row);
  min-height: var(--row);
  box-sizing:border-box;
  padding-left:var(--padLeft);
  display:flex;
  align-items:center;
  white-space:nowrap;
}

/* spacers must never collapse and must be allowed to grow */
.round > li.spacer,
.bracketShell.final4 .round > li.game-spacer{
  flex: 1 0 var(--row);
  min-height: var(--row);
  box-sizing:border-box;
  overflow:hidden;
}

/* half size caps */
.round > li.spacer:first-child,
.bracketShell.final4 .round > li.spacer:last-child{
  flex: 0.5 0 var(--row);
}

/* draw connector */
.bracketShell.final4 li.game-spacer{
  border-right:1px solid #aaa;
}

/* force renderable content so empty lis are not treated as zero height */
.round > li.spacer::before,
.bracketShell.final4 .round > li.game-spacer::before{
  content:"\00a0";
  display:block;
  height:1px;
}

/* text and borders */
.bracketShell.final4 li.game span{
  margin-left:auto;
  margin-right:var(--padRight);
  font-size:10px;
}

/* center all final four team labels */
.bracketShell.final4 li.game,
.bracketShell.final4 .ff_midline_team{
  text-align:center;
}
.bracketShell.final4 li.game span{
  margin-left:0;
  margin-right:0;
}


.bracketShell.final4 li.game-top{
  border-bottom:1px solid #aaa;
}

.bracketShell.final4 li.game-top-low{
  border-bottom:1px solid #aaa;
  border-right:1px solid #aaa;
}

.bracketShell.final4 li.game-bot-sm{
  border-right:1px solid #aaa;
  font-size:9px;
}

.bracketShell.final4 li.game-bot-blank{
  font-size:9px;
}

/* optional styling */
.bracketShell.final4 li.game.hit{
  background: rgba(255,230,0,0.5);
}

.bracketShell.final4 li.game.miss{
  text-decoration: line-through;
}

.bracketShell.final4 div.head{
  width:65%;
  margin:auto;
}

.bracketShell.final4 .custom{
  width:55px !important;
}

/* center text for rounds 2+ */
.round-2 li.game,
.round-3 li.game,
.round-4 li.game,
.bracketShell.final4 .round-5 li.game{
  justify-content:center;   /* center the flex content */
  text-align:center;
  padding-left:0;
}

/* undo the score being pushed to the far right */
.round-2 li.game span,
.round-3 li.game span,
.round-4 li.game span,
.bracketShell.final4 .round-5 li.game span{
  margin-left:6px;          /* small gap after team name */
  margin-right:0;
}


.bracketShell.final4 .ff_left_only{
  display: flex;
  align-items: stretch;
  height: 550px;
  margin-top: -120px;
  position: relative;
}

.bracketShell.final4 .ff_left_only .round{
  height: 100%;
}

/* per column width controls */
.bracketShell.final4 .ff_left_only .ff_col1{ width: var(--ff-c1, 100px); }
.bracketShell.final4 .ff_left_only .ff_col2{ width: var(--ff-c2, 100px); }
.bracketShell.final4 .ff_left_only .ff_col3{ width: var(--ff-c3, 100px); }
.bracketShell.final4 .ff_left_only .ff_col4{ width: var(--ff-c4, 100px); }
.bracketShell.final4 .ff_left_only .ff_col5{ width: var(--ff-c5, 100px); }

/* mid columns are invisible spacing columns */
.ff_midcol li.game,
.bracketShell.final4 .ff_midcol li.game-spacer{
  border: none !important;
}

.bracketShell.final4 .ff_midcol{
  color: transparent;
}

/* shared midline style */
.bracketShell.final4 .ff_midline{
  position: absolute;
  height: 0;
  border-top: 1px solid #aaa;
  pointer-events: none;
  z-index: 5;
}

/* column 2 line */
.bracketShell.final4 .ff_midline2{
  top: var(--ff-line2-top, calc(50% - 70px));
  left: var(--ff-c1, 100px);
  width: var(--ff-c2, 100px);
}

/* column 4 line */
.bracketShell.final4 .ff_midline4{
  top: var(--ff-line4-top, var(--ff-line2-top, calc(50% + 70px)));
  left: calc(var(--ff-c1, 100px) + var(--ff-c2, 100px) + var(--ff-c3, 100px));
  width: var(--ff-c4, 100px);
}

/* COLUMN 5: move the vertical connector from right side to left side */
.bracketShell.final4 .ff_left_only .ff_col5 li{
  border-right: none !important;
}

.ff_left_only .ff_col5 li.game-spacer,
.ff_left_only .ff_col5 li.game-top-low,
.bracketShell.final4 .ff_left_only .ff_col5 li.game-bot-sm{
  border-right: none !important;
  border-left: 1px solid #aaa !important;
}

/* Column 2: teams that sit on the midline (scoped so columns 1-3 stay locked) */
.bracketShell.final4 .ff_midline2 .ff_midline_team{
  position: absolute;
  left: 50%;
  top: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* keep them tight to the line */
.bracketShell.final4 .ff_midline2 .ff_midline_team_top{
  transform: translate(-50%, calc(-100% - var(--ff-line2-team-gap, 2px)));
}

.bracketShell.final4 .ff_midline2 .ff_midline_team_bot{
  transform: translate(-50%, var(--ff-line2-team-gap, 2px));
}

/* match bracket-left.css sizing for small bottom team */
.bracketShell.final4 .ff_midline2 .game-bot-sm{
  font-size: 9px;
}

/* remove underline coming from game-top-low when used as a label */
.bracketShell.final4 .ff_midline2 .game-top-low{
  border-bottom: none !important;
  border-right: none !important;
}

/* Column 4: center teams on the midline exactly like column 2 */
.bracketShell.final4 .ff_midline4 .ff_midline_team{
  position: absolute;
  left: 50%;
  top: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.bracketShell.final4 .ff_midline4 .ff_midline_team_top{
  transform: translate(-50%, calc(-100% - var(--ff-line2-team-gap, 2px)));
}

.bracketShell.final4 .ff_midline4 .ff_midline_team_bot{
  transform: translate(-50%, var(--ff-line2-team-gap, 2px));
}

/* column 4 top team fix only */
.bracketShell.final4 .ff_c4_top_fix{
  font-size: 11px;
  line-height: 1.1;
  border-bottom: none !important;
  border-right: none !important;
}

/* column 4 bottom team fix only */
.bracketShell.final4 .ff_c4_bot_fix{
  font-size: 9px;
  line-height: 1.1;
  border: none !important;
}

/* add the missing space before points on midline top teams only */
.ff_midline2 .ff_midline_team_top span,
.bracketShell.final4 .ff_midline4 .ff_midline_team_top span{
  display: inline-block;
  margin-left: 4px;
}

.bracketShell.final4 .ff_champ{margin-top:8px; font-weight:600; text-align:center;}

/* CENTER TEAMS FOR ROUNDS 2+ IN ALL REGIONS */
.left-bracket .round2 .team,
.left-bracket .round3 .team,
.left-bracket .round4 .team,
.left-bracket .round5 .team,
.right-bracket .round2 .team,
.right-bracket .round3 .team,
.right-bracket .round4 .team,
.right-bracket .round5 .team {
    text-align: center;
    justify-content: center;
}



/* Inline styles moved out of HTML */
.is-hidden { display: none; }
.eliminated-subhead { margin-top: 14px; color: #b71c1c; }
.eliminated-wrap { max-height: 280px; }
.bracket-nav { margin-bottom: 12px; }
.bracket-header-spacing { margin-bottom: 8px; }

/* ===== FINAL OVERRIDES FOR SIDE SPECIFIC LINES AND CENTERING ===== */

.bracketShell.left li.game-spacer{
  border-right: 1px solid #aaa !important;
  border-left: none !important;
}

.bracketShell.right li.game-spacer{
  border-left: 1px solid #aaa !important;
  border-right: none !important;
}

.bracketShell.left li.game-top-low,
.bracketShell.left li.game-bot-sm{
  border-right: 1px solid #aaa !important;
  border-left: none !important;
}

.bracketShell.right li.game-top-low,
.bracketShell.right li.game-bot-sm{
  border-left: 1px solid #aaa !important;
  border-right: none !important;
}

.bracketShell.left .round-2 li.game,
.bracketShell.left .round-3 li.game,
.bracketShell.left .round-4 li.game,
.bracketShell.left .round-5 li.game,
.bracketShell.right .round-2 li.game,
.bracketShell.right .round-3 li.game,
.bracketShell.right .round-4 li.game,
.bracketShell.right .round-5 li.game{
  justify-content: center !important;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.bracketShell.left .round-2 li.game-bot-sm,
.bracketShell.left .round-3 li.game-bot-sm,
.bracketShell.left .round-4 li.game-bot-sm,
.bracketShell.left .round-5 li.game-bot-sm,
.bracketShell.left .round-2 li.game-bot-blank,
.bracketShell.left .round-3 li.game-bot-blank,
.bracketShell.left .round-4 li.game-bot-blank,
.bracketShell.left .round-5 li.game-bot-blank,
.bracketShell.right .round-2 li.game-bot-sm,
.bracketShell.right .round-3 li.game-bot-sm,
.bracketShell.right .round-4 li.game-bot-sm,
.bracketShell.right .round-5 li.game-bot-sm,
.bracketShell.right .round-2 li.game-bot-blank,
.bracketShell.right .round-3 li.game-bot-blank,
.bracketShell.right .round-4 li.game-bot-blank,
.bracketShell.right .round-5 li.game-bot-blank{
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.bracketShell.left .round-2 li.game span,
.bracketShell.left .round-3 li.game span,
.bracketShell.left .round-4 li.game span,
.bracketShell.left .round-5 li.game span,
.bracketShell.right .round-2 li.game span,
.bracketShell.right .round-3 li.game span,
.bracketShell.right .round-4 li.game span,
.bracketShell.right .round-5 li.game span{
  float: none !important;
  margin: 0 0 0 6px !important;
}

/* ===== PATCH: TOP TEAM NUDGE AND CONSISTENT CENTERING ===== */

/* bump top slots up slightly in rounds 2+ so highlight does not touch the connector line */
.bracketShell.left .round-2 li.game.game-top,
.bracketShell.left .round-2 li.game.game-top-low,
.bracketShell.left .round-3 li.game.game-top,
.bracketShell.left .round-3 li.game.game-top-low,
.bracketShell.left .round-4 li.game.game-top,
.bracketShell.left .round-4 li.game.game-top-low,
.bracketShell.left .round-5 li.game.game-top,
.bracketShell.left .round-5 li.game.game-top-low,
.bracketShell.right .round-2 li.game.game-top,
.bracketShell.right .round-2 li.game.game-top-low,
.bracketShell.right .round-3 li.game.game-top,
.bracketShell.right .round-3 li.game.game-top-low,
.bracketShell.right .round-4 li.game.game-top,
.bracketShell.right .round-4 li.game.game-top-low,
.bracketShell.right .round-5 li.game.game-top,
.bracketShell.right .round-5 li.game.game-top-low,
.bracketShell.final4 .round-4 li.game.game-top,
.bracketShell.final4 .round-4 li.game.game-top-low,
.bracketShell.final4 .round-5 li.game.game-top{
  transform: translateY(-2px);
}

/* force centered text for rounds 2+ on both sides, including bottom slots */
.bracketShell.left .round-2 li.game,
.bracketShell.left .round-3 li.game,
.bracketShell.left .round-4 li.game,
.bracketShell.left .round-5 li.game,
.bracketShell.right .round-2 li.game,
.bracketShell.right .round-3 li.game,
.bracketShell.right .round-4 li.game,
.bracketShell.right .round-5 li.game{
  justify-content: center !important;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.bracketShell.left .round-2 li.game span,
.bracketShell.left .round-3 li.game span,
.bracketShell.left .round-4 li.game span,
.bracketShell.left .round-5 li.game span,
.bracketShell.right .round-2 li.game span,
.bracketShell.right .round-3 li.game span,
.bracketShell.right .round-4 li.game span,
.bracketShell.right .round-5 li.game span{
  float: none !important;
  margin: 0 0 0 6px !important;
}


/* ===== CLEAN BRACKET GEOMETRY OVERRIDES, SCOPED ===== */

.bracketShell.left main#tournament,
.bracketShell.right main#tournament{
  display:flex;
  align-items:stretch;
}

/* rounds */
.bracketShell.left .round,
.bracketShell.right .round{
  display:flex;
  flex-direction:column;
  justify-content:center;
  list-style:none;
  padding:0;
  margin:0;
}

/* fixed grid for ALL structural rows */
.bracketShell.left .round > li.game,
.bracketShell.right .round > li.game{
  flex:0 0 var(--row);
  height:var(--row);
  min-height:var(--row);
  display:flex;
  align-items:center;
  white-space:nowrap;
  box-sizing:border-box;
}

.bracketShell.left .round > li.spacer,
.bracketShell.left .round > li.game-spacer,
.bracketShell.right .round > li.spacer,
.bracketShell.right .round > li.game-spacer{
  flex:1 0 var(--row);
  min-height:var(--row);
  overflow:hidden;
  box-sizing:border-box;
}

/* column widths */
.bracketShell.left .round-1,
.bracketShell.right .round-1{ width:var(--round1Width); }

.bracketShell.left .round-2,
.bracketShell.left .round-3,
.bracketShell.left .round-4,
.bracketShell.left .round-5,
.bracketShell.right .round-2,
.bracketShell.right .round-3,
.bracketShell.right .round-4,
.bracketShell.right .round-5{ width:var(--roundNWidth); }

/* horizontal lines */
.bracketShell.left li.game-top,
.bracketShell.left li.game-top-low,
.bracketShell.right li.game-top,
.bracketShell.right li.game-top-low{
  border-bottom:1px solid #aaa;
}

/* vertical connectors, owned by spacer and bot rows only, like the original */
.bracketShell.left li.game-spacer,
.bracketShell.left li.game-bot-sm{
  border-right:1px solid #aaa;
}
.bracketShell.right li.game-spacer,
.bracketShell.right li.game-bot-sm{
  border-left:1px solid #aaa;
}

/* right bracket mirror */
.bracketShell.right main#tournament{
  flex-direction:row-reverse;
}

/* padding */
.bracketShell.left li.game{ padding-left:var(--padLeft); }
.bracketShell.right li.game{ padding-left:6px; }

/* center rounds 2+ text, keep round 1 standard */
.bracketShell.left .round-2 li.game,
.bracketShell.left .round-3 li.game,
.bracketShell.left .round-4 li.game,
.bracketShell.left .round-5 li.game,
.bracketShell.right .round-2 li.game,
.bracketShell.right .round-3 li.game,
.bracketShell.right .round-4 li.game,
.bracketShell.right .round-5 li.game{
  justify-content:center;
  text-align:center;
  padding-left:0;
}

.bracketShell.left .round-2 li.game span,
.bracketShell.left .round-3 li.game span,
.bracketShell.left .round-4 li.game span,
.bracketShell.left .round-5 li.game span,
.bracketShell.right .round-2 li.game span,
.bracketShell.right .round-3 li.game span,
.bracketShell.right .round-4 li.game span,
.bracketShell.right .round-5 li.game span{
  margin-left:6px;
  margin-right:0;
}

/* close the tiny top gap where vertical meets the top horizontal line */
.bracketShell.left .round-2 li.game-top,
.bracketShell.left .round-3 li.game-top,
.bracketShell.left .round-4 li.game-top,
.bracketShell.left .round-5 li.game-top,
.bracketShell.right .round-2 li.game-top,
.bracketShell.right .round-3 li.game-top,
.bracketShell.right .round-4 li.game-top,
.bracketShell.right .round-5 li.game-top{
  position: relative;
}

.bracketShell.left .round-2 li.game-top::after,
.bracketShell.left .round-3 li.game-top::after,
.bracketShell.left .round-4 li.game-top::after,
.bracketShell.left .round-5 li.game-top::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-right: 1px solid #aaa;
}

.bracketShell.right .round-2 li.game-top::after,
.bracketShell.right .round-3 li.game-top::after,
.bracketShell.right .round-4 li.game-top::after,
.bracketShell.right .round-5 li.game-top::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  border-left: 1px solid #aaa;
}

/* keep horizontal lines visible under yellow correct picks */
.bracketShell.left .round-2 .pickCorrect,
.bracketShell.left .round-3 .pickCorrect,
.bracketShell.left .round-4 .pickCorrect,
.bracketShell.left .round-5 .pickCorrect,
.bracketShell.right .round-2 .pickCorrect,
.bracketShell.right .round-3 .pickCorrect,
.bracketShell.right .round-4 .pickCorrect,
.bracketShell.right .round-5 .pickCorrect{
  position: relative;
  top: -2px;
}