Feat: Decks page.

static/css/pages/tcg/game.css

@@ -147,6 +147,9 @@
 }
 
 /* Game Section */
+#gameSection {
+    margin: 0 auto;
+}
 #gameSection .row.round {
     display: flex;
     align-items: center;
@@ -347,13 +350,16 @@
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
 }
 
-.life-controls {
+.life-gain-controls,
+.life-loss-controls {
     display: flex;
     gap: 1rem;
     justify-content: center;
+    margin-bottom: 1vh;
 }
 
-.life-btn {
+.life-gain-btn,
+.life-loss-btn {
     background: var(--tcg-bg-card);
     border: 2px solid var(--tcg-border-color);
     color: var(--tcg-text-primary);
@@ -370,17 +376,31 @@
     justify-content: center;
 }
 
-.life-btn:hover {
-    border-color: var(--tcg-accent-purple);
-    background: var(--tcg-accent-purple);
+.life-gain-btn:hover,
+.life-loss-btn:hover {
+    border-color: green; /*var(--tcg-accent-purple);*/
+    background: green; /*var(--tcg-accent-purple);*/
     color: var(--tcg-bg-primary);
     transform: scale(1.1);
 }
 
-.life-btn:active {
+.life-loss-btn:hover {
+    border-color: red;
+    background: red;
+}
+
+.life-gain-btn:active,
+.life-loss-btn:active {
     transform: scale(0.95);
 }
 
+.life-total label {
+    color: var(--tcg-text-primary);
+    width: 100%;
+    margin-bottom: 1vh;
+    display: inline-block;
+}
+
 /* Commander Damage Section */
 .commander-damage-section {
     border-top: 1px solid var(--tcg-border-color);
@@ -420,6 +440,7 @@
 .damage-source {
     font-size: 1rem;
     color: var(--tcg-text-secondary);
+    padding-right: 1vh;
 }
 
 .damage-controls {
@@ -478,8 +499,10 @@
 .damage-log.container table tbody tr td.received_from_commander_player_id {
     width: 20vw;
 }
-.damage-log.container table thead tr th.health_change,
-.damage-log.container table tbody tr td.health_change {
+.damage-log.container table thead tr th.life_gain,
+.damage-log.container table tbody tr td.life_gain,
+.damage-log.container table thead tr th.life_loss,
+.damage-log.container table tbody tr td.life_loss {
     width: 7vw;
 }
 .damage-log.container table thead tr th.commander-deaths,
@@ -583,7 +606,8 @@
         font-size: 3rem;
     }
 
-    .life-btn {
+    .life-gain-btn,
+    .life-loss-btn {
         width: 50px;
         height: 50px;
         font-size: 1.5rem;