Fixes for UI Tour

public/index.css

@@ -2411,32 +2411,44 @@ svg.button {
 
 #tourPromptButton {
   position: fixed;
-  bottom: 87px;
-  right: 26px;
-  width: 56px;
-  height: 56px;
+  bottom: 100px;
+  right: 36px;
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
+  background-color: var(--bg-main);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   user-select: none;
   animation: fadeIn 1s ease-in;
-  transform: scale(0.65);
-  opacity: var(--bg-opacity);
   z-index: 9999;
-  overflow: hidden;
 }
 
-#tourPromptButton img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+#tourPromptButton button {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+#tourPromptButton svg path {
+  fill: #000000;
+  stroke: none;
 }
 
 #tourPromptButton:hover {
-  transform: scale(0.7);
-  opacity: 1;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
+}
+
+#tourPromptButton:hover svg path {
+  fill: none;
+  stroke: #000000;
+  stroke-width: 5;
+  stroke-linejoin: round;
 }
 
 @media print {
@@ -2465,60 +2477,35 @@ svg.button {
     background: #25252a;
   }
 }
-.driver-popover {
-  background-color: #1a1a2e;
-  border: 1px solid #4a4a6a;
-  color: #c8c8d0;
-  font-family: Georgia, serif;
+.fmg-tour.driver-popover {
   border-radius: 4px;
 }
 
-.driver-popover-title {
-  color: #e8d5a3;
+.fmg-tour .driver-popover-title {
   font-size: 1.1em;
-  border-bottom: 1px solid #4a4a6a;
+  border-bottom: 1px solid;
   padding-bottom: 0.4em;
   margin-bottom: 0.5em;
 }
 
-.driver-popover-description {
+.fmg-tour .driver-popover-description {
   font-size: 0.9em;
   line-height: 1.5;
 }
 
-.driver-popover-footer button {
-  background-color: #3a3a5c;
-  border: 1px solid #5a5a7a;
-  color: #c8c8d0;
+.fmg-tour .driver-popover-footer button {
   border-radius: 3px;
   cursor: pointer;
 }
 
-.driver-popover-footer button:hover {
-  background-color: #4a4a6c;
+.fmg-tour .driver-popover-footer button:hover {
+  background-color: #e0e0e0;
 }
 
-.driver-popover-progress-text {
-  color: #8a8aaa;
+.fmg-tour .driver-popover-progress-text {
   font-size: 0.8em;
 }
 
-.driver-popover-arrow-side-left.driver-popover-arrow {
-  border-left-color: #4a4a6a;
-}
-
-.driver-popover-arrow-side-right.driver-popover-arrow {
-  border-right-color: #4a4a6a;
-}
-
-.driver-popover-arrow-side-top.driver-popover-arrow {
-  border-top-color: #4a4a6a;
-}
-
-.driver-popover-arrow-side-bottom.driver-popover-arrow {
-  border-bottom-color: #4a4a6a;
-}
-
 /* Tooltip demo step: hide overlay and restore all pointer events so the map is fully hoverable */
 body.tour-free-roam .driver-overlay {
   opacity: 0 !important;

src/index.html

@@ -8636,7 +8636,11 @@
     <script defer src="modules/io/cloud.js?v=1.114.0"></script>
     <script defer src="modules/io/export.js?v=1.120.5"></script>
   <div id="tourPromptButton" style="display:none" data-tip="Take an interactive tour of the map generator">
-    <img src="images/tour-button-icon.png" alt="Take a tour" />
+    <button type="button" aria-label="Launch UI Tour">
+      <svg preserveAspectRatio="xMidYMid" viewBox="0 0 58 52" height="30px" width="30px">
+        <path d="M20 10 L20 42 L42 26 Z"/>
+      </svg>
+    </button>
   </div>
   </body>
 </html>

src/modules/ui-tour.ts

@@ -1,5 +1,6 @@
 import { driver } from "driver.js";
 import "driver.js/dist/driver.css";
+
 const byId = (id: string) => document.getElementById(id);
 
 function clickTab(tabId: string) {
@@ -41,7 +42,32 @@ function start() {
   const tour = driver({
     showProgress: true,
     allowClose: true,
+    popoverClass: "fmg-tour",
+    overlayColor: "rgb(0,0,0)",
+    overlayOpacity: 0.75,
+    stagePadding: 4,
+    stageRadius: 4,
+    onPopoverRender: (popover) => {
+      Object.assign(popover.wrapper.style, {
+        backgroundColor: "#ffffff",
+        color: "#000000",
+        border: "1px solid #cccccc",
+        fontFamily: "Georgia, serif",
+      });
+      popover.title.style.color = "#000000";
+      popover.title.style.borderBottomColor = "#cccccc";
+      popover.progress.style.color = "#666666";
+      popover.closeButton.style.color = "#000000";
+      for (const btn of [popover.previousButton, popover.nextButton]) {
+        Object.assign(btn.style, {
+          backgroundColor: "#f0f0f0",
+          border: "1px solid #cccccc",
+          color: "#000000",
+        });
+      }
+    },
     onDestroyStarted: () => {
+      document.removeEventListener("keydown", handleKeydown);
       hideHeightmapCustomizationPanel();
       closeDialogs();
       tour.destroy();
@@ -72,6 +98,9 @@ function start() {
       },
       {
         element: "#tooltip",
+        onHighlightStarted: () => {
+          document.body.classList.add("tour-free-roam");
+        },
         popover: {
           title: "Hover Tooltips",
           description:
@@ -84,6 +113,7 @@ function start() {
         element: "#optionsTrigger",
         onHighlightStarted: () => {
           document.body.classList.remove("tour-free-roam");
+          closeOptionsPanel();
         },
         popover: {
           title: "Open the Options Menu",
@@ -201,6 +231,7 @@ function start() {
       {
         element: "#configureWorld",
         onHighlightStarted: () => {
+          closeDialogs();
           clickTab("optionsTab");
         },
         popover: {
@@ -209,14 +240,16 @@ function start() {
             "This button opens the World Configurator where you can set the map's position on the globe, adjust equatorial and polar temperatures, and configure precipitation to shape the world's climate.",
           side: "right",
           onNextClick: () => {
-            editWorld();
             tour.moveNext();
           },
         },
       },
       {
         element: "#worldConfigurator",
         disableActiveInteraction: false,
+        onHighlightStarted: () => {
+          editWorld();
+        },
         popover: {
           title: "World Configurator",
           description:
@@ -254,14 +287,16 @@ function start() {
             "Open the Heightmap editor to manually sculpt terrain by raising or lowering elevation. Changes here reshape coastlines, rivers, and biomes.",
           side: "right",
           onNextClick: () => {
-            showHeightmapCustomizationPanel();
             tour.moveNext();
           },
         },
       },
       {
         element: "#customizationMenu",
         disableActiveInteraction: false,
+        onHighlightStarted: () => {
+          showHeightmapCustomizationPanel();
+        },
         onDeselected: () => {
           hideHeightmapCustomizationPanel();
         },
@@ -302,20 +337,25 @@ function start() {
       // ── Export / Save / Load ─────────────────────────────────────────────────
       {
         element: "#exportButton",
+        onHighlightStarted: () => {
+          closeDialogs();
+        },
         popover: {
           title: "Export",
           description:
             "Click Export to open the export dialog where you can download the map as an SVG, PNG, or JPEG image, split it into tiles, or export the world data as JSON.",
           side: "top",
           onNextClick: () => {
-            showExportPane();
             tour.moveNext();
           },
         },
       },
       {
         element: "#exportMapData",
         disableActiveInteraction: false,
+        onHighlightStarted: () => {
+          showExportPane();
+        },
         popover: {
           title: "Export Options",
           description:
@@ -343,6 +383,28 @@ function start() {
     ],
   });
 
+  function isEditableTarget(target: EventTarget | null): boolean {
+    if (!(target instanceof HTMLElement)) return false;
+    if (target.isContentEditable) return true;
+    return !!target.closest(
+      "input, textarea, select, [contenteditable], [contenteditable='plaintext-only']",
+    );
+  }
+
+  function handleKeydown(e: KeyboardEvent): void {
+    if (!tour.isActive() || isEditableTarget(e.target)) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      e.stopPropagation();
+      document.querySelector<HTMLElement>(".driver-popover-next-btn")?.click();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      e.stopPropagation();
+      document.querySelector<HTMLElement>(".driver-popover-prev-btn")?.click();
+    }
+  }
+
+  document.addEventListener("keydown", handleKeydown);
   tour.drive();
 }