:root {
  color-scheme: dark;
  --ink: #0b1420;
  --ink-2: #111f2d;
  --paper: #f4eddc;
  --paper-2: #fffaf0;
  --orange: #f06a3c;
  --orange-dark: #cf4f27;
  --lime: #c8df73;
  --blue: #94c5d6;
  --muted: #91a0ad;
  --line: rgba(255, 255, 255, 0.1);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--ink);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
}
button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
[hidden] { display: none !important; }
.wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.boot-view { min-height:100vh; display:grid; place-content:center; justify-items:center; gap:25px; background:var(--ink); }
.boot-view .loader { margin:0; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px 12px 12px 4px;
  background: var(--orange);
  color: var(--ink);
  font: 900 14px/1 ui-sans-serif, system-ui;
  letter-spacing: -0.08em;
  transform: rotate(-3deg);
}
.public-header, .app-header-inner {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.privacy-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #b8c3cb;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.privacy-pill span { width: 7px; height: 7px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 12px var(--lime); }

.login-view {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 77% 35%, rgba(240, 106, 60, 0.15), transparent 28%),
    var(--ink);
}
.hero {
  min-height: calc(100vh - 84px);
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
  padding-block: 48px 90px;
}
.eyebrow {
  margin: 0 0 11px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.eyebrow.light { color: var(--lime); }
.hero h1, .season-bar h1, .section-heading h2, .card-heading h2 {
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.015em;
}
.hero h1 { font-size: clamp(54px, 6.2vw, 88px); line-height: 0.91; }
.hero h1 em { color: var(--orange); font-style: normal; }
.hero-lede {
  max-width: 570px;
  margin: 26px 0 30px;
  color: #aeb9c2;
  font-size: 18px;
  line-height: 1.7;
}
.google-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 14px;
  background: var(--paper-2);
  color: #17212a;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .18s, box-shadow .18s;
}
.google-button:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.32); }
.google-button svg { width: 22px; height: 22px; }
.dev-login { display: block; width: max-content; margin: 15px 0 0 12px; color: var(--blue); font-size: 13px; }
.allowlist-note { color: #687885; font-size: 12px; margin: 14px 0 0 12px; }
.auth-error { max-width: 460px; padding: 12px 14px; border: 1px solid rgba(240,106,60,.4); border-radius: 10px; background: rgba(240,106,60,.1); color: #ffc2ad; }
.hero-card {
  position: relative;
  height: 590px;
  border-radius: 35px;
  background: #132433;
  box-shadow: var(--shadow);
  transform: rotate(2deg);
  isolation: isolate;
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 25px;
}
.field-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: repeating-linear-gradient(90deg, transparent 0 74px, rgba(255,255,255,.035) 75px 77px);
}
.field-lines::after { content:""; position:absolute; width: 290px; height: 290px; border: 2px solid rgba(255,255,255,.05); border-radius:50%; top:150px; left:150px; }
.pick-slip {
  position: absolute;
  width: min(360px, 76%);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%) rotate(-5deg);
  padding: 29px;
  color: var(--ink);
  background: var(--paper);
  border-radius: 20px 20px 5px 20px;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.pick-slip > p { margin: 0 0 20px; font-size: 11px; font-weight: 900; letter-spacing:.16em; color:#6d726e; }
.pick-slip > div { display:grid; grid-template-columns: 42px 1fr auto; gap:12px; align-items:center; padding: 14px 0; border-top:1px dashed #c7c0ae; }
.pick-slip > div > span:last-child { display:grid; place-items:center; width:25px; height:25px; background:#d5e69a; border-radius:50%; font-weight:900; }
.mini-team { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:white; font-weight:900; }
.mini-team.orange { background:#f36c36; }.mini-team.green{background:#164d4a}.mini-team.blue{background:#155494}
.pick-slip footer { margin:18px -29px -29px; padding:18px 29px; border-radius:0 0 5px 20px; background:#e5ddc9; color:#6c716f; font-size:13px; }
.pick-slip footer strong { color:var(--ink); }
.floating-week { position:absolute; top:57px; right:-24px; width:110px; height:110px; display:grid; place-content:center; text-align:center; border-radius:50%; background:var(--lime); color:var(--ink); font:900 11px/1.15 ui-sans-serif; letter-spacing:.08em; box-shadow:0 15px 35px rgba(0,0,0,.3); transform:rotate(8deg); }
.floating-week strong { font-size:36px; letter-spacing:-.08em; }
.football { position:absolute; left:-28px; bottom:70px; display:grid; place-items:center; width:105px; height:64px; border-radius:50%; color:#fff4de; background:#8f4129; font-size:26px; transform:rotate(-29deg); box-shadow:0 15px 30px rgba(0,0,0,.3); }

.app-header { position:sticky; top:0; z-index:40; background:rgba(11,20,32,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }
.desktop-nav { display:flex; align-items:center; gap:30px; height:100%; }
.nav-link { align-self:stretch; border:0; border-bottom:2px solid transparent; background:none; color:#8897a2; cursor:pointer; font-size:13px; font-weight:800; }
.nav-link:hover, .nav-link.active { color:var(--paper); border-color:var(--orange); }
.user-menu { display:flex; align-items:center; gap:11px; }
.user-menu > div { display:flex; flex-direction:column; align-items:flex-end; font-size:12px; }
.user-menu > div span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.avatar { width:38px; height:38px; display:grid; place-items:center; overflow:hidden; border:2px solid #2b3a46; border-radius:50%; background:#263846; color:var(--paper); font-weight:900; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.icon-button { width:33px; height:33px; border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; transform:rotate(45deg); }

.dashboard { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:34px; align-items:start; padding-block:56px 90px; }
.season-bar { display:flex; align-items:end; justify-content:space-between; margin-bottom:29px; }
.season-bar h1 { font-size:clamp(36px,4vw,55px); line-height:1; }
.sync-button { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; font-weight:800; }
.sync-button:hover { color:var(--paper); border-color:#536271; }
.week-toolbar { display:grid; grid-template-columns:42px auto 42px 1fr; gap:13px; align-items:center; padding:17px; margin-bottom:20px; border:1px solid var(--line); border-radius:18px; background:var(--ink-2); }
.week-arrow { width:42px; height:42px; border:1px solid var(--line); border-radius:11px; background:#172b3a; cursor:pointer; font-size:18px; }
.week-arrow:disabled { opacity:.3; cursor:not-allowed; }
.week-title { display:flex; flex-direction:column; min-width:120px; }
.week-title span { color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.week-title strong { font-size:22px; letter-spacing:-.04em; }
.pick-progress { min-width:170px; margin-left:14px; padding-left:20px; border-left:1px solid var(--line); }
.pick-progress > div:first-child { display:flex; justify-content:space-between; margin-bottom:7px; color:var(--muted); font-size:11px; font-weight:800; }
.pick-progress b { color:var(--lime); }
.progress-track { height:7px; overflow:hidden; border-radius:99px; background:#273744; }
.progress-track span { display:block; width:0; height:100%; background:var(--lime); border-radius:inherit; transition:width .3s; }
.loading-card, .empty-state { padding:70px 20px; text-align:center; border:1px dashed #34424f; border-radius:var(--radius); color:var(--muted); }
.loader { display:inline-block; width:19px; height:19px; margin-right:10px; border:2px solid #42515d; border-top-color:var(--orange); border-radius:50%; vertical-align:middle; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty-state span { font-size:38px; }.empty-state h2 { color:var(--paper); margin:13px 0 5px; }.empty-state p{margin:0}
.day-group { margin-top:26px; }
.day-label { display:flex; align-items:center; gap:13px; margin:0 2px 11px; color:#7f8e9a; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.day-label::after { content:""; height:1px; flex:1; background:var(--line); }
.matchup {
  position:relative;
  overflow:hidden;
  margin-bottom:12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--ink-2);
  transition:border-color .2s, transform .2s;
}
.matchup:hover { border-color:rgba(255,255,255,.18); }
.matchup-main { display:grid; grid-template-columns:1fr 70px 1fr; gap:9px; align-items:center; padding:18px; }
.team-button { display:grid; grid-template-columns:52px minmax(0,1fr) 25px; gap:12px; align-items:center; width:100%; min-height:68px; padding:8px; border:1px solid transparent; border-radius:15px; background:transparent; text-align:left; cursor:pointer; transition:background .16s,border-color .16s,transform .16s; }
.team-button:hover:not(:disabled) { background:#172d3d; transform:translateY(-1px); }
.team-button.selected { border-color:color-mix(in srgb, var(--team-color) 64%, white); background:color-mix(in srgb, var(--team-color) 18%, transparent); }
.team-button:disabled { cursor:not-allowed; }
.team-logo { display:grid; place-items:center; width:52px; height:52px; border-radius:15px 15px 15px 5px; background:var(--team-color); color:white; font-size:13px; font-weight:950; text-shadow:0 1px 4px rgba(0,0,0,.35); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.team-info { display:flex; min-width:0; flex-direction:column; }
.team-info small { margin-bottom:2px; color:#83929e; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.team-info strong { overflow:hidden; color:var(--paper); font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.team-info span { color:#84939e; font-size:11px; }
.pick-check { display:grid; place-items:center; width:23px; height:23px; border:1px solid #3d4b57; border-radius:50%; color:transparent; font-size:12px; font-weight:900; }
.selected .pick-check { border-color:var(--lime); background:var(--lime); color:var(--ink); }
.versus { text-align:center; }
.versus strong { display:block; color:#7d8a94; font-size:10px; letter-spacing:.12em; }
.versus time { display:block; margin-top:4px; color:var(--paper); font-size:12px; font-weight:900; }
.score { display:flex; justify-content:center; gap:7px; margin-top:2px; font-size:20px; font-weight:950; }
.score .winner { color:var(--lime); }
.game-status { display:block; margin-top:2px; color:var(--orange); font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.matchup-footnote { display:flex; align-items:center; gap:8px; min-height:38px; padding:9px 20px; border-top:1px solid var(--line); background:rgba(0,0,0,.1); color:#7f8e99; font-size:10.5px; }
.matchup-footnote b { color:#b9c3ca; }.matchup-footnote .dot{color:#40515f}.matchup-footnote .source{margin-left:auto;color:#52626f}
.locked-ribbon { position:absolute; top:0; right:0; padding:5px 10px; border-radius:0 20px 0 10px; background:#263744; color:#95a3ad; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }

.standings-card { position:sticky; top:112px; padding:25px; border-radius:var(--radius); background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }
.card-heading { display:flex; align-items:center; justify-content:space-between; }
.card-heading h2 { font-size:32px; }
.trophy { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:var(--orange); font-size:23px; transform:rotate(4deg); }
.segmented { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:22px 0 15px; padding:4px; border-radius:11px; background:#ded6c3; }
.segmented button { padding:8px; border:0; border-radius:8px; background:transparent; color:#747468; cursor:pointer; font-size:11px; font-weight:900; }
.segmented button.active { background:var(--paper-2); color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.standings-list { margin:0; padding:0; list-style:none; }
.standing-row { display:grid; grid-template-columns:25px 38px 1fr auto; gap:10px; align-items:center; padding:13px 3px; border-bottom:1px solid #d8d1c0; }
.standing-rank { color:#8c8c80; font-size:12px; font-weight:900; text-align:center; }
.standing-row:first-child .standing-rank { color:var(--orange-dark); }
.standing-avatar { display:grid; place-items:center; width:36px; height:36px; overflow:hidden; border-radius:50%; background:#173044; color:white; font-size:12px; font-weight:900; }
.standing-avatar img { width:100%; height:100%; object-fit:cover; }
.standing-name { min-width:0; }.standing-name strong { display:block; overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.standing-name span{color:#8b8b7e;font-size:10px}
.standing-score { text-align:right; }.standing-score strong{display:block;font-size:19px;line-height:1}.standing-score span{color:#98988c;font-size:9px;text-transform:uppercase}
.standings-note { margin:17px 0 0; color:#979586; font-size:9.5px; line-height:1.5; }

.news-section { padding:75px 0 90px; background:#11202d; border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:27px; }
.section-heading h2 { font-size:45px; }
.spoiler-toggle { display:flex; align-items:center; gap:9px; color:#95a4af; cursor:pointer; font-size:11px; font-weight:800; }
.spoiler-toggle input { position:absolute; opacity:0; pointer-events:none; }
.spoiler-toggle span { position:relative; width:36px; height:21px; border-radius:99px; background:#344654; transition:background .2s; }
.spoiler-toggle span::after { content:""; position:absolute; width:15px; height:15px; left:3px; top:3px; border-radius:50%; background:#b5c0c7; transition:transform .2s; }
.spoiler-toggle input:checked + span { background:var(--orange); }.spoiler-toggle input:checked + span::after{transform:translateX(15px);background:white}
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.news-card { min-height:220px; display:flex; flex-direction:column; padding:23px; border:1px solid var(--line); border-radius:18px; background:#172a39; color:var(--paper); text-decoration:none; transition:transform .18s,border-color .18s; }
.news-card:hover { transform:translateY(-3px); border-color:#4d5d6a; }
.news-card time { color:#7f909c; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.news-card h3 { margin:14px 0 10px; font-size:18px; line-height:1.25; letter-spacing:-.02em; }
.news-card p { margin:0; color:#91a0aa; font-size:12px; line-height:1.55; }
.news-card footer { margin-top:auto; padding-top:16px; color:var(--orange); font-size:10px; font-weight:900; }
.news-card.redacted { justify-content:center; align-items:center; text-align:center; border-style:dashed; }
.news-card.redacted span { display:grid; place-items:center; width:41px; height:41px; margin-bottom:12px; border-radius:50%; background:#263b4a; }
.news-card.redacted h3 { margin:0 0 7px; }.news-card.redacted p{max-width:220px}
.news-skeleton { height:220px; border-radius:18px; background:linear-gradient(90deg,#172a39,#203545,#172a39); background-size:200% 100%; animation:shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.site-footer { padding:31px 0 40px; border-top:1px solid var(--line); color:#657683; font-size:10px; }
.site-footer .wrap { display:flex; justify-content:space-between; gap:30px; }.site-footer p{margin:0;max-width:530px}.site-footer strong{color:#aab5bc}
.mobile-nav { display:none; }
.toast { position:fixed; left:50%; bottom:25px; z-index:90; padding:11px 17px; border-radius:11px; background:var(--paper); color:var(--ink); box-shadow:0 15px 45px rgba(0,0,0,.35); font-size:12px; font-weight:850; opacity:0; pointer-events:none; transform:translate(-50%,15px); transition:opacity .2s,transform .2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.error { background:#ffb49d; }
.busy-overlay { position:fixed; inset:0; z-index:110; display:grid; place-content:center; justify-items:center; gap:14px; background:rgba(7,13,21,.82); backdrop-filter:blur(8px); }.busy-overlay .loader{width:31px;height:31px;margin:0;border-width:3px}.busy-overlay strong{font-size:13px}

@media (max-width: 950px) {
  .hero { grid-template-columns:1fr; padding-top:70px; }.hero-copy{text-align:center}.hero-lede{margin-inline:auto}.google-button{margin-inline:auto}.dev-login{margin-inline:auto}.allowlist-note{margin-left:0}.hero-card{display:none}
  .dashboard { grid-template-columns:1fr; }.standings-card { position:static; }.desktop-nav{display:none}.news-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px) {
  .wrap { width:min(100% - 24px,1160px); }.public-header,.app-header-inner{height:68px}.brand>span:last-child{font-size:14px}.privacy-pill{display:none}
  .hero{min-height:calc(100vh - 68px);padding:65px 0 80px}.hero h1{font-size:49px}.hero-lede{font-size:15px;line-height:1.6}.google-button{width:100%}
  .app-header{position:relative}.user-menu>div,.icon-button{display:none}.dashboard{padding-top:34px;padding-bottom:60px}.season-bar{align-items:center}.season-bar h1{font-size:38px}.sync-button{width:40px;height:40px;padding:0;justify-content:center}.sync-button span{font-size:20px}.sync-button{font-size:0}
  .week-toolbar{grid-template-columns:38px 1fr 38px;padding:12px;gap:9px}.week-arrow{width:38px;height:38px}.week-title{text-align:center}.pick-progress{grid-column:1/-1;margin:5px 0 0;padding:12px 0 0;border-left:0;border-top:1px solid var(--line)}
  .matchup-main{grid-template-columns:1fr 44px 1fr;padding:14px 10px;gap:2px}.team-button{grid-template-columns:1fr;justify-items:center;gap:5px;padding:5px;text-align:center}.team-logo{width:48px;height:48px}.team-info{align-items:center}.team-info strong{max-width:115px;font-size:12px}.pick-check{position:absolute;top:9px;width:20px;height:20px}.team-button:first-child .pick-check{left:9px}.team-button:last-child .pick-check{right:9px}.versus time{font-size:10px}.score{font-size:17px}.matchup-footnote{flex-wrap:wrap;padding:9px 13px}.matchup-footnote .source{display:none}
  .standings-card{padding:21px}.news-section{padding:60px 0 90px}.section-heading{display:block}.section-heading h2{font-size:38px}.spoiler-toggle{margin-top:18px}.news-grid{grid-template-columns:1fr}.site-footer{padding-bottom:100px}.site-footer .wrap{display:block}.site-footer p+ p{margin-top:9px}
  .mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(3,1fr);z-index:45;left:10px;right:10px;bottom:10px;height:61px;padding:6px;border:1px solid rgba(255,255,255,.13);border-radius:17px;background:rgba(17,31,45,.96);box-shadow:0 15px 50px rgba(0,0,0,.4);backdrop-filter:blur(16px)}.mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:transparent;color:#8d9ca7;font-size:9px;font-weight:800}.mobile-nav span{font-size:17px;color:var(--paper)}
  .toast{bottom:86px;width:max-content;max-width:calc(100% - 30px)}
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}
