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/index.css

@@ -476,3 +476,106 @@ button:disabled {
   min-height: 80px;
   resize: vertical;
 }
+
+/* Rules Page */
+.rules-actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+}
+
+.rules-sections {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.rules-section {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.rules-summary {
+  padding: var(--spacing-md);
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.95rem;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.rules-summary::before {
+  content: '▸';
+  transition: transform 0.15s;
+  font-size: 0.8rem;
+}
+
+details[open] > .rules-summary::before {
+  transform: rotate(90deg);
+}
+
+.rules-summary::-webkit-details-marker {
+  display: none;
+}
+
+.rules-content {
+  padding: 0 var(--spacing-md) var(--spacing-md);
+  font-size: 0.9rem;
+  line-height: 1.6;
+}
+
+.rules-content h3 {
+  font-size: 0.9rem;
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--spacing-xs);
+  color: var(--color-primary);
+}
+
+.rules-content ul,
+.rules-content ol {
+  padding-left: var(--spacing-lg);
+  margin: var(--spacing-xs) 0;
+}
+
+.rules-content li {
+  margin-bottom: 2px;
+}
+
+.rules-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--spacing-sm) 0;
+  font-size: 0.85rem;
+}
+
+.rules-content th,
+.rules-content td {
+  border: 1px solid var(--color-border);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  text-align: left;
+}
+
+.rules-content th {
+  background: var(--color-accent);
+  font-weight: 600;
+}
+
+.rules-content blockquote {
+  border-left: 3px solid var(--color-primary);
+  padding-left: var(--spacing-md);
+  margin: var(--spacing-sm) 0;
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+.rules-content strong {
+  color: var(--color-text);
+}
+
+.rules-content p {
+  margin: var(--spacing-xs) 0;
+}