Fix interactive page layout

Remove global header/footer and add share section to the interactive page.

src/components/GameOfSim.tsx

@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { RotateCcw, Undo2 } from 'lucide-react';
+import SocialShare from '@/components/SocialShare';
 
 interface Edge {
   from: number;
@@ -265,6 +266,15 @@ const GameOfSim = () => {
               Avoid creating a triangle of your own color!
             </p>
           </div>
+
+          {/* Social Share */}
+          <div className="flex justify-center">
+            <SocialShare 
+              title="Game of Sim"
+              description="Play the strategic Game of Sim! Take turns coloring edges between vertices while avoiding creating triangles of your own color."
+              url={`${window.location.origin}/themes/games`}
+            />
+          </div>
         </CardContent>
       </Card>
     </div>

src/components/GamesGallery.tsx

@@ -36,7 +36,8 @@ const GamesGallery = () => {
   if (selectedGame) {
     const GameComponent = selectedGame.component;
     return (
-      <div className="space-y-6">
+      <div className="min-h-screen bg-background">
+        <div className="container mx-auto px-4 py-8 space-y-6">
           <div className="flex items-center gap-4">
             <button 
               onClick={() => setSelectedGame(null)}
@@ -45,7 +46,6 @@ const GamesGallery = () => {
               ← Back to Educational Games
             </button>
           </div>
-        <div className="bg-background border rounded-lg p-6">
           <GameComponent />
         </div>
       </div>