better

client/assets/styles/game.less

@@ -327,6 +327,11 @@
             grid-template-rows: min-content 1fr;
 
             .left {
+                width: 100%;
+                grid-template-areas:
+                    "skills"
+                    "effects";
+                grid-template-columns: 1fr;
                 grid-template-rows: min-content min-content;
             }
 
@@ -361,9 +366,13 @@
                 font-size: 100%;
             }
 
-            .skills button, .stats, .name {
+            .stats, .name {
                 font-size: 75%;
             }
+
+            .skills button {
+                font-size: 50%;
+            }
         }
 
         .opponent {

client/assets/styles/styles.mobile.css

@@ -1,97 +0,0 @@
-@media (max-width: 800px) {
-    #mnml {
-        font-size: 12pt;
-        padding: 0;
-        grid-template-columns: 1fr;
-        grid-template-rows: 10fr 1fr;
-        grid-template-areas:
-          "main"
-          "footer";
-
-        height: 100vh;
-        max-height: initial;
-        min-height: initial;
-        overflow-y: initial;
-    }
-
-    #mnml button {
-        font-size: 10pt;
-    }
-
-    table td {
-        height: 2.5em;
-    }
-
-    nav {
-        display: none;
-    }
-
-    aside {
-        display: none;
-    }
-
-    footer {
-        display: flex;
-        position: fixed;
-        bottom: 0;
-        width: 100%;
-    }
-
-    #nav-btn, #instance-nav {
-        display: unset;
-    }
-
-    #mnml.nav-visible nav {
-        padding: 0.5em;
-        margin: 0;
-        display: block;
-        grid-area: main;
-    }
-
-    #mnml.nav-visible main {
-        display: none;
-    }
-
-/*    header {
-        display: none;
-    }
-*/
-    main {
-        overflow-x: hidden;
-        overflow-y: initial;
-        max-height: 100vh;
-        padding: 0 0.5em;
-    }
-
-    .welcome .login {
-        width: 100%;
-    }
-
-    .welcome .options {
-        width: 100%;
-        flex-flow: row wrap;
-    }
-
-    .welcome .options button {
-        flex: 1 0 50%;
-    }
-
-    .timer-container {
-        margin: 0.5em 0 0 0;
-    }
-
-    .mobile-title {
-        display: block;
-        margin-bottom: 1em;
-    }
-
-    .menu-instances {
-        display: grid;
-
-        grid-template-columns: 1fr;
-        grid-template-areas:
-            "constructs"
-            "inventory"
-            "games";
-    }
-}

client/index.js

@@ -8,7 +8,7 @@ require('./assets/styles/instance.less');
 require('./assets/styles/vbox.less');
 require('./assets/styles/game.less');
 require('./assets/styles/player.less');
-require('./assets/styles/styles.mobile.css');
+require('./assets/styles/styles.mobile.less');
 require('./assets/styles/instance.mobile.less');
 
 // kick it off