fix(ui): prevent winner modal icons from clipping

Increase top padding, set overflow visible, and position decorative icons inside container so emojis are fully visible.

Refs #26

src/components/GameCompletionModal.module.css

@@ -26,7 +26,7 @@
 .winner-announcement {
     text-align: center;
     margin: 20px 0 0 0;
-    padding: 24px 16px;
+    padding: 32px 16px 24px 16px; /* extra top padding to keep icons inside */
     background: linear-gradient(135deg, #ff9800 0%, #ffa726 100%);
     border-radius: 16px;
     font-size: 1.2rem;
@@ -35,13 +35,13 @@
     box-shadow: 0 8px 32px rgba(255, 152, 0, 0.3);
     animation: celebrationPulse 2s ease-in-out infinite;
     position: relative;
-    overflow: hidden;
+    overflow: visible; /* avoid clipping decorative icons */
 }
 
 .winner-announcement::before {
     content: '🎉';
     position: absolute;
-    top: -10px;
+    top: 6px;
     left: 20px;
     font-size: 24px;
     animation: bounce 1s ease-in-out infinite;
@@ -50,7 +50,7 @@
 .winner-announcement::after {
     content: '🏆';
     position: absolute;
-    top: -10px;
+    top: 6px;
     right: 20px;
     font-size: 24px;
     animation: bounce 1s ease-in-out infinite 0.5s;

src/components/NewGame.tsx

@@ -612,6 +612,8 @@ const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeStepProps
 
   const handleSelect = (selectedType: string) => {
     setGameType(selectedType);
+    // Auto-advance to next step on selection
+    onNext(selectedType);
   };
 
   const handleSubmit = (e: Event) => {
@@ -706,7 +708,11 @@ const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: RaceToSte
 
   const handleQuickPick = (value: number) => {
     // For endlos (endless) games, use Infinity to prevent automatic completion
-    setRaceTo(value === 0 ? 'Infinity' : value);
+    const selected = value === 0 ? 'Infinity' : value;
+    setRaceTo(selected);
+    // Auto-advance to the next step (finalize) when a quick pick is chosen
+    const raceToValue = selected === 'Infinity' ? Infinity : (parseInt(String(selected), 10) || 0);
+    onNext(raceToValue);
   };
 
   const handleInputChange = (e: Event) => {

src/styles/index.css

@@ -161,7 +161,6 @@ input:focus, select:focus {
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
-}
 
 .btn-primary:hover {
     background: var(--color-primary-hover);
@@ -267,11 +266,6 @@ input:focus, select:focus {
     border: 0;
 }
 
-/* Focus styles for better accessibility */
-*:focus {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-}
 
 /* Skip link for keyboard navigation */
 .skip-link {