nearly there

client/cryps.css

@@ -656,17 +656,11 @@ table td svg {
 }
 
 .game-cryp figure {
-    margin: 0;
-    flex: 0 0 50%;
     text-align: center;
-    display: flex;
-    flex-flow: column;
-    justify-content: flex-end;
 }
 
 .game-cryp .stats {
-    flex: 1 0 25%;
+    flex: 1 0 20%;
-    align-items: flex-start;
     display: flex;
     flex-flow: row wrap;
 }
@@ -689,6 +683,10 @@ table td svg {
     height: 100%;
 }
 
+.resolving .skills button {
+    display: none;
+}
+
 .game-cryp .effects {
     max-height: 100%;
     font-size: 1.5em;
@@ -984,6 +982,10 @@ CRYP DAMAGE
         flex: unset;
     }
 
+    .instance-cryp .stats figure {
+        padding: 0.2em 0;
+    }
+
     .instance-cryp .skills, .instance-cryp .stats {
         display: none;
     }

client/src/components/game.component.jsx

@@ -138,7 +138,7 @@ function GamePanel(props) {
         const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
             <figure key={j} alt={s.stat}>
                 {s.svg(`stat-icon ${s.colour}`)}
-                <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
+                <figcaption>1000 / 1000</figcaption>
             </figure>
         ));
 
@@ -179,8 +179,10 @@ function GamePanel(props) {
         );
     }
 
+    const gameClasses = `game ${resolution ? 'resolving': ''}`;
+
     return (
-        <main className="game" onClick={() => setActiveCryp(null)} >
+        <main className={gameClasses} onClick={() => setActiveCryp(null)} >
             {header}
             {timer}
             {PlayerTeam(playerTeam, setActiveSkill)}