feat(web): render markdown tables as real HTML tables

Add remark-gfm plugin so react-markdown renders GFM table syntax as
proper <table> elements. Wrap tables in a scrollable container for
mobile-friendly horizontal scrolling on wide tables like ship stats
and weapon lists.

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

web/src/index.css

@@ -562,11 +562,17 @@ details[open] > .rules-summary::before {
   margin-bottom: 2px;
 }
 
+.rules-content .table-wrap {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin: var(--spacing-sm) 0;
+}
+
 .rules-content table {
   width: 100%;
   border-collapse: collapse;
-  margin: var(--spacing-sm) 0;
   font-size: 0.85rem;
+  white-space: nowrap;
 }
 
 .rules-content th,

web/src/pages/RulesPage.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import TopBar from '../components/layout/TopBar';
 import PageContainer from '../components/layout/PageContainer';
 import { battleReferenceSections } from '../rules/battle-reference';
@@ -47,7 +48,14 @@ export default function RulesPage() {
                 {section.title}
               </summary>
               <div className="rules-content">
-                <Markdown>{section.content}</Markdown>
+                <Markdown
+                  remarkPlugins={[remarkGfm]}
+                  components={{
+                    table: ({ children }) => (
+                      <div className="table-wrap"><table>{children}</table></div>
+                    ),
+                  }}
+                >{section.content}</Markdown>
               </div>
             </details>
           ))}