Improve gameplay

frontend/src/styles/main.scss

@@ -1,5 +1,6 @@
 @import './vars.scss';
 @import './form.scss';
+@import './mixins.scss';
 
 @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Open+Sans&display=swap');
 * {
@@ -21,7 +22,8 @@ html {
   }
 }
 
-h1 {
+h1,
+h2 {
   &,
   * {
     font-family: 'Comfortaa', sans-serif;
@@ -31,6 +33,10 @@ h1 {
   padding-bottom: $medium-padding;
 }
 
+h2 {
+  font-size: 4rem;
+}
+
 .red {
   color: $red;
   &::selection {
@@ -48,6 +54,8 @@ canvas {
 }
 
 body {
+  overflow: hidden;
+
   #landing-ui {
     width: 100%;
     height: 100%;
@@ -67,7 +75,104 @@ body {
     top: 0;
 
     pointer-events: none;
+    user-select: none;
 
-    font-size: 0.75rem;
+    overflow: hidden;
+
+    h2 {
+      margin: $large-padding 0;
+    }
+
+    .player-tag {
+      font-size: 1.3rem;
+      position: absolute;
+      transform: translateX(-50%) translateY(-50%) rotate(-15deg);
+      transition: left 200ms, top 200ms;
+
+      div {
+        height: 3px;
+        background-color: rebeccapurple;
+      }
+    }
+
+    .ownership {
+      font-size: 1.3rem;
+      position: absolute;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    .planet-progress {
+      position: absolute;
+      top: $small-padding;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 50%;
+      display: flex;
+      $height: 8px;
+      height: $height;
+
+      border-radius: 4px;
+
+      div {
+        height: $height;
+      }
+
+      div:nth-child(1) {
+        background: rebeccapurple;
+      }
+
+      div:nth-child(2) {
+        background: gray;
+      }
+
+      div:nth-child(3) {
+        background: red;
+      }
+    }
+  }
+
+  #open-settings {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    animation: spin 32s linear infinite;
+    @keyframes spin {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+
+  .icon {
+    box-sizing: content-box;
+
+    user-select: none;
+    cursor: pointer;
+
+    padding: $medium-padding;
+    @include square(48px);
+    @media (max-width: $breakpoint) {
+      @include square(32px);
+      padding: $small-padding;
+    }
+  }
+
+  .full-screen-controllers {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+
+  #settings {
+    @include background;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+
+    padding: $large-padding;
+    visibility: hidden;
   }
 }