import {ITEMS,RECIPES,ZONES,QUESTS,SPECIES,BAG_TYPES} from './content.mjs';
import {loadArt,createScene} from './scene.mjs';
import {setAudioEnabled,playSound} from './audio.mjs';
import {TOOLSET,SPAWN,normalizePlayer} from './world.mjs';
let state=null,art=null,scene=null,panelName=null,panelArg=null,busy=false,toastTimer,audioCtx=null,sound=false,soundTimer;
const $=s=>document.querySelector(s),esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const icon=(n,cls='')=>`<img class="${cls}" src="${art.icons[n]}" alt="">`;
const itemIcon=id=>icon(ITEMS[id]?.art??12);
function notify(message){$('#toast').textContent=message;$('#toast').classList.add('show');clearTimeout(toastTimer);toastTimer=setTimeout(()=>$('#toast').classList.remove('show'),4200);}
async function api(path,data){let r=await fetch('/api/'+path,{method:data?'POST':'GET',headers:data?{'Content-Type':'application/json'}:{},body:data?JSON.stringify(data):undefined});let b=await r.json();if(!r.ok){let e=Error(b.error||'เชื่อมต่อไม่ได้');e.status=r.status;throw e;}return b;}
const actionButton=(label,action,extra={},cls='')=>`<button class="${cls}" data-act="${action}" data-args="${esc(JSON.stringify(extra))}">${label}</button>`;
const panelButton=(label,panel,arg='',cls='')=>`<button class="${cls}" data-panel="${panel}" data-arg="${arg}">${label}</button>`;
const price=id=>Math.max(1,Math.round(ITEMS[id].price*Math.max(.7,Math.min(1.3,1+(30-state.world.stock[id])/100+(state.player.zone==='market'?.15:0)))));
function ping(){if(!sound||!audioCtx)return;const o=audioCtx.createOscillator(),g=audioCtx.createGain();o.type='sine';o.frequency.setValueAtTime(660,audioCtx.currentTime);o.frequency.exponentialRampToValueAtTime(990,audioCtx.currentTime+.12);g.gain.setValueAtTime(.045,audioCtx.currentTime);g.gain.exponentialRampToValueAtTime(.001,audioCtx.currentTime+.3);o.connect(g).connect(audioCtx.destination);o.start();o.stop(audioCtx.currentTime+.3);}
async function act(action,args={}){
 if(action==='hint'){notify(args.text);return false;}
 if(busy||!state)return false;busy=true;
 try{const oldZone=state.player.zone;$('#save-status').textContent='กำลังบันทึก…';
 const position=scene?.zone===oldZone?{x:scene.player.x,y:scene.player.y}:state.player.position;
 const next=await api('action',{action,position,...args});state=next;render();
 if(oldZone!==state.player.zone)scene?.reset();
 if(action!=='position'){notify(next.message);ping();}
 if(['travel','sleep'].includes(action))close();else if(panelName&&action!=='position')open(panelName,panelArg);
 $('#save-status').textContent='บันทึกแล้ว';return true;
 }catch(e){notify(e.message);$('#save-status').textContent='ยังไม่สำเร็จ';return false;}finally{busy=false;}
}
function render(){
 if(!state)return;const p=normalizePlayer(state.player),w=state.world;
 Object.assign(ITEMS,w.content?.item);Object.assign(RECIPES,w.content?.recipe);
 ZONES.home={name:'บ้านอุ่นไอ',safe:true};
 const z=ZONES[p.zone]||ZONES.farm,b=BAG_TYPES[p.bagLevel];
 $('#player-name').textContent=p.name;$('#gold').textContent=p.gold;$('#location').textContent=z.name;
 $('#safety').textContent=z.safe?'✿ เขตปลอดภัย':'⚑ เขตเสี่ยง · ระวังชีวิต';
 $('#tool-label').textContent=TOOLSET[scene?.selected||0].name;$('#bag-count').textContent=`${p.bag.length}/${b.slots}`;$('#portrait').src=art.portrait;
 $('#vitals').innerHTML=[['❧','แรงกาย',p.energy,100,'#96b670'],['♥','ชีวิต',p.hp,100,'#d58b79'],['✦','พลังเวท',p.mp,60,'#91a9c7']].map(([symbol,name,n,max,col])=>`<div class="vital" title="${name} ${n}/${max}" style="--c:${col}"><span class="v-icon" style="color:${col}">${symbol}</span><div><div class="v-label">${name}</div><div class="track"><i style="width:${n/max*100}%"></i></div></div><output>${n}/${max}</output></div>`).join('');
 $('#belt').innerHTML=['potion','mana','scroll'].map(id=>actionButton(`${itemIcon(id)}<b>${p.belt[id]||0}</b>`,'use',{id})).join('');
 document.querySelectorAll('#belt button').forEach((el,i)=>{el.title=ITEMS[['potion','mana','scroll'][i]].name;el.setAttribute('aria-label',el.title);});
 $('#hotbar').innerHTML=TOOLSET.map((t,i)=>`<button data-tool="${i}" class="${i===(scene?.selected||0)?'selected':''}" aria-label="${t.name} ปุ่ม ${i+1}" title="${t.name} [${i+1}]">${icon(t.art)}<kbd>${i+1}</kbd></button>`).join('');
 document.querySelectorAll('[data-art]').forEach(i=>i.src=art.icons[+i.dataset.art]);
 const seasons=['ฤดูใบไม้ผลิ','ฤดูร้อน','ฤดูใบไม้ร่วง','ฤดูหนาว'];$('#season').textContent=`${seasons[Math.floor((w.number-1)/28)%4]} · วันที่ ${(w.number-1)%28+1}`;clock();
}
function clock(){if(!state?.world)return;const w=state.world,base=Number.isFinite(w.clock)?w.clock:360,elapsed=Math.max(0,Math.floor((Date.now()-(w.lastTick||Date.now()))/1200)),minute=(base+elapsed)%1440,hour=Math.floor(minute/60);$('#time').textContent=`${String(hour).padStart(2,'0')}:${String(minute%60).padStart(2,'0')} น.`;}
function close(){$('#modal').close();scene?.stop();panelName=null;panelArg=null;}
$('#close-modal').onclick=close;$('#modal').addEventListener('cancel',()=>{panelName=null;panelArg=null;});
function open(name,arg=''){playSound('menu');scene?.stop();$('#modal').classList.toggle('dialogue',name==='npc');panelName=name;panelArg=arg;const p=state?.player,w=state?.world;let title='',html='';const tile=(id,n,controls='')=>`<div class="tile">${itemIcon(id)}<h3>${ITEMS[id].name} ×${n}</h3>${controls}</div>`;
 if(name==='welcome'){title='บ้านใหม่รอเธออยู่';html=`<img class="welcome-cat" src="${art.portrait}" alt="แมวชาวสวน"><p class="center">เก็บผัก ทำซุป และค่อยๆ ทำความรู้จักหุบเขา<br>ที่นี่ไม่ต้องรีบ และไม่มีอาชีพที่ต้องเลือก</p><form id="start-form"><label class="field">แมวตัวน้อยชื่ออะไร?<input name="name" maxlength="24" value="มะลิ" required autocomplete="off"></label><button class="primary wide">เริ่มวันแรกของเรา →</button></form>${panelButton('มีบัญชีแล้ว · กลับเข้าบ้าน','login','','wide')}<p class="mini-help center">ความคืบหน้าบันทึกในเครื่องเซิร์ฟเวอร์นี้อัตโนมัติ</p>`;}
 else if(name==='login'||name==='account'){title=name==='login'?'กลับเข้าบ้าน':'เก็บกุญแจบ้านของเรา';html=`<p>ผูกชื่อบัญชีเพื่อกลับมาเล่นเซฟเดิมจากเบราว์เซอร์อื่น</p><form id="${name}-form"><label class="field">ชื่อบัญชี<input name="username" minlength="3" maxlength="24" pattern="[A-Za-z0-9_]+" required autocomplete="username"></label><label class="field">รหัสผ่าน<input type="password" name="password" minlength="8" required autocomplete="${name==='login'?'current-password':'new-password'}"></label><button class="primary wide">${name==='login'?'เข้าบ้าน':'ผูกบัญชีนี้กับเซฟปัจจุบัน'}</button></form>`;}
 else if(name==='map'){title='แผนที่หุบเขา';html=`<p>ดูเส้นทาง แล้วเดินไปตามป้ายในฉาก</p><div class="world-map">${[['cave',5],['forest',1],['farm',0],['pond',8],['town',4],['market',4]].map(([id,i])=>`<div class="${p.zone===id?'here':''}">${icon(i)}${ZONES[id].name}<small>${p.zone===id?'เราอยู่ที่นี่':id==='market'&&w.bridge<30?'สะพานยังไม่เสร็จ':''}</small></div>`).join('')}</div><div class="map-route">ถ้ำ ↕ ป่ากระซิบ ↔ สวนอุ่นไอ ↔ หมู่บ้าน ↔ เมืองลมทะเล<br>สวนอุ่นไอ ↓ บ่อประกายดาว<br>ประตูบ้านอยู่ทางเหนือของแปลงผัก</div>`;}
 else if(name==='rest'){title='พักผ่อนที่บ้าน';html=`<p>วางเครื่องมือ แล้วพักสักหน่อย</p>${actionButton('พักเติมพลัง','sleep',{},'primary wide')}<p class="mini-help">พักเติมพลังได้วันละครั้งในเกม พืชเติบโตเมื่อเช้าวันใหม่ของหุบเขามาถึง</p>`;}
 else if(name==='farm'){title='แปลงผักของเรา';html=`<p>พรวนดิน → ปลูก → รดน้ำ → เติบโตเมื่อเช้าวันใหม่ → เก็บเกี่ยว<br>หนึ่งวันในหุบเขายาวประมาณ 29 นาทีจริง รดน้ำทุกวันเพื่อให้โตต่อ</p><div class="grid">${p.plots.map((plot,i)=>`<div class="tile">${icon(plot.crop?plot.crop==='carrot'?6:7:12)}<h3>แปลงที่ ${i+1}</h3><small>${plot.crop?`${(ITEMS[plot.crop]?.name||w.content?.crop?.[plot.crop]?.name)} · ${plot.age>=(w.content?.crop?.[plot.crop]?.days||2)?'พร้อมเก็บ':`วันที่ ${plot.age}/2`} ${plot.watered?'· รดน้ำแล้ว':''}`:plot.tilled?'ดินพร้อมปลูก':'ดินแข็ง · ใช้จอบ [1]'}</small>${panelButton('ดูแลแปลงนี้','plot',i)}</div>`).join('')}</div>`;}
 else if(name==='plot'){const i=Number(arg),plot=p.plots[i];title=`แปลงผักที่ ${i+1}`;if(!plot)return;html=`<div class="center">${icon(plot.crop?plot.crop==='carrot'?6:7:12,'welcome-cat')}</div>`;if(!plot.crop)html+=plot.tilled?`<p>ใช้เมล็ดจากกระเป๋าหรือกล่องที่บ้าน · แรงกาย 3</p>${actionButton('ปลูกแครอท','plant',{plot:i,crop:'carrot'},'primary wide')}${actionButton('ปลูกมะเขือเทศ','plant',{plot:i,crop:'tomato'},'wide')}${Object.entries(w.content?.crop||{}).filter(([,c])=>c.status==='active').map(([id,c])=>actionButton('ปลูก'+c.name,'plant',{plot:i,crop:id},'wide')).join('')}`:`<p>ดินแข็งอยู่ · ใช้แรงกาย 2 เพื่อพรวน แล้วค่อยหยอดเมล็ด</p>${actionButton('พรวนดิน','till',{plot:i},'primary wide')}`;else html+=`<p class="center">${(ITEMS[plot.crop]?.name||w.content?.crop?.[plot.crop]?.name)} · ${plot.age>=(w.content?.crop?.[plot.crop]?.days||2)?'โตเต็มที่แล้ว':`โตวันที่ ${plot.age} จาก 2 วัน`}</p>${plot.age>=(w.content?.crop?.[plot.crop]?.days||2)?actionButton('เก็บเกี่ยวผลผลิต','harvest',{plot:i},'primary wide'):plot.watered?'<div class="notice">รดน้ำแล้ว แวะกลับมาในวันถัดไปนะ</div>':actionButton('รดน้ำ · แรงกาย 2','water',{plot:i},'primary wide')}`;}
 else if(name==='bag'){title='กระเป๋าเดินทาง';const b=BAG_TYPES[p.bagLevel];html=`<p>${p.bag.length} / ${b.slots} ช่อง · ช่องละ ${b.stack} ชิ้น · ช่องสีทองปลอดภัย ${b.safe} ช่อง</p><div class="grid">${Array.from({length:b.slots},(_,i)=>{const s=p.bag[i];return `<div class="tile ${i<b.safe?'safe-slot':''}"><small>ช่อง ${i+1}${i<b.safe?' · ปลอดภัย':''}</small>${s?`${itemIcon(s.id)}<h3>${ITEMS[s.id].name} ×${s.n}</h3>${['soup','grilled','potion','mana','scroll','repair'].includes(s.id)?actionButton('ใช้ 1 ชิ้น','use',{id:s.id}):''}${['potion','mana','scroll'].includes(s.id)?actionButton('ใส่เข็มขัด','belt',{id:s.id}):''}${i>0?actionButton('ย้ายไปช่องแรก','moveSlot',{index:i}):''}`:'<div class="empty">＋</div>'}</div>`;}).join('')}</div><div class="notice">เครื่องมือระดับ ${p.equipment.tool} · สภาพ ${p.equipment.durability}%<br>เข็มขัด: ยา ${p.belt.potion} · ชา ${p.belt.mana} · ม้วนกลับบ้าน ${p.belt.scroll}</div>${['farm','home'].includes(p.zone)?actionButton('เก็บของทั้งหมดเข้ากล่อง','deposit',{},'primary wide'):'<p>กลับไปที่กล่องในสวนหรือในบ้านเพื่อเก็บของ</p>'}`;}
 else if(name==='home'){title='บ้านอุ่นไอ';if(!['farm','home'].includes(p.zone)){html=panelButton('เดินทางกลับบ้านก่อน','map','','wide');}else html=`<p>กล่องใบนี้เก็บของของเราไว้เสมอ คราฟต์ที่บ้านใช้วัตถุดิบจากกล่องได้เลย</p>${actionButton('เก็บของทั้งหมดเข้ากล่อง','deposit',{},'primary wide')}<div class="grid">${Object.entries(p.storage).filter(([,n])=>n>0).map(([id,n])=>tile(id,n,actionButton('หยิบ 1 ชิ้น','withdraw',{id}))).join('')||'<p>กล่องยังว่างอยู่</p>'}</div><div class="tabs" style="margin-top:20px">${panelButton('ครัวเล็กๆ','craft')}${panelButton('ตู้เสื้อผ้า','wardrobe')}${actionButton('พักเติมพลัง','sleep')}${actionButton('นั่งพัก · เวท +6','rest')}</div><p class="mini-help">พักเติมพลังได้วันละครั้งในเกม หุบเขาใช้เวลาเดียวกันสำหรับทุกคน และเช้าวันใหม่จะดูแลการเติบโตของพืช</p>`;}
 else if(name==='craft'){title='ครัวเล็กๆ และงานฝีมือ';html=`<div class="tabs">${panelButton('สูตรที่รู้จัก','craft','','active')}${panelButton('สำนักวิชา','skills')}${panelButton('อัปเกรดอุปกรณ์','upgrades')}</div><p>ทำที่บ้านหรือในหมู่บ้าน · สูตรใหม่บางเล่มซ่อนอยู่ในถ้ำลึก</p>${Object.entries(RECIPES).filter(([,r])=>r.status!=='retired').map(([id,r])=>`<div class="row">${itemIcon(r.out)}<div class="grow"><h3>${r.name}</h3><small>${Object.entries(r.needs).map(([k,n])=>ITEMS[k].name+' ×'+n).join(' · ')}<br>แรง ${r.energy}${w.discoveries[id]?' · ค้นพบโดย '+esc(w.discoveries[id]):''}</small></div>${p.known.includes(id)?actionButton('ทำเลย','craft',{id}):actionButton('เรียน 20 เหรียญ','learnRecipe',{id})}</div>`).join('')}`;}
 else if(name==='shop'){title=p.zone==='market'?'ตลาดลมทะเล':'ร้านของฟินน์';html=`<div class="tabs">${panelButton('ซื้อของ','shop','','active')}${panelButton('ขายของ','sell')}${panelButton('กระเป๋าและเครื่องมือ','upgrades')}</div><p>ของในร้านใช้ร่วมกันทั้งหุบเขา · เติมของตอนเริ่มวันใหม่</p><div class="grid">${['seed','tomatoSeed','flowerSeed','scroll','potion','mana','soup','mushroom','herb','repair',...Object.keys(w.content?.item||{})].filter(id=>ITEMS[id].status!=='retired').map(id=>tile(id,w.stock[id],`<small>◉ ${price(id)} เหรียญ</small>${actionButton('ซื้อ 1 ชิ้น','buy',{id})}`)).join('')}</div>`;}
 else if(name==='sell'){title='แบ่งของให้ร้าน';html=`<div class="tabs">${panelButton('ซื้อของ','shop')}${panelButton('ขายของ','sell','','active')}</div>${p.bag.length?'<div class="grid">'+p.bag.map(s=>tile(s.id,s.n,actionButton('ขาย ◉ '+Math.floor(price(s.id)*.7),'sell',{id:s.id}))).join('')+'</div>':'<div class="empty">ยังไม่มีของในกระเป๋า</div>'}`;}
 else if(name==='upgrades'){title='ของคู่ใจนักเดินทาง';let b=BAG_TYPES[p.bagLevel+1];html=`<p>พบช่างในหมู่บ้านเพื่ออัปเกรด ของสวมใส่ไม่หายเมื่อหมดแรง</p><div class="row">${icon(16)}<div class="grow"><h3>กระเป๋าใบถัดไป</h3><small>${b?`${b.slots} ช่อง · ช่องละ ${b.stack} · ปลอดภัย ${b.safe} ช่อง<br>ราคา ${b.cost} เหรียญ`:'อัปเกรดสูงสุดแล้ว'}</small></div>${b?actionButton('อัปเกรด','upgradeBag'):''}</div><div class="row">${icon(14)}<div class="grow"><h3>เครื่องมือระดับ ${p.equipment.tool+1}</h3><small>แร่ทองแดง 3 · ${p.equipment.tool*90} เหรียญ<br>ระดับ 2 เปิดถ้ำชั้นลึก</small></div>${p.equipment.tool<3?actionButton('ตีเครื่องมือ','upgradeTool'):''}</div>`;}
 else if(name==='fishing'){title='รอเสียงน้ำกระเพื่อม';const f=p.fish;html=`<div class="center">${icon(15,'welcome-cat')}</div><p class="center">หย่อนเบ็ด ใช้แรงกาย 4 หน่วย<br>รอประมาณ 2 วินาที แล้วดึงเบ็ดภายใน 15 วินาที</p>${f?`<div class="notice center" id="fishing-status">กำลังรอปลากินเหยื่อ…</div>${actionButton('ดึงเบ็ด!','reel',{},'primary wide')}${actionButton('เก็บเบ็ด / ลองใหม่','cancelFish',{},'wide')}`:actionButton('หย่อนเบ็ด','cast',{},'primary wide')}`;}
 else if(name==='mine'){title='ใต้แสงของภูเขา';html=`<div class="center">${icon(3,'welcome-cat')}</div><p>ชั้นตื้นให้แร่ทองแดงและใช้แรงกาย 8 หน่วย<br>ชั้นลึกมีหินแสงจันทร์และตำรา แต่กับดักทำให้เสียชีวิต 10–18 หน่วย</p>${actionButton('ขุดแร่ชั้นตื้น','mine',{},'primary wide')}${actionButton('สำรวจชั้นลึก · เครื่องมือระดับ 2','mine',{deep:true},'wide')}<p class="mini-help">เครื่องมือสึก 3% ต่อครั้ง ใช้หินลับจากร้านหรือเรียนสูตรจากฟินน์</p>`;}
 else if(name==='hunt'){title='หมาป่าหมอก';html=`<div class="center">${icon(19,'welcome-cat')}</div><p>หมาป่าไม่โจมตีก่อน เธอเลือกบันทึกเรื่องราวของมัน หรือออกล่าเพื่อเก็บขนสัตว์ก็ได้</p><div class="warning">ออกล่าจะเสียชีวิต ${p.skills.includes('shield')?9:18} หน่วย และลดหมาป่าในระบบนิเวศ ถ้าชีวิตหมด ของในช่องปกติจะหาย</div>${actionButton('บันทึกลงสมุดธรรมชาติ','observe',{id:'wolf'},'wide')}${actionButton('เลือกออกล่า · ได้ขนสัตว์ 2','hunt',{},'wide')}${Object.entries(w.content?.creature||{}).filter(([,c])=>c.status==='active').map(([id,c])=>actionButton(esc(c.name)+' · เสียชีวิต '+c.attack,'hunt',{id},'wide')).join('')}`;}
 else if(name==='quests'){title='เรื่องราวที่ค่อยๆ ผลิบาน';html=QUESTS.map(q=>`<div class="row">${icon(q.id==='cook'?22:q.id==='angler'?8:12)}<div class="grow"><h3>${q.name}</h3><small>${q.text}<br>${Math.min(q.goal,p.stats[q.metric]||0)}/${q.goal} · รางวัล ${q.gold} เหรียญ</small></div>${p.quests.includes(q.id)?'<small>✓ เสร็จแล้ว</small>':(p.stats[q.metric]||0)>=q.goal?actionButton('รับรางวัล','quest',{id:q.id}):'<small>กำลังเดินทาง</small>'}</div>`).join('');}
 else if(name==='journal'){title='สมุดธรรมชาติของเรา';html=`<p>บันทึกแล้ว ${p.journal.length} / ${Object.keys(SPECIES).length} ชนิด · สังเกตได้เมื่ออยู่ในพื้นที่ของสิ่งมีชีวิตนั้น</p><div class="grid">${Object.entries(SPECIES).map(([id,s])=>`<div class="tile">${icon(s.art)}<h3>${s.name}</h3><small>${s.text}</small>${p.journal.includes(id)?'<small>✓ บันทึกแล้ว</small>':actionButton('สังเกตและบันทึก','observe',{id})}${w.journal[id]?`<small>ผู้พบคนแรก: ${esc(w.journal[id])}</small>`:''}</div>`).join('')}</div><p>บันทึกของหุบเขา</p><div class="stat-grid"><div>ความอุดมสมบูรณ์<b>${Math.round(w.ecology)}%</b></div>${Object.entries(w.pop).map(([k,n])=>`<div>${SPECIES[k].name}<b>${Math.round(n)}</b></div>`).join('')}</div><p class="mini-help">ดอกไม้ → ผึ้ง → ผลผลิตเพิ่ม · หมาป่า → คุมกระต่าย → พืชปลอดภัย ทุกชนิดมีจำนวนขั้นต่ำและป่าฟื้นตัวได้เสมอ</p>`;}
 else if(name==='skills'){title='สำนักวิชาใต้ต้นไม้';html=`<p>เรียนในหมู่บ้าน · ทำได้ทุกสาย ไม่ต้องเลือกอาชีพ</p>${[['gentle','มือเบา','เก็บของและขุดแร่ใช้แรงน้อยลง'],['shield','ใจเย็น','ออกล่าเสียชีวิตน้อยลง'],['heal','ไออุ่น','ใช้เวท 12 ฟื้นชีวิต 30']].map(([id,n,d])=>`<div class="row">${icon(id==='heal'?23:9)}<div class="grow"><h3>${n}</h3><small>${d} · 45 เหรียญ</small></div>${p.skills.includes(id)?id==='heal'?actionButton('ใช้วิชา','heal'):'<small>เรียนแล้ว</small>':actionButton('เรียน','learn',{skill:id})}</div>`).join('')}`;}
 else if(name==='npc'){title='ฟินน์ · ร้านเล็กกลางหมู่บ้าน';html=`<img class="welcome-cat" src="${art.icons[18]}" alt="ฟินน์"><p class="center">${p.relations>=3?'“ทุกครั้งที่เธอกลับมา หุบเขาก็ดูอบอุ่นขึ้นอีกนิด”':'“ยินดีต้อนรับนะ ชอบซุปผักไหม? ฉันมีเห็ดสดอยู่พอดี”'}</p><div class="notice center">ความสนิท ${p.relations} ♥ · คุยกันได้ทุกวัน</div>${actionButton('ทักทายฟินน์','talk',{},'primary wide')}${actionButton('มอบซุปผัก 1 ถ้วย · ความสนิท +2','gift',{},'wide')}${panelButton('แวะร้านค้า','shop','','wide')}${panelButton('ช่วยหมู่บ้าน','town','','wide')}`;}
 else if(name==='town'){title='เติบโตไปด้วยกัน';html=`<div class="season-card"><h3>สะพานสู่เมืองลมทะเล</h3><p>ทุกคนช่วยกันส่งไม้ 30 ชิ้น เพื่อเปิดเมืองใหม่พร้อมกัน</p><div class="track" style="--c:#7da66b"><i style="width:${Math.min(100,w.bridge/30*100)}%"></i></div><p>${w.bridge}/30 ชิ้น</p>${w.bridge<30?actionButton('บริจาคไม้ 1 ชิ้น','donate',{},'primary'):'<p>สะพานเปิดแล้ว เดินไปทางตะวันออกของหมู่บ้านได้เลย</p>'}</div><h3>งานกิลด์วันนี้</h3><p>หมอยาต้องการสมุนไพร 3 ชิ้น · รางวัล 35 เหรียญ<br>งานนี้รับได้วันละหนึ่งคนทั้งหุบเขา</p>${actionButton('ส่งสมุนไพรให้กิลด์','guild',{},'wide')}`;}
 else if(name==='wardrobe'){title='ของเล็กๆ ที่เป็นเรา';html=`<p>ซื้อของตกแต่งที่บ้านหรือหมู่บ้าน · ชิ้นละ 80 เหรียญ</p><div class="grid">${[['rose','ผ้าพันคอชมพู',12],['sage','ผ้าพันคอใบชา',12],['pet','เพื่อนกระต่าย',20],['decor','ต้นซากุระหน้าบ้าน',2]].map(([id,n,i])=>`<div class="tile">${icon(i)}<h3>${n}</h3>${(id==='pet'?p.pet:id==='decor'?p.decor:p.wardrobe.includes(id))?p.wardrobe.includes(id)?actionButton('สวมใส่','dress',{id}):'<small>มีแล้ว</small>':actionButton('ซื้อ 80 เหรียญ','cosmetic',{id})}</div>`).join('')}</div>${actionButton('ใช้ชุดเริ่มต้น','dress',{id:'cream'},'wide')}`;}
 else if(name==='settings'){title='กุญแจบ้านและการตั้งค่า';html=`<p><a href="/tools/sprite-importer.html" target="_blank" rel="noopener">✎ เครื่องมือจัดการภาพ</a></p><p>เซฟของ ${esc(p.name)} · บันทึกอัตโนมัติที่เซิร์ฟเวอร์นี้</p>${state.account?`<div class="notice">ผูกบัญชีแล้ว: ${esc(state.account)}</div>`:panelButton('ผูกบัญชีเพื่อเก็บเซฟ','account','','primary wide')}${panelButton('เข้าบัญชีอื่น','login','','wide')}${panelButton('วิธีเล่น','help','','wide')}<p class="mini-help">ข้อมูลจะอยู่ต่อเมื่อปิดเบราว์เซอร์ การย้ายเครื่องเซิร์ฟเวอร์ต้องย้ายฐานข้อมูลด้วย</p>`;}
 else if(name==='help'){title='ชีวิตเล็กๆ ในหุบเขา';html=`<p>เดินเข้าใกล้สิ่งของ แล้วใช้เครื่องมือในมือ</p><div class="notice">WASD / ลูกศร: เดิน · Shift: วิ่ง<br>1–6: เลือกเครื่องมือ · C / Space: ใช้เครื่องมือ<br>E / X: โต้ตอบ · B: กระเป๋า · M: ดูแผนที่ · J: ภารกิจ</div><p>แปลงว่าง: เลือกจอบ [1] กด C พรวนดิน แล้วเลือกเมล็ด [2] กด C ปลูก<br>พืชเล็ก: เลือกบัวรดน้ำ [3] แล้วกด C<br>พืชโต: ยืนข้างแปลงแล้วกด C เก็บเกี่ยว<br>ตกปลา: เดินถึงท่าน้ำ เลือกเบ็ด [5] แล้วกด C รอเครื่องหมาย ! แล้วกด C อีกครั้ง<br>ขุดแร่: ยืนข้างก้อนแร่ เลือกพลั่ว [4] แล้วกด C<br>เดินตามป้ายจนถึงขอบทางเพื่อข้ามแผนที่</p><p>กล่อง ครัว เตียง ร้านค้า และชาวเมืองอยู่ในฉาก เดินไปหาแล้วกด E<br>ของในเขตปลอดภัยไม่หาย ภารกิจคืบหน้าอัตโนมัติ</p>`;}
 $('#modal-title').textContent=title;$('#modal-content').innerHTML=html;$('#close-modal').hidden=!state;if(!$('#modal').open)$('#modal').showModal();bindForms();}
