Mod UI: display numeric IDs in player list, buzz order, and team members instead of names

src/public/script.js

@@ -372,7 +372,7 @@ function renderModBuzz(evt){
         div.innerHTML=`
           <div class="bz-rank ${idx===0?'first':''}">${idx+1}</div>
           <div class="bz-info">
-            <div class="bz-name">${esc(p.name)}</div>
+            <div class="bz-name">${pid}</div>
             ${teamName?`<div class="bz-team" style="color:${color}">${esc(teamName)}</div>`:''}
             ${ms?`<div class="bz-ms">${ms} after first</div>`:''}
           </div>
@@ -409,7 +409,7 @@ function renderModPlayerList(){
         row.className='pl-row'+(p.isConnected?'':' offline');
         row.innerHTML=`
           <div class="pl-info" style="flex:1;min-width:0;">
-            <div class="pl-name">${esc(p.name)} ${p.isConnected?'':`<span class="tag tag-red" style="font-size:9px;padding:2px 6px;">OFFLINE</span>`}</div>
+            <div class="pl-name">${p.id} ${p.isConnected?'':`<span class="tag tag-red" style="font-size:9px;padding:2px 6px;">OFFLINE</span>`}</div>
             ${teamName?`<div class="pl-meta" style="color:${color}">${esc(teamName)}</div>`:'<div class="pl-meta">No team</div>'}
             ${teamSel}
           </div>
@@ -435,7 +435,7 @@ function renderModTeams(){
         card.innerHTML=`
           <div class="tc-n" style="color:${color}">${esc(name)}</div>
           <div class="tc-c" style="color:${color}">${members.length}</div>
-          <div class="tc-m">${members.map(p=>esc(p.name)).join('<br>')||'—'}</div>
+          <div class="tc-m">${members.map(p=>p.id).join('<br>')||'—'}</div>
         `;
         grid.appendChild(card);
         if(typeof gsap!=='undefined'){
@@ -525,7 +525,7 @@ function renderPlayer(){
     if(!room)return;
     document.getElementById('p-code').textContent=room.id;
     const me=room.players.find(p=>p.id===myId);
-    document.getElementById('p-namelbl').textContent=me?.name??'';
+    document.getElementById('p-namelbl').textContent=me?.id||'';
     renderTeamPicker();
     renderPlayerBuzzer();
     renderRoster();
@@ -624,7 +624,7 @@ function renderRoster(){
         row.className='roster-row'+(isMe?' roster-me':'');
         row.innerHTML=`
           <div class="roster-dot" style="background:${p.isConnected?(isMe?'var(--g)':color):'var(--border2)'}"></div>
-          <div style="flex:1">${esc(p.name)}${isMe?' <span style="font-size:11px;color:var(--dim);letter-spacing:1px;">(YOU)</span>':''}</div>
+          <div style="flex:1">${p.id}${isMe?' <span style="font-size:11px;color:var(--dim);letter-spacing:1px;">(YOU)</span>':''}</div>
           ${teamName?`<div style="font-size:12px;color:${color};letter-spacing:0.5px;">${esc(teamName)}</div>`:''}
         `;
         el.appendChild(row);
@@ -639,7 +639,7 @@ function addFeed(evt){
     const div=document.createElement('div');
     div.className='feed-entry'+(isFirst?' first':'');
     div.style.borderLeftColor=isFirst?'var(--yellow)':color;
-    div.innerHTML=`<strong>${esc(evt.playerName)}</strong>${teamStr} buzzed${isFirst?' <span style="color:var(--yellow);font-weight:700;"> — FIRST!</span>':''}`;
+    div.innerHTML=`<strong>#${evt.playerId}</strong>${teamStr} buzzed${isFirst?' <span style="color:var(--yellow);font-weight:700;"> — FIRST!</span>':''}`;
     feed.prepend(div);
     if(typeof gsap!=='undefined'){
         gsap.fromTo(div,