Add the Johto and Kanto atlas to the Map tab

The Map tab draws the region's Town Map from the ROM with the player's
landmark, the visited flypoints as Fly destinations and the landmarks
whose maps are ported. Kanto opens with the Fly map's Indigo Plateau
rule. Landmark positions and flypoints are compared with the pinned
PRET source.

Closes #36

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/ui/styles.css

@@ -917,9 +917,16 @@ dialog h2 {
 .replace-rom .menu-button {
   width: fit-content;
 }
+.map-panel-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  align-items: start;
+  gap: 16px;
+  margin-top: 16px;
+}
 .world-map-frame {
   min-height: 180px;
-  height: calc(100% - 100px);
+  height: 100%;
   display: grid;
   place-items: center;
   margin-top: 16px;
@@ -942,6 +949,85 @@ dialog h2 {
   text-align: center;
   color: #5f6763;
 }
+/* The region atlas: the ROM's Town Map with flypoints and the player. */
+.atlas {
+  display: grid;
+  gap: 10px;
+  padding: 10px;
+  background: var(--cream);
+  border: 4px double var(--ink);
+}
+.atlas-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.atlas-header h3,
+.atlas h4 {
+  margin: 0;
+  font-size: 0.85rem;
+  letter-spacing: 0.08em;
+}
+.atlas-regions {
+  display: flex;
+  gap: 6px;
+}
+.atlas-regions button {
+  min-height: 32px;
+  padding: 2px 10px;
+  font: inherit;
+  color: var(--ink);
+  background: var(--cream-dark);
+  border: 2px solid var(--ink);
+}
+.atlas-regions button[aria-pressed="true"] {
+  color: #fff;
+  background: var(--blue);
+}
+#atlas-map {
+  justify-self: center;
+  width: min(100%, 480px);
+  height: auto;
+  image-rendering: pixelated;
+}
+.atlas-here {
+  margin: 0;
+}
+.atlas-lists {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 10px;
+}
+.atlas ul {
+  margin: 4px 0 0;
+  padding-left: 1.2em;
+}
+.atlas-legend {
+  margin: 0;
+  font-size: 12px;
+  color: #5f6763;
+}
+.atlas-legend span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-left: 8px;
+  vertical-align: middle;
+}
+.legend-player {
+  background: #b32628;
+}
+.legend-visited {
+  background: var(--blue);
+  border-radius: 50%;
+}
+@media (max-width: 900px) {
+  .map-panel-body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
 .planned-panel {
   max-width: none;
 }