(function(){
  const cards=[...document.querySelectorAll('[data-game-card]')];
  const search=document.querySelector('[data-search]');
  const filters=[...document.querySelectorAll('[data-filter]')];
  const more=document.querySelector('[data-load-more]');
  let limit=24, active='all';
  function apply(){
    const q=(search&&search.value||'').trim().toLowerCase();
    let visible=0, matched=0;
    cards.forEach(c=>{
      const okCat=active==='all'||c.dataset.cat===active;
      const okText=!q||c.dataset.title.includes(q)||c.dataset.catTitle.includes(q);
      const ok=okCat&&okText;
      if(ok) matched++;
      if(ok && visible<limit){c.classList.remove('hide'); visible++;} else c.classList.add('hide');
    });
    if(more) more.style.display=matched>limit?'inline-flex':'none';
  }
  if(search) search.addEventListener('input',()=>{limit=24;apply();});
  filters.forEach(f=>f.addEventListener('click',()=>{filters.forEach(x=>x.classList.remove('active'));f.classList.add('active');active=f.dataset.filter;limit=24;apply();}));
  if(more) more.addEventListener('click',()=>{limit+=24;apply();});
  apply();
})();