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>
- Add CSS variables (--cell, --cell-font, --trigger-h) for responsive cell sizing
- Shrink grid cells at 600px and 420px breakpoints
- Add .page-body wrapper with 16px horizontal padding to prevent edge collisions
- Separate hint column from scrollable grid: hints rendered outside the table in a fixed flex column, only the letter grid scrolls horizontally
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Display spaces, hyphens and other non-letter characters as static cells
instead of input fields, and add separator rows in the grid for
non-alphabetic characters in the main actor's name.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The CSS display:flex on .modal-overlay was overriding the HTML hidden
attribute, making the modal always visible.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
