fix info

client/assets/styles/controls.less

@@ -0,0 +1,35 @@
+aside {
+    grid-area: ctrl;
+    display: grid;
+
+    padding: 1em;
+
+    button {
+        width: 100%;
+        font-size: 150%;
+    }
+
+    button.ready {
+        &:hover {
+            color: forestgreen;
+            border-color: forestgreen;
+        }
+
+        &:active, &:focus {
+            background: forestgreen;
+            color: black;
+            border-color: forestgreen;
+        }
+    }
+}
+
+.ready-btn:hover, .ready-btn:focus, .ready-btn:active {
+    color: forestgreen;
+}
+
+.ready {
+    color: forestgreen;
+    transition-property: color, background;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
+}

client/assets/styles/game.less

@@ -4,20 +4,11 @@
     overflow: hidden;
     display: grid;
     grid-template-rows: 1fr 0.5fr 1.5fr;
-    grid-template-columns: 1fr 0.15fr;
+    grid-template-columns: 1fr;
     grid-template-areas:
-        "opponent controls"
-        "target   controls"
-        "player   controls";
-
-    .controls {
-        margin: 1em 1em 0 0;
-        grid-area: controls;
-
-        button {
-            width: 100%;
-        }
-    }
+        "opponent"
+        "target  "
+        "player  ";
 }
 
 .game .team {
@@ -430,10 +421,6 @@
 
         grid-template-rows: 1fr 0.2fr 1.5fr;
         grid-template-columns: 1fr;
-
-        .controls {
-            display: none;
-        }
     }
 
     .game .stats div {

client/assets/styles/instance.less

@@ -35,41 +35,26 @@
 }
 
 .scoreboard {
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-
-    table {
-        flex: 1;
-    }
-
-    button {
-        flex: 1;
-        margin-bottom: 1em;
-        width: 75%;
-        font-size: 150%;
-        line-height: 3em;
-    }
+    flex: 1;
 }
 
 .instance .info {
     /*font-size: 75%;*/
-    margin-left: 1em;
+    margin: 3em 0 0 1em;
     grid-area: info;
     display: flex;
     flex-flow: column;
-    justify-content: center;
-    white-space: pre-wrap;
+    // white-space: pre-wrap;
+
+    > *:first-child {
+        margin-bottom: 1em;
+    }
 }
 
 .instance .info h2 {
     text-transform: uppercase;
 }
 
-.instance .info .combos {
-    margin-top: 1.5em;
-}
-
 .instance .constructs {
     grid-area: constructs;
 }
@@ -371,8 +356,7 @@
 
 .thresholds {
     display: flex;
-    flex-flow: column;
-    text-align: center;
+    flex-flow: row;
 }
 
 .thresholds svg {
@@ -383,13 +367,21 @@
     margin: 1em 0;
 }
 
-.colour-reqs {
-    display: flex;
-    flex-flow: row;
-    justify-content: space-around;
+.spec-goal {
+    margin-top: 0.5em;
+
+    div {
+        display: flex;
+        margin: 0 1em 1em 0;
+    }
+
+    .bonus {
+        justify-content: flex-end;
+    }
 }
 
 .thresholds figure svg {
+    margin-right: 0.25em;
     height: 1.5em;
 }
 

client/assets/styles/styles.less

@@ -77,12 +77,12 @@ figure {
 
 #mnml {
     display: grid;
-    grid-template-columns: minmax(min-content, 1fr) 8fr;
+    grid-template-columns: minmax(min-content, 1fr) 8fr 1fr;
     grid-template-rows: min-content 1fr min-content;
     grid-template-areas:
-      "hd  hd"
-      "nav main"
-      "nav main";
+      "hd  hd   ctrl"
+      "nav main ctrl"
+      "nav main ctrl";
 }
 
 nav {
@@ -453,6 +453,9 @@ header {
 .inventory {
     margin-right: 2em;
     grid-area: inventory;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
 }
 
 .inventory .list {
@@ -476,11 +479,11 @@ header {
     display: grid;
 
     grid-template-rows: minmax(min-content, 2fr) 1fr;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
 
     grid-template-areas:
-        "team team"
-        "inventory  join";
+        "team"
+        "inventory";
 
     .join {
         grid-area: join;
@@ -587,35 +590,6 @@ main .top button {
     width: 100%;
 }
 
-
-.ready-btn:hover, .ready-btn:focus, .ready-btn:active {
-    color: forestgreen;
-}
-
-.ready {
-    color: forestgreen;
-    transition-property: color, background;
-    transition-duration: 0.5s;
-    transition-timing-function: ease;
-}
-
-button.ready {
-    width: 75%;
-    font-size: 150%;
-    line-height: 3em;
-
-    &:hover {
-        color: forestgreen;
-        border-color: forestgreen;
-    }
-
-    &:active, &:focus {
-        background: forestgreen;
-        color: black;
-        border-color: forestgreen;
-    }
-}
-
 .timer-container {
     display: flex;
     flex: 1 1 100%;

client/assets/styles/styles.mobile.css

@@ -21,6 +21,10 @@
         display: none;
     }
 
+    aside {
+        display: none;
+    }
+
     footer {
         display: flex;
     }