From ab0d858fef18c3b8a49325d905c8419cb5e8dd88 Mon Sep 17 00:00:00 2001
From: Sarahtonin <SRHTNIN@proton.me>
Date: Sat, 5 Sep 2026 11:49:01 +0200
Subject: [PATCH] Made styling more coherent, shortened CSS, and added some
 other little sprinkles of neatness.

---
 Pages/Garden.php                       |  12 +-
 Pages/Profile.php                      |  10 +-
 Pages/Social.php                       |   2 +-
 Scripts/Garden/MutationEncyclopedia.js | 124 ++++++++++-----
 Scripts/Garden/PlantEncyclopedia.js    |   2 +-
 Scripts/Garden/Save.js                 |  21 ++-
 Scripts/Garden/Shop.js                 | 208 ++++++++++++++-----------
 Scripts/Garden/Upgrades.js             | 105 ++++++++++++-
 Styles/Style.css                       | 191 +++++++----------------
 9 files changed, 389 insertions(+), 286 deletions(-)

diff --git a/Pages/Garden.php b/Pages/Garden.php
index 5aa6db8..543b7f6 100644
--- a/Pages/Garden.php
+++ b/Pages/Garden.php
@@ -53,8 +53,6 @@ $PageSection = "Garden";
                 id="GardenInfoPanel"
                 class="StatusPanel GardenInfoPanel"
             >
-                <h2 class="GardenInfoHeading">Info</h2>
-
                 <div class="GardenInfoRow GardenInfoTopRow">
                     <div class="GardenInfoSection GardenInfoPrimarySection">
                         <div class="GardenStatusLine">
@@ -170,7 +168,7 @@ $PageSection = "Garden";
                 id="QuickBuy"
                 class="Panel GardenQuickBuyPanel"
             >
-                <div class="GardenQuickBuyHeader">
+                <div class="PanelHeader PanelHeaderInset GardenQuickBuyHeader">
                     <h2>Quick-buy</h2>
 
                     <div
@@ -214,7 +212,7 @@ $PageSection = "Garden";
                 id="Tools"
                 class="Panel GardenToolsPanel"
             >
-                <h2>Tools</h2>
+                <h2 class="PanelHeader PanelHeaderInset">Tools</h2>
 
                 <div
                     id="ToolList"
@@ -226,7 +224,7 @@ $PageSection = "Garden";
                 id="Seeds"
                 class="Panel GardenInventoryPanel"
             >
-                <h2>Inventory</h2>
+                <h2 class="PanelHeader PanelHeaderInset">Inventory</h2>
 
                 <div
                     id="SeedList"
@@ -238,7 +236,7 @@ $PageSection = "Garden";
                 id="Plots"
                 class="Panel GardenPlotsPanel"
             >
-                <h2>Plots</h2>
+                <h2 class="PanelHeader PanelHeaderInset">Plots</h2>
 
                 <div class="GardenGridViewport">
                     <div
@@ -256,7 +254,7 @@ $PageSection = "Garden";
                 id="Player"
                 class="Panel GardenUser"
             >
-                <h2>Player</h2>
+                <h2 class="PanelHeader PanelHeaderInset">Player</h2>
 
                 <p>
                     Username:
diff --git a/Pages/Profile.php b/Pages/Profile.php
index 7b65463..fe199df 100644
--- a/Pages/Profile.php
+++ b/Pages/Profile.php
@@ -27,7 +27,7 @@ $PageTitle = "Profile";
                 id="Player"
                 class="Panel ProfileSection"
             >
-                <h2>Player</h2>
+                <h2 class="PanelHeader PanelHeaderInset">Player</h2>
 
                 <form id="ProfileUsernameForm">
                     <label
@@ -103,7 +103,7 @@ $PageTitle = "Profile";
                 id="GardenDisplay"
                 class="Panel ProfileSection"
             >
-                <h2>Garden display</h2>
+                <h2 class="PanelHeader PanelHeaderInset">Garden display</h2>
 
                 <h3>Tool selection</h3>
 
@@ -223,7 +223,7 @@ $PageTitle = "Profile";
                 id="Statistics"
                 class="Panel ProfileSection"
             >
-                <h3>Statistics</h3>
+                <h3 class="PanelHeader PanelHeaderInset">Statistics</h3>
 
                 <div class="ProfileStatistics">
                     <div class="ProfileStatistic">
@@ -283,7 +283,7 @@ $PageTitle = "Profile";
                 id="Account"
                 class="Panel ProfileSection"
             >
-                <h2>Account</h2>
+                <h2 class="PanelHeader PanelHeaderInset">Account</h2>
 
                 <p>
                     Your Account Key is the secret key used
