\n {children}\n

\n );\n}\n\nfunction ConfirmSecretModal({id,name,onOk,onCancel}){\n const cb='0.5px solid var(--color-border-tertiary)',ct='var(--color-text-tertiary)';\n return(\n \n

Confirmar selección

{name}

\n ¿Elegís a {name} como secreto?\n Una vez confirmado no podés cambiarlo.\n

\n \n \n

\n \n );\n}\n\nfunction ConfirmGuessModal({pkId,pkName,otherName,onOk,onCancel}){\n const cb='0.5px solid var(--color-border-tertiary)',ct='var(--color-text-tertiary)';\n return(\n \n

Confirmar adivinanza

\n ¿Estás seguro que este es el Pokémon secreto de {otherName}?\n

\n {pkName}\n #{pkId}\n

\n \n \n

\n \n );\n}\n\nfunction PokemonInfoModal({id,info,onClose}){\n const cb='0.5px solid var(--color-border-tertiary)',ct='var(--color-text-tertiary)',cs='var(--color-background-secondary)';\n const loading=!info||info.loading;\n return(\n \n

e.stopPropagation()}\n style={{background:'var(--color-background-primary)',borderRadius:22,maxWidth:600,width:'100%',border:cb,display:'flex',flexDirection:'column',maxHeight:'92vh'}}>\n

\n Info del Pokémon\n \n

\n {loading&&

⏳ Cargando...

}\n {!loading&&info.error&&

⚠️ Error al cargar.

}\n {!loading&&!info.error&&(\n <>\n {/* Header */}\n

#{String(info.number).padStart(3,'0')} · {GE[info.generation]||info.generation}

{info.name}

\n {info.types.map(t=>(\n \n {TE[t]||cap(t)}\n \n ))}\n

\n\n {/* Evolution chain */}\n

\n {info.evolutions.length<=1?\"Formas especiales\":\"Cadena evolutiva\"}\n

\n {info.evolutions.map((stage,si)=>(\n \n {si>0&&

→

}\n

\n {stage.map(pk=>(\n

{cap(pk.name)}

\n {pk.varieties&&pk.varieties.length>0&&(\n

\n {pk.varieties.map((v,vi)=>(\n

{v.label}

\n ))}\n

\n )}\n

\n ))}\n

\n \n ))}\n

\n {info.evolutions.length<=1&&info.evolutions[0]?.[0]?.varieties?.length===0&&(\n

Sin formas especiales (Mega / Gigantamax / Regionales).

\n )}\n \n )}\n

\n \n );\n}\n\n// ── DraggableSecretWindow ─────────────────────────────────────────────────────\nfunction DraggableSecretWindow({id,name,collapsed,onToggle}){\n const ct='var(--color-text-tertiary)';\n const ref=useRef(null);\n const drag=useRef(null);\n const [pos,setPos]=useState({x:12,y:null});\n\n const onDown=e=>{\n if(e.target.closest('button')||e.target.tagName==='BUTTON')return;\n const r=ref.current.getBoundingClientRect();\n drag.current={ox:e.clientX-r.left, oy:e.clientY-r.top};\n ref.current.setPointerCapture(e.pointerId);\n e.preventDefault();\n };\n const onMove=e=>{\n if(!drag.current)return;\n setPos({x:Math.max(0,e.clientX-drag.current.ox), y:Math.max(0,e.clientY-drag.current.oy)});\n };\n const onUp=()=>{ drag.current=null; };\n\n const fixedStyle={\n position:'fixed',\n left:pos.x,\n ...(pos.y!==null?{top:pos.y}:{bottom:82}),\n zIndex:90,\n maxWidth:210,\n touchAction:'none',\n userSelect:'none',\n };\n\n if(collapsed) return(\n

\n {name}\n ▸\n

