/* Horizontal location copy uses the approved paper panel, not a stretched
   museum pedestal. Source 1402x1122; measured cuts x160/1242, y230/892.
   Corner dimensions always share one source-to-CSS scale. */
.stage :is(.exploration-caption, .route-map-label) {
  box-sizing: border-box;
  left: 50%; right: auto; bottom: 0;
  width: 90%; max-width: 330px;
  height: auto; min-height: 66px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; justify-content: center;
  gap: 2px; padding: 4px 10px;
  background: none;
  border: solid transparent;
  border-width: 9.2px 6.4px;
  border-image-source: var(--ui-panel-readable);
  border-image-slice: 230 160 230 160 fill;
  /* Explicit image widths avoid rounding CSS border widths to whole pixels. */
  border-image-width: 9.2px 6.4px; border-image-repeat: stretch;
  color: var(--ink); text-align: center;
}
.stage :is(.exploration-caption, .route-map-label) > :is(strong, small) {
  display: block; flex: 0 0 auto; min-width: 0; max-width: 100%;
  line-height: 1.25; white-space: normal; overflow-wrap: anywhere;
}
.stage :is(.exploration-caption, .route-map-label) > strong {
  font-size: clamp(13px, 1.5cqw, 20px);
}
.stage :is(.exploration-caption, .route-map-label) > small {
  font-size: clamp(11px, 1cqw, 14px);
}
.stage .route-map-choice.selected .route-map-label {
  outline: 3px solid var(--yellow); outline-offset: 1px;
}
.stage[data-screen="route"] .route-choice {
  box-sizing: border-box; min-height: 64px;
  background: none; border: solid transparent;
  border-width: 9.2px 6.4px;
  border-image-source: var(--ui-panel-readable);
  border-image-slice: 230 160 230 160 fill;
  border-image-width: 9.2px 6.4px; border-image-repeat: stretch;
  padding: 4px 8px;
}
@media (max-width: 1000px), (max-height: 560px) {
  .stage :is(.exploration-caption, .route-map-label) {
    min-height: 54px; max-width: 280px;
    border-width: 5.75px 4px; border-image-width: 5.75px 4px; padding: 4px 8px;
  }
  .stage :is(.exploration-caption, .route-map-label) > strong { font-size: 13px; }
  .stage :is(.exploration-caption, .route-map-label) > small { font-size: 11px; }
  .stage[data-screen="route"] .route-choice {
    min-height: 54px; border-width: 5.75px 4px;
    border-image-width: 5.75px 4px; padding: 4px 8px;
  }
}
/* The existing portrait view is a scaled landscape overview. Keep the label
   in that same coordinate system so it cannot cover adjacent islands. */
@media (orientation: portrait) and (max-width: 639px) {
  .stage :is(.exploration-caption, .route-map-label) {
    min-height: 6.49cqw; max-width: 33.65cqw;
    border-width: .691106cqw .480769cqw;
    border-image-width: .691106cqw .480769cqw;
    padding: .480769cqw .961538cqw; gap: .240385cqw;
  }
  .stage :is(.exploration-caption, .route-map-label) > strong { font-size: 1.5625cqw; }
  .stage :is(.exploration-caption, .route-map-label) > small { font-size: 1.322115cqw; }
  .stage .route-map-choice.selected .route-map-label {
    outline-width: .360577cqw; outline-offset: .120192cqw;
  }
  .stage[data-screen="route"] .route-choice {
    min-height: 6.49cqw; border-width: .691106cqw .480769cqw;
    border-image-width: .691106cqw .480769cqw;
    padding: .480769cqw .961538cqw;
  }
}