<!--HTML-->
<style>
.daymare-simple-map-widget {
  --daymare-map-point: #d78f88;
  --daymare-map-surface: var(--backgr-03, #e6e6e6);
  --daymare-map-text: var(--text-02, #323232);
  --daymare-map-stroke: var(--stroke-02, #cbcbcb);
  --daymare-map-layer-point: 2;
  --daymare-map-layer-open: 3;
  width: min(100%, 760px);
  margin: 0 auto;
  font-family: var(--font, Inter), Arial, sans-serif;
}

.daymare-simple-map {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  isolation: isolate;
}

.daymare-simple-map-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  outline: 1px solid rgba(50, 50, 50, 0.18);
  outline-offset: -1px;
}

.daymare-simple-map button.daymare-simple-map-point,
.daymare-simple-map button.daymare-simple-map-point:hover,
.daymare-simple-map button.daymare-simple-map-point:focus,
.daymare-simple-map button.daymare-simple-map-point:active {
  position: absolute !important;
  left: var(--x) !important;
  top: var(--y) !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  height: 12px !important;
  min-height: 12px !important;
  max-height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  appearance: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--daymare-map-text) !important;
  font: 0/0 Arial, sans-serif !important;
  text-transform: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  transition: none !important;
  -webkit-tap-highlight-color: transparent;
  z-index: var(--daymare-map-layer-point) !important;
}

.daymare-simple-map-point::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border: 1px solid #fff7f2 !important;
  border-radius: 50%;
  background: var(--daymare-map-point) !important;
  box-shadow: 0 0 0 1px rgba(65, 35, 31, 0.45), 0 1px 4px rgba(20, 20, 20, 0.62);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease-out;
  z-index: 1;
}

.daymare-simple-map-point::after {
  content: attr(data-title);
  display: none;
  position: absolute;
  left: 50%;
  bottom: 16px;
  box-sizing: border-box;
  width: max-content;
  max-width: min(210px, calc(100vw - 28px));
  transform: translateX(-50%) !important;
  padding: 5px 7px;
  border: 1px solid var(--daymare-map-stroke);
  border-radius: 4px;
  background: var(--daymare-map-surface);
  color: var(--daymare-map-text);
  font: 500 11px/1.35 var(--font, Inter), Arial, sans-serif !important;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 3px 10px rgba(31, 42, 39, 0.28);
  pointer-events: none;
  z-index: 2;
}

.daymare-simple-map button.daymare-simple-map-point:hover,
.daymare-simple-map button.daymare-simple-map-point:focus,
.daymare-simple-map button.daymare-simple-map-point:active {
  z-index: var(--daymare-map-layer-open) !important;
}

.daymare-simple-map-point:hover::before,
.daymare-simple-map-point:focus::before {
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 2px 5px rgba(31, 42, 39, 0.58);
}

.daymare-simple-map-point:hover::after,
.daymare-simple-map-point:focus::after {
  display: block;
}

.daymare-simple-map button.daymare-simple-map-point:focus-visible {
  outline: 1px solid var(--daymare-map-surface) !important;
  outline-offset: 2px !important;
}

.daymare-simple-map-point--right::after {
  left: auto;
  right: -2px;
  transform: none !important;
}

@media (max-width: 480px) {
  .daymare-simple-map button.daymare-simple-map-point,
  .daymare-simple-map button.daymare-simple-map-point:hover,
  .daymare-simple-map button.daymare-simple-map-point:focus,
  .daymare-simple-map button.daymare-simple-map-point:active {
    width: 10px !important;
    min-width: 10px !important;
    max-width: 10px !important;
    height: 10px !important;
    min-height: 10px !important;
    max-height: 10px !important;
  }

  .daymare-simple-map-point::before {
    width: 6px;
    height: 6px;
  }

  .daymare-simple-map-point::after {
    bottom: 14px;
    max-width: min(185px, calc(100vw - 24px));
    font-size: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .daymare-simple-map-point::before {
    transition: none;
  }
}

#daymareLargeMap .daymare-simple-map button.daymare-simple-map-point,
#daymareLargeMap .daymare-simple-map button.daymare-simple-map-point:hover,
#daymareLargeMap .daymare-simple-map button.daymare-simple-map-point:focus,
#daymareLargeMap .daymare-simple-map button.daymare-simple-map-point:active {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
}

