/* ==========================================================================
   Previously Sports — Hub Redesign v1 (James approved 2026-10-05)
   League-agnostic template. NFL is the template proof; the JS drives every
   module from live pipelines. Mobile-first (390px);12-col grid at 1024px+.
   ========================================================================== */
:root{
  --hub-bg:var(--desert-bg); --hub-card:var(--desert-card); --hub-ink:var(--desert-ink); --hub-ink2:var(--desert-ink-dim);
  --hub-ink3:var(--desert-ink-dim); --hub-red:var(--brand-red); --hub-red-dark:var(--desert-accent);
  --hub-line:var(--desert-pressed); --hub-r:18px;
  --hub-shadow:0 1px 2px rgba(var(--desert-ink-rgb), .05), 0 8px 24px -12px rgba(var(--desert-ink-rgb), .18);
  --hub-accent:var(--desert-accent);
}.hub-leagues{
  position:sticky; top:0; z-index:60; background:rgba(var(--desert-bg-rgb), .94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hub-line); padding:10px 0 10px 16px;
}.hub-leagues-row{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-right:16px; }.hub-leagues-row::-webkit-scrollbar{ display:none; }.lpill{
  flex:0 0 auto; font-size:12.5px; font-weight:700; letter-spacing:.04em;
  padding:8px 14px; border-radius:10px; background:var(--desert-card); color:var(--hub-ink2);
  border:1px solid var(--hub-line); cursor:pointer; text-decoration:none;
  font-family:inherit;
}.lpill.active{ background:var(--hub-ink); color:var(--desert-card); border-color:var(--hub-ink); }/* ---------- HERO ---------- */
.hub-hero{
  margin:12px 12px 0; border-radius:22px; overflow:hidden; position:relative;
  background:var(--desert-card) center/cover; color:var(--desert-card); box-shadow:var(--hub-shadow);
  min-height:340px; display:flex; flex-direction:column; justify-content:flex-end;
}.hub-hero::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--desert-card-rgb), .25) 0%, rgba(var(--desert-card-rgb), .55) 45%, rgba(var(--desert-card-rgb), .92) 100%); }.hub-hero-skel{ min-height:340px;
  background:linear-gradient(90deg,var(--desert-pressed),var(--desert-pressed),var(--desert-pressed)); background-size:200% 100%;
  animation:hubsh 1.4s infinite; }@keyframes hubsh{to{ background-position:-200% 0; } }.hero-in{ position:relative; z-index:2; padding:18px 18px 16px; width:100%; }.kicker{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800;
  letter-spacing:.14em; color:var(--desert-pressed); }.kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--hub-red);
  box-shadow:0 0 0 4px rgba(var(--brand-red-rgb), .25); flex:0 0 auto; }.kicker.live .dot{ animation:hubblink 1.2s infinite; }@keyframes hubblink{50%{ opacity:.3; } }.matchup{ display:flex; align-items:center; justify-content:center; gap:18px; margin:14px 0 6px; }.team{ display:flex; flex-direction:column; align-items:center; gap:6px; width:110px; }.team img{ width:76px; height:76px; object-fit:contain; background:rgba(var(--desert-card-rgb), .94);
  border-radius:20px; padding:8px; }.team b{ font-size:13px; font-weight:800; letter-spacing:.02em; }.team span{ font-size:11px; color:var(--desert-ink-dim); font-weight:600; }.vs{ font-size:12px; font-weight:800; color:var(--desert-card); background:rgba(var(--desert-card-rgb), .16);
  border:1px solid rgba(var(--desert-card-rgb), .25); width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); flex:0 0 auto; }.hero-in h1{ text-align:center; font-size:21px; font-weight:800; letter-spacing:-.01em; margin-top:8px; }.meta{ text-align:center; font-size:12.5px; color:var(--desert-ink-faint); font-weight:500; margin-top:6px; }.linebar{ display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap; }.linechip{ font-size:12px; font-weight:700; background:rgba(var(--desert-card-rgb), .12);
  border:1px solid rgba(var(--desert-card-rgb), .22); padding:7px 12px; border-radius:6px;
  backdrop-filter:blur(4px); }.linechip b{ color:var(--color-warn); }.hero-cta{ display:flex; gap:8px; margin-top:12px; }.btn{ flex:1; border:none; border-radius:14px; padding:13px; font-size:14px; font-weight:800;
  cursor:pointer; font-family:inherit; text-decoration:none; text-align:center; display:block; }.btn.red{ background:var(--hub-red); color:var(--desert-card); }.btn.ghost{ background:rgba(var(--desert-card-rgb), .14); color:var(--desert-card);
  border:1px solid rgba(var(--desert-card-rgb), .25); flex:0 0 52px; font-size:17px; }.hero-score{ text-align:center; font-size:15px; font-weight:800; margin-top:8px; letter-spacing:.02em; }.hero-score .q{ color:var(--color-warn); }.hero-side{ display:none; }/* desktop only — mobile keeps linebar + CTAs in .hero-in */

