Condense UI labels and align obstacle statistics

frontend/src/assets/css/scene-play.css

@@ -236,7 +236,7 @@
     padding: 1.25rem;
     background: var(--well);
     display: grid;
-    grid-template-columns: 0.8fr 2fr 1fr 1fr;
+    grid-template-columns: 0.8fr 2fr 2fr;
     gap: 1rem;
     position: relative;
     overflow: hidden;
@@ -335,11 +335,17 @@
     color: var(--text-muted);
 }
 
-.obstacle-value-display {
+.obstacle-stats {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     align-self: start;
+    gap: 0.5rem;
+}
+
+.obstacle-value-display {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     background: color-mix(in srgb, var(--accent) 5%, transparent);
     border: 1px dashed var(--edge-accent);
@@ -348,10 +354,9 @@
 }
 
 .obstacle-successes-display {
-    align-self: start;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     background: color-mix(in srgb, var(--success) 5%, transparent);
     border: 1px dashed color-mix(in srgb, var(--success) 30%, transparent);
@@ -361,7 +366,7 @@
 
 .obstacle-successes-display .val-number {
     color: var(--success);
-    font-size: 1.5rem;
+    font-size: 1.8rem;
 }
 
 .val-label {