/* ============================================================
   D2HOOPSTOO · shared design system
   Used by the static front page (app.html) and the Next.js pages.
   Editorial broadsheet: cream masthead, ink-dark body, brand blue
   lifted straight from the logo (#1498D4).
   ============================================================ */
:root{
  --blue:#1498D4;            /* brand blue (logo) — accent on dark surfaces */
  --blue-ink:#0F6E9E;        /* brand blue for text on cream */
  --blue-glow:rgba(20,152,212,.16);
  --blue-border:rgba(20,152,212,.32);
  --cyan:var(--blue);        /* legacy alias used throughout app.html */
  --cyan-glow:var(--blue-glow);
  --cyan-border:var(--blue-border);
  --ink:#0A0E17;--ink-2:#0E1422;
  --card:#111827;--surface:#151C2C;--surface-2:#192236;
  --cream:#F4EFE6;--cream-2:#EDE7DB;
  --muted:#9AA4B2;--muted-cream:#6E6456;
  --rule-cream:#D4CBC0;--rule-dark:#1E2A3A;
  --red:#3B82F6;--gold:#F59E0B;--green:#10B981;--orange:#F59E0B;--purple:#8B5CF6;
  --live:#60A5FA;
  --ig:#E1306C;--yt:#FF0000;--tt:#69C9D0;--tw:#1DA1F2;
  --font-display:"Oswald",sans-serif;
  --font-serif:"Fraunces","Georgia",serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-ui:"Inter",system-ui,sans-serif;
  --radius:8px;--radius-sm:4px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --transition:0.25s cubic-bezier(0.4,0,0.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--font-serif);-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--font-mono)}
.display{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:.04em}

