From 0a8bfdb5d2a935f64d3a2fd4136e94eaeaca42e1 Mon Sep 17 00:00:00 2001
From: ghaymah_dev <hr@ghaymah.systems>
Date: Thu, 19 Feb 2026 14:06:09 +0000
Subject: [PATCH] added more levels

---
 index.html | 705 ++++++++++++++++++++++-------------------------------
 1 file changed, 293 insertions(+), 412 deletions(-)

diff --git a/index.html b/index.html
index a2d1472..3f4d4ff 100644
--- a/index.html
+++ b/index.html
@@ -87,80 +87,6 @@
             gap: 10px;
         }
 
-        .color-status-bar {
-            background: #ffe5ca;
-            border-radius: 60px;
-            padding: 15px 20px;
-            margin-bottom: 20px;
-            border: 4px solid #c47748;
-            box-shadow: 0 5px 0 #9e5b31;
-        }
-
-        .color-status-title {
-            font-size: 1.3rem;
-            color: #2b5e5e;
-            font-weight: 700;
-            margin-bottom: 10px;
-            text-align: center;
-        }
-
-        .required-colors-grid {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 15px;
-            justify-content: center;
-            align-items: center;
-        }
-
-        .color-requirement {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            background: white;
-            padding: 8px 18px;
-            border-radius: 50px;
-            border: 3px solid #c1804b;
-            box-shadow: 0 3px 0 #8b5e3c;
-            transition: all 0.2s;
-            min-width: 120px;
-        }
-
-        .color-requirement.completed {
-            background: #c8e6c9;
-            border-color: #2e7d32;
-            box-shadow: 0 3px 0 #1b5e20;
-        }
-
-        .color-requirement.missing {
-            background: #ffecb3;
-            border-color: #ff6f00;
-            animation: pulse 1.5s infinite;
-        }
-
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); background: #ffe082; }
-            100% { transform: scale(1); }
-        }
-
-        .req-color-dot {
-            width: 35px;
-            height: 35px;
-            border-radius: 50%;
-            border: 3px solid #3a281b;
-        }
-
-        .req-color-name {
-            font-size: 1.2rem;
-            font-weight: 700;
-            color: #2a4f4f;
-            flex: 1;
-        }
-
-        .req-status {
-            font-size: 1.5rem;
-        }
-
         .painting-area {
             display: flex;
             flex-wrap: wrap;
@@ -265,7 +191,6 @@
             cursor: pointer;
             box-shadow: 0 5px 0 #5d4d3a;
             transition: all 0.1s;
-            position: relative;
         }
 
         .color-dot.active {
@@ -274,28 +199,6 @@
             box-shadow: 0 0 0 3px #2d6e6e, 0 5px 0 #5d4d3a;
         }
 
