/* ---------- Contenidos de 2.º ---------- */
const TRABADAS=[["fre-sa","🍓"],["glo-bo","🎈"],["dra-gón","🐉"],["plá-ta-no","🍌"],["bru-ja","🧙"],["li-bro","📖"],["ca-bra","🐐"],["co-co-dri-lo","🐊"],["pla-to","🍽️"],["ti-gre","🐯"],["pla-ya","🏖️"],["fla-men-co","🦩"],["bi-ci-cle-ta","🚲"],["blu-sa","👚"],["glo-tón","😋"],["pro-fe-so-ra","👩‍🏫"],["cla-vel","🌺"],["tri-go","🌾"],["ne-gro","⚫"],["pla-ne-ta","🪐"],["sem-bra-do","🌱"],["crua-sán","🥐"]];
const RELLENO=["bri","cle","fla","gro","pli","tru","dre","cra","blo","gli"];
const CONTRARIOS=[["grande","pequeño"],["alto","bajo"],["día","noche"],["frío","calor"],["arriba","abajo"],["abierto","cerrado"],["lleno","vacío"],["rápido","lento"],["blanco","negro"],["alegre","triste"],["dentro","fuera"],["mucho","poco"],["nuevo","viejo"],["limpio","sucio"],["encender","apagar"],["subir","bajar"]];
const ESCRIBE=[["queso","keso","🧀"],["guitarra","gitarra","🎸"],["zapato","sapato","👞"],["ratón","raton","🐭"],["jirafa","girafa","🦒"],["cebra","zebra","🦓"],["hormiga","ormiga","🐜"],["huevo","uevo","🥚"],["girasol","jirasol","🌻"],["barco","varco","⛵"],["llave","yave","🔑"],["cerezas","zerezas","🍒"],["perro","pero","🐶"],["burro","buro","🫏"],["vaca","baca","🐮"],["helado","elado","🍦"],["guisantes","gisantes","🫛"],["quince","kince","1️⃣5️⃣"],["gorro","goro","🧢"],["caracol","karakol","🐌"],["búho","buho","🦉"],["árbol","arbol","🌳"]];
const PLURALES=[["pez","peces"],["ratón","ratones"],["flor","flores"],["lápiz","lápices"],["árbol","árboles"],["sol","soles"],["león","leones"],["casa","casas"],["perro","perros"],["mesa","mesas"],["tren","trenes"],["pan","panes"],["luz","luces"],["camión","camiones"],["reloj","relojes"],["nariz","narices"],["rey","reyes"],["mano","manos"],["papel","papeles"],["botón","botones"],["libro","libros"],["nuez","nueces"]];

const GAMES=[
  {id:"contrarios",s:"lengua",t:3,pic:"↔️",name:"Los contrarios",area:"Vocabulario",type:"match",help:"Toca una palabra y después su contraria."},
  {id:"trabadas",s:"lengua",t:3,pic:"🐉",name:"Sílabas trabadas",area:"bra, cla, tri…",type:"silabas",help:"Toca las sílabas en orden para formar la palabra."},
  {id:"escribe",s:"lengua",t:2,pic:"✏️",name:"¿Cómo se escribe?",area:"Ortografía",type:"quiz",help:"Mira el dibujo y toca la palabra bien escrita."},
  {id:"plural",s:"lengua",t:2,pic:"🐟",name:"Singular y plural",area:"Gramática",type:"quiz",help:"Toca el plural correcto."},
  {id:"decenas",s:"mates",t:1,pic:"🧮",name:"Decenas y unidades",area:"Números hasta 99",type:"quiz",help:"Cuenta las decenas y las unidades y toca el número."},
  {id:"calculo",s:"mates",t:1,pic:"🧠",name:"Cálculo mental",area:"Sumas y restas",type:"quiz",help:"Calcula de cabeza y toca el resultado."},
  {id:"clases",s:"naturales",t:2,pic:"🦎",name:"Clases de animales",area:"Mamíferos, aves, peces…",type:"quiz",help:"¿A qué grupo pertenece este animal?"},
  {id:"vocab",s:"english",t:0,pic:"🍎",name:"Food and animals",area:"Vocabulary",type:"quiz",help:"Look and choose the word."}
];
const CLASES=[["perro","🐶","mamífero"],["ballena","🐋","mamífero"],["murciélago","🦇","mamífero"],["vaca","🐮","mamífero"],["águila","🦅","ave"],["pingüino","🐧","ave"],["gallina","🐔","ave"],["loro","🦜","ave"],
  ["tiburón","🦈","pez"],["pez payaso","🐠","pez"],["sardina","🐟","pez"],["serpiente","🐍","reptil"],["tortuga","🐢","reptil"],["cocodrilo","🐊","reptil"],["lagarto","🦎","reptil"],["rana","🐸","anfibio"]];
