/* Static NHL/NFL appearance overlay. */

.app-bg:is([data-sport="nfl"],[data-sport="nhl"],[data-sport="nba"]) {
  background:
    radial-gradient(900px 420px at 50% -10%, color-mix(in oklch, var(--brand, #2f7bff) 28%, transparent), transparent 60%),
    var(--background, #070b14) !important;
}

:is([data-sport="nfl"],[data-sport="nhl"],[data-sport="nba"]) header.sticky {
  background: color-mix(in oklch, var(--background, #070b14) 86%, transparent) !important;
  backdrop-filter: blur(14px);
}

:is([data-sport="nfl"],[data-sport="nhl"],[data-sport="nba"]) main article,
:is([data-sport="nfl"],[data-sport="nhl"],[data-sport="nba"]) main [class*="rounded-2xl"],
:is([data-sport="nfl"],[data-sport="nhl"],[data-sport="nba"]) main [class*="rounded-xl"] {
  background: color-mix(in oklch, var(--surface, #121c28) 92%, black) !important;
  border: 1px solid color-mix(in oklch, var(--brand, #2f7bff) 35%, var(--border, #243044)) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.35),
    0 0 0 1px color-mix(in oklch, var(--brand, #2f7bff) 18%, transparent);
}