/* Theme selection reuses the real edition skins already present in clean.css.
   This file only keeps the picker neutral and adapts the standard/custom shell. */

.feature-announcement-match-themes {
  background: #09111e;
}

.feature-announcement-match-themes .feature-announcement-accent {
  min-height: 174px;
  background:
    radial-gradient(circle at 50% 20%, rgba(104, 146, 255, .42), transparent 42%),
    linear-gradient(135deg, #071a38 0%, #12498a 52%, #5b1736 100%);
}

.feature-announcement-match-themes .feature-announcement-accent::after {
  height: 128px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .16));
}

.match-themes-announcement-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
}

.match-themes-announcement-logo {
  display: grid;
  width: 74px;
  height: 88px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 14px;
  background: rgba(4, 13, 31, .58);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
}

.match-themes-announcement-logo img {
  width: 54px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, .3));
}

.match-themes-announcement-logo-main {
  z-index: 2;
  width: 88px;
  height: 104px;
  margin: 0 -5px;
  border-color: rgba(255, 255, 255, .38);
  transform: translateY(-2px);
}

.match-themes-announcement-logo-main img {
  width: 66px;
  height: 76px;
}

.match-themes-announcement-logo-left { transform: rotate(-7deg) translateX(3px); }
.match-themes-announcement-logo-right { transform: rotate(7deg) translateX(-3px); }

.feature-announcement-match-themes .feature-announcement-label { color: #86aaff; }
.feature-announcement-match-themes .feature-announcement-button {
  color: #fff;
  background: #315fca;
}

.feature-announcement-match-themes .feature-announcement-button:hover { background: #3e70dd; }

/* The picker is opened from the homepage while the edition bundles remain
   deferred. Keep its structural rules here so Settings never has to activate
   the legacy simulator catalog just to lay out these controls. */
.tournament-theme-setting {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
}

.tournament-theme-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.tournament-theme-heading > div {
  display: grid;
  gap: 4px;
}

.tournament-edition-options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-height: none;
  gap: 8px !important;
  overflow-x: hidden;
  overflow-y: visible;
  padding: 0 !important;
}

.tournament-edition-options > button {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 42px auto !important;
  gap: 5px !important;
  min-width: 0;
  min-height: 76px !important;
  padding: 8px 6px 7px !important;
  justify-items: center;
  text-align: center;
  overflow: hidden;
}

.tournament-edition-options > button > img {
  position: static !important;
  display: block !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .22));
}

.tournament-theme-off-icon {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #536176;
  border-radius: 50%;
}

.tournament-theme-off-icon::after {
  width: 24px;
  height: 2px;
  content: "";
  border-radius: 2px;
  background: currentColor;
  transform: rotate(-45deg);
}

/* The source artwork has a large transparent area below the badge. Crop that
   empty canvas so the visible Euro mark sits centrally like the other logos. */
.tournament-edition-options > button[data-tournament-theme-option="2016"] > img {
  object-fit: cover !important;
  object-position: center top !important;
}

.tournament-edition-options > button > strong {
  min-width: 0;
  font: 800 11px/1 "DM Mono", monospace !important;
  letter-spacing: .04em;
}

.tournament-edition-options > button .tournament-theme-check {
  position: absolute !important;
  top: 6px;
  right: 6px;
  display: grid;
  width: 18px !important;
  height: 18px !important;
  place-items: center;
  border: 1px solid #46536a;
  border-radius: 50%;
  color: transparent;
  font-size: 10px;
  font-style: normal;
}

.tournament-edition-options > button.is-selected .tournament-theme-check {
  border-color: #9fdff7;
  color: #07101d;
  background: #9fdff7;
}

html body #settingsModal.settings-modal {
  width: min(560px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow-x: hidden !important;
  border: 1px solid #26354a !important;
  border-radius: 12px !important;
  color: #f1f4f9 !important;
  background: #0b121d !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48) !important;
  font-family: "Manrope", system-ui, sans-serif !important;
}

html body #settingsModal.settings-modal form {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html body #settingsModal.settings-modal :is(.modal-head h2, .tournament-theme-heading strong, .tournament-theme-options strong, .settings-option-copy strong) {
  color: #f1f4f9 !important;
  font-family: "Manrope", system-ui, sans-serif !important;
}