\n );\n\n return(\n

\n ⠿ TU SECRETO\n

\n \n

{name}

#{id}

\n );\n}\n\n// ── App ───────────────────────────────────────────────────────────────────────\nfunction App(){\n const pid=useRef(mkId()).current;\n const pNumRef=useRef(null);\n const pollRef=useRef(null);\n const chatRef1=useRef(null);\n const chatRef2=useRef(null);\n const prevPhRef=useRef(null);\n const pState=useRef('idle');\n const pTimer=useRef(null);\n const pPos=useRef(null);\n const infoRef=useRef({});\n const [,fi]=useState(0); \n\n // Home\n const [homeStep,setHS]=useState('profile');\n const [myTrainer,setMT]=useState(null);\n const [trTab,setTrTab]=useState('m');\n // Room/game\n const [screen,setSc]=useState('home');\n const [myName,setMN]=useState('');\n const [joinIn,setJI]=useState('');\n const [code,setCode]=useState('');\n const [pNum,setPNum]=useState(null);\n const [room,setRoom]=useState(null);\n const [elim,setElim]=useState(new Set());\n const [secret,setSec]=useState(null);\n const [chatIn,setCI]=useState('');\n const [gMode,setGM]=useState(false);\n const [guessId,setGId]=useState(null);\n const [names,setNames]=useState({});\n const [err,setErr]=useState('');\n const [busy,setBusy]=useState(false);\n const [chatOpen,setCO]=useState(false);\n const [sideCol,setSC]=useState(false);\n const [genFrom,setGF]=useState(1);\n const [genTo,setGT]=useState(9);\n const [lastSeen,setLS]=useState(0);\n const [confPk,setConfPk]=useState(null);\n const [prevId,setPrevId]=useState(null);\n const [pressId,setPressId]=useState(null);\n const [secCol,setSecCol]=useState(false);\n\n useEffect(()=>{pNumRef.current=pNum;},[pNum]);\n useEffect(()=>()=>clearInterval(pollRef.current),[]);\n useEffect(()=>{[chatRef1,chatRef2].forEach(r=>{if(r.current)r.current.scrollTop=r.current.scrollHeight;});},[room?.messages?.length]);\n useEffect(()=>{if(chatOpen&&chatRef2.current)chatRef2.current.scrollTop=chatRef2.current.scrollHeight;},[chatOpen]);\n useEffect(()=>{if(screen==='waiting'&&room?.phase==='selecting')setSc('game');},[room?.phase,screen]);\n useEffect(()=>{if(chatOpen)setLS(room?.messages?.length||0);},[chatOpen,room?.messages?.length]);\n\n const fetchNames=async ids=>{\n const res=await Promise.allSettled(ids.map(id=>\n fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then(r=>r.json())\n .then(d=>[id,d.name[0].toUpperCase()+d.name.slice(1)]).catch(()=>[id,`#${id}`])\n ));\n setNames(p=>{const n={...p};res.forEach(r=>{if(r.status==='fulfilled')n[r.value[0]]=r.value[1];});return n;});\n };\n\n const localReset=(nr,poke)=>{\n setSec(null);setElim(new Set());setGM(false);setGId(null);setCI('');setLS(0);setCO(false);\n setConfPk(null);setPrevId(null);setPressId(null);setSecCol(false);\n if(nr)setRoom(nr);\n if(poke)fetchNames(poke);\n };\n\n const startPoll=c=>{\n clearInterval(pollRef.current);\n pollRef.current=setInterval(async()=>{\n const r=await rGet(`room:${c}`);if(!r)return;\n // Revancha\n if(r.phase==='ended'&&r.rematch?.p1&&r.rematch?.p2){\n if(pNumRef.current===1){\n const poke=pick40(r.genFrom||1,r.genTo||9);\n const u={...r,phase:'selecting',pokemon:poke,\n player1:{...r.player1,ready:false,secret:null},player2:{...r.player2,ready:false,secret:null},\n turn:'player1',waitingAnswer:false,messages:[],winner:null,rematch:{p1:false,p2:false}};\n await rSet(`room:${c}`,u);localReset(u,poke);\n }return;\n }\n if(prevPhRef.current==='ended'&&r.phase==='selecting'){localReset(r,r.pokemon);prevPhRef.current=r.phase;return;}\n prevPhRef.current=r.phase;\n if(r.phase==='selecting'&&r.player1?.ready&&r.player2?.ready){\n const u={...r,phase:'playing'};await rSet(`room:${c}`,u);setRoom(u);return;\n }\n setRoom(r);\n },POLL);\n };\n\n const createRoom=async()=>{\n if(!myName.trim())return setErr('Ingresá tu nombre primero');\n setBusy(true);setErr('');\n const c=mkCode(),poke=pick40(genFrom,genTo);\n const data={phase:'waiting',pokemon:poke,genFrom,genTo,\n player1:{id:pid,name:myName.trim(),trainer:myTrainer?.id||'red',ready:false,secret:null},\n player2:null,turn:'player1',waitingAnswer:false,messages:[],winner:null,rematch:{p1:false,p2:false}};\n await rSet(`room:${c}`,data);\n setCode(c);setPNum(1);setRoom(data);setSc('waiting');\n startPoll(c);fetchNames(poke);setBusy(false);\n };\n\n const joinRoom=async()=>{\n if(!myName.trim())return setErr('Ingresá tu nombre primero');\n const c=joinIn.trim().toUpperCase();\n if(!c)return setErr('Ingresá el código de sala');\n setBusy(true);setErr('');\n const r=await rGet(`room:${c}`);\n if(!r){setErr('Sala no encontrada');setBusy(false);return;}\n if(r.player2){setErr('La sala ya está llena');setBusy(false);return;}\n if(r.phase!=='waiting'){setErr('El juego ya empezó');setBusy(false);return;}\n const u={...r,phase:'selecting',player2:{id:pid,name:myName.trim(),trainer:myTrainer?.id||'leaf',ready:false,secret:null}};\n await rSet(`room:${c}`,u);\n setCode(c);setPNum(2);setRoom(u);setSc('game');\n startPoll(c);fetchNames(r.pokemon);setBusy(false);\n };\n\n const selectSecret=async id=>{\n if(secret!==null)return;\n const pk=pNumRef.current===1?'player1':'player2';\n setSec(id);\n const r=await rGet(`room:${code}`);if(!r)return;\n const u={...r,[pk]:{...r[pk],ready:true,secret:id}};\n if(u.player1?.ready&&u.player2?.ready)u.phase='playing';\n await rSet(`room:${code}`,u);setRoom(u);\n };\n\n const fetchAndPreview=async id=>{\n setPrevId(id);\n if(infoRef.current[id])return;\n infoRef.current[id]={loading:true};fi(v=>v+1);\n try{\n const [pk,sp]=await Promise.all([\n fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then(r=>r.json()),\n fetch(`https://pokeapi.co/api/v2/pokemon-species/${id}`).then(r=>r.json()),\n ]);\n const ch=await fetch(sp.evolution_chain.url).then(r=>r.json());\n const stages=flattenChain(ch.chain);\n const specRes=await Promise.allSettled(stages.flat().map(p=>fetch(`https://pokeapi.co/api/v2/pokemon-species/${p.id}`).then(r=>r.json())));\n let idx=0;\n const enriched=stages.map(stg=>stg.map(pk2=>{\n const res=specRes[idx++];\n const varieties=res.status==='fulfilled'\n ?res.value.varieties.filter(v=>!v.is_default)\n .map(v=>({name:v.pokemon.name,id:exId(v.pokemon.url),cat:varCat(v.pokemon.name),label:varLabel(v.pokemon.name)}))\n .filter(v=>v.cat!=='other')\n :[];\n return{...pk2,varieties};\n }));\n const name=sp.names.find(n=>n.language.name==='en')?.name||cap(pk.name);\n infoRef.current[id]={types:pk.types.map(t=>t.type.name),generation:sp.generation.name,number:sp.id,name,evolutions:enriched};\n }catch{infoRef.current[id]={error:true};}\n fi(v=>v+1);\n };\n\n const onPkDown=(e,id)=>{\n pState.current='pending';pPos.current={x:e.clientX,y:e.clientY};setPressId(id);\n pTimer.current=setTimeout(()=>{pState.current='long';setPressId(null);fetchAndPreview(id);},500);\n };\n const onPkMove=e=>{\n if(pState.current!=='pending'||!pPos.current)return;\n if(Math.hypot(e.clientX-pPos.current.x,e.clientY-pPos.current.y)>12){\n clearTimeout(pTimer.current);pState.current='cancelled';pPos.current=null;setPressId(null);\n }\n };\n const onPkUp=(e,id)=>{clearTimeout(pTimer.current);setPressId(null);if(pState.current==='pending')handleCard(id);pState.current='idle';pPos.current=null;};\n const onPkLeave=()=>{clearTimeout(pTimer.current);pState.current='idle';pPos.current=null;setPressId(null);};\n\n const handleCard=id=>{\n if(phase==='selecting'&&!secret){setConfPk(id);return;}\n if(phase!=='playing')return;\n if(gMode){if(id!==secret)setGId(id);}\n else setElim(p=>{const n=new Set(p);n.has(id)?n.delete(id):n.add(id);return n;});\n };\n\n const sendMsg=async()=>{if(!chatIn.trim())return;const pk=pNumRef.current===1?'player1':'player2';const r=await rGet(`room:${code}`);if(!r)return;await rSet(`room:${code}`,{...r,messages:[...r.messages,{from:pk,name:myName,type:'chat',text:chatIn.trim(),ts:Date.now()}]});setCI('');};\n const sendQ=async()=>{if(!chatIn.trim()||!canAsk)return;const pk=pNumRef.current===1?'player1':'player2';const r=await rGet(`room:${code}`);if(!r)return;await rSet(`room:${code}`,{...r,messages:[...r.messages,{from:pk,name:myName,type:'q',text:chatIn.trim(),ts:Date.now()}],waitingAnswer:true});setCI('');};\n const sendA=async(text,val)=>{const pk=pNumRef.current===1?'player1':'player2';const r=await rGet(`room:${code}`);if(!r)return;const nt=r.turn==='player1'?'player2':'player1';await rSet(`room:${code}`,{...r,messages:[...r.messages,{from:pk,name:myName,type:'a',text,val,ts:Date.now()}],waitingAnswer:false,turn:nt});};\n const makeGuess=async id=>{const pk=pNumRef.current===1?'player1':'player2';const ok=pNumRef.current===1?'player2':'player1';const r=await rGet(`room:${code}`);if(!r)return;const correct=r[ok]?.secret===id;const u={...r,messages:[...r.messages,{from:pk,name:myName,type:'guess',text:`Adivina: ${names[id]||'#'+id}`,correct,ts:Date.now()}]};if(correct){u.phase='ended';u.winner=pk;}else{u.waitingAnswer=false;u.turn=r.turn==='player1'?'player2':'player1';}await rSet(`room:${code}`,u);setRoom(u);setGM(false);setGId(null);};\n const requestRematch=async()=>{const pk=pNumRef.current===1?'p1':'p2';const r=await rGet(`room:${code}`);if(!r)return;await rSet(`room:${code}`,{...r,rematch:{...r.rematch,[pk]:true}});setRoom({...r,rematch:{...r.rematch,[pk]:true}});};\n const exitRoom=()=>{clearInterval(pollRef.current);prevPhRef.current=null;setSc('home');setHS('profile');setRoom(null);setElim(new Set());setSec(null);setGM(false);setGId(null);setCI('');setCode('');setPNum(null);setErr('');setConfPk(null);setPrevId(null);};\n\n const pKey=pNum===1?'player1':'player2';\n const oKey=pNum===1?'player2':'player1';\n const phase=room?.phase;\n const myTurn=!!pNum&&room?.turn===pKey;\n const canAsk=myTurn&&!room?.waitingAnswer&&phase==='playing';\n const canAns=!myTurn&&!!room?.waitingAnswer&&phase==='playing';\n const pokemon=room?.pokemon||[];\n const msgs=room?.messages||[];\n const myN=pNum===1?room?.player1?.name:room?.player2?.name;\n const otN=pNum===1?room?.player2?.name:room?.player1?.name;\n const myTrObj=getTrainer(pNum===1?room?.player1?.trainer:room?.player2?.trainer);\n const otTrObj=getTrainer(pNum===1?room?.player2?.trainer:room?.player1?.trainer);\n const secName=secret?(names[secret]||`#${secret}`):null;\n const oSecId=room?.[oKey]?.secret;\n const isWinner=room?.winner===pKey;\n const myRM=pNum===1?room?.rematch?.p1:room?.rematch?.p2;\n const otRM=pNum===1?room?.rematch?.p2:room?.rematch?.p1;\n const unread=msgs.slice(lastSeen).filter(m=>m.from!==pKey).length;\n\n const cb='0.5px solid var(--color-border-tertiary)';\n const ct='var(--color-text-tertiary)';\n const cs='var(--color-background-secondary)';\n const btn=(bg,fg='#fff',ex={})=>({padding:'9px 18px',background:bg,color:fg,border:'none',borderRadius:8,cursor:'pointer',fontWeight:500,fontSize:14,...ex});\n const outBtn=(ex={})=>({...btn('transparent','var(--color-text-primary)'),border:cb,...ex});\n\n const msgStyle=m=>{\n const isMe=m.from===pKey;\n if(m.type==='q')return{bg:'rgba(249,196,0,.18)',border:'0.5px solid rgba(249,196,0,.55)',label:'PREGUNTA',lc:'#b07d00'};\n if(m.type==='a'){const si=m.val==='si';return si?{bg:'var(--color-background-success)',border:'0.5px solid var(--color-border-success)',label:'SÍ',lc:'var(--color-text-success)'}:{bg:'var(--color-background-danger)',border:'0.5px solid var(--color-border-danger)',label:'NO',lc:'var(--color-text-danger)'};}\n if(m.type==='guess')return m.correct?{bg:'var(--color-background-success)',border:'0.5px solid var(--color-border-success)',label:'✓ CORRECTO',lc:'var(--color-text-success)'}:{bg:'var(--color-background-danger)',border:'0.5px solid var(--color-border-danger)',label:'✗ INCORRECTO',lc:'var(--color-text-danger)'};\n return isMe?{bg:'var(--color-background-info)',border:'0.5px solid var(--color-border-tertiary)',label:null,lc:null}:{bg:cs,border:'0.5px solid var(--color-border-tertiary)',label:null,lc:null};\n };\n\n let statusLabel='';\n if(phase==='selecting') statusLabel=!secret?'Click para elegir · Mantener para ver info':`${secName} elegido — esperando a ${otN||'rival'}...`;\n else if(phase==='playing'){\n if(gMode)statusLabel='ADIVINANZA — click en el Pokémon del rival';\n else if(canAsk)statusLabel='Tu turno — preguntá o adiviná';\n else if(canAns)statusLabel=`${otN} preguntó — ¡respondé!`;\n else statusLabel=`Turno de ${otN}...`;\n }\n\n const renderChat=ref=>(\n <>\n

