mobile styles

client/assets/styles/styles.less

@@ -8,7 +8,6 @@
 @import 'vbox.less';
 @import 'game.less';
 @import 'player.less';
-@import 'styles.mobile.less';
 
 html body {
     margin: 0;
@@ -33,7 +32,6 @@ html body {
     height: 100vh;
     max-height: 100vh;
     min-height: 100vh;
-    /*padding: 0 20%;*/
 
     /* stops inspector going skitz*/
     overflow-x: hidden;
@@ -255,20 +253,10 @@ figure.gray {
 
     svg {
         height: 1em;
+        stroke-width: 1em;
     }
 }
 
-@media (max-width: 1150px) {
-    #mnml {
-        font-size: 60%;
-    }
-
-    svg {
-        height: 1em;
-    }
-}
-
-
 .mobile-title {
     display: none;
 }
@@ -370,3 +358,5 @@ li {
         flex: 1;
     }
 }
+
+@import 'styles.mobile.less';

client/assets/styles/styles.mobile.less

@@ -6,11 +6,23 @@
 
     #mnml {
         font-size: 8pt;
-        padding: 0.25em;
+        padding: 0;
 
         .instance {
+            grid-template-areas:
+                "vbox vbox"
+                "constructs constructs";
+
             font-size: 7.5pt;
+
+            .stats {
+                div:nth-child(4n) {
+                    margin: 0;
+                }
+            }
+
             .info {
+                display: none;
                 .combos {
                     display: none;
                 }
@@ -18,8 +30,70 @@
             svg {
                 stroke-width: 1.25em;
             }
-            .avatar {
+
-                display: none;
+            .vbox {
+                grid-template-rows: min-content min-content 1fr;
+                grid-template-columns: min-content 1fr min-content 1fr;
+                grid-template-areas:
+                    "store-hdr store-hdr stash-hdr stash-hdr"
+                    "store store stash stash"
+                    "store store combiner combiner";
+
+                .stash {
+                    border: 0;
+                    border-top: 0.1em solid @gray;
+                    border-right: 0.1em solid @gray;
+                    border-bottom: 0.1em solid @gray;
+                }
+
+                .stash-hdr {
+                    border: 0;
+                    border-left: 0.1em solid @gray;
+                    border-right: 0.1em solid @gray;
+
+                    display: grid;
+                    grid-template-rows: min-content min-content;
+                    grid-template-columns: 1fr 1fr;
+
+                    h3 {
+                        margin: 0;
+                    }
+                }
+
+                .store {
+                    border: 0;
+                    border-top: 0.1em solid @gray;
+                    border-bottom: 0.1em solid @gray;
+                    border-right: 0.1em solid @gray;
+                }
+
+                .store-hdr {
+                    display: grid;
+                    grid-template-rows: min-content;
+                    grid-template-columns: 1fr 1fr;
+
+                    grid-template-areas:
+                        "hdr btn"
+                        "bits btn";
+
+                    h3 {
+                        grid-area: hdr;
+                    }
+
+                    .bits {
+                        grid-area: bits;
+                    }
+
+                    button {
+                        grid-area: btn;
+                    }
+                }
+
+                .store-hdr, .stash-hdr {
+                    button {
+                        margin: 0;
+                    }
+                }
             }
         }
 
@@ -29,7 +103,12 @@
                 svg {
                     stroke-width: 1.5em;
                 }
+
+                div:nth-child(4n) {
+                    margin: 0 0.25em;
+                }
             }
+
             .team, #targeting, .resolving-skill {
                 width: calc(90% - 3em);
             }
@@ -126,6 +205,10 @@
                 width: 100%;
                 z-index: -1;
             }
+
+            button:not([disabled]) {
+                background: black;
+            }
         }
 
         aside {
@@ -139,7 +222,7 @@
 
 
 // portrait menu
-@media (max-width: 600px) {
+@media (max-width: 500px) {
     #mnml {
         grid-template-columns: 1fr;
         grid-template-rows: 1fr;