html body #settingsModal.settings-modal :is(.tournament-theme-heading small, .tournament-theme-options small, .settings-option-copy small, .settings-note) {
  color: #8794a8 !important;
}

html body #settingsModal.settings-modal :is(.tournament-theme-setting, .settings-keybind-list) {
  border-color: #26354a !important;
  color: #f1f4f9 !important;
  background: #0e1724 !important;
}

html body #settingsModal.settings-modal :is(.tournament-theme-options > button, .settings-option) {
  border-color: #2b3b51 !important;
  border-radius: 8px !important;
  color: #e8edf5 !important;
  background: #121c2a !important;
  box-shadow: none !important;
}

html body #settingsModal.settings-modal .tournament-theme-heading > span {
  border-color: #3b4c65 !important;
  color: #a9bad2 !important;
  background: #121c2a !important;
}

html body #settingsModal.settings-modal .close-modal {
  border: 1px solid #2b3b51 !important;
  color: #d8e0eb !important;
  background: #121c2a !important;
  box-shadow: none !important;
}

html.light-mode body #settingsModal.settings-modal {
  border-color: #d7dfe9 !important;
  color: #172033 !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(30, 42, 65, .2) !important;
}

html.light-mode body #settingsModal.settings-modal :is(.modal-head h2, .tournament-theme-heading strong, .tournament-theme-options strong, .settings-option-copy strong) {
  color: #172033 !important;
}

html.light-mode body #settingsModal.settings-modal :is(.tournament-theme-heading small, .tournament-theme-options small, .settings-option-copy small, .settings-note) {
  color: #637087 !important;
}

html.light-mode body #settingsModal.settings-modal :is(.tournament-theme-setting, .settings-keybind-list) {
  border-color: #dbe2eb !important;
  color: #172033 !important;
  background: #f7f9fc !important;
}

html.light-mode body #settingsModal.settings-modal :is(.tournament-theme-options > button, .settings-option) {
  border-color: #d7dfe9 !important;
  color: #172033 !important;
  background: #fff !important;
}

html.light-mode body #settingsModal.settings-modal :is(.tournament-theme-heading > span, .close-modal) {
  border-color: #d2dbe7 !important;
  color: #45536a !important;
  background: #f4f7fb !important;
}

body.authentic-tournament-theme-active.tournament-theme-shared-shell-active #appShell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .retro-tournament-screen {
  display: none !important;
}

body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar {
  --theme-banner-bg: linear-gradient(110deg, #08274f, #174f92);
  --theme-banner-line: #e7edf7;
  --theme-banner-text: #fff;
  --theme-banner-muted: #d4deec;
  --theme-banner-control: rgba(3, 17, 43, .56);
  --theme-banner-control-line: rgba(255, 255, 255, .28);
  --theme-banner-logo: url("./assets/retro-1998/france-98-logo.webp");
  width: 100% !important;
  max-width: none !important;
  min-height: 88px !important;
  border: 0 !important;
  border-bottom: 5px solid var(--theme-banner-line) !important;
  color: var(--theme-banner-text) !important;
  background: var(--theme-banner-bg) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28) !important;
}

