.mobile-nav {display: none;}

@media (max-width: 720px) {
  html.has-mobile-nav {
    --mobile-nav-space: calc(68px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(var(--mobile-nav-space) + 16px);
  }
  html.has-mobile-nav body {padding-block-end: var(--mobile-nav-space);}
  html.has-mobile-nav .top nav {display: none;}
  html.has-mobile-nav .topinner {padding-block: 12px;}

  html.has-mobile-nav .mobile-nav {
    position: fixed;
    z-index: 6;
    inset-inline: 0;
    inset-block-end: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 3px;
    height: var(--mobile-nav-space);
    padding: 7px max(7px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(7px, env(safe-area-inset-left, 0px));
    border-block-start: 1px solid #34404e;
    background: #0e1724f7;
    box-shadow: 0 -9px 30px #02071133;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform .18s ease, opacity .18s ease;
  }
  .mobile-nav > :is(a, button) {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 3px 2px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #a6b4c6;
    text-decoration: none;
    font: 550 10px/1.15 var(--body);
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav > :is(a, button) > svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    stroke-width: 1.7;
  }
  .mobile-nav > :is(a, button) > span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .mobile-nav > :is(a, button):is(.active, :hover) {color: var(--gold); background: #f2d69d0b;}
  .mobile-nav > :is(a, button):focus-visible {outline: 2px solid var(--gold); outline-offset: -2px;}
  .mobile-nav .mobile-nav-market {gap: 2px; padding-block: 0;}
  .mobile-nav .mobile-nav-market > svg {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 6px 10px;
    border-radius: 11px;
    color: #15202c;
    background: var(--gold);
  }
  .mobile-nav .mobile-nav-market.active > svg {box-shadow: 0 0 0 3px #f2d69d1c;}
  body[data-wallet-connected='true'] #mobile-account::after {
    content: '';
    position: absolute;
    inset-block-start: 4px;
    inset-inline-start: calc(50% + 6px);
    width: 6px;
    height: 6px;
    border: 2px solid #0e1724;
    border-radius: 50%;
    background: #a9d8bb;
    box-sizing: content-box;
  }
  html.has-mobile-nav .mobile-nav.is-keyboard-hidden {
    transform: translateY(110%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  html.has-mobile-nav .winner-toast {bottom: calc(var(--mobile-nav-space) + 12px);}
}

@media (max-width: 360px) {
  .mobile-nav > :is(a, button) {font-size: 9px;}
  .mobile-nav .mobile-nav-market > svg {padding-inline: 8px;}
}

@media (prefers-reduced-motion: reduce) {
  html.has-mobile-nav .mobile-nav {transition: none;}
}