Refactor Knights Puzzle layout

Remove title and add ribbon to the box. Add a subtle blue background.

src/components/KnightsPuzzle.tsx

@@ -249,11 +249,11 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
 
       {/* Purple: Initial and Target positions side by side */}
       <div className="grid grid-cols-2 gap-6">
-        <Card className="bg-secondary/20 border-secondary">
-          <CardHeader className="pb-3">
-            <CardTitle className="text-lg">Initial Position</CardTitle>
-          </CardHeader>
-          <CardContent>
+        <Card className="bg-blue-50/50 border-blue-200 relative overflow-hidden">
+          <div className="absolute top-0 right-0 bg-blue-500 text-white text-xs px-3 py-1 transform rotate-12 translate-x-2 -translate-y-1 shadow-sm">
+            Initial
+          </div>
+          <CardContent className="pt-6">
             <div className="grid grid-cols-3 gap-1 w-24 h-24 border border-outline rounded mx-auto">
               {initialBoard.map((row, rowIndex) =>
                 row.map((piece, colIndex) => (