.map-viewport { position: relative; width: min(calc(1600 / 1920 * 100vw), 1600px); aspect-ratio: 1600 / 720; overflow: hidden; }
.map-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; cursor: grab; touch-action: none; user-select: none; will-change: transform; }
.map-world.is-dragging { cursor: grabbing; }
.map-image { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.map-marker { position: absolute; z-index: 1; padding: 0; border: 0; background: transparent; transform: translate(-50%, -50%); cursor: pointer; }
.map-marker::before { display: block; width: 100%; height: 100%; content: ''; border-radius: 50%; background: rgb(0 0 0 / 0); }
.popup-layer { position: absolute; inset: 0; z-index: 100; pointer-events: none; }
.map-popup { position: absolute; width: clamp(180px, 16vw, 254px); padding: 8px; border-radius: 12px; background: #fff; box-shadow: 2px 2px 5px #00000099; pointer-events: auto; }
.map-popup img { display: block; width: 100%; }
.map-popup h3 { margin: 8px 0 4px; font-size: 20px; }
.map-popup p { margin: 0; font-size: 14px; }
.popup-close { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .6); color: #fff; font-size: 20px; line-height: 30px; cursor: pointer; opacity: 0;}
.map-controls { position: absolute; right: 50%; transform: translateX(50%); bottom: 2vw; z-index: 200; display: flex; flex-wrap: wrap; gap: 8px; }
.map-controls button { width: 48px; height: 48px; border: 0; border-radius: 0px; background: rgb(255 255 255 / .9); font-size: 24px; cursor: pointer; user-select: none; border: 2px solid #6f6a62; background-color: #6f6a62; color: #fff;}

.map-controls button:hover{
    color: #6f6a62;
    background-color: #fff;
}

.map-frame { position: absolute; inset: 0; z-index: 199; width: 100%; height: 100%; pointer-events: none; }

/* Keep the map usable on tablets and phones without overlapping the next section. */
@media (max-width: 991.98px) {
  #find {
    --map-mobile-height: clamp(50vw, 60vw, 50vw);
    min-height: calc(32vw + var(--map-mobile-height) + 32px);
  }
  #find .map-viewport {
    /* width: calc(100% - 32px); */
    height: var(--map-mobile-height);
    aspect-ratio: auto;
  }
  #find #tip-box { top: calc(32vw + 24px) !important; }
  #find #tip-box .card { width: min(80vw, 360px) !important; }
  #find #tip-box p { font-size: 16px !important; line-height: 1.6; }
  #find #btn-delete-tip { min-height: 44px; padding-inline: 20px; }
  #find .map-controls { bottom: 12px; flex-wrap: nowrap; }
  #find .map-controls button { width: 48px; height: 48px; touch-action: manipulation; }
}

@media (max-width: 576px) {
  #find {
    --map-mobile-height: clamp(110vw, 60vw, 50vw);
    min-height: calc(32vw + var(--map-mobile-height) + 32px);
  }
    #find #tip-box { top: calc(72vw + 24px) !important; }
    .map-frame{
        opacity: 0;
    }
  #find .map-viewport {
    /* width: calc(100% - 32px);
    height: var(--map-mobile-height);
    aspect-ratio: auto; */
    margin-bottom: 3vw;
  }
}