const CLASE_WHY={mamífero:"Tiene pelo y toma leche de su madre.",ave:"Tiene plumas y pico.",pez:"Vive en el agua y respira por branquias.",reptil:"Tiene escamas y patas cortas o no tiene patas.",anfibio:"Nace en el agua y de mayor vive también en tierra."};
const VOCAB2=[["apple","🍎"],["banana","🍌"],["orange","🍊"],["bread","🍞"],["milk","🥛"],["egg","🥚"],["pizza","🍕"],["cake","🎂"],["lion","🦁"],["monkey","🐵"],["elephant","🐘"],["frog","🐸"],["pig","🐷"],["duck","🦆"],["horse","🐴"],["rabbit","🐰"]];

const $=s=>document.querySelector(s);
const board=$("#board");
const rand=(a,b)=>a+Math.floor(Math.random()*(b-a+1));
const pick=a=>a[rand(0,a.length-1)];
const shuffle=a=>{a=[...a];for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]]}return a};
const esc=s=>String(s).replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c]));

let current="trabadas", soundOn=true, actx=null;
function tone(ok){
  if(!soundOn) return;
  try{
    actx=actx||new (window.AudioContext||window.webkitAudioContext)();
    (ok?[660,880]:[220]).forEach((f,i)=>{const o=actx.createOscillator(),g=actx.createGain();o.type="sine";o.frequency.value=f;
      const t=actx.currentTime+i*.11;g.gain.setValueAtTime(.0001,t);g.gain.exponentialRampToValueAtTime(.18,t+.02);g.gain.exponentialRampToValueAtTime(.0001,t+.25);
      o.connect(g).connect(actx.destination);o.start(t);o.stop(t+.27)});
  }catch(e){}
}
function shake(el){el.classList.remove("shake");void el.offsetWidth;el.classList.add("shake")}
function dotsHtml(n,i,res,label){return `<div class="dots" aria-label="${label} ${i+1} de ${n}">${Array.from({length:n},(_,k)=>`<span class="dot ${k<i?(res[k]?"on":"miss"):""} ${k===i?"now":""}"></span>`).join("")}</div>`}

const SUBJ=[{id:"lengua",name:"Lengua"},{id:"mates",name:"Matemáticas"},{id:"naturales",name:"Ciencias de la Naturaleza"},{id:"english",name:"English"}];
const TRIM=["Todo el curso","1.er trimestre","2.º trimestre","3.er trimestre"]; let trim=0;
function renderNav(){
  $("#trims").innerHTML=TRIM.map((t,k)=>`<button data-t="${k}" aria-pressed="${k===trim}">${t}</button>`).join("");
  document.querySelectorAll("#trims button").forEach(b=>b.onclick=()=>{trim=+b.dataset.t;renderNav()});
  $("#games").innerHTML=SUBJ.map(s=>{const gs=GAMES.filter(g=>g.s===s.id&&(!trim||g.t===0||g.t===trim)).sort((a,b)=>a.t-b.t);
    return `<div class="subject" style="--c:var(--${s.id})"><h3>${s.name}</h3>${gs.length?gs.map(g=>`<button class="game" data-id="${g.id}" aria-pressed="${g.id===current}"><span class="pic" aria-hidden="true">${g.pic}</span><span><strong>${g.name}</strong><small>${g.area}</small><em class="chip">${g.t?["","1.er trim.","2.º trim.","3.er trim."][g.t]:"Todo el curso"}</em></span></button>`).join(""):`<p class="empty">Nada este trimestre</p>`}</div>`}).join("");
  document.querySelectorAll(".game").forEach(b=>b.onclick=()=>{current=b.dataset.id;renderNav();start()});
}
function head(g,extra=""){return `<div class="board-head"><div><h2>${g.name}</h2><p>${g.help}</p></div>${extra}</div>`}
function start(){const g=GAMES.find(x=>x.id===current);({match:playMatch,silabas:playSil,quiz:playQuiz})[g.type](g)}

