compress

client/assets/styles/game.css

@@ -98,7 +98,7 @@
 
 @media (max-width: 1500px) {
     .game {
-        font-size: 75%;
+        font-size: 12pt;
     }
 
     .game-cryp figure {

client/assets/styles/instance.css

@@ -167,6 +167,7 @@
     justify-self: center;
     grid-area: avatar;
     min-width: 150px;
+    max-width: 250px;
 }
 
 .cryp-list .name {
@@ -342,6 +343,7 @@
     font-size: 1em;
     padding: 0.2em;
     border-width: 0px;
+    margin-bottom: 0.5em;
 }
 
 button.equip {

client/assets/styles/instance.mobile.css

@@ -115,7 +115,7 @@
 
     .instance-cryp-active {
         flex: 1;
-        order: 3;
+        order: -1;
         display: grid;
         grid-template-rows: min-content min-content min-content min-content min-content;
         grid-template-areas:

client/assets/styles/styles.css

@@ -9,7 +9,7 @@ html, body, #cryps {
     background-color: #000000;
     font-family: 'Jura';
     color: whitesmoke;
-    font-size: 16pt;
+    font-size: 14pt;
 
     user-select: none;
     -moz-user-select: none;
@@ -58,6 +58,7 @@ h4 {
 
 figure {
     margin: 0;
+    text-align: center;
 }
 
 #cryps {
@@ -199,9 +200,9 @@ thead {
 table td {
     border: 1px solid #222;
     border-color: #222;
-    padding: 0.2em;
+    padding: 0;
     text-align: center;
-    height: 40px;
+    height: 2em;
     text-transform: uppercase;
 }
 

client/assets/styles/styles.mobile.css

@@ -1,6 +1,6 @@
 @media (max-height: 800px), (max-width: 1000px) {
     #cryps {
-        font-size: 55%;
+        font-size: 12pt;
         grid-template-columns: min-content 1fr;
         grid-template-rows: min-content 1fr;
         grid-template-areas: