From 8f82b9fcb549703625b94ff8b36540638aa814c3 Mon Sep 17 00:00:00 2001
From: funman300 <funman300@gmail.com>
Date: Wed, 13 May 2026 11:06:15 -0700
Subject: [PATCH] fix(web): sticky header, correct bottom-corner suit glyphs,
 main min-width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 | 8 +++++++-
 solitaire_server/web/game.js  | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/solitaire_server/web/game.css b/solitaire_server/web/game.css
index ec5afe4..77d5f86 100644
--- a/solitaire_server/web/game.css
+++ b/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); }
diff --git a/solitaire_server/web/game.js b/solitaire_server/web/game.js
index 6f0cc48..6983018 100644
--- a/solitaire_server/web/game.js
+++ b/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();