wip

client/assets/styles/game.less

@@ -199,7 +199,7 @@
     position: absolute;
     top: 35%;
     height: 15%;
-    width: 90%;
+    width: calc(90% - 1.25em);
 }
 
 .resolving-skill {
@@ -239,6 +239,9 @@
     overflow: hidden;
     max-height: 100%;
     max-width: 100%;
+
+    display: flex;
+    flex-flow: column;
 }
 
 .combat-anim svg {
@@ -339,12 +342,3 @@
 .animating .skills {
     opacity: 0;
 }
-
-.skill-animation {
-    opacity: 0;
-    stroke-width: 5px;
-    overflow: hidden;
-    max-height: 100%;
-    max-width: 100%;
-    // height: 5em;
-}

client/assets/styles/instance.less

@@ -225,7 +225,7 @@
         }
 
         figcaption {
-            font-size: 75%;
+            // font-size: 75%;
             line-height: initial;
         }
     }
@@ -239,7 +239,7 @@
         text-align: center;
 
         figcaption {
-            font-size: 75%;
+            // font-size: 75%;
         }
 
         // give speed some space

client/assets/styles/styles.mobile.less

@@ -5,6 +5,51 @@
 
     #mnml {
         font-size: 8pt;
+        padding: 0.25em;
+
+        .game {
+
+            .team, #targeting, .resolving-skill {
+                width: calc(90% - 3em);
             }
 
+            .game-construct {
+                .avatar {
+                    grid-area: initial;
+                    position: absolute;
+                    top: 0;
+                    height: 100%;
+                    width: 100%;
+                    z-index: -1;
+                }
+
+                svg {
+                    height: 1em;
+                }
+            }
+        }
+
+        .instance-construct {
+            position: relative;
+
+            .skills, .specs {
+                font-size: 75%;
+            }
+
+            .avatar {
+                grid-area: initial;
+                position: absolute;
+                top: 0;
+                height: 100%;
+                width: 100%;
+                z-index: -1;
+            }
+        }
+
+        .opponent {
+            .avatar {
+                bottom: 0;
+            }
+        }
+    }
 }

client/src/components/anims/siphon.tick.jsx

@@ -38,7 +38,7 @@ class SiphonTick extends Component {
     render() {
         return (
             <svg
-                class={'skill-anim'}
+                class='skill-anim'
                 version="1.1"
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"