Refactor standalone page

src/components/Layout.tsx

@@ -1,15 +1,32 @@
 import Navigation from '@/components/Navigation';
 import { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { ArrowLeft } from 'lucide-react';
 
 interface LayoutProps {
   children: ReactNode;
+  showBackToGames?: boolean;
 }
 
-const Layout = ({ children }: LayoutProps) => {
+const Layout = ({ children, showBackToGames = false }: LayoutProps) => {
   return (
     <div className="min-h-screen bg-background flex flex-col">
       <Navigation />
       
+      {showBackToGames && (
+        <div className="border-b border-outline bg-surface/50">
+          <div className="max-w-6xl mx-auto px-4 py-3">
+            <Button asChild variant="ghost" size="sm" className="gap-2">
+              <Link to="/themes/games">
+                <ArrowLeft className="w-4 h-4" />
+                Back to Games
+              </Link>
+            </Button>
+          </div>
+        </div>
+      )}
+      
       <main className="flex-1">
         {children}
       </main>

src/pages/CrapsGamePage.tsx

@@ -1,9 +1,20 @@
+import { useEffect, useState } from "react";
 import Layout from "@/components/Layout";
 import CrapsGame from "@/components/CrapsGame";
 
 const CrapsGamePage = () => {
+  const [showBackLink, setShowBackLink] = useState(false);
+
+  useEffect(() => {
+    // Check if user came from games page
+    const referrer = document.referrer;
+    if (referrer.includes('/themes/games') && !referrer.includes('/themes/games/craps-game')) {
+      setShowBackLink(true);
+    }
+  }, []);
+
   return (
-    <Layout>
+    <Layout showBackToGames={showBackLink}>
       <CrapsGame showSocialShare={true} />
     </Layout>
   );