#daymareLargeMap .daymare-simple-map-point::before {
  width: 12px;
  height: 12px;
  border: 2px solid #fffaf6 !important;
  box-shadow:
    0 0 0 2px rgba(29, 48, 43, 0.92),
    0 2px 7px rgba(12, 18, 16, 0.72);
}

#daymareLargeMap[popover] {
  box-sizing: border-box;
  width: calc(100vw - 24px);
  max-width: calc(100vw - 24px);
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  margin: auto;
  padding: 0;
  overflow: auto !important;
  overscroll-behavior: contain;
  border: 1px solid var(--stroke-02, #cbcbcb);
  border-radius: 6px;
  background: var(--backgr-03, #e6e6e6);
  box-shadow: 0 16px 50px rgba(20, 20, 20, 0.42);
}

#daymareLargeMap[popover] > table > tbody > tr:first-child > td {
  position: sticky;
  top: 0;
  padding: 8px 10px;
  background: var(--backgr-03, #e6e6e6);
  z-index: 10;
}

.daymare-simple-map-open {
  margin: 16px 0 0 !important;
  text-align: center;
}

#daymareLargeMap::backdrop {
  background: rgba(20, 24, 23, 0.72);
}

body:has(#daymareLargeMap:popover-open) {
  overflow: hidden;
}
</style>

<div class="daymare-theme-wrapper">
  <div class="daymare-theme-header">
    <div class="daymare-theme-title">Карта Хорсшу-Бэй</div>
  </div>

  <div class="daymare-theme-body">
    <div class="daymare-theme-text">
      Где начинается Олд Харбор, как добраться до Брейкуотера и что вообще находится по ту сторону озера? Карта Хорсшу-Бэй собрала основные городские ориентиры: городские службы, общественные учреждения и достопримечательности, которые пригодятся вам во время игры. Это, разумеется, далеко не всё, что может предложить город: со временем карта будет пополняться ресторанами, магазинами, частными предприятиями и другими местами, без которых невозможно представить повседневную жизнь Хорсшу-Бэй.<br><br>
    </div>

