Render surface maps directly and preserve their quality

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import "./globals.css";
 import "./block-theme.css";
 import "./account.css";
+import "./map-theme.css";
 export const metadata: Metadata = {
   title: {
     default: "MineGeo — Get lost in a familiar world",

app/map-theme.css

@@ -0,0 +1,119 @@
+/* The same parchment surrounds the editor preview and interactive player map. */
+.detail-map,
+.map-surface {
+  border: 22px solid transparent;
+  border-image: url("/images/map-parchment.svg") 12 fill / 22px / 0 stretch;
+  background: #ddc79f;
+  box-shadow: 4px 6px 0 #0005;
+}
+.detail-map {
+  margin-top: 12px;
+}
+.detail-map img,
+.map-surface .leaflet-image-layer {
+  image-rendering: pixelated;
+}
+.map-surface {
+  border-width: 14px;
+  border-image-width: 14px;
+  height: 290px;
+}
+.map-surface .leaflet-container {
+  background: #ddc79f;
+  outline: 1px solid #9d815c;
+}
+.map-surface .leaflet-bar {
+  border: 2px solid #806543;
+  border-radius: 0;
+  box-shadow: 2px 2px 0 #0004;
+}
+.map-surface .leaflet-bar a {
+  background: #e5c99a;
+  color: #493a28;
+  border-color: #b39970;
+  border-radius: 0;
+}
+.map-surface .leaflet-bar a:hover,
+.map-surface .leaflet-bar a:focus-visible {
+  background: #f3ddb1;
+}
+.map-surface .leaflet-bar a.leaflet-disabled {
+  background: #c9b18a;
+  color: #847256;
+}
+.pin-marker {
+  background: #e45e66;
+  border-color: #fff1d0;
+  border-radius: 50%;
+  transform: none;
+  box-shadow:
+    0 0 0 1px #763d36,
+    1px 2px 0 #0005;
+}
+.actual-marker {
+  background: #90c55b;
+  box-shadow:
+    0 0 0 1px #426132,
+    1px 2px 0 #0005;
+}
+.game-map {
+  width: 340px;
+  border: 2px solid #806543;
+  background: #241e18;
+}
+.game-map.expanded {
+  width: min(650px, calc(100vw - 48px));
+}
+.map-topline,
+.map-topline button,
+.map-actions small {
+  color: #e5c99a;
+}
+.map-topline {
+  padding: 9px 12px;
+}
+.map-actions {
+  padding: 12px;
+}
+.map-actions .button.primary {
+  background: #715034;
+  color: #fff1d0;
+  border-color: #af8956;
+  box-shadow:
+    inset 3px 3px 0 #a67c4e,
+    inset -3px -3px 0 #49331f,
+    2px 2px 0 #0005;
+}
+.map-actions .button.primary:hover:not(:disabled) {
+  background: #87613e;
+}
+.expanded .map-surface {
+  height: min(540px, 58vh);
+  border-width: 22px;
+  border-image-width: 22px;
+}
+.result-map {
+  border: 0;
+}
+@media (max-width: 600px) {
+  .detail-map {
+    border-width: 16px;
+    border-image-width: 16px;
+  }
+  .game-map {
+    width: 250px;
+  }
+  .game-map .map-surface {
+    height: 210px;
+    border-width: 12px;
+    border-image-width: 12px;
+  }
+  .game-map.expanded {
+    width: calc(100vw - 28px);
+  }
+  .game-map.expanded .map-surface {
+    height: min(440px, 50vh);
+    border-width: 16px;
+    border-image-width: 16px;
+  }
+}