feat: Implement Game Type selection step

- Adds the 'GameTypeStep' to the new game wizard.
- Features large, touch-friendly buttons for selecting game types.
- Selection automatically proceeds to the next step.
- Includes progress indicator and back navigation.
- Closes #9

src/components/NewGame.jsx

@@ -429,4 +429,58 @@ const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' })
   );
 };
 
-export { Player1Step, Player2Step, Player3Step }; 
+/**
+ * Game Type selection step for multi-step game creation wizard.
+ * @param {object} props
+ * @param {Function} props.onNext
+ * @param {Function} props.onCancel
+ * @param {string} [props.initialValue]
+ * @returns {import('preact').VNode}
+ */
+const GameTypeStep = ({ onNext, onCancel, initialValue = '' }) => {
+  const gameTypes = ['8-Ball', '9-Ball', '10-Ball', '14/1 endlos'];
+
+  const handleSelect = (gameType) => {
+    onNext(gameType);
+  };
+
+  return (
+    <div className={styles['new-game-form']} aria-label="Spielart auswählen">
+      <div className={styles['screen-title']}>Neues Spiel – Schritt 4/5</div>
+      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot'] + ' ' + styles['active']} />
+        <span className={styles['progress-dot']} />
+      </div>
+      <div className={styles['game-type-selection']}>
+        {gameTypes.map(type => (
+          <button
+            key={type}
+            type="button"
+            className={`${styles['game-type-btn']} ${initialValue === type ? styles.selected : ''}`}
+            onClick={() => handleSelect(type)}
+          >
+            {type}
+          </button>
+        ))}
+      </div>
+      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
+        <button
+          type="button"
+          className={styles['arrow-btn']}
+          aria-label="Zurück"
+          onClick={onCancel}
+          style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
+        >
+          &#8592;
+        </button>
+        {/* No "weiter" arrow, selection proceeds automatically */}
+        <div style={{ width: 80 }} /> {/* Placeholder to balance the flex container */}
+      </div>
+    </div>
+  );
+};
+
+export { Player1Step, Player2Step, Player3Step, GameTypeStep };