/* A quiet, consistent finish shared by the MW4 hub, Meta and tracker views. */
body.mw4-pivot {
  --surface-1: #0b1118;
  --surface-2: #101923;
  --surface-3: #15212a;
  --edge-soft: rgba(172, 199, 220, 0.14);
  --edge-accent: rgba(185, 255, 61, 0.28);
  background:
    radial-gradient(ellipse at 8% 0%, rgba(74, 123, 62, 0.12), transparent 34rem),
    radial-gradient(ellipse at 96% 24%, rgba(46, 102, 132, 0.09), transparent 38rem),
    #07090c !important;
}

body.mw4-pivot :is(main, .site-header, .site-footer) {
  -webkit-tap-highlight-color: transparent;
}

body.mw4-pivot main {
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

body.mw4-pivot .site-header {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 1200 !important;
  margin-inline: auto !important;
  transform: none !important;
  backface-visibility: visible !important;
  background: rgba(7, 10, 14, 0.94) !important;
  border-bottom-color: rgba(185, 255, 61, 0.18) !important;
  box-shadow: 0 0.65rem 1.8rem rgba(0, 0, 0, 0.2) !important;
}

body.mw4-pivot {
  padding-top: 4.25rem !important;
}

body.mw4-pivot :is(#top, #support, #mw4Hub, #mw4TrackerAnchor, #loadouts) {
  scroll-margin-top: 6rem;
}

body.mw4-pivot .site-header .top-nav > :is(a, button) {
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

body.mw4-pivot .site-header .top-nav > :is(a, button):hover {
  border-color: rgba(185, 255, 61, 0.24) !important;
  background: rgba(185, 255, 61, 0.075) !important;
  color: #eaffc9 !important;
}

body.mw4-pivot .support-strip.top-support-strip {
  position: relative;
  overflow: hidden;
  border-radius: 2px !important;
  background:
    linear-gradient(105deg, rgba(255, 211, 90, 0.1), rgba(185, 255, 61, 0.035) 58%, rgba(86, 224, 255, 0.035)),
    #0c1117 !important;
}

body.mw4-pivot .support-strip.top-support-strip::after {
  position: absolute;
  inset: 0 0 auto auto;
  width: min(30%, 20rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 211, 90, 0.55));
  content: "";
  pointer-events: none;
}

body.mw4-pivot .section-heading.minimal-hero {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2.2rem) !important;
  border: 1px solid var(--edge-accent) !important;
  border-left: 3px solid var(--ll-accent) !important;
  background:
    linear-gradient(rgba(185, 255, 61, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 255, 61, 0.025) 1px, transparent 1px),
    linear-gradient(115deg, rgba(15, 24, 34, 0.97), rgba(8, 13, 19, 0.97) 72%) !important;
  background-size: 24px 24px, 24px 24px, auto !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 1rem 2.8rem rgba(0, 0, 0, 0.2) !important;
}

