Add attempt at onscreen controls for touch screens.

game.css

@@ -6,6 +6,7 @@
 }
 
 body {
+    display: flex;
     background-color: #222034;
     margin: 0;
     width: 100vw;
@@ -14,5 +15,38 @@ body {
 
 canvas {
     display: block;
-    margin: 0 auto;
+    margin: auto auto;
+}
+
+@media (pointer: fine) {
+    #onscreen-controls {
+        display: none;
+    }
+}
+
+/* Onscreen controls for "coarse" pointer devices assumed to be
+   touchscreens on phones/tablets.  Inline SVG is used so that we can
+   attach click handlers to individual elements of the controls. */
+@media (pointer: coarse) {
+    #onscreen-controls {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    #onscreen-controls #dpad-container {
+        width: min(25vw,25vh);
+        height: min(25vw,25vh);
+        margin: 5%;
+    }
+
+    #onscreen-controls #button-container {
+        width: min(15vw,15vh);
+        height: min(15vw,15vh);
+        margin: 5%;
+        margin-left: auto;
+    }
 }