fix: meter gradient now scales correctly across resolutions

The header element was width:100% so the gradient filled relative to
the viewport, not the visible text. With centered text, low fill
percentages fell entirely outside the text bounds — making the first
player (12.5%) invisible and causing shifts at different resolutions.
Changed to width:fit-content with translateX(-50%) centering so the
gradient maps 1:1 to the text content.

Made-with: Cursor

js/room-code-display.js

@@ -211,7 +211,7 @@ class RoomCodeDisplay {
     header.textContent = inputs.headerText.value;
     this.#applyMeterGradient();
     header.style.fontSize = `${inputs.headerSize.value}px`;
-    header.style.transform = `translateY(${inputs.headerOffset.value}px)`;
+    header.style.transform = `translateX(-50%) translateY(${inputs.headerOffset.value}px)`;
 
     footer.textContent = inputs.footerText.value;
     footer.style.color = inputs.footerColor.value;

optimized-controls.html

@@ -29,9 +29,9 @@
         
         #header {
             position: absolute;
-            width: 100%;
-            text-align: center;
-            transform: translateY(-220px);
+            width: fit-content;
+            left: 50%;
+            transform: translateX(-50%) translateY(-220px);
             color: #f35dcb;
             font-size: 80px;
             font-weight: bold;