game styles alignment

client/assets/styles/game.css

@@ -51,6 +51,10 @@
     margin-top: 0.25em;
 }
 
+.opponent .game-construct .img {
+    align-items: flex-start;
+}
+
 .game-construct {
     display: grid;
 
@@ -58,7 +62,7 @@
     justify-items: start;
     /*align-items: flex-end;*/
 
-    grid-template-rows: min-content minmax(min-content, 2fr) min-content min-content min-content;
+    grid-template-rows: minmax(min-content, 2fr) min-content min-content min-content min-content;
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
         "skills     ."
@@ -85,8 +89,11 @@
 
 .game-construct .img {
     grid-area: avatar;
+    display: flex;
+    align-items: flex-end;
 }
 
+
 .game-construct .name {
     width: 100%;
     margin-bottom: 0.25em;

client/src/components/game.construct.jsx

@@ -55,7 +55,7 @@ function GameConstruct(props) {
 
     const ko = construct.green_life.value === 0 ? 'ko' : '';
     const classes = eventClasses(resolution, construct);
-    
+
     const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
         <div key={j} alt={STATS[s].stat}>
             {shapes[s]()}
@@ -67,7 +67,7 @@ function GameConstruct(props) {
 
     const skills = range(0, 3)
         .map(i => <SkillBtn key={i} construct={construct} i={i} />);
-    
+
     let crypSkills = <div> &nbsp; </div>;
     if (player) crypSkills = (<div className="skills"> {skills} </div>);
 
@@ -109,6 +109,7 @@ function GameConstruct(props) {
                 {combatTextEl}
             </figure>
             <div className="effects"> {effects} </div>
+            <div className="spacer"></div>
         </div>
     );
 }