modified: templates/quiz_buzzer_multiplayer.html

templates/quiz_buzzer_multiplayer.html

@@ -98,10 +98,20 @@
     }
     .buzzer-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 20px;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 15px;
       margin: 30px 0;
     }
+    @media (min-width: 768px) {
+      .buzzer-grid {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+    @media (min-width: 1024px) {
+      .buzzer-grid {
+        grid-template-columns: repeat(4, 1fr);
+      }
+    }
     .player-buzzer {
       height: 150px;
       border-radius: 20px;
@@ -132,10 +142,11 @@
       opacity: 0.5;
     }
     .player-buzzer.start {
-      grid-column: 1 / -1;
       background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
       border-color: rgba(29, 185, 84, 0.3);
       box-shadow: 0 10px 40px rgba(29, 185, 84, 0.5);
+      width: 100%;
+      grid-column: 1 / -1;
     }
     .player-buzzer.start:hover {
       box-shadow: 0 15px 50px rgba(29, 185, 84, 0.7);
@@ -281,8 +292,13 @@
         console.log('Ready with Device ID', device_id);
         document.getElementById('device_id').value = device_id;
         window.deviceId = device_id;
+        
         setCorrectAnswer();
-        updateScoreboard();
+        
+        // Aktualisiere Scoreboard falls schon initialisiert
+        if (players.length > 0) {
+          updateScoreboard();
+        }
       });
 
       player.addListener('player_state_changed', state => {