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;
     }

client/index.html

@@ -10,7 +10,6 @@
     <meta name="author" content="ntr@smokestack.io">
     <link rel="manifest" href="manifest.webmanifest">
     <link rel="stylesheet" href="./node_modules/izitoast/dist/css/iziToast.min.css"></script>
-    <link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
     <link rel="stylesheet" href="assets/styles/normalize.css">
     <link rel="stylesheet" href="assets/styles/skeleton.css">
   </head>

client/src/components/list.footer.jsx

@@ -36,9 +36,8 @@ function ListFooter(args) {
         <footer>
             <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
             <button
-                className="instance-btn instance-ui-btn left"
                 onClick={() => navToTeam()}>
-                Change Constructs
+                Back
             </button>
         </footer>
     );

client/src/components/team.footer.jsx

@@ -45,7 +45,6 @@ function TeamFooter(args) {
             <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
             <button
                 disabled={team.some(c => !c)}
-                className="instance-btn instance-ui-btn right"
                 onClick={() => navToList()}>
                 Join Instance
             </button>

client/src/components/vbox.component.jsx

@@ -284,7 +284,7 @@ function Vbox(args) {
     }
 
     const classes = `vbox`;
-    const reclaimClass = `instance-btn instance-ui-btn vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
+    const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
 
     return (
         <div className={classes}>
@@ -294,7 +294,6 @@ function Vbox(args) {
                     <div className="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
                 </div>
                 <button
-                    className="instance-btn instance-ui-btn vbox-btn"
                     onMouseOver={e => hoverInfo(e, 'reroll')}
                     onClick={() => sendVboxDiscard()}>
                     Reroll
@@ -322,7 +321,6 @@ function Vbox(args) {
             <div className="vbox-combiner" onMouseOver={e => hoverInfo(e, 'combiner')} >
                 <h3 onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</h3>
                 <button
-                    className="instance-btn instance-ui-btn vbox-btn"
                     onMouseOver={e => hoverInfo(e, 'refine')}
                     onClick={() => sendVboxCombine()}>
                     refine