/* Keep mobile map text and controls outside the drawing area. */
@media (max-width: 700px) {
  .universe {
    --mobile-map-header: 128px;
    --mobile-map-footer: 36px;
  }

  .map-caption {
    top: 16px;
    left: 16px;
    right: 16px;
  }

  .map-caption h2 {
    margin: 0 0 7px;
    line-height: 1.2;
  }

  .map-caption p {
    font-size: 10px;
    line-height: 1.4;
  }

  .map-top {
    top: 78px;
    left: 16px;
    right: 16px;
  }

  .compass {
    top: 78px;
    right: 12px;
    width: 36px;
  }

  .compass svg {
    width: 28px;
  }

  #scene {
    position: absolute;
    top: var(--mobile-map-header);
    left: 0;
    height: calc(100% - var(--mobile-map-header) - var(--mobile-map-footer));
  }

  #tooltip {
    transform: translateY(var(--mobile-map-header));
  }

  .detail {
    top: var(--mobile-map-header);
    max-height: calc(100% - var(--mobile-map-header) - var(--mobile-map-footer) - 12px);
    max-width: calc(100% - 24px);
    scrollbar-width: thin;
    scrollbar-color: #456254 transparent;
  }

  .detail > .eyebrow {
    padding-right: 24px;
    line-height: 1.5;
  }

  .detail-close {
    top: 4px;
    right: 4px;
    width: 36px;
    height: 36px;
  }

  .detail:not([hidden]) ~ .map-tools,
  .detail:not([hidden]) ~ .compass {
    display: none;
  }

  .places {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .place-text {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}