
<!-- https://storage.yandexcloud.net/trip2gmbti/landing/na/142/style.out.css?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=107073ab7d6fe59c07db64a3e00cf3d6dc6c5f59f3eb87cd313a3ce460b6dcde -->
<!-- https://storage.yandexcloud.net/trip2gmbti/landing/na/90/mountains.mp3?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=e289f91982fee0d30afb77ac4eac4e41f5db13f82e364b713aae7069a9bd02c7 -->
<!-- https://storage.yandexcloud.net/trip2gmbti/landing/na/88/forest.mp3?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=e6e37fd2cce6df8d5ceaf641cb80c690cdc033bd720de5f867d22a081043a90c -->
<!-- https://storage.yandexcloud.net/trip2gmbti/landing/na/89/castle.mp3?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=e5c63465677a307dd4f2bddadec8a89ef3b64a767b5e1df6679f0be21585db4e -->
<!-- https://storage.yandexcloud.net/trip2gmbti/landing/na/80/minimap.webp?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=7e0bdb5ff5769768311f28377b0eb8b7b4d43ca230c11c748a74f001a86b30d4 -->
<!-- https://storage.yandexcloud.net/trip2gmbti/landing/na/101/start_v2.webp?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=f15f7c58e80dcd83cfc2ef6049c5d4b935cf6c9ae4db0ce417e48470244c7e25 -->
<!-- https://storage.yandexcloud.net/trip2gmbti/landing/na/102/forest_v2.webp?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=89e18469a7e3a8eb8c42ad606f3f7bc58e18fc0e520f589f346b615f249d9406 -->
<!-- https://storage.yandexcloud.net/trip2gmbti/landing/na/103/castle_v2.webp?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=eaeb117de518d885232387b10a7e5b283708ed4473b8575100fddaac6e0cd7bc -->
<!-- https://storage.yandexcloud.net/trip2gmbti/landing/na/104/dungeon_v2.webp?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=99226640695b64938f600374aa111f94ac3f9b1affe0ef8783034abdc53c2ab9 -->
<!-- https://storage.yandexcloud.net/trip2gmbti/landing/na/105/forest-to-castle_v2.webp?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=6ed01c8f4326391ec9534b52c98a02d3f80928974a7e28c83c0015d135a23397 -->
<!-- https://storage.yandexcloud.net/trip2gmbti/landing/na/106/castle-to-dungeon_v2.webp?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=c55a678ab47aaf3a706659e20a139a4ec6e935b7f156e85fc94ebfa2fbb00a22 -->
<!-- https://storage.yandexcloud.net/trip2gmbti/landing/na/107/dungeon-to-forest_v2.webp?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=4effd3d93e8d62f380c0d7d9747a3294e1f25e3c84bc60b8fb4d2c909c604da1 -->

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Карта — Карта</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Cormorant+SC:wght@500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://storage.yandexcloud.net/trip2gmbti/landing/na/142/style.out.css?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=107073ab7d6fe59c07db64a3e00cf3d6dc6c5f59f3eb87cd313a3ce460b6dcde">
</head>
<body class="map-body" data-env-track="https://storage.yandexcloud.net/trip2gmbti/landing/na/90/mountains.mp3?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=e289f91982fee0d30afb77ac4eac4e41f5db13f82e364b713aae7069a9bd02c7">
  <div class="map-bg" style="
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('https://storage.yandexcloud.net/trip2gmbti/landing/na/101/start_v2.webp?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=f15f7c58e80dcd83cfc2ef6049c5d4b935cf6c9ae4db0ce417e48470244c7e25');
    --cam-scale: 1;
    --cam-origin: 50% 50%;
  "></div>

  <a href="/" class="map-back-btn">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      
      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
      <polyline points="9 22 9 12 15 12 15 22"/>
      
    </svg>
    На главную
  </a>

  <div class="map-audio-wrap">
    <span id="audioHint" class="map-audio-hint">Включите звук</span>
    <button id="audioToggle" class="map-audio-btn" title="Вкл/Выкл музыку">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
        <path id="audioWaves" d="M15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14"/>
      </svg>
    </button>
  </div>

  <div class="map-center">
    <div class="map-box">
      <h1 class="map-h1">Карта</h1>
      <div class="map-content">
        <p><em>Включи звук — так атмосфернее.</em></p>
