Add touch joystick movement

frontend/src/main.scss

@@ -83,18 +83,25 @@ body {
     width: 100%;
     position: absolute;
     top: 0;
+    left: 0;
 
     pointer-events: none;
     user-select: none;
 
     overflow: hidden;
 
+    & > * {
+      display: inline-block;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
     h2 {
       margin: $large-padding 0;
     }
 
     .player-tag {
-      position: absolute;
       transform: translateX(-50%) translateY(-50%) rotate(-15deg);
       transition: left 200ms, top 200ms;
       border-radius: 1000px;
@@ -139,7 +146,6 @@ body {
     }
 
     .ownership {
-      position: absolute;
       font-size: 0;
       transform: translateX(-50%) translateY(-50%);
 
@@ -165,6 +171,25 @@ body {
       }
     }
 
+    .joystick {
+      @include square($large-icon * 1.3);
+      background-color: white;
+      box-shadow: inset 0 0 8px 3px rgba(0, 0, 0, 0.33);
+      opacity: 0.35;
+      border-radius: 1000px;
+
+      div {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        background-color: #444;
+        box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.33);
+
+        @include square($small-icon);
+        border-radius: 1000px;
+      }
+    }
+
     .planet-progress {
       position: absolute;
       top: $small-padding;