:root{
  --bg: #0f1220;
  --panel: #0f172a;
  --text: #e6f2ff;
  --muted: hsl(205, 25%, 70%);
  --accent: rgb(6, 182, 212);
  --accent-2: #fbbf24;
  --border: #1f2a37;
}

*{ box-sizing: border-box; }
body{
  margin:0; font-family:"Inter", system-ui, Arial, sans-serif; color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(6,182,212,.10), transparent 60%),
    radial-gradient(1200px 800px at 120% 10%, rgba(251,191,36,.10), transparent 60%),
    var(--bg);
}

/* navbar same pattern */
header {
  background: #0b1220;
  padding: 20px 40px;
  border-bottom: 2px solid var(--accent-2);
  box-shadow: 0 0 12px rgba(167,139,250,0.5); /* glow effect */
}

/* Make navbar links pop with violet on hover */
.nav-links a:hover {
  background: rgba(167,139,250,.12);
  color: #fff;
}

.navbar{ position:relative; display:flex; justify-content:space-between; align-items:center; }
.logo img.logo-img{ height:60px; border-radius:6px; }
.league-title{ position:absolute; left:50%; transform:translateX(-50%); font-weight:800; font-size:30px; white-space:nowrap; color: #a78bfa; text-shadow:0 0px 24px rgba(6, 181, 212, 0.455) }
.menu-toggle{ display:flex; flex-direction:column; gap:5px; cursor:pointer; box-shadow:0 0px 24px rgba(167,139,250,0.5) }
.menu-toggle div{ width:26px; height:3px; background:var(--accent); transition:.3s; }
.menu-toggle.active div:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle.active div:nth-child(2){ opacity:0; }
.menu-toggle.active div:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
.nav-links{
  display:none !important; position:absolute; top:42px; right:40px;
  background:#0b1220; border:1px solid var(--border); border-radius:12px;
  width:240px; padding:10px 0; box-shadow:0 10px 24px rgba(167,139,250,0.5); z-index:1000;
}
.nav-links.show{ display:flex !important; flex-direction:column; }
.nav-links a{ padding:12px 16px; color:var(--accent); text-decoration:none; font-weight:700; }
.nav-links a:hover{ background:rgba(6,182,212,.12); color:#fff; }

.wrap{ width:min(1200px, 94vw); margin:28px auto 60px; }

.hero{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:16px;
}
.hero h2{ margin:0; font-size:34px; color:#fff; }
.hero .sub{ margin:6px 0 0; color:var(--muted); }
.pill{ background:rgba(6,182,212,.12); border:1px solid rgba(6,182,212,.35); padding:8px 12px; border-radius:999px; color:#cfefff; }

.grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, 1fr);
}
.panel{
  background: linear-gradient(180deg, rgba(6,182,212,.06) 0%, rgba(6,182,212,0) 100%), var(--panel);
  border:1px solid rgba(6,182,212,.35);
  border-radius:16px; padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.panel-h{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.panel h3{ margin:0; font-size:20px; color:#fff; }
.hint{ color:var(--muted); font-size:12px; }
.span-2{ grid-column: span 2; }
.span-3{ grid-column: span 3; }

/* rank list */
.rank-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rank-list .row{ display:grid; grid-template-columns: 32px 180px 1fr; align-items:center; gap:10px; }
.rank{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#09101f; color:#cfefff; font-weight:800; }
.name{ font-weight:700; color:#fff; }

/* bars */
/* bar container */
.bar{
  position: relative;
  height: 36px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  overflow: hidden;
}

/* filled portion holds the text */
.bar > span{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 8px 0 0 8px;
  /* helpful so tiny percents do not clip text completely */
  min-width: 44px;
}

/* the percent text itself */
.bar > span > em{
  position: static;
  z-index: 2;
  font-style: normal;
  font-weight: 800;
  font-size: 14px;
  color: #ffffff;
}

/* remove old badge styling if it exists */
.bar em{
  background: transparent;
  padding: 0;
}

/* Force smaller font size inside conference odds bars */
.div-grid .bar > span > em {
  font-size: 10px !important; /* strong override */
}

/* mobile sizing just for conference odds block */
@media (max-width: 720px){
  .div-grid .bar{ height: 32px; }
  .div-grid .bar > span{ min-width: 36px; }
  .div-grid .bar > span > em{ font-size: 10px; }
  /* Smaller font size only for conference odds bars */
.div-grid .bar > span > em {
  font-size: 12px; /* smaller than title odds bars */
}
}

/* division cards */
.div-grid{ display:grid; grid-template-columns: 1fr; gap:12px; }
.div-card{ background:#0b1220; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px; }
.div-card h4{ margin:0 0 10px; color:var(--accent-2); }
.div-row{ display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:10px; margin:6px 0; }

/* table */
.tbl{ width:100%; border-collapse:collapse; font-size:15px; }
.tbl thead th{ text-align:left; padding:10px 12px; color:#0f1220; background:var(--accent); font-weight:900; letter-spacing:.02em; }
.tbl td{ padding:10px 12px; border-bottom:1px dashed rgba(255,255,255,.08); }

/* bullets */
.bullets{ margin:0; padding-left:18px; color:#dbe9ff; }
.bullets li{ margin:6px 0; }

/* footer */
footer{ text-align:center; padding:20px; color:#a3b1c6; border-top:1px solid var(--border); margin-top:40px; }

/* responsive */
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
  .span-2, .span-3{ grid-column: auto; }
  .league-title{ font-size:22px; }
}

/* ===== Color refresh just for Odds page ===== */
:root{
  --accent: #22d3ee;   /* brighter cyan */
  --accent-2: #a78bfa; /* soft violet for headings */
  --panel: #0c1424;    /* cooler panel tone */
}

/* Panels get a violet tint so this page feels distinct */
.panel{
  background:
    linear-gradient(180deg, rgba(167,139,250,.07) 0%, rgba(167,139,250,0) 100%),
    var(--panel);
  border: 1px solid rgba(167,139,250,.35);
}

/* Section headers use violet */
.panel h3{ color: var(--accent-2); }

/* Progress bars get a cyan to violet gradient */
.bar span{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* Division cards pick up a subtle violet edge */
.div-card{
  background: #0e1930;
  border: 1px solid rgba(167,139,250,.25);
}

/* Table header uses violet instead of cyan */
.tbl thead th{
  background: var(--accent-2);
  color: #0b1020;
}

/* Rank pill leans violet */
.rank{ background:#0d1530; color:#e9e6ff; }

/* Badge text slightly smaller globally to declutter */
.bar em{ font-size:12px; padding:1px 6px; }

/* ===== Mobile tweak for division odds only ===== */
@media (max-width: 720px){
  /* Only shrink the percentage badges inside the division odds cards */
  .div-grid .bar{ height:24px; }
  .div-grid .bar em{ font-size:11px; padding:1px 5px; }
  .div-grid .div-row{ grid-template-columns: 1.2fr 1fr; } /* give names a touch more room */
}