Add Playwright E2E testing with recorded workflows

- Add @playwright/test as dev dependency
- Create playwright.config.ts with Chrome-only testing config
- Add npm scripts: test:record, test:e2e, test:replay
- Create 13 test recordings covering:
  - 2-player and 3-player games
  - 8-ball, 9-ball, and 10-ball game types
  - Various race-to values (1, 3, 5, 7, 9) and "endlos" mode
  - Both wechselbreak (alternating) and winnerbreak rules
- Fix Infinity handling in gameService.ts and NewGameScreen.tsx
  - Parse "endlos" and "Infinity" strings as Infinity number
  - Properly serialize Infinity as string in form data
- Increase GameDetail score font size from 20vh to 40vh
- Update README.md with testing documentation:
  - Quick start guide for recording and running tests
  - Move E2E testing from "Future Improvements" (now implemented)
- Add comprehensive tests/recordings/README.md documentation

Purpose: Establishes browser automation testing infrastructure with
real workflow recordings, enabling regression testing and interaction
documentation for all game configuration combinations.

tests/recordings/README.md

@@ -0,0 +1,147 @@
+# Playwright Recordings
+
+This directory contains recorded browser interaction scripts for BSC Score. Use Playwright's codegen to record interactions once, then replay them anytime.
+
+## Quick Start
+
+### Recording Interactions
+
+1. **Start the dev server** (in a separate terminal):
+   ```bash
+   npm run dev
+   ```
+
+2. **Start Playwright codegen**:
+   ```bash
+   npm run test:record
+   ```
+   
+   This opens:
+   - A browser window (use the app normally)
+   - Playwright Inspector (shows generated code in real-time)
+
+3. **Interact with the app**:
+   - Click buttons, fill forms, navigate
+   - All actions are automatically captured
+   - Code appears in the Playwright Inspector window
+
+4. **Save your recording**:
+   - Copy the generated code from the Inspector
+   - Create a new `.ts` file in this directory
+   - Paste the code and save (e.g., `create-game-basic.ts`)
+
+### Running Recordings
+
+Run all recordings:
+```bash
+npm run test:e2e
+```
+
+Run a specific recording:
+```bash
+npx playwright test tests/recordings/create-game-basic.ts
+```
+
+Run with UI mode (helpful for debugging):
+```bash
+npx playwright test --ui
+```
+
+## Naming Conventions
+
+Use descriptive names that indicate the flow:
+- `create-game-basic.ts` - Basic game creation flow
+- `create-game-3players.ts` - Game creation with 3 players
+- `score-update.ts` - Score update flow
+- `undo-action.ts` - Undo functionality
+
+## Duplicating & Modifying Scripts
+
+This is the key feature! Copy any script to create a variant:
+
+1. **Copy a script**:
+   ```bash
+   cp create-game-basic.ts create-game-variant.ts
+   ```
+
+2. **Modify the copy**:
+   - Change player names
+   - Modify game type
+   - Change the last step (e.g., click 'a' instead of 'z')
+   - Add or remove steps
+
+3. **Run the variant**:
+   ```bash
+   npx playwright test tests/recordings/create-game-variant.ts
+   ```
+
+### Example Modification
+
+```typescript
+// Original: create-game-basic.ts
+await page.click('button:has-text("Option Z")');
+
+// Modified: create-game-variant.ts  
+await page.click('button:has-text("Option A")'); // changed from Z to A
+```
+
+## Script Structure
+
+All recordings follow this structure:
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('description of what this script does', async ({ page }) => {
+  await page.goto('http://localhost:3000');
+  
+  // Your recorded interactions here
+  await page.click('text=Neues Spiel');
+  await page.fill('input[name="player1"]', 'Alice');
+  // ... more steps
+});
+```
+
+## Tips
+
+- **Use the dev server**: Make sure `npm run dev` is running on port 3000 before recording or running scripts
+- **Descriptive test names**: The test name helps identify what the script does
+- **Comments**: Add comments in scripts to explain non-obvious steps
+- **Wait for navigation**: If something doesn't work, you might need to add `await page.waitForNavigation()` or `await page.waitForSelector()`
+
+## Common Patterns
+
+### Fill a form field
+```typescript
+await page.fill('input[name="fieldName"]', 'value');
+```
+
+### Click a button
+```typescript
+await page.click('button:has-text("Button Text")');
+```
+
+### Wait for element
+```typescript
+await page.waitForSelector('text=Expected Text');
+```
+
+### Check element is visible
+```typescript
+await expect(page.locator('text=Some Text')).toBeVisible();
+```
+
+## Troubleshooting
+
+**Script fails with "element not found"**:
+- Add wait statements: `await page.waitForSelector('selector')`
+- Check if the selector changed (use Playwright Inspector to find new selectors)
+
+**Browser doesn't open during recording**:
+- Make sure dev server is running on port 3000
+- Check if port 3000 is available
+
+**Test runs but doesn't do anything**:
+- Check that baseURL in `playwright.config.ts` is correct
+- Verify the app is accessible at `http://localhost:3000`
+