it's ready

client/assets/styles/game.css

@@ -3,10 +3,8 @@
 .game {
     overflow: hidden;
     display: grid;
-    grid-template-rows: min-content min-content 1fr 0.5fr 1.5fr;
+    grid-template-rows: 1fr 0.5fr 1.5fr;
     grid-template-areas:
-        "ready"
-        "timer"
         "opponent"
         "target"
         "player";
@@ -73,12 +71,12 @@
     transition-timing-function: ease;
 }
 
-.game #targeting {
+#targeting {
+    grid-area: target;
     height: 100%;
     width: 100%;
     stroke-width: 2px;
     stroke: whitesmoke;
-
 }
 
 /* some stupid bug in chrome makes it fill the entire screen */

client/assets/styles/instance.css

@@ -37,12 +37,6 @@
     grid-area: constructs;
 }
 
-.instance-ui-btn {
-    font-size: 100%;
-    padding: 0;
-    margin: 0;
-}
-
 .instance .info {
     /*font-size: 75%;*/
     margin-left: 1em;

client/assets/styles/styles.css

@@ -67,21 +67,19 @@ figure {
 }
 
 #mnml {
-    padding: 0 2em;
     display: grid;
     grid-template-columns: 1fr 8fr;
     grid-template-rows: min-content 1fr min-content;
     grid-template-areas:
       "hd  hd"
       "nav main"
-      "nav footer";
+      "footer footer";
 }
 
 nav {
     grid-area: nav;
+    padding-left: 2em;
     margin-right: 2em;
-    overflow: hidden;
-    white-space: nowrap;
 }
 
 nav h2:first-child {
@@ -122,6 +120,7 @@ nav button:hover, nav button:focus {
 }
 
 main {
+    padding-top: 1em;
     grid-area: main;
 }
 
@@ -543,6 +542,8 @@ footer button {
     margin: 0;
     border: none;
     background: #222;
+    font-size: 1.5em;
+    padding: 0.25em;
 }
 
 footer button:disabled {

client/assets/styles/styles.mobile.css

@@ -26,6 +26,8 @@
     }
 
     #mnml.nav-visible nav {
+        padding-left: 0;
+        margin: 0;
         display: block;
         grid-area: main;
     }