feat(ux): autofocus name inputs on new game steps\n\nFocus Player 1/2/3 inputs on mount and place caret at end for faster entry.\n\nNo behavior changes beyond focus; adheres to accessibility with native focus.\n\nRefs #26

Apply game-item grid layout to game list rows and switch to two-column layout (1fr auto) so the delete action has a fixed-width slot on the right.

Keeps existing delete button and accessibility attributes; prevents layout stretch.
No behavioral changes beyond layout; click targets unchanged.

Refs #26

src/components/GameList.module.css

@@ -76,7 +76,7 @@
 /* Game item with better symmetry and spacing */
 .game-item {
     display: grid;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: 1fr auto;
     align-items: center;
     gap: var(--space-md);
     padding: var(--space-lg);

src/components/GameList.tsx

@@ -82,7 +82,9 @@ export default function GameList({
             <Card
               key={game.id}
               variant="elevated"
-              className={game.status === 'completed' ? styles['completed'] : styles['active']}
+              className={
+                styles['game-item'] + ' ' + (game.status === 'completed' ? styles['completed'] : styles['active'])
+              }
             >
               <div 
                 className={styles['game-info']} 

src/components/NewGame.tsx

@@ -56,6 +56,17 @@ const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
   const [isModalOpen, setIsModalOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    const el = inputRef.current;
+    if (el) {
+      el.focus();
+      const end = el.value.length;
+      try {
+        el.setSelectionRange(end, end);
+      } catch {}
+    }
+  }, []);
+
   useEffect(() => {
     if (!player1) {
       setFilteredNames(playerNameHistory);
@@ -296,6 +307,17 @@ const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
   const [filteredNames, setFilteredNames] = useState(playerNameHistory);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    const el = inputRef.current;
+    if (el) {
+      el.focus();
+      const end = el.value.length;
+      try {
+        el.setSelectionRange(end, end);
+      } catch {}
+    }
+  }, []);
+
   useEffect(() => {
     if (!player2) {
       setFilteredNames(playerNameHistory);
@@ -430,6 +452,17 @@ const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
   const [filteredNames, setFilteredNames] = useState(playerNameHistory);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    const el = inputRef.current;
+    if (el) {
+      el.focus();
+      const end = el.value.length;
+      try {
+        el.setSelectionRange(end, end);
+      } catch {}
+    }
+  }, []);
+
   useEffect(() => {
     if (!player3) {
       setFilteredNames(playerNameHistory);