:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel2:#f6f7f9;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#2563eb;
  --accent2:#ef4444;
  --danger:#b42318;
  --chip: rgba(29,78,216,.10);
  --navy:#0b1220;
  --lightblue:#93c5fd;
  --orange:#f97316;
  --shadow: 0 8px 30px rgba(0,0,0,.08);
  --radius:14px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Opt-in checkbox labels should always be black */
.checks .checkRow,
.checks .checkRow span{
  color:#000;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--text);
}
.topbar{
  position: sticky;
  top:0;
  z-index:20;
  background: var(--panel2);
  border-bottom:1px solid var(--line);
  padding:14px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
}

/* Mobile: keep only the tabs row pinned while scrolling (buttons/actions should scroll away) */
.stickyNav{width:100%; position:static; z-index:30;}

.roundBar{
  position: sticky;
  top: 92px;
  z-index: 19;
  background:var(--panel2);
  border-bottom:1px solid var(--line);
  padding:10px 16px;
  font-weight:700;
  letter-spacing:0.2px;
}

/* ESPN-like second-row nav */
.siteNav{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  background: var(--panel2);
  border-bottom:1px solid var(--line);
  position: static;
  width:100%;
}
.siteNav a{
  /* color is controlled by .navLink + media queries for contrast */
  color: inherit;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  padding:8px 10px;
  border-radius:999px;
  /* Center multi-line labels (e.g., "Best Bracket\nChallenge") */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.15;
  white-space:normal;
}
.siteNav a.active{
  color: var(--text);
  background: rgba(57,211,83,0.12);
  outline: 1px solid rgba(57,211,83,0.25);
}


.brand{font-weight:800;font-size:18px;letter-spacing:0.2px}
.tagline{margin-top:4px;font-size:12px;color:var(--muted);max-width:820px}
.actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.actionRow{display:flex;gap:8px;justify-content:flex-end}
.signinHint{font-size:12px;color:var(--muted);text-align:right}
.taglineShort{display:none}
.taglineFull{display:inline}
.btn{
  border:1px solid var(--line);
  background: var(--panel);
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
  cursor:pointer;
}
.btn:hover{border-color: rgba(255,255,255,0.18)}
.btn.danger{border-color: rgba(255,107,107,0.35); color: var(--danger); background: var(--panel)}
.btn.danger:hover{border-color: rgba(180,35,24,0.6)}
.btn.ghost{background: var(--chip); border-color: var(--line); color: var(--text)}

