/* Shared setup-screen density, responsive action dock, and compact mode header. */

.pl-season-main-section-switch,
.ucl-main-section-switch,
.retro-main-section-switch,
body:not(.before-start) #appShell > .sidebar > .main-section-switch,
body[data-desktop-mode-setup="standard"] #appShell > .sidebar > .main-section-switch,
body:is(.club-route-setup-active, .retro-route-setup-active) :is(
  .pl-season-main-section-switch,
  .ucl-main-section-switch,
  .retro-main-section-switch
) {
  display: none !important;
}

/* The three-section switch belongs to the simulator homepage only. Dedicated
   setup and playable screens keep their competition identity and site tools in
   one compact banner. These selectors also protect against stale cached mode
   markup while a new stylesheet is loading. */
body:is(.pl-season-open, .ucl-simulator-open, .retro-mode-active) :is(
  .pl-season-main-section-switch,
  .ucl-main-section-switch,
  .retro-main-section-switch
) {
  display: none !important;
}

body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .mode-route-setup-ucl {
  position: relative !important;
}

body:is(.club-route-setup-active, .retro-route-setup-active) :is(
  #premierLeagueRouteSetup > .mode-route-setup-back,
  #uclRouteSetup > .mode-route-setup-back,
  #retroRouteSetup > .retro-route-setup-back
) {
  position: absolute !important;
  display: inline-flex !important;
  width: max-content !important;
  min-width: 0 !important;
}

body:is(.club-route-setup-active, .retro-route-setup-active) :is(
  #premierLeagueRouteSetup > .mode-route-setup-back,
  #uclRouteSetup > .mode-route-setup-back,
  #retroRouteSetup > .retro-route-setup-back
) > span:last-child {
  display: inline !important;
}

body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetup {
  width: min(1080px, calc(100% - clamp(96px, 18vw, 300px)));
  padding-top: 72px;
}

body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) .domestic-route-setup-intro {
  position: absolute;
  top: 19px;
  left: 50%;
  z-index: 2;
  display: flex;
  max-width: calc(100% - 330px);
  align-items: center;
  gap: 9px;
  color: var(--domestic-setup-text);
  transform: translateX(-50%);
}

body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) .domestic-route-setup-intro[hidden] {
  display: none !important;
}

body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) .domestic-route-setup-intro img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
}

body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) .domestic-route-setup-intro h1 {
  min-width: 0;
  margin: 0;
  color: var(--domestic-setup-text);
  font: 850 clamp(1rem, 1.8vw, 1.3rem)/1.12 "Manrope", sans-serif;
  letter-spacing: -.025em;
  text-align: center;
  overflow-wrap: anywhere;
}

body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetupControls {
  padding: 18px !important;
}

body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetupControls .landing-settings {
  gap: 10px !important;
  margin-bottom: 12px !important;
}

body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetupControls .landing-setting {
  min-height: 92px;
  padding: 12px !important;
}

body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetupControls .segmented {
  min-height: 40px !important;
  margin-top: 7px !important;
}

body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetupControls .segmented button {
  min-height: 32px;
  padding-block: 5px;
}

body.retro-route-setup-active .retro-route-setup-identity {
  position: absolute;
  top: 19px;
  left: 50%;
  z-index: 2;
  display: flex;
  max-width: calc(100% - 330px);
  align-items: center;
  gap: 9px;
  color: var(--retro-setup-text, #fff);
  transform: translateX(-50%);
}

body.retro-route-setup-active .retro-route-setup-identity img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
}

