/* Fantasy Zone — "Pro" theme (28 Oct 2026)
   Charcoal + aqua. Replaces theme.css + theme-light.css (both kept in the folder; swap the
   <link> in index.html to go back). Loaded after styles.css and pwa.css.
   Type: Barlow for reading, Barlow Condensed for scores, clocks, headings and table heads. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&display=swap');

:root{
  --bg:#15171c; --panel:#1e2128; --raised:#272b33; --raised2:#2e333c; --line:#333842; --line-soft:#2a2e36;
  --text:#eceff3; --text2:#c3c9d3; --muted:#959dab;
  --aqua:#2fd3df; --aqua-ink:#06262a; --aqua-tint:rgba(47,211,223,.12);
  --win:#3ccf8e; --win-tint:rgba(60,207,142,.12); --live:#ff5468; --gold:#e6b74a;
  --radius:12px; --radius-sm:8px;
  --font:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-cond:'Barlow Condensed','Barlow',system-ui,sans-serif;
  color-scheme:dark;
}

/* ---------- Base ---------- */
html{background:var(--bg)!important}
body{background:var(--bg)!important;color:var(--text)!important;font-family:var(--font)!important;font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
body::before,body::after{display:none!important}
h2{font-family:var(--font-cond);font-weight:700;font-size:24px;letter-spacing:.2px;margin:0 0 10px;color:var(--text)}
h3{color:var(--text)}
label{color:var(--text2);font-size:13px;font-weight:600;display:block;margin:10px 0 5px}
b,strong{color:var(--text)}
a,.linkBtn{color:var(--aqua)!important}
.muted,.muted *{color:var(--muted)!important}
.muted{font-size:13px}
::selection{background:rgba(47,211,223,.35)}
:focus-visible{outline:2px solid var(--aqua)!important;outline-offset:2px}

/* ---------- Header ---------- */
header{background:var(--bg)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important;backdrop-filter:none!important}
.headerRow{max-width:1040px!important}
.logoMark{width:36px!important;height:36px!important;border-radius:9px!important;box-shadow:none!important}
header h1{font-family:var(--font-cond)!important;font-weight:700!important;font-size:21px!important;letter-spacing:.6px!important;color:#fff!important;text-transform:uppercase}
header .tag{font-size:12px!important;letter-spacing:.2px!important;text-transform:none!important;color:var(--muted)!important;font-weight:500}
.badge{background:transparent!important;color:var(--live)!important;box-shadow:none!important;animation:none!important;border:1px solid rgba(255,84,104,.55);
  font-family:var(--font-cond);font-size:11px!important;letter-spacing:.8px!important;padding:2px 7px!important;vertical-align:3px!important}
.badge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--live);margin-right:5px;vertical-align:1px}

/* Score ticker: a quiet strip under the header */
.scoreTickerBar{background:var(--panel)!important;border-top:1px solid var(--line)!important;border-bottom:0!important}
.scoreTickerTrack{color:var(--text2)!important;font-family:var(--font-cond);font-size:13px!important;font-weight:600!important;letter-spacing:.3px!important}
.scoreTickerTrack .muted{color:var(--muted)!important}

/* ---------- Page + panels ---------- */
.wrap{max-width:1040px!important;padding:14px 16px 90px!important}
.card,details.scoringRules{background:var(--panel)!important;color:var(--text)!important;border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:18px!important}
.card h2,.card h3,.card b,.card strong,.card td,.card table{color:var(--text)!important}
.teamBlock,.queueBox,.posBattle{background:transparent!important;border-color:var(--line-soft)!important;box-shadow:none!important}
.queueBox{background:var(--raised)!important;border:1px solid var(--line)!important;border-radius:var(--radius-sm)!important}
.sectionHead{border-left:3px solid var(--aqua)!important;padding-left:9px!important;margin:16px 0 8px!important}
.sectionHead h3{font-family:var(--font-cond)!important;font-size:16px!important;font-weight:700!important;letter-spacing:.3px!important;text-transform:none!important;color:var(--text)!important}
.notice{background:var(--aqua-tint)!important;color:var(--text)!important;border-radius:var(--radius-sm)}

/* ---------- Tabs: one scrollable row, aqua pill for the open tab ---------- */
.tabs.card,.tabs{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:999px!important;padding:4px!important;
  display:flex!important;flex-wrap:nowrap!important;gap:2px!important;overflow-x:auto!important;scrollbar-width:none;margin-bottom:14px!important;box-shadow:none!important}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;background:transparent!important;color:var(--text2)!important;border:0!important;box-shadow:none!important;border-radius:999px!important;
  padding:8px 15px!important;font-family:var(--font)!important;font-weight:600!important;font-size:14px!important;filter:none!important}