function bindForms(){for(const type of ['start','login','account']){let form=$('#'+type+'-form');if(form)form.onsubmit=async e=>{e.preventDefault();const button=form.querySelector('button');button.disabled=true;try{let data=Object.fromEntries(new FormData(form));const r=await api(type==='account'?'account':type,data);if(type==='account'){state.account=r.account;open('settings');notify('ผูกบัญชีแล้ว');}else {state=r;$('#app').hidden=false;close();render();scene?.reset();notify(type==='start'?'ยินดีต้อนรับกลับบ้าน เริ่มเก็บแครอทกันเลย':'กลับบ้านแล้ว!');}}catch(e){notify(e.message);}finally{button.disabled=false;}}}}
document.addEventListener('click',e=>{const a=e.target.closest('[data-act]');if(a){act(a.dataset.act,JSON.parse(a.dataset.args||'{}'));return;}const b=e.target.closest('[data-panel]');if(b)open(b.dataset.panel,b.dataset.arg||'');});
$('#fullscreen').onclick=async()=>{try{if(document.fullscreenElement)await document.exitFullscreen();else await document.documentElement.requestFullscreen();}catch{notify('ใช้โหมดเต็มหน้าจอจากเมนูเบราว์เซอร์ได้ครับ');}};
$('#sound').onclick=()=>{sound=!sound;setAudioEnabled(sound);$('#sound').setAttribute('aria-label',sound?'ปิดเสียง':'เปิดเสียง');$('#sound').style.background=sound?'#dfeacd':'';if(sound){audioCtx ||=new AudioContext();audioCtx.resume();ping();soundTimer=setInterval(()=>{if(document.hidden||!sound)return;const o=audioCtx.createOscillator(),g=audioCtx.createGain();o.type='sine';o.frequency.value=[261.63,329.63,392,440,523.25][Math.floor(Math.random()*5)];g.gain.setValueAtTime(.012,audioCtx.currentTime);g.gain.exponentialRampToValueAtTime(.001,audioCtx.currentTime+2.5);o.connect(g).connect(audioCtx.destination);o.start();o.stop(audioCtx.currentTime+2.5);},3000);}else clearInterval(soundTimer);};
setInterval(()=>{clock();if(panelName==='fishing'&&state?.player.fish){const f=state.player.fish,el=$('#fishing-status');if(el)el.textContent=Date.now()<f.ready?'กำลังรอปลากินเหยื่อ…':Date.now()>f.expires?'ปลาหลุดแล้ว เก็บเบ็ดแล้วลองใหม่ได้เลย':'ปลากินเหยื่อแล้ว! ดึงเบ็ดเลย';}},300);
try{art=await loadArt();try{state=await api('state');}catch(e){if(e.status!==401)throw e;}$('#loading').hidden=true;$('#app').hidden=!state;scene=createScene($('#scene'),art,()=>state,act,open);if(state)render();else open('welcome');}catch(e){$('#loading').innerHTML='<h1>หุบเขากำลังพัก</h1><p>'+esc(e.message)+'</p><button onclick="location.reload()">ลองโหลดอีกครั้ง</button>';}
setInterval(async()=>{if(!state||busy||document.hidden)return;try{state=await api('state');render();}catch{}},5000);

let lastSavedPosition='';setInterval(()=>{if(!state||busy||panelName||!scene||scene.zone!==state.player.zone||document.hidden)return;const pos={x:Math.round(scene.player.x),y:Math.round(scene.player.y)};const key=state.player.zone+JSON.stringify(pos);if(key===lastSavedPosition)return;lastSavedPosition=key;act('position',pos);},4000);