/* ---------- Site header (cream masthead) ---------- */
.site-header{background:var(--cream);color:var(--ink)}
.dateline{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-cream);padding:14px 0 10px;border-bottom:2px solid var(--ink);flex-wrap:wrap;gap:4px}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0 16px;flex-wrap:wrap}
.brand-lockup{display:flex;align-items:center;gap:16px;color:var(--ink);text-decoration:none}
.brand-lockup:hover{text-decoration:none}
.brand-logo{height:64px;width:auto;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.08))}
.brand-wordmark{font-family:var(--font-display);font-weight:900;font-size:clamp(34px,5vw,52px);letter-spacing:.04em;text-transform:uppercase;line-height:.95}
.brand-wordmark .d2{color:var(--blue-ink)}
.brand-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-cream);margin-top:4px}
.brand-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.brand-meta{font-family:var(--font-serif);font-style:italic;font-size:13px;color:var(--muted-cream)}
.brand-meta b{color:var(--ink);font-style:normal}
.social-row{display:flex;gap:8px}
.social-row a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--rule-cream);color:var(--ink);background:#fff;transition:all var(--transition)}
.social-row a:hover{background:var(--ink);color:#fff;border-color:var(--ink);text-decoration:none;transform:translateY(-1px)}
.social-row svg{width:16px;height:16px;fill:currentColor}
.site-header.dark{background:var(--ink-2);color:var(--cream);border-bottom:1px solid var(--rule-dark)}
.site-header.dark .brand-lockup,.site-header.dark .brand-wordmark{color:var(--cream)}
.site-header.dark .brand-wordmark .d2{color:var(--blue)}
.site-header.dark .dateline{color:var(--muted);border-bottom-color:var(--rule-dark)}
.site-header.dark .brand-sub,.site-header.dark .brand-meta{color:var(--muted)}
.site-header.dark .brand-meta b{color:var(--cream)}
.site-header.dark .social-row a{background:var(--surface);border-color:var(--rule-dark);color:var(--cream)}
.site-header.dark .social-row a:hover{background:var(--blue);border-color:var(--blue);color:var(--ink)}

/* ---------- Section nav (tabs) ---------- */
.modes{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--rule-cream);border-bottom:1px solid var(--rule-cream);position:sticky;top:36px;z-index:90;background:var(--cream)}
.mode{padding:14px 18px;cursor:pointer;border-right:1px solid var(--rule-cream);display:flex;flex-direction:column;gap:2px;color:var(--ink);text-decoration:none;transition:background var(--transition),color var(--transition)}
.mode:last-child{border-right:none}
.mode:hover{background:var(--cream-2);text-decoration:none}
.mode.active{background:var(--ink);color:var(--cream);box-shadow:inset 0 -3px 0 var(--blue)}
.mode.active .mode-label{color:var(--blue)}
.mode-num{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--muted-cream)}
.mode.active .mode-num{color:var(--muted)}
.mode-label{font-family:var(--font-display);font-weight:900;font-size:19px;letter-spacing:.04em;text-transform:uppercase}
.mode-sub{font-family:var(--font-serif);font-style:italic;font-size:11px;color:var(--muted-cream)}
.mode.active .mode-sub{color:#CFC8BB}
.site-header.dark .modes{background:var(--ink-2);border-color:var(--rule-dark)}
.site-header.dark .mode{color:var(--cream);border-right-color:var(--rule-dark)}
.site-header.dark .mode:hover{background:var(--surface)}
.site-header.dark .mode-num,.site-header.dark .mode-sub{color:var(--muted)}

/* ---------- Page scaffolding ---------- */
.page{padding-top:8px;padding-bottom:56px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:36px 0 18px;border-bottom:1px solid var(--rule-dark);margin-bottom:24px;flex-wrap:wrap}
.page-kicker{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.page-title{font-family:var(--font-display);font-weight:900;font-size:clamp(30px,4vw,44px);letter-spacing:.02em;text-transform:uppercase;line-height:1;margin:0}
.page-sub{font-family:var(--font-serif);font-style:italic;font-size:15px;color:var(--muted);margin-top:8px}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;padding:32px 0 14px;border-bottom:1px solid var(--rule-dark);margin-bottom:20px}
.sec-title{font-family:var(--font-display);font-weight:900;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.sec-see{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.sec-see:hover{color:var(--blue)}
.crumbs{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;padding-top:20px}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--blue)}

/* ---------- Components ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--rule-dark);color:var(--cream);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;padding:9px 14px;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;transition:all var(--transition)}
.btn:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}
.btn.primary{background:var(--blue);border-color:var(--blue);color:var(--ink);font-weight:700}
.btn.primary:hover{background:#1AA6E6;color:var(--ink)}
.btn.active{border-color:var(--blue);color:var(--blue);background:var(--blue-glow)}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--rule-dark);color:var(--muted);background:rgba(255,255,255,.02)}
.pill.blue{border-color:var(--blue-border);color:var(--blue);background:var(--blue-glow)}
.pill.live{border-color:rgba(96,165,250,.5);color:var(--live)}
.pill.green{border-color:rgba(16,185,129,.4);color:var(--green)}
.card{background:linear-gradient(180deg,var(--surface-2),var(--card));border:1px solid var(--rule-dark);border-radius:var(--radius);overflow:hidden;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition)}
.card:hover{border-color:var(--blue-border);transform:translateY(-2px);box-shadow:var(--shadow)}
.card-head{padding:9px 14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule-dark);display:flex;justify-content:space-between;gap:8px}
.card-body{padding:12px 14px}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.lnk{color:inherit;border-bottom:1px dotted rgba(20,152,212,.5);transition:color var(--transition),border-color var(--transition)}
.lnk:hover{color:var(--blue);border-bottom-color:var(--blue);text-decoration:none}
.table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12px;background:var(--card);border:1px solid var(--rule-dark);border-radius:var(--radius);overflow:hidden}
.table th{text-align:left;padding:11px 14px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--rule-dark);background:var(--surface)}
.table td{padding:10px 14px;border-bottom:1px solid var(--rule-dark);vertical-align:middle}
.table tbody tr:hover{background:var(--surface)}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}
.team-name{font-family:var(--font-display);font-weight:700;font-size:14px;text-transform:uppercase;color:var(--cream)}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--card);padding:18px 16px;text-align:center}
.stat-val{font-family:var(--font-mono);font-weight:700;font-size:26px;color:var(--blue)}
.stat-label{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.stat-sub{font-family:var(--font-serif);font-style:italic;font-size:11px;color:var(--muted);margin-top:2px}
.empty{padding:40px 16px;text-align:center;font-family:var(--font-mono);font-size:12px;color:var(--muted);border:1px dashed var(--rule-dark);border-radius:var(--radius)}
.note{background:var(--blue-glow);border:1px solid var(--blue-border);border-radius:var(--radius);padding:12px 14px;font-family:var(--font-ui);font-size:13px;color:var(--muted);line-height:1.55}
.note b{color:var(--cream)}
.skel{position:relative;color:transparent!important;min-height:1em;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite}
.skel *{visibility:hidden}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- Score card (shared by schedule + results) ---------- */
.score-card{background:linear-gradient(180deg,var(--surface-2),var(--card));border:1px solid var(--rule-dark);border-radius:var(--radius);overflow:hidden;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition)}
.score-card:hover{border-color:var(--blue-border);transform:translateY(-2px);box-shadow:var(--shadow)}
.score-card.live{border-color:rgba(96,165,250,.6);box-shadow:0 0 0 1px rgba(96,165,250,.25)}
.score-card-head{padding:9px 14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule-dark);display:flex;justify-content:space-between;gap:8px}
.score-card-body{padding:12px 14px}
.score-line{display:flex;justify-content:space-between;align-items:center;padding:6px 0;gap:10px}
.score-team{font-family:var(--font-display);font-weight:700;font-size:15px;text-transform:uppercase;color:var(--cream);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.score-rank{font-family:var(--font-mono);font-size:10px;color:var(--muted);margin-right:6px}
.score-pts{font-family:var(--font-mono);font-weight:700;font-size:20px}
.score-pts.w{color:var(--blue)}
.score-pts.l{color:var(--muted)}
.score-live{color:var(--live);font-weight:700}
.score-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--muted);display:flex;justify-content:space-between;gap:8px;padding-top:6px;border-top:1px solid var(--rule-dark);margin-top:6px}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--rule-dark);margin-top:56px;background:var(--ink-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:40px 0 28px}
.foot-brand img{height:56px;width:auto}
.foot-brand p{font-family:var(--font-serif);font-style:italic;font-size:14px;color:var(--muted);line-height:1.55;margin:12px 0 0;max-width:36ch}
.foot-col h4{font-family:var(--font-display);font-weight:900;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:0 0 12px}
.foot-col a{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted);padding:5px 0}
.foot-col a:hover{color:var(--cream);text-decoration:none}
.foot-bottom{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap;gap:12px;padding:18px 0 28px;border-top:1px solid var(--rule-dark)}
.foot-bottom b{color:var(--cream)}