.tabs button:hover{color:#fff!important;background:var(--raised)!important}
.tabs button.active,.tabs button.adminTabBtn.active{background:var(--aqua)!important;color:var(--aqua-ink)!important;font-weight:700!important}

/* ---------- Buttons ---------- */
button{background:var(--aqua)!important;color:var(--aqua-ink)!important;border:0!important;box-shadow:none!important;border-radius:var(--radius-sm)!important;
  font-family:var(--font)!important;font-weight:700!important;letter-spacing:.1px;filter:none!important}
button:not(:disabled):hover{background:#5fe0e9!important}
button:disabled{background:var(--raised)!important;color:#6c7480!important;opacity:1!important}
button.secondary{background:var(--raised)!important;color:var(--text)!important;border:1px solid var(--line)!important}
button.secondary:not(:disabled):hover{background:var(--raised2)!important}
button.green{background:var(--win)!important;color:#05261a!important}
button.green:not(:disabled):hover{background:#5ddca4!important}
button.danger{background:transparent!important;color:var(--live)!important;border:1px solid rgba(255,84,104,.6)!important}
button.danger:not(:disabled):hover{background:rgba(255,84,104,.12)!important}
button.linkBtn{background:none!important;border:0!important;color:var(--aqua)!important;padding:2px 0!important;text-decoration:none!important}
button.linkBtn:hover{text-decoration:underline!important;background:none!important}
.installClose{background:transparent!important;color:var(--muted)!important;border:0!important}

/* ---------- Form fields ---------- */
input,select,textarea{background:var(--bg)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:var(--radius-sm)!important;box-shadow:none!important}
input::placeholder,textarea::placeholder{color:#6c7480!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--aqua)!important;box-shadow:0 0 0 3px rgba(47,211,223,.18)!important}
option{background:var(--panel);color:var(--text)}
.pillToggle{background:transparent!important;color:var(--text2)!important;border:0!important}
input[type=checkbox]{accent-color:var(--aqua)}
input[type=date]{color-scheme:dark}

/* ---------- Draft clock ---------- */
.clock{font-family:var(--font-cond)!important;font-weight:700!important;color:#fff!important;text-shadow:none!important;letter-spacing:.5px!important}
.clock.paused{color:var(--muted)!important}
#onClock{font-family:var(--font-cond);font-weight:700!important;font-size:22px!important}
#nextUp{color:var(--win)!important}

/* ---------- Lists ---------- */
.player,.adminRow{border-bottom:1px solid var(--line-soft)!important}
.player:hover{background:var(--raised)!important}
.avatar{font-family:var(--font-cond)!important;font-weight:700!important;box-shadow:none!important;letter-spacing:.3px}
.onlineDot{box-shadow:none!important}

/* ---------- Tables ---------- */
table{color:var(--text)!important;border-collapse:collapse}
th,td{border:0!important;border-bottom:1px solid var(--line-soft)!important}
th{background:var(--raised)!important;color:var(--muted)!important;font-family:var(--font-cond)!important;font-weight:600!important;
  font-size:13px!important;letter-spacing:.4px!important;padding:8px 7px!important}
td{padding:8px 7px!important;font-size:13px!important}
.card tr:nth-child(even) td{background:transparent}
.card tbody tr:hover td,.card table tr:hover td{background:rgba(255,255,255,.025)}
.board td.current,.current{background:var(--aqua-tint)!important;outline:2px solid var(--aqua)!important;outline-offset:-2px;box-shadow:none!important}
.board td.nextUp,.nextUp{background:var(--win-tint)!important;outline:1px dashed var(--win)!important;outline-offset:-1px}
.card tr[style*="#fff7d6"],tr[style*="#fff7d6"]{background:rgba(230,183,74,.10)!important}
td.keeperUsed{opacity:.7}

/* ---------- Upcoming picks strip ---------- */
.upcomingStop{background:var(--raised)!important;border:1px solid var(--line)!important;border-radius:var(--radius-sm)!important;color:var(--text)!important;box-shadow:none!important}
.upcomingStop.current{background:var(--aqua-tint)!important;border-color:var(--aqua)!important;outline:none!important}

/* ---------- Scores + matchups: the scoreboard type is the signature ---------- */
.scoreRow{background:var(--raised)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:none!important;padding:12px 14px!important}
.scoreRow.live{border-color:rgba(255,84,104,.55)!important;box-shadow:inset 3px 0 0 var(--live)!important}
.scoreTeam span{font-weight:600!important;color:var(--text)!important}
.scoreTeam b{font-family:var(--font-cond)!important;font-weight:700!important;font-size:24px!important;line-height:1.1;color:var(--text)!important}
.scoreTeam .avatar{flex:none!important}
.scoreTeam.leading b{color:var(--aqua)!important}
.boxToggle{color:var(--aqua)!important}
#scoresList{display:grid;grid-template-columns:1fr;gap:10px}
#scoresList .scoreRow{margin:0!important}
@media(min-width:900px){#scoresList{grid-template-columns:1fr 1fr;align-items:start}#scoresList .scoreRow:has(.boxScore:not(.hidden)){grid-column:1/-1}}

/* Matchup breakdown */
.posBattle{border-top:1px solid var(--line)!important}
.posBattleHead{color:var(--muted)!important;text-transform:none!important;font-family:var(--font-cond);font-size:13px!important;letter-spacing:.2px!important}
.posBattleRow{border-top:1px solid var(--line-soft)!important}
.posBattleLabel{color:var(--muted)!important;font-weight:600!important;font-size:12px}
.posBattleSide{background:transparent!important;border-radius:6px;padding:2px 6px!important}
.posBattleSide span{color:var(--text2)!important}
.posBattleSide b{font-family:var(--font-cond)!important;color:var(--text)!important;font-size:14px}
.posBattleSide.posWin{background:var(--aqua-tint)!important;box-shadow:none!important}
.posBattleSide.posWin span{color:var(--text)!important}
.posBattleSide.posWin b{color:var(--aqua)!important}
.avatar[style*="background:#8c3a3a"]{background:var(--aqua)!important;color:var(--aqua-ink)!important}
.avatar[style*="background:#33587a"]{background:#4a5568!important}

/* Box scores */
.boxWrap{border:1px solid var(--line);border-radius:var(--radius-sm)}
.boxTable th{background:var(--bg)!important}
.boxTable th.bxName{background:var(--bg)!important;color:var(--text)!important;font-size:14px!important}
.boxTable td.bxName{background:var(--raised)!important;color:var(--text)!important}
.boxTable td{color:var(--text2)!important}
.boxTable td b{color:#fff!important}
.boxTable tr.owned td{background:var(--aqua-tint)!important}
.boxTable tr.owned td.bxName{background:#253b44!important}
.boxTable .bxFp{color:var(--aqua)!important}
.boxTable tr.bxDivider td{background:var(--panel)!important;color:var(--muted)!important;font-family:var(--font-cond);text-transform:none!important;letter-spacing:.3px!important;font-size:12px!important}
.ownTag{background:var(--aqua)!important;color:var(--aqua-ink)!important;font-family:var(--font-cond);font-size:10px!important}

/* Scoring rules */
details.scoringRules{padding:12px 16px!important;margin-top:14px}
.scoringRules summary{color:var(--aqua)!important;text-transform:none!important;letter-spacing:.2px!important;font-family:var(--font-cond);font-size:15px!important}
.scoringRules td{color:var(--text2)!important;border:0!important}

/* ---------- Colours the app sets inline ---------- */
[style*="color:#177245"]{color:var(--win)!important}
[style*="color:#8b95a3"],[style*="color:#9db3d6"]{color:var(--muted)!important}
[style*="color:#e0263d"]{color:var(--live)!important}

/* ---------- Install banner ---------- */
.installBar{background:var(--raised)!important;border:1px solid var(--line)!important;box-shadow:0 10px 30px rgba(0,0,0,.5)!important;backdrop-filter:none!important}
.installText>span{color:var(--muted)!important}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#3a404b;border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Phones ---------- */
@media(max-width:640px){
  .wrap{padding:10px 10px 90px!important}
  .card{padding:14px!important;border-radius:10px!important}
  h2{font-size:21px}
  header h1{font-size:18px!important}
  .tabs button{padding:8px 12px!important;font-size:13.5px!important}
  .scoreTeam b{font-size:21px!important}
}
@media(prefers-reduced-motion:reduce){.scoreTickerTrack{animation:none!important}}

/* Roster: empty starting spots stand out; inline scoreboard numbers use the condensed face */
.player.emptySlot select{border-style:dashed!important;color:var(--muted)!important}
[style*="Oswald"]{font-family:var(--font-cond)!important}

/* ---------- Pink accents (28 Oct): panel edges, headings, and "you" ---------- */
:root{--pink:#ff4d8d;--pink-tint:rgba(255,77,141,.10)}
.card:not(.tabs){border-top:2px solid var(--pink)!important}
.sectionHead{border-left-color:var(--pink)!important}
.scoreRow.mine{border-color:var(--pink)!important;box-shadow:inset 3px 0 0 var(--pink)!important;background:linear-gradient(90deg,var(--pink-tint),transparent 60%),var(--raised)!important}
.scoreRow.mine.live{box-shadow:inset 3px 0 0 var(--pink)!important}
#standingsTable tr.mine td{background:var(--pink-tint)!important}
#standingsTable tr.mine td:first-child{box-shadow:inset 3px 0 0 var(--pink)}
.tabs button.adminTabBtn.active{background:var(--pink)!important;color:#2a0614!important}

/* Activity: team badge + short code, full name on hover/press */
.actTeam{max-width:none!important;gap:7px!important}
.actCode{font-family:var(--font-cond);font-weight:700;font-size:15px;letter-spacing:.6px;color:var(--text2);min-width:42px;text-align:left}

/* Draft complete confirmation */
#draftDoneBanner{border-top-color:var(--win)!important;background:linear-gradient(90deg,var(--win-tint),transparent 70%),var(--panel)!important}
.doneRow{display:flex;gap:14px;align-items:flex-start}
.doneTick{flex:none;width:40px;height:40px;border-radius:50%;background:var(--win);color:#05261a;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px}
.doneText h2{margin:2px 0 4px!important}
.doneText p{margin:0;font-size:14px!important;color:var(--text2)!important}
#draftDoneBanner .row button{width:auto}

/* =====================================================================
   MATCHUP SCREEN
   ===================================================================== */
.mxTop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.mxTop h2{margin:0!important;font-size:34px!important;letter-spacing:.5px!important;text-transform:uppercase}
.mxWeekNav{display:flex;align-items:center;gap:6px;color:var(--text2);font-size:15px}
.mxWeekNav button{width:auto!important;padding:4px 10px!important;font-size:16px!important;line-height:1}
.mxPicker{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:16px;padding-bottom:0}
.mxPicker::-webkit-scrollbar{display:none}
.mxPick{flex:none;background:transparent!important;color:var(--muted)!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;
  padding:8px 10px!important;font-family:var(--font-cond)!important;font-size:14px!important;letter-spacing:.4px}
.mxPick:hover{color:var(--text)!important;background:transparent!important}
.mxPick.on{color:var(--text)!important;border-bottom-color:var(--pink)!important}
.mxPick.mine{color:var(--text2)!important}
.mxPick.all{margin-left:auto;color:var(--aqua)!important}

.mxBoard{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:end;padding:6px 0 14px}
.mxTeam.r{text-align:right}
.mxName{display:flex;align-items:center;gap:10px;font-family:var(--font-cond);font-size:26px;font-weight:700;color:#fff}
.mxTeam.r .mxName{flex-direction:row-reverse}
.mxName span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxYou{font-style:normal;font-size:12px;color:var(--pink);border:1px solid var(--pink);border-radius:5px;padding:1px 6px;letter-spacing:.6px}
.mxMeta{color:var(--muted);font-size:14px;margin:2px 0 6px}
.mxDigits{display:inline-flex;align-items:flex-end;gap:2px;font-family:var(--font-cond);line-height:.95}
.mxDigits b{font-size:92px;font-weight:700;color:#fff;letter-spacing:1px;min-width:.52em;text-align:center;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(21,23,28,.55) 3px 4px);-webkit-background-clip:text;background-clip:text}
.mxDigits .mxDot{font-style:normal;font-size:60px;color:var(--muted);margin:0 2px}
.mxTeam.r .mxDigits{justify-content:flex-end}
.mxSub{color:var(--muted);font-size:14px}.mxSub b{color:var(--text)}
.mxMid{text-align:center;padding-bottom:26px;min-width:150px}
.mxState{font-family:var(--font-cond);font-weight:700;font-size:14px;letter-spacing:1px;color:var(--muted)}
.mxState.live{color:var(--live)}
.mxState.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);margin-right:6px;vertical-align:1px}
.mxDiff{font-family:var(--font-cond);font-size:40px;font-weight:700;color:var(--text);margin:2px 0 8px}
.mxDiff.up{color:var(--aqua)}.mxDiff.down{color:var(--pink)}
.mxBar{height:4px;background:var(--raised2);border-radius:2px;overflow:hidden}
.mxBar span{display:block;height:100%;background:var(--aqua)}

.mxLeadWrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin:4px 0 12px}
.mxLeadHead{display:flex;justify-content:space-between;font-family:var(--font-cond);font-size:13px;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--line)}
.mxLeaders.r .mxLeadHead{flex-direction:row-reverse}
.mxLead{display:grid;grid-template-columns:1fr auto 52px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:15px}
.mxLeaders.r .mxLead{grid-template-columns:52px auto 1fr}
.mxLeaders.r .mxLead .df{order:1}.mxLeaders.r .mxLead b{order:2}.mxLeaders.r .mxLead .nm{order:3;text-align:right}
.mxLead .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.mxLead b{font-family:var(--font-cond);font-size:17px;color:var(--aqua)}
.mxLead .df{font-family:var(--font-cond);font-size:14px;text-align:right}
.mxLeaders.r .mxLead .df{text-align:left}
.df.up{color:var(--win)}.df.down{color:var(--pink)}

.mxRecap{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 0;margin:6px 0 0;overflow:hidden}
.mxRecapTag{flex:none;font-family:var(--font-cond);font-weight:700;font-size:13px;letter-spacing:.6px;color:var(--text2);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.mxRecapTag.live{color:#fff;background:var(--pink);border-color:var(--pink)}
.mxRecapTrack{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;flex:1}
.mxRecapTrack::-webkit-scrollbar{display:none}
.mxEv{font-size:14px;color:var(--text2)}
.mxEv em{font-style:normal;font-family:var(--font-cond);font-size:13px;letter-spacing:.3px;color:var(--muted);margin-right:4px}
.mxEv b{font-family:var(--font-cond);font-size:15px;margin:0 4px}
.mxEv b.up{color:var(--win)}.mxEv b.down{color:var(--pink)}
.mxEv small{color:var(--muted)}

.mxDays{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.mxDay{background:transparent!important;border:0!important;border-right:1px solid var(--line-soft)!important;border-radius:0!important;text-align:left;padding:10px 12px!important;color:var(--text2)!important;display:flex;flex-direction:column;gap:4px}
.mxDay:last-child{border-right:0!important}
.mxDay .dn{font-family:var(--font-cond);font-size:13px;color:var(--muted);letter-spacing:.4px}
.mxDay .dn em{font-style:normal;color:var(--live);margin-left:6px}
.mxDay .dv{font-family:var(--font-cond);font-size:18px;color:var(--text)}
.mxDay:hover{background:var(--raised)!important}
.mxDay.sel{background:var(--raised)!important;box-shadow:inset 0 -2px 0 var(--pink)}
.mxDay.today .dn{color:var(--text)}
.mxDayTitle{font-family:var(--font-cond);font-size:16px;color:var(--muted);margin:14px 0 6px;font-weight:600}

.mxLineup{border-top:1px solid var(--line)}
.mxLHead{display:grid;grid-template-columns:1fr 64px 1fr;font-family:var(--font-cond);font-size:13px;color:var(--muted);padding:8px 0;border-bottom:1px solid var(--line)}
.mxLHead span:nth-child(2){text-align:center}.mxLHead span:nth-child(3){text-align:right}
.mxRow{display:grid;grid-template-columns:1fr 64px 1fr;border-bottom:1px solid var(--line-soft);min-height:64px}
.mxSlot{display:flex;align-items:center;justify-content:center;font-family:var(--font-cond);font-weight:700;color:var(--muted);border-left:1px solid var(--line);border-right:1px solid var(--line);font-size:14px}
.mxP{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1fr) 64px;align-items:center;gap:10px;padding:8px 10px}
.mxP.r{direction:rtl}
.mxP.r>*{direction:ltr}
.mxP.r .who{flex-direction:row-reverse;text-align:right}
.mxP.empty{display:flex;align-items:center}
.mxP.r.empty{justify-content:flex-end}
.mxP.isLive{background:linear-gradient(90deg,rgba(255,84,104,.07),transparent)}
.mxP.r.isLive{background:linear-gradient(270deg,rgba(255,84,104,.07),transparent)}
.mxP .who{display:flex;align-items:center;gap:10px;min-width:0}
.mxP .who>div{min-width:0}
.mxP .nm{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.mxP .tm{color:var(--muted);font-size:13px}
.mxP .gm{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--text2)}
.mxP.r .gm{align-items:flex-end}
.mxBadge{display:inline-block;align-self:flex-start;font-family:var(--font-cond);font-size:12px;letter-spacing:.3px;padding:1px 6px;border-radius:5px;background:var(--raised2);color:var(--text2)}
.mxP.r .mxBadge{align-self:flex-end}
.mxBadge.live{background:var(--live);color:#fff}
.mxBadge.pre{background:transparent;border:1px solid var(--line);color:var(--muted)}
.mxP .ln{font-family:var(--font-cond);font-size:14px;color:var(--text2);white-space:nowrap}
.mxP.r .ln{text-align:right}
.mxPts{font-family:var(--font-cond);font-size:22px;color:#fff;text-align:right}
.mxP.r .mxPts{text-align:left}
.mxPts.none{color:var(--muted)}
.mxAvg{font-family:var(--font-cond);font-size:17px;color:var(--muted);text-align:right}
.mxAvg small{display:block;font-size:11px;letter-spacing:.4px}
.mxP.r .mxAvg{text-align:left}

/* Matchup on phones: stack the scoreboard, compact lineup */
@media(max-width:760px){
  .mxTop h2{font-size:26px!important}
  .mxBoard{grid-template-columns:1fr 1fr;gap:10px}
  .mxMid{grid-column:1/-1;order:3;padding:0}
  .mxName{font-size:18px}.mxName .avatar{display:none}
  .mxDigits b{font-size:48px}.mxDigits .mxDot{font-size:32px}
  .mxMeta{font-size:12px}
  .mxDiff{font-size:28px;margin:0 0 6px}
  .mxLeadWrap{grid-template-columns:1fr;gap:14px}
  .mxLeaders.r .mxLead{grid-template-columns:1fr auto 52px}
  .mxLeaders.r .mxLead .df{order:3}.mxLeaders.r .mxLead b{order:2}.mxLeaders.r .mxLead .nm{order:1;text-align:left}
  .mxLeaders.r .mxLeadHead{flex-direction:row}
  .mxLeaders.r .mxLead .df{text-align:right}
  .mxDays{display:flex;overflow-x:auto;scrollbar-width:none}
  .mxDay{flex:0 0 88px}
  .mxRow,.mxLHead{grid-template-columns:1fr 40px 1fr}
  .mxP,.mxP.r{grid-template-columns:minmax(0,1fr) 46px;gap:6px;padding:7px 6px}
  .mxP .gm,.mxP .ln{display:none}
  .mxP .who .avatar{display:none}
  .mxP .nm{font-size:14px}
  .mxPts{font-size:18px}
}

/* =====================================================================
   DESKTOP SIDEBAR (wide screens only)
   ===================================================================== */
.navGroup,.navLeague,.navMe,.navAlt{display:none}
.navIco{display:none}
@media(min-width:1100px){
  :root{--side:252px}
  header{position:fixed!important;top:0;left:0;width:var(--side);height:auto;z-index:20;border-bottom:0!important;border-right:1px solid var(--line)!important;padding:18px 18px 10px!important;background:var(--panel)!important}
  .headerRow{max-width:none!important}
  #switchLoginBtn{position:fixed;left:18px;bottom:18px;width:calc(var(--side) - 36px)!important;z-index:22}
  .scoreTickerBar{position:fixed;top:0;left:var(--side);right:0;z-index:15;border-top:0!important;border-bottom:1px solid var(--line)!important}
  .wrap{max-width:1320px!important;margin-right:auto!important;margin-left:max(var(--side),calc(var(--side) + (100vw - var(--side) - 1320px)/2))!important;padding:52px 32px 60px!important}
  header h1{font-size:19px!important}
  header .badge{display:none!important}
  .headerText{min-width:0}
  #tabRow,.tabs.card{position:fixed!important;top:76px;left:0;bottom:120px;width:var(--side);margin:0!important;border:0!important;border-right:1px solid var(--line)!important;border-radius:0!important;
    background:var(--panel)!important;flex-direction:column!important;flex-wrap:nowrap!important;overflow-y:auto!important;padding:4px 12px 12px!important;gap:2px!important;z-index:19}
  #tabRow.card{border-top:0!important}
  .tabs button{display:flex!important;align-items:center;gap:12px;width:100%!important;text-align:left;border-radius:9px!important;padding:10px 12px!important;font-size:15px!important;color:var(--text2)!important}
  .tabs button.hidden{display:none!important}
  .tabs button.active{background:var(--raised)!important;color:#fff!important;box-shadow:inset 3px 0 0 var(--pink)!important}
  .tabs button.adminTabBtn.active{background:var(--raised)!important;color:#fff!important}
  .navIco{display:block;width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
  .tabs button.active .navIco{color:var(--aqua);opacity:1}
  .navAlt{display:inline;color:var(--muted);font-size:13px}
  .navGroup{display:block;font-family:var(--font-cond);font-size:13px;letter-spacing:.8px;color:var(--muted);padding:16px 12px 6px}
  .navLeague{display:block;margin:6px 0 4px;padding:12px 14px;background:var(--raised);border:1px solid var(--line);border-top:2px solid var(--pink);border-radius:10px}
  .nlName{font-family:var(--font-cond);font-weight:700;font-size:17px;color:#fff;letter-spacing:.3px}
  .nlTags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
  .nlTags span{font-family:var(--font-cond);font-size:11px;letter-spacing:.5px;color:var(--text2);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
  .navMe{display:flex;align-items:center;gap:10px;position:fixed;left:0;bottom:68px;width:var(--side);padding:12px 18px;border-top:1px solid var(--line);background:var(--panel);z-index:21}
  .navMe .nmWrap{min-width:0}.navMe .nm{font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navMe .rc{color:var(--muted);font-size:13px}
  .navMe:empty{display:none}
  .installBar{left:calc(var(--side) + 20px)}
  #draftDoneBanner,#draftStatusCard{margin-top:6px}
}

/* =====================================================================
   SEGMENTED BUTTONS, PLAYOFFS, STATS
   ===================================================================== */
.segBtns{display:inline-flex;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px;flex-wrap:wrap}
.seg{background:transparent!important;color:var(--text2)!important;border:0!important;border-radius:999px!important;padding:6px 14px!important;font-size:14px!important;width:auto!important}
.seg:hover{color:#fff!important;background:var(--raised)!important}
.seg.on{background:var(--raised2)!important;color:#fff!important;box-shadow:inset 0 -2px 0 var(--pink)}

.bracket{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:14px 0 18px;align-items:center}
.brCol{display:flex;flex-direction:column;gap:14px;justify-content:center}
.brHead{font-family:var(--font-cond);font-weight:700;font-size:17px;color:#fff;border-bottom:2px solid var(--pink);padding-bottom:6px;margin-bottom:4px}
.brHead small{display:block;font-family:var(--font);font-weight:500;font-size:12px;color:var(--muted)}
.brGame,.brBye{background:var(--raised);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.brGame.final{border-color:var(--aqua)}
.brBye{display:flex;align-items:center;justify-content:space-between}
.brBye em{font-style:normal;font-family:var(--font-cond);font-size:12px;color:var(--muted);padding-right:12px;letter-spacing:.4px}
.brTeam{display:flex;align-items:center;gap:9px;padding:9px 12px;min-width:0}
.brGame .brTeam+.brTeam{border-top:1px solid var(--line-soft)}
.brTeam .sd{font-family:var(--font-cond);font-weight:700;color:var(--aqua);width:16px;text-align:center;flex:none}
.brTeam .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.brTeam .ex{font-family:var(--font-cond);color:var(--muted);font-size:14px;flex:none}
.brTeam.tbd .nm{color:var(--muted);font-weight:500;font-style:italic}
.brTeam.mine{background:var(--pink-tint);box-shadow:inset 3px 0 0 var(--pink)}
.brTrophy{text-align:center;font-family:var(--font-cond);font-size:16px;color:var(--gold)}
.poBubble{color:var(--text2);font-size:14px;border-top:1px solid var(--line);padding-top:10px}
.poTable{width:100%;margin-top:6px}
.poTable th,.poTable td{text-align:center}
.poTable .l{text-align:left}
.poTable td.l{display:flex;align-items:center;gap:8px}
.poTable tr.cut td{border-bottom:2px dashed var(--pink)!important}
.poTable tr.mine td{background:var(--pink-tint)!important}
.poBar{display:inline-block;width:70px;height:5px;background:var(--raised2);border-radius:3px;margin-right:8px;vertical-align:middle;overflow:hidden}
.poBar i{display:block;height:100%;background:var(--aqua)}

.stTitle{font-family:var(--font-cond);font-size:18px;color:var(--muted);margin:4px 0 10px;font-weight:600}
.stTable{width:100%}
.stTable th,.stTable td{text-align:center}
.stTable .l{text-align:left}
.stTable td.rk{font-family:var(--font-cond);font-size:18px;color:var(--aqua);width:34px}
.stTable td.fp{font-family:var(--font-cond);font-size:20px;color:#fff}
.stTable tr.mine td{background:var(--pink-tint)!important}
.stWho{display:flex;align-items:center;gap:10px}
.stWho .nm{font-weight:600}.stWho .tm{color:var(--muted);font-size:12px}
.faTag{display:inline-block;font-family:var(--font-cond);font-size:11px;letter-spacing:.4px;color:var(--win);border:1px solid rgba(60,207,142,.5);border-radius:6px;padding:1px 6px}

@media(max-width:760px){
  .bracket{grid-template-columns:1fr;gap:16px}
  .poTable th:nth-child(4),.poTable td:nth-child(4){display:none}
  .stTable th:nth-child(5),.stTable td:nth-child(5),.stTable th:nth-child(6),.stTable td:nth-child(6),.stTable th:nth-child(7),.stTable td:nth-child(7),
  .stTable th:nth-child(8),.stTable td:nth-child(8),.stTable th:nth-child(9),.stTable td:nth-child(9),.stTable th:nth-child(10),.stTable td:nth-child(10){display:none}
  .stWho .avatar{display:none}
  .segBtns{border-radius:12px}
}

/* =====================================================================
   HOME + NEWS
   ===================================================================== */
.homeCard{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}
.homeCard.card:not(.tabs){border-top:0!important}
.hmHero{display:grid;grid-template-columns:1fr minmax(280px,420px);gap:20px;align-items:center;background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--pink);border-radius:var(--radius);padding:20px 22px;margin-bottom:14px}
.hmYou{display:flex;align-items:center;gap:16px}
.hmYou h2{margin:0!important;font-size:30px!important}
.hmRec{color:var(--muted);font-size:15px;margin-top:2px}
.hmMatch{background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer}
.hmMatch:hover{border-color:var(--aqua)}
.hmMLabel{font-family:var(--font-cond);font-size:13px;color:var(--muted);letter-spacing:.3px;margin-bottom:6px}
.hmMRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 0}
.hmT{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.hmMRow b{font-family:var(--font-cond);font-size:30px;color:#fff;line-height:1}
.hmMRow b.lead{color:var(--aqua)}
.hmMFoot{font-size:13px;color:var(--text2);margin-top:6px}
.hmGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.hmCard{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--pink);border-radius:var(--radius);padding:16px 18px;min-width:0}
.hmCard h3{font-family:var(--font-cond);font-size:18px;margin:0 0 10px;color:#fff}
.hmCard h3 small{font-family:var(--font);font-size:12px;color:var(--muted);font-weight:500;margin-left:6px}
.hmRow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.hmRow>span:first-child,.hmRow>span:nth-child(2):not(.muted):not(.ownTag):not(.faTag){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmRow .rk{flex:none!important;width:18px;font-family:var(--font-cond);color:var(--aqua)}
.hmRow b{font-family:var(--font-cond);font-size:17px;color:#fff;min-width:42px;text-align:right}
.hmRow.mine{background:var(--pink-tint);box-shadow:inset 3px 0 0 var(--pink);padding-left:8px}
.hmLive{font-style:normal;font-family:var(--font-cond);font-size:12px;background:var(--live);color:#fff;border-radius:5px;padding:1px 6px}
.hmInj{font-style:normal;font-family:var(--font-cond);font-size:12px;color:var(--live);border:1px solid rgba(255,84,104,.55);border-radius:5px;padding:1px 6px}
.hmWarn{font-size:13px;color:var(--gold);margin:10px 0 0}
.hmMore{display:inline-block;margin-top:10px;margin-right:12px;font-size:14px;font-weight:600}
.hmTrade{padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14px;line-height:1.5}

.nwItem{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.nwItem.compact{padding:9px 0}
.nwItem h4{margin:4px 0 6px;font-size:17px;line-height:1.3;font-weight:600}
.nwItem.compact h4{font-size:14.5px;margin:2px 0 4px}
.nwItem h4 a{color:var(--text)!important;text-decoration:none}
.nwItem h4 a:hover{color:var(--aqua)!important}
.nwItem p{margin:0 0 8px;color:var(--text2);font-size:14px;line-height:1.5;max-width:75ch}
.nwMeta{display:flex;gap:8px;align-items:center;font-size:12px}
.nwYour{font-style:normal;font-family:var(--font-cond);font-size:12px;letter-spacing:.3px;background:var(--pink);color:#fff;border-radius:5px;padding:1px 7px}
.nwItem.yours{box-shadow:inset 3px 0 0 var(--pink);padding-left:12px}
.nwTags{display:flex;gap:6px;flex-wrap:wrap}
.nwTag{font-size:12px;color:var(--text2);border:1px solid var(--line);border-radius:6px;padding:1px 7px}
.nwTag.yours{border-color:var(--pink);color:#fff}
#newsBody{max-width:860px}

@media(max-width:760px){
  .hmHero{grid-template-columns:1fr;padding:16px}
  .hmYou h2{font-size:24px!important}
  .hmGrid{grid-template-columns:1fr}
}

/* ---------- Home v2 (reference layout) ---------- */
.homeCard{background:var(--panel)!important;border:1px solid var(--line)!important;border-top:2px solid var(--pink)!important;border-radius:var(--radius)!important;padding:26px 30px!important}
.hmTop{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--text);padding-bottom:12px;margin-bottom:20px}
.hmTop h2{margin:0!important;font-size:38px!important;text-transform:uppercase;letter-spacing:.5px}
.hmHero2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);gap:34px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.hmEyebrow{font-family:var(--font-cond);font-size:14px;letter-spacing:.5px;color:var(--text2);display:flex;align-items:center;gap:8px}
.hmEyebrow::before{content:"";width:22px;height:2px;background:var(--pink)}
.hmEyebrow .live{color:var(--live)}
.hmHeadline{font-size:clamp(24px,2.6vw,36px);line-height:1.22;font-weight:700;color:#fff;margin:12px 0 20px;max-width:24ch}
.hmStory .row button{width:auto!important;padding:11px 18px!important;font-family:var(--font-cond)!important;font-size:15px!important;letter-spacing:.4px}
.hmBoard{border-left:1px solid var(--line);padding-left:28px}
.hmBTeam{display:flex;align-items:center;gap:12px}
.hmBTeam b{display:block;font-size:20px;color:#fff;font-family:var(--font-cond)}
.hmBTeam span{color:var(--muted);font-size:14px}
.hmDigits{display:flex!important;justify-content:flex-end;margin:4px 0 8px}
.hmDigits b{font-size:72px!important}
.hmBar{height:4px;background:var(--raised2);border-radius:2px;margin:6px 0 14px;overflow:hidden}
.hmBar span{display:block;height:100%;background:var(--aqua)}
.hmLeft{display:flex;justify-content:space-between;font-family:var(--font-cond);font-size:13px;color:var(--muted);letter-spacing:.4px;margin-top:4px}
.hmCols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:22px}
.hmCols.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.hmCol{padding:0 24px;border-left:1px solid var(--line);min-width:0}
.hmCol:first-child{padding-left:0;border-left:0}
.hmCol:last-child{padding-right:0}
.hmColHead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--text2);padding-bottom:8px;margin-bottom:6px}
.hmColHead h3{margin:0;font-family:var(--font-cond);font-size:17px;color:#fff;display:flex;align-items:center;gap:8px}
.hmColHead h3::before{content:"";width:18px;height:2px;background:var(--pink)}
.hmColHead h3 small{font-family:var(--font);font-size:12px;color:var(--muted);font-weight:500}
.hmColHead a{font-family:var(--font-cond);font-size:13px;letter-spacing:.3px}
.hmStHead,.hmSt{display:grid;grid-template-columns:24px minmax(0,1fr) 50px 70px;gap:8px;align-items:center}
.hmStHead{font-family:var(--font-cond);font-size:12px;color:var(--muted);padding:6px 0}
.hmStHead span:nth-child(3),.hmStHead span:nth-child(4){text-align:right}
.hmSt{padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:15px}
.hmSt .rk{color:var(--muted);font-family:var(--font-cond)}
.hmSt .nm{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmSt b{font-family:var(--font-cond);text-align:right;color:#fff}
.hmSt .pf{font-family:var(--font-cond);text-align:right;color:var(--aqua)}
.hmSt.mine{background:var(--pink-tint);box-shadow:inset 3px 0 0 var(--pink)}
.hmTask{padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;color:var(--text)}
.hmTask::before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--gold);color:#1b1400;font-weight:800;font-size:12px;margin-right:8px}
.hmCalm{color:var(--text2);font-size:15px;margin:10px 0}
.hmTonight{display:grid;grid-template-columns:34px minmax(0,1fr) auto 50px;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.hmTonight .sl{font-family:var(--font-cond);color:var(--muted);font-size:13px}
.hmTonight .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmTonight .stt{font-family:var(--font-cond);font-size:12px;color:var(--muted)}
.hmTonight .stt.live{color:#fff;background:var(--live);border-radius:5px;padding:1px 6px}
.hmTonight b{font-family:var(--font-cond);font-size:18px;text-align:right;color:var(--aqua)}
.hmWire{padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px}
.hmWire .wk{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.hmWire .wk .muted{margin-left:auto;font-size:12px}
.hmWire .kind{font-family:var(--font-cond);font-size:12px;letter-spacing:.4px;color:var(--text2)}
.hmWire .kind.add{color:var(--win)}.hmWire .kind.drop{color:var(--pink)}.hmWire .kind.trade{color:var(--aqua)}
@media(max-width:900px){
  .homeCard{padding:16px!important}
  .hmTop h2{font-size:26px!important}
  .hmHero2{grid-template-columns:1fr;gap:18px}
  .hmBoard{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:16px}
  .hmDigits b{font-size:52px!important}
  .hmCols,.hmCols.two{grid-template-columns:1fr;gap:22px}
  .hmCol{padding:0;border-left:0}
}