fix: integrate hint buttons into table for perfect row alignment and sticky scroll

Move hint buttons from a separate flex column into the table as the
first <td> of each row, ensuring pixel-perfect alignment with grid rows.
Use position:sticky with box-shadow to keep hints fixed on the left
while scrolling horizontally.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

assets/styles/app.css

@@ -50,6 +50,7 @@ body {
 #actors td {
     width: var(--cell);
     height: var(--cell);
+    padding: 0;
     text-align: center;
     vertical-align: middle;
 }
@@ -534,33 +535,26 @@ body {
     margin: 0;
 }
 
-.game-grid-area {
-    display: flex;
-    align-items: flex-start;
-    margin-top: 16px;
-}
-
-.hint-col {
-    display: flex;
-    flex-direction: column;
-    padding-top: 5px;
-    gap: 5px;
-    flex-shrink: 0;
-    padding-right: 12px;
-}
-
 .hint-cell {
-    height: var(--cell);
-    display: flex;
-    align-items: center;
-}
-
-.hint-separator {
-    height: 12px;
+    padding: 0;
+    position: sticky;
+    left: 5px;
+    z-index: 1;
+    background: var(--surface);
+    box-shadow:
+        -5px 0 0 var(--surface),
+         5px 0 0 var(--surface),
+         0 -5px 0 var(--surface),
+         0  5px 0 var(--surface),
+        -5px -5px 0 var(--surface),
+         5px -5px 0 var(--surface),
+        -5px  5px 0 var(--surface),
+         5px  5px 0 var(--surface);
 }
 
 .game-grid-scroll {
     overflow-x: auto;
+    margin-top: 16px;
 }
 
 /* ── Game actions ── */