(() => {
  const root = document.getElementById('ts77077-hover');
  const stage = root.querySelector('.park-interactive');
  const markers = Array.from(stage.querySelectorAll('[data-map-space]'));
  // Truck body bounds in the original 1100 × 619 park illustration.
  const truckBodies = {
    '306':[9,219,109,283], '307':[108,181,195,239],
    '305':[137,267,260,345], '304':[267,288,386,371],
    '303':[398,311,543,403], '302':[672,359,823,466],
    '301':[851,380,1046,507]
  };
  const truckStyle = document.createElement('style');
  truckStyle.textContent = `
    #ts77077-hover .map-pin[data-map-space] {transform:none;min-height:0;box-sizing:border-box;border-radius:4px;outline:2px solid transparent;outline-offset:1px;}
    #ts77077-hover .map-pin[data-map-space]:is(:hover,:focus-visible,.is-active) {outline:2px solid #ffbd24;outline-offset:1px;background:#ffbd240c;}
  `;
  root.appendChild(truckStyle);
  function arrangeLabels() {
    const bounds = stage.getBoundingClientRect();
    if (!bounds.width || !bounds.height) return;
    markers.forEach(marker => {
      const body = truckBodies[marker.dataset.mapSpace];
      if (!body) return;
      marker.style.left = `${body[0] / 1100 * bounds.width - 2}px`;
      marker.style.top = `${body[1] / 619 * bounds.height - 2}px`;
      marker.style.width = `${(body[2] - body[0]) / 1100 * bounds.width + 4}px`;
      marker.style.height = `${(body[3] - body[1]) / 619 * bounds.height + 4}px`;
    });
    const boxes = markers.map(marker => {
      const label = marker.querySelector('.map-label');
      const area = marker.getBoundingClientRect();
      const width = label.offsetWidth;
      const height = label.offsetHeight;
      const x = area.left - bounds.left;
      const y = area.top - bounds.top;
      const center = Math.max(width / 2 + 4, Math.min(bounds.width - width / 2 - 4, x + area.width / 2));
      return {label, area, x, y, width, height, center, top: Math.max(4, y - height - 6)};
    });
    for (let pass = 0; pass < boxes.length; pass++) {
      let changed = false;
      for (let j = boxes.length - 1; j > 0; j--) {
        for (let i = j - 1; i >= 0; i--) {
          const a = boxes[i], b = boxes[j];
          const overlapX = Math.abs(a.center - b.center) < (a.width + b.width) / 2 + 6;
          const overlapY = a.top < b.top + b.height + 6 && a.top + a.height + 6 > b.top;
          if (overlapX && overlapY) {
            const next = Math.max(4, b.top - a.height - 7);
            if (next < a.top) { a.top = next; changed = true; }
          }
        }
      }
      if (!changed) break;
    }
    boxes.forEach(box => {
      box.label.style.left = `${box.center - box.x}px`;
      box.label.style.bottom = `${box.y + box.area.height - box.top - box.height}px`;
    });
  }
  new ResizeObserver(arrangeLabels).observe(stage);
  stage.querySelector('img').addEventListener('load', arrangeLabels);
  if (document.fonts) document.fonts.ready.then(arrangeLabels);
  arrangeLabels();
})();