@@ -392,7 +392,7 @@ $PageTitle = "Profile";
                 id="Import"
                 class="Panel ProfileSection"
             >
-                <h3>Import Account</h3>
+                <h3 class="PanelHeader PanelHeaderInset">Import Account</h3>
 
                 <p>
                     To use an existing Garden account on
diff --git a/Pages/Social.php b/Pages/Social.php
index a41f253..8e56b64 100644
--- a/Pages/Social.php
+++ b/Pages/Social.php
@@ -20,7 +20,7 @@ $PageSection = "Social";
                 id="Leaderboard"
                 class="Panel Leaderboard"
             >
-                <h2>Leaderboard</h2>
+                <h2 class="PanelHeader PanelHeaderInset">Leaderboard</h2>
 
                 <div class="LeaderboardTableContainer">
                     <table class="LeaderboardTable">
diff --git a/Scripts/Garden/MutationEncyclopedia.js b/Scripts/Garden/MutationEncyclopedia.js
index 0772542..c8925f9 100644
--- a/Scripts/Garden/MutationEncyclopedia.js
+++ b/Scripts/Garden/MutationEncyclopedia.js
@@ -117,13 +117,24 @@ function RenderMutationEncyclopedia() {
             )
             : [];
 
+    const HintLimit =
+        GetMutationHintsDisplayLimit(
+            MutationEncyclopediaSave
+        );
+
+    const DisplayedHints =
+        AvailableHints.slice(
+            0,
+            HintLimit
+        );
+
     const SearchQuery =
         MutationEncyclopediaSearchQuery
             .trim()
             .toLocaleLowerCase();
 
     const VisibleHints =
