<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover,user-scalable=no">
<meta name="theme-color" content="#2F241D">
<title>Дело №001</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style>
:root{--bg:#2F241D;--bg2:#4A372A;--paper:#F4E8D5;--ink:#2D2118;--muted:#7A6552;--red:#B7412E;--copper:#C66A2B;--copper2:#D9873B;--green:#5E8B58;--gold:#D6A443;--line:#D8C6AF}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);font-family:Georgia,"Times New Roman",serif}
body{overscroll-behavior:none}.app{height:100dvh;max-width:30rem;margin:auto;position:relative;overflow:hidden;color:var(--paper);background:radial-gradient(circle at 20% 10%,#d9873b22,transparent 28%),radial-gradient(circle at 80% 75%,#b7412e18,transparent 30%),linear-gradient(145deg,#2F241D,#251b16 60%,#4A372A);box-shadow:0 0 70px #0009}
.app:before{content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;background:repeating-linear-gradient(7deg,#fff1 0 1px,transparent 1px 12px)}
.screen{position:absolute;inset:0;padding:calc(4.8rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;opacity:0;transform:translateX(22%);pointer-events:none;transition:.5s cubic-bezier(.2,.8,.2,1)}
.screen.active{opacity:1;transform:none;pointer-events:auto}.screen.exit{opacity:0;transform:translateX(-24%) scale(.97)}
.paper{color:var(--ink);background:radial-gradient(circle at 10% 10%,#7a65520f,transparent 22%),linear-gradient(135deg,#ffffff88,#ffffff15),var(--paper);border:1px solid #d8c6afcc;box-shadow:0 18px 48px #0005,inset 0 1px #fff8}
.glass{background:#2f241dcc;border:1px solid #f4e8d524;backdrop-filter:blur(14px)}.btn{background:linear-gradient(135deg,var(--copper),var(--copper2));box-shadow:0 12px 28px #c66a2b55,inset 0 1px #fff5;transition:.2s}.btn:active{transform:scale(.965)}.btn:disabled{opacity:.35;box-shadow:none}.pulse{animation:pulse 2.1s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 14px 44px #d9873b88}}
.choice{transition:.22s}.choice:active{transform:scale(.975)}.choice.selected{border-color:var(--copper2);box-shadow:0 0 0 2px #d9873b44,0 18px 40px #0004;transform:translateY(-2px)}
.progress{height:5px;background:#f4e8d51f;border-radius:99px;overflow:hidden}.progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--copper),var(--gold));transition:width .5s}
.stamp{border:3px solid var(--red);color:var(--red);transform:rotate(-6deg);letter-spacing:.12em;font-weight:900;text-transform:uppercase}.fade{animation:fade .65s both}@keyframes fade{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.card{touch-action:none;user-select:none;cursor:grab;transition:.24s}.card.drag{transition:none;cursor:grabbing;z-index:30;box-shadow:0 28px 60px #0008}.folder{background:linear-gradient(145deg,#b77a3e,#90562a);box-shadow:0 18px 40px #0006,inset 0 1px #fff4;transition:.2s}.folder.hot{transform:translateX(-50%) scale(1.06);filter:brightness(1.15);box-shadow:0 0 0 3px #d6a44355,0 20px 50px #d6a44355}
.overlay{display:none;position:absolute;inset:0;z-index:80;background:#1a120edb;backdrop-filter:blur(12px);align-items:center;justify-content:center;padding:1rem}.overlay.show{display:flex}.scan{position:absolute;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:scan 1s infinite}@keyframes scan{from{top:24%}to{top:76%}}
.route{position:relative;display:flex;gap:1rem}.route:before{content:"";position:absolute;left:19px;top:40px;bottom:-26px;width:2px;background:linear-gradient(var(--copper2),#d8c6af22)}.route:last-child:before{display:none}.node{z-index:2;width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;background:var(--copper);box-shadow:0 0 0 5px #c66a2b33}.no-scroll::-webkit-scrollbar{display:none}.no-scroll{scrollbar-width:none}
.toast{position:absolute;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;z-index:100;transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
</style>
</head>
<body>
<main id="app" class="app">
<header class="absolute z-50 top-0 inset-x-0 px-4 pt-[calc(.7rem+env(safe-area-inset-top))] pointer-events-none"><div class="flex justify-between items-center text-[11px] uppercase tracking-[.18em] text-[#D8C6AF]/70"><span>Дело №001</span><button id="sound" class="pointer-events-auto w-9 h-9 rounded-full glass grid place-items-center" aria-label="Звук"><svg viewBox="0 0 24 24" class="w-4 h-4 fill-none stroke-current" stroke-width="1.8"><path d="M4 9v6h4l5 4V5L8 9H4Z"/><path id="waves" d="M16 9c1.5 1.7 1.5 4.3 0 6M19 6c3.2 3.3 3.2 8.7 0 12"/></svg></button></div><div class="progress mt-2"><i id="bar"></i></div></header>
<section class="screen active items-center justify-center text-center" data-s="intro"><div class="relative max-w-sm"><div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full glass text-[11px] uppercase tracking-[.2em]"><b class="w-2 h-2 rounded-full bg-[#B7412E] animate-pulse"></b>Материалы открыты</div><div class="paper mt-6 mx-auto w-24 h-24 rounded-3xl grid place-items-center rotate-[-4deg] fade"><svg viewBox="0 0 64 64" class="w-14 h-14 fill-none stroke-[#B7412E]" stroke-width="2"><circle cx="28" cy="28" r="16"/><path d="m40 40 13 13M21 28h14M28 21v14"/></svg></div><p class="mt-7 text-xs uppercase tracking-[.3em] text-[#D8C6AF]/70">Интерактивное расследование</p><h1 class="mt-3 text-4xl font-black">Дело №001</h1><h2 class="mt-2 text-2xl">В чём причина Ваших проблем?</h2><p class="mt-5 leading-relaxed text-[#D8C6AF]/80">Соберите следы, проверьте улики и найдите направление, с которого стоит начать расследование.</p><button data-go="brief" class="btn pulse mt-8 w-full rounded-2xl py-4 font-black text-lg">Открыть дело</button></div></section>
<section class="screen" data-s="brief"><div class="paper rounded-[1.8rem] p-6 my-auto relative"><div class="stamp absolute right-4 top-4 rounded px-2 py-1 text-[9px]">Конфиденциально</div><p class="text-[11px] uppercase tracking-[.2em] text-[#7A6552]">Инструктаж</p><h2 class="mt-3 text-3xl font-black">Перед началом расследования</h2><p class="mt-5 leading-relaxed">Здесь нет правильных или неправильных ответов.</p><p class="mt-4 font-bold text-[#B7412E]">Чем честнее будут Ваши ответы, тем точнее получится маршрут расследования.</p><p class="mt-4 text-sm text-[#7A6552]">Интерактив не ставит диагноз и не определяет окончательную первопричину.</p><button data-go="topic" class="btn mt-7 w-full rounded-2xl py-4 font-bold">Я готова начать</button></div></section>
<section class="screen" data-s="topic"><p class="text-xs uppercase tracking-[.2em] text-[#D8C6AF]/65">Этап 1 · Выбор темы</p><h2 class="mt-2 text-3xl font-black">Какое дело будем расследовать сегодня?</h2><p class="mt-3 text-[#D8C6AF]/75">Выберите тему, которая сейчас беспокоит Вас больше всего.</p><div id="topics" class="grid grid-cols-2 gap-3 mt-6"></div><button id="topicNext" disabled class="btn mt-auto w-full rounded-2xl py-4 font-bold">Продолжить расследование</button></section>
<section class="screen" data-s="traces"><div class="paper rounded-[1.8rem] p-6 my-auto"><p class="text-xs uppercase tracking-[.2em] text-[#7A6552]">Этап 2 · Следы</p><h2 class="mt-3 text-3xl font-black">Любая проблема оставляет следы.</h2><div id="traceText" class="mt-6 space-y-4 leading-relaxed"><p class="opacity-0">То, что Вы сегодня чувствуете, — это не сама проблема.</p><p class="opacity-0">Это следы причинно-следственных связей Ваших мыслей, эмоций, поступков и решений.</p><p class="opacity-0 font-bold text-[#B7412E]">Мы попробуем определить, что могло оставить эти следы.</p></div><button id="traceNext" class="btn mt-7 w-full rounded-2xl py-4 font-bold opacity-0">Искать следы</button></div></section>
<section class="screen" data-s="symptoms"><p class="text-xs uppercase tracking-[.2em] text-[#D8C6AF]/65">Этап 3 · Материалы дела</p><h2 class="mt-2 text-3xl font-black">Какие следы Вы замечаете?</h2><p class="mt-2 text-sm text-[#D8C6AF]/70">Можно выбрать несколько состояний.</p><div id="symptoms" class="mt-5 space-y-3 overflow-y-auto no-scroll pb-4"></div><button id="symptomsNext" disabled class="btn mt-auto w-full rounded-2xl py-4 font-bold">Добавить следы в материалы дела</button></section>
<section class="screen" data-s="evidence"><div class="flex justify-between items-end"><div><p class="text-xs uppercase tracking-[.2em] text-[#D8C6AF]/65">Этап 4 · Улики</p><h2 class="mt-2 text-3xl font-black">Проверьте утверждение</h2></div><span id="counter" class="text-xs text-[#D8C6AF]/65"></span></div><div id="hint" class="glass rounded-2xl p-4 mt-4 text-sm">Перетащите карточку в папку, если это похоже на Вас. Если нет — нажмите «Не про меня».</div><div class="relative flex-1 mt-4"><div id="ecard" class="card paper rounded-[1.7rem] p-6 absolute inset-x-0 top-0 min-h-[245px] flex flex-col justify-between"><div><span id="etag" class="text-[10px] uppercase tracking-[.2em] text-[#7A6552]"></span><h3 id="etext" class="mt-5 text-2xl font-black leading-snug"></h3></div><p class="text-sm text-[#7A6552]">Перетащите карточку вниз в папку.</p></div><div id="folder" class="folder absolute bottom-6 left-1/2 -translate-x-1/2 w-[84%] h-28 rounded-b-3xl rounded-t-xl grid place-items-center text-center"><div><svg viewBox="0 0 64 44" class="w-12 h-9 mx-auto fill-none stroke-white" stroke-width="2"><path d="M4 12h20l5 6h31v22H4zM4 12V5h18l5 7"/></svg><span class="block mt-1 text-xs uppercase tracking-[.2em]">Папка «Улики»</span></div></div></div><button id="reject" class="glass w-full rounded-2xl py-3.5 font-bold">Не про меня</button></section>
<section class="screen" data-s="context"><p class="text-xs uppercase tracking-[.2em] text-[#D8C6AF]/65">Этап 5 · Проверка версии</p><h2 class="mt-2 text-3xl font-black">С кем или с чем чаще связаны сильные эмоции?</h2><p class="mt-3 text-[#D8C6AF]/75">Выберите один или несколько вариантов.</p><div id="contexts" class="mt-5 grid grid-cols-2 gap-3 overflow-y-auto no-scroll pb-4"></div><button id="contextNext" disabled class="btn mt-auto w-full rounded-2xl py-4 font-bold">Проверить первую версию</button></section>
<section class="screen" data-s="experiment"><div class="paper rounded-[1.8rem] p-6 my-auto"><p class="text-xs uppercase tracking-[.2em] text-[#7A6552]">Этап 6 · Следственный эксперимент</p><h2 class="mt-3 text-3xl font-black">Проверьте найденную версию</h2><p id="experimentText" class="mt-5 leading-relaxed"></p><div class="mt-6 rounded-2xl border border-[#D8C6AF] bg-white/25 p-4"><p class="text-[10px] uppercase tracking-[.2em] text-[#7A6552]">Наблюдение на 24 часа</p><p id="experimentTask" class="mt-2 font-bold"></p></div><button id="finalBtn" class="btn mt-7 w-full rounded-2xl py-4 font-bold">Построить заключение</button></div></section>
<section class="screen px-0" data-s="final"><div class="overflow-y-auto no-scroll px-4 pb-12"><div class="text-center"><div class="inline-flex items-center gap-2 glass rounded-full px-3 py-1.5 text-[10px] uppercase tracking-[.18em]"><b class="w-2 h-2 bg-[#5E8B58] rounded-full"></b>Предварительное заключение</div><div class="relative w-28 h-28 mx-auto mt-5"><svg viewBox="0 0 120 120" class="w-full -rotate-90"><circle cx="60" cy="60" r="50" fill="none" stroke="#f4e8d51f" stroke-width="8"/><circle id="ring" cx="60" cy="60" r="50" fill="none" stroke="#D9873B" stroke-width="8" stroke-linecap="round" stroke-dasharray="314" stroke-dashoffset="314"/></svg><div class="absolute inset-0 grid place-items-center"><div><b id="score" class="text-3xl">0</b><small class="block text-[10px] uppercase tracking-[.14em] text-[#D8C6AF]/65">совпадений</small></div></div></div><h2 class="mt-4 text-3xl font-black">Следствие обнаружило закономерность</h2></div><div class="paper rounded-[1.8rem] p-5 mt-6"><p class="text-[10px] uppercase tracking-[.2em] text-[#7A6552]">Что проявилось чаще всего</p><h3 id="pTitle" class="mt-2 text-2xl font-black"></h3><p id="pDesc" class="mt-3 leading-relaxed"></p><hr class="my-5 border-[#D8C6AF]"><p class="text-[10px] uppercase tracking-[.2em] text-[#7A6552]">Где это проявляется</p><p id="where" class="mt-2 font-bold"></p><p id="impact" class="mt-4 text-[#7A6552]"></p><div class="mt-5 rounded-2xl bg-[#B7412E]/10 border border-[#B7412E]/20 p-4"><p class="text-[10px] uppercase tracking-[.2em] text-[#B7412E]">Первый шаг расследования</p><p id="first" class="mt-2 font-bold"></p></div></div><div class="mt-8"><p class="text-xs uppercase tracking-[.2em] text-[#D8C6AF]/65">Этап 7 · Персональный маршрут</p><h2 class="mt-2 text-3xl font-black">Ваш маршрут расследования</h2><p class="mt-3 text-[#D8C6AF]/75">Сегодня мы не раскрыли всю историю. Но нашли первый след.</p></div><div id="route" class="mt-6 space-y-5"></div><div class="glass rounded-[1.6rem] p-5 mt-8 text-sm text-[#D8C6AF]/80">По ограниченному объёму информации невозможно установить окончательную первопричину. Ответы помогают определить направление дальнейшего исследования.</div><a href="https://t.me/jonnnnster" target="_blank" rel="noopener" class="btn pulse mt-7 block w-full rounded-2xl py-4 text-center font-black text-lg">Продолжить расследование</a><button id="restart" class="glass mt-3 w-full rounded-2xl py-3.5 font-bold">Начать новое дело</button></div></section>
<div id="overlay" class="overlay"><div class="paper rounded-[1.8rem] p-6 w-full max-w-sm text-center relative overflow-hidden"><div class="scan"></div><svg viewBox="0 0 64 64" class="w-12 h-12 mx-auto fill-none stroke-[#B7412E]" stroke-width="2"><path d="M11 17h20l5 6h17v28H11zM16 30h32M16 37h24M16 44h19"/></svg><h3 id="otitle" class="mt-4 text-2xl font-black"></h3><p id="osub" class="mt-2 text-sm text-[#7A6552]"></p></div></div><div id="toast" class="toast stamp rounded-lg px-4 py-2 bg-[#F4E8D5] text-sm">Улика принята</div>
</main>
<script>
(()=>{"use strict";
const $=(s,r=document)=>r.querySelector(s),$$=(s,r=document)=>[...r.querySelectorAll(s)];
const state={topic:null,symptoms:[],accepted:[],contexts:[],index:0,sound:true,patterns:{safety:0,responsibility:0,desires:0,hurt:0,voice:0,analysis:0,meaning:0}};
const prog={intro:0,brief:8,topic:16,traces:28,symptoms:40,evidence:58,context:70,experiment:82,final:100};
const topics={relationships:{label:"Отношения",symptoms:["Обида, которую трудно отпустить","Ощущение одиночества рядом с близким","Постоянные конфликты или молчание","Страх потерять отношения","Чувство, что Вас не слышат","Усталость всё объяснять и спасать"],free:"Интерактив «Язык Вселенной»",paid:"«Тайны женской силы»",why:"Ваши ответы указывают на повторяющиеся эмоциональные реакции в отношениях.",result:"Вы сможете заметить закономерности в отношениях и определить первый шаг."},money:{label:"Деньги",symptoms:["Деньги быстро заканчиваются","Страх тратить даже на необходимое","Доход не растёт, несмотря на усилия","Постоянные непредвиденные расходы","Трудно называть цену за свою работу","Чувство вины, когда выбираете себя"],free:"Интерактив «Язык Вселенной»",paid:"«Благополучие»",why:"Финансовое напряжение может быть связано не только с внешними обстоятельствами, но и с привычными реакциями.",result:"Вы сможете увидеть установки, влияющие на финансовые решения."},health:{label:"Здоровье",symptoms:["Постоянная усталость","Напряжение в теле","Сон не приносит восстановления","Сил хватает только на обязательства","Повторяющиеся неприятные ощущения","Трудно остановиться и отдохнуть"],free:"Интенсив «Если ты устала»",paid:"«Энерготерапия»",why:"Сейчас важно исследовать, какие реакции поддерживают истощение.",result:"Вы сможете лучше понять источники потери энергии."},realization:{label:"Самореализация",symptoms:["Не понимаю, чего хочу","Откладываю важные шаги","Боюсь ошибиться и потерять время","Есть идеи, но нет энергии начать","Сравниваю себя с другими","Чувствую, что живу не свою жизнь"],free:"Интерактив «Язык Вселенной»",paid:"«Энергия перемен»",why:"Движение могут сдерживать повторяющиеся внутренние реакции и страх выбора.",result:"Вы сможете яснее увидеть, что мешает действовать."}};
const evidence=[["safety","Мне трудно расслабиться: кажется, что в любой момент может произойти что-то плохое."],["responsibility","Я часто беру на себя больше ответственности, чем действительно должна."],["desires","Мне проще отказаться от своих желаний, чем вызвать недовольство другого человека."],["hurt","Я возвращаюсь мыслями к ситуациям, в которых меня обидели или не поняли."],["voice","Я часто молчу о том, что чувствую, а потом переживаю это внутри."],["analysis","Я стараюсь заранее просчитать всё и долго ищу единственно правильное решение."],["meaning","Иногда я не понимаю, ради чего продолжаю делать то, что делаю."]];
const patterns={safety:["Ощущение небезопасности","Часть энергии может уходить на ожидание возможной угрозы.","Отмечайте моменты, когда Вы реагируете на предполагаемую опасность, а не на то, что происходит сейчас."],responsibility:["Чрезмерная ответственность","Повторяется необходимость держать всё под контролем и отвечать за результат других.","Понаблюдайте, где заканчивается Ваша ответственность и начинается ответственность другого человека."],desires:["Подавление собственных желаний","Можно предположить привычку отодвигать собственные потребности ради спокойствия других.","Замечайте ситуации, где Вы автоматически выбираете удобство других вместо своего желания."],hurt:["Эмоциональная боль и обида","Часть напряжения может поддерживаться непрожитыми чувствами.","Отделяйте сам факт события от выводов, которые Вы сделали после него."],voice:["Невысказанные чувства","Напряжение может возникать там, где чувства остаются внутри.","Замечайте момент, когда решаете промолчать, и чего опасаетесь."],analysis:["Чрезмерный анализ","Попытка получить полную уверенность до шага может удерживать Вас в постоянной проверке.","Выберите одну ситуацию и отделите факты от предположений."],meaning:["Потеря внутреннего смысла","Возможен разрыв между ежедневными действиями и тем, что имеет для Вас ценность.","Отметьте действие, которое продолжаете по привычке, хотя оно больше не связано с Вашими ценностями."]};
const contexts=["Партнёр","Родители","Дети","Работа","Окружающие люди","Отношение к себе"];
function tone(f=430,d=.06){if(!state.sound)return;try{const A=window.AudioContext||window.webkitAudioContext,c=tone.c||(tone.c=new A),o=c.createOscillator(),g=c.createGain();o.frequency.value=f;g.gain.value=.03;o.connect(g);g.connect(c.destination);o.start();g.gain.exponentialRampToValueAtTime(.001,c.currentTime+d);o.stop(c.currentTime+d)}catch(e){}}
function vib(x=20){navigator.vibrate&&navigator.vibrate(x)}
function go(n){const c=$(".screen.active"),nx=$(`[data-s="${n}"]`);if(c){c.classList.add("exit");setTimeout(()=>c.classList.remove("active","exit"),420)}setTimeout(()=>{nx.classList.add("active");$("#bar").style.width=(prog[n]||0)+"%";if(n==="traces")trace();if(n==="symptoms")renderSymptoms();if(n==="evidence")renderEvidence();if(n==="experiment")experiment();if(n==="final")final()},170)}
function analyze(n,t,s,delay=1300){$("#otitle").textContent=t;$("#osub").textContent=s;$("#overlay").classList.add("show");tone(280);setTimeout(()=>{$("#overlay").classList.remove("show");go(n)},delay)}
$$('[data-go]').forEach(b=>b.onclick=()=>{tone();vib();go(b.dataset.go)});$("#sound").onclick=()=>{state.sound=!state.sound;$("#waves").style.display=state.sound?"":"none";if(state.sound)tone(520)};
$("#topics").innerHTML=Object.entries(topics).map(([k,v])=>`<button data-topic="${k}" class="choice paper rounded-2xl p-4 min-h-[120px] text-left"><b class="text-xl">${v.label}</b><span class="block mt-8 text-xs uppercase tracking-[.18em] text-[#7A6552]">Открыть дело</span></button>`).join("");
$$('[data-topic]').forEach(b=>b.onclick=()=>{state.topic=b.dataset.topic;$$('[data-topic]').forEach(x=>x.classList.toggle('selected',x===b));$("#topicNext").disabled=false;tone();vib()});$("#topicNext").onclick=()=>analyze("traces","Материалы дела открыты…","Следствие фиксирует выбранную тему.");
function trace(){$$("#traceText p").forEach((p,i)=>setTimeout(()=>{p.classList.add("fade");p.style.opacity=1},300+i*600));setTimeout(()=>{$("#traceNext").classList.add("fade");$("#traceNext").style.opacity=1},2200)}$("#traceNext").onclick=()=>go("symptoms");
function renderSymptoms(){const a=topics[state.topic].symptoms;$("#symptoms").innerHTML=a.map(s=>`<button data-sym="${encodeURIComponent(s)}" class="choice paper rounded-2xl p-4 w-full text-left flex gap-3"><span class="w-7 h-7 rounded-full border-2 border-[#C66A2B] grid place-items-center">✓</span><b>${s}</b></button>`).join("");$$('[data-sym]').forEach(b=>b.onclick=()=>{const s=decodeURIComponent(b.dataset.sym),i=state.symptoms.indexOf(s);i>=0?state.symptoms.splice(i,1):state.symptoms.push(s);b.classList.toggle("selected");$("#symptomsNext").disabled=!state.symptoms.length;tone();vib()})}
$("#symptomsNext").onclick=()=>analyze("evidence","Найдено несколько следов.","Следующий этап поможет определить, какие из них важны.",1500);
function renderEvidence(){if(state.index>=evidence.length)return analyze("context","Следствие обнаружило закономерность.","Пора проверить первую версию.",1500);const e=evidence[state.index],c=$("#ecard");$("#counter").textContent=`Состояние ${state.index+1} из 7`;$("#etag").textContent=`Материал №${state.index+1}`;$("#etext").textContent=e[1];$("#hint").style.display=state.index?"none":"block";c.style.transform="translate3d(0,0,0)";c.style.opacity="1";c.classList.remove("drag")}
function toast(t){const x=$("#toast");x.textContent=t;x.classList.add("show");setTimeout(()=>x.classList.remove("show"),900)}
function accept(){const e=evidence[state.index],c=$("#ecard");state.accepted.push(e[0]);state.patterns[e[0]]+=2;c.style.transform="translate3d(0,280px,0) scale(.18) rotate(8deg)";c.style.opacity="0";$("#folder").classList.add("hot");toast("УЛИКА ПРИНЯТА");tone(220,.08);vib([20,30,20]);setTimeout(()=>{$("#folder").classList.remove("hot");state.index++;renderEvidence()},480)}
function reject(){const c=$("#ecard");c.style.transform="translate3d(-130%,0,0) rotate(-10deg)";c.style.opacity="0";tone(170);vib();setTimeout(()=>{state.index++;renderEvidence()},330)}$("#reject").onclick=reject;
const drag={on:false,sx:0,sy:0,x:0,y:0};function pt(e){const p=e.touches?.[0]||e.changedTouches?.[0]||e;return{x:p.clientX,y:p.clientY}}function ds(e){const p=pt(e);drag.on=true;drag.sx=p.x;drag.sy=p.y;$("#ecard").classList.add("drag")}function dm(e){if(!drag.on)return;if(e.cancelable)e.preventDefault();const p=pt(e);drag.x=p.x-drag.sx;drag.y=p.y-drag.sy;$("#ecard").style.transform=`translate3d(${drag.x}px,${drag.y}px,0) rotate(${drag.x/22}deg)`;const a=$("#ecard").getBoundingClientRect(),b=$("#folder").getBoundingClientRect();$("#folder").classList.toggle("hot",a.bottom>b.top+20)}function de(){if(!drag.on)return;drag.on=false;$("#ecard").classList.remove("drag");$("#folder").classList.remove("hot");if(drag.y>150)accept();else $("#ecard").style.transform="translate3d(0,0,0)"}
const card=$("#ecard");card.addEventListener("touchstart",ds,{passive:true});card.addEventListener("touchmove",dm,{passive:false});card.addEventListener("touchend",de);card.addEventListener("mousedown",ds);window.addEventListener("mousemove",dm);window.addEventListener("mouseup",de);
$("#contexts").innerHTML=contexts.map(c=>`<button data-context="${c}" class="choice paper rounded-2xl p-4 min-h-[92px] text-left font-bold">${c}</button>`).join("");$$('[data-context]').forEach(b=>b.onclick=()=>{const c=b.dataset.context,i=state.contexts.indexOf(c);i>=0?state.contexts.splice(i,1):state.contexts.push(c);b.classList.toggle("selected");$("#contextNext").disabled=!state.contexts.length;tone();vib()});$("#contextNext").onclick=()=>analyze("experiment","Проверяются версии…","Следственная доска дополняется новыми материалами.",1400);
function lead(){return Object.entries(state.patterns).sort((a,b)=>b[1]-a[1])[0][0]}function experiment(){const p=patterns[lead()];$("#experimentText").textContent=`Ответы позволяют предположить направление: «${p[0].toLowerCase()}». Это не окончательный вывод, а рабочая гипотеза.`;$("#experimentTask").textContent=p[2]}$("#finalBtn").onclick=()=>analyze("final","Строится маршрут расследования…","Материалы сопоставляются с рекомендациями.",1800);
function animateNum(el,to){const st=performance.now();function f(t){const p=Math.min(1,(t-st)/1100);el.textContent=Math.round(to*(1-Math.pow(1-p,3)));if(p<1)requestAnimationFrame(f)}requestAnimationFrame(f)}
function final(){const key=lead(),p=patterns[key],t=topics[state.topic],m=state.accepted.length+state.symptoms.length+state.contexts.length;$("#pTitle").textContent=p[0];$("#pDesc").textContent=p[1];$("#where").textContent=`Наиболее ярко — в сфере «${t.label.toLowerCase()}»${state.contexts.length?`, особенно: ${state.contexts.join(", ").toLowerCase()}`:""}.`;$("#impact").textContent=`Выбранные следы — ${state.symptoms.slice(0,3).join(", ").toLowerCase()} — могут сопровождать эту закономерность.`;$("#first").textContent=p[2];setTimeout(()=>$("#ring").style.strokeDashoffset=String(314-314*Math.min(1,m/18)),150);$("#ring").style.transition="stroke-dashoffset 1.4s cubic-bezier(.2,.9,.2,1)";animateNum($("#score"),m);
const route=[{type:"Первый шаг",title:t.free,kind:"Бесплатный материал",why:t.why,result:t.result},{type:"Дополнительный материал",title:"Персональная практика наблюдения",kind:"Практика",why:`Помогает проверить закономерность «${p[0].toLowerCase()}» в реальной ситуации.`,result:"Вы получите собственные наблюдения для следующего шага."},{type:"Следующий рекомендуемый шаг",title:t.paid,kind:"Платный продукт",why:`Соответствует теме «${t.label.toLowerCase()}» и выявленной закономерности.`,result:t.result},{type:"Дальнейший путь",title:"Новое расследование",kind:"Повторная проверка",why:"После прохождения этапа маршрут можно перестроить.",result:"Вы увидите следующий актуальный шаг."}];$("#route").innerHTML=route.map((r,i)=>`<div class="route"><div class="node">${i+1}</div><div class="paper rounded-2xl p-4 flex-1"><p class="text-[10px] uppercase tracking-[.18em] text-[#7A6552]">${r.type}</p><h3 class="mt-1 text-xl font-black">${r.title}</h3><p class="mt-1 text-xs font-bold text-[#B7412E]">${r.kind}</p><p class="mt-4 text-sm"><b>Почему рекомендуется:</b> ${r.why}</p><p class="mt-3 text-sm"><b>Ожидаемый результат:</b> ${r.result}</p>${i<3?'<a href="https://t.me/jonnnnster" target="_blank" rel="noopener" class="btn mt-4 block rounded-xl py-3 text-center font-bold">Перейти к материалу</a>':''}</div></div>`).join("")}
$("#restart").onclick=()=>location.reload();
})();
</script>
</body></html>