/* Generated homepage critical styles. Edit src/web/styles/17-wc-1998-final-guards.css. */
/* Simulator hub: shared navigation, restrained desktop width and a dedicated leaderboard. */
.main-section-switch {
  display: none;
}

body.before-start:not([data-desktop-mode-setup]) .main-section-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(129, 151, 184, .2);
  border-radius: 999px;
  background: rgba(14, 22, 34, .78);
}

.main-section-switch a {
  min-height: 38px;
  padding: 9px 15px;
  border-radius: 999px;
  color: #8f9db2;
  font: 800 11px/20px "Manrope", sans-serif;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
}

.main-section-switch a.is-active {
  color: #fff;
  background: #1f5eff;
}

.main-section-switch a:active {
  transform: scale(.97);
}

body.before-start:not([data-desktop-mode-setup]) .topbar {
  display: none;
}

body.before-start:not([data-desktop-mode-setup]) .field-overview {
  display: block;
  width: min(1080px, calc(100% - clamp(48px, 12vw, 160px)));
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 0 72px;
}

body.before-start #fieldOverview[hidden] {
  display: none !important;
}

body.before-start:not([data-desktop-mode-setup]) .mode-select {
  padding: 32px 0 10px;
}

body.before-start:not([data-desktop-mode-setup]) .mode-grid {
  gap: 15px;
}

body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card {
  border-color: rgba(129, 151, 184, .18);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .035), 0 16px 34px rgba(2, 7, 14, .16);
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1), border-color 160ms ease, box-shadow 160ms ease;
}

body.before-start:not([data-desktop-mode-setup]) .home-editorial {
  border-color: rgba(129, 151, 184, .16);
  border-radius: 14px;
  background: rgba(15, 23, 35, .76);
}

.leaderboard-screen[hidden] {
  display: none !important;
}

.leaderboard-screen {
  width: min(920px, calc(100% - 64px));
  margin: 0 auto;
  padding: 42px 0 80px;
}

.leaderboard-intro {
  margin-bottom: 20px;
}

.leaderboard-intro h1 {
  margin: 0;
  color: #f4f7fb;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.05;
  letter-spacing: -1.4px;
}

.leaderboard-intro p {
  max-width: 620px;
  margin: 9px 0 0;
  color: #8e9db1;
  font-size: 13px;
  line-height: 1.6;
}

.leaderboard-screen .home-achievement-leaderboard {
  position: static;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 24px 26px 20px;
  border: 1px solid rgba(129, 151, 184, .18);
  border-radius: 16px;
  background: #101722;
  box-shadow: 0 18px 48px rgba(2, 7, 14, .2);
}

.leaderboard-screen .home-leaderboard-tabs {
  width: fit-content;
  margin: 0 0 18px;
  padding: 4px;
  border-radius: 999px;
}

.leaderboard-screen .home-leaderboard-tabs button {
  min-height: 34px;
  padding-inline: 14px;
  border-radius: 999px;
  font-size: 10px;
}

.leaderboard-screen .home-achievement-table {
  overflow: hidden;
  border: 1px solid #202c3d;
  border-radius: 10px;
}

.leaderboard-screen .home-achievement-row {
  padding-inline: 16px;
}

.leaderboard-screen .home-achievement-row.is-heading {
  background: #131d2b;
}

.leaderboard-screen .home-achievement-own {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #26364c;
  border-radius: 10px;
  background: #141f2f;
}

@media (hover: hover) and (pointer: fine) {
  .main-section-switch a:not(.is-active):hover {
    color: #dce6f6;
    background: #172235;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card:not(.mode-card-coming-soon):hover {
    border-color: rgba(129, 151, 184, .36);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 20px 42px rgba(2, 7, 14, .22);
    transform: translateY(-2px);
  }
}

@media (min-width: 851px) {
  body.before-start:not([data-desktop-mode-setup]) .sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 16px;
  }

  body.before-start:not([data-desktop-mode-setup]) .sidebar .brand {
    position: static;
    grid-column: 1;
    justify-self: start;
    margin: 0;
    transform: none;
  }

  body.before-start:not([data-desktop-mode-setup]) .main-section-switch {
    grid-column: 2;
  }

  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions {
    position: static;
    grid-column: 3;
    justify-self: end;
    margin: 0;
    pointer-events: auto;
  }

  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions #newsButton {
    margin-right: 0;
  }
}

@media (max-width: 1700px) {
  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions .utility-button {
    width: 38px;
    min-width: 38px;
    padding: 0;
  }

  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions .utility-button > span:last-child {
    display: none;
  }
}