html[data-tournament-theme="2002"] body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar {
  --theme-banner-bg: linear-gradient(105deg, #062f5b 0 44%, #075891 44% 74%, #052849 74%);
  --theme-banner-line: #ffd21f;
  --theme-banner-muted: #d6e7f5;
  --theme-banner-control: rgba(3, 21, 47, .68);
  --theme-banner-control-line: rgba(255, 210, 31, .48);
  --theme-banner-logo: url("./assets/retro-2002/worldcup-2002-logo.png");
}

html[data-tournament-theme="2006"] body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar {
  --theme-banner-bg: linear-gradient(104deg, rgba(216, 239, 247, .98) 0 22%, #0b5274 38% 76%, #073550 76%);
  --theme-banner-line: #d6aa21;
  --theme-banner-muted: #dceef5;
  --theme-banner-control: rgba(3, 27, 43, .66);
  --theme-banner-control-line: rgba(216, 239, 247, .42);
  --theme-banner-logo: url("./assets/retro-world-cup-2006.png");
}

html[data-tournament-theme="2010"] body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar {
  --theme-banner-bg: linear-gradient(108deg, #2c1a13 0 30%, #743513 30% 72%, #3b2116 72%);
  --theme-banner-line: #ffd34f;
  --theme-banner-muted: #f0c890;
  --theme-banner-control: rgba(48, 25, 16, .72);
  --theme-banner-control-line: rgba(255, 211, 79, .4);
  --theme-banner-logo: url("./assets/retro-2010/worldcup-2010-logo.png");
}

html[data-tournament-theme="2014"] body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar {
  --theme-banner-bg: linear-gradient(105deg, rgba(0, 83, 53, .98), rgba(0, 112, 69, .95) 62%, rgba(0, 74, 174, .94));
  --theme-banner-line: #f4ce22;
  --theme-banner-muted: #e3f1da;
  --theme-banner-control: rgba(0, 61, 40, .64);
  --theme-banner-control-line: rgba(244, 206, 34, .44);
  --theme-banner-logo: url("./assets/retro-world-cup-2014.png");
}

html[data-tournament-theme="2016"] body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar {
  --theme-banner-bg: radial-gradient(circle at 68% 15%, rgba(28, 199, 238, .28), transparent 28%), linear-gradient(110deg, #020c2d, #0756aa 68%, #043878);
  --theme-banner-line: #1cc7ee;
  --theme-banner-muted: #c8eef8;
  --theme-banner-control: rgba(2, 17, 58, .68);
  --theme-banner-control-line: rgba(28, 199, 238, .42);
  --theme-banner-logo: url("./assets/euro-2016-logo.png");
}

html[data-tournament-theme="2018"] body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar {
  --theme-banner-bg: linear-gradient(108deg, #671018 0 33%, #a51a16 33% 72%, #07345f 72%);
  --theme-banner-line: #e9c477;
  --theme-banner-muted: #f0d9aa;
  --theme-banner-control: rgba(82, 9, 21, .7);
  --theme-banner-control-line: rgba(233, 196, 119, .44);
  --theme-banner-logo: url("./assets/retro-world-cup-2018.png");
}

html[data-tournament-theme="2022"] body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar {
  --theme-banner-bg: linear-gradient(108deg, #18070e 0 28%, #77153b 28% 72%, #2d0a19 72%);
  --theme-banner-line: #c9a96a;
  --theme-banner-muted: #d7c6bd;
  --theme-banner-control: rgba(21, 5, 12, .72);
  --theme-banner-control-line: rgba(201, 169, 106, .4);
  --theme-banner-logo: url("./assets/retro-world-cup-2022.png");
}

html[data-tournament-theme="2026"] body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar {
  --theme-banner-bg: radial-gradient(circle at 78% 20%, rgba(73, 116, 255, .96) 0 18%, transparent 18.4%), linear-gradient(108deg, #030b28 0 26%, #0a45ff 26% 78%, #06164c 78%);
  --theme-banner-line: #ff9e2f;
  --theme-banner-muted: #d7e1ff;
  --theme-banner-control: rgba(3, 11, 40, .7);
  --theme-banner-control-line: rgba(255, 158, 47, .5);
  --theme-banner-logo: url("./assets/world-cup-2026-logo.png");
}

body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar .brand {
  width: 92px !important;
  height: 68px !important;
  background: var(--theme-banner-logo) center / contain no-repeat !important;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .3));
}

body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar .brand-mark {
  visibility: hidden !important;
}

body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar :is(.utility-button, .header-new-tournament, .legacy-header-back) {
  border: 1px solid var(--theme-banner-control-line) !important;
  border-radius: 8px !important;
  color: var(--theme-banner-muted) !important;
  background: var(--theme-banner-control) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1) !important;
}

body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar :is(.utility-button, .header-new-tournament, .legacy-header-back):hover {
  color: var(--theme-banner-text) !important;
  border-color: var(--theme-banner-line) !important;
}

body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar .header-donate-link {
  color: #111 !important;
  background: var(--theme-banner-line) !important;
}

body.authentic-tournament-theme-active.tournament-theme-shared-shell-active .sidebar .account-avatar-icon svg {
  stroke: currentColor !important;
}

@media (max-width: 480px) {
  .tournament-edition-options {
    gap: 6px !important;
  }

  .tournament-edition-options > button {
    min-height: 70px !important;
  }

  .tournament-edition-options > button > img {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }
}

/* Default and custom knockout: blue skin only. Geometry remains owned by the
   existing simulator layout and responsive styles. */
body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) {
  --knockout-blue: #0784b5;
  --knockout-blue-deep: #045d80;
  --knockout-blue-dark: #034e6c;
  --knockout-blue-soft: #1298c7;
  --knockout-panel: #0879a5;
  --knockout-panel-deep: #05678e;
  --knockout-line: rgba(164, 232, 255, .3);
  --knockout-text: #f7fcff;
  --knockout-muted: #c3eafb;
  color: var(--knockout-text) !important;
  background:
    radial-gradient(circle at 10% 8%, rgba(84, 207, 246, .16), transparent 30%),
    linear-gradient(180deg, var(--knockout-blue) 0%, #056f99 46%, var(--knockout-blue-deep) 100%) fixed !important;
  background-image:
    radial-gradient(circle at 10% 8%, rgba(84, 207, 246, .16), transparent 30%),
    linear-gradient(180deg, var(--knockout-blue) 0%, #056f99 46%, var(--knockout-blue-deep) 100%) !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) :is(#appShell, .main, #mainContent) {
  color: var(--knockout-text) !important;
  background-color: transparent !important;
  background-image: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar {
  --theme-banner-bg: linear-gradient(110deg, #034e6c, #0784b5 55%, #05698f);
  --theme-banner-line: rgba(164, 232, 255, .34);
  --theme-banner-text: #fff;
  --theme-banner-muted: #c8efff;
  --theme-banner-control: rgba(3, 77, 105, .58);
  --theme-banner-control-line: rgba(164, 232, 255, .28);
  color: #fff !important;
  border-color: var(--theme-banner-line) !important;
  background: var(--theme-banner-bg) !important;
  box-shadow: 0 8px 24px rgba(2, 53, 74, .18) !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar :is(.utility-button, .header-new-tournament, .legacy-header-back) {
  color: var(--theme-banner-muted) !important;
  border-color: var(--theme-banner-control-line) !important;
  background: var(--theme-banner-control) !important;
  box-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-donate-link {
  color: #fff !important;
  background: rgba(18, 152, 199, .92) !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .legacy-topbar-back {
  color: #fff !important;
  border-color: var(--knockout-line) !important;
  background: rgba(3, 78, 108, .72) !important;
  box-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .legacy-topbar-back > span:first-child {
  color: #9be7ff !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent :is(
  .match-stage,
  .round-board,
  .panel,
  .match-analysis,
  .standard-match-tactics,
  .retro-match-lineups-panel
) {
  color: var(--knockout-text) !important;
  border-color: var(--knockout-line) !important;
  background-color: var(--knockout-panel-deep) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .06), transparent 48%) !important;
  box-shadow: 0 12px 28px rgba(2, 53, 74, .14) !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent :is(.match-stage, .round-board, .panel, .match-analysis, .standard-match-tactics)::before,
body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent :is(.match-stage, .round-board, .panel, .match-analysis, .standard-match-tactics)::after {
  border-color: rgba(141, 222, 250, .24) !important;
  background-color: rgba(18, 152, 199, .32) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent .team {
  color: #fff !important;
  border-color: rgba(164, 232, 255, .2) !important;
  background-color: rgba(3, 73, 101, .3) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* The default 256-team knockout uses one open scoreboard surface. */
body.standard-mode-active.authentic-tournament-theme-active.tournament-theme-shared-shell-active:not(.before-start):not(.custom-tournament-mode-active):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent #matchStage .matchup > .team {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.standard-mode-active.authentic-tournament-theme-active.tournament-theme-shared-shell-active:not(.before-start):not(.custom-tournament-mode-active):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent #matchStage .result-note:not([hidden]) {
  color: var(--knockout-text) !important;
  opacity: 1 !important;
  font-weight: 800;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent :is(.team-name, .team-name > span, .match-score, .score-separator) {
  color: #fff !important;
  text-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent :is(.stage-round, .stage-topline, .match-number) {
  color: var(--knockout-muted) !important;
  text-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent :is(.primary-button, .play-button, .secondary-button, .live-control, #simulateRoundButton, .custom-live-back-button) {
  color: #fff !important;
  border-color: rgba(209, 244, 255, .34) !important;
  background: linear-gradient(145deg, var(--knockout-blue-soft), var(--knockout-blue)) !important;
  box-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent .spoiler-panel {
  color: #fff !important;
  border-color: var(--knockout-line) !important;
  background: rgba(3, 67, 94, .64) !important;
  box-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent .spoiler-panel p {
  color: var(--knockout-muted) !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent :is(.panel-heading, .match-analysis-heading, .retro-match-lineups-panel > summary) {
  color: #fff !important;
  border-color: rgba(164, 232, 255, .18) !important;
  background: rgba(3, 73, 101, .36) !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent :is(
  .panel-heading span,
  .panel-heading strong,
  .match-analysis-heading span,
  .match-analysis-heading strong,
  #goldenBootTitle,
  .golden-boot-player strong,
  .golden-boot-row > b,
  .match-stat-row b,
  .golden-boot-empty p
) {
  color: #fff !important;
  text-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent :is(
  .golden-boot-row,
  .match-stat-row,
  .golden-boot-player small,
  .standard-match-tactics > span,
  .standard-match-tactics > small
) {
  color: var(--knockout-muted) !important;
  border-color: rgba(164, 232, 255, .16) !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent .standard-tactic-buttons {
  border-color: rgba(164, 232, 255, .2) !important;
  background-color: rgba(3, 73, 101, .24) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent .standard-tactic-buttons button {
  color: var(--knockout-muted) !important;
  border-color: rgba(164, 232, 255, .2) !important;
  background: rgba(3, 73, 101, .4) !important;
  box-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent .standard-tactic-buttons button.active {
  color: #fff !important;
  border-color: rgba(209, 244, 255, .56) !important;
  background: var(--knockout-blue) !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #roundBoard :is(
  .team-filter-search,
  .history-round-button,
  .text-button,
  .secondary-button,
  .load-more,
  .go-to-top
) {
  color: var(--knockout-muted) !important;
  border-color: rgba(164, 232, 255, .28) !important;
  background: rgba(3, 73, 101, .42) !important;
  box-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #roundBoard .team-filter-search input,
body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #roundBoard .team-filter-search input::placeholder {
  color: var(--knockout-muted) !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #fixtureGrid .fixture {
  color: var(--knockout-muted) !important;
  border-color: rgba(164, 232, 255, .18) !important;
  background-color: rgba(3, 73, 101, .42) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #fixtureGrid .fixture.selected {
  border-color: rgba(209, 244, 255, .68) !important;
  background-color: rgba(18, 152, 199, .68) !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #fixtureGrid .fixture.selected::before {
  background: #80ddfa !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #fixtureGrid :is(
  .fixture-card-head,
  .fixture-card-head small,
  .fixture-team
) {
  color: var(--knockout-muted) !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #fixtureGrid :is(
  .fixture-team b,
  .fixture-team.winner,
  .fixture-team.winner b
) {
  color: #fff !important;
}

/* The stage itself is only a layout wrapper; the team panels carry the skin. */
body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent .match-stage {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent .match-stage::before,
body:is(.standard-mode-active, .custom-tournament-mode-active):not(.authentic-tournament-theme-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #mainContent .match-stage::after {
  border-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
}

/* Live knockout header: use the same shell as the Simulator and Predict hubs. */
body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  grid-template-rows: 60px !important;
  width: 100% !important;
  min-height: 60px !important;
  height: 60px !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 clamp(16px, 4vw, 44px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--theme-banner-control-line, rgba(190, 237, 255, .18)) !important;
  background: var(--theme-banner-bg, rgba(4, 93, 128, .94)) !important;
  box-shadow: 0 8px 24px rgba(1, 40, 57, .18) !important;
  backdrop-filter: blur(16px) !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar :is(
  .mobile-menu,
  .header-new-tournament,
  .legacy-header-back,
  .tournament-status,
  .round-nav
) {
  display: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .brand {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: auto !important;
  height: auto !important;
  justify-self: start !important;
  margin: 0 !important;
  background: none !important;
  filter: none !important;
  transform: none !important;
}

body.authentic-tournament-theme-active.tournament-theme-shared-shell-active:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start) .sidebar .brand {
  width: 54px !important;
  height: 44px !important;
  background: var(--theme-banner-logo) center / contain no-repeat !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .28)) !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .brand-mark {
  visibility: visible !important;
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: #5f8cff !important;
  box-shadow: none !important;
}

body.authentic-tournament-theme-active.tournament-theme-shared-shell-active:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start) .sidebar .brand-mark {
  visibility: hidden !important;
}

body.authentic-tournament-theme-active.tournament-theme-shared-shell-active:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start) #appShell > .sidebar {
  border-bottom-color: var(--theme-banner-control-line) !important;
  background: var(--theme-banner-bg) !important;
}

body.authentic-tournament-theme-active.tournament-theme-shared-shell-active:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start) #appShell > .sidebar .brand {
  width: 54px !important;
  height: 44px !important;
  background: var(--theme-banner-logo) center / contain no-repeat !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .28)) !important;
}

body.authentic-tournament-theme-active.tournament-theme-shared-shell-active:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start) #appShell > .sidebar .brand-mark {
  visibility: hidden !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .main-section-switch {
  position: static !important;
  display: flex !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 4px !important;
  border: 1px solid var(--theme-banner-control-line, rgba(190, 237, 255, .24)) !important;
  border-radius: 999px !important;
  background: var(--theme-banner-control, rgba(2, 70, 98, .48)) !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .main-section-switch a {
  min-height: 38px !important;
  padding: 9px 15px !important;
  border-radius: 999px !important;
  color: var(--theme-banner-muted, #c9efff) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .main-section-switch a.is-active {
  color: #fff !important;
  background: color-mix(in srgb, var(--theme-banner-line, #006e98) 72%, transparent) !important;
  box-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  gap: 6px !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions #newsButton {
  margin-right: 0 !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions .utility-button {
  min-height: 42px !important;
  border: 1px solid var(--theme-banner-control-line, rgba(190, 237, 255, .24)) !important;
  border-radius: 999px !important;
  color: var(--theme-banner-muted, #c9efff) !important;
  background: var(--theme-banner-control, rgba(2, 70, 98, .48)) !important;
  box-shadow: none !important;
}

body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions .main-account-button {
  background: color-mix(in srgb, var(--theme-banner-line, #0784b5) 34%, var(--theme-banner-control, rgba(7, 132, 181, .72))) !important;
}

@media (max-width: 1700px) {
  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions .utility-button,
  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions #settingsButton,
  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions #newsButton {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
  }

  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions .utility-button > span:last-child,
  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions #settingsButton > span:last-child,
  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions #newsButton > span:last-child {
    display: none !important;
  }
}

@media (max-width: 720px) {
  body.standard-mode-active.authentic-tournament-theme-active.tournament-theme-shared-shell-active:not(.before-start) #matchStage .team-name,
  body.custom-tournament-mode-active.authentic-tournament-theme-active.tournament-theme-shared-shell-active:not(.before-start) #matchStage .team-name {
    min-height: 2.4em !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.12 !important;
    text-align: center !important;
  }

  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: 60px 52px !important;
    min-height: 120px !important;
    height: 120px !important;
    padding: 0 10px 8px !important;
    border-bottom: 0 !important;
    background: linear-gradient(to bottom, rgba(4, 93, 128, .98) 0 60px, transparent 60px) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }

  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    gap: 3px !important;
    max-width: calc(100vw - 70px) !important;
  }

  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .main-section-switch {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: center !important;
    width: min(100%, 340px) !important;
    margin: 7px 0 0 !important;
  }

  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .main-section-switch a {
    flex: 1 1 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions .utility-button,
  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions #settingsButton,
  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions #newsButton {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }
}

@media (max-width: 380px) {
  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions {
    gap: 1px !important;
  }

  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions .utility-button,
  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions #settingsButton,
  body:is(.standard-mode-active, .custom-tournament-mode-active):not(.before-start):not(.custom-match-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions #newsButton {
    width: 35px !important;
    min-width: 35px !important;
    height: 35px !important;
    min-height: 35px !important;
  }
}