<div class="daymare-simple-map-widget" id="daymareSimpleMapWidget">
  <div class="daymare-simple-map" id="daymareSimpleMap">
    <img class="daymare-simple-map-image" src="https://upforme.ru/uploads/001c/c1/8b/13/763394.png" alt="Карта Хорсшу-Бэй">

    <!-- Downtown -->
    <button type="button" class="daymare-simple-map-point" style="--x:51.74%;--y:51.47%" data-title="Городская ратуша" aria-label="Городская ратуша"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:48.50%;--y:56.80%" data-title="Полицейское управление Хорсшу-Бэй" aria-label="Полицейское управление Хорсшу-Бэй"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:55.50%;--y:56.60%" data-title="Офис прокурора" aria-label="Офис прокурора"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:58.30%;--y:60.80%" data-title="Городской суд" aria-label="Городской суд"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:46.20%;--y:61.20%" data-title="Офис судебно-медицинских экспертиз" aria-label="Офис судебно-медицинских экспертиз"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:60.90%;--y:56.80%" data-title="Департамент парков и рекреации" aria-label="Департамент парков и рекреации"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:43.00%;--y:65.20%" data-title="Пожарный департамент Хорсшу-Бэй" aria-label="Пожарный департамент Хорсшу-Бэй"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:69.90%;--y:52.90%" data-title="Городская больница Хорсшу-Бэй" aria-label="Городская больница Хорсшу-Бэй"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:51.10%;--y:64.60%" data-title="Общественный центр" aria-label="Общественный центр"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:62.62%;--y:64.80%" data-title="Общественная библиотека" aria-label="Общественная библиотека"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:56.20%;--y:66.25%" data-title="Издательство газеты «The Horseshoe Herald»" aria-label="Издательство газеты The Horseshoe Herald"></button>

    <!-- Old Harbor -->
    <button type="button" class="daymare-simple-map-point" style="--x:21.50%;--y:43.70%" data-title="Лесопилка «Lumberjack»" aria-label="Лесопилка Lumberjack"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:24.52%;--y:47.65%" data-title="Рыбоперерабатывающий завод «North Shore Fish co.»" aria-label="Рыбоперерабатывающий завод North Shore Fish co."></button>
    <button type="button" class="daymare-simple-map-point" style="--x:38.65%;--y:72.50%" data-title="Судоремонтная верфь" aria-label="Судоремонтная верфь"></button>

    <!-- Заброшенная железная дорога -->
    <button type="button" class="daymare-simple-map-point" style="--x:17.30%;--y:42.20%" data-title="Заброшенная железная дорога" aria-label="Заброшенная железная дорога"></button>

    <!-- Lakeview -->
    <button type="button" class="daymare-simple-map-point" style="--x:69.45%;--y:29.25%" data-title="Старшая школа" aria-label="Старшая школа"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:71.07%;--y:21.90%" data-title="Торговый центр «Magnolia Grove Mall»" aria-label="Торговый центр Magnolia Grove Mall"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:75.44%;--y:28.38%" data-title="Автокинотеатр «The Neon Anchor»" aria-label="Автокинотеатр The Neon Anchor"></button>

    <!-- North Shore -->
    <button type="button" class="daymare-simple-map-point" style="--x:57.09%;--y:10.71%" data-title="Детский летний лагерь" aria-label="Детский летний лагерь"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:32.87%;--y:27.62%" data-title="Лесная служба" aria-label="Лесная служба"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:37.85%;--y:34.99%" data-title="Ветеринарная клиника «Apex Animal Wellness»" aria-label="Ветеринарная клиника Apex Animal Wellness"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:42.54%;--y:25.69%" data-title="Дом престарелых «Golden Years Harbor»" aria-label="Дом престарелых Golden Years Harbor"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:46.96%;--y:31.49%" data-title="Церковь" aria-label="Церковь"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:64.23%;--y:8.51%" data-title="Научно-исследовательская станция" aria-label="Научно-исследовательская станция"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:30.80%;--y:33.40%" data-title="Конный центр «Silver Hoof»" aria-label="Конный центр Silver Hoof"></button>

    <!-- Breakwater -->
    <button type="button" class="daymare-simple-map-point" style="--x:83.13%;--y:37.97%" data-title="Трейлерный парк" aria-label="Трейлерный парк"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:75.30%;--y:71.80%" data-title="Пляжно-спасательная служба" aria-label="Пляжно-спасательная служба"></button>
    <button type="button" class="daymare-simple-map-point daymare-simple-map-point--right" style="--x:94.82%;--y:34.25%" data-title="Реабилитационный центр «Tidepoint Recovery & Wellness Center»" aria-label="Реабилитационный центр Tidepoint Recovery and Wellness Center"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:61.99%;--y:61.43%" data-title="Кампус Университета Северной Каролины" aria-label="Кампус Университета Северной Каролины"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:72.51%;--y:68.14%" data-title="Радиостанция «WHSB»" aria-label="Радиостанция WHSB"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:83.60%;--y:58.00%" data-title="Парк аттракционов «The Iron Horse»" aria-label="Парк аттракционов The Iron Horse"></button>

    <!-- НОВЫЕ ТОЧКИ ДОБАВЛЯЙТЕ СЮДА -->
  </div>
</div>

<p class="daymare-simple-map-open" align="center">
  <button type="button" popovertarget="daymareLargeMap">Открыть полноразмерную карту</button>
</p>
  </div>

<div id="daymareLargeMap" popover>
  <table width="1448" cellpadding="0" cellspacing="0" border="0" bgcolor="#e6e6e6" align="center">
    <tbody class="daymare-simple-map-widget">
      <tr>
        <td colspan="2" align="right">
          <button type="button" popovertarget="daymareLargeMap" popovertargetaction="hide">Закрыть</button>
        </td>
      </tr>
      <tr>
        <td colspan="2" width="1448">
