fixes and mobile tweaks

client/assets/styles/game.less

@@ -85,6 +85,7 @@
         width: 100%;
         display: grid;
 
+        grid-area: left;
         grid-template-columns: 1fr 2fr;
         grid-template-areas:
             "skills effects";
@@ -92,6 +93,7 @@
 
     .right {
         display: grid;
+        grid-area: right;
         grid-template-rows: minmax(min-content, 1fr) min-content min-content;
         grid-template-areas:
             "avatar"

client/assets/styles/styles.mobile.less

@@ -24,12 +24,15 @@
         }
 
         .game {
-
             .team, #targeting, .resolving-skill {
                 width: calc(90% - 3em);
             }
 
             .game-construct {
+                grid-template-columns: 1fr;
+                grid-template-rows: min-content 1fr;
+
+
                 .avatar {
                     grid-area: initial;
                     position: absolute;
@@ -43,6 +46,51 @@
                     height: 1em;
                 }
             }
+
+            .skills {
+                button[disabled] {
+                    display: none;
+                }
+            }
+
+            .skill-description {
+                font-size: 75%;
+            }
+
+            .effects {
+                font-size: 1em;
+            }
+
+            .player {
+                .game-construct {
+                    grid-template-areas:
+                        "left"
+                        "right";
+
+                    .left {
+                        grid-template-columns: 1fr;
+                        grid-template-rows: 1fr min-content;
+                        grid-template-areas:
+                            "skills"
+                            "effects";
+
+                    }
+                }
+            }
+
+            .opponent {
+                .game-construct {
+                    grid-template-rows: 2fr min-content;
+                    grid-template-rows: 1fr;
+                    grid-template-areas:
+                        "right"
+                        "left";
+                }
+
+                .avatar {
+                    bottom: 0px;
+                }
+            }
         }
 
         .instance-construct {
@@ -61,11 +109,5 @@
                 z-index: -1;
             }
         }
-
-        .opponent {
-            .avatar {
-                bottom: 0;
-            }
-        }
     }
 }