Improve MineGeo exploration and mapping features

app/globals.css

@@ -1457,32 +1457,173 @@ pre {
 }
 /* Contributor and moderator previews use the same projection as the game. */
 .panorama-preview {
-  width: min(1100px, 96vw);
-  max-width: 96vw;
-  padding: 16px;
-  background: #0b1119;
-  color: #edf2ef;
-  border: 1px solid #58684b;
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  width: min(1180px, calc(100vw - 64px));
+  height: min(820px, calc(100dvh - 64px));
+  max-width: none;
+  max-height: calc(100dvh - 32px);
+  padding: 0;
+  overflow: hidden;
+  background: var(--panel);
+  color: var(--text);
+  border: 1px solid #455663;
+  box-shadow: 0 30px 100px #0009;
+}
+.panorama-preview[open] {
+  display: flex;
+  flex-direction: column;
+}
+.panorama-preview.is-expanded {
+  width: calc(100vw - 24px);
+  height: calc(100dvh - 24px);
+  max-height: none;
 }
 .panorama-preview::backdrop {
-  background: #000b;
+  background: #03070edb;
+  backdrop-filter: blur(6px);
+}
+.preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--line);
+  flex: none;
+}
+.preview-header h2 {
+  font-size: 34px;
+  line-height: 1;
+  margin: 5px 0 0;
+}
+.preview-header .eyebrow {
+  font-size: 10px;
+}
+.preview-header-actions,
+.preview-navigation {
+  display: flex;
+  gap: 8px;
+}
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  flex: none;
+  border: 1px solid #40505d;
+  background: #1b2834;
+  color: var(--text);
+  cursor: pointer;
+  border-radius: 4px;
+}
+.icon-button:hover {
+  background: #2b3d4a;
+}
+.icon-button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+:where(button, a, input, textarea, select):focus-visible {
+  outline: 2px solid var(--green);
+  outline-offset: 4px;
+}
+.preview-location {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--muted);
+}
+.preview-counter {
+  margin-left: auto;
+  color: var(--muted);
+  font: 12px monospace;
+  white-space: nowrap;
+}
+.preview-footer {
+  padding: 15px 24px;
+  color: var(--muted);
+  font-size: 12px;
+  display: flex;
+  gap: 18px;
+  justify-content: space-between;
+  flex: none;
+}
+.preview-footer span:first-child {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.preview-viewport .panorama-controls {
+  right: 18px;
+  bottom: 18px;
+}
+.preview-viewport .panorama-controls button {
+  width: 42px;
+  height: 42px;
+  background: #0d1724e8;
+}
+.preview-viewport .panorama {
+  cursor: grab;
+}
+.preview-viewport .panorama:active {
+  cursor: grabbing;
+}
+.preview-status {
+  margin: 0;
+  text-align: center;
+}
+@media (max-width: 700px) {
+  .panorama-preview {
+    width: calc(100vw - 20px);
+    height: calc(100dvh - 20px);
+    max-height: none;
+  }
+  .preview-header {
+    padding: 16px;
+  }
+  .preview-header h2 {
+    font-size: 28px;
+  }
+  .preview-footer {
+    padding: 12px 16px;
+    flex-direction: column;
+    gap: 5px;
+    font-size: 11px;
+  }
+  .preview-location {
+    flex: 1;
+  }
+  .preview-location > span {
+    display: none;
+  }
 }
 .preview-toolbar {
   display: flex;
   align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-  margin-bottom: 12px;
+  gap: 14px;
+  padding: 12px 24px;
+  flex: none;
 }
 .preview-toolbar select {
   background: #141e27;
-  color: inherit;
-  padding: 8px;
+  color: var(--text);
+  border: 1px solid #40505d;
+  border-radius: 4px;
+  padding: 10px 12px;
+  max-width: 300px;
+  min-width: 0;
+  width: 100%;
 }
 .preview-viewport {
   position: relative;
-  height: min(65vh, 650px);
+  flex: 1;
+  min-height: 140px;
   overflow: hidden;
+  background: #080f18;
 }
 .preview-status {
   position: absolute;