feat(new-game): default Break rule and selected styling

- Default Break rule to 'winnerbreak' in BreakRuleStep
- Ensure selected quick-pick button styling matches Race To buttons
- Simplify Weiter button since rule is always defined

Fixes #30

src/components/NewGame.module.css

@@ -293,6 +293,13 @@
     color: white;
     box-shadow: var(--shadow-md);
 }
+/* Match selected styling for quick pick buttons used in BreakRuleStep */
+.quick-pick-btn.selected {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: white;
+    box-shadow: var(--shadow-md);
+}
 .custom-race-to {
     display: flex;
     gap: var(--space-md);

src/components/new-game/BreakRuleStep.tsx

@@ -6,11 +6,11 @@ import type { BreakRule } from '../../types/game';
 interface BreakRuleStepProps {
   onNext: (rule: BreakRule) => void;
   onCancel: () => void;
-  initialValue?: BreakRule | 'winnerbreak';
+  initialValue?: BreakRule;
 }
 
 export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }: BreakRuleStepProps) => {
-  const [rule, setRule] = useState<BreakRule | ''>(initialValue);
+  const [rule, setRule] = useState<BreakRule>(initialValue ?? 'winnerbreak');
 
   return (
     <form className={styles['new-game-form']} aria-label="Break-Regel wählen">
@@ -44,7 +44,7 @@ export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }
         <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>
-        <button type="button" className={styles['arrow-btn']} aria-label="Weiter" onClick={() => rule && onNext(rule as BreakRule)} disabled={!rule} 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', opacity: !rule ? 0.5 : 1 }}>
+        <button type="button" className={styles['arrow-btn']} aria-label="Weiter" onClick={() => onNext(rule)} 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' }}>
           &#8594;
         </button>
       </div>