Add touch-friendly shop interactions on phones.

A phone has no hover to preview a card, so tapping now opens a magnified,
fully-readable view with the actions that fit it instead of acting blind:

- Shop card: tap to see it big, then Buy (or read it even when unaffordable).
- Your deck card: tap to see it big, then Sell it, or Select to enter a
  bulk-selection mode where taps toggle pets (no magnify) and the action bar
  offers Sell / Triple / Cancel.

Desktop keeps click-to-buy and click-to-select unchanged; the new behavior is
gated on a max-width:600px media query via a small useMediaQuery hook.

web/src/useMediaQuery.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react'
+
+// useMediaQuery tracks whether a CSS media query currently matches, re-rendering
+// when it flips (viewport resize, orientation change). Used to switch on the
+// phone layout's touch interactions, which mirror the `max-width: 600px` styles.
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() =>
+    typeof window !== 'undefined' && !!window.matchMedia
+      ? window.matchMedia(query).matches
+      : false,
+  )
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return
+    const mql = window.matchMedia(query)
+    const onChange = () => setMatches(mql.matches)
+    onChange()
+    mql.addEventListener('change', onChange)
+    return () => mql.removeEventListener('change', onChange)
+  }, [query])
+
+  return matches
+}