padding: 8px 10px; font-size: 14px; outline: none;
  }
  .filters input { flex: 1; min-width: 180px; }
  .code-lookup {
    background: rgba(26, 34, 56, .9); border: 1px solid var(--border); border-radius: 14px;
    padding: 12px; margin-bottom: 12px; box-shadow: var(--shadow);
  }
  .code-lookup .lookup-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .code-lookup input {
    flex: 1; min-width: 160px; background: var(--card); color: var(--text); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 12px; font-size: 15px; text-transform: uppercase; outline: none;
  }
  .code-lookup .lookup-result { margin-top: 10px; font-size: 13px; color: var(--muted); }
  .lookup-card {
    display: flex; gap: 10px; align-items: flex-start; justify-content: space-between;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px;
  }
  .lookup-card strong { color: var(--text); display: block; margin-bottom: 3px; }
  .lookup-card .lookup-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

  /* Sticker grid */
  .group-title { font-size: 13px; color: var(--muted); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .5px; }
  .login-card .mode.active { color: var(--accent); border-color: var(--accent); background: rgba(255,212,0,.08); }
  .login-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .login-card .err { color: #ffb6b6; font-size: 12px; margin-top: 6px; min-height: 16px; }
  .login-card .auth-actions { display: flex; gap: 8px; flex-wrap: wrap; }

  /* Reading the cards on top of the background */
  .stat, .row, .modal, .login-card, .sticker { background-image: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0)); }
  <div class="login-card">
    <div class="stars">🏆 ⚽ 📒</div>
    <h2>Figuritas Mundial 2026</h2>
    <div class="sub">Entrá con tu email y contanos en qué zona vivís para encontrar intercambios cerca tuyo.</div>
    <div class="sub">Entrá con tu email y contraseña para recuperar tu progreso cada vez que volvés.</div>
    <div class="modes">
      <div class="mode active" data-mode="local">Probar local</div>
      <div class="mode" data-mode="supabase">Conectar Supabase</div>
      <div class="mode active" data-mode="supabase">Online</div>
      <div class="mode" data-mode="local">Probar local</div>
    </div>
    <div class="form" id="loginForm">
      <label>Email
        <input id="loginEmail" type="email" inputmode="email" placeholder="tu@email.com" autocomplete="email" />
      </label>
      <label>Contraseña
        <input id="loginPassword" type="password" minlength="6" placeholder="Mínimo 6 caracteres" autocomplete="current-password" />
        <span class="help">En modo online se usa Supabase Auth. En modo local solo se guarda en este navegador.</span>
      </label>
      <label>Apodo
        <input id="loginName" placeholder="Cómo querés que te conozcan" />
      </label>
        <label>Supabase anon key
          <input id="loginSbKey" placeholder="eyJhbGciOi..."/>
        </label>
        <span class="help">Te enviamos un magic link al email para confirmar.</span>
        <span class="help">Activá Email/Password en Supabase Auth. La sesión queda recordada en este navegador.</span>
      </div>
      <div class="err" id="loginErr"></div>
      <div class="toolbar">
      <div class="toolbar auth-actions">
        <button class="btn primary" id="loginGo">Entrar</button>
        <button class="btn" id="signupGo">Crear cuenta</button>
      </div>
    </div>
  </div>
      <div class="stat"><div class="num" id="statMissing">0</div><div class="lbl">Faltan</div></div>
      <div class="stat"><div class="num" id="statDup">0</div><div class="lbl">Repetidas</div></div>
    </div>
    <div class="code-lookup">
      <div class="lookup-row">
        <input id="codeLookup" maxlength="7" placeholder="Código de figurita: ARG12 o ARG-012" autocomplete="off" />
        <button class="btn primary" id="codeSearch">Buscar</button>
      </div>
      <div class="lookup-result" id="codeResult">Ingresá el código para saber si te falta, la tenés pegada o está repetida para cambiar.</div>
    </div>
    <div class="filters">
      <input id="qAlbum" placeholder="Buscar nombre, número o equipo (ej: ARG, Messi, 045)" />
      <select id="catAlbum">

