:root { --bg:#07090d; --card:#121721; --card2:#1a2130; --line:#252e3f; --tx:#f4f6fa; --mut:#8b95a7; --ac:#ff2d3d; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--tx); font:15px/1.45 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
header { display:flex; align-items:center; gap:12px; padding:16px 24px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
header img { width:36px; } header h1 { margin:0; font-size:22px; } header span { color:var(--mut); flex:1; }
header a, a { color:#93c5fd; text-decoration:none; }
main { max-width:1100px; margin:0 auto; padding:20px; display:grid; gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
h2 { margin:0 0 12px; font-size:16px; letter-spacing:.04em; } h2 span { color:var(--mut); font-weight:400; margin-left:8px; }
button, .btn, select, input { font:inherit; color:var(--tx); background:var(--card2); border:1px solid var(--line); border-radius:9px; padding:8px 12px; }
button, .btn { cursor:pointer; } button:hover, .btn:hover { border-color:#3b4a63; }
.seg { display:flex; gap:10px; flex-wrap:wrap; } .seg button { text-align:left; min-width:220px; }
.seg small { display:block; color:var(--mut); font-size:12px; }
.sel { border-color:var(--ac) !important; box-shadow:0 0 0 1px var(--ac) inset; }
.leagues { display:flex; gap:8px; margin-bottom:12px; } .leagues button { min-width:72px; font-weight:700; }
.teams { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.teams button { display:flex; align-items:center; gap:8px; text-align:left; padding:6px 8px; border-left:4px solid var(--c, #444); }
.teams img { width:30px; height:30px; object-fit:contain; } .teams b { display:block; font-size:13px; } .teams small { display:block; color:var(--mut); font-size:11px; }
.picked { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; min-height:10px; }
.picked span { display:flex; align-items:center; gap:6px; background:var(--card2); border:1px solid var(--line); border-radius:20px; padding:4px 6px 4px 8px; font-size:13px; }
.picked img { width:22px; height:22px; } .picked button { padding:0 7px; border-radius:50%; }
.opts { display:flex; gap:18px; flex-wrap:wrap; align-items:center; } .opts label { display:flex; gap:8px; align-items:center; color:var(--mut); }
.url { display:flex; gap:8px; } .url input { flex:1; min-width:0; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:14px; }
.tip { color:var(--mut); font-size:13px; }
.prev { aspect-ratio:16/9; border:1px solid var(--line); border-radius:10px; overflow:hidden; position:relative; }
.prev iframe { position:absolute; left:0; top:0; width:1600px; height:900px; border:0; transform-origin:0 0; }
header nav { display:flex; gap:16px; } header nav a { color:#93c5fd; }
.foot { text-align:center; color:var(--mut); font-size:13px; padding:18px 12px 28px; } .foot a { color:var(--mut); } .foot a:hover { color:var(--tx); }
.about { max-width:760px; }
.prose p { margin:0 0 12px; } .prose h2 { font-size:20px; } .mut { color:var(--mut); font-size:13px; }
.ticks { list-style:none; padding:0; margin:6px 0 16px; display:flex; flex-wrap:wrap; gap:8px 18px; } .ticks li { color:#86efac; font-weight:600; }
.support { width:100%; max-width:420px; justify-self:center; text-align:center; background:#0f1419; border:1.5px solid rgba(52,199,111,0.55);
  border-radius:16px; padding:22px 22px 18px; box-shadow:0 8px 28px rgba(0,0,0,.35), 0 0 24px rgba(52,199,111,.08); }
.support .heart { font-size:34px; line-height:1; margin-bottom:6px; } .support h2 { margin:0 0 8px; font-size:19px; }
.support p { color:#c8ced8; margin:0 0 16px; }
.support .venmo { display:block; width:100%; padding:12px 16px; border-radius:11px; background:#34c76f; color:#06210f; font-weight:800; font-size:16px; text-decoration:none; }
.support .venmo:hover { background:#3ed87b; }
.support small { display:block; margin-top:8px; color:var(--mut); }
.supportline { color:var(--mut); font-size:13px; text-align:center; margin:0; } .supportline a { color:#86efac; }
.foot .disc { margin-top:6px; font-size:11.5px; opacity:.75; }
.legal h2 { margin-top:22px; } .legal ul { margin:0 0 12px; padding-left:20px; } .legal li { margin-bottom:6px; }
.go { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.btn.primary { background:var(--ac); border-color:var(--ac); color:#fff; font-weight:800; font-size:17px; padding:11px 22px; }
.btn.primary:hover { background:#ff4553; border-color:#ff4553; }
.btn.dis { opacity:.45; pointer-events:none; }
.url input { color:var(--mut); }
/* live highlighting in the team picker */
.leagues button { position:relative; }
.lcount { position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--ac); color:#fff;
  font:800 11px/20px system-ui, sans-serif; font-style:normal; box-shadow:0 0 0 2px var(--card), 0 0 10px rgba(255,45,61,.6); animation:lpulse 1.6s ease-in-out infinite; }
.teams button span { min-width:0; }
.teams button.live { border-color:rgba(255,45,61,.75); box-shadow:0 0 0 1px rgba(255,45,61,.55) inset, 0 0 14px rgba(255,45,61,.35); background:#221419; }
.teams button.live.sel { box-shadow:0 0 0 1px var(--ac) inset, 0 0 18px rgba(255,45,61,.5); }
.teams button b .lbadge { margin-left:6px; vertical-align:1px; }
.lbadge { display:inline-flex; align-items:center; gap:4px; padding:1px 6px; border-radius:6px; background:var(--ac); color:#fff;
  font:800 10px/14px system-ui, sans-serif; font-style:normal; letter-spacing:.06em; }
.ldot { width:6px; height:6px; border-radius:50%; background:#fff; animation:lpulse 1.2s ease-in-out infinite; }
.lsb { display:block; font-style:normal; font-size:11px; color:#fca5a5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.teams button.today .lsb { color:#93c5fd; }
@keyframes lpulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .lcount, .ldot { animation:none; } }
.lsb.lper { color:#f8b4b4; opacity:.85; }
.teams button.live small, .teams button.today small { display:none; }
/* help page */
.help { max-width:1000px; }
.help .step h2 { display:flex; align-items:center; gap:12px; font-size:19px; letter-spacing:.01em; }
.help .num { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#fbbf24; color:#07090d; font-weight:900; font-size:17px; margin:0; flex:none; }
.help .prose ul, .help .prose ol { margin:0 0 12px; padding-left:22px; } .help .prose li { margin-bottom:6px; }
.help figure { margin:14px 0 4px; } .help figure + figure { margin-top:22px; }
.help figure img { display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line); background:#07090d; }
.help figcaption { color:var(--mut); font-size:13px; margin-top:6px; text-align:center; }
.help .toc { columns:2; column-gap:28px; } .help .toc li { break-inside:avoid; }
.help .intro .btn.primary { display:inline-block; text-decoration:none; }
@media (max-width:640px) { .help .toc { columns:1; } main { padding:12px; } .card { padding:14px; } }
.help figure img { margin:0 auto; }
/* schedule page */
.sched { max-width:860px; }
.shead { border-top:4px solid var(--c, var(--ac)); position:sticky; top:0; z-index:5; }
.shtop { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.slogo { width:56px; height:56px; object-fit:contain; } .stitle { flex:1; min-width:200px; } .stitle h2 { margin:0 0 2px; font-size:22px; }
.stitle span { color:var(--mut); font-size:13px; } .stitle b { color:var(--tx); }
.sbtns { display:flex; gap:8px; } .sbtns .btn { text-decoration:none; font-size:15px; padding:9px 14px; }
.schips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.schips a { display:flex; align-items:center; gap:6px; padding:4px 10px 4px 6px; border:1px solid var(--line); border-radius:16px; color:var(--tx); font-size:13px; background:var(--card2); }
.schips a img { width:20px; height:20px; object-fit:contain; } .schips a.sel { border-color:var(--ac); box-shadow:0 0 0 1px var(--ac) inset; }
.slist { display:flex; flex-direction:column; gap:6px; }
.smonth { margin:18px 4px 4px; font-size:14px; text-transform:uppercase; letter-spacing:.1em; color:var(--mut); }
.srow { display:grid; grid-template-columns:118px 1fr auto; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:8px 14px; }
.srow.done { opacity:.82; } .srow.istoday { border-color:#3b4a63; background:var(--card2); }
.srow.live { border-color:rgba(255,45,61,.8); background:#221419; box-shadow:0 0 0 1px rgba(255,45,61,.5) inset, 0 0 18px rgba(255,45,61,.35); opacity:1; }
.srow.post { border-left:4px solid #fbbf24; }
.sdate { color:var(--mut); font-size:14px; white-space:nowrap; }
.sopp { display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap; }
.sopp .va { color:var(--mut); font-size:13px; width:20px; text-align:center; } .sopp img { width:30px; height:30px; object-fit:contain; }
.sopp .on { font-weight:700; }
.tag { font-style:normal; font-size:11px; padding:1px 7px; border-radius:6px; border:1px solid var(--line); color:var(--mut); }
.tag.po { color:#fbbf24; border-color:rgba(251,191,36,.5); }
.sres { display:flex; align-items:center; gap:8px; justify-content:flex-end; white-space:nowrap; }
.sres small { color:var(--mut); font-size:12px; } .sres .ppd { color:#fbbf24; }
.res { width:24px; height:24px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
.res.rW { background:rgba(52,199,111,.18); color:#4ade80; } .res.rL { background:rgba(255,45,61,.15); color:#f87171; } .res.rT { background:#2b3446; color:var(--mut); }
.sscore { font-size:16px; } .stime { font-weight:700; }
.srow.live .sres small { color:#fca5a5; }
.stoday { display:flex; align-items:center; gap:10px; margin:10px 0 2px; color:#fbbf24; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.1em; }
.stoday::before, .stoday::after { content:""; flex:1; height:2px; background:rgba(251,191,36,.45); }
.sched .msg { color:var(--mut); text-align:center; padding:18px; }
@media (max-width:600px) {
  .srow { grid-template-columns:1fr auto; } .sdate { grid-column:1 / -1; font-size:12px; margin-bottom:-6px; }
  .sbtns { width:100%; } .sbtns .btn.primary { flex:1; text-align:center; } .shead { position:static; }
}
/* schedule link on team cards */
.schl { display:table; margin-top:1px; font-style:normal; font-size:11px; color:#93c5fd; padding:0 4px; margin-left:-4px; border-radius:5px; }
.schl:hover, .schl:focus { background:#0f141c; text-decoration:underline; outline:1px solid #3b4a63; }
/* favorites */
.teams button { position:relative; } .teams button > span { padding-right:18px; }
.fstar { position:absolute; top:3px; right:4px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-style:normal;
  font-size:17px; line-height:1; color:#6b7588; border-radius:6px; cursor:pointer; }
.fstar:hover, .fstar:focus { color:#fbbf24; background:#0f141c; outline:1px solid #3b4a63; } .fstar.on { color:#fbbf24; }
.favsec h2 span { font-size:12px; }
.favs { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px; }
.favempty { margin:0; color:var(--mut); font-size:14px; } .favempty b { color:#fbbf24; }
.fcard { display:grid; grid-template-columns:44px 1fr auto; grid-template-areas:"logo info move" "act act act"; gap:6px 10px; align-items:center;
  background:var(--card2); border:1px solid var(--line); border-left:4px solid var(--c, #444); border-radius:11px; padding:10px 10px 10px 12px; }
.fcard > img { grid-area:logo; width:44px; height:44px; object-fit:contain; } .finfo { grid-area:info; min-width:0; }
.finfo b { display:block; font-size:15px; } .finfo small { display:block; color:var(--mut); font-size:12px; } .finfo .lbadge { margin-left:6px; vertical-align:2px; }
.fcard.live { border-color:rgba(255,45,61,.75); border-left-color:var(--ac); box-shadow:0 0 0 1px rgba(255,45,61,.5) inset, 0 0 14px rgba(255,45,61,.3); background:#221419; }
.fcard.live small, .fcard.today small { display:none; }
.fmove { grid-area:move; display:flex; gap:4px; align-self:start; } .fmove button { padding:2px 8px; font-size:14px; line-height:1.4; }
.fmove button:disabled { opacity:.3; cursor:default; } .fmove .frm { color:#fbbf24; }
.fact { grid-area:act; display:flex; gap:6px; flex-wrap:wrap; }
.btn.sm, button.btn.sm { padding:5px 10px; font-size:13px; text-decoration:none; } .btn.sm.gofav { border-color:var(--ac); color:#fff; background:rgba(255,45,61,.18); }
.btn.sm:disabled { opacity:.5; cursor:default; }
.favbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px; } .favbar .btn { text-decoration:none; }
.favnote { margin:-4px 0 10px; color:#86efac; font-size:13px; }
#favbtn.on, .sbtns #favbtn.on { color:#fbbf24; }
.srow.focus { border-color:#fbbf24; box-shadow:0 0 0 1px #fbbf24 inset, 0 0 16px rgba(251,191,36,.3); }
/* team card actions: View (display) + Schedule */
.tact { display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; }
.tbtn { font-style:normal; font-size:12px; font-weight:700; padding:3px 8px; border-radius:7px; border:1px solid #3b4a63; background:#0f141c; color:#cfe0ff; line-height:1.3; }
.tbtn:hover, .tbtn:focus { border-color:#93c5fd; color:#fff; outline:none; }
.tbtn.tview { border-color:rgba(255,45,61,.7); background:rgba(255,45,61,.16); color:#fff; }
.tbtn.tview:hover, .tbtn.tview:focus { background:rgba(255,45,61,.32); }
.teams button { align-items:flex-start; } .teams button > img { margin-top:4px; }
.tact { align-items:flex-start; align-content:flex-start; row-gap:5px; } .tbtn { display:inline-block; }
/* next-game countdown (schedule page) */
.snext { display:grid; grid-template-columns:1fr auto; grid-template-areas:"label cd" "main cd"; gap:4px 18px; align-items:center;
  border-left:4px solid #fbbf24; background:linear-gradient(90deg, rgba(251,191,36,.08), transparent 60%), var(--card); }
.snext .nlabel { grid-area:label; color:#fbbf24; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.1em; display:flex; align-items:center; gap:8px; }
.snext .nmain { grid-area:main; display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; min-width:0; }
.snext .nopp { display:inline-flex; align-items:center; gap:7px; font-size:20px; font-weight:800; }
.snext .nopp img { width:30px; height:30px; object-fit:contain; }
.snext .nwhen { color:#d6dbe6; font-size:16px; font-weight:600; }
.snext .ncd { grid-area:cd; text-align:right; }
.snext .ncd small { display:block; color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.snext .ncd b { display:block; font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.01em; white-space:nowrap; color:#fff; }
.snext .btn { grid-area:cd; }
.snext.live { border-left-color:var(--ac); border-color:rgba(255,45,61,.7); background:linear-gradient(90deg, rgba(255,45,61,.12), transparent 60%), #1b1318; }
.snext.live .nlabel { color:#fca5a5; } .snext .nscore { font-size:26px; } .snext.live small { color:#fca5a5; font-size:13px; }
.snext.over { border-left-color:#3b4a63; background:var(--card); } .snext.over .nlabel { color:var(--mut); }
.sres .rcd { color:#fbbf24 !important; font-weight:700; font-variant-numeric:tabular-nums; }
.fcd { color:#fbbf24 !important; font-variant-numeric:tabular-nums; }
@media (max-width:600px) {
  .snext { grid-template-columns:1fr; grid-template-areas:"label" "main" "cd"; }
  .snext .ncd { text-align:left; } .snext .ncd b { font-size:30px; } .snext .nopp { font-size:18px; } .snext .nwhen { font-size:14px; }
  .snext .btn { text-align:center; }
}
.snext .nafter { grid-column:1 / -1; color:var(--mut); font-size:13px; }
/* keep the countdown in view: under the sticky header on desktop, sticky by itself on phones */
.snext { position:sticky; top:var(--sh, 0px); z-index:4; box-shadow:0 8px 18px rgba(0,0,0,.45); }
@media (max-width:600px) {
  .snext { top:0; padding:10px 12px; gap:4px; border-radius:12px; }
  .snext:not(.live) .nlabel { display:none; }
  .snext .ncd { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .snext .ncd b { font-size:26px; }
  .snext .nopp img { width:24px; height:24px; } .snext .nafter { display:none; }
  .snext.live { grid-template-columns:1fr auto; grid-template-areas:"label cd" "main main"; } .snext.live .btn { padding:7px 11px; font-size:13px; }
  .snext.live .nscore { font-size:22px; }
}