Distinguish move buttons with no destination and with failed conditions

satiate.css

@@ -350,6 +350,11 @@ a:hover {
   border: none;
 }
 
+.missing {
+  background-color: #444;
+  color: #aaa !important;
+}
+
 #move-up-left {
   position: absolute;
   left: -140px;

world.js

@@ -40,7 +40,7 @@ function resetControls(state) {
     const button = document.createElement("button");
     button.classList.add("move-button")
     button.id = "move-" + dir;
-    button.classList.add("disabled");
+    button.classList.add("missing");
     button.setAttribute("disabled", "true");
     button.textContent = dirs[dir];
     moveHolder.appendChild(button);
@@ -177,6 +177,8 @@ function updateRoom(state) {
         }
       }
 
+      button.classList.remove("missing");
+      button.classList.add("disabled");
       button.textContent = dest.name;
 
       // if any condition fails, don't enable/add a listener