.mobile-tabbar,
.mobile-more-backdrop,
.mobile-more-sheet {
   display: none;
}

@media (max-width: 560px) {
   :root {
      --pajaro-tabbar-height: 68px;
      --pajaro-safe-bottom: env(safe-area-inset-bottom, 0px);
   }

   body {
      padding-bottom: calc(var(--pajaro-tabbar-height) + var(--pajaro-safe-bottom) + 18px) !important;
   }

   #nav_container {
      display: none !important;
   }

   .mobile-tabbar {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1002;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      height: calc(var(--pajaro-tabbar-height) + var(--pajaro-safe-bottom));
      padding: 5px 5px var(--pajaro-safe-bottom);
      border-top: 1px solid rgba(0, 255, 255, 0.65);
      border-radius: 0;
      background: rgba(5, 7, 8, 0.97);
      box-shadow: 0 -5px 22px rgba(0, 0, 0, 0.72);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
   }

   .mobile-tabbar > a,
   .mobile-tabbar button {
      appearance: none;
      display: flex !important;
      min-width: 0;
      min-height: 58px;
      margin: 0;
      padding: 4px 2px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      border: 0;
      border-radius: 8px;
      color: rgba(253, 239, 213, 0.72);
      background: transparent;
      font: 600 0.67rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0.01em;
      text-decoration: none;
      transform: none;
      scale: 1;
   }

   .mobile-tabbar > a:active,
   .mobile-tabbar button:active {
      background: rgba(255, 69, 0, 0.14);
   }

   .mobile-tabbar > a[aria-current="page"],
   .mobile-tabbar button[aria-expanded="true"],
   .mobile-tabbar button.is-current {
      color: #ff6a2a;
      background: rgba(255, 69, 0, 0.1);
   }

   .mobile-tabbar svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
   }

   .mobile-more-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: block;
      border-radius: 0;
      background: rgba(0, 0, 0, 0.62);
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
   }

   .mobile-more-sheet {
      position: fixed;
      right: 8px;
      bottom: calc(var(--pajaro-tabbar-height) + var(--pajaro-safe-bottom) + 8px);
      left: 8px;
      z-index: 1001;
      display: block;
      padding: 10px;
      border: 1px solid rgba(0, 255, 255, 0.7);
      border-radius: 16px;
      background: rgba(8, 10, 11, 0.98);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.72), 0 0 16px rgba(255, 255, 255, 0.14);
      opacity: 0;
      transform: translateY(18px) scale(0.98);
      transform-origin: bottom center;
      pointer-events: none;
      transition: opacity 180ms ease, transform 180ms ease;
   }

   .mobile-more-sheet h2 {
      margin: 2px 6px 8px;
      color: #ff6a2a;
      font: 700 0.78rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0.08em;
      text-transform: uppercase;
   }

   .mobile-more-sheet a {
      display: flex;
      min-height: 48px;
      padding: 0 12px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(253, 239, 213, 0.13);
      color: rgb(253, 239, 213);
      font: 600 0.95rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      text-decoration: none;
      scale: 1;
   }

   .mobile-more-sheet a:last-child {
      border-bottom: 0;
   }

   .mobile-more-sheet a::after {
      content: "›";
      color: rgba(253, 239, 213, 0.5);
      font-size: 1.5rem;
      font-weight: 400;
   }

   .mobile-more-sheet a[aria-current="page"] {
      color: #ff6a2a;
   }

   body.mobile-more-open {
      overflow: hidden;
   }

   body.mobile-more-open .mobile-more-backdrop {
      opacity: 1;
      pointer-events: auto;
   }

   body.mobile-more-open .mobile-more-sheet {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
   }

   @media (prefers-reduced-motion: reduce) {
      .mobile-more-backdrop,
      .mobile-more-sheet {
         transition: none;
      }
   }
}