/* ---------- modules ---------- */
.hub-body{ padding-bottom:8px; }section.mod{ padding:20px 0 0; }.mod-head{ display:flex; align-items:baseline; justify-content:space-between; padding:0 16px 10px; }.mod-head h2{ font-size:16px; font-weight:800; letter-spacing:-.01em;
  display:flex; align-items:center; gap:8px; color:var(--hub-ink); margin:0; }.mod-head h2 .bar{ width:4px; height:16px; background:var(--hub-red); border-radius:2px; flex:0 0 auto; }.mod-head a{ font-size:12.5px; font-weight:700; color:var(--hub-red); text-decoration:none; }/* games rail */
.rail{ display:flex; gap:10px; overflow-x:auto; padding:2px 16px 6px; scrollbar-width:none; }.rail::-webkit-scrollbar{ display:none; }.rail-skel{ display:flex; gap:10px; }.rail-skel i{ flex:0 0 148px; height:120px; border-radius:16px; font-style:normal;
  background:linear-gradient(90deg,var(--desert-pressed),var(--desert-pressed),var(--desert-pressed)); background-size:200% 100%;
  animation:hubsh 1.4s infinite; }.gcard{ flex:0 0 148px; background:var(--hub-card); border:1px solid var(--hub-line);
  border-radius:16px; padding:12px; box-shadow:var(--hub-shadow); text-decoration:none; color:inherit; }.gcard .st{ font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--hub-ink3); margin-bottom:8px;
  display:flex; align-items:center; gap:6px; }.gcard .st.live{ color:var(--desert-accent); }.gcard .st.live i{ width:6px; height:6px; border-radius:50%; background:var(--brand-red); animation:hubblink 1.2s infinite; }.gcard .st.final{ color:var(--color-win); }.gcard .tm{ display:flex; align-items:center; gap:8px; margin:5px 0; }.gcard .tm img{ width:26px; height:26px; object-fit:contain; flex:0 0 auto; }.gcard .tm b{ font-size:13px; font-weight:700; color:var(--hub-ink2); }.gcard .tm span{ margin-left:auto; font-size:13px; font-weight:800; color:var(--hub-ink); font-variant-numeric:tabular-nums; }.gcard .tm.winner b{ color:var(--hub-ink); }/* P's take */
.ptake{ margin:0 12px; background:var(--desert-ink); color:var(--desert-card); border-radius:var(--hub-r);
  padding:16px; box-shadow:var(--hub-shadow); position:relative; overflow:hidden; }.ptake::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%, rgba(var(--brand-red-rgb), .28), transparent 55%); }.ptake .row1{ display:flex; align-items:center; gap:8px; position:relative; }.ptake .who{ font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--desert-accent-soft); }.ptake .grade{ margin-left:auto; font-size:11px; font-weight:800; background:var(--color-warn);
  color:var(--desert-ink); border-radius:8px; padding:3px 8px; }.ptake .pick{ font-size:20px; font-weight:800; margin-top:8px; position:relative; letter-spacing:-.01em; }.ptake .pick small{ font-size:13px; color:var(--desert-accent-soft); font-weight:700; }.ptake .take{ font-size:13px; color:var(--desert-ink-faint); margin-top:6px; line-height:1.45; position:relative; }.ptake .go{ margin-top:12px; position:relative; display:flex; gap:8px; }.ptake .go .full{ flex:1; border:none; border-radius:12px; padding:11px; font-weight:800;
  font-size:13.5px; font-family:inherit; cursor:pointer; background:var(--hub-red); color:var(--desert-card);
  text-decoration:none; text-align:center; }.ptake .go .share{ background:rgba(var(--desert-card-rgb), .12); color:var(--desert-card);
  border:1px solid rgba(var(--desert-card-rgb), .2); flex:0 0 48px; border-radius:12px; font-size:16px; cursor:pointer; }/* video rail */
