/* ---------- the region map (town.js: SCREENS.map) ----------
 * Drawn like a Pokémon game's Town Map. The map itself keeps its own colours (it's a picture),
 * so it reads the same in every look; the panel beside it takes the look's own text colours.
 * Wide: the map, and what's at the picked place beside it. Narrow (a phone): one under the other.
 */
.worldwin .box.rm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 260px); gap: 16px; align-items: start; }
@media (max-width: 760px) { .worldwin .box.rm { grid-template-columns: minmax(0, 1fr); } }
.rm .rm-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; align-items: center; }
/* As big as fits the window (town.js sets the width: never taller than the screen leaves room for). */
.rm .rm-stage { position: relative; width: 100%; max-width: 100%; margin-inline: auto; border-radius: 12px; overflow: hidden;
  background: #4c8cdc; box-shadow: 0 0 0 3px #26262e, 0 0 0 6px #f4f1e4, 0 0 0 8px #26262e; margin-top: 8px; }
.rm .rm-stage canvas { display: block; width: 100%; height: auto; image-rendering: auto; border-radius: 0; box-shadow: none; max-height: none; min-height: 0; }
.rm .rm-hits { position: absolute; inset: 0; }
.worldwin .rm .rm-hit { position: absolute; display: block; margin: 0; padding: 0; min-width: 0; min-height: 0; background: transparent; border: 0; border-radius: 8px; box-shadow: none; cursor: pointer; border-image: none; }
.worldwin .rm .rm-hit:hover { background: rgba(255, 255, 255, .14); }

/* You: a red ring that pulses out from where you stand. */
.rm .rm-you { --rmz: 18px; position: absolute; width: var(--rmz); height: var(--rmz); margin: calc(var(--rmz) / -2) 0 0 calc(var(--rmz) / -2); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, #e8352c 24% 58%, #fff 60% 72%, #26262e 74%); pointer-events: none; z-index: 1; }
.rm .rm-you::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 3px solid #ff5a4e; animation: rmpulse 1.4s ease-out infinite; }
@keyframes rmpulse { from { transform: scale(1); opacity: .95; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rm .rm-you::before { animation: none; transform: scale(1.6); opacity: .6; } }

/* Beside the map: what's at the picked place, and what the symbols mean. Small print in every look. */
.rm .rm-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* (strong enough to beat Black and White's one-size text, which would make this panel huge) */
:root .worldwin.game .box.rm > .rm-side { font-size: max(11px, calc(15px * var(--fz, 1))); line-height: 1.4; }
:root.bw .worldwin.game .box.rm > .rm-side { font-size: clamp(13px, var(--ts, 15px), 17px); line-height: 1.35; }
:root .worldwin.game .box.rm > .rm-side :is(.small, small), :root.bw .worldwin.game .box.rm > .rm-side :is(.small, small) { font-size: inherit !important; line-height: inherit !important; }
:root .worldwin.game .box.rm .rm-name { font-size: max(14px, calc(20px * var(--fz, 1))); line-height: 1.2; }
:root.bw .worldwin.game .box.rm .rm-name { font-size: clamp(16px, var(--t, 20px), 22px); }
/* What the symbols mean. */
.rm .rm-legend { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 14px; font-size: max(12px, .92em); color: var(--muted, inherit); }
.rm .rm-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rm .rm-legend i { display: inline-block; width: 12px; height: 12px; border: 2px solid #26262e; flex: none; }
.rm .lg-you { border-radius: 50%; background: radial-gradient(circle, #fff 0 24%, #e8352c 26%); }
.rm .lg-them { border-radius: 50%; background: #3b78e0; border-color: #fff !important; box-shadow: 0 0 0 1.5px #1c2a52; }
.rm .lg-city { width: 16px !important; border-radius: 3px; background: #e2453c; }
.rm .lg-new { width: 16px !important; border-radius: 3px; background: #a3aab6; }
.rm .lg-gym { width: 10px !important; height: 10px !important; transform: rotate(45deg); background: #f2c230; }

/* The picked place: its name, and what's there. */
.rm .rm-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; border-radius: 10px; background: rgba(127, 127, 127, .12); box-shadow: inset 0 0 0 2px rgba(127, 127, 127, .3); align-self: start; }
.rm .rm-info p { margin: 0; }
.rm :is(.rm-chip, .rm-type) { text-shadow: none !important; }
.rm .rm-chip { align-self: flex-start; padding: 2px 10px; border-radius: 99px; font-size: max(12px, .82em); border: 2px solid #26262e; color: #26262e; }
.rm .rm-chip.here { background: #fff3c4; border-color: #c0392b; color: #8e2318; }
.rm .rm-chip.been { background: #ffd9d4; }
.rm .rm-chip.new { background: #e3e6ec; color: #4a4f5a; }
.rm .rm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rm .rm-list li { display: flex; align-items: center; gap: 8px; }
.rm .rm-list .ic { width: 14px; height: 14px; flex: none; border: 2px solid #26262e; border-radius: 50%; background: linear-gradient(#e2453c 0 45%, #26262e 45% 55%, #fff 55%); }
.rm .rm-list .ic.mart { border-radius: 3px; background: linear-gradient(#3b78e0 0 45%, #26262e 45% 55%, #fff 55%); }
.rm .rm-list .ic.gym { border-radius: 2px; transform: rotate(45deg) scale(.85); background: #f2c230; }
.rm .rm-list .ic.etc { border-radius: 3px; background: #a6dc86; }
.rm .rm-type { display: inline-block; padding: 0 7px; border-radius: 99px; background: var(--tc); color: #1d1d24; border: 1.5px solid #26262e; font-size: max(12px, .8em); }
.rm .rm-got { color: #2f9a50; white-space: nowrap; }