function winScreen(g,score,total){
  const stars="⭐".repeat(Math.max(1,Math.round(score/total*5)));
  const msg=score===total?"¡Pleno! Lo habéis hecho genial.":score>=total*0.6?"¡Muy bien! Casi todo perfecto.":"¡Buen trabajo! Probad otra ronda.";
  board.innerHTML=head(g)+`<div class="win"><div class="stars" aria-label="${stars.length} estrellas">${stars}</div>
    <h3>${score} de ${total}</h3><p>${msg}</p><button class="primary" id="again">Otra ronda</button></div>`;
  $("#again").onclick=start;
}

/* ---------- Emparejar (contrarios) ---------- */
function playMatch(g){
  const set=shuffle(CONTRARIOS).slice(0,5), right=shuffle(set);
  board.innerHTML=head(g,`<div class="dots">${set.map(()=>'<span class="dot"></span>').join("")}</div>`)+
    `<div class="match"><div class="col">${set.map(p=>`<button class="tile" data-side="l" data-k="${esc(p[0])}"><span class="word">${esc(p[0])}</span></button>`).join("")}</div>
     <div class="col">${right.map(p=>`<button class="tile" data-side="r" data-k="${esc(p[0])}"><span class="word">${esc(p[1])}</span></button>`).join("")}</div></div>
     <p class="hint" id="hint"></p>`;
  let sel=null, done=0, fails=0;
  const dots=[...board.querySelectorAll(".dot")];
  board.querySelectorAll(".tile").forEach(t=>t.onclick=()=>{
    if(t.classList.contains("done")) return;
    if(!sel||sel.dataset.side===t.dataset.side){ if(sel) sel.classList.remove("sel"); sel=t; t.classList.add("sel"); $("#hint").textContent=""; return; }
    const a=sel; sel=null; a.classList.remove("sel");
    if(a.dataset.k===t.dataset.k){
      a.classList.add("done"); t.classList.add("done"); dots[done++].classList.add("on"); tone(true);
      $("#hint").textContent=pick(["¡Muy bien!","¡Genial!","¡Eso es!","¡Fenomenal!"]);
      if(done===set.length) setTimeout(()=>winScreen(g,Math.max(set.length-fails,1),set.length),700);
    }else{ fails++; tone(false); shake(a); shake(t); $("#hint").textContent="Esas no son contrarias. Probad otra vez."; }
  });
}