/* ---------- 2) Estado y persistencia ---------- */
const LS_KEY = "fig-wc2026-v2";
let state = {
const DEFAULT_STATE = {
  inv: {},                 // { stickerId: count }
  auth: { email:"", loggedIn:false, mode:"local" }, // mode: 'local' | 'supabase'
  auth: { email:"", loggedIn:false, mode:"supabase" }, // mode: 'local' | 'supabase'
  profile: { name:"", whats:"", city:"", country:"Argentina", zone:"", visibility:"public" },
  supabase: { url:"", key:"" }
};
function loadState() {
let state = makeDefaultState();

function makeDefaultState() {
  return {
    inv: {},
    auth: { ...DEFAULT_STATE.auth },
    profile: { ...DEFAULT_STATE.profile },
    supabase: { ...DEFAULT_STATE.supabase }
  };
}
function mergeSavedState(saved) {
  state = {
    ...makeDefaultState(),
    ...(saved || {}),
    inv: { ...((saved && saved.inv) || {}) },
    auth: { ...DEFAULT_STATE.auth, ...((saved && saved.auth) || {}) },
    profile: { ...DEFAULT_STATE.profile, ...((saved && saved.profile) || {}) },
    supabase: { ...DEFAULT_STATE.supabase, ...((saved && saved.supabase) || {}) }
  };
}
function userStateKey(email) {
  return `${LS_KEY}:user:${String(email || "").trim().toLowerCase()}`;
}
function loadState(key = LS_KEY) {
  try {
    const raw = localStorage.getItem(LS_KEY);
    if (raw) state = Object.assign(state, JSON.parse(raw));
    const raw = localStorage.getItem(key);
    if (raw) mergeSavedState(JSON.parse(raw));
  } catch(e){}
}
function saveState() { localStorage.setItem(LS_KEY, JSON.stringify(state)); }
function saveState() {
  localStorage.setItem(LS_KEY, JSON.stringify(state));
  if (state.auth.email) localStorage.setItem(userStateKey(state.auth.email), JSON.stringify(state));
}

/* ---------- 3) Util ---------- */
const $ = (s, r=document) => r.querySelector(s);
}
function closeModal(){ $("#modalBg").classList.remove("show"); modalSticker = null; }

function setStickerCount(id, count) {
  const cleanCount = Math.max(0, Math.min(99, Number(count) || 0));
  state.inv[id] = cleanCount;
  saveState();
  refreshStats();
  renderAlbum(); renderMissing(); renderDups();
  syncToSupabaseSticker(id, cleanCount);
  onlineMatches = null;
}

function normalizeStickerCode(raw) {
  const compact = String(raw || "").trim().toUpperCase().replace(/\s+/g, "").replace("-", "");
  const match = compact.match(/^([A-Z]{2,3})(\d{2,3})$/);
  if (!match) return "";
  const prefix = match[1];
  const num = String(Number(match[2])).padStart(3, "0");
  return `${prefix}-${num}`;
}

function statusForCount(count) {
  if (count >= 2) return `La tenés repetida: ${count - 1} disponible${count > 2 ? "s" : ""} para cambiar.`;
  if (count === 1) return "La tenés pegada en el álbum.";
  return "Te falta. La podés pegar cuando la consigas.";
}

function renderCodeLookup() {
  const result = $("#codeResult");
  const id = normalizeStickerCode($("#codeLookup").value);
  if (!id) {
    result.innerHTML = "Usá el formato de tres letras y dos números, por ejemplo ARG12. También sirve ARG-012.";
    return;
  }
  const s = STICKERS.find(x => x.id === id);
  if (!s) {
    result.innerHTML = `<div class="empty" style="padding:14px">No encontré la figurita ${id}. Revisá el código.</div>`;
    return;
  }
  const count = state.inv[s.id] || 0;
  result.innerHTML = `<div class="lookup-card">
    <div>
      <strong>${s.flag || ""} ${s.name}</strong>
      <div>#${String(s.num).padStart(3,"0")} · ${s.id} · ${labelCat(s.cat)}</div>
      <div>${statusForCount(count)}</div>
    </div>
    <div class="lookup-actions">
      <button class="btn" data-lookup-action="open" data-id="${s.id}">Ver</button>
      <button class="btn primary" data-lookup-action="paste" data-id="${s.id}">Pegar</button>
      <button class="btn" data-lookup-action="dup" data-id="${s.id}">+ repetida</button>
    </div>
  </div>`;
}

/* ---------- 6) Matches (demo + Supabase si hay) ---------- */
const DEMO_USERS = [
  { id:"demo-1", name:"Lucia",  zone:"Centro",          city:"Rosario",      country:"Argentina", whats:"5493415551234",
  $("#mMinus").addEventListener("click", () => { modalCount = Math.max(0, modalCount-1); $("#mVal").textContent = modalCount; });
  $("#mSave").addEventListener("click", () => {
    if (!modalSticker) return;
    state.inv[modalSticker.id] = modalCount;
    saveState();
    setStickerCount(modalSticker.id, modalCount);
    closeModal();
    refreshStats();
    renderAlbum(); renderMissing(); renderDups();
    syncToSupabaseSticker(modalSticker.id, modalCount);
    onlineMatches = null; // invalidar cache para próxima vista de matches
    toast("Guardado");
  });

  $("#codeLookup").addEventListener("input", renderCodeLookup);
  $("#codeLookup").addEventListener("keydown", (e) => {
    if (e.key === "Enter") renderCodeLookup();
  });
  $("#codeSearch").addEventListener("click", renderCodeLookup);
  $("#codeResult").addEventListener("click", (e) => {
    const btn = e.target.closest("[data-lookup-action]");
    if (!btn) return;
    const id = btn.dataset.id;
    const count = state.inv[id] || 0;
    if (btn.dataset.lookupAction === "open") openSticker(id);
    if (btn.dataset.lookupAction === "paste") {
      setStickerCount(id, Math.max(1, count));
      renderCodeLookup();
      toast("Marcada como pegada");
    }
    if (btn.dataset.lookupAction === "dup") {
      setStickerCount(id, Math.max(2, count + 1));
      renderCodeLookup();
      toast("Repetida agregada");
    }
  });

  // Faltantes
  $("#qMissing").addEventListener("input", renderMissing);
  $("#copyMissing").addEventListener("click", () => {
  });
  $("#logout").addEventListener("click", () => {
    if (!confirm("Cerrar sesión y volver al login? Tus datos del álbum quedan guardados.")) return;
    state.auth = { email:"", loggedIn:false, mode:"local" };
    if (sb) { sb.auth.signOut().catch(()=>{}); }
    state.auth = { email:"", loggedIn:false, mode: state.auth.mode || "supabase" };
    saveState();
    showLogin();
  });
  });
  $("#connectSB").addEventListener("click", async () => {
    state.supabase = { url: $("#sbUrl").value.trim(), key: $("#sbKey").value.trim() };
    state.auth.mode = "supabase";
    saveState();
    await initSupabase();
    if (sb && !currentUser && state.auth.email) {
      // disparar magic link al email actual
      try {
        await sb.auth.signInWithOtp({ email: state.auth.email, options: { emailRedirectTo: location.href } });
        toast(`Magic link enviado a ${state.auth.email}`);
      } catch(e) { alert("Error enviando magic link: " + e.message); }
      showLogin();
      toast("Ingresá tu contraseña para conectar");
    }
  });
  $("#disconnectSB").addEventListener("click", async () => {
    });
    updateSyncBtn();

    // Si volvemos del magic link, ya tenemos sesión persistida
    // Si hay una sesión persistida, recuperamos el usuario sin pedir login otra vez.
    const { data: { user } } = await sb.auth.getUser();
    if (user) {
      currentUser = user;
      await onAuthed();
    }

    // Listener para cuando confirme el magic link sin reload
    // Listener para cambios de sesión iniciados por Supabase Auth.
    sb.auth.onAuthStateChange(async (event, session) => {
      if (event === "SIGNED_IN" && session?.user) {
        currentUser = session.user;
}

async function onAuthed() {
  state.auth.email = currentUser.email || state.auth.email;
  state.auth.loggedIn = true;
  state.auth.mode = "supabase";
  saveState();
  updateSyncBtn();
  hideLogin();
  toast("Sesión iniciada");
  $("#loginBg").classList.remove("hidden");
  // Prefill if existing
  $("#loginEmail").value   = state.auth.email || "";
  $("#loginPassword").value = "";
  $("#loginName").value    = state.profile.name || "";
  $("#loginCity").value    = state.profile.city || "";
  $("#loginCountry").value = state.profile.country || "Argentina";
}
function isValidEmail(s) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s); }

function readLoginForm() {
  const email = $("#loginEmail").value.trim().toLowerCase();
  return {
    email,
    password: $("#loginPassword").value,
    profile: {
      name: $("#loginName").value.trim(),
      zone: $("#loginZone").value.trim(),
      city: $("#loginCity").value.trim(),
      country: $("#loginCountry").value.trim() || "Argentina",
      whats: $("#loginWhats").value.trim()
    }
  };
}

function validateLoginForm({ email, password, profile }, requirePassword = true) {
  if (!isValidEmail(email)) return "Ingresá un email válido.";
  if (requirePassword && password.length < 6) return "La contraseña debe tener al menos 6 caracteres.";
  if (!profile.zone) return "Decinos en qué zona vivís.";
  if (!profile.name) return "Poné un apodo para mostrar.";
  return "";
}

async function ensureSupabaseFromLogin() {
  state.supabase.url = $("#loginSbUrl").value.trim();
  state.supabase.key = $("#loginSbKey").value.trim();
  if (!state.supabase.url || !state.supabase.key) throw new Error("Completá URL y anon key, o probá modo local.");
  saveState();
  await initSupabase();
  if (!sb) throw new Error("No se pudo inicializar Supabase.");
}

function applyLoginProfile(email, profile, mode) {
  state.auth.email = email;
  state.auth.mode = mode;
  state.profile.name = profile.name;
  state.profile.zone = profile.zone;
  state.profile.city = profile.city;
  state.profile.country = profile.country;
  state.profile.whats = profile.whats;
}

function finishLocalLogin(email, profile) {
  const previousSupabase = { ...state.supabase };
  loadState(userStateKey(email));
  state.supabase = previousSupabase;
  applyLoginProfile(email, profile, "local");
  state.auth.loggedIn = true;
  saveState();
  hideLogin();
  refreshStats();
  go("album");
  toast(`¡Bienvenido${profile.name ? ", " + profile.name : ""}!`);
}

function bindLogin() {
  $$(".login-card .mode").forEach(m => m.addEventListener("click", () => setLoginMode(m.dataset.mode)));
  $("#loginGo").addEventListener("click", async () => {
    $("#loginErr").textContent = "";
    const email = $("#loginEmail").value.trim().toLowerCase();
    const name  = $("#loginName").value.trim();
    const zone  = $("#loginZone").value.trim();
    const city  = $("#loginCity").value.trim();
    const country = $("#loginCountry").value.trim() || "Argentina";
    const whats = $("#loginWhats").value.trim();
    if (!isValidEmail(email)) { $("#loginErr").textContent = "Ingresá un email válido."; return; }
    if (!zone)  { $("#loginErr").textContent = "Decinos en qué zona vivís."; return; }
    if (!name)  { $("#loginErr").textContent = "Poné un apodo para mostrar."; return; }
    const form = readLoginForm();
    const err = validateLoginForm(form, state.auth.mode === "supabase");
    if (err) { $("#loginErr").textContent = err; return; }

    if (state.auth.mode === "local") {
      finishLocalLogin(form.email, form.profile);
      return;
    }

    try {
      await ensureSupabaseFromLogin();
      applyLoginProfile(form.email, form.profile, "supabase");
      const { data, error } = await sb.auth.signInWithPassword({ email: form.email, password: form.password });
      if (error) throw error;
      currentUser = data.user;
      await onAuthed();
    } catch(e) {
      $("#loginErr").textContent = "No pudimos iniciar sesión: " + e.message;
    }
  });

  $("#signupGo").addEventListener("click", async () => {
    $("#loginErr").textContent = "";
    const form = readLoginForm();
    const err = validateLoginForm(form, state.auth.mode === "supabase");
    if (err) { $("#loginErr").textContent = err; return; }

    state.auth.email = email;
    state.profile.name = name;
    state.profile.zone = zone;
    state.profile.city = city;
    state.profile.country = country;
    state.profile.whats = whats;
    if (state.auth.mode === "local") {
      finishLocalLogin(form.email, form.profile);
      return;
    }

    if (state.auth.mode === "supabase") {
      state.supabase.url = $("#loginSbUrl").value.trim();
      state.supabase.key = $("#loginSbKey").value.trim();
      if (!state.supabase.url || !state.supabase.key) {
        $("#loginErr").textContent = "Completá URL y anon key, o probá modo local."; return;
      }
      saveState();
      try {
        await initSupabase();
        if (sb) {
          await sb.auth.signInWithOtp({ email, options: { emailRedirectTo: location.href } });
          $("#loginErr").innerHTML = `<span style="color:var(--good)">Te enviamos un magic link a ${email}. Revisá tu casilla y volvé.</span>`;
          // Continuamos en modo "logged in local" hasta que el link confirme
        }
      } catch(e) {
        $("#loginErr").textContent = "Error conectando Supabase: " + e.message; return;
    try {
      await ensureSupabaseFromLogin();
      applyLoginProfile(form.email, form.profile, "supabase");
      const { data, error } = await sb.auth.signUp({
        email: form.email,
        password: form.password,
        options: { data: { name: form.profile.name } }
      });
      if (error) throw error;
      if (data.session) {
        currentUser = data.user;
        await onAuthed();
      } else {
        currentUser = null;
        saveState();
        $("#loginErr").innerHTML = `<span style="color:var(--good)">Cuenta creada. Si Supabase pide confirmar email, revisá tu casilla antes de entrar.</span>`;
      }
    } else {
      saveState();
    } catch(e) {
      $("#loginErr").textContent = "No pudimos crear la cuenta: " + e.message;
    }
    state.auth.loggedIn = true;
    saveState();
    hideLogin();
    refreshStats();
    go("album");
    toast(`¡Bienvenido${name ? ", " + name : ""}!`);
  });
}

bind();
bindLogin();
refreshStats();
if (!state.auth.loggedIn || !state.auth.email) {
if (state.supabase.url && state.supabase.key) {
  initSupabase().then(() => {
    if (!currentUser && (!state.auth.loggedIn || !state.auth.email)) showLogin();
    else if (!currentUser && state.auth.loggedIn) { hideLogin(); go("album"); }
  });
} else if (!state.auth.loggedIn || !state.auth.email) {
  showLogin();
} else {
  hideLogin();
  go("album");
  initSupabase();
}
</script>
</body>