/* v4047 — 提亮紫蓝导航，并让联盟圆形按钮完全遮住底层边框。 */

:root {
  --nav-shell-top: #344ca8;
  --nav-shell-bottom: #213585;
  --nav-gold: #f3d36f;
  --nav-text: #f8f8ff;
  --nav-active: #fff2bd;
  --nav-violet: rgba(130, 112, 224, 0.34);
}

/* One shell on every primary page; page-specific styles must not recolor it. */
html body.theme-pearl-blue #lobby > .bottom-nav,
html body.theme-pearl-blue #clubPage.club-page > .bottom-nav,
html body.theme-pearl-blue #adminPage.admin-page > .bottom-nav {
  border: 1px solid rgba(243, 211, 111, 0.9) !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(177, 155, 255, 0.34), transparent 56%),
    linear-gradient(180deg, var(--nav-shell-top), var(--nav-shell-bottom)) !important;
  box-shadow:
    0 10px 26px rgba(22, 25, 91, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(112, 93, 214, 0.32) !important;
}

html body.theme-pearl-blue #lobby > .bottom-nav::after,
html body.theme-pearl-blue #clubPage.club-page > .bottom-nav::after,
html body.theme-pearl-blue #adminPage.admin-page > .bottom-nav::after {
  border: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(243, 211, 111, 0.75), transparent) !important;
  box-shadow: 0 0 10px rgba(243, 211, 111, 0.34) !important;
}

/* Identical normal and selected colors on all three pages. */
html body.theme-pearl-blue #lobby > .bottom-nav > button,
html body.theme-pearl-blue #clubPage.club-page > .bottom-nav > button,
html body.theme-pearl-blue #adminPage.admin-page > .bottom-nav > button {
  border: 0 !important;
  background: transparent !important;
  color: var(--nav-text) !important;
  box-shadow: none !important;
  text-shadow: 0 1px 5px rgba(5, 12, 51, 0.56) !important;
}

html body.theme-pearl-blue #lobby > .bottom-nav > button:not(.league-main)::before,
html body.theme-pearl-blue #clubPage.club-page > .bottom-nav > button:not(.league-main)::before,
html body.theme-pearl-blue #adminPage.admin-page > .bottom-nav > button:not(.league-main)::before {
  color: inherit !important;
  background-color: currentColor !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 4px rgba(5, 12, 51, 0.42)) !important;
}

html body.theme-pearl-blue #lobby > .bottom-nav > button.active,
html body.theme-pearl-blue #clubPage.club-page > .bottom-nav > button.active,
html body.theme-pearl-blue #adminPage.admin-page > .bottom-nav > button.active {
  border: 0 !important;
  background: transparent !important;
  color: var(--nav-active) !important;
  box-shadow: none !important;
  text-shadow: 0 0 10px rgba(243, 211, 111, 0.46) !important;
}

html body.theme-pearl-blue #lobby > .bottom-nav > button.active:not(.league-main)::after,
html body.theme-pearl-blue #clubPage.club-page > .bottom-nav > button.active:not(.league-main)::after,
html body.theme-pearl-blue #adminPage.admin-page > .bottom-nav > button.active:not(.league-main)::after {
  content: "" !important;
  position: absolute !important;
  left: 32px !important;
  right: 32px !important;
  bottom: 3px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, var(--nav-gold), transparent) !important;
  box-shadow: 0 0 9px rgba(243, 211, 111, 0.64) !important;
}

/* Keep the crown treatment, but use one purple surface in every page/state. */
html body.theme-pearl-blue #lobby > .bottom-nav > button.league-main,
html body.theme-pearl-blue #clubPage.club-page > .bottom-nav > button.league-main,
html body.theme-pearl-blue #adminPage.admin-page > .bottom-nav > button.league-main,
html body.theme-pearl-blue #lobby > .bottom-nav > button.league-main.active,
html body.theme-pearl-blue #clubPage.club-page > .bottom-nav > button.league-main.active,
html body.theme-pearl-blue #adminPage.admin-page > .bottom-nav > button.league-main.active {
  border: 2px solid rgba(243, 211, 111, 0.9) !important;
  background:
    radial-gradient(circle at 50% 22%, #756fd2 0%, #5757bb 40%, #363992 72%, #292d79 100%) !important;
  color: var(--nav-active) !important;
  box-shadow:
    0 0 0 3px rgba(24, 30, 92, 0.72),
    0 10px 24px rgba(18, 21, 75, 0.34),
    0 0 22px rgba(162, 133, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

html body.theme-pearl-blue #lobby > .bottom-nav > button.league-main:not(.active)::after,
html body.theme-pearl-blue #clubPage.club-page > .bottom-nav > button.league-main:not(.active)::after,
html body.theme-pearl-blue #adminPage.admin-page > .bottom-nav > button.league-main:not(.active)::after {
  content: none !important;
}

html body.theme-pearl-blue #lobby > .bottom-nav > button.league-main.active::after,
html body.theme-pearl-blue #clubPage.club-page > .bottom-nav > button.league-main.active::after,
html body.theme-pearl-blue #adminPage.admin-page > .bottom-nav > button.league-main.active::after {
  animation: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  inset: auto 25px 8px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, var(--nav-gold), transparent) !important;
  box-shadow: 0 0 9px rgba(243, 211, 111, 0.64) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.theme-pearl-blue .bottom-nav button { transition: none !important; }
}