body.retro-route-setup-active .retro-route-setup-identity h1 {
  min-width: 0;
  margin: 0;
  color: var(--retro-setup-text, #fff);
  font: 850 clamp(1rem, 1.8vw, 1.3rem)/1.12 "Manrope", sans-serif;
  letter-spacing: -.025em;
  text-align: center;
  overflow-wrap: anywhere;
}

body.retro-route-setup-active .retro-route-setup {
  padding-top: 72px !important;
}

body.retro-route-setup-active .retro-route-setup-controls {
  padding: 18px !important;
}

body.retro-route-setup-active .retro-route-setup-controls .retro-landing-settings {
  gap: 10px !important;
  margin-bottom: 12px !important;
}

body.retro-route-setup-active .retro-route-setup-controls .landing-setting {
  min-height: 92px;
  padding: 12px !important;
}

body.retro-route-setup-active .retro-route-setup-controls .segmented {
  min-height: 40px !important;
  margin-top: 7px !important;
}

body.retro-route-setup-active .retro-route-setup-controls .segmented button {
  min-height: 32px !important;
  padding-block: 5px !important;
}

@media (min-width: 761px) and (max-width: 1100px) {
  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetup {
    width: min(calc(100% - 32px), 960px);
  }
}

@media (max-width: 1280px) {
  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.pl-match-mode-active):not(.ucl-match-mode-active) #appShell > .sidebar {
    grid-template-rows: 60px !important;
    min-height: 60px !important;
    height: 60px !important;
    padding-bottom: 0 !important;
    border-bottom: 1px solid rgba(190, 237, 255, .18) !important;
    background: rgba(4, 93, 128, .97) !important;
    box-shadow: 0 8px 24px rgba(1, 40, 57, .18) !important;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetup,
  body.retro-route-setup-active .retro-route-setup,
  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .mode-route-setup-ucl,
  body[data-desktop-mode-setup="standard"] .mode-select {
    padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetupControls .mode-card-actions,
  body.retro-route-setup-active #retroModeActions,
  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) #uclModeActions,
  body[data-desktop-mode-setup="standard"] .mode-card-default .mode-card-actions {
    position: fixed !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    z-index: 80;
    box-sizing: border-box;
    display: flex !important;
    width: min(720px, calc(100% - 24px)) !important;
    align-items: stretch;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 7px !important;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 11px;
    background: rgba(5, 15, 31, .94);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .1);
    transform: translateX(-50%) !important;
    backdrop-filter: blur(14px);
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetupControls .mode-card-actions {
    border-color: var(--domestic-setup-border);
    background: var(--domestic-setup-panel);
  }

  body.retro-route-setup-active #retroModeActions {
    border-color: var(--retro-setup-border, rgba(255, 255, 255, .22));
    background: var(--retro-setup-panel, #050f1f);
  }

  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) #uclModeActions {
    border-color: var(--uefa-setup-border);
    background: var(--uefa-setup-panel);
  }

  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) #uclSimulatorScreen {
    height: 100dvh;
    overflow: hidden !important;
  }

  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .mode-route-setup-ucl {
    height: calc(100dvh - 68px);
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* A backdrop filter creates a fixed-position containing block in Safari and
     Chromium. Keep the setup panel opaque so its action dock stays attached
     to the viewport instead of the bottom of the long club grid. */
  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .mode-route-setup-ucl .mode-route-setup-panel {
    backdrop-filter: none !important;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetupControls .mode-card-actions > .start-tournament,
  body.retro-route-setup-active #retroModeActions > .start-tournament,
  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) #uclModeActions > .start-tournament,
  body[data-desktop-mode-setup="standard"] .mode-card-default .mode-card-actions > .start-tournament {
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;
    flex: 1 1 auto !important;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetupControls .mode-card-actions > :not(.start-tournament),
  body.retro-route-setup-active #retroModeActions > :not(.start-tournament),
  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) #uclModeActions > :not(.start-tournament),
  body[data-desktop-mode-setup="standard"] .mode-card-default .mode-card-actions > :not(.start-tournament) {
    width: auto !important;
    min-height: 42px !important;
    flex: 0 0 auto;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .mode-route-setup-ucl {
    height: calc(100dvh - 116px);
  }
}

@media (max-width: 760px) {
  :is(.pl-season-header-left, .retro-screen-left, .ucl-header-left) {
    margin-left: 0 !important;
  }

  :is(.pl-season-utility-actions, .retro-screen-actions, .ucl-header-actions) {
    margin-left: auto !important;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) .pl-season-header,
  body.retro-route-setup-active .retro-screen-header,
  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .ucl-simulator-header {
    min-height: 60px !important;
    flex-wrap: nowrap !important;
    align-content: center !important;
    padding-block: 7px !important;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetup {
    width: calc(100% - 24px);
    min-height: calc(100dvh - 60px);
    padding: 104px 0 calc(84px + env(safe-area-inset-bottom)) !important;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetup > .mode-route-setup-back,
  body.retro-route-setup-active .retro-route-setup-back,
  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .mode-route-setup-ucl .mode-route-setup-back {
    top: 10px !important;
    left: 0 !important;
    display: inline-flex !important;
    min-height: 38px !important;
  }

  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .mode-route-setup-ucl .mode-route-setup-back {
    left: 12px !important;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) .domestic-route-setup-intro,
  body.retro-route-setup-active .retro-route-setup-identity {
    top: 58px;
    width: calc(100% - 24px);
    max-width: none;
    justify-content: center;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetupControls,
  body.retro-route-setup-active .retro-route-setup-controls,
  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .mode-route-setup-ucl .mode-route-setup-panel {
    padding: 10px !important;
  }

  body.retro-route-setup-active .retro-route-setup {
    min-height: calc(100dvh - 60px) !important;
    padding: 104px 0 calc(84px + env(safe-area-inset-bottom)) !important;
  }

  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .mode-route-setup-ucl {
    height: calc(100dvh - 60px);
    min-height: calc(100dvh - 60px) !important;
    padding: 58px 11px calc(84px + env(safe-area-inset-bottom)) !important;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetupControls .landing-settings,
  body.retro-route-setup-active .retro-route-setup-controls .retro-landing-settings {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetupControls .landing-setting,
  body.retro-route-setup-active .retro-route-setup-controls .landing-setting {
    min-height: 82px;
    padding: 10px !important;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) .domestic-inline-team-option,
  body.retro-route-setup-active .retro-inline-team-option,
  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .uefa-inline-team-option {
    min-height: 64px !important;
  }

  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .club-competition-setup-intro {
    margin-bottom: 12px;
  }

  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .club-competition-setup-intro h1 {
    font-size: clamp(20px, 6vw, 27px);
  }
}

/* Playable modes use the same single-row mobile banner as their setup screen.
   Older league styles reserve 116px for the removed homepage tabs, so this
   final shared rule must remain after the mode styles in the cascade. */
@media (max-width: 900px) {
  body.pl-season-open .pl-season-header,
  body.ucl-simulator-open .ucl-simulator-header {
    min-height: 60px !important;
    height: auto !important;
    flex-wrap: nowrap !important;
    align-content: center !important;
    gap: 4px !important;
    padding: 7px 10px !important;
  }

  body.retro-mode-active .retro-screen-header {
    min-height: 60px !important;
    height: auto !important;
    gap: 4px !important;
    padding: 7px 10px !important;
  }

  body.pl-season-open .pl-season-site-brand .brand-mark,
  body.ucl-simulator-open .ucl-site-brand .brand-mark,
  body.retro-mode-active .retro-screen-brand .brand-mark {
    width: 38px !important;
    height: 38px !important;
  }

  body.pl-season-open .pl-season-header :is(.utility-button, .pl-season-restart-button),
  body.ucl-simulator-open .ucl-simulator-header :is(.utility-button, .ucl-restart-button),
  body.retro-mode-active .retro-screen-header :is(.retro-screen-action, .retro-screen-restart) {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
  }

  body.pl-season-open .pl-season-header .main-account-button,
  body.ucl-simulator-open .ucl-simulator-header .main-account-button,
  body.retro-mode-active .retro-screen-header .retro-account-button {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
  }

  body.pl-season-open .pl-season-header .main-account-button > span:last-child,
  body.ucl-simulator-open .ucl-simulator-header .main-account-button > span:last-child,
  body.retro-mode-active .retro-screen-header .retro-account-button > span:last-child {
    display: none !important;
  }
}

/* Live matches render in the shared app shell. Recreate the exact competition
   header row there: brand first, mode tools beside it, site tools at the far
   right. This geometry is stable during play, penalties and full time while
   each competition stylesheet continues to own its colours. */
@media (min-width: 0px) {
  body.pl-match-mode-active #appShell > .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    display: flex !important;
    width: 100% !important;
    min-height: 68px !important;
    height: 68px !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 6px !important;
    padding: 0 clamp(20px, 3vw, 52px) !important;
    transform: none !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > :is(
    #menuButton,
    #legacyHeaderBackButton,
    .main-section-switch,
    .tournament-status,
    .round-nav
  ),
  body.pl-match-mode-active #appShell > .sidebar #discordButton {
    display: none !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > .brand {
    position: static !important;
    order: 1 !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > .brand .brand-mark {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }

  /* display: contents lets the shared controls participate in the same flex
     row as the brand and restart button without duplicating header markup. */
  body.pl-match-mode-active #appShell > .sidebar > .header-actions {
    position: static !important;
    inset: auto !important;
    display: contents !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > :is(#newTournamentButton),
  body.pl-match-mode-active #appShell > .sidebar > .header-actions :is(
    #settingsButton,
    #newsButton,
    #bugReportButton,
    #openAchievementsButton,
    #donateButton
  ) {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-flex !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    transform: none !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > #newTournamentButton {
    display: none !important;
  }

  body[data-domestic-league-edition].pl-match-mode-active:not(.club-competition-match-mode-active) #appShell > .sidebar > #newTournamentButton {
    order: 3 !important;
    display: inline-flex !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > .header-actions #settingsButton {
    order: 2 !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > .header-actions #newsButton {
    order: 4 !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > .header-actions #bugReportButton {
    order: 5 !important;
    margin-left: auto !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > .header-actions #openAchievementsButton {
    order: 6 !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > .header-actions #donateButton {
    order: 7 !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > .header-actions #mainAccountButton {
    position: static !important;
    order: 8 !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    transform: none !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > .header-actions :is(
    #settingsButton,
    #newsButton,
    #bugReportButton,
    #openAchievementsButton,
    #donateButton
  ) > span:last-child {
    display: none !important;
  }

  /* The shared match shell uses the same competition tokens as the league
     overview header, preventing legacy per-button skins from returning at
     kickoff or full time. */
  body[data-domestic-league-edition].pl-match-mode-active:not(.club-competition-match-mode-active) #appShell > .sidebar > .brand .brand-mark {
    border: 1px solid var(--domestic-banner-brand-border) !important;
    color: var(--domestic-banner-brand-text) !important;
    background: var(--domestic-banner-brand) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .46), 0 3px 0 var(--domestic-banner-brand-shadow) !important;
  }

  body[data-domestic-league-edition].pl-match-mode-active:not(.club-competition-match-mode-active) #appShell > .sidebar :is(
    #newTournamentButton,
    #settingsButton,
    #newsButton,
    #bugReportButton,
    #openAchievementsButton,
    #donateButton,
    #mainAccountButton
  ) {
    border: 1px solid var(--domestic-banner-border) !important;
    color: var(--domestic-banner-text) !important;
    background: var(--domestic-banner-surface) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .12) !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > #newTournamentButton.is-confirming {
    width: 52px !important;
    min-width: 52px !important;
    border-color: #ff7784 !important;
    color: #fff !important;
    background: #c91f35 !important;
    font: 900 9px/1 "Manrope", sans-serif !important;
    letter-spacing: .04em !important;
  }
}

@media (max-width: 900px) {
  body.pl-match-mode-active #appShell > .sidebar {
    min-height: 60px !important;
    height: 60px !important;
    gap: 4px !important;
    padding: 7px 10px !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > .brand {
    margin-right: 0 !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > .brand .brand-mark,
  body.pl-match-mode-active #appShell > .sidebar > :is(#newTournamentButton),
  body.pl-match-mode-active #appShell > .sidebar > .header-actions :is(
    #settingsButton,
    #newsButton,
    #bugReportButton,
    #openAchievementsButton,
    #donateButton,
    #mainAccountButton
  ) {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > .header-actions #mainAccountButton > span:last-child {
    display: none !important;
  }
}

@media (max-width: 480px) {
  body.pl-match-mode-active #appShell > .sidebar {
    gap: 3px !important;
    padding-inline: 8px !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > .brand .brand-mark {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  body.pl-match-mode-active #appShell > .sidebar > :is(#newTournamentButton),
  body.pl-match-mode-active #appShell > .sidebar > .header-actions :is(
    #settingsButton,
    #newsButton,
    #bugReportButton,
    #openAchievementsButton,
    #donateButton,
    #mainAccountButton
  ) {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
}

/* MLS keeps the exact same navigation banner when the shared match shell
   replaces the season hub. This lives after the generic compact-header rules
   so later responsive defaults cannot reintroduce transparent controls. */
@media (min-width: 0px) {
  #premierLeagueSeasonScreen[data-league-edition^="major-league-soccer-"] .pl-season-header :is(
    .pl-season-header-left .utility-button,
    .pl-season-restart-button,
    .pl-season-utility-actions .utility-button:not(.main-account-button)
  ),
  #premierLeagueSeasonScreen[data-league-edition^="major-league-soccer-"] .pl-season-utility-actions .main-account-button {
    border-color: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    background: #100204 !important;
    background-image: none !important;
    box-shadow: 0 8px 20px rgba(19, 1, 3, .28), inset 0 1px rgba(255, 255, 255, .06) !important;
  }

  body[data-domestic-league-edition^="major-league-soccer-"].pl-match-mode-active #appShell > .sidebar {
    min-height: 76px !important;
    height: 76px !important;
    gap: 8px !important;
    padding: 0 clamp(22px, 3vw, 52px) !important;
  }

  body[data-domestic-league-edition^="major-league-soccer-"].pl-match-mode-active #appShell > .sidebar > .brand .brand-mark {
    border: 0 !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-domestic-league-edition^="major-league-soccer-"].pl-match-mode-active #appShell > .sidebar > #newTournamentButton,
  body[data-domestic-league-edition^="major-league-soccer-"].pl-match-mode-active #appShell > .sidebar > .header-actions :is(
    #settingsButton,
    #newsButton,
    #bugReportButton,
    #openAchievementsButton,
    #donateButton
  ) {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    background: #100204 !important;
    box-shadow: 0 8px 20px rgba(19, 1, 3, .28), inset 0 1px rgba(255, 255, 255, .06) !important;
  }

  body[data-domestic-league-edition^="major-league-soccer-"].pl-match-mode-active #appShell > .sidebar > .header-actions #mainAccountButton {
    min-height: 44px !important;
    height: 44px !important;
    color: #fff !important;
    background: #100204 !important;
    box-shadow: 0 8px 20px rgba(19, 1, 3, .28), inset 0 1px rgba(255, 255, 255, .06) !important;
  }
}

