fix: player list styling and positioning tweaks

- Empty slots use subtle gray dashed line instead of solid characters
- Left/Right positions anchor to screen edges, never obscuring room code
- Player list enabled by default
- Fix VALID_TRANSITIONS.get() crash (plain object, not Map)

Made-with: Cursor

js/player-list.js

@@ -186,7 +186,7 @@ export class PlayerList {
 
       const name = document.createElement('span');
       name.className = 'player-slot-name empty';
-      name.textContent = '────────';
+      name.textContent = '\u00A0';
 
       slot.appendChild(number);
       slot.appendChild(name);
@@ -219,10 +219,11 @@ export class PlayerList {
 
     for (const slot of this._slots) {
       slot.nameEl.style.fontSize = fontPx;
+      slot.element.querySelector('.player-slot-number').style.fontSize = fontPx;
       if (slot.nameEl.classList.contains('filled')) {
         slot.nameEl.style.color = textColor;
       } else {
-        slot.nameEl.style.color = emptyColor;
+        slot.nameEl.style.borderBottomColor = emptyColor;
       }
     }
   }
@@ -261,14 +262,15 @@ export class PlayerList {
           slot.nameEl.style.opacity = '1';
         }
       } else if (slot.filled) {
-        slot.nameEl.textContent = '────────';
+        slot.nameEl.textContent = '\u00A0';
         slot.nameEl.classList.remove('filled');
         slot.nameEl.classList.add('empty');
         slot.filled = false;
         slot.nameEl.style.transition = '';
         slot.nameEl.style.opacity = '1';
+        slot.nameEl.style.color = 'transparent';
         if (inputs) {
-          slot.nameEl.style.color = inputs.emptyColor.value;
+          slot.nameEl.style.borderBottomColor = inputs.emptyColor.value;
         }
       }
     }

js/state-manager.js

@@ -331,7 +331,7 @@ export class OverlayManager {
    */
   #transitionTo(next) {
     const current = this.#state;
-    if (!VALID_TRANSITIONS.get(current)?.has(next)) {
+    if (!VALID_TRANSITIONS[current]?.has(next)) {
       return;
     }