// Paleta de colores por nivel
const paletas = [
  ['#ff6b6b', '#ffd93d'],  // 0–2 clics
  ['#6bcb77', '#4d96ff'],  // 3–5 clics
  ['#c77dff', '#ff9e00'],  // 6–9 clics
  ['#00b4d8', '#e63946'],  // 10–14 clics
  ['#ffffff', '#000000'],  // 15+ clics
];

let clics = 0;

document.getElementById('canvas')
  .addEventListener('click', () => {
    clics++;

    // Tamaño del cuadrado: empieza grande, se achica
    const size = Math.max(4, 120 - clics * 6);

    // Elegir paleta según nivel
    const nivel = Math.floor(clics / 3);
    const [c1, c2] = paletas[Math.min(nivel, paletas.length - 1)];

    // Aplicar el patrón con repeating-linear-gradient
    canvas.style.background = `
      repeating-linear-gradient(
        45deg,
        ${c1} 0px,
        ${c1} ${size}px,
        ${c2} ${size}px,
        ${c2} ${size * 2}px
      )
    `;
  });