: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;
}

*{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;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
}

.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: sticky;
  top: 52px;
  z-index: 19;
}
.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}
.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 (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}
.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; }

  /* Bracket text must remain BLACK (no light grey on white) */
  .game, .game *{ color:#0b1220 !important; }
  .slot.empty{ color:#6b7280 !important; }
}

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

/* Challenge pages: all text must be BLACK */
#view-best, #view-worst{ color:#000; }
#view-best .muted, #view-worst .muted,
#view-best .cardBody, #view-worst .cardBody,
#view-best .subhead, #view-worst .subhead,
#view-best .smallNote, #view-worst .smallNote{ color:#000 !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}
.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:28px; font-weight:900; color:#000; line-height:1.1; }


/* 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(0,0,0,0.10);
}

/* Make challenge text fully legible (avoid light gray on light cards) */
#view-best, #view-worst{ color: #000; }
#view-best .card, #view-worst .card{ color: #000; }
#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);
}
body.mobile .lbTableWrap{
  border-color: rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.85);
}
.lbTable thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(12,18,30,0.95);
}
body.mobile .lbTable thead th{
  background: rgba(255,255,255,0.98);
}
.lbTable tbody tr:nth-child(odd){ background: rgba(255,255,255,0.02); }
body.mobile .lbTable tbody tr:nth-child(odd){ background: rgba(0,0,0,0.02); }
.lbTable tbody tr:hover{ background: rgba(255,255,255,0.05); }
body.mobile .lbTable tbody tr:hover{ background: rgba(0,0,0,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(0,0,0,0.10); background: rgba(0,0,0,0.02)}
.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(0,0,0,0.14);
  background: rgba(0,0,0,0.04);
}

/* 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;
}
.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; }


/* 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: keep copy fully legible (some text was too light) */
#view-best, #view-worst{color:#000;}
#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:#000 !important;}