praise it

client/assets/styles/game.less

@@ -29,24 +29,20 @@
 .opponent {
     grid-area: opponent;
 
-    .combat-text {
-        top: 75%;
-        left: 50%;
-    }
-
-    .combat-anim {
-        top: 25%;
-        left: 50%;
-    }
-
     .game-construct {
         align-items: flex-start;
-        grid-template-rows: min-content min-content 1fr;
         grid-template-columns: 1fr 2fr;
-        grid-template-areas:
-            "effects stats"
-            "effects name"
-            "effects avatar";
+        grid-template-rows: 1fr;
+
+        .right {
+            height: 100%;
+            display: grid;
+            grid-template-rows: min-content min-content 1fr;
+            grid-template-areas:
+                "stats"
+                "name"
+                "avatar";
+        }
 
         .effects {
             align-self: flex-start;
@@ -70,12 +66,24 @@
 
     justify-items: center;
 
-    grid-template-rows: minmax(min-content, 1fr) min-content min-content;
-    grid-template-columns: 1fr 4fr;
-    grid-template-areas:
-        "skills avatar"
-        "effects name"
-        "effects stats";
+    grid-template-columns: 1fr 3fr;
+
+    .left {
+        display: grid;
+        grid-template-rows: 1fr 1fr;
+        grid-template-areas:
+            "skills "
+            "effects"
+    }
+
+    .right {
+        display: grid;
+        grid-template-rows: minmax(min-content, 1fr) min-content min-content;
+        grid-template-areas:
+            "avatar"
+            "name"
+            "stats";
+    }
 
     transition-property: translate, opacity;
     transition-duration: 0.25s;
@@ -117,23 +125,6 @@
         font-size: 1.5em;
     }
 
-    .ko {
-        animation: none;
-        opacity: 0.20;
-    }
-
-    .ko button:hover {
-        color: #333;
-    }
-
-    .unfocus {
-        opacity: 0.35;
-    }
-
-    .unfocus.ko {
-        opacity: 0.20;
-    }
-
     .stats {
         grid-area: stats;
         display: flex;
@@ -157,6 +148,23 @@
         white-space: nowrap;
         font-size: 100%;
     }
+
+    &.ko {
+        animation: none;
+        opacity: 0.20;
+    }
+
+    &.ko button:hover {
+        color: #333;
+    }
+
+    &.unfocus {
+        opacity: 0.35;
+    }
+
+    &.unfocus.ko {
+        opacity: 0.20;
+    }
 }
 
 @media (max-width: 1500px) {
@@ -187,29 +195,12 @@
     }
 }
 
-.combat-text {
-    font-size: 2em;
-    font-family: 'Jura';
-    position: absolute;
-    top: 5%;
-}
-
-.combat-text svg {
-    height: 7em;
-    max-width: 100%;
-}
-
 .combat-anim {
-    font-size: 2em;
-    font-family: 'Jura';
-    position: absolute;
-    object-fit: contain;
-    top: 15%;
     max-width: 100%;
 }
 
 .combat-anim svg {
-    height: 7em;
+    height: 100%;
     width: 100%;
 }