fix: harden API, add rate limiting, disable debug by default

- Add input validation and error handling across all API endpoints
  (malformed JSON, missing fields, invalid types return proper 4xx)
- Add per-IP rate limiting (10/min new games, 60/min other requests)
- Add session rollback on unhandled exceptions
- Default debug=False, add --debug CLI flag to opt in
- Frontend: add fetch error handling, fix feedback timeout stacking,
  disable buttons during requests, allow clicking found cells for
  overlapping word selection
- Expand seed data to 7 categories with 25-35 words each

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

templates/howtoplay.html

@@ -1,8 +1,80 @@
 {% extends "base.html" %}
 
+{% block active_page %}{% set active_page = "howtoplay" %}{% end %}
+
 {% block title %}Word Search — How to Play{% end %}
 
 {% block content %}
-<h2>How to Play</h2>
-<p>Instructions coming soon.</p>
+<h2 class="mb-4">📖 How to Play</h2>
+
+<div class="content-section">
+    <h3 class="mb-4">Step-by-Step Instructions</h3>
+
+    <div class="step-item">
+        <span class="step-number">1</span>
+        <p>
+            📋 <strong>Check the word list</strong> — Look at the list of words
+            displayed alongside the grid. These are the words you need to find.
+        </p>
+    </div>
+
+    <div class="step-item">
+        <span class="step-number">2</span>
+        <p>
+            🔍 <strong>Scan for the first letter</strong> — Pick a word from the
+            list and scan the grid for its first letter. This gives you a starting
+            point.
+        </p>
+    </div>
+
+    <div class="step-item">
+        <span class="step-number">3</span>
+        <p>
+            ↗️ <strong>Look in all directions</strong> — Words can run
+            horizontally, vertically, or diagonally — and they can go forward or
+            backward. Check all eight directions from your starting letter.
+        </p>
+    </div>
+
+    <div class="step-item">
+        <span class="step-number">4</span>
+        <p>
+            👆 <strong>Select the word</strong> — Click or tap the first letter of
+            the word, then click the last letter to highlight the entire word.
+        </p>
+    </div>
+
+    <div class="step-item">
+        <span class="step-number">5</span>
+        <p>
+            ✅ <strong>Words get crossed off</strong> — When you correctly find a
+            word, it gets crossed off the list so you can track your progress.
+        </p>
+    </div>
+
+    <div class="step-item">
+        <span class="step-number">6</span>
+        <p>
+            🏆 <strong>Find them all to win!</strong> — The puzzle is complete when
+            every word on the list has been found. Try to beat your best time!
+        </p>
+    </div>
+</div>
+
+<h3 class="mb-3">💡 Tips</h3>
+
+<div class="tip-card">
+    <strong>Start with uncommon letters</strong> — Letters like Q, X, Z, and J
+    appear less often in the grid, making words with those letters easier to spot.
+</div>
+
+<div class="tip-card">
+    <strong>Scan systematically</strong> — Work through the grid row by row or
+    column by column rather than jumping around randomly.
+</div>
+
+<div class="tip-card">
+    <strong>Look for word shapes</strong> — Sometimes you can spot diagonal words
+    by the distinctive slanted pattern they make in the grid.
+</div>
 {% end %}