@media (max-width: 850px) {
  body.before-start:not([data-desktop-mode-setup]) .sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: 56px auto;
    width: 100%;
    height: auto;
    min-height: 104px;
    gap: 0;
    padding: 0 10px 8px;
  }

  body.before-start:not([data-desktop-mode-setup]) .sidebar .mobile-menu {
    display: none;
  }

  body.before-start:not([data-desktop-mode-setup]) .sidebar .brand {
    position: static;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    transform: none;
  }

  body.before-start:not([data-desktop-mode-setup]) .main-section-switch {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions {
    position: static;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    margin: 0;
    pointer-events: auto;
  }

  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions #newsButton {
    margin-right: 0;
  }

  body.before-start:not([data-desktop-mode-setup]) .field-overview {
    width: calc(100% - 48px);
  }

  .leaderboard-screen {
    width: calc(100% - 48px);
    padding-top: 30px;
  }
}

@media (max-width: 640px) {
  body.before-start:not([data-desktop-mode-setup]) .main-section-switch a {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 10px;
  }

  body.before-start:not([data-desktop-mode-setup]) .field-overview,
  .leaderboard-screen {
    width: calc(100% - 28px);
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-select {
    padding-top: 18px;
  }

  .leaderboard-screen {
    padding: 22px 0 48px;
  }

  .leaderboard-screen .home-achievement-leaderboard {
    padding: 14px 10px 12px;
    border-radius: 13px;
  }

  .leaderboard-screen .home-achievement-row {
    padding-inline: 8px;
  }
}

@media (max-width: 380px) {
  body.before-start:not([data-desktop-mode-setup]) .main-section-switch a {
    min-height: 32px;
    padding: 6px;
    font-size: 9px;
  }
}

/* Keep primary navigation centred while site tools sit at opposite edges. */
@media (min-width: 851px) {
  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions {
    position: absolute;
    left: calc(clamp(24px, 3vw, 48px) + 54px);
    right: clamp(24px, 3vw, 48px);
    display: flex;
    grid-column: auto;
    justify-self: auto;
    margin: 0;
    pointer-events: none;
  }

  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions > * {
    pointer-events: auto;
  }

  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions #newsButton {
    margin-right: auto;
  }

  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions #settingsButton,
  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions #newsButton {
    width: auto;
    min-width: 0;
    padding-inline: 10px;
  }

  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions #settingsButton > span:last-child,
  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions #newsButton > span:last-child {
    display: inline;
  }

  body.before-start:not([data-desktop-mode-setup]) .main-account-button {
    width: auto;
    min-width: 0;
    padding: 5px 10px 5px 7px;
  }
}

.main-account-button .main-account-flag {
  width: 30px;
  height: 20px;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 4px;
}

.main-account-button .main-account-flag.has-profile-flag {
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 3px 9px rgba(2, 7, 14, .2);
}

.main-account-button .main-account-flag > .country-flag,
.main-account-button .main-account-flag > img,
.main-account-button .main-account-flag .main-account-flag-image,
.main-account-button .main-account-flag .main-account-flag-image > img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

@media (min-width: 1181px) {
  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions .main-account-button {
    width: auto;
    min-width: 0;
    padding: 5px 10px 5px 7px;
  }

  body.before-start:not([data-desktop-mode-setup]) .main-account-button > #mainAccountLabel {
    display: inline;
  }
}

/* Simulator hub v2: one blue system with deliberate ad-safe gutters. */
body.before-start:not([data-desktop-mode-setup]) {
  --hub-bg: #045d80;
  --hub-surface: #0784b5;
  --hub-surface-strong: #06739e;
  --hub-accent: #006e98;
  --hub-line: rgba(190, 237, 255, .24);
  --hub-muted: rgba(226, 247, 255, .74);
  background: var(--hub-bg);
}