<div class="daymare-simple-map">
    <img class="daymare-simple-map-image" src="https://upforme.ru/uploads/001c/c1/8b/13/763394.png" alt="Карта Хорсшу-Бэй">

    <!-- Downtown -->
    <button type="button" class="daymare-simple-map-point" style="--x:51.74%;--y:51.47%" data-title="Городская ратуша" aria-label="Городская ратуша"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:48.50%;--y:56.80%" data-title="Полицейское управление Хорсшу-Бэй" aria-label="Полицейское управление Хорсшу-Бэй"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:55.50%;--y:56.60%" data-title="Офис прокурора" aria-label="Офис прокурора"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:58.30%;--y:60.80%" data-title="Городской суд" aria-label="Городской суд"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:46.20%;--y:61.20%" data-title="Офис судебно-медицинских экспертиз" aria-label="Офис судебно-медицинских экспертиз"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:60.90%;--y:56.80%" data-title="Департамент парков и рекреации" aria-label="Департамент парков и рекреации"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:43.00%;--y:65.20%" data-title="Пожарный департамент Хорсшу-Бэй" aria-label="Пожарный департамент Хорсшу-Бэй"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:69.90%;--y:52.90%" data-title="Городская больница Хорсшу-Бэй" aria-label="Городская больница Хорсшу-Бэй"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:51.10%;--y:64.60%" data-title="Общественный центр" aria-label="Общественный центр"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:62.62%;--y:64.80%" data-title="Общественная библиотека" aria-label="Общественная библиотека"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:56.20%;--y:66.25%" data-title="Издательство газеты «The Horseshoe Herald»" aria-label="Издательство газеты The Horseshoe Herald"></button>

    <!-- Old Harbor -->
    <button type="button" class="daymare-simple-map-point" style="--x:21.50%;--y:43.70%" data-title="Лесопилка «Lumberjack»" aria-label="Лесопилка Lumberjack"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:24.52%;--y:47.65%" data-title="Рыбоперерабатывающий завод «North Shore Fish co.»" aria-label="Рыбоперерабатывающий завод North Shore Fish co."></button>
    <button type="button" class="daymare-simple-map-point" style="--x:38.65%;--y:72.50%" data-title="Судоремонтная верфь" aria-label="Судоремонтная верфь"></button>

    <!-- Заброшенная железная дорога -->
    <button type="button" class="daymare-simple-map-point" style="--x:17.30%;--y:42.20%" data-title="Заброшенная железная дорога" aria-label="Заброшенная железная дорога"></button>

    <!-- Lakeview -->
    <button type="button" class="daymare-simple-map-point" style="--x:69.45%;--y:29.25%" data-title="Старшая школа" aria-label="Старшая школа"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:71.07%;--y:21.90%" data-title="Торговый центр «Magnolia Grove Mall»" aria-label="Торговый центр Magnolia Grove Mall"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:75.44%;--y:28.38%" data-title="Автокинотеатр «The Neon Anchor»" aria-label="Автокинотеатр The Neon Anchor"></button>

    <!-- North Shore -->
    <button type="button" class="daymare-simple-map-point" style="--x:57.09%;--y:10.71%" data-title="Детский летний лагерь" aria-label="Детский летний лагерь"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:32.87%;--y:27.62%" data-title="Лесная служба" aria-label="Лесная служба"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:37.85%;--y:34.99%" data-title="Ветеринарная клиника «Apex Animal Wellness»" aria-label="Ветеринарная клиника Apex Animal Wellness"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:42.54%;--y:25.69%" data-title="Дом престарелых «Golden Years Harbor»" aria-label="Дом престарелых Golden Years Harbor"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:46.96%;--y:31.49%" data-title="Церковь" aria-label="Церковь"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:64.23%;--y:8.51%" data-title="Научно-исследовательская станция" aria-label="Научно-исследовательская станция"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:30.80%;--y:33.40%" data-title="Конный центр «Silver Hoof»" aria-label="Конный центр Silver Hoof"></button>

    <!-- Breakwater -->
    <button type="button" class="daymare-simple-map-point" style="--x:83.13%;--y:37.97%" data-title="Трейлерный парк" aria-label="Трейлерный парк"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:75.30%;--y:71.80%" data-title="Пляжно-спасательная служба" aria-label="Пляжно-спасательная служба"></button>
    <button type="button" class="daymare-simple-map-point daymare-simple-map-point--right" style="--x:94.82%;--y:34.25%" data-title="Реабилитационный центр «Tidepoint Recovery & Wellness Center»" aria-label="Реабилитационный центр Tidepoint Recovery and Wellness Center"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:61.99%;--y:61.43%" data-title="Кампус Университета Северной Каролины" aria-label="Кампус Университета Северной Каролины"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:72.51%;--y:68.14%" data-title="Радиостанция «WHSB»" aria-label="Радиостанция WHSB"></button>
    <button type="button" class="daymare-simple-map-point" style="--x:83.60%;--y:58.00%" data-title="Парк аттракционов «The Iron Horse»" aria-label="Парк аттракционов The Iron Horse"></button>

    <!-- НОВЫЕ ТОЧКИ ДОБАВЛЯЙТЕ СЮДА -->
  </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
</div>