whatever

client/assets/styles/instance.mobile.css

@@ -112,8 +112,6 @@
 
     .instance-construct .stats div {
         flex: 1 1 33%;
-        min-width: 0;
-        overflow: hidden;
     }
 
     .instance-nav {

client/assets/styles/styles.css

@@ -493,19 +493,13 @@ main .top button {
     width: 100%;
 }
 
-.ready:hover {
-    transition-property: color, border-color;
+.ready {
+    background: forestgreen;
+    color: black;
+
+    transition-property: color, background;
     transition-duration: 0.5s;
     transition-timing-function: ease;
-    color: forestgreen;
-    border-color: forestgreen;
-    /*box-shadow: inset -0.5em 0 0 0 forestgreen;*/
-}
-
-.ready, .instance-btn.ready {
-    color: forestgreen;
-    border-color: forestgreen;
-    box-shadow: inset -0.5em 0 0 0 forestgreen;
 }
 
 .timer-container {

client/src/components/game.footer.jsx

@@ -124,6 +124,7 @@ function GameFooter(props) {
     return (
         <footer>
             {timer}
+            <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
             <button
                 className={ready}
                 onClick={() => actionClick()}>

client/src/components/targeting.arrows.jsx

@@ -41,8 +41,8 @@ class TargetSvg extends Component {
             const sourceX = (source * width / 3) + width / 6;
             const targetX = (target * width / 3) + width / 6 + (defensive ? width / 32 : 0) + (source * width / 24) - (width / 24);
             const targetY = defensive ? height : 0;
-            const curveEnd = height * 0.25;
-            const curveStart = height * 0.75;
+            const curveEnd = height * 0.20;
+            const curveStart = height * 0.80;
 
             if (defensive) {
                 const path = `
@@ -87,6 +87,7 @@ class TargetSvg extends Component {
     componentDidMount() {
         window.addEventListener('resize', this.onResize);
         this.onResize();
+        setTimeout(this.onResize, 50);
     }
 
     componentWillUnmount() {