refactor: move room management pages to /arcade-rooms

Move room browser and detail pages from /arcade/rooms to /arcade-rooms
to eliminate conflicts with arcade session redirect logic. This allows
users to navigate to room management pages even when they have an
active game session.

Changes:
- Move /arcade/rooms/page.tsx → /arcade-rooms/page.tsx (room browser)
- Move /arcade/rooms/[roomId]/page.tsx → /arcade-rooms/[roomId]/page.tsx (room detail)
- Update all router.push() calls to use /arcade-rooms
- Fix styled-system import paths for new location
- Delete old /arcade/rooms directory

Benefits:
- Room management pages are now outside /arcade namespace
- No exceptions needed in useArcadeRedirect hook
- Users can access room pages during active gameplay
- Cleaner separation between gameplay and room management

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/arcade-rooms/[roomId]/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { io, type Socket } from 'socket.io-client'
-import { css } from '../../../../../styled-system/css'
+import { css } from '../../../../styled-system/css'
 import { PageWithNav } from '@/components/PageWithNav'
 import { useViewerId } from '@/hooks/useViewerId'
 
@@ -154,8 +154,8 @@ export default function RoomDetailPage() {
 
   const startGame = () => {
     if (!room) return
-    // Navigate to the game with the room ID
-    router.push(`/arcade/rooms/${roomId}/${room.gameName}`)
+    // Navigate to the room game page
+    router.push('/arcade/room')
   }
 
   const joinRoom = async () => {
@@ -264,7 +264,7 @@ export default function RoomDetailPage() {
               {error || 'Room not found'}
             </p>
             <button
-              onClick={() => router.push('/arcade/rooms')}
+              onClick={() => router.push('/arcade-rooms')}
               className={css({
                 px: '6',
                 py: '3',
@@ -325,7 +325,7 @@ export default function RoomDetailPage() {
           >
             <div className={css({ mb: '4' })}>
               <button
-                onClick={() => router.push('/arcade/rooms')}
+                onClick={() => router.push('/arcade-rooms')}
                 className={css({
                   display: 'inline-flex',
                   alignItems: 'center',
@@ -621,7 +621,7 @@ export default function RoomDetailPage() {
             ) : (
               <>
                 <button
-                  onClick={() => router.push('/arcade/rooms')}
+                  onClick={() => router.push('/arcade-rooms')}
                   className={css({
                     flex: 1,
                     px: '6',

apps/web/src/app/arcade-rooms/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { css } from '../../../../styled-system/css'
+import { css } from '../../../styled-system/css'
 import { PageWithNav } from '@/components/PageWithNav'
 
 interface Room {
@@ -66,7 +66,7 @@ export default function RoomBrowserPage() {
       }
 
       const data = await response.json()
-      router.push(`/arcade/rooms/${data.room.id}`)
+      router.push(`/arcade-rooms/${data.room.id}`)
     } catch (err) {
       console.error('Failed to create room:', err)
       alert('Failed to create room')
@@ -103,7 +103,7 @@ export default function RoomBrowserPage() {
         // Could show a toast notification here in the future
       }
 
-      router.push(`/arcade/rooms/${roomId}`)
+      router.push(`/arcade-rooms/${roomId}`)
     } catch (err) {
       console.error('Failed to join room:', err)
       alert('Failed to join room')
@@ -219,7 +219,7 @@ export default function RoomBrowserPage() {
                     })}
                   >
                     <div
-                      onClick={() => router.push(`/arcade/rooms/${room.id}`)}
+                      onClick={() => router.push(`/arcade-rooms/${room.id}`)}
                       className={css({ flex: 1, cursor: 'pointer' })}
                     >
                       <div

apps/web/src/app/arcade/rooms/[roomId]/complement-race/page.tsx

@@ -1,24 +0,0 @@
-'use client'
-
-import { useParams } from 'next/navigation'
-import { PageWithNav } from '@/components/PageWithNav'
-import { ComplementRaceGame } from '@/app/arcade/complement-race/components/ComplementRaceGame'
-import { ComplementRaceProvider } from '@/app/arcade/complement-race/context/ComplementRaceContext'
-
-export default function RoomComplementRacePage() {
-  const params = useParams()
-  const roomId = params.roomId as string
-
-  // TODO Phase 4: Integrate room context with game state
-  // - Connect to room socket events
-  // - Sync game state across players
-  // - Handle multiplayer race dynamics
-
-  return (
-    <PageWithNav navTitle="Speed Complement Race" navEmoji="🏁">
-      <ComplementRaceProvider>
-        <ComplementRaceGame />
-      </ComplementRaceProvider>
-    </PageWithNav>
-  )
-}

apps/web/src/app/arcade/rooms/[roomId]/matching/page.tsx

@@ -1,24 +0,0 @@
-'use client'
-
-import { useParams } from 'next/navigation'
-import { ArcadeGuardedPage } from '@/components/ArcadeGuardedPage'
-import { MemoryPairsGame } from '@/app/arcade/matching/components/MemoryPairsGame'
-import { ArcadeMemoryPairsProvider } from '@/app/arcade/matching/context/ArcadeMemoryPairsContext'
-
-export default function RoomMatchingPage() {
-  const params = useParams()
-  const roomId = params.roomId as string
-
-  // TODO Phase 4: Integrate room context with game state
-  // - Connect to room socket events
-  // - Sync game state across players
-  // - Handle multiplayer moves
-
-  return (
-    <ArcadeGuardedPage>
-      <ArcadeMemoryPairsProvider>
-        <MemoryPairsGame />
-      </ArcadeMemoryPairsProvider>
-    </ArcadeGuardedPage>
-  )
-}

apps/web/src/app/arcade/rooms/[roomId]/memory-quiz/page.tsx

@@ -1,16 +0,0 @@
-'use client'
-
-import { useParams } from 'next/navigation'
-
-// Temporarily redirect to solo arcade version
-// TODO Phase 4: Implement room-aware memory quiz with multiplayer sync
-export default function RoomMemoryQuizPage() {
-  const params = useParams()
-  const roomId = params.roomId as string
-
-  // Import and use the arcade version for now
-  // This prevents 404s while we work on full multiplayer integration
-  const MemoryQuizGame = require('@/app/arcade/memory-quiz/page').default
-
-  return <MemoryQuizGame />
-}