/* Blog-owned shell only; copied map geometry and data remain unchanged. */
html, body { margin: 0; padding: 0; min-height: 0; }
body.map-page main { width: 100%; max-width: none; margin: 0; padding: 0 0 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* The iframe measures its content: vh-based panels would feed that height
   back into themselves. Width-based sizing stays independent of frame height. */
.layout { --panel-height: min(640px, 64vw); }
@media (max-width: 800px) {
  .layout { --panel-height: min(440px, 105vw); }
}
.controls { margin-top: 0; }
.layout aside h2 { margin-bottom: .35rem; }
#ranking { margin-top: 0; }
.map-credit {
  position: absolute;
  bottom: .35rem;
  left: .5rem;
  right: .5rem;
  font-size: .55rem;
  line-height: 1.4;
  color: var(--color-global-text, #172635);
  background: color-mix(in srgb, var(--color-global-bg, #fff) 88%, transparent);
  width: fit-content;
  max-width: calc(100% - 1rem);
}
.map-canvas { position: relative; }
.map-canvas #status {
  position: absolute;
  z-index: 1;
  top: .65rem;
  left: .65rem;
  max-width: min(23rem, 65%);
  margin: 0;
  padding: .4rem .5rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-global-bg, #fff) 88%, transparent);
  color: var(--color-global-text, #172635);
  font-size: .65rem;
  line-height: 1.4;
  text-align: left;
  pointer-events: none;
}