Add hint cooldown and raise player limit to 15

- Lock hint button for 10s per riddle with live countdown display
- Clear hint timer when player finishes their race
- Raise max players from 8 to 15 with 15 distinct player colors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/game.js

@@ -11,6 +11,7 @@ let myRoomId   = null;
 let amHost     = false;
 let myFinished = false;
 let carEmojiMap = {}; // playerId → car emoji
+let hintTimer  = null; // countdown interval for hint button
 
 // ── Screen helpers ─────────────────────
 const screens = {
@@ -225,6 +226,28 @@ function showRiddle(riddle, num, total) {
   hintBox.style.display     = 'none';
   hintText.textContent      = '';
   answerInput.focus();
+  startHintCountdown();
+}
+
+function startHintCountdown() {
+  clearInterval(hintTimer);
+  hintBox.style.display = 'none';
+  hintBtn.disabled = true;
+
+  let remaining = 10;
+  hintBtn.textContent = `💡 Hint (${remaining}s)`;
+
+  hintTimer = setInterval(() => {
+    remaining--;
+    if (remaining <= 0) {
+      clearInterval(hintTimer);
+      hintTimer = null;
+      hintBtn.disabled = false;
+      hintBtn.textContent = '💡 Hint';
+    } else {
+      hintBtn.textContent = `💡 Hint (${remaining}s)`;
+    }
+  }, 1000);
 }
 
 function setFeedback(msg, isCorrect) {
@@ -359,6 +382,8 @@ socket.on('answerResult', ({ correct, finished, finishPosition, riddle, riddleNu
 
   if (finished) {
     myFinished = true;
+    clearInterval(hintTimer);
+    hintTimer = null;
     progressFill.style.width = '100%';
     riddlePanel.style.display   = 'none';
     finishedBanner.style.display = 'flex';

public/index.html

@@ -43,7 +43,7 @@
         <div id="error-msg" class="error-msg"></div>
       </div>
 
-      <p class="home-footer">Up to 8 players &bull; Answer 10 riddles to cross the finish line</p>
+      <p class="home-footer">Up to 15 players &bull; Answer 10 riddles to cross the finish line</p>
     </div>
   </div>
 

server.js

@@ -11,7 +11,8 @@ const io = new Server(server);
 app.use(express.static(path.join(__dirname, 'public')));
 
 const FINISH_LINE = 10;
-const COLORS = ['#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c', '#e67e22', '#e91e63'];
+const COLORS = ['#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c', '#e67e22', '#e91e63',
+                '#ff6b6b', '#54a0ff', '#5f27cd', '#01CBC6', '#ffd32a', '#0be881', '#f8b739'];
 
 const rooms = {};
 
@@ -100,7 +101,7 @@ io.on('connection', (socket) => {
     const room = rooms[upperCode];
     if (!room) return socket.emit('joinError', 'Room not found. Check the code and try again.');
     if (room.state !== 'lobby') return socket.emit('joinError', 'That race already started. Wait for the next one!');
-    if (Object.keys(room.players).length >= 8) return socket.emit('joinError', 'Room is full (max 8 racers).');
+    if (Object.keys(room.players).length >= 15) return socket.emit('joinError', 'Room is full (max 15 racers).');
 
     const usedColors = new Set(Object.values(room.players).map(p => p.color));
     const color = COLORS.find(c => !usedColors.has(c)) || COLORS[Object.keys(room.players).length % COLORS.length];