body.before-start:not([data-desktop-mode-setup]) .app-shell,
body.before-start:not([data-desktop-mode-setup]) .main {
  background:
    radial-gradient(circle at 12% 8%, rgba(70, 198, 239, .2), transparent 26%),
    radial-gradient(circle at 88% 34%, rgba(0, 77, 109, .22), transparent 30%),
    linear-gradient(155deg, #056b91 0%, var(--hub-bg) 52%, #045572 100%);
}

body.before-start:not([data-desktop-mode-setup]) .sidebar {
  border-bottom: 1px solid var(--hub-line);
  background: rgba(4, 83, 113, .94);
  box-shadow: 0 12px 30px rgba(1, 40, 57, .15);
  backdrop-filter: blur(18px);
}

body.before-start:not([data-desktop-mode-setup]) .main-section-switch {
  border-color: var(--hub-line);
  background: rgba(2, 70, 98, .52);
}

body.before-start:not([data-desktop-mode-setup]) .main-section-switch a {
  color: var(--hub-muted);
}

body.before-start:not([data-desktop-mode-setup]) .main-section-switch a.is-active {
  color: #fff;
  background: var(--hub-accent);
  box-shadow: 0 6px 18px rgba(1, 40, 57, .2);
}

body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions :is(
  .utility-button,
  .header-donate-link
) {
  border-color: transparent;
  color: #eaf9ff;
  background: transparent;
}

body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions :is(
  .utility-button,
  .header-donate-link
):active {
  transform: scale(.97);
}

body.before-start:not([data-desktop-mode-setup]) .main-account-button {
  border-color: var(--hub-line) !important;
  background: rgba(2, 70, 98, .54) !important;
}

body.before-start:not([data-desktop-mode-setup]) .mode-select {
  padding-top: 28px;
}

body.before-start:not([data-desktop-mode-setup]) .mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card {
  grid-column: auto !important;
  min-height: 138px !important;
  height: 138px;
  padding: 18px 20px;
  border: 1px solid var(--hub-line);
  border-radius: 15px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(9, 151, 202, .92), rgba(7, 132, 181, .94) 56%, rgba(6, 111, 153, .98)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 16px 34px rgba(1, 40, 57, .18);
}

body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card:nth-child(3n + 2) {
  background:
    linear-gradient(145deg, rgba(8, 143, 193, .94), rgba(7, 122, 168, .96) 58%, rgba(6, 103, 143, .98)) !important;
}

body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card:nth-child(3n + 3) {
  background:
    linear-gradient(145deg, rgba(11, 158, 207, .9), rgba(6, 119, 164, .96) 58%, rgba(5, 98, 136, .98)) !important;
}

body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card::before,
body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card::after {
  opacity: .12;
}

body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card.mode-card-retro {
  display: flex;
}

body.before-start:not([data-desktop-mode-setup]) .mode-card-copy h3,
body.before-start:not([data-desktop-mode-setup]) .mode-card-copy :is(strong, span) {
  color: #fff;
}

body.before-start:not([data-desktop-mode-setup]) .mode-card-copy h3 {
  font-size: clamp(17px, 1.35vw, 20px);
  letter-spacing: -.025em;
}

body.before-start:not([data-desktop-mode-setup]) .mode-card-copy p,
body.before-start:not([data-desktop-mode-setup]) .mode-card :is(small, .mode-availability) {
  color: var(--hub-muted);
}

body.before-start:not([data-desktop-mode-setup]) .mode-card .mode-card-actions,
body.before-start:not([data-desktop-mode-setup]) .mode-card-retro .mode-card-actions {
  left: 20px;
  bottom: 16px;
}

body.before-start:not([data-desktop-mode-setup]) .mode-card-actions > .start-tournament:first-child,
body.before-start:not([data-desktop-mode-setup]) .mode-card .mode-coming-soon-button,
body.before-start:not([data-desktop-mode-setup]) .mode-card-online #joinOnlineRoomButton {
  min-height: 34px;
  border: 1px solid rgba(190, 237, 255, .28);
  border-radius: 8px;
  color: #fff;
  background: var(--hub-accent);
  box-shadow: 0 8px 18px rgba(1, 40, 57, .18);
}

body.before-start:not([data-desktop-mode-setup]) .mode-card :is(
  .primary-button,
  .start-tournament,
  .custom-match-card-button
) {
  border-color: rgba(190, 237, 255, .28) !important;
  color: #fff !important;
  background: var(--hub-accent) !important;
  box-shadow: 0 8px 18px rgba(1, 40, 57, .18) !important;
}

body.before-start:not([data-desktop-mode-setup]) .mode-card .mode-coming-soon-button,
body.before-start:not([data-desktop-mode-setup]) .mode-card-online #joinOnlineRoomButton {
  color: rgba(226, 247, 255, .68);
  background: rgba(2, 70, 98, .4);
  box-shadow: none;
}

body.before-start:not([data-desktop-mode-setup]) :is(
  .premier-league-install-button,
  .serie-a-install-button,
  .bundesliga-install-button,
  .super-lig-install-button,
  .eredivisie-install-button,
  .belgian-pro-league-install-button,
  .liga-portugal-install-button,
  .saudi-pro-league-install-button,
  .mls-install-button,
  .ucl-install-button
) {
  border-color: var(--hub-line);
  color: #eaf9ff;
  background: rgba(2, 70, 98, .48);
}

