Fixed styling error in garden page, and adjusted pricing on new gardens.

Pages/Garden.php

@@ -111,7 +111,10 @@ $PageSection = "Garden";
             </div>
 
             <div class="GardenLayout">
-                <section id="Plots">
+                <section
+                    id="Plots"
+                    class="Panel GardenPlotsPanel"
+                >
                     <h2>Plots</h2>
 
                     <div

Scripts/Garden/Garden.js

@@ -545,6 +545,11 @@ function RenderGarden() {
             "GardenGrid"
         );
 
+    const GardenPanel =
+        document.getElementById(
+            "Plots"
+        );
+
     GardenGrid.style.setProperty(
         "--GardenWidth",
         GameSave.Garden.Width
@@ -561,7 +566,7 @@ function RenderGarden() {
         "var(--Green)"
     ];
 
-    GardenGrid.style.setProperty(
+    GardenPanel.style.setProperty(
         "--GardenBorderColour",
         GardenBorderColours[
             GameSave.ActiveGardenIndex %

Scripts/Garden/Upgrades.js

@@ -2,7 +2,7 @@ const GardenExpansionBaseCost = 1000;
 const PlantInformationUpgradeCost = 500;
 const GardenOverviewUpgradeCost = 1000;
 const MutationHintsUpgradeCost = 1500;
-const NewGardenBaseCost = 30000;
+const NewGardenBaseCost = 15000;
 const NewGardenCostMultiplier = 1.5;
 const NewGardenCostRounding = 1000;
 

Styles/Style.css

@@ -359,14 +359,20 @@ input, button, textarea, select {
     align-items: start;
 }
 
+.GardenPlotsPanel {
+    padding: 0.75rem;
+    border-color: var(--GardenBorderColour, var(--Lavender));
+}
+
+.GardenPlotsPanel h2 {
+    margin-bottom: 0.75rem;
+}
+
 .GardenGrid {
     --GardenWidth: 3;
     display: grid;
     grid-template-columns: repeat( var(--GardenWidth), minmax(0, 1fr) );
     gap: 0.5rem;
-    padding: 0.75rem;
-    background-color: var(--Mantle);
-    border: 4px solid var(--GardenBorderColour, var(--Lavender));
 }
 
 .GardenPlot {