:root {
  --map-marker-width: 14%;
  --map-marker-height: 11%;
  --map-marker-red: #ff3b30;
}

.map-marker {
  position: absolute;
  z-index: 3;
  width: var(--marker-width, var(--map-marker-width));
  height: var(--marker-height, var(--map-marker-height));
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  touch-action: manipulation;
}

.map-marker-frame {
  border: 4px solid var(--map-marker-red);
  border-radius: 6px;
  background: rgba(255, 59, 48, 0.1);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 0 5px rgba(255, 59, 48, 0.22);
}

.map-note-bubble {
  position: absolute;
  z-index: 4;
  top: calc(var(--map-note-top) - var(--map-note-marker-half-height, 5.5%));
  left: clamp(144px, var(--map-note-left), calc(100% - 144px));
  display: none;
  width: max-content;
  max-width: min(calc(100% - 16px), 280px);
  max-height: 112px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background: rgba(17, 20, 25, 0.94);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  white-space: pre-wrap;
  overflow-y: auto;
  transform: translate(-50%, calc(-100% - 6px));
  overscroll-behavior: contain;
}

.map-note-bubble.visible {
  display: block;
}

.map-note-bubble.below {
  top: calc(var(--map-note-top) + var(--map-note-marker-half-height, 5.5%));
  transform: translate(-50%, 6px);
}

@media (orientation: landscape) and (max-height: 600px) {
  .map-note-bubble {
    top: calc(var(--map-note-top) - var(--map-note-marker-half-height, 5.5%));
    max-width: min(calc(100% - 16px), 380px);
    max-height: 96px;
    font-size: 13px;
    transform: translate(-50%, calc(-100% - 6px));
  }
}

@media (min-width: 900px) and (min-height: 640px) {
  .map-note-bubble {
    left: clamp(164px, var(--map-note-left), calc(100% - 164px));
    max-width: min(calc(100% - 16px), 320px);
    max-height: 140px;
    padding: 11px 13px;
    border-color: rgba(255, 59, 48, 0.72);
    border-left-width: 4px;
    border-radius: 8px;
    background: rgba(12, 14, 18, 0.97);
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.62),
      0 0 0 1px rgba(255, 59, 48, 0.16);
    font-size: 15px;
    font-weight: 550;
    line-height: 1.55;
    backdrop-filter: blur(14px);
  }

  .screen-stack:not(.comparing) .map-note-bubble {
    left: clamp(224px, var(--map-note-left), calc(100% - 224px));
    max-width: min(calc(100% - 20px), 440px);
    max-height: 170px;
    padding: 14px 16px;
    font-size: 17px;
  }
}