.vcard{ flex:0 0 210px; text-decoration:none; color:inherit; }.vcard .thumb{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/9;
  background:var(--desert-card); box-shadow:var(--hub-shadow); }.vcard .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }.vcard .dur{ position:absolute; right:8px; bottom:8px; background:rgba(var(--desert-shadow-rgb), .78); color:var(--desert-card);
  font-size:11px; font-weight:700; padding:3px 7px; border-radius:7px; }.vcard .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }.vcard .play i{ width:44px; height:44px; border-radius:50%; background:rgba(var(--brand-red-rgb), .95);
  display:flex; align-items:center; justify-content:center; color:var(--desert-card); font-style:normal;
  font-size:15px; padding-left:3px; }.vcard p{ font-size:12.5px; font-weight:600; line-height:1.35; margin:8px 0 2px; color:var(--hub-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.vcard span{ font-size:11px; color:var(--hub-ink3); font-weight:600; }/* players */
.pcard{ flex:0 0 104px; background:var(--hub-card); border:1px solid var(--hub-line);
  border-radius:16px; padding:12px 8px; text-align:center; box-shadow:var(--hub-shadow);
  cursor:pointer; font-family:inherit; }.pcard img{ width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--desert-pressed); }.pcard b{ display:block; font-size:12px; font-weight:700; margin-top:8px; line-height:1.25; color:var(--hub-ink); }.pcard span{ font-size:10.5px; color:var(--hub-ink2); font-weight:600; }.pcard .ks{ display:inline-block; margin-top:6px; font-size:11px; font-weight:800;
  color:var(--hub-red-dark); background:var(--desert-card); padding:3px 8px; border-radius:8px; }/* stories */
.stories{ background:var(--hub-card); border:1px solid var(--hub-line); border-radius:var(--hub-r);
  margin:0 12px; box-shadow:var(--hub-shadow); overflow:hidden; }.story{ display:flex; gap:12px; padding:12px 14px; align-items:center; text-decoration:none; color:inherit; }.story + .story{ border-top:1px solid var(--hub-line); }.story img{ width:76px; height:58px; border-radius:12px; object-fit:cover; flex:0 0 76px; background:var(--desert-pressed); }.story .tx b{ font-size:13.5px; font-weight:700; line-height:1.35; color:var(--hub-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.story .tx span{ font-size:11px; color:var(--hub-ink3); font-weight:600; margin-top:4px; display:block; }/* standings */
.stable{ margin:0 12px; background:var(--hub-card); border:1px solid var(--hub-line);
  border-radius:var(--hub-r); overflow:hidden; box-shadow:var(--hub-shadow); }.srow{ display:flex; align-items:center; gap:10px; padding:11px 14px; }.srow + .srow{ border-top:1px solid var(--hub-line); }.srow img{ width:28px; height:28px; object-fit:contain; flex:0 0 auto; }.srow b{ font-size:13.5px; font-weight:700; color:var(--hub-ink); }.srow .rec{ margin-left:auto; font-size:12.5px; font-weight:700; color:var(--hub-ink2);
  font-variant-numeric:tabular-nums; }.syncnote{ padding:10px 14px; font-size:11px; color:var(--hub-ink3); font-weight:600; background:var(--desert-card); }.hub-foot{ padding:28px 16px 40px; text-align:center; color:var(--hub-ink3);
  font-size:11.5px; font-weight:600; line-height:1.6; }/* ---------- player sheet / panel ---------- */
.scrim{ position:fixed; inset:0; background:rgba(var(--desert-bg-rgb), .5); opacity:0;
  pointer-events:none; transition:.25s; z-index:90; }.scrim.on{ opacity:1; pointer-events:auto; }.psheet{ position:fixed; left:50%; transform:translate(-50%,105%); bottom:0; width:min(430px,100%);
  max-height:86vh; max-height:86dvh; overflow-y:auto; background:var(--desert-card); color:var(--hub-ink);
  border-radius:24px 24px 0 0; z-index:95; transition:transform .32s cubic-bezier(.32,.72,.28,1); }.psheet.on{ transform:translate(-50%,0); }.grab{ width:40px; height:5px; border-radius:3px; background:var(--desert-pressed); margin:10px auto 0; }.psheet-head{ display:flex; gap:14px; padding:16px 18px 12px; align-items:center; }.psheet-head img{ width:72px; height:72px; border-radius:50%; object-fit:cover; background:var(--desert-pressed); flex:0 0 auto; }.psheet-head h3{ font-size:18px; font-weight:800; letter-spacing:-.01em; margin:0; }.psheet-head p{ font-size:12.5px; color:var(--hub-ink2); font-weight:600; margin:3px 0 0; }.ps-x{ margin-left:auto; border:none; background:var(--desert-pressed); width:34px; height:34px;
  border-radius:50%; font-size:15px; cursor:pointer; color:var(--hub-ink); flex:0 0 auto; }.ps-share{ border:none; background:var(--desert-pressed); width:34px; height:34px; margin-left:auto;
  border-radius:50%; font-size:16px; cursor:pointer; color:var(--hub-ink); flex:0 0 auto; }.psheet-head .ps-x{ margin-left:8px; }.ytabs{ display:flex; gap:8px; padding:4px 18px 12px; }.ytabs button{ border:1px solid var(--hub-line); background:var(--desert-card); border-radius:10px;
  padding:8px 16px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; color:var(--hub-ink2); }.ytabs button.active{ background:var(--hub-ink); color:var(--desert-card); border-color:var(--hub-ink); }.statgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 18px; }.stat{ background:var(--desert-card); border:1px solid var(--hub-line); border-radius:14px;
  padding:12px 8px; text-align:center; }.stat b{ display:block; font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--hub-ink); }.stat span{ font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--hub-ink2); }.cmpnote{ margin:0 18px 8px; font-size:12px; color:var(--hub-ink2); font-weight:600; display:none; }.cmpnote.on{ display:block; }.vsrow{ display:none; margin:0 18px 8px; gap:8px; }.vsrow.on{ display:flex; }.vspick{ flex:1; border:2px dashed var(--hub-line); border-radius:14px; padding:12px;
  text-align:center; font-size:12.5px; font-weight:700; color:var(--hub-ink2); cursor:pointer; font-family:inherit; background:var(--desert-card); }.vspick small{ font-weight:600; color:var(--hub-ink3); }.vspick.sel{ border-style:solid; border-color:var(--hub-red); color:var(--hub-ink); background:var(--desert-bg); }.vscols{ display:none; margin:0 18px 8px; }.vscols.on{ display:block; }.vscol{ display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--hub-line); font-size:12.5px; }.vscol b{ min-width:110px; font-weight:700; }.vscol .va, .vscol .vb{ flex:1; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; }.vscol .win{ color:var(--hub-red-dark); }.psheet-actions{ display:flex; gap:8px; padding:16px 18px 26px; }.psheet-actions button{ flex:1; border-radius:14px; padding:13px; font-size:14px; font-weight:800;
  font-family:inherit; cursor:pointer; }.psheet-actions .cmp{ background:var(--hub-ink); color:var(--desert-card); border:none; }.psheet-actions .full{ background:var(--desert-card); border:1px solid var(--hub-line); color:var(--hub-ink); }.toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,80px); background:var(--desert-ink);
  color:var(--desert-card); font-size:13px; font-weight:700; padding:12px 20px; border-radius:10px;
  z-index:120; transition:.3s; opacity:0; pointer-events:none; max-width:92vw; text-align:center; }.toast.on{ transform:translate(-50%,0); opacity:1; }