-        .color-dot.used {
-            position: relative;
-        }
-
-        .color-dot.used::after {
-            content: "✓";
-            position: absolute;
-            top: -8px;
-            right: -8px;
-            background: #27ae60;
-            color: white;
-            width: 22px;
-            height: 22px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1rem;
-            font-weight: bold;
-            border: 2px solid white;
-        }
-
         .size-pick {
             display: flex;
             align-items: center;
@@ -316,6 +219,7 @@
             border-radius: 30px;
             box-shadow: 0 5px 0 #5e4b32;
             cursor: pointer;
+            line-height: 1;
         }
 
         .size-btn:active {
@@ -358,14 +262,6 @@
         .action-btn:disabled {
             opacity: 0.5;
             pointer-events: none;
-            transform: none;
-            box-shadow: 0 7px 0 #75583a;
-        }
-
-        .action-btn.success {
-            background: #b3e4b3;
-            border-color: #12874a;
-            box-shadow: 0 7px 0 #0a5f33;
         }
 
         .level-complete {
@@ -389,42 +285,17 @@
         .hidden {
             display: none;
         }
-
-        .celebrate {
-            animation: celebrate 0.5s ease;
-        }
-
-        @keyframes celebrate {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); background: #ffd966; }
-            100% { transform: scale(1); }
-        }
-
-        .color-guide {
-            font-size: 1rem;
-            color: #2b5e5e;
-            background: #fcf3e0;
-            padding: 5px 15px;
-            border-radius: 30px;
-            display: inline-block;
-        }
     </style>
 </head>
 <body>
 <div class="game-box" id="gameBox">
     <div class="level-header">
-        <div class="level-badge"><span>🎨</span> مرحلة <span id="levelNumber">1</span>/5</div>
+        <div class="level-badge"><span>🎨</span> مرحلة <span id="levelNumber">1</span>/15</div>
         <div class="stars-box" id="starDisplay">⭐⭐⭐</div>
     </div>
 
-    <!-- شريط حالة الألوان المطلوبة -->
-    <div class="color-status-bar" id="colorStatusBar">
-        <div class="color-status-title">🎯 الألوان المطلوبة في هذه المرحلة:</div>
-        <div id="requiredColorsGrid" class="required-colors-grid"></div>
-    </div>
-
     <div class="message-panel" id="gameMessage">
-        👆 ابدأ الرسم!
+        👆 ابدأ الرسم! انسخ اللوحة الأصل
     </div>
 
     <div class="painting-area">
@@ -448,7 +319,7 @@
         </div>
         <div class="action-group">
             <button class="action-btn" id="clearKidBtn">🧽 امسح</button>
-            <button class="action-btn" id="nextLevelBtn" disabled>➡️ التالي</button>
+            <button class="action-btn" id="nextLevelBtn">➡️ التالي</button>
         </div>
     </div>
 
@@ -457,73 +328,202 @@
 
 <script>
     (function() {
-        // ---------- تعريف دقيق للألوان مع نطاقات موسعة للبني ----------
-        const colorMap = [
-            // الألوان الأساسية
-            { hex: '#1e5fb4', name: 'أزرق', ranges: [[0,50], [80,150], [150,220]] }, // أزرق
-            { hex: '#c93838', name: 'أحمر', ranges: [[150,255], [0,80], [0,80]] }, // أحمر
-            { hex: '#e6b422', name: 'أصفر', ranges: [[200,255], [150,220], [0,80]] }, // أصفر
-            { hex: '#2b7d4d', name: 'أخضر', ranges: [[0,80], [100,180], [0,80]] }, // أخضر
-            
-            // بني - نطاقات موسعة جداً للبني
-            { hex: '#8B4513', name: 'بني', ranges: [[80,160], [40,100], [0,60]] }, // بني غامق
-            { hex: '#b07d5e', name: 'بني فاتح', ranges: [[150,200], [100,150], [70,120]] }, // بني فاتح
-            { hex: '#7d5335', name: 'بني', ranges: [[100,150], [60,100], [30,70]] }, // بني متوسط
-            { hex: '#a0522d', name: 'بني', ranges: [[130,180], [70,120], [30,80]] }, // بني آخر
-            { hex: '#7a4c29', name: 'بني', ranges: [[100,140], [60,90], [30,60]] }, // بني غامق
-            { hex: '#b87333', name: 'بني برتقالي', ranges: [[160,200], [100,140], [40,80]] }, // بني مائل للبرتقالي
-            
-            // ألوان أخرى
-            { hex: '#000000', name: 'أسود', ranges: [[0,50], [0,50], [0,50]] },
-            { hex: '#f57eb6', name: 'وردي', ranges: [[220,255], [100,180], [160,220]] },
-            { hex: '#aa80ff', name: 'بنفسجي', ranges: [[150,220], [100,180], [220,255]] },
-            { hex: '#cc6612', name: 'برتقالي', ranges: [[180,240], [80,140], [0,60]] },
-            { hex: '#4fb86b', name: 'أخضر فاتح', ranges: [[50,120], [160,220], [50,120]] }
+        // الألوان المتاحة
+        const colors = [
+            { hex: '#1e5fb4', name: 'أزرق' },
+            { hex: '#c93838', name: 'أحمر' },
+            { hex: '#e6b422', name: 'أصفر' },
+            { hex: '#2b7d4d', name: 'أخضر' },
+            { hex: '#8B4513', name: 'بني' },
+            { hex: '#b07d5e', name: 'بني فاتح' },
+            { hex: '#000000', name: 'أسود' },
+            { hex: '#f57eb6', name: 'وردي' },
+            { hex: '#aa80ff', name: 'بنفسجي' },
+            { hex: '#cc6612', name: 'برتقالي' }
         ];
 
-        // المستويات مع أسماء ألوان واضحة
+        // 15 مستوى (5 قديمة + 10 جديدة أكثر تعقيداً)
         const levels = [
             {
                 name: "الدائرة الزرقاء",
                 bg: '#ffffff',
                 shapes: [
-                    { type: 'circle', x: 150, y: 150, radius: 60, color: '#1e5fb4', colorName: 'أزرق' }
+                    { type: 'circle', x: 150, y: 150, radius: 60, color: '#1e5fb4', fill: true }
                 ]
             },
             {
                 name: "المربع والدائرة",
                 bg: '#ffffff',
                 shapes: [
-                    { type: 'rect', x: 100, y: 100, w: 80, h: 80, color: '#c93838', colorName: 'أحمر' },
-                    { type: 'circle', x: 220, y: 220, radius: 35, color: '#e6b422', colorName: 'أصفر' }
+                    { type: 'rect', x: 100, y: 100, w: 80, h: 80, color: '#c93838', fill: true },
+                    { type: 'circle', x: 220, y: 220, radius: 35, color: '#e6b422', fill: true }
                 ]
             },
             {
                 name: "المثلث والخطوط",
                 bg: '#ffffff',
                 shapes: [
-                    { type: 'triangle', x1: 150, y1: 70, x2: 80, y2: 200, x3: 220, y3: 200, color: '#2b7d4d', colorName: 'أخضر' },
-                    { type: 'line', x1: 40, y1: 260, x2: 260, y2: 260, color: '#7a4c29', width: 6, colorName: 'بني' },
-                    { type: 'line', x1: 50, y1: 270, x2: 250, y2: 270, color: '#b87333', width: 4, colorName: 'بني برتقالي' }
+                    { type: 'triangle', x1: 150, y1: 70, x2: 80, y2: 200, x3: 220, y3: 200, color: '#2b7d4d', fill: true },
+                    { type: 'line', x1: 40, y1: 260, x2: 260, y2: 260, color: '#8B4513', width: 6 },
+                    { type: 'line', x1: 50, y1: 270, x2: 250, y2: 270, color: '#b07d5e', width: 4 }
                 ]
             },
             {
                 name: "المنزل الجميل",
                 bg: '#f0f8ff',
                 shapes: [
-                    { type: 'rect', x: 110, y: 160, w: 120, h: 100, color: '#b07d5e', colorName: 'بني فاتح' },
-                    { type: 'triangle', x1: 80, y1: 160, x2: 260, y2: 160, x3: 170, y3: 70, color: '#b34e4e', colorName: 'أحمر' },
-                    { type: 'rect', x: 155, y: 210, w: 30, h: 50, color: '#dbb44b', colorName: 'أصفر' }
+                    { type: 'rect', x: 110, y: 160, w: 120, h: 100, color: '#b07d5e', fill: true },
+                    { type: 'triangle', x1: 80, y1: 160, x2: 260, y2: 160, x3: 170, y3: 70, color: '#c93838', fill: true },
+                    { type: 'rect', x: 155, y: 210, w: 30, h: 50, color: '#e6b422', fill: true }
                 ]
             },
             {
                 name: "الشجرة الخضراء",
                 bg: '#ecffe7',
                 shapes: [
-                    { type: 'rect', x: 135, y: 200, w: 30, h: 80, color: '#8B4513', colorName: 'بني' },
-                    { type: 'circle', x: 150, y: 150, radius: 45, color: '#2b7d4d', colorName: 'أخضر' },
-                    { type: 'circle', x: 115, y: 130, radius: 20, color: '#4fb86b', colorName: 'أخضر فاتح' },
-                    { type: 'circle', x: 185, y: 130, radius: 20, color: '#4fb86b', colorName: 'أخضر فاتح' }
+                    { type: 'rect', x: 135, y: 200, w: 30, h: 80, color: '#8B4513', fill: true },
+                    { type: 'circle', x: 150, y: 150, radius: 45, color: '#2b7d4d', fill: true },
+                    { type: 'circle', x: 115, y: 130, radius: 20, color: '#2b7d4d', fill: true },
+                    { type: 'circle', x: 185, y: 130, radius: 20, color: '#2b7d4d', fill: true }
+                ]
+            },
+            // المستويات الجديدة الأكثر تعقيداً (6-15)
+            {
+                name: "الغروب فوق الجبال",
+                bg: '#ff9f4b',
+                shapes: [
+                    { type: 'rect', x: 0, y: 0, w: 300, h: 150, color: '#ffd966', fill: true },
+                    { type: 'rect', x: 0, y: 150, w: 300, h: 150, color: '#2b5e5e', fill: true },
+                    { type: 'triangle', x1: 0, y1: 180, x2: 80, y2: 80, x3: 160, y3: 180, color: '#4a3729', fill: true },
+                    { type: 'triangle', x1: 140, y1: 180, x2: 220, y2: 60, x3: 300, y3: 180, color: '#4a3729', fill: true },
+                    { type: 'circle', x: 250, y: 70, radius: 25, color: '#f5e56b', fill: true },
+                    { type: 'circle', x: 50, y: 220, radius: 8, color: '#ffffff', fill: true },
+                    { type: 'circle', x: 90, y: 240, radius: 6, color: '#ffffff', fill: true },
+                    { type: 'circle', x: 200, y: 250, radius: 7, color: '#ffffff', fill: true }
+                ]
+            },
+            {
+                name: "الوجه المبتسم",
+                bg: '#fef9e7',
+                shapes: [
+                    { type: 'circle', x: 150, y: 150, radius: 80, color: '#ffdb7e', fill: true },
+                    { type: 'circle', x: 110, y: 120, radius: 12, color: '#000000', fill: true },
+                    { type: 'circle', x: 190, y: 120, radius: 10, color: '#000000', fill: true },
+                    { type: 'circle', x: 112, y: 118, radius: 4, color: '#ffffff', fill: true },
+                    { type: 'circle', x: 192, y: 118, radius: 3, color: '#ffffff', fill: true },
+                    { type: 'arc', x: 150, y: 170, radius: 35, start: 0.1, end: Math.PI - 0.1, color: '#a55d5d', fill: false, width: 5 },
+                    { type: 'line', x1: 120, y1: 200, x2: 180, y2: 200, color: '#d96b6b', width: 4 }
+                ]
+            },
+            {
+                name: "الزهرة الجميلة",
+                bg: '#d6f0d6',
+                shapes: [
+                    { type: 'circle', x: 150, y: 150, radius: 25, color: '#ffaa44', fill: true },
+                    { type: 'circle', x: 110, y: 110, radius: 20, color: '#ff6b8b', fill: true },
+                    { type: 'circle', x: 190, y: 110, radius: 20, color: '#ff8b9c', fill: true },
+                    { type: 'circle', x: 110, y: 190, radius: 20, color: '#ff7b9c', fill: true },
+                    { type: 'circle', x: 190, y: 190, radius: 20, color: '#ff9bbd', fill: true },
+                    { type: 'line', x1: 150, y1: 150, x2: 150, y2: 250, color: '#2b7d4d', width: 8 },
+                    { type: 'rect', x: 140, y: 250, w: 20, h: 30, color: '#2b7d4d', fill: true },
+                    { type: 'line', x1: 90, y1: 210, x2: 130, y2: 230, color: '#2b7d4d', width: 4 },
+                    { type: 'line', x1: 210, y1: 210, x2: 170, y2: 230, color: '#2b7d4d', width: 4 }
+                ]
+            },
+            {
+                name: "السمكة المرحة",
+                bg: '#add8e6',
+                shapes: [
+                    { type: 'ellipse', x: 150, y: 150, rx: 70, ry: 40, color: '#ff9933', fill: true, rotation: 0 },
+                    { type: 'triangle', x1: 210, y1: 135, x2: 250, y2: 150, x3: 210, y3: 165, color: '#ff9933', fill: true },
+                    { type: 'circle', x: 120, y: 135, radius: 6, color: '#000000', fill: true },
+                    { type: 'circle', x: 115, y: 130, radius: 2, color: '#ffffff', fill: true },
+                    { type: 'arc', x: 130, y: 160, radius: 15, start: 0, end: Math.PI, color: '#cc6600', fill: false, width: 3 },
+                    { type: 'circle', x: 60, y: 110, radius: 8, color: '#b0e0e6', fill: true },
+                    { type: 'circle', x: 80, y: 190, radius: 6, color: '#b0e0e6', fill: true },
+                    { type: 'circle', x: 220, y: 80, radius: 7, color: '#b0e0e6', fill: true },
+                    { type: 'circle', x: 240, y: 210, radius: 9, color: '#b0e0e6', fill: true }
+                ]
+            },
+            {
+                name: "الفراشة الملونة",
+                bg: '#f0e68c',
+                shapes: [
+                    { type: 'ellipse', x: 150, y: 150, rx: 25, ry: 60, color: '#8b4513', fill: true, rotation: 0 },
+                    { type: 'circle', x: 150, y: 120, radius: 15, color: '#000000', fill: true },
+                    { type: 'circle', x: 140, y: 115, radius: 3, color: '#ffffff', fill: true },
+                    { type: 'circle', x: 160, y: 115, radius: 3, color: '#ffffff', fill: true },
+                    { type: 'arc', x1: 100, y1: 100, x2: 50, y2: 80, x3: 80, y3: 130, color: '#ff69b4', fill: true },
+                    { type: 'arc', x1: 200, y1: 100, x2: 250, y2: 80, x3: 220, y3: 130, color: '#ff69b4', fill: true },
+                    { type: 'arc', x1: 100, y1: 180, x2: 50, y2: 200, x3: 80, y3: 150, color: '#ff69b4', fill: true },
+                    { type: 'arc', x1: 200, y1: 180, x2: 250, y2: 200, x3: 220, y3: 150, color: '#ff69b4', fill: true },
+                    { type: 'line', x1: 150, y1: 180, x2: 150, y2: 220, color: '#8b4513', width: 4 }
+                ]
+            },
+            {
+                name: "المنزل والحديقة",
+                bg: '#c6e9c6',
+                shapes: [
+                    { type: 'rect', x: 100, y: 150, w: 120, h: 100, color: '#cd853f', fill: true },
+                    { type: 'triangle', x1: 70, y1: 150, x2: 250, y2: 150, x3: 160, y3: 70, color: '#8b4513', fill: true },
+                    { type: 'rect', x: 145, y: 190, w: 30, h: 60, color: '#d2b48c', fill: true },
+                    { type: 'circle', x: 160, y: 220, radius: 8, color: '#8b4513', fill: true },
+                    { type: 'rect', x: 40, y: 200, w: 30, h: 50, color: '#228b22', fill: true },
+                    { type: 'circle', x: 55, y: 180, radius: 15, color: '#228b22', fill: true },
+                    { type: 'circle', x: 250, y: 220, radius: 12, color: '#ffa500', fill: true },
+                    { type: 'circle', x: 270, y: 200, radius: 10, color: '#ffa500', fill: true },
+                    { type: 'circle', x: 230, y: 200, radius: 10, color: '#ffa500', fill: true },
+                    { type: 'line', x1: 20, y1: 250, x2: 280, y2: 250, color: '#8b4513', width: 3 }
+                ]
+            },
+            {
+                name: "نجمة البحر",
+                bg: '#a4d3ee',
+                shapes: [
+                    { type: 'star', x: 150, y: 150, points: 5, outer: 60, inner: 30, color: '#ffa500', fill: true },
+                    { type: 'circle', x: 150, y: 150, radius: 20, color: '#ff8c00', fill: true },
+                    { type: 'circle', x: 100, y: 100, radius: 10, color: '#ffb6c1', fill: true },
+                    { type: 'circle', x: 200, y: 100, radius: 8, color: '#ffb6c1', fill: true },
+                    { type: 'circle', x: 100, y: 200, radius: 9, color: '#ffb6c1', fill: true },
+                    { type: 'circle', x: 200, y: 200, radius: 11, color: '#ffb6c1', fill: true },
+                    { type: 'circle', x: 150, y: 70, radius: 12, color: '#ffb6c1', fill: true },
+                    { type: 'circle', x: 150, y: 230, radius: 10, color: '#ffb6c1', fill: true }
+                ]
+            },
+            {
+                name: "المركب الشراعي",
+                bg: '#b0e2ff',
+                shapes: [
+                    { type: 'rect', x: 130, y: 180, w: 80, h: 15, color: '#8b4513', fill: true },
+                    { type: 'triangle', x1: 150, y1: 180, x2: 190, y2: 180, x3: 170, y3: 80, color: '#ffffff', fill: true },
+                    { type: 'triangle', x1: 160, y1: 170, x2: 200, y2: 170, x3: 180, y3: 60, color: '#f0f0f0', fill: true },
+                    { type: 'line', x1: 170, y1: 80, x2: 170, y2: 180, color: '#000000', width: 2 },
+                    { type: 'rect', x: 190, y: 140, w: 8, h: 40, color: '#8b4513', fill: true },
+                    { type: 'triangle', x1: 198, y1: 140, x2: 230, y2: 160, x3: 198, y3: 160, color: '#ff0000', fill: true },
+                    { type: 'line', x1: 20, y1: 195, x2: 280, y2: 195, color: '#1e5fb4', width: 3 },
+                    { type: 'circle', x: 50, y: 180, radius: 10, color: '#ffff00', fill: true },
+                    { type: 'circle', x: 90, y: 160, radius: 8, color: '#ffff00', fill: true },
+                    { type: 'circle', x: 250, y: 170, radius: 9, color: '#ffff00', fill: true }
+                ]
+            },
+            {
+                name: "باقة الزهور",
+                bg: '#f5f5dc',
+                shapes: [
+                    { type: 'circle', x: 100, y: 100, radius: 25, color: '#ff6b8b', fill: true },
+                    { type: 'circle', x: 200, y: 80, radius: 22, color: '#ffaa44', fill: true },
+                    { type: 'circle', x: 150, y: 150, radius: 30, color: '#aa80ff', fill: true },
+                    { type: 'circle', x: 80, y: 180, radius: 20, color: '#ff69b4', fill: true },
+                    { type: 'circle', x: 220, y: 170, radius: 23, color: '#ff4500', fill: true },
+                    { type: 'circle', x: 130, y: 60, radius: 18, color: '#ffd700', fill: true },
+                    { type: 'circle', x: 180, y: 210, radius: 21, color: '#ff1493', fill: true },
+                    { type: 'line', x1: 100, y1: 125, x2: 100, y2: 250, color: '#2b7d4d', width: 4 },
+                    { type: 'line', x1: 200, y1: 102, x2: 200, y2: 250, color: '#2b7d4d', width: 4 },
+                    { type: 'line', x1: 150, y1: 180, x2: 150, y2: 250, color: '#2b7d4d', width: 5 },
+                    { type: 'line', x1: 80, y1: 200, x2: 80, y2: 250, color: '#2b7d4d', width: 3 },
+                    { type: 'line', x1: 220, y1: 193, x2: 220, y2: 250, color: '#2b7d4d', width: 4 },
+                    { type: 'line', x1: 130, y1: 78, x2: 130, y2: 250, color: '#2b7d4d', width: 3 },
+                    { type: 'line', x1: 180, y1: 231, x2: 180, y2: 250, color: '#2b7d4d', width: 4 }
                 ]
             }
         ];
@@ -537,7 +537,6 @@
         const levelSpan = document.getElementById('levelNumber');
         const starDisplay = document.getElementById('starDisplay');
         const gameMessage = document.getElementById('gameMessage');
-        const requiredColorsGrid = document.getElementById('requiredColorsGrid');
         const nextBtn = document.getElementById('nextLevelBtn');
         const levelCompleteMsg = document.getElementById('levelCompleteMsg');
         const clearKidBtn = document.getElementById('clearKidBtn');
@@ -546,22 +545,20 @@
         const sizeUp = document.getElementById('sizeUp');
         const sizeDisplay = document.getElementById('sizeDisplay');
 
-        let currentColor = colorMap[0].hex;
+        let currentColor = colors[0].hex;
         let brushSize = 8;
         let currentLevel = 0;
         let drawing = false;
-        let usedColors = new Set();
 
         // تهيئة منتقي الألوان
         function buildPalette() {
             colorPalette.innerHTML = '';
-            colorMap.forEach((color, index) => {
+            colors.forEach((color, index) => {
                 const dot = document.createElement('div');
                 dot.className = 'color-dot';
                 dot.style.backgroundColor = color.hex;
                 dot.setAttribute('data-color', color.hex);
-                dot.setAttribute('data-name', color.name);
-                dot.addEventListener('click', (e) => {
+                dot.addEventListener('click', () => {
                     document.querySelectorAll('.color-dot').forEach(d => d.classList.remove('active'));
                     dot.classList.add('active');
                     currentColor = color.hex;
@@ -576,11 +573,19 @@
         function updateSizeDisplay() {
             sizeDisplay.innerText = brushSize;
         }
+        
         sizeDown.addEventListener('click', () => {
-            if (brushSize > 2) { brushSize -= 2; updateSizeDisplay(); }
+            if (brushSize > 2) { 
+                brushSize -= 2; 
+                updateSizeDisplay(); 
+            }
         });
+        
         sizeUp.addEventListener('click', () => {
-            if (brushSize < 30) { brushSize += 2; updateSizeDisplay(); }
+            if (brushSize < 30) { 
+                brushSize += 2; 
+                updateSizeDisplay(); 
+            }
         });
         updateSizeDisplay();
 
@@ -588,6 +593,12 @@
         function drawMaster(levelIndex) {
             const level = levels[levelIndex];
             ctxMaster.clearRect(0, 0, 300, 300);
+            
+            // خلفية بيضاء
+            ctxMaster.fillStyle = '#ffffff';
+            ctxMaster.fillRect(0, 0, 300, 300);
+            
+            // رسم الخلفية المحددة للمستوى
             ctxMaster.fillStyle = level.bg || '#ffffff';
             ctxMaster.fillRect(0, 0, 300, 300);
 
@@ -600,23 +611,111 @@
                 switch (shape.type) {
                     case 'circle':
                         ctxMaster.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
-                        shape.fill ? ctxMaster.fill() : ctxMaster.stroke();
+                        if (shape.fill) {
+                            ctxMaster.fill();
+                        } else {
+                            ctxMaster.stroke();
+                        }
                         break;
+                        
                     case 'rect':
-                        shape.fill ? ctxMaster.fillRect(shape.x, shape.y, shape.w, shape.h) : ctxMaster.strokeRect(shape.x, shape.y, shape.w, shape.h);
+                        if (shape.fill) {
+                            ctxMaster.fillRect(shape.x, shape.y, shape.w, shape.h);
+                        } else {
+                            ctxMaster.strokeRect(shape.x, shape.y, shape.w, shape.h);
+                        }
                         break;
+                        
                     case 'triangle':
                         ctxMaster.moveTo(shape.x1, shape.y1);
                         ctxMaster.lineTo(shape.x2, shape.y2);
                         ctxMaster.lineTo(shape.x3, shape.y3);
                         ctxMaster.closePath();
-                        shape.fill ? ctxMaster.fill() : ctxMaster.stroke();
+                        if (shape.fill) {
+                            ctxMaster.fill();
+                        } else {
+                            ctxMaster.stroke();
+                        }
                         break;
+                        
                     case 'line':
+                        ctxMaster.beginPath();
                         ctxMaster.moveTo(shape.x1, shape.y1);
                         ctxMaster.lineTo(shape.x2, shape.y2);
                         ctxMaster.stroke();
                         break;
+                        
+                    case 'ellipse':
+                        ctxMaster.ellipse(shape.x, shape.y, shape.rx, shape.ry, shape.rotation || 0, 0, 2 * Math.PI);
+                        if (shape.fill) {
+                            ctxMaster.fill();
+                        } else {
+                            ctxMaster.stroke();
+                        }
+                        break;
+                        
+                    case 'arc':
+                        if (shape.x1 && shape.y1 && shape.x2 && shape.y2 && shape.x3 && shape.y3) {
+                            // رسم قوس بثلاث نقاط (تقريب)
+                            ctxMaster.moveTo(shape.x1, shape.y1);
+                            ctxMaster.quadraticCurveTo(shape.x2, shape.y2, shape.x3, shape.y3);
+                            if (shape.fill) {
+                                ctxMaster.fill();
+                            } else {
+                                ctxMaster.stroke();
+                            }
+                        } else {
+                            ctxMaster.arc(shape.x, shape.y, shape.radius, shape.start || 0, shape.end || Math.PI * 2);
+                            if (shape.fill) {
+                                ctxMaster.fill();
+                            } else {
+                                ctxMaster.stroke();
+                            }
+                        }
+                        break;
+                        
+                    case 'heart':
+                        // رسم قلب بسيط
+                        ctxMaster.moveTo(shape.x, shape.y + shape.size * 0.25);
+                        ctxMaster.bezierCurveTo(shape.x - shape.size * 0.5, shape.y - shape.size * 0.5, 
+                                                shape.x - shape.size * 0.2, shape.y - shape.size * 0.8, 
+                                                shape.x, shape.y - shape.size * 0.5);
+                        ctxMaster.bezierCurveTo(shape.x + shape.size * 0.2, shape.y - shape.size * 0.8, 
+                                                shape.x + shape.size * 0.5, shape.y - shape.size * 0.5, 
+                                                shape.x, shape.y + shape.size * 0.25);
+                        if (shape.fill) {
+                            ctxMaster.fill();
+                        } else {
+                            ctxMaster.stroke();
+                        }
+                        break;
+                        
+                    case 'star':
+                        // رسم نجمة بسيطة
+                        let outer = shape.outer || 40;
+                        let inner = shape.inner || 20;
+                        let rot = Math.PI / 2 * 3;
+                        let step = Math.PI / shape.points;
+                        ctxMaster.moveTo(shape.x + Math.cos(rot) * outer, shape.y + Math.sin(rot) * outer);
+                        for (let i = 0; i < shape.points; i++) {
+                            rot += step;
+                            ctxMaster.lineTo(shape.x + Math.cos(rot) * inner, shape.y + Math.sin(rot) * inner);
+                            rot += step;
+                            ctxMaster.lineTo(shape.x + Math.cos(rot) * outer, shape.y + Math.sin(rot) * outer);
+                        }
+                        ctxMaster.closePath();
+                        if (shape.fill) {
+                            ctxMaster.fill();
+                        } else {
+                            ctxMaster.stroke();
+                        }
+                        break;
+                        
+                    case 'text':
+                        ctxMaster.font = shape.font || '20px Arial';
+                        ctxMaster.fillStyle = shape.color;
+                        ctxMaster.fillText(shape.text, shape.x, shape.y);
+                        break;
                 }
             });
         }
@@ -626,215 +725,6 @@
             ctxKid.clearRect(0, 0, 300, 300);
             ctxKid.fillStyle = '#ffffff';
             ctxKid.fillRect(0, 0, 300, 300);
-            usedColors.clear();
-            updateUI();
-        }
-
-        // دقيقة للتعرف على اللون بناءً على قيم RGB
-        function identifyColor(r, g, b) {
-            let bestMatch = null;
-            let bestScore = Infinity;
-
-            colorMap.forEach(color => {
-                // حساب المسافة اللونية
-                const rgb = hexToRgb(color.hex);
-                if (!rgb) return;
-                
-                const distance = Math.sqrt(
-                    Math.pow(r - rgb.r, 2) * 0.3 +  // وزن أقل للأحمر
-                    Math.pow(g - rgb.g, 2) * 0.4 +  // وزن أكثر للأخضر (العين البشرية حساسة له)
-                    Math.pow(b - rgb.b, 2) * 0.3    // وزن أقل للأزرق
-                );
-                
-                // تحقق إضافي للبني - نطاقات خاصة
-                const isBrown = color.name.includes('بني');
-                if (isBrown) {
-                    // البني يتميز بانخفاض اللون الأزرق
-                    if (b > 120) return; // إذا كان الأزرق عالي، ليس بني
-                    
-                    // البني نسبة الأحمر للأخضر محددة
-                    if (r < 80 || g < 40) return;
-                    
-                    // تعديل المسافة للبني
-                    const brownScore = distance * 0.7; // وزن أقل للبني (نسامحه أكثر)
-                    if (brownScore < bestScore) {
-                        bestScore = brownScore;
-                        bestMatch = color;
-                    }
-                } else {
-                    if (distance < bestScore) {
-                        bestScore = distance;
-                        bestMatch = color;
-                    }
-                }
-            });
-
-            // تسامح أكبر للألوان
-            return bestScore < 70 ? bestMatch : null;
-        }
-
-        // تحليل الألوان المستخدمة في الرسم
-        function analyzeColors() {
-            const imageData = ctxKid.getImageData(0, 0, 300, 300);
-            const data = imageData.data;
-            const colorsFound = new Set();
-            
-            // أخذ عينات من البكسل (كل 5 بكسل لتسريع التحليل)
-            for (let i = 0; i < data.length; i += 20) {
-                const r = data[i];
-                const g = data[i+1];
-                const b = data[i+2];
-                const a = data[i+3];
-                
-                // تجاهل الخلفية البيضاء والشفافة
-                if (a < 10) continue;
-                if (r > 250 && g > 250 && b > 250) continue;
-                
-                const color = identifyColor(r, g, b);
-                if (color) {
-                    colorsFound.add(color.hex);
-                }
-            }
-            
-            return colorsFound;
-        }
-
-        // تحديث واجهة المستخدم
-        function updateUI() {
-            // تحليل الألوان المستخدمة
-            const foundColors = analyzeColors();
-            usedColors = foundColors;
-            
-            // تحديث علامات الاستخدام على ألوان الأداة
-            document.querySelectorAll('.color-dot').forEach(dot => {
-                const colorHex = dot.dataset.color;
-                if (usedColors.has(colorHex)) {
-                    dot.classList.add('used');
-                } else {
-                    dot.classList.remove('used');
-                }
-            });
-            
-            // تحديث شبكة الألوان المطلوبة
-            updateRequiredColorsGrid();
-            
-            // التحقق من الاكتمال
-            checkLevelCompletion();
-        }
-
-        // تحديث شبكة الألوان المطلوبة
-        function updateRequiredColorsGrid() {
-            const level = levels[currentLevel];
-            const requiredColors = [];
-            
-            // جمع الألوان المطلوبة (بدون تكرار)
-            level.shapes.forEach(shape => {
-                if (shape.color && shape.colorName) {
-                    requiredColors.push({
-                        hex: shape.color,
-                        name: shape.colorName
-                    });
-                }
-            });
-            
-            // إزالة التكرار
-            const uniqueColors = [];
-            const seen = new Set();
-            requiredColors.forEach(color => {
-                if (!seen.has(color.hex)) {
-                    seen.add(color.hex);
-                    uniqueColors.push(color);
-                }
-            });
-            
-            requiredColorsGrid.innerHTML = '';
-            uniqueColors.forEach(color => {
-                const isUsed = usedColors.has(color.hex);
-                const div = document.createElement('div');
-                div.className = `color-requirement ${isUsed ? 'completed' : 'missing'}`;
-                div.innerHTML = `
-                    <div class="req-color-dot" style="background-color: ${color.hex}"></div>
-                    <span class="req-color-name">${color.name}</span>
-                    <span class="req-status">${isUsed ? '✓' : '○'}</span>
-                `;
-                requiredColorsGrid.appendChild(div);
-            });
-        }
-
-        // التحقق من اكتمال المستوى
-        function checkLevelCompletion() {
-            const level = levels[currentLevel];
-            
-            // جمع الألوان المطلوبة
-            const requiredColors = new Set();
-            level.shapes.forEach(shape => {
-                if (shape.color) {
-                    requiredColors.add(shape.color);
-                }
-            });
-            
-            // التحقق من وجود كل لون مطلوب
-            let allColorsUsed = true;
-            const missingColors = [];
-            
-            requiredColors.forEach(reqColor => {
-                let found = false;
-                usedColors.forEach(usedColor => {
-                    // مقارنة مرنة للألوان (خاصة للبني)
-                    if (colorDistance(reqColor, usedColor) < 60) {
-                        found = true;
-                    }
-                });
-                if (!found) {
-                    allColorsUsed = false;
-                    const shape = level.shapes.find(s => s.color === reqColor);
-                    if (shape && shape.colorName) {
-                        missingColors.push(shape.colorName);
-                    }
-                }
-            });
-            
-            // تحديث رسالة اللعبة وزر التالي
-            if (allColorsUsed && usedColors.size > 0) {
-                nextBtn.disabled = false;
-                nextBtn.classList.add('success');
-                gameMessage.innerHTML = '🎉 ممتاز! استخدمت كل الألوان المطلوبة ✓';
-                gameMessage.style.background = '#b3e4b3';
-                gameMessage.style.border = '4px solid #12874a';
-            } else {
-                nextBtn.disabled = true;
-                nextBtn.classList.remove('success');
-                
-                if (missingColors.length > 0) {
-                    gameMessage.innerHTML = `🎨 الألوان الناقصة: ${missingColors.join('، ')}`;
-                } else {
-                    gameMessage.innerHTML = '👆 استخدم الألوان من اللوحة الأصل';
-                }
-                gameMessage.style.background = '#feebc0';
-                gameMessage.style.border = '3px solid #d68b4c';
-            }
-        }
-
-        // دوال مساعدة للألوان
-        function hexToRgb(hex) {
-            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-            return result ? {
-                r: parseInt(result[1], 16),
-                g: parseInt(result[2], 16),
-                b: parseInt(result[3], 16)
-            } : null;
-        }
-
-        function colorDistance(hex1, hex2) {
-            const rgb1 = hexToRgb(hex1);
-            const rgb2 = hexToRgb(hex2);
-            if (!rgb1 || !rgb2) return 999;
-            
-            return Math.sqrt(
-                Math.pow(rgb1.r - rgb2.r, 2) * 0.3 +
-                Math.pow(rgb1.g - rgb2.g, 2) * 0.4 +
-                Math.pow(rgb1.b - rgb2.b, 2) * 0.3
-            );
         }
 
         // أحداث الرسم
@@ -848,7 +738,6 @@
         function stopDrawing() {
             drawing = false;
             ctxKid.beginPath();
-            updateUI();
         }
         
         function draw(e) {
@@ -897,6 +786,19 @@
 
         clearKidBtn.addEventListener('click', clearKid);
 
+        // الانتقال للمستوى التالي يدوياً
+        nextBtn.addEventListener('click', () => {
+            if (currentLevel < levels.length - 1) {
+                currentLevel++;
+                loadLevel(currentLevel);
+                levelCompleteMsg.classList.add('hidden');
+            } else {
+                levelCompleteMsg.classList.remove('hidden');
+                levelCompleteMsg.innerText = '🎉 🏆 أنت فنان عظيم! أكملت كل المراحل 🏆 🎉';
+                gameMessage.innerHTML = '✨ ألف مبروك! ✨';
+            }
+        });
+
         // تحميل المستوى
         function loadLevel(index) {
             currentLevel = index;
@@ -911,30 +813,9 @@
             }
             starDisplay.innerText = stars;
             
-            nextBtn.disabled = true;
-            nextBtn.classList.remove('success');
-            levelCompleteMsg.classList.add('hidden');
-            
-            gameMessage.innerHTML = levels[currentLevel].name + ' - ابدأ الرسم!';
-            gameMessage.style.background = '#feebc0';
-            
-            // تحديث الألوان المطلوبة
-            updateRequiredColorsGrid();
+            gameMessage.innerHTML = levels[currentLevel].name + ' - انسخ اللوحة!';
         }
 
-        // المستوى التالي
-        nextBtn.addEventListener('click', () => {
-            if (currentLevel < levels.length - 1) {
-                currentLevel++;
-                loadLevel(currentLevel);
-            } else {
-                levelCompleteMsg.classList.remove('hidden');
-                levelCompleteMsg.innerText = '🎉 🏆 أنت فنان عظيم! أكملت كل المراحل 🏆 🎉';
-                nextBtn.disabled = true;
-                gameMessage.innerHTML = '✨ ألف مبروك! ✨';
-            }
-        });
-
         // بداية اللعبة
         loadLevel(0);
     })();