/* the minimap (world/minimap.mjs): ink on oat paper, an inset in the drawing's corner.
   The caller places .minimap and sets its width (the small square, ~150 px); the frame inside is the
   opened map, anchored to the element's corner and scaled down at rest (the script sets the scale). */
.minimap {
  --minimap-paper: #efe9dc;
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.minimap-frame {
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 0;
  background: var(--minimap-paper);
  transform-origin: 0 100%;
  box-shadow: 0 1px 3px rgba(60, 40, 20, 0.16);
  cursor: pointer;
}
.minimap[data-anchor="top-left"] .minimap-frame { top: 0; bottom: auto; transform-origin: 0 0; }
.minimap[data-anchor="bottom-right"] .minimap-frame { left: auto; right: 0; transform-origin: 100% 100%; }
.minimap[data-anchor="top-right"] .minimap-frame { left: auto; right: 0; top: 0; bottom: auto; transform-origin: 100% 0; }
.minimap-frame.open { z-index: 2; box-shadow: 0 3px 16px rgba(60, 40, 20, 0.22); }
.minimap-canvas { display: block; touch-action: manipulation; }
/* a region's name by the pointer */
.minimap-tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
  font-size: 0.66rem;
  line-height: 1;
  color: var(--ink, #231f1b);
  background: var(--paper, #f4f0e7);
  border: 0.5px solid rgba(43, 37, 31, 0.6);
  padding: 0.18rem 0.34rem 0.24rem;
  white-space: nowrap;
}
.minimap-tip[hidden] { display: none; }

/* the town page's inset (town.html): 150 px, the drawing's top-right corner, where it covers least (the
   sky of a street, the far roofs of a view from above; the lens lays a tall drawing's extra height above,
   world/scenes.mjs lens), clear of the compass and the gateways' names along the foot and of the column's
   tab. (It opens itself: the page's own scale on hover is overridden here, so it is not scaled twice.) */
.town-page .map-inset.minimap {
  position: fixed; z-index: 4; left: auto; right: calc(var(--right) + 1.3rem); top: 2.3rem; bottom: auto;
  width: 150px; margin: 0; transform: none !important; transition: none; box-shadow: none; background: none;
}
.town-page.panel-closed .map-inset.minimap { right: 2.7rem; }
@media (max-width: 899px) { .town-page .map-inset.minimap { right: 0.7rem; top: 3.4rem; } }