garden 2

assets/css/custom.css

@@ -347,30 +347,31 @@ header {
     z-index: 1;
 }
 
-.petal div {
+/* This is for each individual petal piece */
+.petal > div {
     position: absolute;
     top: 50%;
     left: 50%;
-    margin-top: -10px;
-    margin-left: -5px;
-    width: 10px;
+    width: 14px;
     height: 20px;
-    border-radius: 5px;
-    transform-origin: 50% 100%;
+    margin-left: -7px;
+    margin-top: -22px; /* Controls distance from center */
+    border-radius: 50%;
+    transform-origin: center 22px; /* PIVOT POINT: (width/2) (margin-top) */
 }
 
 /* Petal Colors */
-.petal-pink div { background-color: #ffaccb; }
-.petal-yellow div { background-color: #fff38a; }
-.petal-purple div { background-color: #d9abff; }
-.petal-white div { background-color: #ffffff; }
+.petal-pink > div { background-color: #ffaccb; }
+.petal-yellow > div { background-color: #fff38a; }
+.petal-purple > div { background-color: #d9abff; }
+.petal-white > div { background-color: #ffffff; }
 
-
-.petal .p1 { transform: rotate(0deg) translateY(-15px); }
-.petal .p2 { transform: rotate(45deg) translateY(-15px); }
-.petal .p3 { transform: rotate(90deg) translateY(-15px); }
-.petal .p4 { transform: rotate(135deg) translateY(-15px); }
-.petal .p5 { transform: rotate(180deg) translateY(-15px); }
-.petal .p6 { transform: rotate(225deg) translateY(-15px); }
-.petal .p7 { transform: rotate(270deg) translateY(-15px); }
-.petal .p8 { transform: rotate(315deg) translateY(-15px); }
+/* Position and rotate each petal */
+.petal .p1 { transform: rotate(0deg); }
+.petal .p2 { transform: rotate(45deg); }
+.petal .p3 { transform: rotate(90deg); }
+.petal .p4 { transform: rotate(135deg); }
+.petal .p5 { transform: rotate(180deg); }
+.petal .p6 { transform: rotate(225deg); }
+.petal .p7 { transform: rotate(270deg); }
+.petal .p8 { transform: rotate(315deg); }

assets/js/main.js

@@ -16,7 +16,11 @@ document.addEventListener('DOMContentLoaded', () => {
     // --- Initialization ---
     function init() {
         tasks.forEach(renderTask);
+        // Filter out garden elements whose tasks are no longer completed or no longer exist
+        const completedTaskIds = new Set(tasks.filter(t => t.completed).map(t => t.id));
+        gardenElements = gardenElements.filter(el => completedTaskIds.has(el.taskId));
         gardenElements.forEach(renderGardenElement);
+        saveState(); // Resync localStorage with the filtered elements
     }
 
     // --- State Management ---