/* Final left-side navigation HUD. */
.utility-menu {
  display: none !important;
}

.dock-menu {
  width: clamp(72px, 6.6vw, 112px) !important;
  max-height: calc(100% - clamp(170px, 18vh, 220px)) !important;
  position: absolute !important;
  left: clamp(7px, 0.7vw, 12px) !important;
  right: auto !important;
  top: clamp(138px, 19vh, 185px) !important;
  bottom: auto !important;
  z-index: 9 !important;
  padding: clamp(5px, 0.45vw, 8px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(5px, 0.48vw, 8px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border: 1px solid rgb(92 157 205 / 58%) !important;
  border-radius: clamp(13px, 1vw, 18px) !important;
  background:
    radial-gradient(circle at 50% 0%, rgb(63 167 255 / 24%), transparent 38%),
    linear-gradient(180deg, rgb(16 35 51 / 94%), rgb(5 14 23 / 96%)) !important;
  box-shadow:
    0 13px 28px rgb(0 0 0 / 62%),
    inset 0 1px 0 rgb(255 255 255 / 18%),
    inset 0 0 18px rgb(0 0 0 / 38%) !important;
  backdrop-filter: blur(7px);
  scrollbar-width: none;
}

.dock-menu::-webkit-scrollbar {
  display: none;
}

.dock-menu::before {
  content: "";
  position: absolute;
  inset: 4px !important;
  z-index: -1;
  border: 1px solid rgb(111 190 255 / 19%);
  border-radius: inherit !important;
  background: transparent !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none;
}

.dock-button {
  width: 100% !important;
  height: clamp(68px, 7.8vh, 92px) !important;
  min-height: clamp(68px, 7.8vh, 92px) !important;
  position: relative;
  flex: 0 0 auto;
  padding: 4px 4px 17px !important;
  overflow: hidden !important;
  border: 1px solid rgb(99 158 202 / 42%) !important;
  border-radius: clamp(10px, 0.8vw, 14px) !important;
  display: grid !important;
  place-items: center;
  color: #edf7ff !important;
  background:
    radial-gradient(circle at 50% 38%, rgb(99 188 255 / 20%), transparent 62%),
    linear-gradient(155deg, rgb(31 67 94 / 90%), rgb(8 25 39 / 96%)) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    inset 0 -5px 10px rgb(0 0 0 / 35%),
    0 3px 7px rgb(0 0 0 / 46%) !important;
  transition: transform 160ms ease, border-color 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.dock-button::before {
  content: "";
  position: absolute;
  inset: 4px 8px auto !important;
  height: 1px !important;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgb(210 238 255 / 64%), transparent) !important;
  opacity: 0.8;
}

.dock-button::after {
  content: "";
  position: absolute;
  left: 9px !important;
  right: 9px !important;
  bottom: 5px !important;
  height: 3px !important;
  border-radius: 99px;
  background: rgb(75 126 161 / 62%) !important;
  box-shadow: none !important;
}

.dock-button img,
.dock-button.asset-button img {
  width: 100% !important;
  height: calc(100% - 13px) !important;
  display: block;
  object-fit: contain !important;
  filter: drop-shadow(0 5px 5px rgb(0 0 0 / 55%));
  transition: transform 160ms ease, filter 160ms ease;
}

.dock-button span {
  min-width: 54px;
  position: absolute;
  left: 50%;
  bottom: 6px;
  z-index: 2;
  padding: 2px 5px;
  border: 1px solid rgb(117 183 225 / 48%);
  border-radius: 99px;
  transform: translateX(-50%);
  color: #eef9ff;
  background: rgb(5 20 32 / 88%);
  font-size: clamp(0.47rem, 0.58vw, 0.68rem) !important;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  text-transform: uppercase;
  white-space: nowrap;
}

.dock-button:hover,
.dock-button.active {
  transform: translateX(4px) !important;
  border-color: #ffd25f !important;
  filter: brightness(1.12);
  background:
    radial-gradient(circle at 50% 38%, rgb(255 202 65 / 22%), transparent 62%),
    linear-gradient(155deg, rgb(42 86 112 / 96%), rgb(11 32 45 / 98%)) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 24%),
    0 0 17px rgb(255 191 50 / 36%),
    0 5px 11px rgb(0 0 0 / 54%) !important;
}

.dock-button:hover img,
.dock-button.active img {
  transform: scale(1.06);
  filter: brightness(1.1) drop-shadow(0 6px 6px rgb(0 0 0 / 58%));
}

.dock-button.active::after {
  background: linear-gradient(90deg, #48caff, #ffd65b, #57d6ff) !important;
  box-shadow: 0 0 9px #55cfff !important;
}

.sorting-prompt {
  left: clamp(88px, 8vw, 130px) !important;
  top: 21% !important;
}

@media (max-height: 760px) {
  .dock-menu {
    top: clamp(112px, 17vh, 142px) !important;
    max-height: calc(100% - 130px) !important;
  }

  .dock-button {
    height: 66px !important;
    min-height: 66px !important;
  }
}

@media (max-width: 780px), (max-height: 640px) and (max-width: 1180px) {
  .dock-menu {
    width: 66px !important;
    max-height: calc(100% - 78px) !important;
    left: max(5px, env(safe-area-inset-left)) !important;
    top: max(68px, env(safe-area-inset-top)) !important;
    bottom: auto !important;
    padding: 4px !important;
    gap: 4px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .dock-button {
    height: 62px !important;
    min-height: 62px !important;
    padding: 3px 3px 15px !important;
  }

  .dock-button span {
    min-width: 48px;
    bottom: 4px;
    font-size: 0.48rem !important;
  }

  .sorting-prompt {
    left: max(79px, calc(env(safe-area-inset-left) + 79px)) !important;
    top: 24% !important;
  }
}

/* Bottom navigation HUD override. */
.dock-menu {
  width: min(calc(100vw - 18px), 760px) !important;
  height: clamp(82px, 11.5vh, 112px) !important;
  max-width: calc(100vw - 18px) !important;
  max-height: none !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(7px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  padding: clamp(5px, 0.55vw, 8px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: clamp(4px, 0.45vw, 7px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-radius: clamp(14px, 1.3vw, 20px) !important;
  background:
    radial-gradient(circle at 50% 115%, rgb(38 146 223 / 26%), transparent 46%),
    linear-gradient(180deg, rgb(19 43 61 / 94%), rgb(4 14 22 / 97%)) !important;
  box-shadow:
    0 12px 28px rgb(0 0 0 / 68%),
    inset 0 1px 0 rgb(255 255 255 / 20%),
    inset 0 -7px 15px rgb(0 0 0 / 35%) !important;
  scrollbar-width: none;
}

.dock-menu::-webkit-scrollbar {
  display: none;
}

.dock-menu::before {
  inset: 4px !important;
  border-radius: clamp(11px, 1vw, 16px) !important;
}

.dock-button {
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 0 clamp(76px, 9.2vw, 112px) !important;
  padding: 4px 5px 19px !important;
}

.dock-button img,
.dock-button.asset-button img {
  width: 100% !important;
  height: calc(100% - 13px) !important;
}

.dock-button span {
  bottom: 6px !important;
  font-size: clamp(0.5rem, 0.62vw, 0.7rem) !important;
}

.dock-button:hover,
.dock-button.active {
  transform: translateY(-3px) !important;
}

.sorting-prompt {
  left: max(8px, env(safe-area-inset-left)) !important;
}

@media (max-width: 780px), (max-height: 640px) and (max-width: 1180px) {
  .dock-menu {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    height: clamp(68px, 18vh, 86px) !important;
    left: 50% !important;
    top: auto !important;
    bottom: max(5px, env(safe-area-inset-bottom)) !important;
    padding: 4px !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  .dock-button {
    height: 100% !important;
    min-height: 0 !important;
    flex: 0 0 clamp(68px, 15vw, 88px) !important;
    padding: 3px 3px 16px !important;
  }

  .dock-button span {
    bottom: 4px !important;
    font-size: 0.5rem !important;
  }

  .sorting-prompt {
    left: max(5px, env(safe-area-inset-left)) !important;
  }
}