@media (max-width: 480px) {
  body.pl-season-open .pl-season-header,
  body.ucl-simulator-open .ucl-simulator-header,
  body.retro-mode-active .retro-screen-header {
    gap: 3px !important;
    padding-inline: 8px !important;
  }

  body.pl-season-open .pl-season-site-brand .brand-mark,
  body.ucl-simulator-open .ucl-site-brand .brand-mark,
  body.retro-mode-active .retro-screen-brand .brand-mark {
    width: 36px !important;
    height: 36px !important;
  }

  body.pl-season-open .pl-season-header :is(.utility-button, .pl-season-restart-button, .main-account-button),
  body.ucl-simulator-open .ucl-simulator-header :is(.utility-button, .ucl-restart-button, .main-account-button),
  body.retro-mode-active .retro-screen-header :is(.retro-screen-action, .retro-screen-restart, .retro-account-button) {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
}

@media (max-width: 480px) {
  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) .pl-season-header,
  body.retro-route-setup-active .retro-screen-header,
  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .ucl-simulator-header {
    gap: 3px !important;
    padding-inline: 8px !important;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) .domestic-route-setup-intro img,
  body.retro-route-setup-active .retro-route-setup-identity img {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) .domestic-route-setup-intro h1,
  body.retro-route-setup-active .retro-route-setup-identity h1 {
    font-size: .95rem;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetupControls .mode-card-actions,
  body.retro-route-setup-active #retroModeActions,
  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) #uclModeActions,
  body[data-desktop-mode-setup="standard"] .mode-card-default .mode-card-actions {
    gap: 5px !important;
    padding: 6px !important;
  }

  body:is(.pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .liga-portugal-route-setup-active) #premierLeagueRouteSetupControls .mode-card-actions > *,
  body.retro-route-setup-active #retroModeActions > *,
  body:is(.ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) #uclModeActions > *,
  body[data-desktop-mode-setup="standard"] .mode-card-default .mode-card-actions > * {
    padding-inline: 9px !important;
    font-size: 9px !important;
  }
}