/* ---------- Sílabas trabadas ---------- */
function playSil(g){
  const R=6, words=shuffle(TRABADAS).slice(0,R); let i=0, score=0; const res=[];
  const next=()=>{
    if(i===R) return winScreen(g,score,R);
    const [w,e]=words[i], parts=w.split("-");
    const extra=shuffle(RELLENO.filter(s=>!parts.includes(s)))[0];
    const pool=shuffle([...parts,extra]);
    board.innerHTML=head(g,dotsHtml(R,i,res,"Palabra"))+
      `<div class="q"><div class="scene" style="font-size:clamp(70px,11vw,120px)">${e}</div>
       <div class="slots">${parts.map(()=>'<span class="slot"></span>').join("")}</div>
       <div class="opts">${pool.map((s,k)=>`<button class="opt syl" data-v="${esc(s)}" id="syl-${k}"><span class="word">${esc(s)}</span></button>`).join("")}</div>
       <p class="hint" id="hint">${parts.length} sílabas: ¡dad ${parts.length} palmadas!</p></div>`;
    const slots=[...board.querySelectorAll(".slot")]; let pos=0, tried=false;
    board.querySelectorAll(".syl").forEach(b=>b.onclick=()=>{
      if(b.disabled) return;
      if(b.dataset.v===parts[pos]){
        slots[pos].innerHTML=`<span class="word">${esc(parts[pos])}</span>`; slots[pos].classList.add("filled");
        b.disabled=true; b.classList.add("used"); pos++; tone(true);
        if(pos===parts.length){
          res[i]=!tried; if(!tried) score++;
          board.querySelectorAll(".syl").forEach(x=>x.disabled=true);
          $("#hint").innerHTML=`¡<span class="word" style="font-size:1.3em">${esc(parts.join(""))}</span>!`;
          i++; setTimeout(next,1300);
        }
      }else{ tried=true; tone(false); shake(b); $("#hint").textContent="Esa no va ahora. ¿Cómo sigue?"; }
    });
  };
  next();
}

