From 85b730946a6b9e04b72a30ede931b4b1ff4e7d6c Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 21 Jul 2025 09:25:00 +0000
Subject: [PATCH] Refactor Knights Puzzle layout

Remove title and add ribbon to the box. Add a subtle blue background.
---
 src/components/KnightsPuzzle.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/KnightsPuzzle.tsx b/src/components/KnightsPuzzle.tsx
index f1f5d72..b7f528b 100644
--- a/src/components/KnightsPuzzle.tsx
+++ b/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) => (