
  @media (orientation: landscape) {
    #app:not(.is-map-focus) .commandbar {
      grid-template-columns: max-content minmax(0, 1fr) max-content !important;
      grid-template-rows: auto !important;
      gap: 6px !important;
    }

    #app:not(.is-map-focus) .commandbar .brand-lockup {
      grid-column: 1 !important;
      grid-row: 1 !important;
    }

    #app:not(.is-map-focus) .commandbar .route-switch {
      grid-column: 2 !important;
      grid-row: 1 !important;
      justify-self: stretch !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      overflow-x: hidden !important;
      transform: none !important;
      margin: 0 !important;
      padding-left: 2px !important;
      padding-right: 2px !important;
    }

    #app:not(.is-map-focus) .commandbar .route-tab {
      flex: 1 1 0 !important;
      width: 25% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
      justify-content: center !important;
      padding-left: 2px !important;
      padding-right: 2px !important;
      gap: 2px !important;
      white-space: nowrap !important;
    }

    #app:not(.is-map-focus) .commandbar .commandbar__actions {
      grid-column: 3 !important;
      grid-row: 1 !important;
      gap: 4px !important;
    }
  }

  #long-march-bgm-toggle .bgm-icon-muted,
  #long-march-bgm-toggle.is-muted .bgm-icon-playing {
    display: none;
  }

  #long-march-bgm-toggle.is-muted .bgm-icon-muted {
    display: block;
  }

  #long-march-bgm-toggle.is-muted {
    color: var(--muted);
  }

  #app.is-map-focus #long-march-bgm-toggle {
    display: none !important;
  }
