/* V54: approved LunaLeaf Community visual refresh only.
   All five footer buttons, their icons, and their ordering remain unchanged. */

.app-shell .masthead-art {
  aspect-ratio: 709 / 175;
  object-fit: cover;
}

.app-shell .bottom-nav {
  background: linear-gradient(115deg, #506b4c 0%, #597553 47%, #456347 100%) !important;
  border-top-color: #a6aa7d !important;
  box-shadow: 0 -2px 9px rgba(24, 52, 31, .22);
}

/* The approved artwork already depicts the header control symbols.
   Keep the existing DOM buttons fully interactive while avoiding duplicate
   circles/icons on top of their counterparts in the bitmap. */
.app-shell #ll32SoundButton,
.app-shell #alertsBtn.notification {
  top: 12px;
  width: 56px;
  height: 56px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
}
.app-shell #ll32SoundButton { left: 18px; }
.app-shell #alertsBtn.notification { right: 18px; }
.app-shell #ll32SoundButton svg,
.app-shell #alertsBtn.notification > svg { opacity: 0; }

/* When sound is enabled, show the live state instead of the printed mute symbol. */
.app-shell #ll32SoundButton.ll32-sound-on {
  background: rgba(69, 21, 31, .97) !important;
  border: 1px solid rgba(239, 203, 139, .72) !important;
  border-radius: 50%;
}
.app-shell #ll32SoundButton.ll32-sound-on svg { opacity: 1; }

@media (max-width: 350px) {
  .app-shell #ll32SoundButton,
  .app-shell #alertsBtn.notification { top: 8px; width: 40px; height: 40px; }
  .app-shell #ll32SoundButton { left: 10px; }
  .app-shell #alertsBtn.notification { right: 10px; }
}