(function(){
  function qs(s, root){return (root||document).querySelector(s)}
  function qsa(s, root){return Array.prototype.slice.call((root||document).querySelectorAll(s))}

  qsa('[data-toggle-pass], [data-login-toggle-pass]').forEach(function(btn){
    btn.addEventListener('click', function(){
      var id = btn.getAttribute('data-toggle-pass') || btn.getAttribute('data-login-toggle-pass');
      var input = document.getElementById(id);
      if(!input) return;
      var show = input.type === 'password';
      input.type = show ? 'text' : 'password';
      btn.classList.toggle('showing', show);
      if(btn.textContent.trim()==='⊘' || btn.textContent.trim()==='👁') btn.textContent = show ? '👁' : '⊘';
    });
  });

  var slider = qs('[data-home-slider]');
  if(slider){
    var cards = qsa('.banner-card', slider);
    var dots = qs('.slider-dots', slider);
    var active = 0;
    cards.forEach(function(card, i){
      var dot = document.createElement('button');
      if(i===0) dot.classList.add('active');
      dot.addEventListener('click', function(){show(i)});
      dots.appendChild(dot);
    });
    function show(i){
      cards.forEach(function(c){c.classList.remove('active')});
      qsa('button', dots).forEach(function(d){d.classList.remove('active')});
      active = i;
      cards[active].classList.add('active');
      qsa('button', dots)[active].classList.add('active');
    }
    if(cards.length>1) setInterval(function(){show((active+1)%cards.length)}, 3300);
  }

  var catButtons = qsa('[data-category-filter]');
  if(catButtons.length){
    catButtons.forEach(function(btn){
      btn.addEventListener('click', function(){
        var key = btn.getAttribute('data-category-filter');
        catButtons.forEach(function(b){b.classList.remove('active')});
        btn.classList.add('active');
        qsa('[data-game-item]').forEach(function(item){
          var cat = item.getAttribute('data-game-item');
          item.style.display = (key === 'all' || cat === key) ? '' : 'none';
        });
        qsa('[data-section-cat]').forEach(function(sec){
          var cat = sec.getAttribute('data-section-cat');
          sec.style.display = (key === 'all' || cat === key) ? '' : 'none';
        });
      });
    });
  }

  qsa('[data-open-task]').forEach(function(btn){
    btn.addEventListener('click', function(e){
      e.preventDefault();
      var modal = qs('#taskModal');
      if(modal) modal.classList.add('active');
    });
  });
  qsa('[data-close-modal]').forEach(function(btn){
    btn.addEventListener('click', function(){
      var m = btn.closest('.modal-mask');
      if(m) m.classList.remove('active');
    });
  });
  qsa('.modal-mask').forEach(function(mask){
    mask.addEventListener('click', function(e){ if(e.target === mask) mask.classList.remove('active'); });
  });

  qsa('[data-copy]').forEach(function(btn){
    btn.addEventListener('click', function(e){
      e.preventDefault();
      var txt = btn.getAttribute('data-copy');
      if(navigator.clipboard){ navigator.clipboard.writeText(txt); }
      var old = btn.getAttribute('data-old-text') || btn.textContent;
      btn.setAttribute('data-old-text', old);
      btn.textContent = 'Copied';
      setTimeout(function(){btn.textContent = old}, 1200);
    });
  });

  var add = qs('[data-add-desktop]');
  if(add){
    add.addEventListener('click', function(){
      add.textContent = 'Added';
      setTimeout(function(){ add.textContent = '→ Add to Desktop'; }, 1300);
    });
  }

  var authTabs = qs('[data-auth-tabs]');
  if(authTabs){
    var modeInput = qs('#loginMode');
    var phoneGroup = qs('#phoneGroup');
    var emailGroup = qs('#emailGroup');
    qsa('[data-mode]', authTabs).forEach(function(tab){
      tab.addEventListener('click', function(){
        qsa('[data-mode]', authTabs).forEach(function(t){ t.classList.remove('active'); });
        tab.classList.add('active');
        var mode = tab.getAttribute('data-mode');
        if(modeInput) modeInput.value = mode;
        if(phoneGroup) phoneGroup.classList.toggle('hidden', mode !== 'phone');
        if(emailGroup) emailGroup.classList.toggle('hidden', mode !== 'email');
        updateLoginButtonState();
      });
    });
  }

  function updateLoginButtonState(){
    var btn = qs('#loginSubmit');
    if(!btn) return;
    var modeInput = qs('#loginMode');
    var mode = modeInput ? modeInput.value : 'phone';
    var account = mode === 'email' ? qs('input[name="email"]') : qs('input[name="phone"]');
    var pass = qs('#password');
    var ok = account && pass && account.value.trim().length > 0 && pass.value.trim().length > 0;
    btn.classList.toggle('yellow-btn', ok);
    btn.classList.toggle('muted-btn', !ok);
  }

  if(qs('#loginSubmit')){
    qsa('input[name="phone"], input[name="email"], #password').forEach(function(inp){
      inp.addEventListener('input', updateLoginButtonState);
      inp.addEventListener('change', updateLoginButtonState);
    });
    updateLoginButtonState();
  }

})();
