boxes wit msgs

client/assets/styles/controls.less

@@ -38,7 +38,7 @@ aside {
     }
 
     div {
-        text-align: right;
+        text-align: center;
     }
 
     button {

client/assets/styles/instance.less

@@ -195,15 +195,6 @@
 }
 
 .construct-list {
-    .avatar {
-        grid-area: avatar;
-        object-fit: contain;
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center;
-        // pointer-events: none;
-    }
-
     .name {
         grid-area: name;
         margin-bottom: 0.5em;

client/assets/styles/player.less

@@ -2,29 +2,35 @@
 
 .player-box {
     display: grid;
-
     grid-template-areas:
-        "score"
+        "msg"
         "img"
+        "name"
+        "score"
         "ctrl";
 
+    grid-template-rows: min-content 1fr min-content min-content min-content;
+
     &.top {
         grid-template-areas:
             "ctrl"
+            "score"
+            "name"
             "img"
-            "score";
+            "msg";
 
-        .img {
-            display: flex;
-            flex-flow: column;
-            justify-content: flex-end;
-        }
+        grid-template-rows: min-content min-content min-content 1fr min-content;
     }
 
-    grid-template-rows: min-content 1fr min-content;
-
     .score {
         grid-area: score;
+        display: flex;
+        justify-content: space-around;
+        text-align: center;
+
+        span {
+            flex: 1;
+        }
     }
 
     .img {
@@ -34,4 +40,10 @@
     .ctrl {
         grid-area: ctrl;
     }
+
+    .msg {
+        grid-area: msg;
+        color: @white;
+    }
+
 }

client/assets/styles/styles.less

@@ -299,6 +299,15 @@ li {
     background-position: center;
 }
 
+.avatar {
+    grid-area: avatar;
+    object-fit: contain;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    // pointer-events: none;
+}
+
 #clipboard {
   width: 1px;
   height: 1px;