/* One shared neutral choice sits beside the achievement filter. The existing
   competition filter classes supply each edition's colours and button shape. */
body:is(.retro-route-setup-active, .pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .mls-route-setup-active, .ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .retro-inline-team-toolbar {
  justify-content: flex-start !important;
  flex-wrap: wrap;
}

body:is(.retro-route-setup-active, .pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .mls-route-setup-active, .ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .setup-neutral-choice {
  min-width: 0;
  flex: 0 0 auto;
  justify-content: center;
  cursor: pointer;
}

body:is(.retro-route-setup-active, .pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .mls-route-setup-active, .ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .setup-neutral-choice:disabled {
  cursor: not-allowed;
}

body:is(.retro-route-setup-active, .pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .mls-route-setup-active, .ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .setup-neutral-choice:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

body:is(.retro-route-setup-active, .pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .mls-route-setup-active, .ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .retro-inline-team-toolbar > .retro-inline-team-count {
  margin-left: auto;
}

@media (max-width: 600px) {
  body:is(.retro-route-setup-active, .pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .mls-route-setup-active, .ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .retro-inline-team-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch !important;
    gap: 7px !important;
  }

  body:is(.retro-route-setup-active, .pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .mls-route-setup-active, .ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .retro-inline-team-toolbar > :is(.retro-inline-achievement-filter, .setup-neutral-choice) {
    width: 100%;
    min-width: 0;
    padding-inline: 8px !important;
    white-space: normal;
  }

  body:is(.retro-route-setup-active, .pl-route-setup-active, .championship-route-setup-active, .la-liga-route-setup-active, .ligue-1-route-setup-active, .serie-a-route-setup-active, .bundesliga-route-setup-active, .eredivisie-route-setup-active, .super-lig-route-setup-active, .belgian-pro-league-route-setup-active, .mls-route-setup-active, .ucl-route-setup-active, .uel-route-setup-active, .uecl-route-setup-active) .retro-inline-team-toolbar > .retro-inline-team-count {
    grid-column: 1 / -1;
    justify-self: end;
    margin-left: 0;
  }
}

/* Saudi setup parity: explicit selectors keep the new route independent from
   the legacy league lists above and cover desktop, tablet and phone docks. */
@media (min-width: 761px) and (max-width: 1100px) {
  body.saudi-pro-league-route-setup-active #premierLeagueRouteSetup {
    width: min(calc(100% - 32px), 960px);
  }
}

@media (max-width: 1280px) {
  body.saudi-pro-league-route-setup-active #premierLeagueRouteSetup {
    padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }

  body.saudi-pro-league-route-setup-active #premierLeagueRouteSetupControls .mode-card-actions {
    position: fixed !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    z-index: 80;
    box-sizing: border-box;
    display: flex !important;
    width: min(720px, calc(100% - 24px)) !important;
    align-items: stretch;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 7px !important;
    border: 1px solid var(--domestic-setup-border);
    border-radius: 11px;
    background: var(--domestic-setup-panel);
    box-shadow: 0 12px 34px rgba(0, 24, 14, .42), inset 0 1px rgba(255, 255, 255, .1);
    transform: translateX(-50%) !important;
    backdrop-filter: blur(14px);
  }

  body.saudi-pro-league-route-setup-active #premierLeagueRouteSetupControls .mode-card-actions > .start-tournament {
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;
    flex: 1 1 auto !important;
  }

  body.saudi-pro-league-route-setup-active #premierLeagueRouteSetupControls .mode-card-actions > :not(.start-tournament) {
    width: auto !important;
    min-height: 42px !important;
    flex: 0 0 auto;
  }
}

@media (max-width: 760px) {
  body.saudi-pro-league-route-setup-active .pl-season-header {
    min-height: 60px !important;
    flex-wrap: nowrap !important;
    align-content: center !important;
    padding: 7px 10px !important;
  }

  body.saudi-pro-league-route-setup-active #premierLeagueRouteSetup {
    width: calc(100% - 24px);
    min-height: calc(100dvh - 60px);
    padding: 104px 0 calc(84px + env(safe-area-inset-bottom)) !important;
  }

  body.saudi-pro-league-route-setup-active #premierLeagueRouteSetup > .mode-route-setup-back {
    top: 10px !important;
    left: 0 !important;
    min-height: 38px !important;
  }

  body.saudi-pro-league-route-setup-active .domestic-route-setup-intro {
    top: 58px;
    width: calc(100% - 24px);
    max-width: none;
    justify-content: center;
  }

  body.saudi-pro-league-route-setup-active #premierLeagueRouteSetupControls {
    padding: 10px !important;
  }

  body.saudi-pro-league-route-setup-active #premierLeagueRouteSetupControls .landing-settings {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  body.saudi-pro-league-route-setup-active #premierLeagueRouteSetupControls .landing-setting {
    min-height: 82px;
    padding: 10px !important;
  }

  body.saudi-pro-league-route-setup-active .domestic-inline-team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.saudi-pro-league-route-setup-active .domestic-inline-team-option {
    min-height: 64px !important;
  }
}

@media (max-width: 600px) {
  body.saudi-pro-league-route-setup-active .domestic-inline-team-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch !important;
    gap: 7px !important;
  }

  body.saudi-pro-league-route-setup-active .domestic-inline-team-toolbar > :is(.domestic-inline-achievement-filter, .setup-neutral-choice) {
    width: 100%;
    min-width: 0;
    padding-inline: 8px !important;
    white-space: normal;
  }

  body.saudi-pro-league-route-setup-active .domestic-inline-team-toolbar > .domestic-inline-team-count {
    grid-column: 1 / -1;
    justify-self: end;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  body.saudi-pro-league-route-setup-active .pl-season-header {
    gap: 3px !important;
    padding-inline: 8px !important;
  }

  body.saudi-pro-league-route-setup-active .domestic-route-setup-intro img {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  body.saudi-pro-league-route-setup-active .domestic-route-setup-intro h1 {
    font-size: .95rem;
  }

  body.saudi-pro-league-route-setup-active #premierLeagueRouteSetupControls .mode-card-actions {
    gap: 5px !important;
    padding: 6px !important;
  }

  body.saudi-pro-league-route-setup-active #premierLeagueRouteSetupControls .mode-card-actions > * {
    padding-inline: 9px !important;
    font-size: 9px !important;
  }

  body.saudi-pro-league-route-setup-active .domestic-inline-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.saudi-pro-league-route-setup-active .domestic-inline-team-option {
    grid-template-columns: 34px minmax(0, 1fr) 12px;
    gap: 7px;
    padding: 8px;
  }

  body.saudi-pro-league-route-setup-active .domestic-inline-team-mark,
  body.saudi-pro-league-route-setup-active .domestic-inline-team-mark :is(img, .premier-league-club-code) {
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.saudi-pro-league-route-setup-active #premierLeagueRouteSetup *,
  body.saudi-pro-league-route-setup-active #premierLeagueRouteSetupControls * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 900px) {
  body.pl-season-open #premierLeagueSeasonScreen[data-league-edition^="saudi-pro-league-"] .pl-season-header {
    min-height: 60px !important;
    height: auto !important;
    flex-wrap: nowrap !important;
    align-content: center !important;
    gap: 4px !important;
    padding: 7px 10px !important;
  }

  body.pl-season-open #premierLeagueSeasonScreen[data-league-edition^="saudi-pro-league-"] .pl-season-site-brand .brand-mark {
    width: 40px;
    height: 40px;
  }

  body.pl-season-open #premierLeagueSeasonScreen[data-league-edition^="saudi-pro-league-"] :is(.pl-season-header-left, .pl-season-utility-actions) {
    gap: 4px;
  }
}

@media (max-width: 480px) {
  body.pl-season-open #premierLeagueSeasonScreen[data-league-edition^="saudi-pro-league-"] .pl-season-header {
    gap: 3px !important;
    padding-inline: 8px !important;
  }

  body.pl-season-open #premierLeagueSeasonScreen[data-league-edition^="saudi-pro-league-"] .pl-season-site-brand .brand-mark {
    width: 36px;
    height: 36px;
  }

  body.pl-season-open #premierLeagueSeasonScreen[data-league-edition^="saudi-pro-league-"] .pl-season-header :is(.utility-button, .pl-season-restart-button) {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
}