join buttons

client/assets/styles/colours.less

@@ -1,10 +1,11 @@
 @green: #1FF01F;
 @red: #a52a2a;
-@blue: #3050f8;
+// @blue: #3498db // cyan?
 @blue: #3050f8;
 @white: #f5f5f5; // whitesmoke
 @purple: #9355b5; // 6lack - that far cover
 
+@black: black;
 @gray: #222;
 @gray-box: #222;
 @gray-exists: #444;

client/assets/styles/styles.less

@@ -163,7 +163,7 @@ button, input {
     flex: 1;
 
     /*the transitions */
-    transition-property: color;
+    transition-property: color background;
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: ease;
@@ -472,7 +472,7 @@ header {
     flex-flow: column;
 }
 
-.menu-instances {
+.play {
     height: 100%;
     display: grid;
 
@@ -480,32 +480,46 @@ header {
     grid-template-columns: 1fr 1fr;
 
     grid-template-areas:
-        "constructs constructs"
-        "inventory  games";
+        "team team"
+        "inventory  join";
+
+    .join {
+        grid-area: join;
+
+        .buttons {
+            margin-top: 1em;
+            display: grid;
+            font-size: 200%;
+            grid-template-columns: repeat(2, 1fr);
+            grid-gap: 1em;
+            flex-flow: row wrap;
+            align-items: flex-end;
+
+            button {
+                height: 3em;
+                &:hover {
+                    border-color: @green;
+                    color: @green;
+                }
+            }
+        }
+    }
+
+    .team {
+        grid-area: team;
+
+        /* poor man's <hr>*/
+        padding: 0.5em 2em 0 0;
+        margin-bottom: 2em;
+        border-bottom: 0.1em solid whitesmoke;
+    }
+
+    .menu-construct {
+        flex: 1 0 33%;
+    }
+
 }
 
-.menu-instances .construct-list {
-    grid-area: constructs;
-
-    /* poor man's <hr>*/
-    padding: 0.5em 2em 0 0;
-    margin-bottom: 2em;
-    border-bottom: 0.1em solid whitesmoke;
-}
-
-.menu-instances .menu-construct {
-    flex: 1 0 33%;
-}
-
-.menu-instance-list {
-    grid-area: games;
-    flex: 1;
-    order: 99;
-    flex-flow: row wrap;
-
-    display: flex;
-    align-content: flex-start;
-}
 
 .menu-instance-btn {
     flex: 1 1 100%;
@@ -612,10 +626,6 @@ main .top button {
     transition-timing-function: ease;
 }
 
-.menu-instance-list table {
-    margin-bottom: 2em;
-}
-
 footer {
     display: flex;
     flex-flow: row wrap;