fix: responsive keyboard width to fit narrow screens

- Keyboard max-width 380px, width 95vw
- Keys use flex percentages instead of fixed px
- Scales naturally on phones without overflow

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

client/src/components/Keyboard.tsx

@@ -17,31 +17,32 @@ interface KeyboardProps {
 
 export function Keyboard({ letterColors, onKeyPress }: KeyboardProps) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', alignItems: 'center', marginTop: '12px' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', alignItems: 'center', marginTop: '12px', width: '95vw', maxWidth: '380px', margin: '12px auto 0' }}>
       {ROWS.map((row, rowIdx) => (
-        <div key={rowIdx} style={{ display: 'flex', gap: '4px' }}>
+        <div key={rowIdx} style={{ display: 'flex', gap: '4px', width: '100%', justifyContent: 'center' }}>
           {row.map((key) => {
             const isSpecial = key === 'Enter' || key === '⌫';
             const backspace = key === '⌫';
             const letter = isSpecial ? '' : key;
             const color = isSpecial ? undefined : letterColors[letter];
-            const bg = color ? COLOR_MAP[color] : isSpecial ? '#d3d6da' : '#d3d6da';
+            const bg = color ? COLOR_MAP[color] : '#d3d6da';
             const fg = color ? '#fff' : '#000';
             const label = backspace ? '⌫' : key.toUpperCase();
+            const flexBasis = isSpecial ? '15%' : '9%';
 
             return (
               <div
                 key={key}
                 onClick={() => onKeyPress(backspace ? 'Backspace' : key)}
                 style={{
-                  minWidth: isSpecial ? '56px' : '36px',
+                  flex: `0 0 ${flexBasis}`,
                   height: '48px',
                   backgroundColor: bg,
                   color: fg,
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
-                  fontSize: isSpecial ? '0.8rem' : '0.85rem',
+                  fontSize: isSpecial ? '0.75rem' : '0.85rem',
                   fontWeight: 'bold',
                   borderRadius: '4px',
                   cursor: 'pointer',