/* Desktop header in three parts: brand + league left, navigation centred, tools right.
   Each part is its own black capsule; the stadium shows between them. */
@media (min-width:900px){
  html[data-menu] body .masthead.masthead{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;height:auto!important}
  html[data-menu] body .masthead.masthead .masthead-inner{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center;gap:12px!important;padding:0!important;background:none!important}
  html[data-menu] body .masthead.masthead :is(.masthead-brand,.masthead-nav,.masthead-tools){height:52px!important;box-sizing:border-box;align-items:center;background:#0a0a0ae6!important;border:1px solid #ffffff1c!important;border-radius:18px!important;box-shadow:0 10px 30px #0008!important;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
  html[data-menu] body .masthead.masthead .masthead-brand{grid-column:1!important;grid-row:1!important;justify-self:start;display:flex;gap:16px!important;padding:0 18px 0 20px!important}
  html[data-menu] body .masthead.masthead .masthead-nav{grid-column:2!important;grid-row:1!important;justify-self:center;display:flex;gap:2px!important;padding:0 7px!important;margin:0!important}
  html[data-menu] body .masthead.masthead .masthead-tools{grid-column:3!important;grid-row:1!important;justify-self:end;display:flex;gap:4px!important;padding:0 8px 0 12px!important;margin:0!important}
  html[data-menu] body .masthead.masthead .masthead-tools .masthead-rule{display:none!important}
  /* More room between KICKELF and the league. */
  html[data-menu] body .masthead.masthead .masthead-brand{gap:0!important;padding-right:14px!important}
  html[data-menu] body .masthead.masthead .masthead-brand .brand-rule{display:block!important;width:1px;height:24px;margin:0 22px!important;background:#ffffff2e}
  html[data-menu] body .masthead.masthead .masthead-brand .league-picker{margin-left:0!important}
  /* Away from the top (the header slides back in when scrolling up): only the navigation; brand and tools fade out. */
  html[data-menu] body .masthead.masthead :is(.masthead-brand,.masthead-tools){transition:opacity .25s ease,transform .25s ease,visibility 0s linear 0s}
  html[data-menu] body .masthead.masthead.is-scrolled:not(:has([data-league-toggle][aria-expanded=true])) :is(.masthead-brand,.masthead-tools){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
  html[data-menu] body .masthead.masthead.is-scrolled:not(:has([data-league-toggle][aria-expanded=true])) .masthead-brand{transform:translateX(-12px)}
  html[data-menu] body .masthead.masthead.is-scrolled:not(:has([data-league-toggle][aria-expanded=true])) .masthead-tools{transform:translateX(12px)}
}
@media (min-width:900px){
  /* The two side capsules sit at the window edges; the navigation stays centred. */
  html[data-menu] body .masthead.masthead,html[data-menu] body.is-live .masthead.masthead{left:36px!important;right:36px!important;width:auto!important;max-width:none!important;margin:0!important;transform:none}
  html[data-menu] body .masthead.masthead.is-nav-hidden{transform:translateY(calc(-100% - 24px))}
  /* Narrower side capsules. */
  html[data-menu] body .masthead.masthead .masthead-brand{padding:0 10px 0 16px!important}
  html[data-menu] body .masthead.masthead .masthead-brand .brand-rule{margin:0 14px!important}
  html[data-menu] body .masthead.masthead .masthead-tools{padding:0 6px 0 8px!important;gap:0!important}
}

/* ===== Header font proposals (?font=1|2|3): navigation and league name. ===== */
@media (min-width:900px){
  /* 1 · Inter, the app font, a size up. */
  html[data-font="1"][data-menu] body .masthead.masthead .main-nav-link{font:500 14px/1 Inter,Arial,sans-serif!important;letter-spacing:-.01em!important;text-transform:none!important;padding:0 9px!important}
  html[data-font="1"][data-menu] body .masthead.masthead .team-switch-name{font:600 15px/1.1 Inter,Arial,sans-serif!important;letter-spacing:-.01em}
  /* 2 · Barlow Condensed italic capitals, like the KICKELF wordmark and the page titles. */
  html[data-font="2"][data-menu] body .masthead.masthead .main-nav-link{font:italic 800 17px/1 'Barlow Condensed',Arial,sans-serif!important;letter-spacing:.02em!important;text-transform:uppercase!important;padding:0 10px!important}
  html[data-font="2"][data-menu] body .masthead.masthead .team-switch-name{font:italic 800 18px/1 'Barlow Condensed',Arial,sans-serif!important;letter-spacing:.02em;text-transform:uppercase}
  /* 3 · Small bold capitals with wide tracking, like a broadcast graphic. */
  html[data-font="3"][data-menu] body .masthead.masthead .main-nav-link{font:700 10.5px/1 Inter,Arial,sans-serif!important;letter-spacing:.1em!important;text-transform:uppercase!important;padding:0 9px!important}
  html[data-font="3"][data-menu] body .masthead.masthead .team-switch-name{font:700 12px/1.1 Inter,Arial,sans-serif!important;letter-spacing:.12em;text-transform:uppercase}
}
@media (min-width:900px) and (max-width:1279px){
  /* Narrower windows: the league name may shorten, the type steps down a little, the centre never overlaps. */
  html[data-menu] body .masthead.masthead .team-switch-name{display:block;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html[data-menu] body .masthead.masthead,html[data-menu] body.is-live .masthead.masthead{left:20px!important;right:20px!important}
  html[data-menu] body .masthead.masthead .masthead-brand .brand-rule{margin:0 12px!important}
  html[data-font="1"][data-menu] body .masthead.masthead .main-nav-link{font-size:13.5px!important;padding:0 8px!important}
  html[data-font="2"][data-menu] body .masthead.masthead .main-nav-link{font-size:15.5px!important;padding:0 7px!important;letter-spacing:.015em!important}
  html[data-font="3"][data-menu] body .masthead.masthead .main-nav-link{font-size:10px!important;padding:0 7px!important;letter-spacing:.08em!important}
}
/* ===== More header font proposals (?font=4..9) ===== */
@media (min-width:900px){
  /* 4 · SF Pro (Apple system font) */
  html[data-font="4"][data-menu] body .masthead.masthead .main-nav-link{font:500 14px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',Inter,Arial,sans-serif!important;letter-spacing:-.01em!important;text-transform:none!important;padding:0 9px!important}
  html[data-font="4"][data-menu] body .masthead.masthead .team-switch-name{font:600 15px/1.1 -apple-system,BlinkMacSystemFont,Inter,sans-serif!important}
  /* 5 · Avenir Next */
  html[data-font="5"][data-menu] body .masthead.masthead .main-nav-link{font:500 14px/1 'Avenir Next',Avenir,Inter,Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;padding:0 9px!important}
  html[data-font="5"][data-menu] body .masthead.masthead .team-switch-name{font:600 15px/1.1 'Avenir Next',Avenir,Inter,sans-serif!important}
  /* 6 · DIN Condensed capitals: stadium scoreboard */
  html[data-font="6"][data-menu] body .masthead.masthead .main-nav-link{font:700 17px/1 'DIN Condensed','DIN Alternate','Barlow Condensed',Arial,sans-serif!important;letter-spacing:.06em!important;text-transform:uppercase!important;padding:3px 10px 0!important}
  html[data-font="6"][data-menu] body .masthead.masthead .team-switch-name{font:700 18px/1 'DIN Condensed','Barlow Condensed',sans-serif!important;letter-spacing:.05em;text-transform:uppercase;padding-top:3px}
  /* 7 · Barlow Condensed upright, normal case */
  html[data-font="7"][data-menu] body .masthead.masthead .main-nav-link{font:700 17.5px/1 'Barlow Condensed',Arial,sans-serif!important;letter-spacing:.01em!important;text-transform:none!important;padding:0 10px!important}
  html[data-font="7"][data-menu] body .masthead.masthead .team-switch-name{font:700 18.5px/1 'Barlow Condensed',sans-serif!important;letter-spacing:.01em}
  /* 8 · SF Mono small capitals: stats ticker */
  html[data-font="8"][data-menu] body .masthead.masthead .main-nav-link{font:500 11px/1 'SF Mono',ui-monospace,Menlo,monospace!important;letter-spacing:.04em!important;text-transform:uppercase!important;padding:0 8px!important}
  html[data-font="8"][data-menu] body .masthead.masthead .team-switch-name{font:600 12px/1.1 'SF Mono',ui-monospace,Menlo,monospace!important;letter-spacing:.04em;text-transform:uppercase}
  /* 9 · Newsreader serif: sports magazine */
  html[data-font="9"][data-menu] body .masthead.masthead .main-nav-link{font:500 16px/1 Newsreader,Georgia,serif!important;letter-spacing:0!important;text-transform:none!important;padding:0 9px!important}
  html[data-font="9"][data-menu] body .masthead.masthead .team-switch-name{font:600 17px/1.1 Newsreader,Georgia,serif!important}
}
@media (min-width:900px) and (max-width:1279px){
  html[data-font="4"][data-menu] body .masthead.masthead .main-nav-link,html[data-font="5"][data-menu] body .masthead.masthead .main-nav-link{font-size:13.5px!important;padding:0 8px!important}
  html[data-font="6"][data-menu] body .masthead.masthead .main-nav-link{font-size:16px!important;padding:3px 8px 0!important}
  html[data-font="7"][data-menu] body .masthead.masthead .main-nav-link{font-size:16.5px!important;padding:0 8px!important}
  html[data-font="8"][data-menu] body .masthead.masthead .main-nav-link{font-size:10.5px!important;padding:0 7px!important}
  html[data-font="9"][data-menu] body .masthead.masthead .main-nav-link{font-size:15.5px!important;padding:0 8px!important}
}