body.before-start:not([data-desktop-mode-setup]) :is(
  .domestic-league-panel,
  .mode-card-premier-league,
  .mode-card-ucl .ucl-mode-heading
) {
  background: transparent !important;
}

body.before-start:not([data-desktop-mode-setup]) :is(
  .domestic-league-switch,
  .domestic-english-league-switch,
  .retro-competition-switch,
  .retro-year-switch,
  .club-competition-switch
) {
  border-color: var(--hub-line) !important;
  background: rgba(2, 70, 98, .4) !important;
  box-shadow: none !important;
}

body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card-coming-soon,
body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card-community-workshop {
  min-height: 106px !important;
  height: 106px;
  border-style: dashed;
  background: rgba(7, 119, 162, .72) !important;
  box-shadow: none;
}

body.before-start:not([data-desktop-mode-setup]) .mode-card-domestic-league { order: 1; }
body.before-start:not([data-desktop-mode-setup]) .mode-card-retro { order: 2; }
body.before-start:not([data-desktop-mode-setup]) .mode-card-ucl { order: 3; }
body.before-start:not([data-desktop-mode-setup]) .mode-card-default { order: 4; }
body.before-start:not([data-desktop-mode-setup]) .mode-card-custom { order: 5; }
body.before-start:not([data-desktop-mode-setup]) .mode-card-legacy { order: 6; }
body.before-start:not([data-desktop-mode-setup]) .mode-card-community-workshop { order: 7; }
body.before-start:not([data-desktop-mode-setup]) .mode-card-career-player { order: 8; }
body.before-start:not([data-desktop-mode-setup]) .mode-card-career-manager { order: 9; }
body.before-start:not([data-desktop-mode-setup]) .mode-card-career-club-manager { order: 10; }
body.before-start:not([data-desktop-mode-setup]) .mode-card-online { order: 11; }

body.before-start:not([data-desktop-mode-setup]) .home-editorial {
  margin-top: 16px;
  border-color: var(--hub-line);
  background: rgba(2, 70, 98, .44);
  box-shadow: 0 12px 28px rgba(1, 40, 57, .12);
}

body.before-start:not([data-desktop-mode-setup]) .home-editorial :is(h2, a) {
  color: #eaf9ff;
}

body.before-start:not([data-desktop-mode-setup]) .home-editorial-links a {
  border-color: var(--hub-line);
  background: rgba(2, 70, 98, .42);
}

@media (hover: hover) and (pointer: fine) {
  body.before-start:not([data-desktop-mode-setup]) .sidebar .header-actions :is(
    .utility-button,
    .header-donate-link
  ):hover {
    border-color: var(--hub-line);
    color: #fff;
    background: rgba(2, 70, 98, .5);
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card:not(.mode-card-coming-soon):hover {
    border-color: rgba(190, 237, 255, .46);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 20px 42px rgba(1, 40, 57, .23);
    transform: translateY(-2px);
  }
}

@media (min-width: 1181px) {
  body.before-start:not([data-desktop-mode-setup]) .field-overview,
  body.before-start:not([data-desktop-mode-setup]) .leaderboard-screen {
    width: min(1080px, calc(100% - clamp(300px, 25vw, 420px)));
    max-width: 1080px;
    padding-bottom: 156px;
  }
}

@media (min-width: 851px) and (max-width: 1180px) {
  body.before-start:not([data-desktop-mode-setup]) .field-overview,
  body.before-start:not([data-desktop-mode-setup]) .leaderboard-screen {
    width: min(720px, calc(100% - 320px));
    padding-bottom: 150px;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card,
  body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card.mode-card-retro,
  body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card.mode-card-custom {
    grid-column: auto !important;
    min-height: 138px !important;
    height: 138px;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card-coming-soon,
  body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card-community-workshop {
    min-height: 106px !important;
    height: 106px;
  }
}

@media (max-width: 850px) {
  body.before-start:not([data-desktop-mode-setup]) .field-overview,
  body.before-start:not([data-desktop-mode-setup]) .leaderboard-screen {
    width: calc(100% - 28px);
    padding-bottom: 118px;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-select {
    padding-top: 16px;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card,
  body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card.mode-card-retro,
  body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card.mode-card-custom {
    grid-column: auto !important;
    min-height: 142px !important;
    height: auto;
    padding: 18px;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card-coming-soon,
  body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card-community-workshop {
    min-height: 106px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.before-start:not([data-desktop-mode-setup]) .mode-grid > .mode-card {
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }
}