\n 꾸미기 재료, 맛 재료, 마법 재료를 각각 하나씩 선택해야 합니다.
\n 어떤 재료를 넣느냐에 따라 다양한 모습으로 변신할 수 있어요.
\n 27가지의 모든 변신 모습을 찾아보세요!\n ";const l=document.createElement("button");l.className=styles.button,l.textContent="돌아가기",l.addEventListener("click",()=>handleStateChange("menu")),t.appendChild(n),t.appendChild(a),t.appendChild(l),e.appendChild(t),appRoot.appendChild(e)}function renderGameScreen(){appRoot.innerHTML="";const e=document.createElement("div");e.className=styles.container,e.style.backgroundImage="url('/meme.png')";const t=document.createElement("div");t.className="absolute top-4 right-4";const n=document.createElement("button");n.className="px-6 py-2 bg-pink-400 text-white font-bold rounded-full shadow-lg hover:bg-pink-500 transition-colors",n.textContent="메인으로",n.addEventListener("click",()=>handleStateChange("menu")),t.appendChild(n),e.appendChild(t);const a=document.createElement("div");a.className="flex flex-col lg:flex-row gap-8 items-center w-full max-w-6xl";const l=document.createElement("div");function m(e,t,n){const a=document.createElement("div");a.className="mb-6 w-full";const l=document.createElement("h3");l.className="text-2xl font-bold text-white mb-3 text-center",l.style.textShadow="1px 1px 2px #000",l.textContent=e;const m=document.createElement("div");return m.className="flex flex-wrap justify-center gap-4 bg-black bg-opacity-20 p-4 rounded-lg",t.forEach(e=>{const t=document.createElement("div");t.className="cursor-pointer transition-transform duration-300 rounded-lg",t.dataset.itemId=e.id;const a=document.createElement("img");a.src=e.image,a.alt=e.name,a.className="w-24 h-24 object-cover rounded-md";const l=document.createElement("p");l.className="text-white text-center text-sm mt-1 font-semibold",l.textContent=e.name,t.appendChild(a),t.appendChild(l),m.appendChild(t),t.addEventListener("click",()=>{selectedItems[n]=e,lastClickedItem=e,renderGameScreen()}),t.addEventListener("mouseenter",()=>{t.classList.add(styles.itemGlow)}),t.addEventListener("mouseleave",()=>{t.classList.remove(styles.itemGlow)}),selectedItems[n]&&selectedItems[n].id===e.id&&t.classList.add("transform","scale-110","border-4","border-pink-400")}),a.appendChild(l),a.appendChild(m),a}l.className="w-full lg:w-3/5",l.appendChild(m("꾸미기 재료",itemsData.decoration,"decoration")),l.appendChild(m("맛 재료",itemsData.flavor,"flavor")),l.appendChild(m("마법 재료",itemsData.magic,"magic"));const c=document.createElement("div");c.className="w-full lg:w-2/5 flex flex-col items-center";const o=document.createElement("div");o.className="w-64 h-64 bg-blue-900 rounded-full border-8 border-purple-500 flex items-center justify-center mb-6";const d=document.createElement("div");d.className="w-52 h-52 bg-cyan-400 rounded-full animate-pulse",o.appendChild(d);const s=document.createElement("div");s.className="bg-black bg-opacity-50 text-white p-4 rounded-lg text-center mb-6 min-h-[80px] w-full";const i=document.createElement("p");i.className="font-semibold",i.textContent="선택한 아이템:";const r=document.createElement("p");r.className="text-xl text-pink-300",r.textContent=lastClickedItem?lastClickedItem.name:"아이템을 선택해주세요.",s.appendChild(i),s.appendChild(r);const p=document.createElement("button"),g=Object.values(selectedItems).every(e=>null!==e);p.className=`${styles.button} ${g?"bg-green-500 hover:bg-green-600":"bg-gray-500 cursor-not-allowed"}`,p.disabled=!g,p.textContent=g?"물약 완성!":"재료를 모두 선택하세요",p.addEventListener("click",()=>{if(g){handleStateChange("result",`${selectedItems.decoration.id}_${selectedItems.flavor.id}_${selectedItems.magic.id}`)}else showMessage("모든 종류의 아이템을 하나씩 선택해주세요!")}),c.appendChild(o),c.appendChild(s),c.appendChild(p),a.appendChild(l),a.appendChild(c),e.appendChild(a),appRoot.appendChild(e)}function renderResultScreen(){appRoot.innerHTML="";const e=resultsMap[resultKey]||resultsMap.default,t=document.createElement("div");t.className=styles.container,t.style.backgroundImage="url('final.png')";const n=document.createElement("div");n.className="bg-white bg-opacity-80 p-10 rounded-2xl shadow-2xl text-center flex flex-col items-center relative",n.style.left="-300px";const a=document.createElement("h2");a.className="text-4xl font-bold text-pink-500 mb-4",a.textContent="변신 성공!";const l=document.createElement("p");l.className="text-2xl text-gray-800 mb-6",l.innerHTML=`당신은 「${e.name}」(으)로 변신했습니다!`;const m=document.createElement("img");m.src=e.image,m.alt=e.name,m.className="w-80 h-auto object-cover rounded-lg shadow-lg mb-8 border-4 border-pink-300";const c=document.createElement("button");c.className=styles.button,c.textContent="다시하기",c.addEventListener("click",()=>handleStateChange("playing")),n.appendChild(a),n.appendChild(l),n.appendChild(m),n.appendChild(c),t.appendChild(n),appRoot.appendChild(t)}function renderApp(){switch(gameState){case"playing":renderGameScreen();break;case"howToPlay":renderHowToPlay();break;case"result":renderResultScreen();break;default:renderMainMenu()}renderMessageModal()}window.onload=renderApp