fix(web): sticky header, correct bottom-corner suit glyphs, main min-width

- header: position sticky so HUD/controls never scroll off screen
- .card .corner.bottom: remove rotate(180deg) — ♠ rotated looks like ♥,
  causing players to misread suit on the bottom corner
- main: add min-width:0 so flex container doesn't push board off-edge

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

solitaire_server/web/game.css

@@ -35,6 +35,10 @@ body {
 /* ── Header / HUD ────────────────────────────────────────────────────── */
 
 header {
+    position: sticky;
+    top: 0;
+    z-index: 500;
+    background: var(--bg);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -84,6 +88,7 @@ main {
     align-items: flex-start;
     padding: 20px;
     overflow-x: auto;
+    min-width: 0;
 }
 
 #board {
@@ -154,7 +159,8 @@ main {
     text-align: center;
 }
 .card .corner.top    { top: 4px; left: 6px; }
-.card .corner.bottom { bottom: 4px; right: 6px; transform: rotate(180deg); }
+/* No rotation — ♠ rotated 180° is indistinguishable from ♥ */
+.card .corner.bottom { bottom: 4px; right: 6px; text-align: right; }
 
 .card.red   { color: var(--red); }
 .card.black { color: var(--black); }

solitaire_server/web/game.js

@@ -196,7 +196,7 @@ function render(s) {
 
     hudScore.textContent = `Score: ${s.score}`;
     hudMoves.textContent = `Moves: ${s.move_count}`;
-    hudStock.textContent = `Stock: ${s.stock.length}`;
+    if (hudStock) hudStock.textContent = `Stock: ${s.stock.length}`;
     btnUndo.disabled     = s.undo_stack_len === 0;
 
     const visible = new Map();