:root {
  --mobile-dock-bg: rgba(4, 17, 31, .98);
  --mobile-dock-text: #92a6b8;
  --mobile-dock-active: #e0b458;
  --mobile-dock-line: rgba(155, 177, 197, .2);
}

.mobile-global-dock {
  display: none;
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  #mobileMenuButton {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mobile-global-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10020;
    min-height: calc(66px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    padding: 8px max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
    border-top: 1px solid var(--mobile-dock-line);
    background: var(--mobile-dock-bg);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .mobile-global-dock a,
  .mobile-global-dock button {
    min-width: 0;
    min-height: 49px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 2px;
    border: 0;
    border-radius: 9px;
    color: var(--mobile-dock-text);
    background: transparent;
    font: 500 10px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-global-dock a:active,
  .mobile-global-dock button:active {
    background: rgba(255, 255, 255, .06);
    transform: translateY(1px);
  }

  .mobile-global-dock svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-global-dock .active {
    color: var(--mobile-dock-active);
    font-weight: 800;
  }

  .mobile-global-dock .active svg {
    filter: drop-shadow(0 0 7px rgba(224, 180, 88, .22));
  }

  .mobile-nav-overlay {
    z-index: 10030 !important;
    inset: 0 !important;
    background: rgba(1, 7, 13, .7) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .mobile-nav-menu {
    position: fixed !important;
    top: auto !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    z-index: 10040 !important;
    width: auto !important;
    max-height: min(68svh, 520px) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow-y: auto !important;
    padding: 12px !important;
    border: 1px solid var(--mobile-dock-line) !important;
    border-radius: 18px !important;
    background: #06192b !important;
    box-shadow: 0 22px 64px rgba(0, 0, 0, .48) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(18px) scale(.98) !important;
    transform-origin: bottom center !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
  }

  .mobile-nav-menu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
  }

  .mobile-nav-menu a {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 10px 11px !important;
    border-radius: 10px !important;
    color: var(--mobile-dock-text) !important;
    background: rgba(255, 255, 255, .025) !important;
    font-size: 13px !important;
    text-align: left !important;
    text-decoration: none !important;
  }

  .mobile-nav-menu a[aria-current="page"] {
    color: #07182a !important;
    background: var(--mobile-dock-active) !important;
    font-weight: 800 !important;
  }

  .mobile-nav-menu a::before {
    display: none !important;
  }

  .mobile-nav-menu .current-page-tag {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-menu,
  .mobile-global-dock a,
  .mobile-global-dock button {
    transition: none !important;
  }
}