Enhance map rendering with WebP support and loading feedback

- Update tile rendering to support both PNG and WebP formats.
- Introduce a loading spinner and progress bar for build feedback.
- Remove the manual build button; builds now trigger automatically on map selection.
- Add a phase plan document outlining future improvements and goals.

map_renderer/src/public/app.css

@@ -2,6 +2,7 @@
   color-scheme: light dark;
   --bg: #f1ead6;
   --panel: rgba(255, 248, 232, 0.92);
+  --card: rgba(255, 255, 255, 0.58);
   --panel-border: rgba(94, 73, 37, 0.25);
   --ink: #2d2212;
   --muted: #6e5a37;
@@ -17,6 +18,7 @@
   :root {
     --bg: #12161d;
     --panel: rgba(22, 28, 38, 0.92);
+    --card: rgba(28, 35, 46, 0.96);
     --panel-border: rgba(166, 187, 211, 0.16);
     --ink: #edf2fa;
     --muted: #aab8cc;
@@ -79,7 +81,6 @@ label {
 }
 
 select,
-button,
 .action-link {
   width: 100%;
   border-radius: 12px;
@@ -88,7 +89,6 @@ button,
   font: inherit;
 }
 
-button,
 .action-link {
   cursor: pointer;
   color: white;
@@ -97,7 +97,6 @@ button,
   text-align: center;
 }
 
-button:disabled,
 select:disabled,
 .action-link.is-disabled {
   cursor: not-allowed;
@@ -115,7 +114,7 @@ select:disabled,
 .meta-panel {
   padding: 12px 14px;
   border-radius: 14px;
-  background: rgba(255, 255, 255, 0.58);
+  background: var(--card);
   border: 1px solid rgba(65, 48, 21, 0.08);
   overflow-wrap: anywhere;
 }
@@ -147,7 +146,47 @@ select:disabled,
 }
 
 .status {
-  min-height: 72px;
+  min-height: 92px;
+}
+
+.status-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.status-text {
+  min-height: 24px;
+}
+
+.spinner {
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-top-color: var(--accent);
+  animation: spin 0.8s linear infinite;
+  flex: 0 0 auto;
+}
+
+.progress-wrap {
+  margin-top: 12px;
+}
+
+.progress-track {
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.progress-fill {
+  height: 100%;
+  width: 0%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
+  transition: width 180ms ease;
 }
 
 .meta-panel {
@@ -202,12 +241,7 @@ select:disabled,
   height: calc(100vh - 36px);
   overflow: hidden;
   border-radius: 24px;
-  background:
-    linear-gradient(0deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03)),
-    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
-    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
-    var(--viewport);
-  background-size: auto, 32px 32px, 32px 32px, auto;
+  background: radial-gradient(circle at top left, rgba(255,255,255,0.04), transparent 26%), var(--viewport);
   box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), var(--shadow);
   touch-action: none;
   cursor: grab;
@@ -231,10 +265,19 @@ select:disabled,
   position: absolute;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
-  border: 1px solid var(--tile-border);
   pointer-events: none;
 }
 
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .viewport.is-dragging {
   cursor: grabbing;
 }
@@ -262,6 +305,10 @@ select:disabled,
   text-align: center;
 }
 
+.empty-state.is-hidden {
+  display: none;
+}
+
 @media (max-width: 900px) {
   .shell {
     grid-template-columns: 1fr;