background:linear-gradient(145deg,var(--c1),var(--c2));
  box-shadow:inset 0 -75px 55px #0008;
  isolation:isolate;
  cursor:pointer;
}
.poster:before {
  content:attr(data-art);
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:clamp(42px,13vw,78px);
  opacity:.86;filter:drop-shadow(0 10px 12px #0006);
  z-index:-1;
}
.poster:after {
  content:"";position:absolute;inset:35% 0 0;
  background:linear-gradient(transparent,#08070dec);
  z-index:-1;
}
.postername {
  font-size:13px;font-weight:800;line-height:1.15;
  text-shadow:0 2px 8px #000;overflow-wrap:anywhere;
}
.rating {
  position:absolute;top:8px;left:8px;
  background:#09090fcb;border-radius:7px;
  padding:4px 6px;font-size:10px;font-weight:800;
}
.fav {
  position:absolute;top:7px;right:7px;
  width:29px;height:29px;border-radius:50%;
  background:#09090fc9;border:1px solid #ffffff2c;
  font-size:15px;display:grid;place-items:center;
}
.fav.on { color:#ff72c4; }
.meta { padding:8px 2px 0;cursor:pointer; }
.title {
  font-size:12px;font-weight:700;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sub { color:var(--muted);font-size:10px;margin-top:4px; }
.empty {
  padding:24px 14px;text-align:center;
  border:1px dashed #39354b;border-radius:15px;
  color:var(--muted);font-size:13px;line-height:1.5;
}
.empty b { display:block;color:#eee8fb;margin-bottom:5px; }
.bottomnav {
  position:fixed;bottom:0;left:0;right:0;z-index:20;
  background:#0e0d16f5;backdrop-filter:blur(20px);
  border-top:1px solid #ffffff12;
  padding:8px 7px calc(8px + env(safe-area-inset-bottom));
}
.navinner {
  max-width:650px;margin:auto;
  display:grid;grid-template-columns:repeat(5,1fr);
}
.navbtn {
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:transparent;color:#77758d;font-size:10px;
  padding:4px 0;border:0;
}
.navbtn .ico { font-size:20px;line-height:1.2; }
.navbtn.active { color:#c9adff; }
.scrolltop {
  display:flex;justify-content:space-between;
  align-items:center;padding:16px 2px 12px;
}
.scrolltop h2 { font-size:22px; }
.scrolltop span { color:#bca4f4;font-size:12px; }
.scrollcard {
  position:relative;max-width:520px;
  height:min(70dvh,720px);min-height:480px;
  margin:0 auto;border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;background:linear-gradient(145deg,#243a63,#c0784b);
  touch-action:pan-y;isolation:isolate;
}
.scrollart {
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:clamp(100px,28vw,160px);opacity:.8;
  z-index:-1;pointer-events:none;
}
.scrollshade {
  position:absolute;inset:30% 0 0;
  background:linear-gradient(transparent,#08070df5);
  z-index:-1;pointer-events:none;
}
.scrollinfo { position:relative; }
.scrollinfo h2 { font-size:30px;margin:12px 0 6px; }
.scrollinfo p { font-size:13px;color:#e2d9ee;margin:0 0 14px; }
.scrollactions { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px; }
.scrollactions button {
  background:#ffffff22;border:1px solid #ffffff3b;
  border-radius:12px;padding:10px 12px;font-size:12px;
}
.scrollactions button.liked { color:#ff85cd; }
.watchbtn {
  width:100%;padding:15px;border:0;border-radius:13px;
  background:linear-gradient(90deg,#9562ff,#bf59ff);
  font-size:14px;font-weight:850;
}
.swipehint { text-align:center;font-size:11px;color:#d0c4e1;margin-top:12px; }
.dots { display:flex;justify-content:center;gap:5px;margin:12px; }
.dot { height:4px;width:15px;background:#363044;border-radius:5px; }
.dot.active { background:#b18cff;width:24px; }
.modalback {
  position:fixed;inset:0;background:#000b;z-index:40;
  display:none;align-items:flex-end;justify-content:center;padding:10px;
}
.modalback.open { display:flex; }
.modal {
  width:min(100%,600px);max-height:92dvh;overflow:auto;
  background:#14131e;border:1px solid #3a354b;
  border-radius:23px;padding:16px;
}
.modalhead { display:flex;justify-content:space-between;align-items:center;margin-bottom:12px; }
.modalhead h2 { font-size:20px; }
.close {
  width:34px;height:34px;border-radius:50%;
  background:#292637;border:0;font-size:22px;
}
.detailhero { display:flex;gap:14px; }
.detailposter {
  width:34%;max-width:150px;aspect-ratio:2/3;flex:none;
  border-radius:14px;display:grid;place-items:center;font-size:60px;
}
.detailinfo { min-width:0; }
.detailinfo h3 { font-size:22px;line-height:1.1;margin:5px 0 8px; }
.detailinfo p { font-size:12px;line-height:1.5;color:var(--muted); }
.pillrow { display:flex;flex-wrap:wrap;gap:5px; }
.pill { background:#252235;color:#d3c9eb;border-radius:7px;padding:5px 7px;font-size:10px; }
.actions { display:flex;gap:7px;flex-wrap:wrap;margin-top:13px; }
.secondary {
  background:#252235;border:1px solid #3c3651;
  border-radius:11px;padding:10px 12px;font-size:11px;
}
.playerbox {
  margin-top:16px;background:#08080d;
  border:1px solid #333044;border-radius:15px;padding:13px;
}
.playerbox h4 { margin:0 0 7px;font-size:13px; }
.playerbox p { margin:0;color:var(--muted);font-size:11px;line-height:1.5; }
.playerbox video {
  width:100%;display:none;border-radius:10px;margin-top:10px;background:#000;
}
.sourceinput { display:flex;gap:7px;margin-top:10px; }
.sourceinput input {
  flex:1;min-width:0;background:#191824;border:1px solid #373248;
  border-radius:10px;color:white;padding:10px;font-size:11px;
}
.sourceinput button {
  border:0;border-radius:10px;background:#33264c;padding:0 12px;font-size:11px;
}
.notice {
  margin:20px 0;padding:12px 13px;
  background:#171522;border:1px solid #39304e;border-radius:13px;
  color:#bcb7ce;font-size:11px;line-height:1.55;
}
.notice strong { color:#e4d7ff; }
.toast {
  position:fixed;left:50%;bottom:95px;transform:translateX(-50%);
  background:#252136;border:1px solid #4a3c68;padding:10px 14px;
  border-radius:12px;font-size:12px;z-index:60;display:none;white-space:nowrap;
}
@media(min-width:560px) {
  main { padding:0 22px; }
  .grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 13px; }
  .poster { border-radius:16px; }
  .banner { min-height:245px; }
  .bannerart { font-size:130px; }
  .bannercontent { max-width:60%; }
}
</style>
</head>
<body>
<header>
  <div class="toprow">
    <div class="brand"><div class="logo">▶</div><span class="brandname">VibeCinema</span></div>
    <button class="profile" id="profileBtn" aria-label="Профиль">✦</button>
  </div>
</header>
<main>
<section class="page active" id="page-home">
  <div class="hero">
    <div class="eyebrow">Твоя личная киноволна</div>
    <h1>Что будем<br><span>смотреть сегодня?</span></h1>
    <p class="muted">Кино под твоё настроение. Отмечай любимое — и рекомендации будут учитывать твой вкус.</p>
    <div class="search">
      <input id="searchInput" placeholder="⌕ Фильм, сериал, аниме…" autocomplete="off">
      <select id="typeFilter">
        <option value="Все">Все типы</option><option>Фильм</option><option>Сериал</option><option>Аниме</option><option>Дорама</option><option>Мультфильм</option>
      </select>
    </div>
    <div class="chips" id="genreChips">
      <button class="chip active" data-genre="Все">Для тебя</button>
      <button class="chip" data-genre="Фантастика">Фантастика</button>
      <button class="chip" data-genre="Драма">Драма</button>
      <button class="chip" data-genre="Комедия">Комедия</button>
      <button class="chip" data-genre="Экшен">Экшен</button>
      <button class="chip" data-genre="Романтика">Романтика</button>
      <button class="chip" data-genre="Триллер">Триллер</button>
    </div>
  </div>
  <div class="section" id="featureSection">
    <div class="sectionhead"><h2>Выбор VibeCinema</h2><span class="muted">На сегодня</span></div>
    <div class="banner">
      <div class="bannerart">🎞️</div>
      <div class="bannercontent">
        <span class="tag">✦ ТВОЯ СЛЕДУЮЩАЯ ИСТОРИЯ</span>
        <h2>Найди то,<br>что зацепит</h2>
        <p class="muted">Листай ленту, сохраняй любимое и собирай свою коллекцию.</p>
        <button class="primary" onclick="setPage('scroll')">Открыть VibeScroll ↗</button>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="sectionhead"><h2>〰 Твоя волна</h2><button class="smallbtn" id="refreshWave">Обновить ↻</button></div>
    <div class="grid" id="waveGrid"></div>
  </div>
  <div class="section">
    <div class="sectionhead"><h2 id="catalogTitle">Популярное</h2><span class="muted" id="countLabel"></span></div>
    <div class="grid" id="catalogGrid"></div>
    <div class="empty" id="emptyState" style="display:none"><b>Пока ничего не нашлось</b>Попробуй другое название или сбрось фильтры.</div>
  </div>
  <div class="notice"><strong>Важно:</strong> сейчас каталог демонстрационный. Для настоящего просмотра нужно подключить разрешённый источник видео.</div>
</section>
<section class="page" id="page-catalog">
  <div class="hero">
    <div class="eyebrow">Исследуй истории</div><h1>Весь <span>каталог</span></h1>
    <p class="muted">Ищи по названию, выбирай тип и жанр.</p>
    <div class="search">
      <input id="catalogSearch" placeholder="⌕ Найти что-нибудь…">
      <select id="catalogType">
        <option value="Все">Все типы</option><option>Фильм</option><option>Сериал</option><option>Аниме</option><option>Дорама</option><option>Мультфильм</option>
      </select>
    </div>
    <div class="chips" id="catalogChips">
      <button class="chip active" data-genre="Все">Все</button><button class="chip" data-genre="Фантастика">Фантастика</button><button class="chip" data-genre="Драма">Драма</button><button class="chip" data-genre="Комедия">Комедия</button><button class="chip" data-genre="Экшен">Экшен</button><button class="chip" data-genre="Романтика">Романтика</button><button class="chip" data-genre="Триллер">Триллер</button>
    </div>
  </div>
  <div class="sectionhead"><h2 id="catalogPageTitle">Все произведения</h2><span class="muted" id="catalogPageCount"></span></div>
  <div class="grid" id="catalogPageGrid"></div>
  <div class="empty" id="catalogPageEmpty" style="display:none">Ничего не найдено. Попробуй изменить запрос.</div>
</section>
<section class="page" id="page-scroll">
  <div class="scrolltop"><h2>VibeScroll ✦</h2><span id="scrollCounter">1 / 18</span></div>
  <div class="scrollcard" id="scrollCard">
    <div class="scrollart" id="scrollArt">🚀</div><div class="scrollshade"></div>
    <div class="scrollinfo">
      <span class="tag" id="scrollType">Фильм · Фантастика</span>
      <h2 id="scrollTitle">Интерстеллар</h2>
      <p id="scrollDesc">Путешествие за пределы галактики ради будущего человечества.</p>
      <div class="scrollactions"><button id="scrollLike">♡ Нравится</button><button id="scrollSave">＋ Смотреть позже</button></div>
      <button class="watchbtn" id="scrollOpen">Перейти смотреть 👉</button>
      <div class="swipehint">↑ Свайпни вверх — следующий · вниз — назад</div>
    </div>
  </div>
  <div class="dots" id="scrollDots"></div>
  <p class="muted" style="text-align:center">Лайки помогают формировать твою волну.</p>
</section>
<section class="page" id="page-saved">
  <div class="hero"><div class="eyebrow">Твоя коллекция</div><h1>Моё <span>кино</span></h1><p class="muted">Всё, что лайкнул или сохранил на потом, остаётся на этом устройстве.</p></div>
  <div class="chips" id="savedChips"><button class="chip active" data-saved="all">Всё</button><button class="chip" data-saved="fav">Избранное</button><button class="chip" data-saved="later">Смотреть позже</button><button class="chip" data-saved="watched">Просмотрено</button></div>
  <div class="grid" id="savedGrid"></div>
  <div class="empty" id="savedEmpty" style="display:none"><b>Твоя коллекция пока пуста</b>Нажми ♡ на понравившемся произведении или сохрани его в VibeScroll.</div>
</section>
<section class="page" id="page-wave">
  <div class="hero"><div class="eyebrow">Рекомендации под тебя</div><h1>Моя <span>волна</span> 〰</h1><p class="muted">Отмечай понравившееся — и мы будем подбирать похожие жанры.</p><button class="primary" id="waveRefreshBig">Обновить подборку ↻</button></div>
  <div class="sectionhead"><h2>Подобрано для тебя</h2></div><div class="grid" id="wavePageGrid"></div>
</section>
</main>
<nav class="bottomnav"><div class="navinner">
  <button class="navbtn active" data-page="home"><span class="ico">⌂</span>Главная</button>
  <button class="navbtn" data-page="catalog"><span class="ico">▦</span>Каталог</button>
  <button class="navbtn" data-page="scroll"><span class="ico">▣</span>VibeScroll</button>
  <button class="navbtn" data-page="saved"><span class="ico">♡</span>Моё</button>
  <button class="navbtn" data-page="wave"><span class="ico">〰</span>Моя волна</button>
</div></nav>
<div class="modalback" id="modalBack"><div class="modal" role="dialog" aria-modal="true"><div class="modalhead"><h2 id="modalTitle">О произведении</h2><button class="close" id="closeModal">×</button></div><div id="modalContent"></div></div></div>
<div class="toast" id="toast"></div>

<script>
const movies = [
 {id:1,title:"Интерстеллар",year:2014,type:"Фильм",genres:["Фантастика","Драма"],rating:8.7,art:"🚀",c1:"#152f50",c2:"#986c62",desc:"Команда отправляется за пределы Земли, чтобы найти человечеству новый дом."},
 {id:2,title:"Начало",year:2010,type:"Фильм",genres:["Фантастика","Триллер"],rating:8.7,art:"🌀",c1:"#382b54",c2:"#b16a50",desc:"Вор проникает в сны людей и получает почти невозможное задание."},
 {id:3,title:"Человек-паук: Через вселенные",year:2018,type:"Мультфильм",genres:["Экшен","Фантастика"],rating:8.4,art:"🕷️",c1:"#511e42",c2:"#db643a",desc:"Майлз Моралес открывает для себя целую мультивселенную."},
 {id:4,title:"Твоё имя",year:2016,type:"Аниме",genres:["Романтика","Драма"],rating:8.4,art:"🌌",c1:"#373b75",c2:"#dc927e",desc:"Два незнакомца загадочным образом начинают меняться телами."},
 {id:5,title:"Атака титанов",year:2013,type:"Аниме",genres:["Экшен","Драма"],rating:9.1,art:"⚔️",c1:"#4d3b32",c2:"#9a6850",desc:"Люди сражаются за выживание за стенами, защищающими их от титанов."},
 {id:6,title:"Очень странные дела",year:2016,type:"Сериал",genres:["Фантастика","Триллер"],rating:8.6,art:"🚲",c1:"#352039",c2:"#b44739",desc:"Исчезновение мальчика раскрывает тайны маленького города."},
 {id:7,title:"Джентльмены",year:2019,type:"Фильм",genres:["Комедия","Экшен"],rating:7.8,art:"🕴️",c1:"#34463b",c2:"#a98b58",desc:"Криминальные интриги, сделки и неожиданные повороты."},
 {id:8,title:"Паразиты",year:2019,type:"Фильм",genres:["Триллер","Драма"],rating:8.5,art:"🏠",c1:"#273d32",c2:"#a7a17b",desc:"История двух семей превращается в непредсказуемую игру."},
 {id:9,title:"Магическая битва",year:2020,type:"Аниме",genres:["Экшен","Фантастика"],rating:8.5,art:"👹",c1:"#28213f",c2:"#7556a6",desc:"Юный герой вступает в мир проклятий и опасных сражений."},
 {id:10,title:"Слово пацана",year:2023,type:"Сериал",genres:["Драма"],rating:7.8,art:"🌆",c1:"#3d3331",c2:"#a46c52",desc:"Подростки ищут своё место в суровой реальности конца восьмидесятых."},
 {id:11,title:"Алиса в Пограничье",year:2020,type:"Сериал",genres:["Триллер","Экшен"],rating:7.7,art:"♠️",c1:"#302a44",c2:"#a44d67",desc:"Герои оказываются в пустом Токио, где жизнь зависит от игр."},
 {id:12,title:"Ход королевы",year:2020,type:"Сериал",genres:["Драма"],rating:8.5,art:"♟️",c1:"#4c342c",c2:"#bb9260",desc:"Одарённая шахматистка пытается победить соперников и собственные страхи."},
 {id:13,title:"Унесённые призраками",year:2001,type:"Аниме",genres:["Фантастика","Драма"],rating:8.6,art:"🐉",c1:"#234d48",c2:"#7da18a",desc:"Девочка попадает в загадочный мир духов и ищет путь домой."},
 {id:14,title:"Слава",year:2022,type:"Дорама",genres:["Драма","Триллер"],rating:8.2,art:"🌹",c1:"#422b3b",c2:"#9c6379",desc:"Женщина годами готовит план возмездия тем, кто разрушил её жизнь."},
 {id:15,title:"Безумный Макс: Дорога ярости",year:2015,type:"Фильм",genres:["Экшен"],rating:8.1,art:"🏜️",c1:"#75402a",c2:"#d58a44",desc:"Безумная погоня через пустыню в мире после катастрофы."},
 {id:16,title:"Скотт Пилигрим жмёт на газ",year:2023,type:"Аниме",genres:["Комедия","Романтика"],rating:7.7,art:"🎸",c1:"#412c66",c2:"#dc6097",desc:"Музыка, любовь и хаос в истории, полной неожиданных поворотов."},
 {id:17,title:"Одержимость",year:2014,type:"Фильм",genres:["Драма"],rating:8.5,art:"🥁",c1:"#362323",c2:"#b87540",desc:"Молодой барабанщик сталкивается с безжалостным преподавателем."},
 {id:18,title:"Тетрадь смерти",year:2006,type:"Аниме",genres:["Триллер","Фантастика"],rating:8.9,art:"📓",c1:"#211f2d",c2:"#6d465c",desc:"Тетрадь, позволяющая убивать, начинает опасную игру разума."}
];

const STORE = "vibecinema_v1";
let state = {fav:[],later:[],watched:[],likes:{},ratings:{}};
try {
 const saved = JSON.parse(localStorage.getItem(STORE));
 if(saved) state = {...state,...saved};
} catch(e) {}

let page = "home";
let genre = "Все";
let catalogGenre = "Все";
let savedTab = "all";
let scrollIndex = 0;
let currentMovie = null;
let toastTimer;

function persist(){
 try { localStorage.setItem(STORE,JSON.stringify(state)); } catch(e){}
}

function escapeHTML(value){
 return String(value).replace(/[&<>"']/g,c=>({
 "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"
 })[c]);
}

function toast(message){
 const el=document.getElementById("toast");
 el.textContent=message;
 el.style.display="block";
 clearTimeout(toastTimer);
 toastTimer=setTimeout(()=>el.style.display="none",2200);
}

function getMovie(id){return movies.find(m=>m.id===Number(id));}

function card(movie){
 const liked=state.fav.includes(movie.id);
 const colors=`--c1:${movie.c1};--c2:${movie.c2}`;
 return `<article class="moviecard">
 <div class="poster" style="${colors}" data-art="${movie.art}" onclick="openMovie(${movie.id})">
 <span class="rating">★ ${movie.rating}</span>
 <button class="fav ${liked?"on":""}" onclick="event.stopPropagation();toggleFav(${movie.id})" aria-label="В избранное">${liked?"♥":"♡"}</button>
 <div class="postername">${escapeHTML(movie.title)}</div>
 </div>
 <div class="meta" onclick="openMovie(${movie.id})">
 <div class="title">${escapeHTML(movie.title)}</div>
 <div class="sub">${movie.year} · ${escapeHTML(movie.type)}</div>
 </div></article>`;
}

function renderGrid(id,items){
 const el=document.getElementById(id);
 if(el) el.innerHTML=items.map(card).join("");
}

function score(movie){
 let n=0;
 movie.genres.forEach(g=>n+=(Number(state.likes[g])||0)*3);
 if(state.fav.includes(movie.id)) n+=4;
 if(state.watched.includes(movie.id)) n-=5;
 if(state.later.includes(movie.id)) n+=1;
 return n;
}

function recommendations(){
 const preferred=movies.filter(m=>state.fav.includes(m.id)||state.watched.includes(m.id));
 if(!preferred.length) return [...movies].sort((a,b)=>b.rating-a.rating).slice(0,6);
 return [...movies].filter(m=>!state.watched.includes(m.id))
 .sort((a,b)=>score(b)-score(a)||b.rating-a.rating).slice(0,6);
}

function filteredItems(search,type,selectedGenre){
 const q=(search||"").trim().toLowerCase();
 return movies.filter(m=>{
  const matchesText=!q||(m.title+" "+m.genres.join(" ")+" "+m.year).toLowerCase().includes(q);
  const matchesType=!type||type==="Все"||m.type===type;
  const matchesGenre=!selectedGenre||selectedGenre==="Все"||m.genres.includes(selectedGenre);
  return matchesText&&matchesType&&matchesGenre;
 });
}

function renderHome(){
 renderGrid("waveGrid",recommendations().slice(0,4));
 const items=filteredItems(
  document.getElementById("searchInput").value,
  document.getElementById("typeFilter").value,genre
 );
 renderGrid("catalogGrid",items);
 document.getElementById("countLabel").textContent=items.length+" шт.";
 document.getElementById("emptyState").style.display=items.length?"none":"block";
 document.getElementById("catalogTitle").textContent=
  document.getElementById("searchInput").value?"Результаты поиска":"Популярное";
}

function renderCatalog(){
 const items=filteredItems(
  document.getElementById("catalogSearch").value,
  document.getElementById("catalogType").value,catalogGenre
 );
 renderGrid("catalogPageGrid",items);
 document.getElementById("catalogPageCount").textContent=items.length+" шт.";
 document.getElementById("catalogPageTitle").textContent=
  document.getElementById("catalogSearch").value?"Результаты поиска":"Все произведения";
 document.getElementById("catalogPageEmpty").style.display=items.length?"none":"block";
}

function renderSaved(){
 let ids=[];
 if(savedTab==="fav") ids=state.fav;
 else if(savedTab==="later") ids=state.later;
 else if(savedTab==="watched") ids=state.watched;
 else ids=[...new Set([...state.fav,...state.later,...state.watched])];
 const items=ids.map(getMovie).filter(Boolean);
 renderGrid("savedGrid",items);
 document.getElementById("savedEmpty").style.display=items.length?"none":"block";
}

function renderWave(){
 renderGrid("wavePageGrid",recommendations());
}

function renderAll(){
 renderHome();
 renderCatalog();
 renderSaved();
 renderWave();
 updateScrollCard();
}
</script>


<script>
function setPage(name){
 page=name;
 document.querySelectorAll(".page").forEach(el=>el.classList.remove("active"));
 const target=document.getElementById("page-"+name);
 if(target) target.classList.add("active");
 document.querySelectorAll(".navbtn").forEach(btn=>{
  btn.classList.toggle("active",btn.dataset.page===name);
 });
 window.scrollTo({top:0,behavior:"smooth"});
 if(name==="home") renderHome();
 if(name==="catalog") renderCatalog();
 if(name==="saved") renderSaved();
 if(name==="wave") renderWave();
 if(name==="scroll") updateScrollCard();
}

function toggleFav(id){
 const movie=getMovie(id);
 if(!movie)return;
 const index=state.fav.indexOf(movie.id);
 if(index>=0){
  state.fav.splice(index,1);
  if(movie.genres) movie.genres.forEach(g=>state.likes[g]=Math.max(0,(state.likes[g]||0)-1));
  toast("Удалено из избранного");
 }else{
  state.fav.push(movie.id);
  movie.genres.forEach(g=>state.likes[g]=(state.likes[g]||0)+1);
  toast("Добавлено в избранное ♥");
 }
 persist();
 renderAll();
}

function toggleLater(id){
 const index=state.later.indexOf(Number(id));
 if(index>=0){
  state.later.splice(index,1);
  toast("Удалено из списка");
 }else{
  state.later.push(Number(id));
  toast("Сохранено на потом");
 }
 persist();
 renderAll();
 if(currentMovie) openMovie(currentMovie.id);
}

function markWatched(id){
 const n=Number(id);
 if(!state.watched.includes(n)) state.watched.push(n);
 persist();
 renderAll();
 toast("Отмечено как просмотренное ✓");
 if(currentMovie) openMovie(currentMovie.id);
}

function openMovie(id){
 const movie=getMovie(id);
 if(!movie)return;
 currentMovie=movie;
 document.getElementById("modalTitle").textContent=movie.title;
 const isFav=state.fav.includes(movie.id);
 const isLater=state.later.includes(movie.id);
 const isWatched=state.watched.includes(movie.id);
 document.getElementById("modalContent").innerHTML=`
 <div class="detailhero">
  <div class="detailposter" style="background:linear-gradient(145deg,${movie.c1},${movie.c2})">${movie.art}</div>
  <div class="detailinfo">
   <div class="pillrow"><span class="pill">★ ${movie.rating}</span><span class="pill">${movie.year}</span><span class="pill">${escapeHTML(movie.type)}</span></div>
   <h3>${escapeHTML(movie.title)}</h3>
   <div class="pillrow">${movie.genres.map(g=>`<span class="pill">${escapeHTML(g)}</span>`).join("")}</div>
   <p>${escapeHTML(movie.desc)}</p>
  </div>
 </div>
 <div class="actions">
  <button class="secondary" onclick="toggleFav(${movie.id})">${isFav?"♥ В избранном":"♡ В избранное"}</button>
  <button class="secondary" onclick="toggleLater(${movie.id})">${isLater?"✓ Сохранено":"＋ Смотреть позже"}</button>
  <button class="secondary" onclick="markWatched(${movie.id})">${isWatched?"✓ Просмотрено":"Отметить просмотренным"}</button>
 </div>
 <div class="playerbox">
  <h4>▶ Видеоплеер</h4>
  <p>Вставь прямую ссылку на видеофайл MP4 или WebM из источника, у которого есть разрешение на просмотр. Обычная ссылка на страницу фильма здесь не сработает.</p>
  <div class="sourceinput">
   <input id="videoURL" type="url" placeholder="https://example.com/video.mp4">
   <button onclick="playVideo()">Открыть</button>
  </div>
  <video id="videoPlayer" controls playsinline></video>
  <p id="videoStatus" style="margin-top:8px">Готов к воспроизведению.</p>
 </div>`;
 document.getElementById("modalBack").classList.add("open");
}

function closeMovie(){
 document.getElementById("modalBack").classList.remove("open");
 const video=document.getElementById("videoPlayer");
 if(video){video.pause();video.removeAttribute("src");video.load();}
 currentMovie=null;
}

function playVideo(){
 const input=document.getElementById("videoURL");
 const video=document.getElementById("videoPlayer");
 const status=document.getElementById("videoStatus");
 if(!input||!video||!status)return;
 let url;
 try{
  url=new URL(input.value.trim());
  if(!["http:","https:"].includes(url.protocol)) throw Error("bad URL");
 }catch(e){
  status.textContent="Введи корректную ссылку, начинающуюся с https:// или http://";
  return;
 }
 video.src=url.href;
 video.style.display="block";
 video.load();
 status.textContent="Если источник поддерживает прямое воспроизведение, нажми ▶. Если нет — проверь ссылку.";
 video.play().catch(()=>{status.textContent="Нажми ▶ на плеере. Источник также может блокировать воспроизведение.";});
}

function updateScrollCard(){
 const movie=movies[scrollIndex%movies.length];
 if(!movie)return;
 document.getElementById("scrollCounter").textContent=(scrollIndex+1)+" / "+movies.length;
 document.getElementById("scrollArt").textContent=movie.art;
 document.getElementById("scrollCard").style.background=
  `linear-gradient(145deg,${movie.c1},${movie.c2})`;
 document.getElementById("scrollTitle").textContent=movie.title;
 document.getElementById("scrollType").textContent=movie.type+" · "+movie.genres.join(" / ");
 document.getElementById("scrollDesc").textContent=movie.desc;
 const like=document.getElementById("scrollLike");
 like.textContent=state.fav.includes(movie.id)?"♥ Нравится":"♡ Нравится";
 like.classList.toggle("liked",state.fav.includes(movie.id));
 document.getElementById("scrollSave").textContent=
  state.later.includes(movie.id)?"✓ Сохранено":"＋ Смотреть позже";
 document.getElementById("scrollDots").innerHTML=movies.slice(0,12).map((m,i)=>
  `<span class="dot ${i===scrollIndex%12?"active":""}"></span>`).join("");
}

function nextScroll(direction=1){
 scrollIndex=(scrollIndex+direction+movies.length)%movies.length;
 updateScrollCard();
}

document.querySelectorAll(".navbtn").forEach(btn=>{
 btn.addEventListener("click",()=>setPage(btn.dataset.page));
});

document.getElementById("searchInput").addEventListener("input",renderHome);
document.getElementById("typeFilter").addEventListener("change",renderHome);
document.getElementById("catalogSearch").addEventListener("input",renderCatalog);
document.getElementById("catalogType").addEventListener("change",renderCatalog);

document.querySelectorAll("#genreChips .chip").forEach(btn=>{
 btn.addEventListener("click",()=>{
  genre=btn.dataset.genre;
  document.querySelectorAll("#genreChips .chip").forEach(b=>b.classList.toggle("active",b===btn));
  renderHome();
 });
});

document.querySelectorAll("#catalogChips .chip").forEach(btn=>{
 btn.addEventListener("click",()=>{
  catalogGenre=btn.dataset.genre;
  document.querySelectorAll("#catalogChips .chip").forEach(b=>b.classList.toggle("active",b===btn));
  renderCatalog();
 });
});

document.querySelectorAll("#savedChips .chip").forEach(btn=>{
 btn.addEventListener("click",()=>{
  savedTab=btn.dataset.saved;
  document.querySelectorAll("#savedChips .chip").forEach(b=>b.classList.toggle("active",b===btn));
  renderSaved();
 });
});

document.getElementById("refreshWave").addEventListener("click",()=>{
 renderHome();toast("Подборка обновлена 〰");
});
document.getElementById("waveRefreshBig").addEventListener("click",()=>{
 renderWave();toast("Твоя волна обновлена 〰");
});

document.getElementById("scrollLike").addEventListener("click",()=>{
 const movie=movies[scrollIndex%movies.length];
 toggleFav(movie.id);
 updateScrollCard();
});
document.getElementById("scrollSave").addEventListener("click",()=>{
 const movie=movies[scrollIndex%movies.length];
 toggleLater(movie.id);
 updateScrollCard();
});
document.getElementById("scrollOpen").addEventListener("click",()=>{
 openMovie(movies[scrollIndex%movies.length].id);
});

document.getElementById("closeModal").addEventListener("click",closeMovie);
document.getElementById("modalBack").addEventListener("click",e=>{
 if(e.target.id==="modalBack")closeMovie();
});
document.addEventListener("keydown",e=>{
 if(e.key==="Escape")closeMovie();
 if(page==="scroll"&&e.key==="ArrowUp")nextScroll(1);
 if(page==="scroll"&&e.key==="ArrowDown")nextScroll(-1);
});

let touchStartY=0;
const swipeCard=document.getElementById("scrollCard");
swipeCard.addEventListener("touchstart",e=>{
 touchStartY=e.changedTouches[0].screenY;
},{passive:true});
swipeCard.addEventListener("touchend",e=>{
 const delta=touchStartY-e.changedTouches[0].screenY;
 if(Math.abs(delta)>55)nextScroll(delta>0?1:-1);
},{passive:true});

document.getElementById("profileBtn").addEventListener("click",()=>{
 setPage("saved");
});

renderAll();
</script>
</body>
</html>



<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>