/* ============================================================================ [Workflow A] /scores LIVE-CFB-GAME surface — canonical components Appended to components.css (@layer components). ZERO per-page CSS. Consumes design tokens; team identity comes in via inline --team on rows. Concept: concept-art/scoreboard/ + vision/transcript hard-rules (away-top/home-bottom, team-color tiles, loser fade, FINAL red pill, favorites→live→final→upcoming, frozen filters, whole-tile→ESPN field). ============================================================================ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /scoreboard folded from scoreboard/style.css (per-page CSS folded) Route-scoped under html[data-route="/scoreboard"]. WARNING: source page has NO data-route attr — fell back to "/scoreboard". Resets dropped (canonical reset/base own them); no per-page :root block existed (tokens come from canonical tokens.css); page keyframes route-prefixed (scoreboard-) to avoid cross-route collision. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /news folded from news/style.css (per-page CSS folded) Route-scoped under html[data-route="/news"] (static attr, FOUC-safe). Resets dropped (none present); no per-page :root (no --f-display present); page keyframe + container-name route-prefixed (news-) to avoid cross-route collision. Faithful 1:1 fold — render identical. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /heisman folded from heisman/style.css (per-page CSS folded) Route-scoped under html[data-route="/heisman"] (static attr, FOUC-safe). Resets dropped (canonical reset/base own them); --f-display dropped so the canonical display token owns it (none present here); ex-:root vars scoped here; page keyframes + container-name route-prefixed (heisman-) to avoid cross-route collision. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /players folded from players/style.css (per-page CSS folded) Route-scoped under html[data-route="/players"] (static attr, FOUC-safe). Resets dropped (canonical reset/base own them); no :root/--f-display in src; no page keyframes or container-name to rename. Faithful 1:1 fold. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /rankings folded from rankings/style.css (per-page CSS folded) Route-scoped under html[data-route="/rankings"] (static attr, FOUC-safe). Resets dropped (none present); --f-display dropped (no :root here); page keyframes route-prefixed (rankings-) to avoid cross-route collision. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /leagues folded from leagues/style.css (per-page CSS folded) Route-scoped under :is(html[data-route="/leagues"],html[data-route="/my-leagues"]) (static attr, FOUC-safe). leagues/style.css is SHARED by both routes, so the scope wraps BOTH via :is(). No :root vars present (none to scope); --f-display not present (dropped n/a). No page @keyframes (animations inherited from base). @container container-name route-prefixed (leagues-) to avoid cross-route collision. No bare element/universal reset rules present — nothing dropped. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /leagues-new folded from leagues/new/style.css (per-page CSS folded) Route-scoped under html[data-route="/leagues/new"] (static attr, FOUC-safe). Resets dropped (none present); --f-display dropped (none present); no ex-:root vars present; page keyframes route-prefixed (leagues-new-) to avoid cross-route collision. No @container queries present. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /leagues-sandbox folded from leagues/sandbox/style.css (per-page CSS folded) Route-scoped under html[data-route="/leagues/sandbox"] (static attr, FOUC-safe). Resets dropped (none present here); --f-display dropped (none present); ex-:root vars scoped here; page keyframes route-prefixed (leagues-sandbox-) to avoid cross-route collision. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /bracket folded from bracket/style.css (per-page CSS folded) Route-scoped under html[data-route="/bracket"] (static attr, FOUC-safe). Resets dropped (canonical reset/base own them); --f-display dropped so the canonical display token owns it (none present here); no ex-:root vars in source; page keyframes route-prefixed (bracket-) to avoid cross-route collision. Trophy watermark (.bk-tree::before, trophy_bg.png) preserved verbatim — durable feature. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /nil folded from nil/style.css (per-page CSS folded) Route-scoped under html[data-route="/nil"] (static attr, FOUC-safe). Resets dropped (canonical reset/base own them); --f-display dropped so the canonical display token owns it; ex-:root vars scoped here; page keyframes route-prefixed (nil-) to avoid cross-route collision. ════════════════════════════════════════════════════════════════════════ */ /* Workflow D — /nil-redeem folded from nil/redeem/style.css (per-page CSS folded) */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /pickems folded from pickems/style.css (per-page CSS folded) Route-scoped under html[data-route="/pickems"] (static attr, FOUC-safe). Resets dropped (canonical reset/base own them); --f-display dropped so the canonical display token owns it; ex-:root vars scoped here; page keyframes route-prefixed (pickems-) to avoid cross-route collision. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /running-the-gauntlet folded from running-the-gauntlet/style.css (per-page CSS folded) Route-scoped under html[data-route="/running-the-gauntlet"] (static attr, FOUC-safe). Resets dropped (canonical reset/base own them); --f-display dropped so the canonical display token owns it (none present here); ex-:root vars scoped here; page keyframes route-prefixed (running-the-gauntlet-) to avoid cross-route collision. Bare @import for fonts dropped (invalid inside a nested style rule; fonts load via global tokens/base stylesheets). ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /duels folded from duels/style.css (per-page CSS folded) Route-scoped under html[data-route="/duels"] (static attr, FOUC-safe). Resets dropped (canonical reset/base own them); --f-display dropped so the canonical display token owns it (none present here); no ex-:root vars here; page keyframes route-prefixed (duels-) to avoid cross-route collision. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /profile folded from profile/style.css (per-page CSS folded) Route-scoped under html[data-route="/profile"] (static attr, FOUC-safe). Resets dropped (canonical reset/base own them); --f-display dropped so the canonical display token owns it; ex-:root vars scoped here; page keyframes route-prefixed (profile-) to avoid cross-route collision. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /signin folded from signin/style.css (per-page CSS folded) Route-scoped under html[data-route="/signin"] (static attr, FOUC-safe). Resets dropped (canonical reset/base own them): `*,*::before,*::after` box-sizing and the bare `html,body` reset (no overflow-x to re-add). No :root vars and no --f-display present. Page keyframe route-prefixed (signin-) to avoid cross-route collision. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ Workflow D — /signup folded from signup/style.css (per-page CSS folded) Route-scoped under html[data-route="/signup"] (static attr, FOUC-safe). Resets dropped (canonical reset/base own them); --f-display dropped so the canonical display token owns it; ex-:root vars scoped here; page keyframes route-prefixed (signup-) to avoid cross-route collision. ════════════════════════════════════════════════════════════════════════ */ /* ========================================================================= Worker A / pward 2026-06-01 - issue #953 Dashboard hero banner too big - fills viewport, pushes content below fold. Closes #953. Source: Brock's ticket body (Forgejo #953) cited "~40vh header banner per concept-art/2.1 + 1.2 proportions" - concept-art is not present on disk, so spec is from the ticket text: cap hero to ~40vh. Note: components.css already has an earlier .sn--c_hero{height:clamp(13rem, 40vh,26rem)!important;...} rule, but cascade order with later/legacy rules AND chrome.js runtime \3c style> injection means the cap can lose at certain viewports/load timings. This rule raises specificity to (0,3,2) via main.content > section.hero.sn--c_hero so it wins regardless. Append-only, no existing rules edited. ========================================================================= */ main.content > section.hero.sn--c_hero { height: clamp(13rem, 40vh, 26rem) !important; max-height: 40vh !important; min-height: 13rem !important; aspect-ratio: auto !important; width: 100% !important; } main.content > section.hero.sn--c_hero .hero-bg, main.content > section.hero.sn--c_hero .hero-stadium, main.content > section.hero.sn--c_hero .hero-vignette { height: 100% !important; max-height: 100% !important; width: 100% !important; } @media (prefers-reduced-motion: reduce) { main.content > section.hero.sn--c_hero, main.content > section.hero.sn--c_hero .hero-stadium { animation: none !important; transition: none !important; } } /* ════════════════════════════════════════════════════════════════════════ W-DASHBOARD-NEWS · A4 — News page redesign (append-only). Adds the single CYCLING HERO tile (replaces lead + side-rail), kills the "large black box" gap, and makes the page reflow down to iPhone width. Scoped under html[data-route="/news"]; appended last so it wins the cascade over the legacy .row-nw-lead / .sn--c_lead / .trend-* rules above (those classes are no longer emitted by the redesigned markup). Patterns cited (RESEARCH/): Aceternity UI "Cards Carousel" / hero-slider crossfade + dot nav; Magic UI "Marquee/Hero" auto-advance pause-on-hover; Utopia.fyi fluid type/space (CC-BY) for clamp() ladders; MDN container queries (CC-BY-SA). prefers-reduced-motion honored (no auto-advance, no slide transition). Fluid range 344→2160px. ════════════════════════════════════════════════════════════════════════ */ /* ============================================================================ PLAYER TILE — shared component (2026-06-04) One component, three sizes: .sns-ptile--sm | --lg | --banner Goal: replace the ~15 route-scoped player-tile implementations with a single reference. See docs/PLAYER-TILE-STANDARD.md. Built on tokens.css. Anatomy: (img OR initials) ============================================================================ */ .sns-ptile{display:flex;align-items:center;gap:var(--sns-space-5,10px); background:var(--black-soft,#111);border:1px solid var(--gray-border,#2A2A2A); border-radius:var(--sns-radius-xl,10px);padding:var(--sns-space-4,8px) var(--sns-space-6,12px); text-decoration:none;color:inherit;transition:border-color var(--sns-dur-fast,.15s), transform var(--sns-dur-fast,.15s),box-shadow var(--sns-dur-fast,.15s);} a.sns-ptile:hover,.sns-ptile--interactive:hover{border-color:rgba(255,26,26,.35); box-shadow:var(--sns-shadow-tile-hover,0 0 14px rgba(255,0,0,.35));transform:translateY(-1px);} .sns-ptile.is-selected{border-color:var(--red-primary,#FF1A1A);background:rgba(255,26,26,.08);} .sns-ptile__photo{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:32px;height:32px;border-radius:var(--sns-radius-round,50%);overflow:hidden; background:var(--sns-grad-avatar,linear-gradient(135deg,#1A1A1A,#0A0A0A)); font-family:var(--font-numerals);font-weight:700;font-size:var(--sns-fs-11,11px); color:var(--white-bright,#F5F5F5);text-transform:uppercase;} .sns-ptile__photo img{width:100%;height:100%;object-fit:cover;} .sns-ptile__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;} .sns-ptile__name{font-weight:700;color:var(--white-bright,#F5F5F5); font-size:var(--sns-fs-13,13px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sns-ptile__meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap; color:var(--gray-light,var(--gray-light,#C2C2C2));font-size:var(--sns-fs-10,10px); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sns-ptile__stat{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;line-height:1.05;} .sns-ptile__stat-val{font-family:var(--font-numerals);font-weight:700; color:var(--white-bright,#F5F5F5);font-size:var(--sns-fs-14,14px);} .sns-ptile__stat-lbl{color:var(--gray-light,var(--gray-light,#C2C2C2));font-size:var(--sns-fs-10,10px); text-transform:uppercase;letter-spacing:var(--sns-ls-base,.04em);} .sns-ptile__action{flex-shrink:0;display:flex;align-items:center;gap:6px;} /* position badge — colored from the shared --sns-pos-* tokens */ .sns-ptile__pos{display:inline-flex;align-items:center;justify-content:center; min-width:30px;padding:1px 6px;border-radius:var(--sns-radius-sm,4px); font-family:var(--font-numerals);font-weight:700;font-size:var(--sns-fs-10,10px); text-transform:uppercase;letter-spacing:.02em; background:rgba(255,255,255,.06);color:var(--white-bright,#F5F5F5); border:1px solid var(--gray-border,#2A2A2A);} .sns-ptile[data-pos="QB"] .sns-ptile__pos{background:var(--sns-pos-qb-bg);color:var(--sns-pos-qb-text);border-color:transparent;} .sns-ptile[data-pos="RB"] .sns-ptile__pos{background:var(--sns-pos-rb-bg);color:var(--sns-pos-rb-text);border-color:transparent;} .sns-ptile[data-pos="WR"] .sns-ptile__pos{background:var(--sns-pos-wr-bg);color:var(--sns-pos-wr-text);border-color:transparent;} .sns-ptile[data-pos="TE"] .sns-ptile__pos{background:var(--sns-pos-te-bg);color:var(--sns-pos-te-text);border-color:transparent;} .sns-ptile[data-pos="K"] .sns-ptile__pos{background:var(--sns-pos-k-bg);color:var(--sns-pos-k-text);border-color:transparent;} .sns-ptile[data-pos="DEF"] .sns-ptile__pos,.sns-ptile[data-pos="DST"] .sns-ptile__pos{background:rgba(138,138,138,.14);color:var(--gray-light,#C2C2C2);border-color:transparent;} /* ---- SMALL (default workhorse: list row / grid cell) ---- */ .sns-ptile--sm{padding:var(--sns-space-4,8px) var(--sns-space-6,12px);} /* ---- LARGE (vertical hero card: detail page, featured) ---- */ .sns-ptile--lg{flex-direction:column;text-align:center;gap:var(--sns-space-6,12px); padding:var(--sns-space-10,20px);} .sns-ptile--lg .sns-ptile__photo{width:96px;height:96px;font-size:var(--sns-fs-28,28px);} .sns-ptile--lg .sns-ptile__body{align-items:center;gap:4px;} .sns-ptile--lg .sns-ptile__name{font-size:var(--sns-fs-20,20px);white-space:normal;} .sns-ptile--lg .sns-ptile__meta{justify-content:center;font-size:var(--sns-fs-13,13px);} .sns-ptile--lg .sns-ptile__stat{align-items:center;} .sns-ptile--lg .sns-ptile__stat-val{font-size:var(--sns-fs-28,28px);} .sns-ptile--lg .sns-ptile__action{margin-top:4px;} /* ---- BANNER (full-width horizontal strip: player-of-week, headliner) ---- */ .sns-ptile--banner{width:100%;gap:var(--sns-space-8,16px); padding:var(--sns-space-7,14px) var(--sns-space-10,20px); background:var(--grad-card-pop,linear-gradient(160deg,#16161A,#060608));} .sns-ptile--banner .sns-ptile__photo{width:64px;height:64px;border-radius:var(--sns-radius-lg,8px);font-size:var(--sns-fs-20,20px);} .sns-ptile--banner .sns-ptile__name{font-size:var(--sns-fs-18,18px);} .sns-ptile--banner .sns-ptile__meta{font-size:var(--sns-fs-12,12px);} .sns-ptile--banner .sns-ptile__stat+.sns-ptile__stat{margin-left:var(--sns-space-8,16px); padding-left:var(--sns-space-8,16px);border-left:1px solid var(--gray-border,#2A2A2A);} .sns-ptile--banner .sns-ptile__stat-val{font-size:var(--sns-fs-22,22px);} /* ---- CARD (grid-cell workhorse: vertical, multi-stat + footer action) ---- The most common real pattern (free-agents, waivers, players, nil grids): identity on top, a row of stats, a footer with ownership + action button. */ .sns-ptile__stats{display:flex;gap:var(--sns-space-4,8px);justify-content:space-between;} .sns-ptile__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sns-space-4,8px);} .sns-ptile__own{color:var(--gray-light,var(--gray-light,#C2C2C2));font-size:var(--sns-fs-11,11px);} .sns-ptile--card{flex-direction:column;align-items:stretch;text-align:left; gap:var(--sns-space-6,12px);padding:var(--sns-space-7,14px) var(--sns-space-8,16px);} .sns-ptile--card .sns-ptile__name{font-size:var(--sns-fs-15,15px);} .sns-ptile--card .sns-ptile__stats{padding:var(--sns-space-5,10px) 0; border-top:1px solid var(--gray-border,#2A2A2A);border-bottom:1px solid var(--gray-border,#2A2A2A);} .sns-ptile--card .sns-ptile__stat{align-items:flex-start;flex:1;} .sns-ptile--card .sns-ptile__stat-val{font-size:var(--sns-fs-17,17px);} .sns-ptile__stat-val.up{color:var(--sns-trend-up,#5ad07a);} .sns-ptile__stat-val.down{color:var(--sns-trend-down,#FF3B30);} .sns-ptile__stat-val.flat{color:var(--gray-light,var(--gray-light,#C2C2C2));} .sns-ptile.is-disabled{opacity:.35;pointer-events:none;} /* === school-color fade — set --ptile-accent (school primary hex) inline per tile. Small/row: left→right fade. Card/large/banner: top→bottom fade. Subtle tint over the dark base so text stays legible; no accent set => no tint. === */ .sns-ptile{background:linear-gradient(90deg,color-mix(in srgb,var(--ptile-accent,transparent) 26%,transparent) 0%,transparent 62%),var(--black-soft,#111);} .sns-ptile--card,.sns-ptile--lg{background:linear-gradient(180deg,color-mix(in srgb,var(--ptile-accent,transparent) 30%,transparent) 0%,transparent 60%),var(--black-soft,#111);} .sns-ptile--banner{background:linear-gradient(180deg,color-mix(in srgb,var(--ptile-accent,transparent) 32%,transparent) 0%,transparent 60%),var(--grad-card-pop,linear-gradient(160deg,#16161A,#060608));} .sns-ptile.is-selected{background:linear-gradient(90deg,color-mix(in srgb,var(--ptile-accent,transparent) 26%,transparent) 0%,transparent 62%),rgba(255,26,26,.10);} /* photo gets a school-tinted ring when an accent is present */ .sns-ptile[style*="--ptile-accent"] .sns-ptile__photo{border:2px solid color-mix(in srgb,var(--ptile-accent) 55%,transparent);} /* ============================================================ SEASON TOGGLE (D37a — season.js / window.CFFSeason) Gold pill radiogroup. Include season.js per-page; this CSS is global (route-agnostic). ============================================================ */ .season-toggle{ display:flex; flex-wrap:nowrap; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; /* hide scrollbar on FF */ padding:2px; /* room for focus ring */ /* Mobile-safety: as a flex item the toggle must be allowed to shrink so its own overflow-x scrolling engages instead of overflowing/pushing off-screen (this is what hid the year picker in tight flex containers). Works in any mount — block containers are unaffected. */ min-width:0; max-width:100%; } .season-toggle::-webkit-scrollbar{display:none;} .season-toggle__opt{ flex:0 0 auto; padding:5px 14px; border-radius:20px; border:1px solid var(--gray-border,#2A2A2A); background:var(--black-soft,#111); color:var(--gray-light,var(--gray-light,#C2C2C2)); font-family:var(--f-body,"Inter",system-ui,sans-serif); font-size:16px; /* above the 12px legibility floor */ font-weight:500; line-height:1; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s,border-color .15s; } /* active season = gold fill, dark text (matches .nu-pro gold-chip pattern) */ .season-toggle__opt[aria-checked="true"]{ background:var(--accent,#FF2D2D); border-color:var(--accent,#FF2D2D); color:var(--white-bright,#F5F5F5); /* white on red */ font-weight:600; } /* hover on inactive pills */ .season-toggle__opt:not([aria-checked="true"]):hover{ background:var(--bg-surface-2,#111); border-color:var(--accent,#FF2D2D); color:var(--white-bright,#F5F5F5); } /* live/current season (2026) — small green "live" dot before the year */ .season-toggle__opt.is-current::before{ content:""; display:inline-block; width:6px;height:6px; margin-right:6px; border-radius:50%; background:#3dba6e; vertical-align:middle; } .season-toggle__opt.is-current[aria-checked="true"]::before{ background:#0a3d1f; } /* keyboard focus ring */ .season-toggle__opt:focus-visible{ outline:2px solid var(--accent,#FF2D2D); outline-offset:2px; } /* ============================================================ */ /* ================================================================== DASHBOARD HEISMAN WATCH TILES — prestige trading-card theme Matches the Heisman page front-runner card + Pat's reference (screens/heisman/ref/Heisman_Watch_Player_Tile.png). Pat decision 2026-06-07: full gold incl. name/score on these tiles, intentionally overriding the [W-CROSS] no-gold-text rule HERE ONLY. Unlayered + scoped to html[data-route="/"] so no other page moves; !important beats the per-card school-color inline styles set by script.js (ie()/is-school-colored). Append-only, per convention. ================================================================== */ /* keep content above the texture/facet pseudo layers */ /* dot-matrix texture, faded behind the portrait */ /* two bright-edged diagonal corner facets (dark top-left / warm bottom-right) */ /* rank medal — pinned to the corner, keeps gold/silver/bronze fills */ /* gold-ring portrait */ /* gold-foil player name */ /* school with full-width flanking rules */ /* gold score + muted unit label */ /* ============================================================ */ /* ============================================================ * ADS-02 — house-ad slots (.sns-ad) * Native "Sponsored" cards filled by /assets/ads.js from * /assets/house-ads.json. First-party only (no ad network). * Shared chrome: components.css. Suppressed for PRO users. * The slot reserves a fixed height from first paint so filling * it in place causes zero layout shift (CLS). * ============================================================ */ .sns-ad{ display:block; min-height:150px; /* reserved from first paint; NOT released on fill — the card fills it, so injecting content causes no layout shift (CLS). ~matches card. */ margin:18px 0; } .sns-ad__card{ min-height:150px; box-sizing:border-box; position:relative; display:flex; flex-direction:column; gap:6px; padding:18px 20px; background:linear-gradient(180deg,#0D0D0D 0%,#050505 100%); border:1px solid var(--gray-border,#2A2A2A); border-left:3px solid var(--red-primary,#FF1A1A); border-radius:10px; text-decoration:none; transition:border-color .15s ease, transform .15s ease; } .sns-ad__card:hover{ border-color:var(--red-primary,#FF1A1A); transform:translateY(-1px); } .sns-ad__badge{ position:absolute; top:12px; right:14px; font-family:var(--f-mono,'JetBrains Mono',monospace); font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted,var(--gray-light,#C2C2C2)); border:1px solid var(--gray-border,#2A2A2A); border-radius:4px; padding:2px 6px; background:rgba(0,0,0,.4); } .sns-ad__eyebrow{ font-family:var(--f-mono,'JetBrains Mono',monospace); font-size:16px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red-primary,#FF1A1A); padding-right:88px; /* clear the badge */ } .sns-ad__title{ font-family:var(--f-display,'Graduate',sans-serif); font-size:22px; line-height:1.1; letter-spacing:.02em; color:var(--white-bright,#F5F5F5); } .sns-ad__body{ font-size:16px; line-height:1.4; color:var(--text-muted,var(--gray-light,#C2C2C2)); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .sns-ad__cta{ margin-top:4px; font-size:16px; font-weight:600; color:var(--red-primary,#FF1A1A); } /* In-feed grid slots span the full row so they read as a break, not a card. */ .nw-feed-grid > .sns-ad, .pl-grid > .sns-ad{ grid-column:1 / -1; } /* ── D-LG4 / P9 Art-shape fix — scoped to /leagues only ───────────────── Transparent-PNG helmets are square art; 50%+cover crops the edges badly. Override to 8px rounded square + contain, scoped so other routes are unaffected. (.lg-helmet 64px league-card art now also unified to border-radius:8px.) ─────────────────────────────────────────────────────────────────────── */ /* ── btn-master: reusable primary CTA — red bg + animated aura glow ───────── Extracted from the Join-via-Invite-Code button that Brock calls the design bar. Apply to any primary action CTA across league surfaces. Usage: (btn-master--aura = explicit alias; .btn-master already includes the aura; the modifier exists for clarity when overriding per-route.) Shine sweep (moving light L→R) stays JOIN-LEAGUE exclusive via .jbc-btn on the btn-primary::after rule — not added here. prefers-reduced-motion: aura collapses to a static ring (no pulse). ─────────────────────────────────────────────────────────────────────────── */ @keyframes btn-master-aura-pulse { 0% { box-shadow: 0 0 8px 0px rgba(255,26,26,.55), 0 4px 14px rgba(255,26,26,.40); } 50% { box-shadow: 0 0 18px 4px rgba(255,26,26,.80), 0 6px 22px rgba(255,0,0,.65); } 100% { box-shadow: 0 0 8px 0px rgba(255,26,26,.55), 0 4px 14px rgba(255,26,26,.40); } } .btn-master { /* Red gradient — same as var(--sns-grad-btn-primary) */ background: linear-gradient(180deg, #FF2A2A 0%, #C40000 100%); color: #fff; border: 1px solid #FF4D4D; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--f-display, "Graduate", sans-serif); font-size: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 11px 22px; min-height: 44px; position: relative; overflow: hidden; transition: transform .12s ease, opacity .15s ease; /* Animated aura glow — the "beat" Brock wants */ animation: btn-master-aura-pulse 2.4s ease-in-out infinite; } .btn-master:hover { transform: translateY(-1px); opacity: .93; } .btn-master:active { transform: translateY(0) scale(.98); } .btn-master:focus-visible { outline: 2px solid #FF4D4D; outline-offset: 2px; } /* The --aura modifier is a semantic alias (no extra styles; .btn-master already pulses) */ .btn-master.btn-master--aura { /* intentionally empty — aura is always on */ } /* Reduced motion: kill the pulse, keep a static ring glow */ @media (prefers-reduced-motion: reduce) { .btn-master { animation: none; box-shadow: 0 0 0 2px rgba(255,26,26,.6), 0 4px 14px rgba(255,26,26,.35); } } /* ── §3b: .btn-primary IS the master button treatment (D-LG2, merge gate) ────── Global rule promoting .btn-primary to the full red+aura master button. Extends tokens.css button canon without forking it. League surfaces that use .btn-primary get the aura automatically. Press state (scale .97 + glow tighten, 80ms) on all .btn variants below. ────────────────────────────────────────────────────────────────────────────── */ /* Ensure the canonical tokens.css .btn-primary also carries the aura glow on league surfaces. The selector is intentionally global here — league pages are the primary consumer; other routes inherit a better primary button. */ /* D-BTN1/elevation (2026-07-11): the aura pulse is now OPT-IN via .btn--hero (≤1 per view), NOT on every resting .btn-primary sitewide. A resting primary should not be the loudest, most-animated thing on the page (DESIGN-ELEVATION §4.1) — it keeps its solid red fill + static --sns-shadow-btn-primary; glow returns on :hover/:focus. This block previously force-pulsed EVERY primary, overriding the tokens.css opt-in. */ .btn--hero, .btn-hero { animation: btn-master-aura-pulse 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .btn--hero, .btn-hero { animation: none; box-shadow: 0 0 0 2px rgba(255,26,26,.5), var(--sns-shadow-btn-primary); } } /* Press state for ALL button variants (§3b — buttons that don't acknowledge the press read as broken even when they work). 80ms per spec. */ .btn:active, .btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-danger:active, .btn-master:active { transform: translateY(0) scale(.97) !important; transition-duration: var(--sns-dur-press, .08s) !important; } /* ── §3e: Aceternity components — spotlight-card + glowing/moving-border ──────── Ported to vanilla CSS following sns-aceternity-port conventions. Spotlight cards: for major containers (§3e, §4A hero + league-card backplate). Glowing border: for live/hot states (draft live, week-live canvas frame). Moving border: animated gradient border for premium interactive elements. Source: Aceternity UI "Spotlight" + "Moving Border" (MIT) — no JS required. All use CSS custom properties and respect prefers-reduced-motion. ────────────────────────────────────────────────────────────────────────────── */ /* ── spotlight-card: major container card with spotlight reveal on hover ─ */ .sns-spotlight-card { position: relative; isolation: isolate; background: var(--grad-card-pop, linear-gradient(160deg, #16161A 0%, #0A0A0C 60%, #060608 100%)); border: 1px solid var(--hairline-2, rgba(255,255,255,.1)); border-radius: var(--sns-radius-card, 12px); box-shadow: var(--sns-glow-1); overflow: hidden; transition: box-shadow .2s var(--sns-ease-soft, ease), border-color .2s var(--sns-ease-soft, ease), transform .15s var(--sns-ease-soft, ease); } /* Spotlight radial overlay — red/crimson center fades outward */ .sns-spotlight-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( 60% 45% at var(--sp-x, 50%) var(--sp-y, 30%), rgba(255, 52, 52, .18) 0%, rgba(255, 45, 45, .06) 40%, transparent 70% ); opacity: 0; transition: opacity .35s ease; } .sns-spotlight-card:hover::before, .sns-spotlight-card:focus-within::before { opacity: 1; } /* Subtle border accent on hover */ .sns-spotlight-card:hover { border-color: rgba(255, 52, 52, .35); box-shadow: var(--sns-glow-2); transform: translateY(-2px); } /* Content stays above the spotlight layer */ .sns-spotlight-card > * { position: relative; z-index: 1; } /* JS hook: set --sp-x/--sp-y from mousemove to follow the pointer */ /* ── glowing-border: animated glow border for live/hot container states ─ */ .sns-glowing-border { position: relative; border-radius: var(--sns-radius-card, 12px); background: var(--grad-card-pop, linear-gradient(160deg, #16161A 0%, #0A0A0C 60%, #060608 100%)); isolation: isolate; } /* The glowing border is a pseudo-element outside the element bounds */ .sns-glowing-border::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: calc(var(--sns-radius-card, 12px) + 1px); background: conic-gradient( from var(--sns-glowing-border-angle, 0deg), rgba(255, 26, 26, 0) 0deg, rgba(255, 26, 26, 0.9) 60deg, rgba(255, 45, 45, 0.6) 90deg, rgba(255, 26, 26, 0) 120deg ); animation: sns-glowing-border-spin 2.4s linear infinite; } /* Solid card surface masks the inner area so only the 1px border glows */ .sns-glowing-border::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: calc(var(--sns-radius-card, 12px) - 1px); background: inherit; } @property --sns-glowing-border-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes sns-glowing-border-spin { to { --sns-glowing-border-angle: 360deg; } } /* Fallback for browsers that don't support @property */ @supports not (background: conic-gradient(from 0deg, red, red)) { .sns-glowing-border::before { background: linear-gradient(180deg, rgba(255,26,26,.8), rgba(255,45,45,.4), rgba(255,26,26,.8)); animation: sns-glowing-border-fallback 1.8s ease-in-out infinite; border-radius: calc(var(--sns-radius-card, 12px) + 1px); } @keyframes sns-glowing-border-fallback { 0%,100% { opacity: .5; } 50% { opacity: 1; } } } /* Content stays above the pseudo-element layers */ .sns-glowing-border > * { position: relative; z-index: 1; } /* ── moving-border: gradient border that chases the perimeter (Aceternity) ─ */ .sns-moving-border { position: relative; border-radius: var(--sns-radius-btn, 10px); padding: 1px; /* the "border" is the gradient bg showing through */ background: conic-gradient( from var(--sns-moving-border-angle, 0deg), rgba(255, 52, 52, .9) 0deg, rgba(255, 45, 45, .7) 90deg, rgba(0, 183, 255, .5) 180deg, rgba(255, 52, 52, .9) 360deg ); animation: sns-moving-border-rotate 2s linear infinite; } .sns-moving-border__inner { background: var(--bg-surface, #0A0A0A); border-radius: calc(var(--sns-radius-btn, 10px) - 1px); padding: 10px 20px; position: relative; z-index: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; } @property --sns-moving-border-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes sns-moving-border-rotate { to { --sns-moving-border-angle: 360deg; } } @supports not (background: conic-gradient(from 0deg, red, blue)) { .sns-moving-border { background: transparent; border: 2px solid var(--red-primary, #FF1A1A); animation: sns-moving-border-fallback 1.8s ease-in-out infinite; } @keyframes sns-moving-border-fallback { 0%,100% { border-color: var(--red-primary, #FF1A1A); } 50% { border-color: var(--accent, #FF2D2D); } } } /* Reduced motion: kill all spinning/pulsing border animations */ @media (prefers-reduced-motion: reduce) { .sns-glowing-border::before { animation: none; background: none; border: 1px solid rgba(255, 26, 26, .5); inset: 0; } .sns-glowing-border::after { display: none; } .sns-moving-border { animation: none; background: none; border: 1px solid rgba(255, 26, 26, .5); padding: 0; } .sns-spotlight-card:hover { transform: none; } .sns-spotlight-card::before { animation: none; opacity: .35; } } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE TAP-TARGET HARDENING — @media (hover:none) targets touch devices only, leaving desktop pointer interactions unchanged. Minimum touch target: 40px (below Apple HIG 44px but avoids layout shifts on very compact filter bars; keeps visual density intact). ═══════════════════════════════════════════════════════════════════════════ */ @media (hover: none) { /* Scoreboard filter chips (All / Live / Final / Upcoming) */ .sb-filter { min-height: 40px; display: inline-flex; align-items: center; } /* Scoreboard week ← → navigation arrows */ .sb-week-btn { width: 40px; height: 40px; } /* News category chips */ .nw-chip { min-height: 40px; display: inline-flex; align-items: center; } /* Season / year selector pills */ .season-toggle__opt { min-height: 40px; display: inline-flex; align-items: center; } /* Scores page SCORES | RANKINGS tab — sc-page-tab has no CSS in components.css (lives in scores/_components-append.css which is not linked). Define the critical tap-target rule here so it applies. */ .sc-page-tab { min-height: 40px; display: inline-flex; align-items: center; padding-inline: 16px; } } /* More-sweep 2026-06-19: on /pickems the league selector wrapped into a tall stacked column on mobile, pushing the pick card off-screen. Scope a horizontal scroll just to that route (lineup keeps its wrapped layout). */ /* ============================================================================ TYPE-RAMP RESTORE (post-960aee09 "min-16px" sweep correction) The sweep floored the sub-16 ramp to 16px sitewide, collapsing hierarchy. tokens.css restores --sns-fs-10..15 to their named px (git pre-sweep value). This UNLAYERED block re-shrinks the named micro-text ROLES whose literals were born flat in components.css (created already-16px in the same commit). Unlayered normal beats every @layer components rule (incl. compound selectors) WITHOUT !important or [class*=] — so it cannot catch headings. Roles only: eyebrow/overline -> fs-11; meta/caption/sub/status/label/ stat-label/tag/pill/chip/badge -> fs-12. No title/name/hero/score class. */ .card-eyebrow,.cr-eyebrow,.page-eyebrow,.profile-eyebrow,.tg-eyebrow,.widget-matchup__eyebrow,.widget-tips__eyebrow { font-size: var(--sns-fs-11); } .act-meta,.activity-meta,.alert-meta,.auction-bid-label,.auction-budget-lbl,.auction-player-meta,.auth-sub,.badge,.badge-type,.bc-label,.bc-sub,.bk-chip,.bk-chip-ic,.bracket-champ-label,.bracket-round-label,.bracket-status,.bye-tag,.clock-stat-lbl,.comp-stat-lbl,.conf-badge,.contact-sub,.corr-label,.countdown-label,.cr-status,.ctl-label,.ds-label,.empty-sub,.ev-meta,.exp-game-status,.exp-meta,.exp-stat-label,.faab-label,.filter-chip,.filter-pill,.form-hint,.hint,.hr-badge,.injury-tag,.inv-detail-label,.inv-meta,.inv-status-label,.lcf-draft-note-icon,.lcf-pool-lbl,.learn-sub,.link-pill,.lobby-countdown-label,.lobby-stat-lbl,.lobby-sub,.ls-label,.mc-mine-tag,.mc-week-lbl,.mc-winner-note,.mkt-meta,.mkt-owned-badge,.mkt-player-meta,.mkt-stat-label,.ml-opt-badge,.ml-sub,.modal-note,.modal-sub,.mu-tag,.nc-lbl,.nil-stat-label,.og-sub,.panel-meta,.pc-margin--hint,.pc-margin-label,.pc-status,.pc-waiver-badge,.pf-badge,.pf-section-label,.pick-player-meta,.picker-chip,.pill,.pl-empty-sub,.pl-modal-stat-lbl,.port-stat-label,.port-stat-sub,.pos-badge,.q-rank-pill,.ql-label,.ql-sub,.rank-badge,.rc-cost-sub,.rec-badge,.recap-label,.recap-meta,.results-status,.reward-badge,.roster-total-lbl,.row-label,.row-sub,.rr-sub,.rr-tag,.rt-lbl,.rule-lbl,.sandbox-cta-sub,.sb-feed-meta,.sb-meta,.sb-recap-meta,.sb-status,.scout-pos-badge,.section-sub,.src-badge,.ss-label,.ss-sub,.st-lbl,.stat-box-label,.status-label,.status-live,.status-time,.streak-sub,.sx-note,.sx-summary-hint,.tab-badge,.td-sub,.tg-meta,.toast-sub,.toggle-pill,.tp-lbl,.tx-src-sub,.txn-meta,.upnext-lbl,.version-tag,.wallet-bal-sub,.wallet-sep-note,.wallet-stat-label,.wallet-stat-sub,.week-chip,.wt-badge,.you-tag { font-size: var(--sns-fs-12); } /* iOS / WKWebView focus-zoom guard — form CONTROLS ONLY (Safari/WebView zooms the page when a focused input/select/textarea computes <16px). !important is scoped to control font-size so a class like .cf-input{font-size:var(--sns-fs-14)} (=14px after the restore) can't reintroduce zoom. checkbox/radio/range excluded so the known .fld checkbox styling stays intact. No input in SNS is >16px so the max(16px,1rem) floor changes nothing visible; it only prevents the zoom. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1rem) !important; } /* ============================================================================ iOS mobile-web polish (ios-mobileweb-polish) — WCAG/HIG 44pt tap targets. Touch-only (@media hover:none + pointer:coarse) so desktop pointer sizing is untouched. Visual chrome dimensions stay; only the hit area grows to 44pt. Does NOT touch the locked bottom-tab bar (.sbb-*) or the More sheet. ============================================================================ */ @media (hover: none) and (pointer: coarse) { /* Scoreticker rows: thin ticker stays thin, but each clickable row gets a full-height 44pt hit area by stretching to the (now 44px) ticker height. */ .scoreticker { height: 44px; } .scoreticker .ticker-track { height: 100%; align-items: stretch; } .scoreticker .ticker-track .tg { min-height: var(--sns-touch-target, 44px); align-self: stretch; } /* AP "TOP 25" / "FULL POLL" link + the Scores|Rankings page tabs. */ .ap-full, a.ap-full, .sn--c_aptop25 .ap-full, .sc-page-tab { min-height: var(--sns-touch-target, 44px); display: inline-flex; align-items: center; } /* /lineup matchup-switcher chevron: 34px visual, 44pt hit area. */ .ml-switcher-arrow { min-height: var(--sns-touch-target, 44px); min-width: var(--sns-touch-target, 44px); } /* Sidebar collapse / restore toggles (the "A" rail toggle). These are display:none below 880px; this only takes effect on coarse-pointer devices ≥881px (e.g. iPad landscape) where they are visible. */ .nav-collapse-btn { min-height: var(--sns-touch-target, 44px); } .sidebar-restore-btn { min-height: var(--sns-touch-target, 44px); min-width: 24px; } } /* ============================================================================ iOS top safe-area inset (ios-mobileweb-polish). SOURCE OF TRUTH for the TOP inset on iOS native: * NORMAL (in-flow, scrolling) page content is inset by the WKWebView via capacitor.config.ts -> ios.contentInset: 'always'. We deliberately do NOT add a top padding to /.app/.content for normal pages, because that would DOUBLE-inset against contentInset. * FIXED / STICKY chrome escapes contentInset (it anchors to the layout viewport, not the scroll view), so those elements — and only those — honor env(safe-area-inset-top). Existing examples: #hm-banner and .sb-filterbar. The mobile drawer sidebar below is the remaining one. env(safe-area-inset-top) is 0 on the web / non-notched devices, so this is a no-op everywhere there is no inset (no desktop/web regression). ============================================================================ */ @media (max-width: 880px) { /* The mobile sidebar is position:fixed; top:0 — it slides over content and escapes contentInset, so its brand/nav would sit under the notch in the native shell. Pad its top by the status-bar inset (added to its existing 28px), so the brand clears the notch when the drawer is open. */ .sidebar { padding-top: calc(28px + env(safe-area-inset-top, 0px)); } } /* ════════════════════════════════════════════════════════════════════════ SAFE-AREA CONSUMPTION UTILITIES (single contract; tokens in tokens.css) ----------------------------------------------------------------------- Every edge-anchored element consumes ONE of these instead of hand-rolling its own px offset. Each is idempotent: it reads a local baseline custom prop (--_pb/--_pt/--_pl/--_pr) so an element can keep its own padding AND clear the inset — set e.g. `--_pb: 16px` on the element, add `.safe-pb`, and it resolves to max(16px, inset). env()=0 off-notch, so all degrade to baseline. .safe-pb overlays ABOVE the tab bar — clear ONLY the home indicator .safe-pb-nav content UNDER the fixed tab bar — clear bar + home indicator .safe-top fixed top:0 elements — drop below the status bar .safe-pt padded top — clear the status bar (keeps baseline) .safe-px side padding — clear landscape notch/curved edges ════════════════════════════════════════════════════════════════════════ */ .safe-pb { padding-bottom: max(var(--_pb,0px), var(--sns-safe-bottom)); } .safe-pb-nav{ padding-bottom: calc(var(--_pb,0px) + var(--sns-safe-bottom-nav)); } .safe-top { top: var(--sns-safe-top); } .safe-pt { padding-top: max(var(--_pt,0px), var(--sns-safe-top)); } .safe-px { padding-left: max(var(--_pl,0px), var(--sns-safe-left)); padding-right: max(var(--_pr,0px), var(--sns-safe-right)); } /* Standalone/PWA web (Add-to-Home) has NO native contentInset, so its top content sits under the status bar. The native shell already insets the top itself — native-early.js stamps html.cap-native, so guard it out here to avoid a double inset. */ @media (display-mode: standalone) { html:not(.cap-native) body > .app, html:not(.cap-native) .content { padding-top: var(--sns-safe-top); } } /* ── Toasts: single source of truth for bottom clearance ────────────────── All 13 toast variants hard-coded bottom:24/48/80/84px and rendered UNDER the fixed tab bar (+home indicator) on notched phones. Normalise every toast to clear the bar+inset from ONE rule. `bottom` only affects position:fixed toasts (the notifications-page static .toast is unaffected). !important is required to beat the route-scoped (html[data-route] .d-toast/.ht-toast) rules and the JS-set inline #bw-toast, all of which load after core.css. */ .sns-toast, .toast, .ht-toast, .d-toast, .mkt-toast, .ss-toast, #bw-toast { bottom: calc(var(--sns-safe-bottom-nav) + 8px) !important; } /* ── Sunlight legibility (2026-06-25): brighter INACTIVE bottom-tab labels/icons. .bb-lbl + the tab svg inherit currentColor from the ; the active tab is red (aria-current / .is-active) and is left untouched. Higher specificity + !important beats chrome.js's injected .bottombar a rule regardless of inject order. */ [class*="bottombar"] a:not([aria-current]):not(.is-active) { color: #C2C2C2 !important; } /* ════════════════════════════════════════════════════════════════════════ Sitewide skeleton-first-paint helper — skeleton-default (2026-06-30) Defined OUTSIDE any html[data-route] scope so it applies to all routes. Adopted by: /standings, /matchups, /league (home), /players, /scores. Existing route-scoped skeleton rules (nil-shimmer, news-shimmer, etc.) are UNTOUCHED — this is strictly additive. ════════════════════════════════════════════════════════════════════════ */ @keyframes sns-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .sns-skeleton { background: linear-gradient(90deg, var(--black-soft, #111) 25%, rgba(255,255,255,.07) 50%, var(--black-soft, #111) 75%); background-size: 200% 100%; animation: sns-shimmer 1.6s ease-in-out infinite; border-radius: 6px; pointer-events: none; } .sns-skeleton-line { height: 16px; margin-bottom: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--black-soft, #111) 25%, rgba(255,255,255,.07) 50%, var(--black-soft, #111) 75%); background-size: 200% 100%; animation: sns-shimmer 1.6s ease-in-out infinite; } .sns-skeleton-block { height: 120px; border-radius: 8px; background: linear-gradient(90deg, var(--black-soft, #111) 25%, rgba(255,255,255,.07) 50%, var(--black-soft, #111) 75%); background-size: 200% 100%; animation: sns-shimmer 1.6s ease-in-out infinite; } .sns-skeleton-card { min-height: 160px; border-radius: 10px; border: 1px solid var(--gray-border, #2A2A2A); background: linear-gradient(90deg, var(--black-soft, #111) 25%, rgba(255,255,255,.07) 50%, var(--black-soft, #111) 75%); background-size: 200% 100%; animation: sns-shimmer 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .sns-skeleton, .sns-skeleton-line, .sns-skeleton-block, .sns-skeleton-card { animation: none; background: var(--black-soft, #111); } } /* ────── GLOBAL EMPTY-STATE CTA HELPERS (feel-wave: empty-states) ───────── Sitewide .empty-cta + .empty-cta--ghost, promoted from trade/trade.css. trade/trade.css continues to define .empty-cta locally; that route-local rule loads after components.css on /trade so cascade is unchanged — both definitions share the same visual spec (red-primary fill, min-height 44px). .empty-cta — primary (red-filled) next-action call to action. .empty-cta--ghost — secondary (outlined) call to action. ──────────────────────────────────────────────────────────────────────── */ .empty-cta { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; min-height: 44px; border-radius: 8px; font-family: var(--f-display, "Graduate", serif); font-size: 14px; letter-spacing: .1em; background: var(--red-primary, #FF1A1A); color: #fff; border: none; cursor: pointer; text-decoration: none; transition: background .15s; margin-top: 16px; } .empty-cta:hover { background: var(--red-bright, #ff4444); } .empty-cta:focus-visible { outline: 2px solid var(--red-primary, #FF1A1A); outline-offset: 3px; } .empty-cta--ghost { background: transparent; border: 2px solid var(--red-primary, #FF1A1A); color: var(--red-primary, #FF1A1A); } .empty-cta--ghost:hover { background: rgba(255,26,26,.08); } @media (prefers-reduced-motion: reduce) { .empty-cta { transition: none; } } @layer components { :root{--red-primary: #FF1A1A;--red-bright: #FF3B30;--red-crimson: #8B0000;--red-glow: #FF2D2D;--orange-accent: #FF6A00;--gold-accent: #FF2D2D;--black-pure: #000000;--black-bg: #050505;--black-card: #0A0A0A;--black-soft: #111111;--gray-border: #2A2A2A;--gray-light: var(--gray-light,#C2C2C2);--white-bright: #F5F5F5;--bg-page: var(--black-bg);--bg-surface: var(--black-card);--bg-surface-2: var(--black-soft);--bg-surface-3: #1A1A1A;--border-accent: var(--red-primary);--border-accent-2: var(--red-bright);--text-primary: var(--white-bright);--text-muted: var(--gray-light);--text-faint: #5E626E;--hairline: rgba(255,255,255,.06);--hairline-2: rgba(255,255,255,.1);--gold-medal: #FF2D2D;--silver-medal: #CFD2D6;--bronze-medal: #C7884A;--f-display: "Graduate", "Oswald", "Anton", sans-serif;--f-body: "Inter", system-ui, sans-serif;--f-numeral: "JetBrains Mono", ui-monospace, monospace;--f-mono: "JetBrains Mono", ui-monospace, monospace;--sidebar-w: 250px;--row-gap: 24px;--col-gap: 16px;--card-pad: 20px}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--black-bg);color:var(--white-bright);font-family:var(--f-body);font-size:16px}html{color-scheme:dark}body{min-height:100vh;min-height:100dvh}a{color:inherit;text-decoration:none}button:not(.btn){font:inherit;color:inherit;background:none;border:0;cursor:pointer}button.btn{font:inherit;cursor:pointer}img{display:block;max-width:100%}.skip{position:absolute;top:-100px;left:0;padding:8px 16px;background:var(--red-primary);color:#fff;z-index:100}.skip:focus{top:0}.numeral-accent{color:#FFFFFF!important;font-family:var(--f-display)}.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh;min-height:100dvh}.content{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:min-content;gap:var(--row-gap);padding:0 24px 32px;min-width:0}.sidebar{background:var(--black-pure);border-right:1px solid var(--red-primary);box-shadow:4px 0 16px #ff000040;padding:28px 18px 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.nav-brand{display:flex;align-items:center;justify-content:center;border-radius:10px;filter:brightness(1.3) saturate(1.4) drop-shadow(0 0 8px rgba(255,0,0,.4));padding:6px;height:64px;margin-bottom:8px;flex:0 0 auto}.nav-brand img{width:100%;height:100%;object-fit:contain}.nav-list{display:flex;flex-direction:column;gap:22px;padding:18px 0 0;flex:1 1 auto;overflow-y:auto;min-height:0}.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;font-family:var(--f-display);font-weight:400;font-size:17px;letter-spacing:1px;line-height:1.3;text-transform:uppercase;color:var(--gray-light);border-radius:8px;background:transparent;transition:color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .15s ease}.nav-item .nav-ic{width:16px;height:16px;display:inline-block;background:currentColor;-webkit-mask:var(--ic, none) center/contain no-repeat;mask:var(--ic, none) center/contain no-repeat;flex:0 0 16px}.nav-item .ic-home{--ic: url("data:image/svg+xml;utf8,")}.nav-item .ic-trophy{--ic: url("data:image/svg+xml;utf8,")}.nav-item .ic-tree{--ic: url("data:image/svg+xml;utf8,")}.nav-item .ic-users{--ic: url("data:image/svg+xml;utf8,")}.nav-item .ic-star{--ic: url("data:image/svg+xml;utf8,")}.nav-item .ic-feed{--ic: url("data:image/svg+xml;utf8,")}.nav-item .ic-dice{--ic: url("data:image/svg+xml;utf8,")}.nav-item:hover,.nav-item:focus-visible{background:#ff1a1a1a;color:var(--white-bright);outline:none;transform:scale(1.02)}.nav-item:active{transform:scale(.98)}.nav-item.is-active{background:var(--red-primary);color:var(--white-bright);box-shadow:inset 0 0 12px #ff50508c,0 0 10px #ff000059}.nav-new{margin-left:auto;padding:2px 6px;font-size:16px;font-family:var(--f-display);letter-spacing:.12em;background:var(--red-primary);color:#fff;border-radius:3px}.nav-bottom{display:flex;flex-direction:column;gap:8px;padding:12px 0 16px;border-top:1px solid rgba(255,26,26,.18);margin-top:8px}.nav-user{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--black-soft);border:1px solid rgba(255,26,26,.25);border-radius:10px;transition:border-color .2s ease,transform .15s ease}.nav-user:hover{border-color:var(--red-primary);transform:scale(1.02)}.nav-user:active{transform:scale(.98)}.nu-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--red-primary),var(--orange-accent));flex:0 0 28px;box-shadow:0 0 0 2px var(--black-card)}.nu-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1;gap:3px;min-width:0}.nu-hi{font-size:16px;color:var(--gray-light);white-space:nowrap}.nu-pro{font-family:var(--f-display);font-size:16px;background:var(--red-primary);color:#fff;padding:1px 5px;border-radius:3px;letter-spacing:.14em}.nav-iconrow{display:flex;flex-direction:row;gap:12px;align-items:center}.nav-icbtn{display:inline-flex;align-items:center;justify-content:center;flex:1;height:34px;background:var(--black-soft);border:1px solid var(--hairline);border-radius:8px;color:var(--gray-light);transition:color .2s ease,border-color .2s ease,transform .15s ease,box-shadow .2s ease}.nav-icbtn:hover{color:var(--white-bright);border-color:var(--red-primary);transform:scale(1.05);box-shadow:0 0 10px #ff000059}.nav-icbtn:active{transform:scale(.95)}.ic-srch,.ic-bell{width:16px;height:16px;display:inline-block;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}.ic-srch{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}.ic-bell{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}.hero{position:relative;height:240px;border-radius:12px;overflow:hidden;margin-top:24px;border:1px solid rgba(255,0,0,.4);box-shadow:0 0 14px #f003}.hero-bg{position:absolute;inset:0;overflow:hidden}.hero-stadium{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(1.4) brightness(1.15) contrast(1.05);transform:translateY(0);will-change:transform}.hero-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center 40%,transparent 30%,rgba(5,5,5,.3) 75%,rgba(5,5,5,.55) 100%),linear-gradient(180deg,#0505051a,#0505054d);pointer-events:none}.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,transparent 60%,var(--black-bg) 100%);pointer-events:none}.hero-wordmark{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:240px;height:auto;object-fit:contain;filter:brightness(1.3) saturate(1.4) drop-shadow(0 0 8px rgba(255,0,0,.4)) drop-shadow(0 6px 20px rgba(0,0,0,.7));z-index:2}@keyframes hero-in{0%{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}@keyframes hero-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.hero-stadium{animation:hero-in 1.2s cubic-bezier(.32,.72,0,1) both}@media(prefers-reduced-motion:reduce){.hero-stadium{animation:none}}.scoreticker{background:var(--black-bg);border:2px solid var(--red-primary);box-shadow:0 0 8px #ff000080;border-radius:6px;height:44px;overflow:hidden;display:flex;align-items:center}.ticker-track{position:relative;width:100%;height:100%;display:flex;align-items:center;padding:0;white-space:nowrap;overflow:hidden}.ticker-inner{display:inline-flex;align-items:center;gap:14px;padding:0 14px;flex:0 0 auto;will-change:transform}.t-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:16px;color:var(--red-bright);letter-spacing:.12em;padding:4px 8px;background:#ff1a1a26;border:1px solid rgba(255,26,26,.5);border-radius:4px;flex:0 0 auto}.t-dot{width:6px;height:6px;border-radius:50%;background:var(--red-bright);animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1;box-shadow:0 0 8px var(--red-bright)}}.ticker-track .tg{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;font-family:var(--f-mono);font-size:16px;font-weight:500;color:var(--white-bright);border-radius:4px;white-space:nowrap;flex:0 0 auto}.tg-eyebrow{font-family:var(--f-display);letter-spacing:.14em;color:#FFFFFF;font-size:16px}.tg-team{display:inline-flex;align-items:center;gap:4px}.tg-team .tg-sc{color:#FFFFFF;margin-left:4px;font-family:var(--f-display);font-weight:700;font-size:16px}.tg-vs{color:var(--text-faint)}.tg-meta{color:var(--gray-light);font-size:16px;padding-left:4px}.tg-meta.tg-live{color:var(--red-bright)}.tg-final .tg-meta{color:var(--gray-light)}.tg-all{color:var(--red-bright)}.tg-all .t-arrow{margin-left:4px}.tg:hover{background:#ff1a1a14}img.ticker-logo{width:24px;height:24px;object-fit:contain;vertical-align:middle;margin-right:6px;border-radius:50%;background:#ffffff08;flex:0 0 24px}.row{display:grid;gap:var(--col-gap);align-items:stretch;grid-auto-rows:1fr}.row-news-rankings{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.row-fantasy-heisman{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.row-scoreboard-other{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}.card{background:linear-gradient(180deg,#0d0d0d,#050505);border:1px solid rgba(255,0,0,.6);border-radius:10px;box-shadow:0 0 12px #ff000040,inset 0 0 6px #ff000014;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;padding:var(--card-pad);display:flex;flex-direction:column;min-width:0}.card:hover{transform:translateY(-2px);border-color:var(--red-bright);box-shadow:0 0 18px #ff000073,inset 0 0 8px #ff00001f}.card-head{display:flex;align-items:center;gap:10px;padding:0 0 14px;position:relative;flex:0 0 auto}.card-eyebrow{font-family:var(--f-mono);font-size:16px;color:#FFFFFF;letter-spacing:.14em;padding:2px 6px;border:1px solid rgba(255,45,45,.35);border-radius:3px}.card-title{font-family:var(--f-display);font-size:26px;letter-spacing:.04em;margin:0;color:var(--white-bright);font-weight:400;line-height:1.1;min-width:min-content}.card-link{margin-left:auto;font-family:var(--f-body);font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red-bright);padding:4px 6px;transition:color .2s ease,transform .15s ease}.card-link:hover{color:var(--white-bright);transform:scale(1.03)}.card-link:active{transform:scale(.97)}.card-link .arrow{transition:transform .2s;display:inline-block}.card-link:hover .arrow{transform:translate(3px)}.sn--c_myleague{background:linear-gradient(135deg,#0d0d0d,#050505,#0d0d0d);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:center;padding:24px 28px;position:relative;overflow:hidden}.ml-text{display:flex;flex-direction:column;position:relative;z-index:2;min-width:0}.ml-text .card-eyebrow{align-self:flex-start;margin-bottom:10px}.ml-text .card-title{font-family:var(--f-display);font-size:36px;letter-spacing:.04em;line-height:1.05;color:var(--white-bright);margin:0 0 4px}.ml-sub{font-size:16px;color:var(--gray-light);margin:0 0 16px}.ml-sub .dot{color:var(--orange-accent);padding:0 6px}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0;padding:0;list-style:none;position:relative;z-index:1}.stat-row li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:#00000073;border:1px solid var(--hairline-2);border-radius:6px;backdrop-filter:blur(2px)}.st-lbl{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);letter-spacing:.12em}.st-val{font-family:var(--f-display);font-size:22px;font-weight:400;color:#FFFFFF;letter-spacing:.04em}.ml-helmet-wrap{position:absolute;right:2%;top:50%;transform:translateY(-50%);width:38%;height:92%;min-height:180px;max-width:300px;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:.92;z-index:0}.helmet-halo{position:absolute;inset:0;background:radial-gradient(circle at 60% 50%,rgba(255,26,26,.4) 0%,transparent 55%);filter:blur(8px);pointer-events:none}.ml-helmet{position:relative;z-index:1;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;filter:brightness(1.3) saturate(1.4) drop-shadow(0 0 8px rgba(255,0,0,.4)) drop-shadow(0 8px 22px rgba(0,0,0,.6))}.ml-actions{display:flex;gap:10px;margin-top:18px;position:relative;z-index:2}.ap-list{list-style:none;margin:0;padding:0;flex:1 1 auto;display:flex;flex-direction:column}.ap-row{display:grid;grid-template-columns:28px 28px 1fr auto auto;gap:10px;align-items:center;padding:10px 4px;border-radius:6px;font-size:16px;transition:background .2s ease,transform .15s ease}.ap-row+.ap-row{border-top:1px solid var(--hairline)}.ap-row:hover{background:#ff1a1a14;transform:translate(2px)}.ap-rank{font-family:var(--f-display);font-weight:400;font-size:20px;color:#FFFFFF;letter-spacing:.04em}.ap-team{font-family:var(--f-body);font-weight:600;font-size:16px;letter-spacing:.04em;color:var(--white-bright)}.ap-rec{font-family:var(--f-mono);font-size:16px;color:var(--gray-light)}.ap-mv{font-family:var(--f-mono);font-size:16px;font-weight:700;min-width:22px;text-align:right}.ap-mv.mv-up{color:#5ad07a}.ap-mv.mv-dn{color:var(--red-bright)}.news-list{list-style:none;margin:0;padding:0;flex:1 1 auto;display:flex;flex-direction:column}.news-row{display:grid;grid-template-columns:56px 1fr 50px;gap:12px;align-items:center;padding:11px 4px;border-radius:6px;transition:background .2s ease,transform .15s ease}.news-row+.news-row{border-top:1px solid var(--hairline)}.news-row:hover{background:#ff1a1a14;transform:translate(2px)}.news-thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;flex-shrink:0;background:var(--bg-surface-3);border:1px solid var(--hairline-2)}.news-body{display:flex;flex-direction:column;gap:4px;min-width:0}.news-cat{font-family:var(--f-mono);font-size:16px;font-weight:700;padding:2px 5px;border-radius:3px;letter-spacing:.1em;align-self:flex-start}.news-cat.pill-cb{background:#ff6a0026;color:var(--orange-accent);border:1px solid rgba(255,106,0,.45)}.news-cat.pill-general{background:var(--bg-surface-3);color:var(--gray-light);border:1px solid var(--hairline-2)}.news-cat.pill-hq{background:#ff1a1a2e;color:var(--red-bright);border:1px solid rgba(255,26,26,.45)}.news-title{font-size:16px;color:var(--white-bright);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.news-time{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);text-align:right;align-self:center}.sn--c_scoreboard .sb-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:150px;position:relative}.sb-viewport{overflow:hidden;position:relative;min-height:110px}.sb-track{display:flex;transition:transform .35s cubic-bezier(.32,.72,0,1);will-change:transform}.sb-match{flex:0 0 100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:6px 0;min-width:0}.sb-team{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:10px;row-gap:2px;align-items:center;padding:10px 12px;border-radius:8px;min-width:0}.sb-team:hover{background:#ff1a1a14}.sb-helmet{grid-row:1 / 4;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle,var(--bg-surface-3),var(--black-card));border:1px solid var(--hairline-2)}.sb-team-name{font-family:var(--f-display);font-size:20px;letter-spacing:.04em;color:var(--white-bright);grid-column:2;white-space:nowrap;overflow:visible;min-width:0}.sb-team-rec{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);grid-column:2;white-space:nowrap}.sb-team-score{font-family:var(--f-display);font-size:40px;font-weight:400;color:#FFFFFF;grid-row:1 / 4;grid-column:3;letter-spacing:.02em}.sb-vs{font-family:var(--f-mono);font-size:16px;color:var(--text-faint);letter-spacing:.2em}.sb-pagination{display:flex;align-items:center;gap:6px;padding:4px 0 0}.sb-pagination .dot{width:8px;height:8px;border-radius:50%;background:var(--hairline-2);cursor:pointer;transition:background .2s ease,width .2s ease,transform .15s ease;border:0;padding:0}.sb-pagination .dot:hover{background:#ff1a1a80;transform:scale(1.2)}.sb-pagination .dot.active{background:var(--red-primary);width:22px;border-radius:4px}.sb-status{margin-left:auto;font-family:var(--f-mono);font-size:16px;color:var(--gray-light);letter-spacing:.12em}.og-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;flex:1 1 auto;align-content:stretch;min-width:0}.tile-bento,.og-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--black-soft);border:1px solid var(--hairline-2);border-radius:8px;padding:16px;min-height:200px;transition:border-color .2s ease,background .2s ease,transform .15s ease,box-shadow .2s ease}.tile-bento:hover,.og-tile:hover{border-color:var(--red-primary);background:linear-gradient(135deg,var(--black-soft),rgba(255,26,26,.08));transform:translateY(-2px);box-shadow:0 0 14px #ff000059}.tile-bento:active,.og-tile:active{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.tile-bento{transition:none}.tile-bento:hover,.tile-bento:active{transform:none}}.og-meta{display:flex;flex-direction:column;gap:2px;text-align:center}.og-name{font-family:var(--f-display);font-size:16px;letter-spacing:.06em;color:var(--white-bright)}.og-sub{font-size:16px;color:var(--gray-light)}.og-new{margin-left:auto;background:var(--red-primary);color:#fff;font-family:var(--f-display);font-size:16px;padding:2px 7px;border-radius:3px;letter-spacing:.14em}.other-game-art{width:auto;max-width:100%;max-height:140px;height:auto;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,0,0,.35));transition:transform .2s ease,filter .2s ease}.other-game-art:hover{transform:scale(1.06);filter:drop-shadow(0 0 14px rgba(255,0,0,.55))}.perf-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;flex:1 1 auto;align-content:stretch;min-width:0}.perf-card{display:grid;grid-template-rows:auto auto auto auto auto;justify-items:center;gap:4px;padding:12px 6px;min-width:0;overflow:hidden;background:var(--black-soft);border:1px solid var(--hairline-2);border-radius:8px;text-align:center;cursor:pointer;transition:border-color .2s ease,transform .15s ease,box-shadow .2s ease}.perf-card:hover{border-color:var(--red-primary);transform:translateY(-2px);box-shadow:0 0 14px #ff000059}.perf-card:active{transform:translateY(0)}.perf-pos{font-family:var(--f-display);font-size:16px;padding:2px 6px;border-radius:3px;background:var(--bg-surface-3);color:var(--orange-accent);letter-spacing:.12em}.pos-qb{background:#ff1a1a2e;color:var(--red-bright)}.pos-rb{background:#ff6a002e;color:var(--orange-accent)}.pos-wr{background:#5aaadc26;color:#6aa9d7}.pos-te{background:#78c89624;color:#7fc89a}.pos-k{background:#b48cdc24;color:#b58cd6}.perf-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--bg-surface-3),var(--black-card));border:2px solid var(--hairline-2);margin-top:2px;object-fit:cover;object-position:center top}.perf-name{font-size:16px;font-weight:600;color:var(--white-bright);letter-spacing:.02em}.perf-school{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);letter-spacing:.08em}.perf-ppg{font-family:var(--f-display);font-size:22px;font-weight:400;color:#FFFFFF;margin-top:2px;letter-spacing:.02em}.perf-ppg .perf-unit{font-size:16px;color:var(--gray-light);font-family:var(--f-mono);letter-spacing:.12em}.perf-total{font-family:var(--f-mono);font-size:16px;color:var(--gray-light)}.hw-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:1 1 auto;align-content:stretch}.hw-card{display:grid;grid-template-columns:auto 44px minmax(0,1fr);grid-template-rows:auto auto auto;align-items:center;column-gap:8px;row-gap:2px;padding:12px 10px;background:linear-gradient(135deg,var(--black-soft) 0%,var(--black-card) 100%);border:1px solid var(--hairline-2);border-radius:10px;cursor:pointer;min-width:0;overflow:hidden;transition:border-color .2s ease,transform .15s ease,box-shadow .2s ease}.hw-card:hover{border-color:var(--red-primary);box-shadow:0 0 16px #ff000059;transform:translateY(-2px)}.hw-card:active{transform:translateY(0)}.hw-medal{grid-row:1 / 4;grid-column:1;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:18px;color:#1a1207;box-shadow:inset 0 -3px 6px #0000004d,0 0 0 2px var(--black-card)}.hw-gold{background:rgba(255,45,45,.12);border:1px solid rgba(255,45,45,.25);color:var(--text-primary,#F5F5F5)}.hw-silver{background:linear-gradient(180deg,#e8eaee,var(--silver-medal))}.hw-bronze{background:linear-gradient(180deg,#d49b6a,var(--bronze-medal));color:#1c0e06}.hw-avatar{grid-row:1 / 4;grid-column:2;width:44px;height:44px;background:linear-gradient(135deg,var(--bg-surface-3),var(--black-card));border:2px solid var(--hairline-2);border-radius:50%;object-fit:cover;object-position:center top}.hw-name{grid-row:1;grid-column:3;font-family:var(--f-body);font-weight:700;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--white-bright);letter-spacing:.02em}.hw-school{grid-row:2;grid-column:3;font-family:var(--f-mono);font-size:16px;color:var(--gray-light);letter-spacing:.08em}.hw-score{grid-row:3;grid-column:3;font-family:var(--f-display);font-size:22px;font-weight:400;color:#FFFFFF;letter-spacing:.02em}.hw-score .hw-unit{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);letter-spacing:.12em;display:block}img.slot-img.ap-logo{width:24px;height:24px;border-radius:50%;border:1px solid var(--hairline-2);background:var(--bg-surface-3);object-fit:contain}img.slot-img.sb-helmet{grid-row:1 / 4;width:36px;height:36px;border-radius:50%;border:1px solid var(--hairline-2);background:var(--bg-surface-3);object-fit:contain}img.slot-img.perf-avatar{width:48px;height:48px;border-radius:50%;border:2px solid var(--hairline-2);margin-top:2px;background:linear-gradient(135deg,var(--bg-surface-3),var(--black-card))}img.slot-img.hw-avatar{width:44px;height:44px;border-radius:50%;border:2px solid var(--hairline-2);background:linear-gradient(135deg,var(--bg-surface-3),var(--black-card))}.exp-body{overflow-y:auto;flex:1 1 auto;min-height:0;-webkit-overflow-scrolling:touch}.exp-top{display:flex;gap:22px;align-items:center}.exp-headshot{width:180px;height:180px;border-radius:50%;object-fit:cover;object-position:center top;border:3px solid var(--red-primary);box-shadow:0 0 20px #ff000080;background:var(--black-soft);flex:0 0 180px}.exp-headline{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 auto}.exp-name{font-family:var(--f-display);font-size:44px;letter-spacing:.04em;margin:0;color:var(--white-bright);line-height:1.05}.exp-meta{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);margin:0;letter-spacing:.08em;display:flex;align-items:center;flex-wrap:wrap;gap:10px}.exp-pos{display:inline-block;padding:3px 10px;border-radius:4px;background:#ff1a1a33;color:var(--red-bright);font-family:var(--f-display);letter-spacing:.12em;font-size:16px}.exp-school-logo{width:36px;height:36px;object-fit:contain;border-radius:50%;background:#ffffff0a;border:1px solid var(--hairline-2);padding:2px}.exp-school{font-family:var(--f-display);font-size:18px;color:var(--white-bright);letter-spacing:.06em}.exp-jersey{font-family:var(--f-mono);font-size:16px;color:var(--gray-light)}.exp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 0}.exp-stat{background:#ff1a1a0f;border:1px solid rgba(255,26,26,.3);border-radius:10px;padding:16px 12px;text-align:center}.exp-stat-label{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);letter-spacing:.14em;text-transform:uppercase}.exp-stat-val{font-family:var(--f-display);font-size:36px;font-weight:400;color:#FFFFFF;margin-top:6px;letter-spacing:.04em;line-height:1}.exp-actions{display:flex;gap:10px;margin-top:8px}.exp-watchlist{flex:1;padding:14px;background:linear-gradient(180deg,#ff2a2a,#c40000);border:1px solid #FF4D4D;border-radius:8px;color:#fff;font-family:var(--f-body);font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:transform .15s ease,filter .2s ease,box-shadow .2s ease}.exp-watchlist:hover{filter:brightness(1.1);transform:scale(1.02);box-shadow:0 6px 22px #f009}.exp-watchlist:active{transform:scale(.98)}@media(max-width:880px){.exp-top{flex-direction:column;align-items:center;text-align:center}.exp-headshot{width:140px;height:140px;flex:0 0 140px}.exp-name{font-size:32px;text-align:center}.exp-stat-val{font-size:28px}}.player-modal-overlay{position:fixed;inset:0;background:#000000bf;z-index:999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease}.player-modal-overlay.is-open{opacity:1;pointer-events:auto}.player-modal{background:linear-gradient(180deg,#0d0d0d,#050505);border:1px solid rgba(255,0,0,.7);border-radius:12px;box-shadow:0 0 24px #ff000073,0 12px 48px #000000b3;width:440px;max-width:92vw;max-height:90vh;padding:24px;position:relative;transform:scale(.94);transition:transform .2s cubic-bezier(.2,.8,.4,1);overflow-y:auto}.player-modal-overlay.is-open .player-modal{transform:scale(1)}.pm-close{position:absolute;top:12px;right:12px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#ff00001f;border:1px solid rgba(255,0,0,.4);border-radius:6px;color:var(--white-bright);cursor:pointer;font-size:18px;line-height:1}.pm-close:hover{background:#ff000059}@media(prefers-reduced-motion:no-preference){@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes ticker-scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.reveal{opacity:0;transform:translateY(20px);transition:opacity .4s cubic-bezier(.2,.8,.4,1),transform .4s cubic-bezier(.2,.8,.4,1)}.reveal.is-in{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.reveal{opacity:0;transition:opacity .3s ease;transform:none}.reveal.is-in{opacity:1}}.mob-nav-toggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.mob-nav-burger{display:none;position:fixed;top:12px;left:12px;z-index:60;width:44px;height:44px;align-items:center;justify-content:center;background:var(--black-soft);border:1px solid var(--red-primary);border-radius:8px;color:var(--white-bright);box-shadow:0 0 12px #ff00004d;cursor:pointer}.mob-nav-scrim{display:none;position:fixed;inset:0;background:#000000b3;z-index:55}@media(max-width:1100px){.row-news-rankings,.row-fantasy-heisman,.row-scoreboard-other{grid-template-columns:1fr 1fr}}@media(max-width:880px){:root{--row-gap: 16px;--col-gap: 12px;--card-pad: 12px}.app{grid-template-columns:1fr;max-width:100%}.content{padding:56px 12px 24px}.sidebar{position:fixed;top:0;left:0;height:100vh;width:240px;z-index:70;transform:translate(-100%);transition:transform .25s ease}#mob-nav-toggle:checked~.app .sidebar{transform:translate(0)}#mob-nav-toggle:checked~.mob-nav-scrim{display:block}.mob-nav-burger{display:inline-flex}.mob-nav-burger svg{transition:transform .2s ease}#mob-nav-toggle:checked~.mob-nav-burger svg{transform:rotate(90deg)}.hero{height:200px;margin-top:12px}.hero-wordmark{width:180px}.scoreticker{height:36px}.ticker-track .tg{font-size:16px;padding:4px 8px}.t-live{font-size:16px}img.ticker-logo{width:20px;height:20px;flex:0 0 20px}.row,.row-news-rankings,.row-fantasy-heisman,.row-scoreboard-other{grid-template-columns:1fr}.row{grid-auto-rows:auto}.sn--c_myleague{grid-template-columns:1fr;padding:16px}.ml-text .card-title{font-size:clamp(24px,7vw,32px)}.ml-helmet-wrap{width:55%;right:-30px}.ml-actions{flex-direction:column}.card-title{font-size:22px}.stat-row,.perf-row{grid-template-columns:repeat(2,1fr)}.hw-row{grid-template-columns:1fr}.og-row{grid-template-columns:repeat(2,1fr)}.og-tile{min-height:160px;padding:14px}.other-game-art{max-height:110px}.news-row{grid-template-columns:48px 1fr 50px;gap:10px}.news-thumb{width:48px;height:48px}}@media(max-width:600px){.perf-row{grid-template-columns:repeat(2,1fr)}.og-row{grid-template-columns:1fr}.og-tile{min-height:140px}.other-game-art{max-height:100px}.hero{height:180px}.card-title{font-size:20px}}@media(hover:none)and (pointer:coarse){.nav-item,.btn,.card-link,.news-row,.ap-row,.perf-card,.hw-card,.og-tile{min-height:44px}}@media print{body{background:#fff;color:#000}.card{border-color:#000}}.card-eyebrow,.tg-eyebrow{color:#FFFFFF}img.slot-img.perf-avatar,.perf-avatar{width:96px;height:96px;border-radius:50%;border:2px solid rgba(255,45,45,.35);background:linear-gradient(135deg,var(--bg-surface-3),var(--black-card));object-fit:cover;object-position:center top;-webkit-mask-image:radial-gradient(ellipse at center,black 55%,transparent 95%);mask-image:radial-gradient(ellipse at center,black 55%,transparent 95%);filter:drop-shadow(0 4px 12px rgba(255,26,26,.25));margin:4px auto 2px}.hw-card{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;justify-items:center;text-align:center;row-gap:4px;padding:16px 12px;position:relative}.hw-medal{grid-row:1;grid-column:1;position:absolute;top:10px;left:10px}img.slot-img.hw-avatar,.hw-avatar{grid-row:2;grid-column:1;width:96px;height:96px;border-radius:50%;border:2px solid rgba(255,45,45,.35);background:linear-gradient(135deg,var(--bg-surface-3),var(--black-card));object-fit:cover;object-position:center top;-webkit-mask-image:radial-gradient(ellipse at center,black 55%,transparent 95%);mask-image:radial-gradient(ellipse at center,black 55%,transparent 95%);filter:drop-shadow(0 4px 12px rgba(255,26,26,.25));margin:4px 0 2px}.hw-name{grid-row:3;grid-column:1}.hw-school{grid-row:4;grid-column:1}.hw-score{grid-row:5;grid-column:1}.card-title,h2.card-title{font-family:var(--f-display)!important;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;font-size:28px;line-height:1;color:#FFFFFF}.ml-text .card-title,.sn--c_myleague .card-title{font-family:var(--f-display)!important;font-size:44px;letter-spacing:1.5px;line-height:1;color:var(--white-bright)}@media(max-width:880px){img.slot-img.perf-avatar,.perf-avatar,img.slot-img.hw-avatar,.hw-avatar{width:72px;height:72px}.card-title,h2.card-title{font-size:22px}.ml-text .card-title,.sn--c_myleague .card-title{font-size:32px}}@media(max-width:600px){.card-title,h2.card-title{font-size:20px}}.app{grid-template-columns:250px minmax(0,1fr)}.sidebar{padding:28px 20px 0;overflow-x:visible}.nav-list{overflow-x:visible}.nav-item{font-size:18px;white-space:nowrap;overflow:visible;text-overflow:clip}.nav-lbl{white-space:nowrap;overflow:visible;text-overflow:clip;display:inline-block}.nav-item .nav-new{flex:0 0 auto}.nu-hi{white-space:nowrap;overflow:visible}.nav-brand{filter:brightness(1.3) saturate(1.4) drop-shadow(0 0 8px rgba(255,26,26,.55))}.nav-brand-text,.sns-brand-text{font-family:var(--f-display);color:#fff;letter-spacing:.05em;text-shadow:0 0 8px rgba(255,26,26,.5),0 2px 4px rgba(0,0,0,.8);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.hero-stadium{filter:saturate(1.25) contrast(1.15) brightness(1.05)}.hero:after{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:70%;height:60%;background:radial-gradient(ellipse at center,rgba(0,0,0,.5) 0%,transparent 60%);pointer-events:none;z-index:1}.hero-wordmark-text{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-family:var(--f-display);color:#fff;font-size:72px;font-weight:400;letter-spacing:.06em;line-height:1;text-align:center;text-shadow:0 0 20px rgba(255,26,26,.7),0 4px 12px rgba(0,0,0,.9);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;z-index:3;white-space:nowrap}.ml-helmet-wrap{opacity:1}.ml-helmet{animation:var(--sns-anim-float-helmet,float-helmet 4.5s ease-in-out infinite alternate);filter:drop-shadow(0 0 30px rgba(255,26,26,.55)) drop-shadow(0 0 60px rgba(255,26,26,.3)) drop-shadow(0 8px 22px rgba(0,0,0,.6));will-change:transform,filter}@keyframes float-helmet{0%{transform:translateY(0)}to{transform:translateY(-14px)}}@media(prefers-reduced-motion:reduce){.ml-helmet{animation:var(--sns-anim-float-helmet,float-helmet 4.5s ease-in-out infinite alternate)!important}}.ml-helmet-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;margin:0;cursor:pointer;pointer-events:auto;border-radius:14px;color:var(--text-primary)}.ml-helmet-btn .ml-helmet{pointer-events:none}.ml-helmet-caret{position:absolute;bottom:2%;left:50%;transform:translate(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#FFFFFF;background:#0000008c;border:1px solid var(--hairline-2);border-radius:999px;z-index:2;transition:transform .18s ease}.ml-helmet-btn[aria-expanded=true] .ml-helmet-caret{transform:translate(-50%) rotate(180deg)}.ml-helmet-initials{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);font-family:var(--f-display);font-size:clamp(20px,4.2vw,38px);font-weight:700;letter-spacing:.02em;color:#FFFFFF;text-shadow:0 2px 6px rgba(0,0,0,.85);z-index:2;pointer-events:none;max-width:70%;text-align:center;line-height:1}.ml-helmet-name{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--f-body);font-size:clamp(11px,1.4vw,14px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary);background:#0009;border:1px solid var(--hairline-2);border-radius:999px;padding:4px 12px;z-index:2}.ml-helmet-btn:hover .ml-helmet-caret,.ml-helmet-btn:focus-visible .ml-helmet-caret{background:#000c;border-color:var(--gold-bright)}.ml-helmet-btn:focus-visible{outline:3px solid var(--gold-bright);outline-offset:4px}.ml-helmet-btn:focus:not(:focus-visible){outline:none}.ml-league-menu{position:absolute;top:calc(100% - 8px);right:0;min-width:220px;max-width:280px;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:var(--bg-surface-3);border:1px solid var(--border-accent);border-radius:10px;box-shadow:0 12px 40px #000000b3;z-index:30;transform-origin:top right}.ml-league-menu[hidden]{display:none}@media(prefers-reduced-motion:no-preference){.ml-league-menu:not([hidden]){animation:ml-menu-in .14s ease-out}@keyframes ml-menu-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}}.ml-league-option{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--text-primary);font-family:var(--f-body);font-size:16px;font-weight:600;letter-spacing:.02em;user-select:none}.ml-league-option .ml-opt-badge{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#00000080;border:1px solid var(--hairline-2);font-family:var(--f-display);font-size:16px;font-weight:700;color:#FFFFFF}.ml-league-option .ml-opt-name{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-league-option .ml-opt-check{flex:0 0 auto;color:var(--white-bright, #F5F5F5);visibility:hidden}.ml-league-option[aria-selected=true] .ml-opt-check{visibility:visible}.ml-league-option[aria-selected=true]{background:#FF2D2D1a}.ml-league-option:hover,.ml-league-option.is-active{background:#ffffff14;outline:none}.ml-league-option.is-active{box-shadow:inset 0 0 0 2px var(--gold-bright)}.ml-helmet-static[hidden],.ml-helmet-wrap[hidden]{display:none}.ml-helmet-static .ml-helmet-initials{color:#FFFFFF}.sb-team-name{font-family:var(--f-body);font-size:19px;font-weight:600;letter-spacing:.02em;line-height:1.45}.sb-team-score{font-family:var(--f-display);font-size:26px;font-weight:400;color:#FFFFFF;letter-spacing:.02em;line-height:1.1}.sb-team-rec{font-size:16px;line-height:1.45}.sb-status{font-size:16px}.sb-team{padding:14px;row-gap:4px}.sn--c_scoreboard .sb-body{min-height:180px;gap:14px}.ap-row{padding:14px 6px;font-size:16px;line-height:1.45}.ap-rank{font-family:var(--f-display);font-size:28px;color:#FFFFFF;line-height:1}.ap-team{font-family:var(--f-body);font-weight:600;font-size:17px;letter-spacing:.02em;line-height:1.45}.ap-rec{font-family:var(--f-mono);font-size:16px;line-height:1.45}.ap-mv{font-size:16px}.news-row{padding:14px 6px;line-height:1.45}.news-title{font-family:var(--f-body);font-weight:600;font-size:17px;line-height:1.4;-webkit-line-clamp:2}.news-time{font-size:16px;line-height:1.45}.news-cat{font-size:16px}@media(max-width:880px){.hero-wordmark-text{font-size:40px}.sb-team-name{font-size:17px}.ap-team,.news-title{font-size:16px}}@media(max-width:600px){.hero-wordmark-text{font-size:32px}}@media(max-width:480px){.hero-wordmark-text{font-size:24px;letter-spacing:.04em}}@media(max-width:360px){.hero-wordmark-text{font-size:20px;letter-spacing:.03em}}.hero-logo{display:block;max-width:min(360px,32%);max-height:90%;width:auto;height:auto;object-fit:contain;position:static;transform:none}@media(max-width:1100px){.hero-logo{max-width:min(240px,30%)}}@media(max-width:880px){.hero-logo{max-width:38vw;max-height:85%}}@media(max-width:600px){.hero-logo{max-width:44vw}}@media(max-width:480px){.hero-logo{max-width:50vw}}@media(max-width:360px){.hero-logo{max-width:58vw}}.hero-wordmark-text{display:none!important}.exp-stats-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 0}.exp-stats-4 .exp-stat{background:#ff1a1a0f;border:1px solid rgba(255,26,26,.3);border-radius:10px;padding:14px 10px;text-align:center}.exp-stats-4 .exp-stat-label{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);letter-spacing:.14em;text-transform:uppercase}.exp-stats-4 .exp-stat-val{font-family:var(--f-display);font-size:34px;font-weight:400;color:var(--white-bright);margin-top:6px;letter-spacing:.03em;line-height:1}.exp-stats-4 .exp-stat-val.is-gold{color:#FFFFFF}.exp-stats-4 .exp-stat-val.is-small{font-size:24px}.exp-form{font-family:var(--f-mono);color:var(--gray-light);font-size:16px;letter-spacing:.04em;padding:6px 4px 2px}.exp-form .lbl{color:var(--text-faint);margin-right:8px;letter-spacing:.12em;text-transform:uppercase;font-size:16px}.exp-form .vals{color:var(--white-bright)}.exp-actions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:4px}.exp-btn{min-height:44px;padding:10px 12px;background:#ff1a1a14;border:1px solid rgba(255,26,26,.55);border-radius:8px;color:var(--white-bright);font-family:var(--f-body);font-size:16px;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:background .15s ease,transform .12s ease,border-color .15s ease,color .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px}.exp-btn:hover{background:#ff1a1a59;transform:translateY(-1px)}.exp-btn:active{transform:translateY(0)}.exp-btn[disabled]{opacity:.5;cursor:not-allowed}.exp-btn.is-active{background:linear-gradient(180deg,#ff2a2a,#c40000);border-color:#ff4d4d;color:#fff}.exp-btn-fav.is-active{background:#d4a72a2e;border-color:#FFFFFF;color:#FFFFFF}.sns-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%) translateY(10px);background:linear-gradient(180deg,#181818,#0a0a0a);border:1px solid var(--red-primary);color:var(--white-bright);font-family:var(--f-body);font-size:16px;font-weight:500;padding:12px 18px;border-radius:8px;box-shadow:0 6px 24px #ff000059,0 4px 14px #0009;z-index:1100;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;letter-spacing:.02em}.sns-toast.is-on{opacity:1;transform:translate(-50%) translateY(0)}.exp-top-team .exp-headshot{width:96px;height:96px;flex:0 0 96px;background:var(--black-soft);border-radius:14px;object-fit:contain;padding:6px}.exp-top-team .exp-name{font-size:30px}.exp-top-team .exp-meta{font-size:16px}.exp-conf{color:var(--gray-light);font-family:var(--f-mono);font-size:16px;letter-spacing:.06em}.exp-team-logo-fallback{width:96px;height:96px;flex:0 0 96px;background:linear-gradient(135deg,#2a0a0a,#0a0a0a);border:2px solid var(--red-primary);border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:32px;color:#FFFFFF;letter-spacing:.04em}.exp-actions-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px}.exp-game{display:flex;flex-direction:column;gap:18px}.exp-game-teams{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}.exp-game-team{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.exp-game-helmet{width:64px;height:64px;object-fit:contain;background:#ffffff08;border-radius:10px;padding:4px}.exp-game-helmet-fallback{width:64px;height:64px;flex:0 0 64px;background:linear-gradient(135deg,#2a0a0a,#0a0a0a);border:2px solid var(--red-primary);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:22px;color:#FFFFFF;letter-spacing:.04em}.exp-game-tname{font-family:var(--f-display);font-size:16px;letter-spacing:.08em;color:var(--white-bright);line-height:1.1;word-break:break-word}.exp-game-score{font-family:var(--f-display);font-size:2.4rem;font-weight:400;color:var(--white-bright);letter-spacing:.02em;line-height:1}.exp-game-score.is-winning{color:#FFFFFF}.exp-game-divider{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 8px}.exp-game-status{font-family:var(--f-mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-light);opacity:.85}.exp-game-vs{font-family:var(--f-display);font-size:22px;color:var(--text-faint);letter-spacing:.08em}.exp-game-venue{font-family:var(--f-mono);font-size:16px;color:var(--gray-light);opacity:.6;text-align:center;letter-spacing:.06em;text-transform:uppercase}.exp-game-cta{display:block;width:100%;padding:13px 20px;background:#FF2D2D14;border:1px solid var(--accent, #FF2D2D);border-radius:8px;color:#FFFFFF;font-family:var(--f-display);font-size:18px;letter-spacing:.12em;text-align:center;text-decoration:none;cursor:pointer;transition:background .15s ease,transform .12s ease,box-shadow .15s ease;box-sizing:border-box}.exp-game-cta:hover{background:#FF2D2D2e;transform:translateY(-1px);box-shadow:0 4px 18px #FF2D2D40}.exp-game-cta:active{transform:translateY(0)}@media(max-width:880px){.exp-stats-4,.exp-actions-grid{grid-template-columns:repeat(2,1fr)}.exp-stats-4 .exp-stat-val{font-size:28px}}@media(max-width:880px){.app{grid-template-columns:1fr}.content{padding:56px 12px 24px}.card,section.row,article.card{width:100%;max-width:100%;box-sizing:border-box}.row,.row-news-rankings,.row-fantasy-heisman,.row-scoreboard-other,.row-league{grid-template-columns:1fr;width:100%;max-width:100%}.ml-helmet-wrap{width:45%;right:-20px;opacity:.6}}@media(max-width:600px){.content{padding:56px 12px 18px}.ml-helmet-wrap{display:none}.perf-row{grid-template-columns:repeat(2,1fr)}.hw-row,.og-row{grid-template-columns:1fr}.stat-row{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.content{padding:56px 10px 16px}.perf-row{grid-template-columns:1fr}.hw-card,.perf-card{width:100%}}@media(max-width:360px){.content{padding:56px 8px 16px}.card-title{font-size:18px}}.hero-logo{filter:drop-shadow(0 0 24px rgba(255,26,26,.4))}.nav-brand img,.sns-brand-img{filter:drop-shadow(0 0 12px rgba(255,26,26,.4))}.nav-item .ic-tv{--ic: url("data:image/svg+xml;utf8,")}.nav-item .ic-user-square{--ic: url("data:image/svg+xml;utf8,")}.nav-item .ic-list-ordered{--ic: url("data:image/svg+xml;utf8,")}.nav-item .ic-newspaper{--ic: url("data:image/svg+xml;utf8,")}.nav-item .ic-gamepad{--ic: url("data:image/svg+xml;utf8,")}.nav-item .ic-more{--ic: url("data:image/svg+xml;utf8,")}.nav-chev{margin-left:auto;width:14px;height:14px;display:inline-block;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .2s ease;flex:0 0 14px}.nav-more[aria-expanded=true] .nav-chev{transform:rotate(180deg)}.nav-divider{border:0;height:1px;background:var(--gray-border, #2A2A2A);margin:6px 4px 2px;opacity:.85}.nav-more{appearance:none;-webkit-appearance:none;width:100%;border:0;cursor:pointer;text-align:left;font:inherit}.nav-more-list{display:flex;flex-direction:column;gap:14px;padding:6px 0 2px;margin-left:8px;border-left:2px solid var(--red-primary)}.nav-more-list[hidden]{display:none}.nav-item.nav-sub{padding-left:18px;font-size:16px;white-space:nowrap;overflow:visible}.nav-item:hover .nav-ic,.nav-item:hover .nav-chev{color:#FFFFFF}.nav-item.is-active .nav-ic,.nav-item.is-active .nav-chev{color:var(--white-bright)}.nav-list,.nav-more-list{overflow-x:visible}.nav-lbl{white-space:nowrap}.nav-more:hover{background:#ff1a1a1a;color:var(--white-bright)}.nav-more:focus-visible{outline:2px solid var(--accent, #FF2D2D);outline-offset:2px}@media(max-width:880px){.nav-more-list{gap:18px}.nav-item.nav-sub{font-size:16px;padding-left:20px}}.nav-list{overflow-x:hidden}.nav-item.nav-sub{font-size:16px;padding-left:14px;padding-right:6px}.nav-item.nav-sub .nav-lbl{font-size:16px;letter-spacing:.6px}.nav-more-list{margin-left:6px}.nav-item.nav-sub .nav-new{font-size:16px;padding:1px 4px}.sidebar{border:1px solid var(--red-primary);box-shadow:0 0 20px #ff000047,inset 0 0 6px #ff00000f;overflow:hidden}body{display:flex;flex-direction:column;align-items:stretch}.app{width:100%}.app{transition:grid-template-columns .28s cubic-bezier(.4,0,.2,1)}.app.sidebar-collapsed{grid-template-columns:0px minmax(0,1fr)!important}.sidebar{min-width:0;transition:min-width .28s cubic-bezier(.4,0,.2,1),opacity .2s ease,padding .25s ease,border .25s ease}.app.sidebar-collapsed .sidebar{min-width:0!important;opacity:0;padding:0!important;border-width:0!important;pointer-events:none}.nav-collapse-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:30px;background:transparent;border:1px solid var(--hairline, #2a2a2a);border-radius:6px;color:var(--gray-mid, #666);cursor:pointer;font-family:var(--f-body, "Inter", sans-serif);font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:6px 0 8px;flex-shrink:0;transition:color .2s ease,border-color .2s ease,background .2s ease}.nav-collapse-btn:hover{color:var(--white-bright, #fff);border-color:var(--red-primary, #FF1A1A);background:#ff1a1a14}.nc-chev{width:12px;height:12px;flex-shrink:0;display:inline-block;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .28s cubic-bezier(.4,0,.2,1)}.nav-collapse-btn.is-collapsed .nc-chev{transform:rotate(180deg)}.nc-lbl{font-size:16px;letter-spacing:.14em}.sidebar-restore-btn{display:none;position:fixed;top:50%;left:0;transform:translateY(-50%);z-index:90;width:18px;height:52px;background:var(--red-primary, #FF1A1A);border:1px solid var(--red-bright, #FF3B30);border-left:none;border-radius:0 6px 6px 0;cursor:pointer;align-items:center;justify-content:center;transition:background .2s ease,width .15s ease;padding:0}.sidebar-restore-btn:hover{background:var(--red-bright, #FF3B30);width:22px}.sr-chev{width:10px;height:10px;display:inline-block;background:#fff;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}@media(max-width:880px){.nav-collapse-btn,.sidebar-restore-btn{display:none!important}}.nav-item .ic-target{--ic: url("data:image/svg+xml;utf8,")}.nav-item .ic-shield{--ic: url("data:image/svg+xml;utf8,")}.nav-item .ic-bar{--ic: url("data:image/svg+xml;utf8,")}.nav-item .ic-bolt{--ic: url("data:image/svg+xml;utf8,")}.card-title{overflow-wrap:normal;white-space:normal;max-width:100%}.card-hero .card-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sb-team-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:8ch}.sb-team-role{font-size:.6rem;font-weight:700;letter-spacing:.08em;opacity:.55;text-transform:uppercase;display:block;grid-column:2;line-height:1.2}.sb-venue{font-size:.65rem;opacity:.55;text-align:center;margin-top:.25rem;letter-spacing:.06em;grid-column:1 / -1}:root{--text: var(--white-bright);--text-dim: var(--text-faint);--accent: var(--red-primary);--accent-bright: var(--red-bright)}.title,.h1{font-family:var(--f-display);font-size:36px;font-weight:400;line-height:1.05;letter-spacing:.04em;color:var(--text-primary);margin:0}.subtitle{font-family:var(--f-body);font-size:16px;font-weight:500;line-height:1.4;color:var(--text-muted)}.h2{font-family:var(--f-display);font-size:24px;font-weight:400;line-height:1.1;letter-spacing:.04em;color:var(--text-primary)}.h3{font-family:var(--f-body);font-size:18px;font-weight:700;line-height:1.25;color:var(--text-primary)}.body{font-family:var(--f-body);font-size:16px;font-weight:500;line-height:1.5;color:var(--text-primary)}.body-sm{font-family:var(--f-body);font-size:16px;font-weight:500;line-height:1.45;color:var(--text-primary)}.muted{color:var(--text-muted)}.dim{color:var(--text-faint)}.stat-big{font-family:var(--f-display);font-size:32px;font-weight:400;line-height:1;letter-spacing:.02em}.stat-med{font-family:var(--f-display);font-size:20px;font-weight:400;line-height:1;letter-spacing:.02em}.badge{font-family:var(--f-body);font-size:16px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;display:inline-flex;align-items:center}.sn--c_news .news-row{padding:6px 4px;grid-template-columns:44px 1fr 44px;gap:10px}.sn--c_news .news-thumb{width:44px;height:44px}.sn--c_news .news-title{font-size:16px;-webkit-line-clamp:2;line-height:1.3}.sn--c_news .news-time{font-size:16px}.sn--c_scoreboard .sb-match{grid-template-columns:1fr auto 1fr;align-items:center}.sn--c_scoreboard .sb-team{grid-template-columns:40px minmax(0,1fr)}.sn--c_scoreboard .sb-team-score{grid-row:auto;grid-column:auto}.sn--c_scoreboard .sb-team--away .sb-helmet{grid-column:1}.sn--c_scoreboard .sb-team--home{grid-template-columns:minmax(0,1fr) 40px;text-align:right}.sn--c_scoreboard .sb-team--home .sb-helmet{grid-column:2;grid-row:1 / 4}.sn--c_scoreboard .sb-team--home .sb-team-name,.sn--c_scoreboard .sb-team--home .sb-team-role,.sn--c_scoreboard .sb-team--home .sb-team-rec{grid-column:1;text-align:right}.sn--c_scoreboard .sb-center{display:inline-flex;align-items:baseline;gap:8px;justify-self:center}.sn--c_scoreboard .sb-center .sb-team-score{font-family:var(--f-display);font-size:32px;font-weight:400;color:#FFFFFF;letter-spacing:.02em}.sn--c_scoreboard .sb-vs{color:var(--white-bright);font-size:16px;font-weight:600;letter-spacing:.15em;align-self:center}.sn--c_scoreboard .sb-meta{grid-column:1 / -1;display:flex;gap:14px;justify-content:center;align-items:center;font-family:var(--f-mono);font-size:16px;color:var(--gray-light);margin-top:8px;flex-wrap:wrap}.sn--c_scoreboard .sb-venue,.sn--c_scoreboard .sb-broadcast{white-space:nowrap}.sn--c_news .news-thumb{background:var(--white-bright);border:2px solid var(--white-bright);box-shadow:0 0 0 1px #f5f5f559}.sn--c_aptop25 .ap-logo{background:var(--white-bright);border:2px solid var(--white-bright);border-radius:50%;box-shadow:0 0 0 1px #f5f5f559}.sn--c_aptop25 .ap-rec{color:var(--white-bright)}body .hero.sn--c_hero{display:flex!important;justify-content:center!important;align-items:center!important}.sn--c_hero .hero-stadium{object-fit:contain!important;object-position:center center!important}body .hero.sn--c_hero{height:clamp(13rem,40vh,26rem)!important;aspect-ratio:auto!important;width:100%!important}@media(max-width:880px){body .hero.sn--c_hero{height:200px!important;min-height:200px!important}}@media(max-width:600px){body .hero.sn--c_hero{height:170px!important;min-height:170px!important}}.sn--c_hero .hero-logo{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:2!important}.sn--c_aptop25 .ap-logo{padding:3px;object-fit:contain;box-sizing:border-box}.app{max-width:none}.content{padding:0 var(--space-fluid-md, clamp(.75rem, .45rem + 1.5vw, 1.5rem)) var(--space-fluid-lg, clamp(1.5rem, 1.3rem + 1vw, 2rem));gap:var(--row-gap, var(--space-fluid-lg, clamp(1rem, .7rem + 1.5vw, 1.5rem)))}.title,.h1{font-size:var(--fs-fluid-h1, clamp(1.75rem, 1.3rem + 2vw, 2.25rem))}.h2{font-size:var(--fs-fluid-h2, clamp(1.25rem, 1.07rem + .8vw, 1.5rem))}.h3{font-size:var(--fs-fluid-h3, clamp(1.0625rem, 1.01rem + .27vw, 1.25rem))}.body{font-size:var(--fs-fluid-body, clamp(.875rem, .84rem + .18vw, 1rem))}.body-sm{font-size:var(--fs-fluid-small, clamp(.75rem, .73rem + .11vw, .8125rem))}.stat-big{font-size:var(--fs-fluid-h2, clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem))}.card-title,h2.card-title{font-size:var(--fs-fluid-h2, clamp(1.25rem, .95rem + 1.4vw, 1.75rem))!important}.ml-text .card-title,.sn--c_myleague .card-title{font-size:var(--fs-fluid-h1, clamp(2rem, 1.4rem + 2.7vw, 2.75rem))!important}.hero{height:clamp(11.25rem,8rem + 14vw,15rem)}.hero-wordmark{width:clamp(7.5rem,4rem + 16vw,15rem)}.scoreticker{height:clamp(2.25rem,2rem + 1.1vw,2.75rem)}@media(min-width:55.0625rem){.row-news-rankings,.row-fantasy-heisman,.row-scoreboard-other{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}}.card.sn--c_fantasy,.card.sn--c_other{container-type:inline-size;container-name:snscard}@container snscard (max-width: 22rem){.perf-row{grid-template-columns:repeat(2,minmax(0,1fr))}.og-row{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}}@container snscard (max-width: 14rem){.perf-row,.og-row{grid-template-columns:1fr}}.hw-card.is-school-colored{transition:background .25s ease,color .25s ease,border-color .25s ease,transform .15s ease,box-shadow .2s ease}.hw-card.is-school-colored:hover{box-shadow:0 0 16px #00000059}.hw-card.is-school-colored .hw-name{color:var(--card-text, var(--white-bright))}.hw-card.is-school-colored .hw-school{color:var(--card-text-mute, var(--gray-light))}.hw-card.is-school-colored .hw-score{color:var(--card-text, var(--accent-gold))}.hw-card.is-school-colored .hw-score .hw-unit{color:var(--card-text-mute, var(--gray-light))}/* ==================================================================== AP TOP 25 — inline-scroll tile w/ sticky header (Issue #696) Pattern: Aceternity "Expandable Card" (Tier 1A, MIT) — bounded card body becomes a scroll region so all 25 ranks are reachable in-tile, while the header stays pinned. RESEARCH/frontend.md L24. Fluid 344-2160 via clamp() height (no fixed px). WCAG AA scrollbar. ==================================================================== */ .sn--c_aptop25{ /* #696 inline-scroll tile RETIRED: the dashboard renders a 5-rank preview (no JS ever injects all 25), so the bounded overflow region had nothing to scroll — it only captured the wheel/touch so the PAGE would not scroll over the tile. On phones that was an outright touch dead-zone, and at >880px the bounded widget survived even after the old mobile override, so a thumb/cursor landing on the card still couldn't move the page. The card now sizes to its content like every other dashboard card at every width; "FULL POLL →" links to all 25. (Was: overflow-y:auto + max-height:clamp + overscroll-behavior:contain + a sticky blurred header + an 880px override.) */ overflow-x:hidden; } /* WebKit/Blink thin on-brand scrollbar (Chrome/Safari/Edge). */ .sn--c_aptop25::-webkit-scrollbar{width:8px} .sn--c_aptop25::-webkit-scrollbar-track{background:transparent} .sn--c_aptop25::-webkit-scrollbar-thumb{ background:var(--red-primary); /* #FF1A1A on #050505 = AA for non-text UI */ border-radius:8px; border:2px solid var(--black-bg); /* inset look, keeps thumb ~4px visible */ } .sn--c_aptop25::-webkit-scrollbar-thumb:hover{background:var(--red-bright)} /* a11y: each .ap-row anchor is wrapped in

so the

direct children (axe-core 'list' rule / WCAG 2.1 SC 1.3.1). display:contents removes the
's own box, so the .ap-row anchors stay adjacent flex siblings — the .ap-list flex column, the .ap-row grid, and the .ap-row+.ap-row hairline divider all render exactly as before. */ .ap-li{display:contents} /* keyboard focus inside the scroller stays visible against the pinned head */ .sn--c_aptop25 .ap-row:focus-visible{ outline:2px solid var(--accent, #FF2D2D); outline-offset:-2px; background:#ff1a1a14; } /* reduced-motion: kill row hover translate so scroll feels calm (no jump). */ @media (prefers-reduced-motion: reduce){ .sn--c_aptop25{scroll-behavior:auto} .sn--c_aptop25 .ap-row{transition:none} .sn--c_aptop25 .ap-row:hover{transform:none} } /* DESIGN_SYSTEM_RESET 2026-05-31 ruling #3 - wide-monitor fill = professional whitespace, NOT more columns. Shell (--container-fluid) now fills to 135rem/2160px; content centers + caps at --content-max so auto-fill grids do not sprawl into 5-6 columns on wide displays. Per-page column caps refined in Wave 2. */ .app .content{max-width:var(--content-max,100rem);margin-inline:auto;width:100%} /* FAVORITE TEAMS tile fill (DESIGN_SYSTEM_RESET 2026-05-31 ruling #1) — stack the favorite-team games vertically and size the tile to its content instead of a 1-at-a-time carousel floating in ~100px of black space. Scoped to the dashboard scoreboard tile. */ .sn--c_scoreboard .sb-body{min-height:0!important;justify-content:flex-start!important} .sn--c_scoreboard .sb-viewport{min-height:0!important;overflow:visible!important} .sn--c_scoreboard .sb-track{flex-direction:column!important;gap:12px!important;transform:none!important} .sn--c_scoreboard .sb-match{flex:0 0 auto!important} /* Kill the top score-ticker/"news bar" on inner content pages (audio directive; DESIGN_SYSTEM_RESET 6.2) so content aligns to the top. Dashboard/home keep it. */ html[data-route="/scores"] .sn--c_scoreticker,html[data-route="/bracket"] .sn--c_scoreticker,html[data-route="/heisman"] .sn--c_scoreticker{display:none!important} /* ---- Page header + sticky filter bar ---------------------------------- */ .sb-head { padding: 4px 0 2px; } .sb-title { font-family: var(--f-display, "Graduate", serif); font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); line-height: .95; letter-spacing: .02em; margin: 0; color: var(--white-bright, #F5F5F5); text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 26px rgba(255,26,26,.18); } .sb-subtitle { font: 500 clamp(.8125rem, .78rem + .18vw, .9375rem)/1.3 var(--f-body, "Inter", sans-serif); color: var(--gray-light, var(--gray-light,#C2C2C2)); margin: 6px 0 0; letter-spacing: .02em; } .sb-filterbar { /* clear the iOS status bar/notch when stuck (env() is 0 without an inset) */ position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 0; margin: 10px 0 4px; background: linear-gradient(180deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.88) 100%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--gray-border, #2A2A2A); /* iOS overflow guard: the week label (88px) + conf