\n {msgs.length===0&&

{phase==='selecting'?'Podés chatear mientras eligen.':phase==='playing'?(myTurn?'Es tu turno!':`Esperando a ${otN}...`):' '}

}\n {msgs.map((m,i)=>{const isMe=m.from===pKey,s=msgStyle(m);return(\n

\n {m.name}\n

\n {s.label&&

{s.label}

}\n {m.text}\n

\n );})}\n

\n {phase==='selecting'&&

{secret?`${secName} elegido.`:'Hacé click en un Pokémon del tablero'}

}\n {canAns&&

\n \n \n

}\n {(phase==='playing'||phase==='selecting')&&(\n <>\n

setCI(e.target.value)}\n              onKeyDown={e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();canAsk?sendQ():sendMsg();}}}/>\n            <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>\n              <button style={{...outBtn({flex:1,fontSize:13,padding:'8px'})}} onClick={sendMsg}>Enviar</button>\n              {canAsk&&!gMode&&<><button style={{...btn('#1d4ed8','#fff',{flex:1,fontSize:13,padding:'8px'})}} onClick={sendQ}>Preguntar</button><button style={{...btn('#7c3aed','#fff',{fontSize:13,padding:'8px 12px'})}} onClick={()=>setGM(true)}>Adivinar</button></>}\n              {canAsk&&gMode&&<button style={{...btn('#7c3aed','#fff',{flex:1,fontSize:13,padding:'8px'})}} onClick={()=>setGM(false)}>Cancelar</button>}\n            </div>\n            {canAsk&&!gMode&&<p style={{fontSize:10,color:ct,margin:0}}>\"Preguntar\" = pregunta oficial · \"Enviar\" = mensaje libre</p>}\n          </>\n        )}\n      </div>\n    </>\n  );\n\n  if(screen==='home') return(\n    <>\n      <style>{CSS}</style>\n      <div style={{display:'flex',alignItems:'flex-start',justifyContent:'center',minHeight:'100vh',padding:'20px 16px',background:'var(--color-background-tertiary)',fontFamily:\"'Segoe UI',system-ui,sans-serif\",overflowY:'auto'}}>\n        <div style={{background:'var(--color-background-primary)',border:cb,borderRadius:16,padding:'28px 24px',maxWidth:540,width:'100%'}}>\n          <div style={{textAlign:'center',marginBottom:20}}>\n            <svg width=\"48\" height=\"48\" viewBox=\"0 0 60 60\" style={{margin:'0 auto 12px',display:'block'}}>\n              <circle cx=\"30\" cy=\"30\" r=\"28\" fill={RED} stroke=\"#222\" strokeWidth=\"2\"/>\n              <path d=\"M2,30 Q2,2 30,2 Q58,2 58,30 Z\" fill={RED}/><path d=\"M2,30 Q2,58 30,58 Q58,58 58,30 Z\" fill=\"#fff\"/>\n              <rect x=\"2\" y=\"28.5\" width=\"56\" height=\"3\" fill=\"#222\"/>\n              <circle cx=\"30\" cy=\"30\" r=\"8\" fill=\"#fff\" stroke=\"#222\" strokeWidth=\"2\"/>\n              <circle cx=\"30\" cy=\"30\" r=\"4\" fill=\"#eee\"/>\n            </svg>\n            <h1 style={{margin:'0 0 4px',fontSize:20,fontWeight:700,color:'var(--color-text-primary)'}}>Pokémon: Quién es Quién</h1>\n            <p style={{color:ct,fontSize:13,margin:0}}>Adivina el Pokémon secreto de tu rival</p>\n          </div>\n\n          {homeStep==='profile'&&(\n            <div style={{display:'flex',flexDirection:'column',gap:12}}>\n              <label style={{fontSize:12,fontWeight:600,color:ct,letterSpacing:.5,textTransform:'uppercase'}}>Nombre de entrenador</label>\n              <input style={{width:'100%'}} placeholder=\"Ash, Misty, Gary...\" value={myName}\n                onChange={e=>{setMN(e.target.value);setErr('');}}\n                onKeyDown={e=>e.key==='Enter'&&myTrainer&&myName.trim()&&setHS('lobby')}/>\n\n              <label style={{fontSize:12,fontWeight:600,color:ct,letterSpacing:.5,textTransform:'uppercase',marginTop:4}}>Elige tu entrenador</label>\n              <div style={{display:'flex',border:cb,borderRadius:10,overflow:'hidden'}}>\n                {[{v:'m',l:'Varones'},{v:'f',l:'Mujeres'}].map(t=>(\n                  <button key={t.v} onClick={()=>setTrTab(t.v)}\n                    style={{flex:1,padding:'9px',border:'none',cursor:'pointer',fontSize:13,fontWeight:600,background:trTab===t.v?RED:'transparent',color:trTab===t.v?'#fff':'var(--color-text-secondary)',transition:'background .15s'}}>\n                    {t.l}\n                  </button>\n                ))}\n              </div>\n\n              <div className=\"tr-grid\">\n                {TRAINERS.filter(t=>t.gender===trTab).map(t=>(\n                  <div key={t.id} className={`tr-card${myTrainer?.id===t.id?' sel':''}`} onClick={()=>setMT(t)}>\n                    <img src={trImg(t.slug)} alt={t.name} onError={e=>{e.target.style.opacity='.15';e.target.style.filter='grayscale(1)';}}/>\n                    <span style={{fontWeight:myTrainer?.id===t.id?700:400}}>{t.name}</span>\n                  </div>\n                ))}\n              </div>\n\n              {myTrainer&&(\n                <div style={{display:'flex',alignItems:'center',gap:14,padding:'10px 14px',background:'var(--color-background-success)',border:'0.5px solid var(--color-border-success)',borderRadius:12}}>\n                  <img src={trImg(myTrainer.slug)} alt={myTrainer.name} style={{width:56,height:56,objectFit:'contain',imageRendering:'pixelated',flexShrink:0}} onError={e=>{e.target.style.opacity='.15';}}/>\n                  <div>\n                    <div style={{fontSize:13,fontWeight:700,color:'var(--color-text-success)'}}>Entrenador: {myTrainer.name}</div>\n                    {myName.trim()&&<div style={{fontSize:11,color:'var(--color-text-secondary)',marginTop:1}}>Nombre: {myName}</div>}\n                  </div>\n                </div>\n              )}\n\n              {err&&<p style={{margin:0,color:'var(--color-text-danger)',fontSize:13,fontWeight:500}}>{err}</p>}\n\n              <button\n                style={{...btn(myName.trim()&&myTrainer?RED:'var(--color-background-secondary)',myName.trim()&&myTrainer?'#fff':'var(--color-text-tertiary)',{width:'100%',padding:'12px',fontSize:15,marginTop:4})}}\n                onClick={()=>{if(!myName.trim())return setErr('Ingresá tu nombre primero');if(!myTrainer)return setErr('Elegí un entrenador');setHS('lobby');setErr('');}}>\n                Siguiente →\n              </button>\n            </div>\n          )}\n\n          {homeStep==='lobby'&&(\n            <div style={{display:'flex',flexDirection:'column',gap:12}}>\n              <div style={{display:'flex',alignItems:'center',gap:14,padding:'10px 14px',background:cs,borderRadius:12,border:cb}}>\n                <img src={trImg(myTrainer?.slug||'red')} alt={myTrainer?.name} style={{width:52,height:52,objectFit:'contain',imageRendering:'pixelated',flexShrink:0}} onError={e=>{e.target.style.opacity='.15';}}/>\n                <div style={{flex:1}}>\n                  <div style={{fontWeight:700,fontSize:15,color:'var(--color-text-primary)'}}>{myName}</div>\n                  <div style={{fontSize:11,color:ct}}>Entrenador: {myTrainer?.name}</div>\n                </div>\n                <button onClick={()=>setHS('profile')} style={{...outBtn({padding:'5px 10px',fontSize:12})}}>← Cambiar</button>\n              </div>\n\n              <label style={{fontSize:12,fontWeight:600,color:ct,letterSpacing:.5,textTransform:'uppercase'}}>Generaciones (al crear sala)</label>\n              <div className=\"sel-row\">\n                <span style={{fontSize:13,color:ct,flexShrink:0}}>Desde</span>\n                <select value={genFrom} style={{flex:1}} onChange={e=>{\n                  const v=+e.target.value;\n                  setGF(v);\n                  if(v>genTo) setGT(v);\n                }}>\n                  {GENS.map(g=><option key={g.gen} value={g.gen}>{g.label}</option>)}\n                </select>\n                <span style={{fontSize:13,color:ct,flexShrink:0}}>hasta</span>\n                <select value={genTo} style={{flex:1}} onChange={e=>{\n                  const v=+e.target.value;\n                  setGT(v);\n                  if(v<genFrom) setGF(v);\n                }}>\n                  {GENS.map(g=><option key={g.gen} value={g.gen}>{g.label}</option>)}\n                </select>\n              </div>\n              <div style={{fontSize:12,color:ct,background:cs,borderRadius:8,padding:'6px 10px'}}>\n                Pool: <strong style={{color:'var(--color-text-primary)'}}>{GENS[genTo-1].to-GENS[genFrom-1].from+1}</strong> Pokémon · Gen {genFrom}{genFrom!==genTo?` — Gen ${genTo}`:''}\n              </div>\n\n              {err&&<p style={{margin:0,color:'var(--color-text-danger)',fontSize:13,fontWeight:500}}>{err}</p>}\n\n              <button style={{...btn(RED,'#fff',{width:'100%',padding:'12px',fontSize:15,marginTop:4})}} onClick={createRoom} disabled={busy}>\n                {busy?'Creando sala...':'+ Crear sala nueva'}\n              </button>\n\n              <div style={{display:'flex',alignItems:'center',gap:10,margin:'2px 0'}}>\n                <div style={{flex:1,height:'0.5px',background:'var(--color-border-tertiary)'}}/>\n                <span style={{fontSize:12,color:ct}}>o unite a una sala existente</span>\n                <div style={{flex:1,height:'0.5px',background:'var(--color-border-tertiary)'}}/>\n              </div>\n\n              <input style={{width:'100%',letterSpacing:5,fontWeight:700,textTransform:'uppercase',fontSize:18,textAlign:'center'}}\n                placeholder=\"CODIGO\" value={joinIn}\n                onChange={e=>{setJI(e.target.value.toUpperCase());setErr('');}}\n                maxLength={5} onKeyDown={e=>e.key==='Enter'&&joinRoom()}/>\n              <button style={{...btn('#1d4ed8','#fff',{width:'100%',padding:'12px',fontSize:15})}} onClick={joinRoom} disabled={busy}>\n                {busy?'Uniéndome...':'Unirme a la sala'}\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n    </>\n  );\n\n  if(screen==='waiting') return(\n    <>\n      <style>{CSS}</style>\n      <div style={{display:'flex',alignItems:'center',justifyContent:'center',minHeight:'100vh',background:'var(--color-background-tertiary)',fontFamily:\"'Segoe UI',system-ui,sans-serif\"}}>\n        <div style={{background:'var(--color-background-primary)',border:cb,borderRadius:16,padding:'40px 36px',maxWidth:360,width:'90%',textAlign:'center'}}>\n          {myTrainer&&<img src={trImg(myTrainer.slug)} alt={myTrainer.name} style={{width:90,height:90,objectFit:'contain',imageRendering:'pixelated',display:'block',margin:'0 auto 14px'}} onError={e=>{e.target.style.opacity='.15';}}/>}\n          <h2 style={{margin:'0 0 8px',fontWeight:600}}>Esperando rival...</h2>\n          <p style={{color:ct,fontSize:14,margin:'0 0 22px'}}>Compartile este código a tu amigo:</p>\n          <div style={{background:RED,color:'#fff',borderRadius:12,padding:'20px 24px',fontSize:48,fontWeight:800,letterSpacing:14,marginBottom:20}}>{code}</div>\n          <p style={{color:ct,fontSize:13,margin:'0 0 20px'}}>Gen {room?.genFrom||1}{room?.genFrom!==room?.genTo?` — Gen ${room?.genTo||9}`:''} · {pokemon.length} Pokémon</p>\n          <button style={{...outBtn({width:'100%',fontSize:13})}} onClick={exitRoom}>Cancelar</button>\n        </div>\n      </div>\n    </>\n  );\n\n  return(\n    <>\n      <style>{CSS}</style>\n      <div className=\"app\">\n        <div style={{background:RED,color:'#fff',padding:'8px 16px',display:'flex',justifyContent:'space-between',alignItems:'center',gap:8,flexShrink:0}}>\n          <div style={{display:'flex',alignItems:'center',gap:10,flexShrink:0}}>\n            {myTrObj&&<img src={trImg(myTrObj.slug)} alt={myTrObj.name} className=\"tr-img\"\n              style={{width:52,height:52,borderRadius:10,border:'2px solid rgba(255,255,255,.4)',background:'rgba(255,255,255,.15)'}}\n              onError={e=>{e.target.style.opacity='.15';}}/>}\n            <span style={{fontWeight:700,fontSize:14}}>{myN}</span>\n          </div>\n          <span style={{fontSize:11,color:'#ffcdd2',flex:1,textAlign:'center',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',padding:'0 6px'}}>{statusLabel}</span>\n          <div style={{display:'flex',alignItems:'center',gap:10,flexShrink:0}}>\n            <span style={{fontWeight:700,fontSize:14}}>{otN||'?'}</span>\n            {otTrObj&&<img src={trImg(otTrObj.slug)} alt={otTrObj.name} className=\"tr-img\"\n              style={{width:52,height:52,borderRadius:10,border:'2px solid rgba(255,255,255,.4)',background:'rgba(255,255,255,.15)'}}\n              onError={e=>{e.target.style.opacity='.15';}}/>}\n          </div>\n        </div>\n\n        <div className=\"game-body\">\n          <div className=\"board-area\">\n            <div className=\"board-scroll\">\n              {phase==='selecting'&&!secret&&<div style={{padding:'9px 14px',background:'var(--color-background-warning)',border:'0.5px solid var(--color-border-warning)',borderRadius:9,marginBottom:10,fontSize:13,color:'var(--color-text-warning)',fontWeight:500}}>Click para elegir tu secreto · Mantener ~0.5s para ver info del Pokémon</div>}\n              {phase==='selecting'&&secret&&<div style={{padding:'9px 14px',background:'var(--color-background-success)',border:'0.5px solid var(--color-border-success)',borderRadius:9,marginBottom:10,fontSize:13,color:'var(--color-text-success)',fontWeight:500}}>{secName} elegido — esperando que {otN||'el rival'} elija...</div>}\n              {gMode&&<div style={{padding:'9px 14px',background:'var(--color-background-info)',border:'0.5px solid var(--color-border-info)',borderRadius:9,marginBottom:10,fontSize:13,color:'var(--color-text-info)',fontWeight:500}}>MODO ADIVINANZA — click en el Pokémon que creés que eligió {otN}</div>}\n              {phase==='playing'&&!gMode&&<div style={{padding:'7px 12px',background:cs,borderRadius:8,marginBottom:10,fontSize:12,color:ct}}>Click para tachar/destachar · Mantener para ver info del Pokémon</div>}\n\n              <div className=\"pk-grid\">\n                {pokemon.map(id=>{\n                  const isElim=elim.has(id),isPressing=pressId===id,clickable=phase==='selecting'||phase==='playing';\n                  return(\n                    <div key={id} className={`pk-card${isElim?' elim':''}${isPressing?' pressing':''}`}\n                      onPointerDown={e=>onPkDown(e,id)} onPointerMove={onPkMove}\n                      onPointerUp={e=>onPkUp(e,id)} onPointerLeave={onPkLeave} onPointerCancel={onPkLeave}\n                      onContextMenu={e=>e.preventDefault()}\n                      style={{background:cs,border:`0.5px solid ${gMode?'var(--color-border-info)':'var(--color-border-tertiary)'}`,cursor:clickable?'pointer':'default'}}>\n                      <img src={pkImg(id)} alt={names[id]||`#${id}`} style={{width:'100%',imageRendering:'pixelated',display:'block',pointerEvents:'none'}} loading=\"lazy\"/>\n                      <div style={{fontSize:10,color:ct,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',marginTop:4,pointerEvents:'none'}}>{names[id]||`#${id}`}</div>\n                      {isElim&&<div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center',borderRadius:12,pointerEvents:'none'}}>\n                        <svg width=\"52\" height=\"52\" viewBox=\"0 0 52 52\"><line x1=\"7\" y1=\"7\" x2=\"45\" y2=\"45\" stroke=\"var(--color-text-danger)\" strokeWidth=\"5\" strokeLinecap=\"round\"/><line x1=\"45\" y1=\"7\" x2=\"7\" y2=\"45\" stroke=\"var(--color-text-danger)\" strokeWidth=\"5\" strokeLinecap=\"round\"/></svg>\n                      </div>}\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          </div>\n\n          <div className={`chat-panel${sideCol?' col':''}`}>\n            <div style={{padding:'8px 10px',borderBottom:cb,display:'flex',alignItems:'center',justifyContent:sideCol?'center':'space-between',flexShrink:0,gap:6}}>\n              {!sideCol&&<span style={{fontWeight:600,fontSize:13}}>Chat</span>}\n              <button onClick={()=>setSC(p=>!p)} style={{...outBtn({padding:'4px 8px',fontSize:13}),lineHeight:1}}>{sideCol?'›':'‹'}</button>\n            </div>\n            {!sideCol&&renderChat(chatRef1)}\n          </div>\n        </div>\n\n        {secret&&phase!=='selecting'&&(\n          <DraggableSecretWindow id={secret} name={secName} collapsed={secCol} onToggle={()=>setSecCol(p=>!p)}/>\n        )}\n\n        <button className=\"chat-fab\" onClick={()=>setCO(p=>!p)}>\n          {unread>0&&!chatOpen&&<span style={{position:'absolute',top:-5,right:-5,background:'#fff',color:RED,borderRadius:'50%',fontSize:10,fontWeight:800,width:18,height:18,display:'flex',alignItems:'center',justifyContent:'center',border:`1px solid ${RED}`}}>{unread>9?'9+':unread}</span>}\n          💬\n        </button>\n\n        <div className={`chat-sheet${chatOpen?' open':''}`}>\n          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'12px 16px',borderBottom:cb,flexShrink:0}}>\n            <div style={{display:'flex',alignItems:'center',gap:8}}>\n              <span style={{fontWeight:600,fontSize:15}}>Chat</span>\n              {canAns&&<span style={{background:'var(--color-background-warning)',color:'var(--color-text-warning)',fontSize:11,fontWeight:700,borderRadius:6,padding:'2px 8px'}}>¡Respondé!</span>}\n              {canAsk&&<span style={{background:'var(--color-background-success)',color:'var(--color-text-success)',fontSize:11,fontWeight:700,borderRadius:6,padding:'2px 8px'}}>Tu turno</span>}\n            </div>\n            <button style={{...outBtn({padding:'5px 12px',fontSize:13})}} onClick={()=>setCO(false)}>Cerrar</button>\n          </div>\n          {renderChat(chatRef2)}\n        </div>\n\n        {phase==='ended'&&(\n          <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,.88)',display:'flex',alignItems:'center',justifyContent:'center',zIndex:200,padding:20,backdropFilter:'blur(5px)'}}>\n            <div style={{background:'var(--color-background-primary)',borderRadius:24,padding:'40px 28px',maxWidth:480,width:'100%',textAlign:'center',border:cb,maxHeight:'90vh',overflowY:'auto'}}>\n              <div style={{fontSize:72,marginBottom:8,lineHeight:1}}>{isWinner?'🏆':'😢'}</div>\n              <h1 style={{margin:'0 0 8px',fontSize:32,fontWeight:900,color:isWinner?'var(--color-text-success)':'var(--color-text-danger)',letterSpacing:-.5}}>{isWinner?'¡Ganaste!':'Perdiste...'}</h1>\n              <p style={{color:ct,fontSize:15,margin:'0 0 28px'}}>{isWinner?`Adivinaste el Pokémon de ${otN}`:`${otN} adivinó tu Pokémon`}</p>\n              {oSecId&&(\n                <div style={{display:'flex',justifyContent:'center',gap:16,marginBottom:30,flexWrap:'wrap',alignItems:'flex-end'}}>\n                  {[{trObj:myTrObj,pkId:secret,pkName:secName,label:'Tu secreto'},\n                    {trObj:otTrObj,pkId:oSecId,pkName:names[oSecId]||`#${oSecId}`,label:`Secreto de ${otN}`}].map((p,i)=>(\n                    <Fragment key={i}>\n                      {i===1&&<div style={{display:'flex',alignItems:'center',color:ct,fontSize:20,fontWeight:700,paddingBottom:16}}>VS</div>}\n                      <div style={{textAlign:'center'}}>\n                        <div style={{fontSize:10,color:ct,marginBottom:6,fontWeight:700,letterSpacing:.5,textTransform:'uppercase'}}>{p.label}</div>\n                        {p.trObj&&<img src={trImg(p.trObj.slug)} alt={p.trObj.name} style={{width:52,height:52,objectFit:'contain',imageRendering:'pixelated',display:'block',margin:'0 auto 4px'}} onError={e=>{e.target.style.opacity='.15';}}/>}\n                        <div style={{background:cs,borderRadius:14,padding:'12px 16px',display:'inline-block',border:cb,marginTop:4}}>\n                          <img src={pkImg(p.pkId)} alt={p.pkName} style={{width:80,imageRendering:'pixelated',display:'block',margin:'0 auto'}}/>\n                          <div style={{fontSize:13,marginTop:6,fontWeight:700}}>{p.pkName}</div>\n                          <div style={{fontSize:11,color:ct}}>#{p.pkId}</div>\n                        </div>\n                      </div>\n                    </Fragment>\n                  ))}\n                </div>\n              )}\n              <div style={{display:'flex',flexDirection:'column',gap:10}}>\n                {!myRM?<button style={{...btn(RED,'#fff',{fontSize:17,padding:'14px',width:'100%',borderRadius:12,fontWeight:800})}} onClick={requestRematch}>¡Revancha!</button>\n                :<div style={{padding:'14px',background:'var(--color-background-success)',borderRadius:12,fontSize:14,color:'var(--color-text-success)',fontWeight:600}}>{otRM?'Reiniciando...':`Esperando que ${otN} acepte...`}</div>}\n                <button style={{...outBtn({fontSize:15,padding:'12px',width:'100%',borderRadius:12})}} onClick={exitRoom}>Salir de la sala</button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Modals */}\n        {confPk!==null&&<ConfirmSecretModal id={confPk} name={names[confPk]||`#${confPk}`} onOk={()=>{selectSecret(confPk);setConfPk(null);}} onCancel={()=>setConfPk(null)}/>}\n        {guessId!==null&&<ConfirmGuessModal pkId={guessId} pkName={names[guessId]||`#${guessId}`} otherName={otN||'el rival'} onOk={()=>makeGuess(guessId)} onCancel={()=>setGId(null)}/>}\n        {prevId!==null&&<PokemonInfoModal id={prevId} info={infoRef.current[prevId]||null} onClose={()=>setPrevId(null)}/>}\n      </div>\n    </>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request) {\n  const url = new URL(request.url);\n  const { blob } = await import(\"https://esm.town/v/std/blob\");\n\n  if (url.pathname === \"/get\") {\n    const k = url.searchParams.get(\"k\");\n    try {\n      const data = await blob.getJSON(k);\n      return Response.json(data);\n    } catch {\n      return Response.json(null);\n    }\n  }\n  if (url.pathname === \"/set\") {\n    const k = url.searchParams.get(\"k\");\n    const v = await request.json();\n    await blob.setJSON(k, v);\n    return new Response(\"ok\");\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <meta charset=\"utf-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0\">\n        <title>Pokemon: Quien es Quien</title>\n        <style>\n          body { margin: 0; font-family: system-ui, sans-serif; background: #f9fafb; color: #111827; }\n          :root {\n            --color-background-primary: #ffffff;\n            --color-background-secondary: #f3f4f6;\n            --color-background-tertiary: #f9fafb;\n            --color-background-warning: #fefce8;\n            --color-background-success: #f0fdf4;\n            --color-background-danger: #fef2f2;\n            --color-background-info: #eff6ff;\n            --color-text-primary: #111827;\n            --color-text-secondary: #4b5563;\n            --color-text-tertiary: #6b7280;\n            --color-text-warning: #a16207;\n            --color-text-success: #15803d;\n            --color-text-danger: #b91c1c;\n            --color-text-info: #1d4ed8;\n            --color-border-secondary: #d1d5db;\n            --color-border-tertiary: #e5e7eb;\n            --color-border-warning: #fef08a;\n            --color-border-success: #bbf7d0;\n            --color-border-danger: #fecaca;\n            --color-border-info: #bfdbfe;\n          }\n        </style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, { headers: { \"content-type\": \"text/html\" } });\n}","deleted","label",[102],"permalink","https://www.val.town/x/tejadafacundo23/Pokemon/code/main.ts","extension","actionData","errors"]
</article></body></html>