fix: resolve TypeScript build errors (Framer Motion variants + playSound)

- Add 'as const' to transition type literals in variant objects for Framer Motion 12 compatibility
- Replace playSound('click') with playSound('tap') to match sound registry
- Use ENV.SUPABASE_URL instead of protected supabase.supabaseUrl property
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/hooks/usePresence.ts

 import { useEffect, useRef } from 'react'
 import { supabase } from '../lib/supabase'
 import { useAuthStore } from '../stores/authStore'
+import { ENV } from '../env'
 
 export function usePresence() {
   const { user } = useAuthStore()
@@ -45,7 +46,7 @@ export function usePresence() {
 
     const handleBeforeUnload = () => {
       navigator.sendBeacon?.(
-        `${supabase.supabaseUrl}/rest/v1/profiles?id=eq.${user.id}`,
+        `${ENV.SUPABASE_URL}/rest/v1/profiles?id=eq.${user.id}`,
         JSON.stringify({ is_online: false, last_seen_at: new Date().toISOString() })
       )
     }

src/pages/FriendsPage.tsx

@@ -33,7 +33,7 @@ const stagger = {
 
 const item = {
   hidden: { opacity: 0, y: 12, scale: 0.95 },
-  show: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring', stiffness: 400, damping: 22 } },
+  show: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring' as const, stiffness: 400, damping: 22 } },
 }
 
 export function FriendsPage() {

src/pages/HomePage.tsx

@@ -27,7 +27,7 @@ const stagger = {
 
 const fadeUp = {
   hidden: { opacity: 0, y: 24 },
-  show: { opacity: 1, y: 0, transition: { type: 'spring', stiffness: 400, damping: 24 } },
+  show: { opacity: 1, y: 0, transition: { type: 'spring' as const, stiffness: 400, damping: 24 } },
 }
 
 export function HomePage() {
@@ -112,7 +112,7 @@ export function HomePage() {
         <motion.div variants={fadeUp} className="flex justify-center">
           <motion.button
             onClick={() => {
-              playSound('click')
+              playSound('tap')
               navigate('/play')
             }}
             className="relative w-[85%] cursor-pointer"
@@ -201,7 +201,7 @@ export function HomePage() {
             style={{ transform: 'rotate(-1deg)' }}
             whileTap={{ y: 4, boxShadow: 'none' }}
             onClick={() => {
-              playSound('click')
+              playSound('tap')
               navigate('/bot-select')
             }}
           >
@@ -226,7 +226,7 @@ export function HomePage() {
             style={{ transform: 'rotate(1deg)' }}
             whileTap={{ y: 4, boxShadow: 'none' }}
             onClick={() => {
-              playSound('click')
+              playSound('tap')
               navigate('/friends')
             }}
           >

src/pages/NotificationsPage.tsx

@@ -38,7 +38,7 @@ const stagger = {
 
 const item = {
   hidden: { opacity: 0, y: 12, scale: 0.95 },
-  show: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring', stiffness: 400, damping: 22 } },
+  show: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring' as const, stiffness: 400, damping: 22 } },
 }
 
 export function NotificationsPage() {

src/pages/PlayPage.tsx

@@ -22,7 +22,7 @@ const stagger = {
 
 const fadeUp = {
   hidden: { opacity: 0, y: 24 },
-  show: { opacity: 1, y: 0, transition: { type: 'spring', stiffness: 400, damping: 24 } },
+  show: { opacity: 1, y: 0, transition: { type: 'spring' as const, stiffness: 400, damping: 24 } },
 }
 
 export function PlayPage() {
@@ -193,7 +193,7 @@ export function PlayPage() {
                   whileTap={{ scale: 0.92 }}
                   transition={{ type: 'spring', stiffness: 500, damping: 20 }}
                   onClick={() => {
-                    playSound('click')
+                    playSound('tap')
                     const first = Object.entries(TIME_CONTROLS).find(([, v]) => v.category === cat.key)
                     if (first) setSelectedTC(first[0])
                   }}
@@ -236,7 +236,7 @@ export function PlayPage() {
                     animate={isSelected ? { y: -2 } : { y: 0 }}
                     transition={{ type: 'spring', stiffness: 500, damping: 20 }}
                     onClick={() => {
-                      playSound('click')
+                      playSound('tap')
                       setSelectedTC(key)
                     }}
                   >
@@ -271,7 +271,7 @@ export function PlayPage() {
             whileTap={{ y: 4 }}
             transition={{ type: 'spring', stiffness: 600, damping: 20 }}
             onClick={() => {
-              playSound('click')
+              playSound('tap')
               navigate(`/matchmaking?tc=${selectedTC}&game=chess`)
             }}
           >
@@ -305,7 +305,7 @@ export function PlayPage() {
             whileTap={{ y: 3 }}
             transition={{ type: 'spring', stiffness: 600, damping: 20 }}
             onClick={() => {
-              playSound('click')
+              playSound('tap')
               navigate('/bot-select')
             }}
           >

src/pages/ProfilePage.tsx

@@ -14,7 +14,7 @@ const stagger = {
 
 const item = {
   hidden: { opacity: 0, y: 16, scale: 0.93 },
-  show: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring', stiffness: 380, damping: 22 } },
+  show: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring' as const, stiffness: 380, damping: 22 } },
 }
 
 const HEX_CLIP = 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)'