-        AvailableHints.filter(
+        DisplayedHints.filter(
             Mutation =>
                 DoesMutationHintMatchSearch(
                     Mutation,
@@ -145,13 +156,16 @@ function RenderMutationEncyclopedia() {
             );
 
 
-    for (
-        const Mutation
-        of VisibleHints
-    ) {
+    if (VisibleHints.length > 0) {
         List.appendChild(
             CreateMutationHintCard(
-                Mutation.Hint
+                VisibleHints.map(
+                    Mutation =>
+                        Mutation.Hint
+                ),
+                GetMutationHintsLevel(
+                    MutationEncyclopediaSave
+                )
             )
         );
     }
@@ -205,18 +219,6 @@ function RenderMutationEncyclopedia() {
                 .toLocaleString() +
             " discovered mutations."
         );
-
-        if (AvailableHints.length > 0) {
-            MessageParts.push(
-                "Showing " +
-                VisibleHints.length
-                    .toLocaleString() +
-                " of " +
-                AvailableHints.length
-                    .toLocaleString() +
-                " available hints."
-            );
-        }
     } else {
         MessageParts.push(
             DiscoveredMutations.length === 1
@@ -225,16 +227,20 @@ function RenderMutationEncyclopedia() {
                     .toLocaleString() +
                     " mutations discovered."
         );
+    }
 
-        if (AvailableHints.length > 0) {
-            MessageParts.push(
-                AvailableHints.length === 1
-                    ? "1 hint available."
-                    : AvailableHints.length
-                        .toLocaleString() +
-                        " hints available."
-            );
-        }
+    if (AvailableHints.length > 0) {
+        MessageParts.push(
+            "Showing " +
+            VisibleHints.length
+                .toLocaleString() +
+            " of " +
+            AvailableHints.length
+                .toLocaleString() +
+            (AvailableHints.length === 1
+                ? " available hint."
+                : " available hints.")
+        );
     }
 
     SetMutationEncyclopediaMessage(
@@ -645,7 +651,8 @@ function DoesPlantMatchHintMatcher(
 
 
 function CreateMutationHintCard(
-    Hint
+    Hints,
+    Level
 ) {
     const Card =
         document.createElement(
@@ -662,7 +669,7 @@ function CreateMutationHintCard(
         );
 
     Header.className =
-        "MutationEncyclopediaHeader";
+        "PanelHeader MutationEncyclopediaHeader";
 
 
     const Name =
@@ -671,7 +678,9 @@ function CreateMutationHintCard(
         );
 
     Name.textContent =
-        "Mutation hint";
+        Level >= MutationHintsMaximumLevel
+            ? "Mutation hints"
+            : "Mutation hint";
 
     Header.appendChild(Name);
 
@@ -685,20 +694,53 @@ function CreateMutationHintCard(
         "MutationEncyclopediaBody";
 
 
-    const HintText =
-        document.createElement(
-            "p"
+    if (
+        Level < MutationHintsMaximumLevel
+    ) {
+        const HintText =
+            document.createElement(
+                "p"
+            );
+
+        HintText.className =
+            "MutationEncyclopediaDescription";
+
+        HintText.textContent =
+            String(
+                Hints[0] ?? ""
+            ).trim();
+
+        Body.appendChild(
+            HintText
         );
+    } else {
+        const HintList =
+            document.createElement(
+                "ul"
+            );
 
-    HintText.className =
-        "MutationEncyclopediaDescription";
+        HintList.className =
+            "MutationHintList";
 
-    HintText.textContent =
-        Hint.trim();
+        for (const Hint of Hints) {
+            const Item =
+                document.createElement(
+                    "li"
+                );
 
-    Body.appendChild(
-        HintText
-    );
+            Item.textContent =
+                "- " +
+                String(Hint).trim();
+
+            HintList.appendChild(
+                Item
+            );
+        }
+
+        Body.appendChild(
+            HintList
+        );
+    }
 
 
     Card.append(
@@ -733,7 +775,7 @@ function CreateMutationEncyclopediaCard(
         );
 
     Header.className =
-        "MutationEncyclopediaHeader";
+        "PanelHeader MutationEncyclopediaHeader";
 
 
     const Number =
diff --git a/Scripts/Garden/PlantEncyclopedia.js b/Scripts/Garden/PlantEncyclopedia.js
index 0b2297b..d7d3069 100644
--- a/Scripts/Garden/PlantEncyclopedia.js
+++ b/Scripts/Garden/PlantEncyclopedia.js
@@ -367,7 +367,7 @@ function CreatePlantEncyclopediaCard(
         );
 
     Header.className =
-        "PlantEncyclopediaHeader";
+        "PanelHeader PlantEncyclopediaHeader";
 
 
     const Number =
diff --git a/Scripts/Garden/Save.js b/Scripts/Garden/Save.js
index 9d80ca6..4777803 100644
--- a/Scripts/Garden/Save.js
+++ b/Scripts/Garden/Save.js
@@ -392,7 +392,7 @@ function CreateNewSave() {
 
 
     return NormalizeSaveData({
-        Version: 4,
+        Version: 5,
         Revision: 0,
         LastSavedAt: Date.now(),
 
@@ -432,7 +432,8 @@ function CreateNewSave() {
             PlantInformation: false,
             GardenOverview: false,
             GardenEconomy: false,
-            MutationHints: false
+            MutationHints: false,
+            MutationHintsLevel: 0
         },
 
         Preferences: {
@@ -469,7 +470,7 @@ function NormalizeSaveData(
         Number(
             SaveData.Version ?? 1
         ),
-        4
+        5
     );
 
     SaveData.Revision = Number(
@@ -688,6 +689,20 @@ function NormalizeSaveData(
         SaveData.Upgrades.MutationHints ===
         true;
 
+    SaveData.Upgrades.MutationHintsLevel =
+        Math.max(
+            0,
+            Math.min(
+                1,
+                Math.floor(
+                    Number(
+                        SaveData.Upgrades
+                            .MutationHintsLevel ?? 0
+                    ) || 0
+                )
+            )
+        );
+
 
     SaveData.Preferences ??= {};
 
diff --git a/Scripts/Garden/Shop.js b/Scripts/Garden/Shop.js
index 0ce1c70..94b65d7 100644
--- a/Scripts/Garden/Shop.js
+++ b/Scripts/Garden/Shop.js
@@ -485,7 +485,7 @@ function CreateTrowelToolCard() {
         );
 
     Header.className =
-        "ShopItemHeader ShopItemHeaderOwned";
+        "PanelHeader PanelHeaderInset ShopItemHeader ShopItemHeaderOwned";
 
 
     const Name =
@@ -584,7 +584,7 @@ function CreateToolUnlockCard(
         );
 
     Header.className =
-        "ShopItemHeader" +
+        "PanelHeader PanelHeaderInset ShopItemHeader" +
         (
             IsOwned
                 ? " ShopItemHeaderOwned"
@@ -724,7 +724,7 @@ function CreateShovelToolCard() {
         );
 
     Header.className =
-        "ShopItemHeader" +
+        "PanelHeader PanelHeaderInset ShopItemHeader" +
         (
             IsOwned
                 ? " ShopItemHeaderOwned"
@@ -761,27 +761,22 @@ function CreateShovelToolCard() {
 
     Details.append(
         CreateShopStat(
-            "Status",
+            "Current",
             IsOwned
-                ? "Unlocked"
+                ? GetShovelLevelDescription(
+                    Level
+                )
                 : "Locked"
         ),
         CreateShopStat(
-            IsOwned
-                ? "Current"
-                : "On unlock",
-            GetShovelLevelDescription(
-                Level
-            )
-        ),
-        CreateShopStat(
-            IsOwned
-                ? "Next"
-                : "First upgrade",
+            "Next",
+            IsOwned &&
             Level >= ShovelMaximumLevel
                 ? "Maximum level"
                 : GetShovelLevelDescription(
-                    Level + 1
+                    IsOwned
+                        ? Level + 1
+                        : 0
                 )
         )
     );
@@ -860,18 +855,18 @@ function GetShovelLevelDescription(
     Level
 ) {
     if (Level <= 0) {
-        return "Level 0 - returns nothing";
+        return "Returns nothing";
     }
 
     if (Level === 1) {
-        return "Level 1 - returns 33% of seed cost";
+        return "Returns 33% of seed cost";
     }
 
     if (Level === 2) {
-        return "Level 2 - returns 66% of seed cost";
+        return "Returns 66% of seed cost";
     }
 
-    return "Level 3 - returns the planted seed";
+    return "Returns the planted seed";
 }
 
 
@@ -910,7 +905,7 @@ function CreateFertilizerToolCard() {
         );
 
     Header.className =
-        "ShopItemHeader" +
+        "PanelHeader PanelHeaderInset ShopItemHeader" +
         (
             IsOwned
                 ? " ShopItemHeaderOwned"
@@ -946,12 +941,6 @@ function CreateFertilizerToolCard() {
         "ShopItemDetails";
 
     Details.append(
-        CreateShopStat(
-            "Status",
-            IsOwned
-                ? "Unlocked"
-                : "Locked"
-        ),
         CreateShopStat(
             "Current uses",
             Number(
@@ -960,30 +949,23 @@ function CreateFertilizerToolCard() {
             ).toLocaleString()
         ),
         CreateShopStat(
+            "Current",
             IsOwned
-                ? "Current"
-                : "On unlock",
-            "Level " +
-            Level +
-            " - " +
-            FertilizerGrowthMinutes[
-                Level
-            ] +
-            " minutes"
+                ? FertilizerGrowthMinutes[
+                    Level
+                ] + " minutes"
+                : "Locked"
         ),
         CreateShopStat(
-            IsOwned
-                ? "Next"
-                : "First upgrade",
+            "Next",
+            IsOwned &&
             Level >= FertilizerMaximumLevel
                 ? "Maximum level"
-                : "Level " +
-                    (Level + 1) +
-                    " - " +
-                    FertilizerGrowthMinutes[
-                        Level + 1
-                    ] +
-                    " minutes"
+                : FertilizerGrowthMinutes[
+                    IsOwned
+                        ? Level + 1
+                        : 0
+                ] + " minutes"
         )
     );
 
@@ -1184,7 +1166,7 @@ function CreateGardenExpansionCard(
         );
 
     Header.className =
-        "ShopItemHeader";
+        "PanelHeader PanelHeaderInset ShopItemHeader";
 
 
     const Name =
@@ -1311,7 +1293,7 @@ function CreateNewGardenCard() {
         );
 
     Header.className =
-        "ShopItemHeader";
+        "PanelHeader PanelHeaderInset ShopItemHeader";
 
 
     const Name =
@@ -1420,7 +1402,7 @@ function CreatePlantInformationUpgradeCard() {
         );
 
     Header.className =
-        "ShopItemHeader" +
+        "PanelHeader PanelHeaderInset ShopItemHeader" +
         (
             IsOwned
                 ? " ShopItemHeaderOwned"
@@ -1541,7 +1523,7 @@ function CreateGardenOverviewUpgradeCard() {
         );
 
     Header.className =
-        "ShopItemHeader" +
+        "PanelHeader PanelHeaderInset ShopItemHeader" +
         (
             IsOwned
                 ? " ShopItemHeaderOwned"
@@ -1662,7 +1644,7 @@ function CreateGardenEconomyUpgradeCard() {
         );
 
     Header.className =
-        "ShopItemHeader" +
+        "PanelHeader PanelHeaderInset ShopItemHeader" +
         (
             IsOwned
                 ? " ShopItemHeaderOwned"
@@ -1757,14 +1739,25 @@ function CreateGardenEconomyUpgradeCard() {
 
 
 function CreateMutationHintsUpgradeCard() {
-    const Cost =
-        GetMutationHintsUpgradeCost();
-
-    const IsOwned =
+    const IsUnlocked =
         HasMutationHintsUpgrade(
             ShopSave
         );
 
+    const Level =
+        GetMutationHintsLevel(
+            ShopSave
+        );
+
+    const Cost =
+        GetMutationHintsUpgradeCost(
+            ShopSave
+        );
+
+    const IsMaximumLevel =
+        IsUnlocked &&
+        Level >= MutationHintsMaximumLevel;
+
 
     const Card =
         document.createElement(
@@ -1781,9 +1774,9 @@ function CreateMutationHintsUpgradeCard() {
         );
 
     Header.className =
-        "ShopItemHeader" +
+        "PanelHeader PanelHeaderInset ShopItemHeader" +
         (
-            IsOwned
+            IsMaximumLevel
                 ? " ShopItemHeaderOwned"
                 : ""
         );
@@ -1806,7 +1799,7 @@ function CreateMutationHintsUpgradeCard() {
         );
 
     Description.textContent =
-        "Show subtle hints for undiscovered mutations once you've discovered the plants needed to attempt them. Hints appear in the Mutation encyclopedia without revealing the recipe.";
+        "Show subtle hints for undiscovered mutations once you've discovered the plants needed to attempt them. The first level shows one hint; the upgrade shows every available hint, up to 10.";
 
 
     const Details =
@@ -1819,44 +1812,52 @@ function CreateMutationHintsUpgradeCard() {
 
     Details.append(
         CreateShopStat(
-            "Mutation hints",
-            IsOwned
-                ? "Unlocked"
-                : "Locked"
+            "Current",
+            !IsUnlocked
+                ? "Locked"
+                : Level >= MutationHintsMaximumLevel
+                    ? "All hints (max 10)"
+                    : "1 hint at a time"
         ),
         CreateShopStat(
-            "Requirements",
-            "Required plants discovered"
+            "Next",
+            !IsUnlocked
+                ? "1 hint at a time"
+                : IsMaximumLevel
+                    ? "Maximum level"
+                    : "All hints (max 10)"
         )
     );
 
 
-    const BuyButton =
+    const ActionButton =
         document.createElement(
             "button"
         );
 
-    BuyButton.className =
+    ActionButton.className =
         "ActionButton ShopBuyButton";
 
-    BuyButton.type = "button";
+    ActionButton.type = "button";
 
-    if (IsOwned) {
-        BuyButton.textContent =
-            "Purchased";
+    if (Cost === null) {
+        ActionButton.textContent =
+            "Maximum level";
 
-        BuyButton.disabled = true;
+        ActionButton.disabled = true;
     } else {
-        BuyButton.textContent =
-            "Buy - " +
+        ActionButton.textContent =
+            (IsUnlocked
+                ? "Upgrade - "
+                : "Buy - ") +
             Cost.toLocaleString() +
             " Dew";
 
-        BuyButton.disabled =
+        ActionButton.disabled =
             ShopSave.Currency.Dew < Cost ||
             ShopPurchasePending;
 
-        BuyButton.addEventListener(
+        ActionButton.addEventListener(
             "click",
             BuyMutationHintsUpgrade
         );
@@ -1867,7 +1868,7 @@ function CreateMutationHintsUpgradeCard() {
         Header,
         Description,
         Details,
-        BuyButton
+        ActionButton
     );
 
 
@@ -1893,7 +1894,7 @@ function CreateShopSeedCard(
         );
 
     Header.className =
-        "ShopItemHeader";
+        "PanelHeader PanelHeaderInset ShopItemHeader";
 
 
     const Name =
@@ -3028,25 +3029,33 @@ async function BuyGardenEconomyUpgrade() {
 
 
 async function BuyMutationHintsUpgrade() {
-    if (
-        ShopPurchasePending ||
-        HasMutationHintsUpgrade(
-            ShopSave
-        )
-    ) {
+    if (ShopPurchasePending) {
         return;
     }
 
 
+    const IsUnlocked =
+        HasMutationHintsUpgrade(
+            ShopSave
+        );
+
     const Cost =
-        GetMutationHintsUpgradeCost();
+        GetMutationHintsUpgradeCost(
+            ShopSave
+        );
+
+    if (Cost === null) {
+        return;
+    }
 
     if (
         ShopSave.Currency.Dew <
         Cost
     ) {
         SetShopMessage(
-            "You don't have enough Dew for Mutation hints."
+            IsUnlocked
+                ? "You don't have enough Dew to upgrade Mutation hints."
+                : "You don't have enough Dew for Mutation hints."
         );
 
         return;
@@ -3062,16 +3071,27 @@ async function BuyMutationHintsUpgrade() {
         ShopSave.Statistics.CurrencySpent.Dew +=
             Cost;
 
-        UnlockMutationHints(
-            ShopSave
-        );
+        if (IsUnlocked) {
+            UpgradeMutationHints(
+                ShopSave
+            );
 
+            SetShopMessage(
+                "Upgraded Mutation hints for " +
+                Cost.toLocaleString() +
+                " Dew. Up to 10 eligible hints are now shown at once."
+            );
+        } else {
+            UnlockMutationHints(
+                ShopSave
+            );
 
-        SetShopMessage(
-            "Bought Mutation hints for " +
-            Cost.toLocaleString() +
-            " Dew. Eligible hints are now visible in the Mutation encyclopedia."
-        );
+            SetShopMessage(
+                "Bought Mutation hints for " +
+                Cost.toLocaleString() +
+                " Dew. The lowest-ID eligible hint is now visible in the Mutation encyclopedia."
+            );
+        }
 
         RenderShop();
 
diff --git a/Scripts/Garden/Upgrades.js b/Scripts/Garden/Upgrades.js
index e831ca7..610fe8e 100644
--- a/Scripts/Garden/Upgrades.js
+++ b/Scripts/Garden/Upgrades.js
@@ -23,7 +23,10 @@ const GardenExpansionBaseCost = 1000;
 const PlantInformationUpgradeCost = 500;
 const GardenOverviewUpgradeCost = 1000;
 const GardenEconomyUpgradeCost = 1000;
-const MutationHintsUpgradeCost = 1500;
+const MutationHintsUnlockCost = 1500;
+const MutationHintsUpgradeCostMultiplier = 2;
+const MutationHintsMaximumLevel = 1;
+const MutationHintsMaximumVisible = 10;
 const NewGardenBaseCost = 4000;
 const NewGardenCostMultiplier = 1.5;
 
@@ -290,8 +293,73 @@ function HasMutationHintsUpgrade(
 }
 
 
-function GetMutationHintsUpgradeCost() {
-    return MutationHintsUpgradeCost;
+function GetMutationHintsLevel(
+    SaveData
+) {
+    return Math.max(
+        0,
+        Math.min(
+            MutationHintsMaximumLevel,
+            Math.floor(
+                Number(
+                    SaveData
+                        ?.Upgrades
+                        ?.MutationHintsLevel ?? 0
+                ) || 0
+            )
+        )
+    );
+}
+
+
+function GetMutationHintsDisplayLimit(
+    SaveData
+) {
+    if (
+        !HasMutationHintsUpgrade(
+            SaveData
+        )
+    ) {
+        return 0;
+    }
+
+    return GetMutationHintsLevel(
+        SaveData
+    ) >= MutationHintsMaximumLevel
+        ? MutationHintsMaximumVisible
+        : 1;
+}
+
+
+function GetMutationHintsUpgradeCost(
+    SaveData
+) {
+    if (
+        !HasMutationHintsUpgrade(
+            SaveData
+        )
+    ) {
+        return MutationHintsUnlockCost;
+    }
+
+    const Level =
+        GetMutationHintsLevel(
+            SaveData
+        );
+
+    if (
+        Level >= MutationHintsMaximumLevel
+    ) {
+        return null;
+    }
+
+    return Math.round(
+        MutationHintsUnlockCost *
+        Math.pow(
+            MutationHintsUpgradeCostMultiplier,
+            Level + 1
+        )
+    );
 }
 
 
@@ -301,6 +369,37 @@ function UnlockMutationHints(
     SaveData.Upgrades ??= {};
     SaveData.Upgrades.MutationHints =
         true;
+    SaveData.Upgrades.MutationHintsLevel =
+        0;
+}
+
+
+function UpgradeMutationHints(
+    SaveData
+) {
+    if (
+        !HasMutationHintsUpgrade(
+            SaveData
+        )
+    ) {
+        return false;
+    }
+
+    const Level =
+        GetMutationHintsLevel(
+            SaveData
+        );
+
+    if (
+        Level >= MutationHintsMaximumLevel
+    ) {
+        return false;
+    }
+
+    SaveData.Upgrades.MutationHintsLevel =
+        Level + 1;
+
+    return true;
 }
 
 
diff --git a/Styles/Style.css b/Styles/Style.css
index 55e4ec5..f4497d4 100644
--- a/Styles/Style.css
+++ b/Styles/Style.css
@@ -76,6 +76,25 @@ body {
     border: 4px solid var(--Mauve);
 }
 
+.PanelHeader {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: baseline;
+    margin: 0;
+    padding: 0.75rem 1rem;
+    background-color: var(--Surface0);
+    border-bottom: 3px solid var(--Surface2);
+}
+
+.PanelHeaderInset {
+    margin: -0.75rem -0.75rem 0.75rem;
+}
+
+.PanelHeader h2, .PanelHeader h3 {
+    margin: 0;
+}
+
 .StatusPanel {
     margin-bottom: 1.5rem;
     padding: 0.75rem 1rem;
@@ -87,12 +106,6 @@ body {
     padding: 0;
 }
 
-.GardenInfoHeading {
-    margin: 0;
-    padding: 0.75rem 1rem;
-    border-bottom: 3px solid var(--Surface2);
-}
-
 .GardenInfoRow {
     display: grid;
     grid-template-columns: repeat( 2, minmax(0, 1fr) );
@@ -440,16 +453,8 @@ input, button, textarea, select {
 }
 
 .GardenQuickBuyHeader {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 0.75rem;
-}
-
-.GardenQuickBuyHeader h2 {
-    margin: 0;
 }
 
 .QuickBuyAmountList {
@@ -575,12 +580,6 @@ input, button, textarea, select {
     padding: 0.75rem;
 }
 
-.GardenToolsPanel h2,
-.GardenInventoryPanel h2,
-.GardenPlotsPanel h2 {
-    margin-bottom: 0.75rem;
-}
-
 .GardenToolsPanel .ToolList,
 .GardenInventoryPanel .SeedList {
     flex-direction: row;
@@ -798,11 +797,7 @@ input, button, textarea, select {
 
 .GardenUser, .Leaderboard {
     margin-top: 1.5rem;
-    padding: 1rem;
-}
-
-.GardenUser h2, .Leaderboard h2 {
-    margin-bottom: 1rem;
+    padding: 0.75rem;
 }
 
 .GardenUser input, .GardenUser button {
@@ -959,14 +954,10 @@ input, button, textarea, select {
 
 .ProfileSection {
     margin-top: 1.5rem;
-    padding: 1rem;
+    padding: 0.75rem;
 }
 
-.ProfileSection h2 {
-    margin-bottom: 1rem;
-}
-
-.ProfileSection h3 {
+.ProfileSection h3:not(.PanelHeader) {
     margin-top: 1.5rem;
 }
 
@@ -1334,16 +1325,11 @@ input, button, textarea, select {
 }
 
 .ShopItemHeader {
-    display: flex;
-    flex-wrap: wrap;
     gap: 0.5rem;
-    align-items: baseline;
-    padding-bottom: 0.5rem;
-    border-bottom: 3px solid var(--Surface2);
 }
 
-.ShopItemHeader h3 {
-    margin: 0;
+.ShopItem > .PanelHeaderInset {
+    margin-bottom: 0;
 }
 
 .ShopItemHeaderOwned {
@@ -1556,33 +1542,26 @@ input, button, textarea, select {
 
 /* * Plant encyclopedia */
 
-.PlantEncyclopediaList {
+.PlantEncyclopediaList,
+.MutationEncyclopediaList {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     margin-top: 0;
 }
 
-.PlantEncyclopediaCard {
+.PlantEncyclopediaCard,
+.MutationEncyclopediaCard {
     overflow: hidden;
     box-shadow: 3px 3px 0 var(--Crust);
 }
 
-.PlantEncyclopediaHeader {
-    display: flex;
-    gap: 0.75rem;
-    align-items: baseline;
-    padding: 0.75rem 1rem;
-    background-color: var(--Surface0);
-    border-bottom: 3px solid var(--Surface2);
-}
-
 .PlantEncyclopediaHeader h2 {
-    margin: 0;
     color: var(--Green);
 }
 
-.PlantEncyclopediaNumber {
+.PlantEncyclopediaNumber,
+.MutationEncyclopediaNumber {
     flex: 0 0 auto;
     color: var(--Overlay2);
     font-size: 1.1rem;
@@ -1614,7 +1593,8 @@ input, button, textarea, select {
     margin-bottom: 0.75rem;
 }
 
-.PlantEncyclopediaStat {
+.PlantEncyclopediaStat,
+.MutationEncyclopediaStat {
     display: flex;
     justify-content: space-between;
     gap: 0.75rem;
@@ -1626,12 +1606,14 @@ input, button, textarea, select {
     border-bottom: 0;
 }
 
-.PlantEncyclopediaStatName {
+.PlantEncyclopediaStatName,
+.MutationEncyclopediaStatName {
     flex: 0 0 auto;
     color: var(--Subtext1);
 }
 
-.PlantEncyclopediaStat > :last-child {
+.PlantEncyclopediaStat > :last-child,
+.MutationEncyclopediaStat > :last-child {
     min-width: 0;
     text-align: right;
     overflow-wrap: anywhere;
@@ -1651,12 +1633,7 @@ input, button, textarea, select {
     border-top: 3px solid var(--Surface2);
 }
 
-.PlantEncyclopediaRelationGroup h3 {
-    margin-bottom: 0.5rem;
-    color: var(--Peach);
-    font-size: 1rem;
-}
-
+.PlantEncyclopediaRelationGroup h3,
 .PlantEncyclopediaRelationList {
     max-height: 7rem;
     margin: 0;
@@ -1664,15 +1641,20 @@ input, button, textarea, select {
     overflow-y: auto;
 }
 
-.PlantEncyclopediaRelationList li {
+.PlantEncyclopediaRelationList li,
+.MutationEncyclopediaRelationList li {
     margin-bottom: 0.35rem;
 }
 
-.PlantEncyclopediaRelationList li:last-child {
+.PlantEncyclopediaRelationList li:last-child,
+.MutationEncyclopediaRelationList li:last-child {
     margin-bottom: 0;
 }
 
-.PlantEncyclopediaRelationUnknown, .PlantEncyclopediaRelationEmpty {
+.PlantEncyclopediaRelationUnknown,
+.PlantEncyclopediaRelationEmpty,
+.MutationEncyclopediaRelationUnknown,
+.MutationEncyclopediaRelationEmpty {
     color: var(--Overlay1);
 }
 
@@ -1688,11 +1670,13 @@ input, button, textarea, select {
         justify-self: center;
     }
 
-    .PlantEncyclopediaStat > :last-child {
+    .PlantEncyclopediaStat > :last-child,
+    .MutationEncyclopediaStat > :last-child {
         text-align: left;
     }
 
-    .PlantEncyclopediaStat {
+    .PlantEncyclopediaStat,
+    .MutationEncyclopediaStat {
         flex-direction: column;
         gap: 0.2rem;
     }
@@ -1700,38 +1684,10 @@ input, button, textarea, select {
 
 /* * Mutation encyclopedia */
 
-.MutationEncyclopediaList {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    margin-top: 0;
-}
-
-.MutationEncyclopediaCard {
-    overflow: hidden;
-    box-shadow: 3px 3px 0 var(--Crust);
-}
-
-.MutationEncyclopediaHeader {
-    display: flex;
-    gap: 0.75rem;
-    align-items: baseline;
-    padding: 0.75rem 1rem;
-    background-color: var(--Surface0);
-    border-bottom: 3px solid var(--Surface2);
-}
-
 .MutationEncyclopediaHeader h2 {
-    margin: 0;
     color: var(--Mauve);
 }
 
-.MutationEncyclopediaNumber {
-    flex: 0 0 auto;
-    color: var(--Overlay2);
-    font-size: 1.1rem;
-}
-
 .MutationEncyclopediaBody {
     padding: 1rem;
 }
@@ -1753,6 +1709,17 @@ input, button, textarea, select {
     color: var(--Subtext1);
 }
 
+.MutationHintList {
+    margin: 0;
+    padding: 0;
+    color: var(--Subtext1);
+    list-style: none;
+}
+
+.MutationHintList li + li {
+    margin-top: 0.35rem;
+}
+
 .MutationEncyclopediaStats {
     display: grid;
     grid-template-columns: repeat( 2, minmax(0, 1fr) );
@@ -1760,24 +1727,6 @@ input, button, textarea, select {
     margin-bottom: 1.25rem;
 }
 
-.MutationEncyclopediaStat {
-    display: flex;
-    justify-content: space-between;
-    gap: 0.75rem;
-    padding: 0.35rem 0;
-    border-bottom: 2px solid var(--Surface0);
-}
-
-.MutationEncyclopediaStatName {
-    flex: 0 0 auto;
-    color: var(--Subtext1);
-}
-
-.MutationEncyclopediaStat > :last-child {
-    min-width: 0;
-    text-align: right;
-    overflow-wrap: anywhere;
-}
 
 .MutationEncyclopediaRecipeSection {
     margin-bottom: 1.25rem;
@@ -1876,18 +1825,6 @@ input, button, textarea, select {
     padding-left: 1.25rem;
 }
 
-.MutationEncyclopediaRelationList li {
-    margin-bottom: 0.35rem;
-}
-
-.MutationEncyclopediaRelationList li:last-child {
-    margin-bottom: 0;
-}
-
-.MutationEncyclopediaRelationUnknown, .MutationEncyclopediaRelationEmpty {
-    color: var(--Overlay1);
-}
-
 @media (max-width: 700px) {
     .MutationEncyclopediaStats, .MutationEncyclopediaRelations {
         grid-template-columns: 1fr;
@@ -1902,14 +1839,6 @@ input, button, textarea, select {
         transform: rotate(90deg);
     }
 
-    .MutationEncyclopediaStat {
-        flex-direction: column;
-        gap: 0.2rem;
-    }
-
-    .MutationEncyclopediaStat > :last-child {
-        text-align: left;
-    }
 }
 
 /* * Admin editors */