/* Mobile Bottom Nav (gaming) */
:root{
  --mbn-bg: rgba(5,0,15,.92);
  --mbn-border: rgba(0,240,255,.16);
  --mbn-item-bg: rgba(255,255,255,.06);
  --mbn-item-border: rgba(0,240,255,.18);
  --mbn-active-bg: rgba(0,240,255,.14);
}

.mobile-bottom-nav{ display:none; }

@media (max-width: 768px){
  /* On mobile, we navigate with the bottom bar only */
  header{ display:none !important; }
  #menuBackdrop{ display:none !important; }

  body{ padding-bottom: calc(74px + env(safe-area-inset-bottom)); }

  .mobile-bottom-nav{
    display:block;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index: 9999;
    padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
    background: var(--mbn-bg);
    border-top: 1px solid var(--mbn-border);
    backdrop-filter: blur(10px);
  }

  .mobile-bottom-nav .mbn-wrap{
    max-width: 1100px;
    margin: 0 auto;
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .55rem;
  }

  .mobile-bottom-nav a.mbn-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.22rem;

    text-decoration:none;
    color: inherit;

    padding:.6rem .35rem;
    border-radius: 14px;
    background: var(--mbn-item-bg);
    border: 1px solid var(--mbn-item-border);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select:none;
  }

  .mobile-bottom-nav a.mbn-item .mbn-ico{
    font-size: 1.1rem;
    line-height: 1;
  }
  .mobile-bottom-nav a.mbn-item .mbn-txt{
    font-size: .72rem;
    font-weight: 900;
    line-height: 1.05;
    opacity: .92;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }

  .mobile-bottom-nav a.mbn-item.active{
    background: var(--mbn-active-bg);
    border-color: rgba(0,240,255,.35);
  }

  .mobile-bottom-nav .mbn-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: .12rem .42rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 900;
    margin-top: .1rem;
    background: rgba(255,0,170,.16);
    border: 1px solid rgba(255,0,170,.35);
  }
}