<p>Ты стоишь на перекрёстке трёх дорог.</p>
<p>Слева шумит <strong>лес</strong> — древние деревья скрывают тайны.</p>
<p>Справа возвышается <strong>замок</strong> — каменные стены хранят силу.</p>
<p>Впереди зияет вход в <strong>подземелье</strong> — там добывают сокровища.</p>
<h3 id="kuda_pojdyoshj__153">Куда пойдёшь?</h3>
<p><a data-pid="155" href="/map/forest">В лес</a> | <a data-pid="156" href="/map/castle">К замку</a> | <a data-pid="157" href="/map/dungeon">Под землю</a></p>

      </div>
    </div>
  </div>

  <!-- Minimap -->
  <div class="minimap">
    <img src="https://storage.yandexcloud.net/trip2gmbti/landing/na/80/minimap.webp?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=YCAJEptmMdfmfjmHTVPdZmMM5%2F20260225%2Fru-central1%2Fs3%2Faws4_request&amp;X-Amz-Date=20260225T140406Z&amp;X-Amz-Expires=540000&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=7e0bdb5ff5769768311f28377b0eb8b7b4d43ca230c11c748a74f001a86b30d4" alt="Карта" class="minimap-img">
  </div>

  <audio id="bgAudio" loop preload="auto"></audio>
  <script>
  (function() {
    const audio = document.getElementById('bgAudio');
    const btn = document.getElementById('audioToggle');
    const waves = document.getElementById('audioWaves');
    const hint = document.getElementById('audioHint');
    const mapBg = document.querySelector('.map-bg');
    const mapBox = document.querySelector('.map-box');
    const mapH1 = document.querySelector('.map-h1');
    const mapContent = document.querySelector('.map-content');

    let currentTrack = document.body.dataset.envTrack;
    if (currentTrack) audio.src = currentTrack;

    const KEY = 'env_music_on';
    const HINT_KEY = 'env_music_hint_seen';
    let wantMusic = localStorage.getItem(KEY) !== 'false';

    if (localStorage.getItem(HINT_KEY) && hint) {
      hint.classList.add('hidden');
    }

    function hideHint() {
      if (hint) {
        hint.classList.add('hidden');
        localStorage.setItem(HINT_KEY, '1');
      }
    }

    function updateIcon() {
      const playing = !audio.paused;
      waves.style.opacity = playing ? '1' : '0.3';
      btn.style.opacity = playing ? '1' : '0.5';
    }

    function fadeIn() {
      audio.volume = 0;
      audio.play().then(() => {
        hideHint();
        updateIcon();
      }).catch(() => {});
      let t0 = null;
      (function step(t) {
        if (!t0) t0 = t;
        const p = Math.min((t - t0) / 2000, 1);
        audio.volume = Math.min(0.4, Math.max(0, p * 0.4));
        if (p < 1) requestAnimationFrame(step);
      })(performance.now());
    }

    function fadeOut() {
      let v0 = audio.volume, t0 = null;
      (function step(t) {
        if (!t0) t0 = t;
        const p = Math.min((t - t0) / 500, 1);
        audio.volume = Math.min(1, Math.max(0, v0 * (1 - p)));
        if (p < 1) requestAnimationFrame(step);
        else { audio.pause(); updateIcon(); }
      })(performance.now());
    }

    function crossfadeTrack(newTrack) {
      if (!newTrack || newTrack === currentTrack) return;
      currentTrack = newTrack;
      if (!wantMusic || audio.paused) {
        audio.src = newTrack;
        return;
      }
      let v0 = audio.volume, t0 = null;
      (function step(t) {
        if (!t0) t0 = t;
        const p = Math.min((t - t0) / 300, 1);
        audio.volume = Math.max(0, v0 * (1 - p));
        if (p < 1) requestAnimationFrame(step);
        else {
          audio.src = newTrack;
          audio.play().then(() => fadeIn()).catch(() => {});
        }
      })(performance.now());
    }

    btn.onclick = () => {
      hideHint();
      if (audio.paused) {
        wantMusic = true;
        localStorage.setItem(KEY, 'true');
        fadeIn();
      } else {
        wantMusic = false;
        localStorage.setItem(KEY, 'false');
        fadeOut();
      }
    };

    updateIcon();
    if (wantMusic) {
      fadeIn();
      const unlock = () => { if (audio.paused && wantMusic) fadeIn(); };
      ['click', 'touchstart', 'keydown', 'scroll'].forEach(e =>
        document.addEventListener(e, unlock, { once: true, passive: true })
      );
    }

    // === SPA Navigation ===
    let isNavigating = false;

    async function navigateTo(url) {
      if (isNavigating) return;
      isNavigating = true;

      try {
        const res = await fetch(url);
        if (!res.ok) throw new Error('fetch failed');
        const html = await res.text();
        const doc = new DOMParser().parseFromString(html, 'text/html');

        const newBg = doc.querySelector('.map-bg');
        const newH1 = doc.querySelector('.map-h1');
        const newContent = doc.querySelector('.map-content');
        const newTrack = doc.body?.dataset?.envTrack;

        if (!newBg || !newH1 || !newContent) throw new Error('parse failed');

        mapBox.style.opacity = '0';
        mapBox.style.transform = 'translateY(10px)';

        await new Promise(r => setTimeout(r, 200));

        const bgStyle = newBg.getAttribute('style');
        if (bgStyle) mapBg.setAttribute('style', bgStyle);

        mapH1.textContent = newH1.textContent;
        mapContent.innerHTML = newContent.innerHTML;

        bindLinks();

        history.pushState({}, '', url);
        document.title = doc.title || newH1.textContent + ' — Карта';

        await new Promise(r => setTimeout(r, 50));
        mapBox.style.opacity = '1';
        mapBox.style.transform = 'translateY(0)';

        if (newTrack) crossfadeTrack(newTrack);

      } catch (e) {
        console.error('SPA nav error:', e);
        window.location.href = url;
      } finally {
        isNavigating = false;
      }
    }

    function bindLinks() {
      mapContent.querySelectorAll('a').forEach(a => {
        const href = a.getAttribute('href');
        if (!href || !href.startsWith('/map')) return;
        a.addEventListener('click', e => {
          e.preventDefault();
          navigateTo(href);
        });
      });
    }

    mapBox.style.transition = 'opacity 0.2s ease, transform 0.2s ease';

    bindLinks();

    window.addEventListener('popstate', () => {
      navigateTo(location.pathname);
    });
  })();
  </script>

</body>
</html>