/* ---------- Preguntas ---------- */
const ROUNDS=8;
function numOpts(r,min,max){
  const s=new Set([r]);
  shuffle([1,-1,10,-10,2,-2]).forEach(d=>{const c=r+d;if(s.size<3&&c>=min&&c<=max)s.add(c)});
  while(s.size<3){const c=r+rand(-5,5);if(c>=min&&c<=max)s.add(c)}
  return shuffle([...s]).map(String);
}
function wordOpts(list){return shuffle(list)}
function makeQ(id,used){
  if(id==="clases"){
    const [n,e,c]=pick(CLASES.filter(x=>!used.has(x[0]))); used.add(n);
    return {scene:`<div class="scene" style="font-size:clamp(70px,11vw,120px)">${e}</div><p class="word" style="margin:0">${esc(n)}</p>`,answer:c,opts:["mamífero","ave","pez","reptil","anfibio"],small:true,why:CLASE_WHY[c]};
  }
  if(id==="vocab"){
    const [w,e]=pick(VOCAB2.filter(x=>!used.has(x[0]))); used.add(w);
    return {scene:`<div class="scene" style="font-size:clamp(70px,11vw,120px)">${e}</div><p class="ask">What is it?</p>`,answer:w,opts:shuffle([w,...shuffle(VOCAB2.filter(x=>x[0]!==w)).slice(0,2).map(x=>x[0])]),small:true};
  }
  if(id==="escribe"){
    const [ok,bad,e]=pick(ESCRIBE.filter(x=>!used.has(x[0]))); used.add(ok);
    return {scene:`<div class="scene" style="font-size:clamp(70px,11vw,120px)">${e}</div><p class="ask">¿Cómo se escribe?</p>`,answer:ok,opts:wordOpts([ok,bad]),word:true};
  }
  if(id==="plural"){
    const [s,p]=pick(PLURALES.filter(x=>!used.has(x[0]))); used.add(s);
    const opts=[p];
    if(/[aeiou]$/.test(s)) opts.push(s+"es");
    else { opts.push(s+"s"); if(s.endsWith("z")) opts.push(s+"es"); }
    return {scene:`<p class="ask">un / una</p><p class="bigword">${esc(s)}</p><p class="ask">¿Cuál es el plural?</p>`,answer:p,opts:shuffle(opts),word:true};
  }
  if(id==="decenas"){
    const d=rand(1,9), u=rand(0,9), n=d*10+u;
    const tens=Array.from({length:d},()=>`<div class="ten">${"<i></i>".repeat(10)}</div>`).join("");
    const units=u?`<div class="units">${'<span class="unit"></span>'.repeat(u)}</div>`:"";
    const swap=u*10+d;
    const set=new Set([n]); if(u>0&&swap!==n) set.add(swap);
    numOpts(n,10,99).forEach(x=>{if(set.size<3)set.add(+x)});
    return {scene:`<div class="blocks">${tens}${units}</div>
      <div class="legend"><span><i class="sw" style="background:var(--petrol)"></i>${d} ${d===1?"decena":"decenas"}</span><span><i class="sw" style="background:var(--accent)"></i>${u} ${u===1?"unidad":"unidades"}</span></div>
      <p class="ask">¿Qué número es?</p>`,answer:String(n),opts:shuffle([...set].map(String))};
  }
  /* cálculo mental */
  const kind=rand(0,5); let a,b,op,r;
  if(kind===0){a=rand(10,89);b=10;op="+";}
  else if(kind===1){a=rand(20,99);b=10;op="−";}
  else if(kind===2){a=rand(1,6)*10;b=rand(1,9-a/10)*10;op="+";}
  else if(kind===3){a=rand(2,10);b=a;op="+";}
  else if(kind===4){a=rand(5,9);b=rand(11-a,9);op="+";}
  else {a=rand(11,18);b=rand(a-9,9);op="−";}
  r=op==="+"?a+b:a-b;
  return {scene:`<p class="prompt">${a} ${op} ${b} = ?</p>`,answer:String(r),opts:numOpts(r,0,100)};
}
function playQuiz(g){
  let i=0, score=0; const res=[], used=new Set();
  const next=()=>{
    if(i===ROUNDS) return winScreen(g,score,ROUNDS);
    const q=makeQ(g.id,used);
    board.innerHTML=head(g,dotsHtml(ROUNDS,i,res,"Pregunta"))+
      `<div class="q">${q.scene}<div class="opts">${q.opts.map(o=>`<button class="opt" data-v="${esc(o)}"${q.small?' style="font-size:clamp(22px,3.2vw,32px);font-family:var(--f-body);font-weight:700"':""}>${q.word?`<span class="word">${esc(o)}</span>`:esc(o)}</button>`).join("")}</div><p class="hint" id="hint"></p></div>`;
    let tried=false;
    board.querySelectorAll(".opt").forEach(b=>b.onclick=()=>{
      if(b.disabled) return;
      if(b.dataset.v===q.answer){
        b.classList.add("ok"); tone(true); res[i]=!tried; if(!tried) score++;
        board.querySelectorAll(".opt").forEach(x=>x.disabled=true);
        $("#hint").textContent=(tried?"¡Ahora sí!":"¡Correcto!")+(q.why?" "+q.why:"");
        i++; setTimeout(next,q.why?2000:900);
      }else{ tried=true; b.classList.add("bad"); b.disabled=true; tone(false); shake(b); $("#hint").textContent="Mmm… mirad otra vez."; }
    });
  };
  next();
}

/* ---------- Controles ---------- */
function setFont(lig){document.body.classList.toggle("imprenta",!lig);$("#f-lig").setAttribute("aria-pressed",lig);$("#f-imp").setAttribute("aria-pressed",!lig);
  try{localStorage.setItem("capireto-letra",lig?"lig":"imp")}catch(e){}}
$("#f-lig").onclick=()=>setFont(true);
$("#f-imp").onclick=()=>setFont(false);
$("#sound").onclick=e=>{soundOn=!soundOn;e.currentTarget.textContent="Sonido: "+(soundOn?"sí":"no");e.currentTarget.setAttribute("aria-pressed",soundOn)};
$("#full").onclick=()=>{try{const p=document.fullscreenElement?document.exitFullscreen():board.requestFullscreen();p&&p.catch&&p.catch(()=>{})}catch(e){}};
try{if(localStorage.getItem("capireto-letra")==="imp")setFont(false)}catch(e){}

renderNav(); start();