Basic bot support and option to change opening text

public/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>YARN 2026 – Spin Your Story!</title>
+  <title>YARN 2026 – Spin a Story!</title>
   <style>
     :root {
       --bg-main: #4b0082;
@@ -561,6 +561,14 @@
               <label>Time per Round (sec):</label>
               <input type="number" id="time-limit" value="${gameState.gameSettings.timeLimit}" min="15" max="180">
             </div>
+            <div class="setting-group">
+              <label>Bots:</label>
+              <input type="number" id="bot-count" value="${gameState.gameSettings.botCount}" min="0" max="4">
+            </div>
+            <div class="setting-group">
+              <label>Starting Text:</label>
+              <input type="text" id="start-text" value="${gameState.gameSettings.startText}">
+            </div>
             <button id="start-game-btn">Start Game</button>
           `;
           
@@ -748,10 +756,14 @@
   function startGame() {
     const scoreLimit = parseInt(document.getElementById('score-limit').value) || 100;
     const timeLimit = parseInt(document.getElementById('time-limit').value) || 60;
+    const botCount = parseInt(document.getElementById('bot-count').value) || 0;
+    const startText = document.getElementById('start-text').value;
     
     socket.emit('startGame', {
       scoreLimit: Math.max(10, Math.min(9999, scoreLimit)),
-      timeLimit: Math.max(15, Math.min(600, timeLimit))
+      timeLimit: Math.max(15, Math.min(600, timeLimit)),
+      botCount: Math.max(0, Math.min(5, botCount)),
+      startText
     });
   }