.wrap{max-width:1280px;margin:0 auto;padding:14px}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
}
.panelHead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.panelHeadDual{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.panelHeadRight{margin-left:auto;text-align:right}

.joinChallengeGrid{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:start}
.joinChallengeTitle{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px;line-height:1.1}
.joinChallengeMsg{color:var(--muted);font-size:16px;line-height:1.35}

.homeChallengePanel{margin-top:12px;display:flex;gap:12px}
.homeChallengePanel .btn{flex:1;min-width:0}

@media (max-width: 560px){
  .joinChallengeGrid{grid-template-columns:1fr}
  .homeChallengePanel{flex-direction:column}
}
.panelHead.final4Head{
  /* Center "Championship" above the Finals boxes while keeping "Final 4" on the left */
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
}
.panelHead.final4Head .roundTitle{
  justify-self:start;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#fff;
  margin:0;
}
.panelHead.final4Head .champTitle{
  justify-self:center;
  margin-left:0;
  text-align:center;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#fff;
  transform: translateX(-16px);
}

/* Champion display below the Finals */
.championBox{
  margin-top:12px;
  padding:10px 12px;
  border:2px solid #111;
  border-radius:14px;
  background:#fff;
}
.championLabel{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  color:#111;
  margin-bottom:6px;
}
.championName{
  font-size:22px;
  font-weight:900;
  color:#111;
  line-height:1.1;
  min-height:26px;
}
.panel h2{margin:0;font-size:16px}
.stamp{font-size:11px;color:var(--muted)}
.label{font-size:12px;color:var(--muted);margin-bottom:6px}
.list{margin:0;padding-left:18px;color:#111827}
.bubbleGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
.muted{color:var(--muted)}
.small{font-size:12px}

.desktopGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}

.regionCard{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.regionHeader{position:sticky;top:0;z-index:6;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.1) blur(4px);padding:6px 10px;margin-bottom:10px;border-radius:12px;border:1px solid rgba(0,0,0,.06);min-height:56px;align-items:flex-start;}

/* Mirrored header layout (East/Midwest on desktop) */
.regionHeader.mirror{padding-top:10px;padding-bottom:10px}
.regionHeader.mirror .regionName{text-align:right;display:block;margin-top:8px;margin-right:12px}
.regionRoundLabels{position:relative;height:18px;margin-top:4px}
.regionRoundLabel{position:absolute;top:0;color:#000;font-size:12px;font-weight:700;white-space:nowrap}
.regionRoundLabel.small{font-size:11px;font-weight:700}
.regionName{font-weight:800;display:block;margin-top:6px}
.regionMeta{font-size:12px;color:var(--muted)}

/* Geometry bracket */
.geo{
  position:relative;
  overflow-x:auto;
  padding-bottom:10px;
  scroll-behavior:smooth;
}
.geoCanvas{
  position:relative;
  /* Keep regions tight on desktop; avoid dead horizontal scroll space. */
  min-width: 500px;
}
.roundCol{
  position:absolute;
  top:0;
  width: 100px;
}
.roundTitle{
  position:sticky;
  top:0;
  background: rgba(255,255,255,0.92);
  border:1px solid var(--line);
  border-radius:10px;
  padding:6px 10px;
  font-size:11px;
  color:#000;
  margin-bottom:8px;
}
.game{
  position:absolute;
  left:0;
  width: 100px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}
.slot{
  padding:8px 10px;
  font-size:12px;
  display:flex;
  gap:8px;
  align-items:center;
  cursor:pointer;
  user-select:none;
}

.teamLogo{
  width:18px;
  height:18px;
  flex:0 0 18px;
  border-radius:4px;
  margin-right:8px;
}

/* --- v37.10 UI fixes --- */
/* We're not using team logos/badges. Hide any logo elements so we never show grey squares or letter badges. */
.teamLogo, .champLogo{display:none !important;}

/* Make Finals/Champion labels readable inside the dark final rounds UI */
.finalFour .roundTitle{color:#000;}
.finalFour .roundTitle.onDark{color:#fff;}
.finalFour .slot{color:#fff;}
.finalFour .slot.empty{color:rgba(255,255,255,0.75) !important;}

/* Round headers text should be consistent; Final 4 should not be larger than Elite 8. */
.roundLabel{font-size:14px;font-weight:700;color:#000;}
.final4Label{font-size:14px;font-weight:700;color:#000 !important;}

.champBanner{
  margin-top:12px;
  padding:18px 14px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  text-align:center;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, rgba(0,0,0,0) 2px) 0 0/10px 10px,
    linear-gradient(180deg, rgba(20,35,70,0.95), rgba(10,18,38,0.95));
}
.champTitle{
  font-weight:900;
  letter-spacing:0.06em;
  font-size:13px;
  color:rgba(255,255,255,0.9);
}
.champLogo{
  width:120px;
  height:120px;
  border-radius:18px;
  background:rgba(255,255,255,0.08);
  padding:10px;
}
.champName{
  font-weight:900;
  font-size:22px;
  color:#fff;
}
.champTitle{
  font-weight:800;
  letter-spacing:0.08em;
  font-size:13px;
  color:rgba(255,255,255,0.85);
}
.champSub{
  color:rgba(255,255,255,0.75);
  font-size:12px;
  margin-top:2px;
}

@media (max-width: 720px){
  .roundTitle{ display:none; }
  /* Give room for sticky round bar */
  .wrap{ padding-top: 6px; }
}
.slot + .slot{border-top:1px solid var(--line)}
.seed{width:18px;font-weight:800;color:var(--navy)}
.team{flex:1;font-weight:650}
.slot.empty{cursor:default;color:var(--muted);background:#fafbff}
.slot.winner{background: var(--chip);}
.slot:hover{background:#f8fafc}
.slot.empty:hover{background:#fafbff}

/* Center board */
.centerStage{margin: 6px 0 12px 0;}
.finalFourBoard{overflow-x:auto}
.finalFourBoard .geo{scroll-behavior:smooth}
.footer{text-align:center;margin:12px 0 6px}


@media (min-width: 901px){
  /* Desktop: center column should match the clean "FINAL 4" + "CHAMPION" stacked layout */
  .centerStage{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:6px;
  }

  .centerStage .panel{
    background:#f2f3f6;
    border-radius:18px;
    padding:18px;
  }

  .centerStage .panelHead{
    font-weight:800;
    letter-spacing:1px;
    font-size:12px;
    color:#333;
    margin:0 0 12px 0;
  }

  .finalFourBoard{ overflow:visible; }

  /* Desktop: Final Four board sizing should match regular pick boxes */
  #finalFourBoard.finalFourGrid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:12px;
    align-items:start;
  }
  #finalFourBoard.finalFourGrid .slot{
    width:100%;
    height:auto;
    min-height:42px; /* close to regular pick boxes */
  }



	  /* Championship row: finalist slots on sides, champion centered */
	  #championBoard .champRow{
	    display:flex;
	    align-items:center;
	    justify-content:space-between;
	    gap:14px;
	  }
	  #championBoard .champSide{ flex:0 0 120px; }
	  #championBoard .champCenter{
	    flex:1;
	    display:flex;
	    align-items:center;
	    justify-content:center;
	    min-height:56px;
	  }
	  #championBoard .championBigName{
	    max-width: 280px;
	    margin: 0 auto;

	    width:100%;
	    height:56px;
	    border-radius:14px;
	    background:#ffffff;
	    border:1px solid rgba(0,0,0,0.12);
	    display:flex;
	    align-items:center;
	    justify-content:center;
	    font-weight:900;
	    font-size:22px;
	    letter-spacing:0.2px;
	  }
	  #championBoard .slot,
	  #championBoard button.slot{
	    width:100%;
	    height:56px;
	    justify-content:flex-start;
	  }

  .champPanel .bracketActionRow{
    margin-top:12px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .champPanel .bracketActionRow .btn{ width:100%; }
}
@media (max-width: 900px){
  .desktopGrid{grid-template-columns:1fr}
  .bubbleGrid{grid-template-columns:1fr}
  .tagline{max-width:520px}
}


/* --- Primary nav --- */
.siteNav{
  position:sticky; top:52px; z-index:50;
  display:flex; gap:10px; align-items:center;
  padding:10px 14px;
  background: rgba(18,22,31,0.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.navLink{
  font-weight:700; font-size:13px;
  padding:8px 10px;
  border-radius:999px;
  color:#ffffff; text-decoration:none;
  border:1px solid var(--line);
  background: rgba(27,35,49,0.7);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.15;
}
.navEmoji{display:none;font-size:1.05em;line-height:1}
/* Active tab highlight (keep text white even when selected) */
.navLink.active{
  background:rgba(255,255,255,0.12);
  color:#ffffff;
  border-color:rgba(255,255,255,0.24);
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* small team logo chip */
.teamChip{
  width:18px; height:18px; border-radius:4px;
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
  flex:0 0 auto;
}
.teamRow{
  display:flex; align-items:center; gap:8px;
}
.teamName{ flex:1 1 auto; min-width:0; }

/* ------------------------------
   ESPN-like desktop bracket layout
   ------------------------------ */

.espnDesk{ display:block; }
.deskCol{ display:flex; flex-direction:column; gap:18px; }

@media (min-width: 1100px){
  .final4Label{
    font-size: 14px;
    font-weight: 800;
  }

  .container{ max-width: 1600px; }
  .espnDesk{
    display:grid;
    grid-template-columns: 1fr 460px 1fr;
    gap: 24px;
    align-items:start;
  }
  .deskCol.center{
    position: sticky;
    top: 128px;
  }
  .centerStage .panel{ background: transparent; border: none; padding:0; }
  .panelHead{ background: transparent; border: none; padding: 6px 0 10px; }
  .panelHead h2{ font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
}

/* Bracket cards: smaller + ESPN-ish */
.match{
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}
.match .meta{ color: var(--muted); }
.match .pickLine{ color: var(--text); }

/* Champion card prominence */
.champCard{
  background: radial-gradient(120% 120% at 50% 0%, rgba(57,211,131,.18), rgba(255,255,255,.04));
  border:1px solid rgba(57,211,131,.35);
}

.subbrand{font-size:12px;color:var(--muted);margin-top:2px}
.subbrand .creator{color:inherit;font-weight:700}
.overlay{position:fixed;inset:0;background:rgba(17,24,39,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.overlay.hidden{display:none}

/* Auth overlay (Sign in / Sign up)
   Force high contrast black text on white, regardless of theme */
.authCard{width:100%;max-width:520px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:16px 16px 12px;color:#000}
.authCard *{color:#000}
.authCard input,.authCard select,.authCard textarea{color:#000}
.authCard .muted{color:#000;opacity:1}
.authCard label{color:#000;opacity:1}
.authCard .tabs button{color:#000}
.modal{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px}
.modalHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.modalTitle{font-weight:800}
.iconBtn{border:0;background:transparent;font-size:18px;cursor:pointer;color:var(--muted)}
.field{display:block;margin:10px 0}
.field span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.field input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--text)}
.primaryBtn{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--accent);background:var(--accent);color:white;font-weight:800;cursor:pointer}
.switchRow{margin-top:10px;display:flex;gap:8px;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
.linkBtn{border:0;background:transparent;color:var(--accent);font-weight:800;cursor:pointer}
.smallNote{margin-top:10px;color:var(--muted);font-size:12px;text-align:center}
.view.hidden{display:none}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.card{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:12px}
.cardTitle{font-weight:800;margin-bottom:6px}
.cardBody{color:var(--muted);font-size:13px;line-height:1.3}


/* Brand */
.brandLine{display:flex;align-items:center;gap:12px}
.brandLogo{width:34px;height:34px;flex:0 0 auto}
.authHint{margin-top:6px;font-size:12px;color:var(--muted);}

/* Bubble badge removed (Home is bracket-only) */
.bubbleBadge{display:none !important;}

/* Tabs */
.tabs{background:transparent}
.navLink{cursor:pointer}
.navLink.active{background:rgba(29,78,216,.14);border-color:rgba(29,78,216,.35)}

/* Seed visibility */
.team .seed{opacity:.9}

/* Featured intro */
.featuredIntro{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}

/* Desktop night mode */
@media (min-width: 900px){
  body{background:#0b1220;color:#e5e7eb}
  .topbar{background:#0b1220;border-bottom:1px solid rgba(255,255,255,.08)}
  .tabs{background:#0b1220}
  .navLink{color:#e5e7eb;background:#0b1220;border-color:rgba(255,255,255,.14)}
  .navLink.active{background:#111b33}
  .btn.ghost{color:#e5e7eb;border-color:rgba(255,255,255,.18)}
  .roundTitle{color:#0b1220}
  .muted{color:rgba(229,231,235,.72)}

  /* Panels are white on desktop — keep text high-contrast */
  .panel{ background:#ffffff; color:#0b1220; }
  .panel .label,
  .panel .stamp,
  .panel .muted{ color:#374151; }
  .panel .list{ color:#0b1220; }
  .panel input,
  .panel select,
  .panel textarea{ color:#0b1220; }

  /* Desktop: game box width */
  .roundCol{ width:120px; }
  .game{ width:120px; }

  /* Desktop bracket: white team/seed text */
  .game, .game *{ color:#ffffff !important; }
  .slot.empty{ color:rgba(255,255,255,.55) !important; }
}

/* Decorative layers are permanently disabled (no logos/icons/badges). */
.decorLayer{display:none !important;}

/* Challenge pages: leaderboard text should be WHITE (desktop + mobile) */
.lbTableWrap, .lbTableWrap *{ color:#ffffff !important; }

/* Mobile day mode overrides */
@media (max-width: 899px){
  body{background:#ffffff;color:#0b1220}
  .topbar{background:#ffffff}
  .tabs{background:#ffffff}
  .navLink{
    background:#ffffff;
    color:#0b1220;
    border-color:rgba(11,18,32,.16);
    /* Match the big rounded-rectangle feel of the Sign in button */
    border-radius:26px;
    padding:18px 16px;
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.15;
  }
  .navEmoji{display:inline}

  /* Mobile: give region header more breathing room so round + region don't collide */
  .regionHeader{min-height:70px;padding-top:10px;padding-bottom:12px;}
  .regionName{margin-top:18px;}
  .regionHeader.mirror .regionName{margin-top:18px;}
  .navLink.active{background:rgba(29,78,216,.10)}
  /* Remove the separate "Round of 64" bar on mobile (round headers are shown in the bracket) */
  .roundBar{display:none !important;}
  .roundTitle{color:#0b1220}
  .team .seed{color:#0b1220}
  /* Buttons layout: 2 rows */
  .actions{flex-wrap:wrap;gap:8px}
  #accountBtn,#bracketsBtn{flex:1 1 auto;min-width:40%}
  #saveBtn,#resetBtn{flex:1 1 45%}
}

/* Subtle basketball background */

.toast{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background:rgba(11,18,32,.92);color:#fff;padding:10px 14px;border-radius:10px;
  font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s ease;
  max-width:min(520px,92vw);text-align:center;z-index:9999
}
.toast.show{opacity:1}

/* Custom confirm modal (used for Sign out so the button label is "Sign out", not Safari's OK) */
.bb-confirm-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.bb-confirm-box{
  width: min(420px, 92vw);
  background: #fff;
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.bb-confirm-message{
  color: #111;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 14px;
}
.bb-confirm-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.bb-confirm-btn{
  border: none;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 14px;
  cursor: pointer;
}
.bb-confirm-btn.cancel{
  background: #eee;
  color: #111;
}
.bb-confirm-btn.ok{
  background: #1c5cff;
  color: #fff;
}
.hidden{display:none !important}


/* Subtle background texture */
body{
  background-image:
    radial-gradient(circle at 12px 12px, rgba(29,78,216,.06) 2px, transparent 3px),
    radial-gradient(circle at 40px 48px, rgba(14,165,233,.05) 2px, transparent 3px);
  background-size: 80px 80px;
}
@media (min-width: 900px){
  body{
    background-image:
      radial-gradient(circle at 12px 12px, rgba(29,78,216,.10) 2px, transparent 3px),
      radial-gradient(circle at 40px 48px, rgba(14,165,233,.08) 2px, transparent 3px);
  }
}

@media (min-width: 900px){ .seed{color: rgba(229,231,235,.85);} }

@media (max-width: 600px){ .taglineShort{display:inline} .taglineFull{display:none} }

@media (min-width: 900px){ .roundTitle{background: rgba(11,18,32,0.92); border-color: rgba(255,255,255,.12);} .game{background:#0b1220;} .slot.empty{background:rgba(255,255,255,.04);} .slot:hover{background:rgba(255,255,255,.06);} }

/* Remove emojis in nav / headings (requested) */
.navEmoji, .hIcon{ display:none !important; }

/* Center column layout: Champion panel placement */
.centerStack{ display:flex; flex-direction:column; gap:12px; }
@media (max-width: 820px){
  /* On mobile, Champion sits to the RIGHT of Final 4 */
  .centerStack{ flex-direction:row; align-items:flex-start; }
  .deskCol.center .panel{ margin-top:0 !important; }
}

/* Big champion display */
.championBig{ padding:18px 16px; text-align:center; border:1px solid var(--line); border-radius:16px; background:#fff; }
.championSeed{ font-size:14px; font-weight:800; margin-bottom:6px; }
.championName{ font-size:32px; font-weight:900; color:#000; line-height:1.08; }


/* v31 challenge UI */
.rules{
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  margin: 10px 0 12px;
  background: rgba(255,255,255,0.04);
}
body.mobile .rules{
  border-color: rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}
.rules h4{ margin: 0 0 6px; }
.rules ul{ margin: 8px 0 0 18px; }
.challengeActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom: 12px;
}
.lbTable{
  width:100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lbTable th, .lbTable td{
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-align:left;
  vertical-align: middle;
  white-space: nowrap;
}
body.mobile .lbTable th, body.mobile .lbTable td{ border-bottom-color: rgba(255,255,255,0.10); }

/* Best/Worst challenge: leaderboard text should be white on both desktop and mobile */
#view-best, #view-worst{ color: #fff; }
#view-best .card, #view-worst .card{ color: #fff; }
#view-best .lbTable th, #view-worst .lbTable th{ opacity: 1; }
#view-best .lbMeta, #view-worst .lbMeta{ opacity: 1; }
.lbTable th{
  font-weight: 700;
  opacity: 0.9;
}
.lbScore{
  font-weight: 800;
  font-size: 14px;
}
.lbSub{
  opacity: 0.8;
  font-size: 12px;
}
.lbPct{
  font-variant-numeric: tabular-nums;
}
.champCell{
  display:flex;
  gap:8px;
  align-items:center;
}
.champLogo{
  width: 18px;
  height: 18px;
}

/* leaderboard polish (ESPN-ish) */
.lbTableWrap{
  overflow: auto;
  max-height: 70vh;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(0,0,0,0.10);
  color:#fff;
}
body.mobile .lbTableWrap{ border-color: rgba(255,255,255,0.10); background: rgba(0,0,0,0.10); }
.lbTable thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(12,18,30,0.95);
}
body.mobile .lbTable thead th{ background: rgba(12,18,30,0.95); }
.lbTable tbody tr:nth-child(odd){ background: rgba(255,255,255,0.02); }
body.mobile .lbTable tbody tr:nth-child(odd){ background: rgba(255,255,255,0.02); }
.lbTable tbody tr:hover{ background: rgba(255,255,255,0.05); }
body.mobile .lbTable tbody tr:hover{ background: rgba(255,255,255,0.05); }
.lbTable tr.isMe{ outline: 2px solid rgba(80,160,255,0.55); outline-offset:-2px; background: rgba(80,160,255,0.12); }
body.mobile .lbTable tr.isMe{ outline-color: rgba(20,90,200,0.45); background: rgba(20,90,200,0.08); }
.lbRank{ font-variant-numeric: tabular-nums; font-weight: 800; }
.lbUser{ max-width: 220px; overflow:hidden; text-overflow: ellipsis; }
.lbX{ font-weight: 800; }
.lbSlash{ opacity: 0.7; }

.lbMetaBar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:8px 0 10px 0;padding:10px 12px;border:1px solid rgba(255,255,255,0.12);border-radius:12px;background:rgba(255,255,255,0.04)}
body.mobile .lbMetaBar{border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.04)}
.lbMetaTitle{font-weight:800;letter-spacing:0.2px}
.lbMetaSub{opacity:0.8;font-size:13px;margin-top:2px}
.lbMetaRight{opacity:0.75;font-size:13px;text-align:right}
.linkBtn{
  text-decoration: underline;
  cursor: pointer;
}
.pill{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  font-size: 12px;
}
body.mobile .pill{ border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); }

/* pick result coloring */
.slot.correctPick{ color: #2ecc71 !important; font-weight: 700; }
.slot.wrongPick{ color: #ff4d4f !important; text-decoration: line-through; }


/* v32 groups + settings */
.groupsPanel{
  margin: 14px 0 18px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}

/* Group join notices (e.g., payment pending cap) */
.groupNotice{
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.25;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}
body.day .groupNotice{
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(0,0,0,0.05);
}
.groupNotice.pending{
  border-color: rgba(245, 200, 66, 0.55);
  background: rgba(245, 200, 66, 0.12);
}
.groupNotice.full{
  border-color: rgba(255, 77, 79, 0.45);
  background: rgba(255, 77, 79, 0.10);
}
body.day .groupsPanel{
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
}
.groupRow{
  display:flex;
  gap:10px;
  align-items:center;
  margin: 10px 0;
  flex-wrap: wrap;
}
.groupLabel{
  min-width: 150px;
  font-size: 0.95rem;
  opacity: 0.9;
}
.input{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  color: inherit;
}
body.day .input{
  border: 1px solid rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.9);
  color: #0a1b33;
}

/* Force all text in "Get email alerts" panels to black (all pages) */
.emailAlerts,
.emailAlerts *{
  color: #000 !important;
}
.emailAlerts .input{
  color: #000 !important;
  caret-color: #000 !important;
}
.emailAlerts .input::placeholder{
  color: #000 !important;
  opacity: 1;
}
.groupsPanel select{
  padding: 8px 10px;
  border-radius: 10px;
}
.smallNote{
  font-size: 0.85rem;
  opacity: 0.8;
}

.statsBadge{font-size:0.9rem;opacity:.9;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.06)}
body.day .statsBadge{border:1px solid rgba(0,0,0,0.18);background:rgba(0,0,0,0.04);}


/* v33 next-sports + late-stage panels */
.nextSportsGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.nextSportCard{ border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); border-radius:12px; padding:12px; }
body.light .nextSportCard{ border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.03); }
.nextSportTitle{ font-weight:700; margin-bottom:6px; }
@media (max-width: 720px){
  .nextSportsGrid{ grid-template-columns: 1fr; }
}


/* v35: modals + group settings + affiliate CTA */
.modalOverlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,0.55);
  display:flex; align-items:center; justify-content:center;
  z-index: 9999;
  padding: 18px;
}
.modalCard{
  width: min(520px, 96vw);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(18,18,22,0.98);
  color: #fff;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  overflow:hidden;
}
body.day .modalCard, body.light .modalCard{
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,0.12);
}
.modalTitle{
  font-weight: 800;
  font-size: 1.05rem;
  padding: 14px 16px 0 16px;
}
.modalBody{ padding: 12px 16px 16px 16px; }
.modalText{ margin: 8px 0 12px 0; line-height: 1.35; }
.smallMuted{ font-size: 0.9rem; opacity: 0.85; }
.tinyMuted{ font-size: 0.78rem; opacity: 0.75; margin-top: 10px; line-height: 1.25; }
.fieldLabel{ display:block; margin: 10px 0 6px 0; font-size:0.85rem; opacity:0.85; }

.fullWidth{ width: 100%; display:block; text-align:center; }
.btnPrimary{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.10);
  color: inherit;
  font-weight: 700;
  text-decoration:none;
  cursor:pointer;
}
body.day .btnPrimary, body.light .btnPrimary{
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(0,0,0,0.06);
}
.btnGhost{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font-weight: 700;
  text-decoration:none;
  cursor:pointer;
}
.btnPrimary + .btnGhost, .btnGhost + .btnPrimary, .btnGhost + .btnGhost, .btnPrimary + .btnPrimary{ margin-top: 10px; }

.pillWarn{display:inline-block;margin-top:8px;padding:6px 10px;border-radius:999px;background:rgba(255,165,0,0.14);border:1px solid rgba(255,165,0,0.35);color:#ffb347;font-size:12px;}

.btnMini{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);color:inherit;border-radius:10px;padding:6px 10px;font-size:12px;cursor:pointer;}
.btnMini:hover{background:rgba(255,255,255,0.12);}
.lbMetaHint{font-size:12px;opacity:0.85;margin-bottom:6px;}
.modalCard.wide{max-width:720px;}
.pendingList{margin-top:10px;display:flex;flex-direction:column;gap:10px;max-height:55vh;overflow:auto;}
.pendingRow{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);}
.pendingTitle{font-weight:700;margin-bottom:4px;}
.pendingMain{flex:1;min-width:0;}

/* ------------------------------------------------------------
   Decorative background layer
   ------------------------------------------------------------ */
.viewWrap{ position: relative; }
.decorLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
/* subtle repeated icon background */
.decorLayer::before{
  content:"";
  position:absolute;
  inset:-40px;
  opacity:0.06;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Ccircle cx='24' cy='24' r='10'/%3E%3Cpath d='M14 24h20'/%3E%3Cpath d='M24 14c4 3 7 7 7 10s-3 7-7 10'/%3E%3Cpath d='M24 14c-4 3-7 7-7 10s3 7 7 10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px;
  background-repeat: repeat;
  mix-blend-mode: screen;
}
.decorLayer img{
  position:absolute;
  width:56px;
  height:56px;
  opacity:0.10;
  transform: rotate(var(--rot, 0deg));
  filter: grayscale(0.05) saturate(1.1);
}
@media (max-width: 680px){
  .decorLayer img{ width:44px; height:44px; opacity:0.12; }
}

/* Keep view content above decorations */
.viewWrap > .decorLayer + *{ position: relative; z-index: 1; }

/* Legibility tweaks requested */
.brandLine .creator{ color: inherit; }
#view-upcoming, #view-upcoming *{ color: #111; }
.roundTitle, .regionName{ color:#111; }

/* Upcoming events: ensure readable dark text on desktop */
#view-upcoming, #view-upcoming *{
  color:#111;
}
#view-upcoming .btn, #view-upcoming .navLink{ color:#fff; }

/* --- Bracket action buttons --- */
.bracketActionRow{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  padding: 10px 0 4px;
}

.bracketActionRow.centerActions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.bracketActionRow.centerActions .btn{
  width:100%;
}

#saveEnterBtn{ color:#000 !important; }

/* --- Auth modal text should be black --- */
.auth-modal, .auth-modal *{
  color:#000 !important;
  opacity:1 !important;
}

/* --- My Brackets: highlight Create New button --- */
#createNewBtn{
  outline: 3px solid #f5c400;
  outline-offset: 3px;
}


/* v37.1 branding + seasonal banner */
.brandRow{display:flex;align-items:center;gap:10px;}
.brandLogo{width:34px;height:34px;flex:0 0 auto;}
.seasonBar{background:#ffffff;color:#000000;font-weight:800;font-size:22px;line-height:1.2;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,0.08);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.seasonText{flex:1;min-width:0;}
.seasonEditBtn{white-space:nowrap;}
@media (max-width: 820px){
  .seasonBar{background:#e5e7eb;font-size:18px;}
  .brandLogo{width:28px;height:28px;}
}


/* v37.3 admin lock controls */
.seasonControls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.lockStatus{
  font-size:12px;
  font-weight:700;
  opacity:0.85;
}
.lockStatus.locked{ color:#b00020; }
.lockStatus.scheduled{ color:#0b5; }
.lockStatus.unlocked{ color:#333; }
@media (max-width: 900px){
  .lockStatus{ font-size:11px; }
}


/* v37.3 lock modal pills */
.pillRow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pillOn{ border-color: rgba(0,200,0,0.35); background: rgba(0,200,0,0.10); }
.pillOff{ border-color: rgba(0,0,0,0.20); background: rgba(0,0,0,0.04); }
.pillLock{ border-color: rgba(176,0,32,0.45); background: rgba(176,0,32,0.12); }
.pillInfo{ border-color: rgba(0,0,0,0.18); background: rgba(0,0,0,0.03); }
body.desktop .pillOff, body.desktop .pillInfo{ border-color: rgba(255,255,255,0.20); background: rgba(255,255,255,0.06); }


/* v37.4 Challenge polish */
.hIcon{margin-right:8px; font-size: 20px; vertical-align: -1px;}
.subhead{margin-top:6px; color: var(--muted); font-size:13px; line-height:1.25;}
.challengeLayout{display:block; margin-top:12px;}
.challengeMain{display:flex; flex-direction:column; gap:12px;}
.challengeSide{margin-top:12px;}
@media(min-width: 900px){
  .challengeLayout{display:grid; grid-template-columns: 1fr 420px; gap:14px; align-items:start;}
  .challengeSide{margin-top:0;}
}
.rulesCard .rulesInner{margin:0;}
.rulesHeader{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.rulesHeader .rulesTitle{font-weight:900; letter-spacing:.2px;}
.rulesHeader .rulesBadge{font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); color: var(--muted);}
.rulesGrid{display:grid; grid-template-columns: 1fr; gap:8px; margin-top:8px;}
@media(min-width: 700px){ .rulesGrid{grid-template-columns: 1fr 1fr;} }
.ruleItem{border:1px solid var(--line); border-radius:12px; padding:10px; background: rgba(255,255,255,0.03);}
body.mobile .ruleItem{background: rgba(0,0,0,0.02);}
.ruleItem b{display:block; margin-bottom:3px;}
.leaderboardCard{padding:12px;}
/* Alias for older markup */
.card-title{font-weight:800;margin-bottom:6px;}

/* Challenge pages: leaderboard/copy should be WHITE on dark UI */
#view-best, #view-worst{color:#fff;}
#view-best .muted, #view-best .smallNote, #view-best .micro, #view-best .helpText,
#view-worst .muted, #view-worst .smallNote, #view-worst .micro, #view-worst .helpText{color:#fff !important;}

/* Leaderboard text should be white on Best/Worst pages */
.view-best .leaderboard, .view-worst .leaderboard, .view-best .leaderboard * , .view-worst .leaderboard * { color:#fff; }

/* But the "Leaderboard" title itself should be BLACK above the stat header row */
.view-best .leaderboard .card-title,
.view-worst .leaderboard .card-title,
.view-best .leaderboard .cardTitle,
.view-worst .leaderboard .cardTitle{
  color:#000 !important;
}


/* Challenge availability note */
.challengeMsg{margin:14px auto 0; max-width:1100px; padding:10px 14px; border-radius:10px; background:#f2f2f2; color:#111; font-weight:600; text-align:center;}


/* Home center stack headings darker */
.centerStack .panelHead h2{color:#000;}


/* Worst challenge rules should be black text */
#worstRules, #worstRules *{color:#000 !important;}


/* My Brackets modal text colors */
.bracketsModal{color:#000;}
.bracketListItem{color:#000;}
.bracketMeta{color:#000; opacity:0.85;}
.bracketActions .danger{color:#c00;}


/* My Brackets page */
.bracketsGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.bracketCard{display:block;padding:12px;border-radius:12px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);text-decoration:none;}
.bracketCard:hover{background:rgba(255,255,255,0.12);}
.bracketTitle{font-weight:700;color:#fff;font-size:16px;margin-bottom:6px;}
.bracketMeta{color:rgba(255,255,255,0.75);font-size:12px;}
.page-mybrackets .panel h2{color:#111827;}
.page-mybrackets .muted{color:#6b7280;}

.page-mybrackets .bracketCard{color:#111827; text-decoration:none;}
.page-mybrackets .bracketCard:hover{background:var(--panel2);}
.page-mybrackets .bracketTitle{color:#111827;}
.page-mybrackets .bracketMeta{color:#374151;}
.page-mybrackets .panelActions{display:flex;gap:10px;justify-content:flex-start;flex-wrap:wrap;margin:10px 0 14px;}
.page-mybrackets .panelActions #secondChanceHint{flex-basis:100%;}


.bracketPageTitle{font-size:20px; font-weight:800; color:#ffffff; margin-top:6px; display:inline-block; padding:2px 6px; border-radius:6px;}
/* Input version of the title (mobile-friendly keyboard) */
.bracketPageTitleInput{background:transparent; border:0; color:inherit; width:min(420px, 92vw);}
.bracketPageTitleInput:focus{outline:2px solid rgba(255,255,255,0.55); background:rgba(0,0,0,0.25);}

/* Title row and quick buttons on bracket page */
.bracketTitleRow{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.bracketTitleRow #bracketPageTitle{min-width:180px; flex:1 1 auto;}
.btnCompact{padding:8px 12px; font-size:14px; line-height:1; border-radius:10px;}



/* Nav dropdowns for challenge tabs */
.navDrop{position:relative; display:inline-block;}
.navDropBtn{background:transparent; border:none; padding:10px 12px; font:inherit; color:inherit; cursor:pointer;}
.navDropBtn:hover{opacity:0.9;}
.navDropMenu{display:none; position:absolute; top:100%; left:0; min-width:200px; background:#111; border:1px solid #333; border-radius:10px; padding:6px; z-index:50;}
.navDrop:hover .navDropMenu, .navDrop:focus-within .navDropMenu{display:block;}
.navDropItem{display:block; padding:10px 10px; border-radius:8px; color:#fff; text-decoration:none;}
.navDropItem:hover{background:#222;}
@media (max-width: 600px){
  /* On mobile, dropdown items should only appear after tapping the parent tab */
  .navDropMenu{position:static; display:none; background:transparent; border:none; padding:0;}
  .navDrop.open .navDropMenu{display:block;}
  .navDropItem{padding:8px 0;}
}


/* Force auth modal text to black */
.auth-modal, .auth-modal * { color: #000 !important; }
.auth-modal input, .auth-modal select, .auth-modal textarea { color: #000 !important; }

/* Bracket action buttons under the championship area */
.bracketActionRow{display:flex;gap:12px;justify-content:center;align-items:center;padding:10px 0 4px;}
#saveEnterBtn{color:#000 !important;}

/* My Brackets: highlight create button */
#createNewBtn{outline:3px solid #ffd400; outline-offset:3px; cursor:pointer;}

/* Championship heading alignment */
.champPanel .panelHead h2{ font-size: 18px; font-weight: 700; }
.champPanel .panelHead{ padding-left: 18px; }

/* Mobile: prevent sticky nav from covering topbar actions (e.g., "Create New Bracket") */
@media (max-width: 520px){
  .siteNav{ top: 76px; }
  .roundBar{ top: 132px; }
}



/* Mobile: show full bracket with horizontal scroll (keeps Round 1 on the left, champion on the right). */
@media (max-width: 768px) {
  #ncaaFullSection {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #ncaaFullSection .espnGrid {
    min-width: 1100px;
  }
}


/* Admin phase toggle (My Brackets) */
.adminPhaseWrap{display:flex; align-items:center;}
.adminPhaseCard{display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid rgba(0,0,0,.15); border-radius:10px; background:rgba(255,255,255,.85);}

/* My Brackets: top controls should sit ABOVE all bracket sections, without a large wrapping panel. */
.topControls{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; margin-bottom:14px;}
.topControlCard{padding:10px 12px; border:1px solid rgba(0,0,0,.15); border-radius:12px; background:rgba(255,255,255,.85);} 
.topControlCard .btn{width:100%;}
.adminPhaseTitle{font-size:12px; font-weight:700; letter-spacing:.02em; color:#111;}
.adminToggleLabel{display:flex; align-items:center; gap:8px; font-size:13px; color:#111;}
.adminToggleLabel input{transform: translateY(1px);} 

/* Ensure bracket cards use black text */
.bracketCard, .bracketTitle{color:#000 !important;}



/* Desktop only: white background only behind the two top My Brackets buttons (not a big outer card). */
@media (min-width: 900px){
  .page-mybrackets .topControlCard{
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
  .page-mybrackets .topControlCard .btn{
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
  }
}




/* Desktop: nudge My Brackets top controls slightly right/down so button shadows/outlines aren't clipped */
@media (min-width: 900px){
  .page-mybrackets .topControls{
    margin-left: 14px;
    margin-top: 8px;
  }
  .page-mybrackets #scEmpty{
    margin-left: 12px;
    align-self: center;
  }
}




/* Mobile: prevent brand logo/text from overlapping auth buttons by stacking header rows */
@media (max-width: 600px){
  .topbar{
    position: static !important;
  }
  .stickyNav{
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--panel2);
    border-bottom: 1px solid var(--line);
  }
  .topbar{
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  .topbar .brandWrap{
    flex: 1 1 100% !important;
    min-width: 180px !important;
  }
  .topbar .actions{
    flex: 1 1 100% !important;
    align-items: flex-start !important;
    margin-top: 8px !important;
  }
  .topbar .actionRow{
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  .topbar .brandRow{
    flex-wrap: wrap !important;
  }
  .topbar .brandLogo{
    width: 28px !important;
    height: 28px !important;
  }
}




/* My Brackets: 2 cards per row on mobile */
@media (max-width: 600px){
  .bracketsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .bracketCard{
    padding: 10px !important;
  }
  .bracketTitle{
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }
  .bracketMeta{
    font-size: 11px !important;
  }
}




.page-mybrackets .bracketCard:hover{
  background: rgba(255,255,255,0.20) !important;
}




.page-mybrackets .bracketCard:hover{
  background: rgba(220,220,220,0.28) !important;
}




/* My Brackets: slightly darker grey cards (desktop + mobile) */
.page-mybrackets .bracketCard{
  background: rgba(200,200,200,0.28) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.28) !important;
  transition: background 0.15s ease;
}
.page-mybrackets .bracketCard:hover{
  background: rgba(200,200,200,0.38) !important;
}




/* My Brackets: extra spacing below section headings */
.page-mybrackets .panel h2{
  margin-bottom: 14px !important;
}




/* Mobile: ESPN-like small round tabs under the header */
@media (max-width: 768px){
  .siteNav{
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling: touch;
    gap:10px !important;
    padding:10px 12px !important;
  }
  .siteNav a,
  .siteNav button{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    background: rgba(255,255,255,0.86) !important;
    color:#111 !important;
    border:1px solid rgba(0,0,0,0.18) !important;
    border-radius:999px !important;
    padding:8px 12px !important;
    font-weight:700 !important;
    font-size:13px !important;
    line-height:1 !important;
    box-shadow:none !important;
  }
  .siteNav a.active{
    background: rgba(0,0,0,0.12) !important;
    border-color: rgba(0,0,0,0.28) !important;
    color:#000 !important;
  }
}




/* Center boxes: seed numbers should be black */
#finalFourBoard .seed,
#championBoard .seed{
  color:#000 !important;
}

/* Center champion display: slightly bigger */
#championBoard .championBigName{
	    max-width: 280px;
	    margin: 0 auto;

  font-size:32px !important;
}



/* PATCH 10: Mobile selected tab = grey bg + blue highlight */
@media (max-width: 768px) {
  .tabs .active, .tabs .active a, .tabs .active span {
    background: #e5e7eb !important;
    border: 2px solid #2563eb !important;
    color: #000000 !important;
  }
}


/* PATCH 11: Mobile - make selected nav tab VERY visible (siteNav .navLink.active) */
@media (max-width: 768px) {
  .stickyNav .siteNav .navLink.active {
    background: #2563eb !important;
    border: 2px solid #2563eb !important;
    color: #ffffff !important;
  }
  .stickyNav .siteNav .navLink.active * { color: #ffffff !important; }
}


/* PATCH 12: Mobile - all selected tabs (links + dropdown buttons) light up blue with white text */
@media (max-width: 768px) {
  .siteNav .navLink.active,
  .stickyNav .siteNav .navLink.active {
    background: #2563eb !important;
    border: 2px solid #2563eb !important;
    color: #ffffff !important;
  }
  .siteNav .navLink.active *,
  .stickyNav .siteNav .navLink.active * { color: #ffffff !important; }

  .siteNav .navDrop.open > .navDropBtn,
  .stickyNav .siteNav .navDrop.open > .navDropBtn {
    background: #2563eb !important;
    border: 2px solid #2563eb !important;
    color: #ffffff !important;
  }
  .siteNav .navDrop.open > .navDropBtn *,
  .stickyNav .siteNav .navDrop.open > .navDropBtn * { color: #ffffff !important; }
}


/* PATCH 13: Hide standalone 'My Brackets' action button (tab already exists) */
button:has(span:contains('My Brackets')) { display:none !important; }
.myBracketsBtn { display:none !important; }


/* PATCH 14 */
/* Ensure logo displays on all pages */
.siteLogo { display: flex !important; align-items: center; }
/* Desktop selected tab: blue background + white text */
@media (min-width: 769px) {
  .siteNav .navLink.active {
    background: #2563eb !important;
    border: 2px solid #2563eb !important;
    color: #ffffff !important;
  }
  .siteNav .navLink.active * { color: #ffffff !important; }
}


/* PATCH 17: Mobile - prevent nav pills from collapsing/flattening (Best/Worst) */
@media (max-width: 768px) {
  .siteNav .navLink,
  .siteNav .navDropBtn,
  .stickyNav .siteNav .navLink,
  .stickyNav .siteNav .navDropBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    padding: 10px 16px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
}


/* PATCH 19 Footer */
.bbFooter {
  margin-top: 60px;
  padding: 30px 20px;
  background: #111827;
  color: #d1d5db;
  font-size: 14px;
}
.bbFooter a {
  color: #60a5fa;
  text-decoration: none;
}
.bbFooterInner {
  max-width: 900px;
  margin: 0 auto;
}


/* PATCH 23: highlight active dropdown tab buttons on full challenge pages */
.siteNav .navDrop.bestActive > .navDropBtn,
.siteNav .navDrop.worstActive > .navDropBtn {
  background: #2563eb !important;
  border: 2px solid #2563eb !important;
  color: #ffffff !important;
}
.siteNav .navDrop.bestActive > .navDropBtn *,
.siteNav .navDrop.worstActive > .navDropBtn * { color:#ffffff !important; }
.siteNav .navDrop.open > .navDropBtn {
  background: #2563eb !important;
  border: 2px solid #2563eb !important;
  color: #ffffff !important;
}
.siteNav .navDrop.open > .navDropBtn * { color:#ffffff !important; }


/* PATCH 24: Reminder email placeholder text black */
#remindEmail::placeholder { color: #000000 !important; opacity: 1 !important; }
#remindEmail::-webkit-input-placeholder { color: #000000 !important; opacity: 1 !important; }
#remindEmail:-ms-input-placeholder { color: #000000 !important; }


/* PATCH 26: Desktop center finals redesign (Final 4 layout + simplified Champion) */
.panelHead.final4Plain h2{ color:#111 !important; font-weight:900; background:none !important; padding:0 !important; border:none !important; }
.panelHead.final4Plain .panelHeadRight{ margin-left:auto; text-align:right; }
#finalFourBoard .final4Layout{ display:grid; grid-template-columns: max-content max-content; gap:18px; align-items:center; justify-content:center; }

/* PATCH: Home page Final 4 headings + spacing (desktop only)
   - Remove pill-style backgrounds for Final 4 / Championship headings on the HOME panel
   - Spread the left/right picks to the far ends of the Final 4 board */
@media (min-width: 900px){
  /* Match Champion heading style: black text, no pill background */
  #view-home .final4Panel .panelHead.final4Head .roundTitle,
  #view-home .final4Panel .panelHead.final4Head .champTitle{
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #111 !important;
  }
  #view-home .final4Panel .panelHead.final4Head{ margin-bottom: 10px; }

  /* Spread left/right columns across the full board width */
  #finalFourBoard .final4Layout{
    display:flex !important;
    justify-content:space-between !important;
    align-items:flex-start !important;
    width:100% !important;
    gap:0 !important;
  }
  #finalFourBoard .final4Col{ align-items:flex-start !important; }
  #finalFourBoard .final4ColRight{ align-items:flex-end !important; }
}

/* PATCH: Remove the small Final 4 / Championship "pill" sub-headings everywhere on DESKTOP.
   The panel already has the correct "FINAL 4" heading; these sub-headings are redundant.
   Also give the Final 4 board a consistent width so the left/right picks can sit on the far ends. */
@media (min-width: 900px){
  .final4Panel .panelHead.final4Head{ display:none !important; }
  #finalFourBoard .final4Layout{ width:560px !important; }
}

/* Desktop-only: tighten the Final 4 container so it closely wraps the 4 picks (no extra blank space). */
@media (min-width: 900px){
  .final4Panel{
    /* shrink-wrap the card to the Final 4 content (no extra blank space) */
    display:inline-block;
    align-self:center;
    width:-moz-fit-content;
    width:fit-content;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    padding:12px 12px;
  }
}
#finalFourBoard .final4Col{ display:flex; flex-direction:column; gap:12px; width:max-content; align-items:center; }
#finalFourBoard .final4ColMid{ align-items:stretch; }
#finalFourBoard .slot{ height:56px; width:100%; background:#0b1220 !important; color:#fff !important; border:1px solid rgba(0,0,0,0.35) !important; border-radius:12px; }
#finalFourBoard .slot .seed, #finalFourBoard .slot .team{ color:#fff !important; }
#finalFourBoard .slot.empty{ background:#f3f4f6 !important; color:#111 !important; }
#finalFourBoard .slot.empty .seed, #finalFourBoard .slot.empty .team{ color:#111 !important; }
#finalFourBoard .final4WinnerSlot{ cursor:pointer; }
#championBoard .championBox{ margin-top:0; }
#championBoard .championName{ font-size:28px; font-weight:900; color:#111; }


/* ---- Champion Redesign ---- */
.champion-pick {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

.champion-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

@media (min-width: 900px) {
    .champion-pick {
        font-size: 26px !important;
    }
}



/* === PATCH 29: Normalize Final 4 & Championship Pick Box Size === */
.final4-box .slot,
.championship-box .slot {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}


/* === PATCH 30: Final 4 header + pick box normalization === */

/* Final 4 triple header: black text, no pill background */
.panelHead.final4Plain h2,
.panelHead.final4Plain .panelHeadRight,
.panelHead.final4Plain .panelHeadMid{
  background: transparent !important;
  color: #000 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: 2px;
  font-size: 14px;
}

/* layout for triple header */
.panelHeadTriple{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items:center;
  gap: 8px;
}
.panelHeadTriple .panelHeadMid{ text-align:center; }
.panelHeadTriple .panelHeadRight{ text-align:right; }

/* Final 4 and Championship selection boxes: match standard bracket pick sizing */
#finalFourBoard .slot,
#finalFourBoard button.slot{
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  border-radius: 14px !important; /* keep consistent with slot */
}

/* Champion pick: centered + smaller */
#championBoard .championBigName{
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
  font-size: 18px !important;
  justify-content: center !important;
  text-align: center !important;
}
#championBoard .championBigName *{
  text-align: center !important;
}



/* === PATCH 31: Balance Final 4 spacing === */

/* Make final four board use symmetric 3-column grid */
#finalFourBoard{
  display:grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  justify-items:center !important;
  column-gap: 40px !important;
}

/* Center middle championship picks properly */
#finalFourBoard .championshipCol{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Ensure left and right columns align inward evenly */
#finalFourBoard .leftCol,
#finalFourBoard .rightCol{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}



/* === PATCH 32: Simplify Final Four Layout === */

/* Remove spacing for removed headers */
.panelHeadTriple,
.final4Plain{
  display:none !important;
}

/* Ensure championship selections align nicely in championBoard */
#championBoard .championshipCol{
  display:flex !important;
  justify-content:center !important;
  gap:20px;
  margin-bottom:15px;
}



/* === PATCH 33: Mobile revert Final Four styling === */
@media (max-width: 900px){

  /* Restore standard slot appearance on mobile */
  #finalFourBoard .slot{
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 14px !important;
  }
  /* Mobile headings handled by panel headers (avoid duplicates). */
  /* Remove desktop grid constraints */
  #finalFourBoard{
    display:block !important;
  }

}


/* === PATCH 36: Wider mobile bracket boxes === */
@media (max-width: 900px){
  .slot{
    width: 155px !important;
    min-width: 155px !important;
  }
}


/* === PATCH 37: Mobile - tighten seed-to-team spacing + slightly wider boxes === */
@media (max-width: 900px){
  .slot{
    width: 165px !important;
    min-width: 165px !important;
    gap: 4px !important;            /* less space between seed and team name */
    padding: 8px 8px !important;     /* slightly tighter horizontal padding */
  }
  /* if seed/name are spans, remove extra margins */
  .slot .seed, .slot .seedNum{
    margin-right: 2px !important;
  }
  .slot .teamName, .slot .name{
    margin-left: 0 !important;
  }
}


/* === PATCH 38: Mobile - tighter seed spacing + wider boxes === */
@media (max-width: 900px){
  .slot{
    width: 180px !important;
    min-width: 180px !important;
    padding: 8px 6px !important;   /* reduce side padding */
    gap: 2px !important;           /* minimal gap between seed and team */
  }

  .slot .seed, .slot .seedNum{
    margin-right: 1px !important;
  }

  .slot .teamName, .slot .name{
    margin-left: 0 !important;
  }
}


/* === PATCH 39: Mobile - maximum tightening + wider boxes === */
@media (max-width: 900px){
  .slot{
    width: 200px !important;
    min-width: 200px !important;
    padding: 8px 4px !important;   /* very tight side padding */
    gap: 0px !important;           /* remove gap completely */
  }

  .slot .seed, .slot .seedNum{
    margin-right: 0px !important;
  }

  .slot .teamName, .slot .name{
    margin-left: 0px !important;
  }
}


/* === PATCH 40: Mobile - slightly wider boxes === */
@media (max-width: 900px){
  .slot{
    width: 220px !important;
    min-width: 220px !important;
  }
}


/* === PATCH 41: Mobile - wider boxes again === */
@media (max-width: 900px){
  .slot{
    width: 235px !important;
    min-width: 235px !important;
  }
}


/* === PATCH 42: All mobile bracket boxes set to 180px === */
@media (max-width: 900px){
  .slot{
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
  }
}


/* === PATCH 53: Center Final 4 + Championship picks on desktop === */
@media (min-width: 1024px) {
  .final4-container,
  .championship-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 24px !important;
  }
}


/* === PATCH 59: Desktop - championship finalists use same black pick boxes as other rounds === */
@media (min-width: 900px){
  /* Finals (2 championship teams) shown in champion panel sides */
  #championBoard .champSide .slot,
  #championBoard .champSide .final4WinnerSlot{
    background:#111827 !important;
    color:#ffffff !important;
    border:1px solid #111827 !important;
    border-radius:14px !important;
  }
  #championBoard .champSide .slot .seed,
  #championBoard .champSide .slot .team,
  #championBoard .champSide .slot .name{
    color:#ffffff !important;
  }
}


/* BB PATCH: Desktop champSide slots fixed width */
@media (min-width: 900px){
  #championBoard .champSide .slot,
  #championBoard .champSide .final4WinnerSlot{
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  #championBoard .championName{
    font-size: 22px !important;
    font-weight: 900 !important;
  }
}



/* PATCH v4 (desktop): ensure Final 4 left/right teams stay INSIDE the white board and are evenly inset.
   The center column is ~460px wide, so do not force wider layouts. */
@media (min-width: 900px){
  /* Make the Final 4 board use full available width (not a 3-col grid) */
  #finalFourBoard.finalFourGrid{ display:block !important; }

  /* Older patches set #finalFourBoard to a 3-column grid (centers children),
     which prevents the left/right Final 4 picks from spreading across the board.
     Force the mount back to a normal block container on desktop. */
  #finalFourBoard{ display:block !important; }

  /* Keep the white panel within the center column */
  .final4Panel{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }

  /* Spread left/right columns across the board with equal insets */
  #finalFourBoard .final4Layout{
    display:flex !important;
    justify-content:space-between !important;
    align-items:flex-start !important;
    width:100% !important;
    padding:0 28px !important; /* equal left/right inset (keeps right picks on-board) */
    box-sizing:border-box !important;
    gap:0 !important;
  }
  #finalFourBoard .final4ColLeft{ align-items:flex-start !important; }
  #finalFourBoard .final4ColRight{ align-items:flex-end !important; }
}



/* Admin broadcast inputs: force black text + placeholder, hide placeholder on focus */
.adminBroadcast input.adminSubj,
.adminBroadcastStandalone input.adminSubj,
.adminBroadcast textarea.adminMsg,
.adminBroadcastStandalone textarea.adminMsg{
  color:#000 !important;
  caret-color:#000 !important;
}
.adminBroadcast input.adminSubj::placeholder,
.adminBroadcastStandalone input.adminSubj::placeholder,
.adminBroadcast textarea.adminMsg::placeholder,
.adminBroadcastStandalone textarea.adminMsg::placeholder{
  color:#000 !important;
  opacity:1 !important;
}
.adminBroadcast input.adminSubj:focus::placeholder,
.adminBroadcastStandalone input.adminSubj:focus::placeholder,
.adminBroadcast textarea.adminMsg:focus::placeholder,
.adminBroadcastStandalone textarea.adminMsg:focus::placeholder{
  color:transparent !important;
}



/* Challenge page top (Best/Worst) */
.challengeTop{
  margin: 14px 0 12px;
}
.challengeTopHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding: 6px 2px 12px;
}
.challengeKicker{
  font-weight:900;
  letter-spacing:.12em;
  font-size:12px;
  color: var(--muted);
}
.challengeTagline{
  text-align:right;
  color: var(--muted);
  font-size:13px;
}
.challengeTopGrid{
  display:grid;
  grid-template-columns: 1.35fr .85fr;
  gap:12px;
}
.challengePill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  background: var(--panel2);
  border:1px solid var(--line);
  font-weight:800;
  color: var(--text);
  font-size:12px;
  white-space:nowrap;
}
.challengeCards2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.miniCard{
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}
.miniTitle{
  font-weight:900;
  margin-bottom:6px;
}
.miniBody{
  color: var(--text);
  line-height:1.35;
}
.miniMuted{ color: var(--muted); }
.challengeActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.leaderMeta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.leaderTitle{ font-weight:900; }
.leaderSub{ color: var(--muted); font-size:12px; margin-top:2px; }
.leaderHint{ color: var(--muted); font-size:12px; text-align:right; max-width:180px; }
.leaderBar{
  height:44px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.82));
  margin-top:10px;
}

/* Mobile: stack */
@media (max-width: 900px){
  .challengeTopGrid{ grid-template-columns: 1fr; }
  .challengeTagline{ text-align:left; }
  .challengeTopHead{ align-items:flex-start; flex-direction:column; }
  .challengeCards2{ grid-template-columns: 1fr; }
  .leaderHint{ text-align:left; max-width:none; }
}


/* FORCE emailAlerts visible (do not hide after opt-in) */
.emailAlerts{ display:block !important; }
.emailAlerts label{ display:flex !important; }

/* Horizontal email checkboxes */
.emailAlerts .checks{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
}
.emailAlerts .checkRow{
  display:flex;
  align-items:center;
  gap:6px;
}


}


/* Footer always visible on mobile */
.bbFooter{ display:block; }
@media (max-width: 820px){
  .bbFooter{ display:block !important; }
}