Add local bot practice mode

index.html

@@ -19,6 +19,11 @@
           </button>
         </header>
 
+        <div class="mode-row" aria-label="Game mode">
+          <button id="practiceButton" class="mode-button active" type="button">BOT</button>
+          <button id="onlineButton" class="mode-button" type="button">NET</button>
+        </div>
+
         <div class="status-row" aria-live="polite">
           <div id="turnBadge" class="turn-badge player-x">X to play</div>
           <div id="message" class="message">Trap enemy marks between your marks. First to four wins.</div>
@@ -42,8 +47,18 @@
         </div>
 
         <div class="rule-card">
-          <h2>RULE</h2>
-          <p>Open the game in two browser windows. The first two connected players are paired automatically.</p>
+          <h2>GOAL</h2>
+          <p>Place marks on the 5x5 grid. First player to make 4 in a row horizontally, vertically, or diagonally wins.</p>
+        </div>
+
+        <div class="rule-card">
+          <h2>CAPTURE</h2>
+          <p>When your new mark traps enemy marks in a straight line between two of your marks, those enemy marks are removed.</p>
+        </div>
+
+        <div class="rule-card">
+          <h2>MODES</h2>
+          <p>BOT is local practice against random moves. NET pairs the first two connected players automatically.</p>
         </div>
 
         <ol id="moveList" class="move-list" aria-label="Move history"></ol>