Preserve game table aspect ratio — fix responsiveness and prevent stretching

[WERSIT35]

Summary

The game's responsiveness currently stretches the game table on some screens instead of maintaining an appropriate aspect ratio and player-friendly layout. This harms usability and comfort across device sizes.

Steps to reproduce

1. Open the game on various screen sizes (mobile portrait/landscape, tablet, desktop narrow/wide).
2. Observe the reel table and surrounding chrome; note when the table stretches disproportionately or fills width in a way that breaks the expected layout.

Observed behavior

• Game table (reel area) scales to fill width and sometimes loses aspect ratio or appears stretched.
• UI controls and spacing become awkward on narrow or very wide screens.

Expected behavior

• Preserve the intended aspect ratio of the game table across screen sizes (letterbox or pillarbox as needed).
• Prioritize player comfort: maintain readable controls, consistent button sizes, and comfortable spacing.

Suggested fixes / notes for implementers

• Use a responsive container that preserves aspect ratio (CSS aspect-ratio or a wrapper that sets height based on width).
• Clamp scaling with max-width/max-height and center the game table; use transform: scale() to preserve crisp rendering when necessary.
• Consider letterboxing/pillarboxing for very wide or tall viewports rather than stretching the table.
• Use devicePixelRatio-aware canvas scaling for renderer fidelity.
• Add breakpoints for control layout; ensure buttons remain accessible and not too small on mobile.
• Update styles in client CSS and adjust renderer sizing logic in client/main.js or canvas renderer code.

Files/areas to inspect

• client/styles (CSS responsible for layout)
• client/main.js and canvas renderer code
• any viewport / meta tags in client/index.html

Impact

High — negatively impacts player comfort and could harm engagement and revenue.