Feat: User Relationships and Session Members.

static/dist/css/tcg_game.bundle.css

@@ -16,7 +16,7 @@
 #pageBody {
     max-height: 82vh;
     padding: 0 5vw;
-    margin: 0;
+    margin: 0 auto;
     border: 0;
     align-content: center;
     justify-content: flex-start;
@@ -25,7 +25,6 @@
     align-items: flex-start;
     overflow-y: auto;
     overflow-x: hidden;
-    position: absolute;
     width: 90vw;
     color: var(--colour-text);
 }
@@ -66,6 +65,10 @@
 }
 /* MTG Single Game Page Styles */
 
+.tcg-title.dirty {
+    background-color: var(--tcg-accent-purple);
+}
+
 #buttonHamburger {
     display: none;
 }
@@ -166,7 +169,7 @@
 .control-group {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 0.5rem;
 }
 
 .control-group .tcg-input {
@@ -179,7 +182,7 @@
 .player-names-grid {
     display: flex;
     flex-wrap: wrap;
-    gap: 1rem;
+    gap: 0.5rem;
     max-width: 800px;
     margin: 0 auto 2rem;
     justify-content: center;
@@ -296,7 +299,7 @@
     transition: all 0.4s ease;
     animation: tcg-scaleIn 0.5s ease-out backwards;
     width: fit-content;
-    max-width: 38vw;
+    max-width: 35vw;
     min-width: 20vw;
     margin: 0 auto;
 }
@@ -322,7 +325,7 @@
     align-items: center;
     margin-bottom: 1.5rem;
     flex-wrap: wrap;
-    gap: 1rem;
+    gap: 0.5rem;
 }
 
 .player-info {
@@ -419,7 +422,7 @@
 .life-gain-controls,
 .life-loss-controls {
     display: flex;
-    gap: 1rem;
+    gap: 0.5rem;
     justify-content: center;
     margin-bottom: 1vh;
 }
@@ -430,7 +433,7 @@
     border: 2px solid var(--tcg-border-color);
     color: var(--tcg-text-primary);
     width: 60px;
-    height: 60px;
+    height: 45px;
     border-radius: 12px;
     font-family: 'Cinzel', serif;
     font-size: 1.8rem;