/* ---------- Responsive ---------- */
/* ---------- The Brand (#WeHoopToo section) ---------- */
.brand{padding-bottom:16px}
.bhero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:32px;align-items:center;padding:44px 0 36px;border-bottom:1px solid var(--rule-dark);overflow:hidden}
.bhero::before{content:"";position:absolute;right:-120px;top:-160px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(20,152,212,.28),rgba(20,152,212,0) 64%);pointer-events:none}
.bhero-kicker{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.bhero-title{font-family:var(--font-display);font-weight:900;font-size:clamp(40px,6vw,72px);line-height:.95;letter-spacing:.01em;text-transform:uppercase;margin:0 0 18px;color:var(--cream)}
.bhero-title span{color:var(--blue)}
.bhero-lede{font-family:var(--font-ui);font-size:18px;line-height:1.55;font-weight:500;color:var(--cream);max-width:34em;margin:0 0 20px;text-wrap:pretty}
.bhero-mission{max-width:34em;margin:0 0 22px;padding-top:16px;border-top:1px solid var(--rule-dark)}
.bhero-mission-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.bhero-mission p{font-family:var(--font-ui);font-size:15px;line-height:1.65;color:var(--muted);margin:0;text-wrap:pretty}
.bhero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.bhero-tags span{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--blue);border:1px solid var(--blue-border);background:var(--blue-glow);padding:5px 10px;border-radius:999px}
.bhero-cta{display:flex;flex-wrap:wrap;gap:10px}
.bhero-cta .btn{font-size:12px;padding:11px 18px}
.bhero-art{position:relative;display:flex;justify-content:center;align-items:center}
.bhero-art img{width:100%;max-width:420px;height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(20,152,212,.25))}
.bnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark);border-radius:var(--radius);overflow:hidden;margin-top:28px}
.bnum{background:var(--card);padding:18px 14px;text-align:center}
.bnum-val{font-family:var(--font-display);font-weight:900;font-size:30px;line-height:1;color:var(--blue)}
.bnum-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);margin-top:8px}
.bnum-sub{font-family:var(--font-serif);font-style:italic;font-size:11px;color:var(--muted);margin-top:3px}
.bgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bcard{background:linear-gradient(180deg,var(--surface-2),var(--card));border:1px solid var(--rule-dark);border-radius:var(--radius);padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;transition:border-color var(--transition),transform var(--transition)}
.bcard:hover{border-color:var(--blue-border);transform:translateY(-2px)}
.bcard-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.bcard h3{font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;margin:0;color:var(--cream)}
.bcard p{font-family:var(--font-ui);font-size:14px;line-height:1.6;color:var(--muted);margin:0;flex:1}
.bcard p b{color:var(--cream);font-weight:600}
.bcard>a{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--blue)}
.bcard.tier{border-top:3px solid var(--rule-dark)}
.bcard.tier.bronze{border-top-color:#C8793A}.bcard.tier.silver{border-top-color:#B8C2CC}.bcard.tier.gold{border-top-color:var(--gold)}
.bruns{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:linear-gradient(135deg,rgba(20,152,212,.18),rgba(20,152,212,.04) 60%,var(--card));border:1px solid var(--blue-border);border-radius:var(--radius);padding:26px 28px}
.bruns-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.bruns-t{font-family:var(--font-display);font-weight:900;font-size:30px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--cream);margin:0 0 10px}
.bruns-b{font-family:var(--font-ui);font-size:15px;line-height:1.6;color:var(--cream);margin:0}
.bruns-m{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted);margin-top:12px}
.bruns-m .green{color:var(--green)}
.bruns .btn{font-size:12px;padding:13px 20px;white-space:nowrap}
.yt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.yt-grid.shelf{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.yt-card.short .yt-thumb{aspect-ratio:9/14}
.yt-card.short .yt-title{font-size:13px;-webkit-line-clamp:3}
.yt-card{display:block;background:var(--card);border:1px solid var(--rule-dark);border-radius:var(--radius);overflow:hidden;color:inherit;transition:border-color var(--transition),transform var(--transition)}
.yt-card:hover{border-color:var(--blue-border);transform:translateY(-2px);text-decoration:none}
.yt-thumb{position:relative;aspect-ratio:16/9;background:var(--ink-2) center/cover no-repeat;overflow:hidden}
.yt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.yt-thumb::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(180deg,rgba(10,14,23,0),rgba(10,14,23,.75))}
.yt-play{position:absolute;left:10px;bottom:10px;z-index:1;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--cream);background:rgba(10,14,23,.7);border:1px solid rgba(244,239,230,.25);padding:4px 8px;border-radius:999px}
.yt-play::before{content:"";width:0;height:0;border-left:7px solid var(--blue);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.yt-body{padding:12px 14px 14px}
.yt-title{font-family:var(--font-ui);font-weight:600;font-size:14px;line-height:1.4;color:var(--cream);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--muted);margin-top:8px}
.pod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pod-thumb{flex:none;width:120px;aspect-ratio:16/9;border-radius:var(--radius-sm);overflow:hidden;background:var(--ink-2)}
.pod-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pod-card{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--rule-dark);border-radius:var(--radius);padding:14px 16px;color:inherit;transition:border-color var(--transition)}
.pod-card:hover{border-color:var(--blue-border);text-decoration:none}
.pod-num{font-family:var(--font-display);font-weight:900;font-size:26px;line-height:1;color:var(--blue);min-width:34px}
.pod-title{font-family:var(--font-ui);font-weight:600;font-size:14px;line-height:1.4;color:var(--cream)}
.pod-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--muted);margin-top:6px}
.bpartner-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.bpartner-item{background:var(--card);border:1px solid var(--rule-dark);border-left:3px solid var(--blue);border-radius:var(--radius);padding:16px 18px;font-family:var(--font-ui);font-size:14px;line-height:1.6;color:var(--muted)}
.bpartner-item b{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.03em;text-transform:uppercase;color:var(--cream);margin-bottom:4px}
.bpartner-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px;padding:22px 24px;background:var(--blue-glow);border:1px solid var(--blue-border);border-radius:var(--radius)}
.bpartner-cta .btn{font-size:12px;padding:12px 18px}
.bpartner-cta span{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.nl-box{background:linear-gradient(180deg,var(--surface-2),var(--card));border:1px solid var(--rule-dark);border-radius:var(--radius);padding:36px 28px;text-align:center;margin-top:40px}
.nl-title{font-family:var(--font-display);font-weight:900;font-size:26px;letter-spacing:.03em;text-transform:uppercase;color:var(--cream);margin:0 0 8px}
.nl-desc{font-family:var(--font-serif);font-style:italic;font-size:15px;color:var(--muted);max-width:520px;margin:0 auto 18px;line-height:1.5}
.nl-form{display:flex;gap:8px;max-width:460px;margin:0 auto}
.nl-input{flex:1;min-width:0;padding:12px 16px;background:var(--ink);border:1px solid var(--rule-dark);color:var(--cream);font-family:var(--font-mono);font-size:13px;border-radius:var(--radius-sm);outline:none}
.nl-input:focus{border-color:var(--blue)}
.nl-input::placeholder{color:var(--muted)}
.nl-btn{padding:12px 22px;background:var(--blue);color:var(--ink);border:none;font-family:var(--font-display);font-weight:900;font-size:14px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:var(--radius-sm);transition:background var(--transition)}
.nl-btn:hover{background:#1AA6E6}
.nl-btn[disabled]{opacity:.6;cursor:wait}
.nl-msg{margin-top:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--green);min-height:14px}
.nl-msg.err{color:#F87171}
.nl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.follow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.follow{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--rule-dark);border-radius:var(--radius);padding:18px;color:inherit;transition:border-color var(--transition),transform var(--transition)}
.follow:hover{border-color:var(--blue-border);transform:translateY(-2px);text-decoration:none}
.follow-ic{width:22px;height:22px;color:var(--cream)}
.follow-ic svg{width:22px;height:22px;fill:currentColor}
.follow-name{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.03em;text-transform:uppercase;color:var(--cream);margin-top:6px}
.follow-handle{font-family:var(--font-mono);font-size:11px;color:var(--blue)}
.follow-stat{font-family:var(--font-ui);font-size:12px;color:var(--muted);margin-top:4px}
.follow-stat b{color:var(--cream);font-weight:600}

@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.bgrid3,.yt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.yt-grid.shelf{grid-template-columns:repeat(3,minmax(0,1fr))}.follow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bhero{grid-template-columns:1fr;gap:20px;padding-top:32px}.bhero-art{order:-1}.bhero-art img{max-width:260px}.bruns{grid-template-columns:1fr}}
@media(max-width:768px){
  .brand-row{justify-content:center;text-align:center}
  .brand-side{align-items:center}
  .brand-logo{height:52px}
  .modes{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
  .modes::-webkit-scrollbar{display:none}
  .mode{flex:0 0 auto;min-width:148px;padding:10px 14px;border-bottom:none;scroll-snap-align:start}
  .mode-sub{display:none}
  .mode-label{font-size:15px}
  .page-head{padding-top:24px}
}
@media(max-width:480px){
  .foot-grid{grid-template-columns:1fr}
  .bgrid3,.yt-grid,.pod-grid,.bpartner-row{grid-template-columns:1fr}
  .yt-grid.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pod-thumb{width:96px}
  .bnums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nl-form{flex-direction:column}
  .bruns{padding:20px}
  .bpartner-cta{flex-direction:column;align-items:flex-start}
  .brand-wordmark{font-size:30px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Game Night tab: live dot */
.mode[href="/tonight"] .mode-num::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ef4444;margin-right:6px;vertical-align:1px;box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:gnpulse 1.8s infinite}
@keyframes gnpulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 7px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
@media (prefers-reduced-motion:reduce){.mode[href="/tonight"] .mode-num::before{animation:none}}