Fix some card UX.

web/src/components/ArrangePhase.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useRef, useState } from 'react'
 import type { Card, ClientMessage, GameView, PlayerView } from '../types'
-import { CardView } from './CardView'
+import { CardView, CardZoom } from './CardView'
 import { useCardAnimations } from '../anim'
+import { useMediaQuery } from '../useMediaQuery'
 
 interface Props {
   view: GameView
@@ -37,6 +38,11 @@ export function ArrangePhase({ view, you, send }: Props) {
   // drag) always calls the fresh closure — see the drag effect below.
   const moveRef = useRef<(clientY: number) => void>(() => {})
   const locked = you.ready
+  // Phones can't hover to preview a card, so a tap opens the magnified view
+  // instead. Dragging uses the grip handle, so tapping the card body is free to
+  // mean "read it". Ignored on desktop, which keeps the hover magnifier.
+  const isPhone = useMediaQuery('(max-width: 600px)')
+  const [zoom, setZoom] = useState<{ card: Card; bonus: number } | null>(null)
 
   // The arrow buttons reorder `order` and the cards glide to their new slot.
   // A drag reorders live too, and the neighbors the dragged card passes should
@@ -250,7 +256,16 @@ export function ArrangePhase({ view, you, send }: Props) {
                     </button>
                   </div>
                 </div>
-                <CardView card={c} bonus={bonuses.get(c.id) ?? 0} noMagnify={dragging} />
+                <CardView
+                  card={c}
+                  bonus={bonuses.get(c.id) ?? 0}
+                  noMagnify={dragging}
+                  onClick={
+                    isPhone && !dragging
+                      ? () => setZoom({ card: c, bonus: bonuses.get(c.id) ?? 0 })
+                      : undefined
+                  }
+                />
               </div>
             </div>
           )
@@ -272,6 +287,10 @@ export function ArrangePhase({ view, you, send }: Props) {
           Lock in & battle ⚔️
         </button>
       </div>
+
+      {zoom && (
+        <CardZoom card={zoom.card} bonus={zoom.bonus} onClose={() => setZoom(null)} />
+      )}
     </div>
   )
 }