body.mw4-pivot .section-heading.minimal-hero h1 {
  max-width: 22ch;
  font-size: clamp(2.4rem, 5.3vw, 4.6rem) !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

body.mw4-pivot .section-heading.minimal-hero > p:not(.eyebrow):not(.updated-note) {
  max-width: 62ch;
  margin-top: 0.7rem !important;
  line-height: 1.55 !important;
}

body.mw4-pivot :is(.mw4-blog-card, .today-strip article, .mw4-launch-grid article, .intel-grid article, .update-card, .mw4-camo-card, .map-panel, .map-board, .mode-info-main, .mode-info-side, .mw4-countdown-card, #loadoutGrid .loadout-card) {
  border-radius: 2px !important;
  border-color: var(--edge-soft) !important;
  background-color: var(--surface-1) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 0.9rem 2.2rem rgba(0, 0, 0, 0.16) !important;
}

body.mw4-pivot :is(.mw4-blog-card, .today-strip article, .mw4-launch-grid article, .intel-grid article, .update-card, .mw4-camo-card, .map-panel, .map-board, .mode-info-main, .mode-info-side, .mw4-countdown-card, #loadoutGrid .loadout-card) :is(h2, h3, strong) {
  text-wrap: pretty;
}

body.mw4-pivot :is(.mw4-blog-card, .mw4-launch-grid article, .intel-grid article, .update-card, .mw4-camo-card, #loadoutGrid .loadout-card) {
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

body.mw4-pivot :is(.mw4-blog-card, .mw4-launch-grid article, .intel-grid article, .update-card, .mw4-camo-card, #loadoutGrid .loadout-card):is(:hover, :focus-within) {
  border-color: rgba(185, 255, 61, 0.36) !important;
  background-color: #0e161e !important;
  box-shadow: inset 2px 0 var(--ll-accent), 0 1.1rem 2.6rem rgba(0, 0, 0, 0.24) !important;
}

body.mw4-pivot .mw4-blog-image {
  border-radius: 0 !important;
  background: #070b10 !important;
}

body.mw4-pivot :is(.secondary-mode-switch, .content-tabs, .mw4-tab-bar, .camo-filter, .mode-info-tabs, .map-tabs, .toolbar, .controls) {
  padding: 0.55rem !important;
  border: 1px solid var(--edge-soft) !important;
  background: linear-gradient(145deg, rgba(16, 25, 35, 0.88), rgba(8, 13, 19, 0.96)) !important;
}

body.mw4-pivot :is(.secondary-mode-switch, .content-tabs, .mw4-tab-bar, .camo-filter, .mode-info-tabs, .map-tabs) button {
  min-height: 2.8rem;
  border-radius: 2px !important;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

body.mw4-pivot :is(button, a, input, select, summary):focus-visible {
  outline: 2px solid #b9ff3d !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(185, 255, 61, 0.12) !important;
}

body.mw4-pivot .site-footer {
  border-top: 1px solid var(--edge-soft) !important;
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: calc(7rem + env(safe-area-inset-top));
  }

  body.mw4-pivot {
    padding-top: calc(6.3rem + env(safe-area-inset-top)) !important;
  }

  body.mw4-pivot .site-header {
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
  }

  body.mw4-pivot .site-header .top-nav > :is(a, button) {
    min-height: 2.8rem !important;
    scroll-snap-align: center;
  }

  body.mw4-pivot .site-header .top-nav {
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.mw4-pivot main .mobile-filter-shell {
    position: sticky !important;
    top: calc(6.3rem + env(safe-area-inset-top)) !important;
    z-index: 18 !important;
    scroll-margin-top: calc(7rem + env(safe-area-inset-top));
  }

  body.mw4-pivot :is(#top, #support, #mw4Hub, #mw4TrackerAnchor, #loadouts) {
    scroll-margin-top: calc(7rem + env(safe-area-inset-top));
  }

  body.mw4-pivot main {
    padding-bottom: 2rem;
  }

  body.mw4-pivot .section-heading.minimal-hero {
    padding: 1rem !important;
  }

  body.mw4-pivot .section-heading.minimal-hero h1 {
    font-size: clamp(2.2rem, 10vw, 3.6rem) !important;
  }

  body.mw4-pivot :is(.secondary-mode-switch, .content-tabs, .mw4-tab-bar, .camo-filter, .mode-info-tabs, .map-tabs, .toolbar, .controls) {
    padding: 0.4rem !important;
  }

  body.mw4-pivot .support-strip.top-support-strip {
    border-radius: 2px !important;
  }

  body.mw4-pivot :is(.controls input, .controls select, #mw4CamoSearch, .mw4-tracker-tools input[type="search"]) {
    min-height: 2.9rem !important;
    font-size: 16px !important;
  }

  body.mw4-pivot :is(.filter-button, .mode-button, .content-tab, .mw4-tab-bar button) {
    min-height: 2.8rem !important;
  }
}

@media (max-width: 420px) {
  body.mw4-pivot > :is(main, .site-footer) {
    width: calc(100% - 1rem) !important;
  }

  body.mw4-pivot .support-strip.top-support-strip {
    padding: 0.8rem !important;
  }

  body.mw4-pivot .mw4-blog-card {
    padding-inline: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mw4-pivot *,
  body.mw4-pivot *::before,
  body.mw4-pivot *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}