.game-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.nav-icon {
  background-image: url("../assets/icons/sheets/navigation-actions.png");
  background-size: 500% 200%;
}

.nav-icon--home { background-position: 0% 0%; }
.nav-icon--settings { background-position: 25% 0%; }
.nav-icon--close { background-position: 50% 0%; }
.nav-icon--confirm { background-position: 75% 0%; }
.nav-icon--cancel { background-position: 100% 0%; }
.nav-icon--next { background-position: 0% 100%; }
.nav-icon--skip { background-position: 25% 100%; }
.nav-icon--delete { background-position: 50% 100%; }
.nav-icon--info { background-position: 75% 100%; }
.nav-icon--locked { background-position: 100% 100%; }

.intent-icon {
  background-image: url("../assets/icons/sheets/enemy-intents.png");
  background-size: 400% 200%;
}

.intent-icon--attack { background-position: 0% 0%; }
.intent-icon--multi { background-position: 33.333% 0%; }
.intent-icon--block { background-position: 66.667% 0%; }
.intent-icon--buff { background-position: 100% 0%; }
.intent-icon--debuff { background-position: 0% 100%; }
.intent-icon--charge { background-position: 33.333% 100%; }
.intent-icon--special { background-position: 66.667% 100%; }
.intent-icon--unknown { background-position: 100% 100%; }

.status-icon {
  background-image: url("../assets/icons/sheets/combat-statuses.png");
  background-size: 500% 200%;
}

.status-icon--strength { background-position: 0% 0%; }
.status-icon--weak { background-position: 25% 0%; }
.status-icon--vulnerable { background-position: 50% 0%; }
.status-icon--break { background-position: 75% 0%; }
.status-icon--diving-guard { background-position: 100% 0%; }
.status-icon--nuclear-charge { background-position: 0% 100%; }
.status-icon--draw-lock { background-position: 25% 100%; }
.status-icon--next-attack { background-position: 50% 100%; }
.status-icon--power { background-position: 75% 100%; }
.status-icon--exhaust { background-position: 100% 100%; }

.card-icon {
  background-image: url("../assets/icons/sheets/cards-piles.png");
  background-size: 500% 200%;
}

.card-icon--attack { background-position: 0% 0%; }
.card-icon--skill { background-position: 25% 0%; }
.card-icon--power { background-position: 50% 0%; }
.card-icon--draw { background-position: 75% 0%; }
.card-icon--discard { background-position: 100% 0%; }
.card-icon--exhaust { background-position: 0% 100%; }
.card-icon--upgraded { background-position: 25% 100%; }
.card-icon--unavailable { background-position: 50% 100%; }
.card-icon--target { background-position: 75% 100%; }
.card-icon--reward { background-position: 100% 100%; }

.chapter-icon {
  background-image: url("../assets/icons/sheets/chapter-services.png");
  background-size: 500% 300%;
}

.chapter-icon--battle { background-position: 0% 0%; }
.chapter-icon--elite { background-position: 25% 0%; }
.chapter-icon--event { background-position: 50% 0%; }
.chapter-icon--shop { background-position: 75% 0%; }
.chapter-icon--rest { background-position: 100% 0%; }
.chapter-icon--boss { background-position: 0% 50%; }
.chapter-icon--remove { background-position: 25% 50%; }
.chapter-icon--heal { background-position: 50% 50%; }
.chapter-icon--upgrade { background-position: 75% 50%; }
.chapter-icon--relic { background-position: 100% 50%; }
.chapter-icon--quiz { background-position: 0% 100%; }
.chapter-icon--correct { background-position: 25% 100%; }
.chapter-icon--wrong { background-position: 50% 100%; }

.sprite-button {
  position: relative;
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 4px;
  place-items: center;
  border: 1px solid rgb(255 227 160 / 20%);
  border-radius: 50%;
  color: var(--color-sand-light);
  background: rgb(31 20 13 / 54%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 8%),
    0 5px 14px rgb(15 8 4 / 25%);
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.sprite-button:hover {
  border-color: rgb(242 197 92 / 58%);
  background: rgb(62 39 22 / 78%);
}

.sprite-button:active {
  transform: translateY(2px) scale(0.95);
}

.sprite-button .game-icon {
  width: 29px;
  height: 29px;
}

.music-toggle__glyph {
  font-size: 1.3rem;
  line-height: 1;
}

.music-toggle[aria-pressed="false"]::after {
  position: absolute;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: #ef806d;
  box-shadow: 0 1px 2px rgb(0 0 0 / 60%);
  content: "";
  transform: rotate(-45deg);
}