@media (max-width: 900px) {
  body {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .game-nav.mobile-dock {
    position: fixed !important;
    z-index: 40;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(var(--nav-count, 3), minmax(0, 1fr));
    width: auto !important;
    margin: 0 !important;
    padding: 6px;
    gap: 4px;
    border: 1px solid #45666d;
    border-radius: 14px;
    background: linear-gradient(180deg, #102027f5, #081116fa);
    box-shadow: 0 14px 45px #000e, inset 0 1px #9ce7ef18;
    backdrop-filter: blur(16px);
  }

  .game-nav.mobile-dock button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 54px;
    padding: 7px 4px;
    border: 0 !important;
    border-radius: 9px;
    color: #78969b;
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: color .16s ease, background .16s ease, transform .16s ease;
  }

  .game-nav.mobile-dock button::before {
    display: block;
    color: #9db9bd;
    font: 500 18px/1 Unbounded, sans-serif;
    text-shadow: 0 0 14px #7de5ef45;
  }

  .game-nav.mobile-dock button[data-view="base"]::before { content: "⌂"; }
  .game-nav.mobile-dock button[data-view="warehouse"]::before { content: "▦"; }
  .game-nav.mobile-dock button[data-view="nav"]::before { content: "✦"; }
  .game-nav.mobile-dock button[data-view="crew"]::before { content: "◉"; }

  .game-nav.mobile-dock button.active {
    color: #f1ffff;
    background: linear-gradient(180deg, #1b353d, #12252b);
    box-shadow: inset 0 0 0 1px #75d7df73, 0 5px 18px #0008;
  }

  .game-nav.mobile-dock button.active::before {
    color: #efc873;
    text-shadow: 0 0 15px #efc8738a;
  }

  .game-nav.mobile-dock button.active::after {
    content: "";
    position: absolute;
    left: 26%;
    right: 26%;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: #e5bd6c;
    box-shadow: 0 0 10px #e5bd6c;
  }

  .game-nav.mobile-dock button:active:not(:disabled) {
    transform: scale(.96);
  }

  .game-nav.mobile-dock button:disabled {
    opacity: .32;
  }

  .shell > header {
    min-height: 48px;
  }

  .shell > header > div #notifyButton,
  .shell > header > div #resetButton,
  .shell > header > div #syncStatus {
    display: none;
  }
}

@media (max-width: 420px) {
  header .brand span {
    display: none;
  }

  header .brand img {
    width: 32px;
    height: 32px;
  }

  .shell > header > div {
    gap: 5px;
  }

  .shell > header > div button {
    padding-inline: 5px;
    font-size: 8px;
  }
}