/* ---------- league media (fail-closed;lights up when the feed lands) ---------- */
.mcard{ flex:0 0 220px; border:1px solid var(--hub-line); border-radius:16px; overflow:hidden;
  background:var(--desert-card); text-decoration:none; color:var(--hub-ink); position:relative; display:block; }.mcard img{ width:100%; height:110px; object-fit:cover; display:block; background:var(--desert-pressed); }.mcard .mt{ padding:10px 12px 12px; }.mcard .mt b{ font-size:13px; font-weight:700; display:block; line-height:1.3; }.mcard .mt span{ font-size:11px; color:var(--hub-ink2); font-weight:600; display:block; margin-top:4px; }.mcard .live-dot{ position:absolute; top:8px; left:8px; background:var(--desert-accent); color:var(--desert-card);
  font-size:10px; font-weight:800; letter-spacing:.08em; padding:4px 9px; border-radius:999px; }/* ---------- desktop 12-col grid ---------- */
@media (min-width:1024px){
  .hub-leagues{ padding:12px 0 12px 40px; }
  .hub-hero{ margin:20px 40px 0; border-radius:26px; min-height:380px;
    display:grid; grid-template-columns:1fr 340px; }
  .hub-hero::after{ background:linear-gradient(100deg, rgba(var(--desert-card-rgb), .28) 0%, rgba(var(--desert-card-rgb), .62) 55%, rgba(var(--desert-card-rgb), .94) 100%); }
  .hero-in{ padding:34px 36px; display:flex; flex-direction:column; justify-content:center; }
  .hero-in .matchup{ justify-content:flex-start; }
  .hero-in h1{ text-align:left; font-size:34px; }
  .hero-in .meta{ text-align:left; font-size:14px; }
  .hero-side{ display:flex; position:relative; z-index:2; background:rgba(var(--desert-bg-rgb), .55); backdrop-filter:blur(8px);
    border-left:1px solid rgba(var(--desert-card-rgb), .14); padding:30px 28px;
    flex-direction:column; justify-content:center; gap:4px; }
  .hero-side .lab{ font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--desert-accent-soft); margin-bottom:6px; }
  .oddsrow{ display:flex; justify-content:space-between; align-items:center;
    padding:12px 0; border-bottom:1px solid rgba(var(--desert-card-rgb), .12); }
  .oddsrow span{ font-size:13.5px; font-weight:600; color:var(--desert-ink-faint); }
  .oddsrow b{ font-size:17px; font-weight:800; color:var(--color-warn); }
  .hub-body{ max-width:1280px; margin:0 auto; padding:4px 40px 20px;
    display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:0 22px; align-items:start; }
  section.mod{ padding-top:22px; }
  .mod-head{ padding:0 0 12px; }
  .mod-head h2{ font-size:18px; }
  .mod-games{ grid-column:1; grid-row:1; }
  .mod-stories{ grid-column:1; grid-row:2; }
  .mod-highlights{ grid-column:1; grid-row:3; }
  .mod-players{ grid-column:1; grid-row:4; }
  .mod-ptake{ grid-column:2; grid-row:1; }
  .mod-standings{ grid-column:2; grid-row:2; }
  .mod-media{ grid-column:2; grid-row:3; }
  .rail{ padding:2px 2px 6px; }
  .ptake{ margin:0; }
  .stories{ margin:0; }
  .story img{ width:150px; height:92px; flex-basis:150px; }
  .story{ padding:16px 18px; }
  .story .tx b{ font-size:15.5px; }
  .stable{ margin:0; }
  .pcard{ flex-basis:120px; }
  /* desktop: sheet becomes a right side panel */
  .psheet{ left:auto; right:0; top:0; bottom:0; transform:translateX(105%);
    width:420px; max-height:none; height:100vh; height:100dvh; border-radius:0;
    box-shadow:-20px 0 60px rgba(var(--desert-shadow-rgb), .2); padding:26px; }
  .psheet.on{ transform:translateX(0); }
  .grab{ display:none; }
}@media (prefers-reduced-motion:reduce){.hub-hero-skel, .rail-skel i{ animation:none; }.kicker.live .dot, .gcard .st.live i{ animation:none; }
}