better resizing for opponent

client/game.css

@@ -2,7 +2,7 @@
 
 .game {
     display: grid;
-    grid-template-rows: 1.5em 1.5em 1fr 1.5fr;
+    grid-template-rows: min-content min-content 1fr 1.5fr;
     grid-template-areas:
         "ready"
         "timer"
@@ -28,28 +28,18 @@
     grid-area: opponent;
 }
 
-.targeting-arrows {
-    grid-area: middle;
-}
-
 .opponent .combat-text {
     left: 40%;
     transform: translate(-50%, -50%);
 }
 
 
-.targeting-arrows path {
-    stroke: whitesmoke;
-    stroke-width: 4px;
-}
-
 .opponent .game-cryp {
-    grid-template-rows: auto auto minmax(0, 1fr) auto;
+    grid-template-rows: 1fr 2fr 1fr;
+    grid-template-columns: 1fr min-content 1fr;
     grid-template-areas:
-        "stats      ."
-        "effects    ."
-        "avatar     target"
-        "skills     .";
+        "stats  stats effects"
+        "avatar target .";
 }
 
 .game-cryp {
@@ -78,8 +68,9 @@
     display: flex;
     flex-flow: column;
     justify-content: center;
-    align-items: flex-end;
+    align-items: flex-start;
     width: 100%;
+    white-space: nowrap;
 }
 
 .game-cryp .img {
@@ -101,12 +92,26 @@
     font-size: 100%;
 }
 
+@media (max-width: 1500px) {
+    .game {
+        font-size: 75%;
+    }
+
+    .game-cryp figure {
+        padding: 0 0.25em;
+    }
+
+/*    .game .stat-icon {
+        height: 1.5em;
+        stroke-width: 3px;
+    }
+*/}
+
 .game-cryp .skills {
     grid-area: skills;
     display: flex;
     flex-flow: column-reverse;
-    align-items: baseline;
-    /*flex-flow: column;*/
+    justify-self: center;
 }
 
 /*@media (max-width: 1000px) {
@@ -115,8 +120,10 @@
     }
 }
 */
+
 .game-cryp .effects {
     font-size: 1.5em;
+    white-space: nowrap;
 }
 
 .game-btn {
@@ -130,7 +137,6 @@
 .game-cryp button {
     color: #888;
     flex: 1 1 100%;
-    font-size: 16pt;
     padding: 0;
     margin: 0 0.5em;
     border-width: 0px;
@@ -143,7 +149,7 @@
 .game-cryp button[disabled], .game-cryp button[disabled]:hover {
     color: #333333;
     font-size: 14pt;
-    /*text-decoration: line-through*/
+    /*text-decoration: line-through
 }
 
 .game-cryp button:hover {

client/src/components/game.component.jsx

@@ -138,7 +138,9 @@ function GamePanel(props) {
                     {effects}
                 </div>
                 <div className="targeting">
-                    <div>{'<'}</div>
+                    <div>{'< Decay'}</div>
+                    <div>{'< Attack'}</div>
+                    <div>{'< Sustain'}</div>
                 </div>
                 <figure
                     className="img"

client/src/components/game.cryp.jsx

@@ -79,7 +79,9 @@ function GameCryp(props) {
                 {skills}
             </div>
             <div className="targeting">
-                <div>{'<'}</div>
+                <div>{'< Decay'}</div>
+                <div>{'< Attack'}</div>
+                <div>{'< Sustain'}</div>
             </div>
             <figure
                 className="img"

client/styles.css

@@ -62,7 +62,7 @@ main {
 
 nav {
     grid-area: nav;
-    margin-right: 1em;
+    margin-right: 2em;
 }
 
 nav button {
@@ -113,6 +113,7 @@ button, input {
     border-radius: 0;
     letter-spacing: 0.25em;
     box-sizing: border-box;
+    font-size: 100%;
 
     /*the transitions */
     transition-property: all;