better background, enlarge cards on hover

app/[gameID]/page.tsx

@@ -52,8 +52,6 @@ export default function GamePage() {
 
   return cards.length ? (
     <main className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
-      <h1 className="text-2xl font-bold">Game ID: {gameID}</h1>
-
       <div className="grid grid-cols-3 grid-rows-3 gap-8 w-fit mx-auto">
         {Array.from({ length: 9 }).map((_, i) => {
           const cardIndex = [1, 3, 4, 5, 7].indexOf(i);

app/page.tsx

@@ -11,7 +11,7 @@ export default function Home() {
   };
 
   return (
-    <main className="min-h-screen flex items-center justify-center">
+    <main className="min-h-screen flex items-center justify-center bg-[url('/img/table3.png')] bg-cover bg-center">
       <button
         onClick={handleCreateGame}
         className="bg-blue-600 text-white text-lg px-6 py-3 rounded-xl shadow hover:bg-blue-700 transition"

components/Card.tsx

@@ -10,7 +10,7 @@ type CardProps = {
 export default function Card({ card: { aria, url }, flipAction }: CardProps) {
   return (
     <div
-      className="h-[21vh] w-[15vh] flex items-center justify-center cursor-pointer"
+      className="h-[21vh] w-[15vh] flex items-center justify-center cursor-pointer transform transition-transform duration-200 hover:scale-150 relative z-0 hover:z-10"
       onClick={flipAction}
     >
       <img