feat(web): add Rules/Reference page with collapsible battle reference sections

Embeds Battle reference.md content as collapsible sections with markdown
rendering, expand/collapse all controls, and styled tables and blockquotes.

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

web/src/pages/RulesPage.tsx

@@ -1,12 +1,57 @@
+import { useState } from 'react';
+import Markdown from 'react-markdown';
 import TopBar from '../components/layout/TopBar';
 import PageContainer from '../components/layout/PageContainer';
+import { battleReferenceSections } from '../rules/battle-reference';
 
 export default function RulesPage() {
+  const [openSections, setOpenSections] = useState<Set<number>>(new Set());
+
+  const toggle = (index: number) => {
+    setOpenSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  };
+
+  const expandAll = () => {
+    setOpenSections(new Set(battleReferenceSections.map((_, i) => i)));
+  };
+
+  const collapseAll = () => {
+    setOpenSections(new Set());
+  };
+
   return (
     <>
       <TopBar title="Battle Reference" />
       <PageContainer>
-        <p style={{ color: 'var(--color-text-muted)' }}>Rules reference coming soon...</p>
+        <div className="rules-actions">
+          <button className="btn-secondary btn-sm" onClick={expandAll}>
+            Expand All
+          </button>
+          <button className="btn-secondary btn-sm" onClick={collapseAll}>
+            Collapse All
+          </button>
+        </div>
+
+        <div className="rules-sections">
+          {battleReferenceSections.map((section, i) => (
+            <details key={i} className="rules-section" open={openSections.has(i)}>
+              <summary className="rules-summary" onClick={(e) => { e.preventDefault(); toggle(i); }}>
+                {section.title}
+              </summary>
+              <div className="rules-content">
+                <Markdown>{section.content}</Markdown>
+              </div>
+            </details>
+          ))}
+        </div>
       </PageContainer>
     </>
   );