at last i may rest

client/assets/styles/game.css

@@ -52,8 +52,7 @@
 .game-construct {
     display: grid;
 
-    /*justify-items: center;*/
-    justify-items: start;
+    justify-items: center;
     /*align-items: flex-end;*/
 
     grid-template-rows: min-content minmax(min-content, 1fr) min-content min-content min-content;
@@ -100,8 +99,8 @@
 .game-construct .stats {
     grid-area: stats;
     display: flex;
-    width: 100%;
     justify-content: center;
+    text-align: center;
 }
 
 .game-construct .stats div {

client/assets/styles/instance.css

@@ -199,17 +199,6 @@
     text-align: center;
 }
 
-.construct-list .avatar figure {
-    margin: 0;
-    height: 80%;
-    text-align: center;
-    box-sizing: border-box;
-}
-
-.construct-list .avatar figcaption {
-    font-size: 90%;
-}
-
 .construct-list .skills {
     grid-area: skills;
     display: flex;
@@ -246,19 +235,19 @@
     display: flex;
     flex-flow: row;
     flex: 1;
-    justify-content: center;
     border-width: 0px;
+    text-align: center;
 }
 
 .construct-list .stats figcaption {
     font-size: 75%;
 }
 
-.stats figure:nth-child(4n) {
+.stats div:nth-child(4n) {
     margin: 0 1em;
 }
 
-.stats figure {
+.stats div {
     flex: 1;
 }
 

client/assets/styles/instance.mobile.css

@@ -1,5 +1,6 @@
 @media (max-height: 800px), (max-width: 1000px) {
     .instance {
+        font-size: 8pt;
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: min-content 1fr;
@@ -78,29 +79,41 @@
         transition-timing-function: ease;
     }
 
+    .instance-construct .avatar {
+        min-height: 150px;
+    }
+
     .instance-construct:not(:last-child) {
         border-right: 1px solid #222;
     }
 
+    .instance-construct .skills {
+        flex-flow: column;
+    }
+
+    .instance-construct .skills button {
+        margin: 0;
+    }
+
     .instance-construct .specs {
         margin: 0;
     }
 
     .construct-list .stats {
         flex-flow: row wrap;
+        text-align: center;
     }
 
-    .construct-list .stats figcaption {
-        font-size: 75%;
-    }
-
-    .instance-construct .stats figure.speed {
+    .instance-construct .stats div.speed {
         order: -1;
         flex: 1 0 100%;
+        margin: 0;
     }
 
-    .instance-construct .stats figure {
-        flex: 1 0 33%;
+    .instance-construct .stats div {
+        flex: 1 1 33%;
+        min-width: 0;
+        overflow: hidden;
     }
 
     .instance-nav {

client/assets/styles/styles.mobile.css

@@ -1,6 +1,6 @@
-@media (max-height: 800px), (max-width: 1000px) {
+@media (max-height: 800px), (max-width: 800px) {
     #mnml {
-        font-size: 8pt;
+        font-size: 10pt;
         padding: 0;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr min-content;
@@ -10,7 +10,7 @@
     }
 
     #mnml button {
-        font-size: 8pt;
+        font-size: 10pt;
     }
 
     table td {