added settings menu that saves and reads to/from the browser localStorage

minor design changes

public/style.css

@@ -80,6 +80,7 @@ body, html {
 
 .square.highlight {
   border: 1px solid purple; /* highlight color when hovered over in sidebar */
+  background-color: purple;
 }
 
 .square.highlight-update {
@@ -128,7 +129,7 @@ body, html {
   cursor: grab;
   margin-bottom: 10px;
   padding: 5px 10px;
-  border: 1px solid white; /* cells inside sidebar border color */
+  border: 1px solid rgba(255, 255, 255, 0.5); /* cells inside sidebar border color */
   border-radius: 4px;
   user-select: none;
   color: white;
@@ -271,5 +272,193 @@ body, html {
 #delete-fruit-popup {
   /* see JS for inline styles, but you can add more here if needed */
   box-shadow: 0 4px 32px #000b;
-  z-index: 2000;
+}
+
+/* Settings button in top right of map */
+.settings-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 101;
+  background: rgba(30,30,30,0.95);
+  border: 1px solid #d103f9;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #d103f9;
+  font-size: 1.5rem;
+  cursor: pointer;
+  box-shadow: 0 2px 8px #0007;
+  transition: background 0.2s, border-color 0.2s;
+}
+.settings-btn:hover {
+  background: #2a003a;
+  border-color: #fff;
+}
+
+/* Settings menu styles */
+.settings-menu {
+  position: absolute;
+  top: 70px;
+  right: 16px;
+  z-index: 102;
+  background: #181818;
+  border: 1px solid #d103f9;
+  border-radius: 10px;
+  box-shadow: 0 4px 32px #000b;
+  padding: 0;
+  color: white;
+  animation: fadeInSettings 0.2s;
+}
+@keyframes fadeInSettings {
+  from { opacity: 0; transform: translateY(-10px);}
+  to   { opacity: 1; transform: translateY(0);}
+}
+.settings-menu-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px 10px 18px;
+  border-bottom: 1px solid #333;
+  font-size: 1.1em;
+  font-weight: bold;
+  color: #d103f9;
+}
+.close-settings-btn {
+  background: none;
+  border: none;
+  color: #d103f9;
+  font-size: 1.2em;
+  cursor: pointer;
+  padding: 0 4px;
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+.close-settings-btn:hover {
+  background: #2a003a;
+}
+.settings-menu-content {
+  padding: 20px;
+  padding-bottom: 0px;
+  color: white;
+  font-size: 1em;
+}
+
+/* Square Style toggle button */
+#squareStyleToggle {
+  padding: 6px 18px;
+  border-radius: 6px;
+  border: 1.5px solid #d103f9;
+  background: #191919;
+  color: #d103f9;
+  font-weight: bold;
+  font-size: 1em;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  outline: none;
+}
+#squareStyleToggle.toggle-filled {
+  background: #d103f9;
+  color: white;
+  border-color: #d103f9;
+}
+#squareStyleToggle.toggle-outline {
+  background: #191919;
+  color: #d103f9;
+  border-color: #d103f9;
+}
+#squareStyleToggle:hover {
+  background: #2a003a;
+  color: white;
+}
+
+/* Filled/Outline toggle logic */
+body[data-square-style="filled"] .square.highlight {
+  border: 1px solid purple;
+  background-color: purple;
+}
+body[data-square-style="filled"] .square.highlight-update {
+  border: 1px solid purple;
+  box-shadow: 0 0 10px 2px purple;
+}
+body[data-square-style="outline"] .square.highlight {
+  border: 1px solid #d103f9;
+  background-color: transparent !important;
+}
+body[data-square-style="outline"] .square.highlight-update {
+  border: 1px solid #d103f9;
+  background-color: transparent !important;
+  box-shadow: 0 0 10px 2px #d103f9;
+}
+
+/* Responsive adjustments for mobile */
+@media (max-width: 900px) {
+  .container {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0;
+  }
+  .sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 80vw;
+    max-width: 350px;
+    height: 100vh;
+    z-index: 1001;
+    background: #181818;
+    transform: translateX(-100%);
+    transition: transform 0.3s;
+    box-shadow: 2px 0 16px #000a;
+    margin: 0;
+  }
+  .sidebar.open {
+    transform: translateX(0);
+  }
+  .map-wrapper {
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+  }
+  #zoomControls {
+    right: 10px;
+    bottom: 10px;
+  }
+}
+
+/* Make squares and map responsive */
+@media (max-width: 900px) {
+  .map-row > .square,
+  .map-row > .empty {
+    width: 13vw;
+    height: 13vw;
+    min-width: 48px;
+    min-height: 48px;
+    max-width: 80px;
+    max-height: 80px;
+  }
+  .square {
+    font-size: 1em;
+  }
+}
+
+/* Touch-friendly buttons and inputs */
+button, input, .fruit, .clear-btn {
+  touch-action: manipulation;
+}
+
+.clear-btn {
+  width: 28px;
+  height: 28px;
+  font-size: 18px;
+}
+
+/* Make popup and overlays scrollable on mobile */
+#delete-fruit-popup, .settings-menu {
+  max-width: 95vw;
+  box-sizing: border-box;
+  word-break: break-word;
 }