/* Color navigation atlas: 5 columns x 4 rows, row-major order. */
.nav button::before {
  content: "" !important;
  background-color: #080b14 !important;
  background-image: url("assets/ui/nav-icons-atlas.png?rev=20260917-1") !important;
  background-repeat: no-repeat !important;
  background-size: 500% 400% !important;
  border-color: #ffffff14 !important;
  box-shadow: inset 0 1px #ffffff0a !important;
}

.nav button.active::before {
  background-color: #171109 !important;
  border-color: #d8a84e70 !important;
  box-shadow: inset 0 1px #ffffff18 !important;
}

.nav button[data-tab="battleTab"]::before { background-position: 0% 0% !important; }
.nav button[data-tab="characterTab"]::before { background-position: 25% 0% !important; }
.nav button[data-tab="taskTab"]::before { background-position: 50% 0% !important; }
.nav button[data-tab="bagTab"]::before { background-position: 75% 0% !important; }
.nav button[data-tab="equipTab"]::before { background-position: 100% 0% !important; }

.nav button[data-tab="cultivationTab"]::before { background-position: 0% 33.333% !important; }
.nav button[data-tab="artsTab"]::before { background-position: 25% 33.333% !important; }
.nav button[data-tab="sectTab"]::before { background-position: 50% 33.333% !important; }
.nav button[data-tab="caveTab"]::before { background-position: 75% 33.333% !important; }
.nav button[data-tab="refiningTab"]::before { background-position: 100% 33.333% !important; }

.nav button[data-tab="forgingTab"]::before { background-position: 0% 66.667% !important; }
.nav button[data-tab="alchemyTab"]::before { background-position: 25% 66.667% !important; }
.nav button[data-tab="talismanTab"]::before { background-position: 50% 66.667% !important; }
.nav button[data-tab="tailoringTab"]::before { background-position: 75% 66.667% !important; }
.nav button[data-tab="cookingTab"]::before { background-position: 100% 66.667% !important; }

.nav button[data-tab="buildingTab"]::before { background-position: 0% 100% !important; }
.nav button[data-tab="farmingTab"]::before { background-position: 25% 100% !important; }
.nav button[data-tab="breedingTab"]::before { background-position: 50% 100% !important; }
.nav button[data-tab="miningTab"]::before { background-position: 75% 100% !important; }
.nav button[data-tab="worldTab"]::before { background-position: 100% 100% !important; }

@media (max-width: 780px) {
  .mobile-nav button::before,
  .mobile-more-nav button::before {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }
}