ctx.fillStyle = isKong? '#f2d2a2' : '#a6ffd1';
ctx.font='12px system-ui'; ctx.textAlign='center'; ctx.textBaseline='middle';
ctx.fillText(isKong?'KONG':'KAIJU', p.x+p.w/2, p.y+p.h/2);
ctx.restore();
}
function drawBall(){
const b = state.ball;
// glow
const grad = ctx.createRadialGradient(b.x,b.y,2,b.x,b.y,22);
grad.addColorStop(0,'rgba(255,255,230,.95)');
grad.addColorStop(1,'rgba(255,255,160,0)');
ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(b.x,b.y,22,0,Math.PI*2); ctx.fill();
// core
ctx.fillStyle = getVar('--ball'); ctx.beginPath(); ctx.arc(b.x,b.y,b.r,0,Math.PI*2); ctx.fill();
// spin trail
ctx.save(); ctx.globalAlpha=.25; ctx.fillStyle = '#fff';
for(let i=0;i<4;i++){ ctx.beginPath(); ctx.arc(b.x - state.ball.vx*i*1.6, b.y - state.ball.vy*i*1.6, Math.max(2,b.r-2-i), 0, Math.PI*2); ctx.fill(); }
ctx.restore();
}
function drawHUD(){
ctx.save();
ctx.fillStyle = getVar('--ui');
ctx.font='bold 48px system-ui'; ctx.textAlign='center';
ctx.fillText(state.scoreL, W*0.25, 64);
ctx.fillText(state.scoreR, W*0.75, 64);
ctx.font='14px system-ui'; ctx.globalAlpha=.85;
ctx.fillText('🦍 KING KONG', 90, 24);
ctx.fillText('🐉 KAIJU', W-70, 24);
if(state.paused){ ctx.globalAlpha=.9; ctx.font='bold 24px system-ui'; ctx.fillText('PAUSED', W/2, 26); }
ctx.restore();
}
function roundRect(ctx,x,y,w,h,r){
const rr = Math.min(r, w/2, h/2);
ctx.beginPath();
ctx.moveTo(x+rr,y);
ctx.arcTo(x+w,y,x+w,y+h,rr);
ctx.arcTo(x+w,y+h,x,y+h,rr);
ctx.arcTo(x,y+h,x,y,rr);
ctx.arcTo(x,y,x+w,y,rr);
ctx.closePath();
}
function getVar(name){ return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); }
function show(el){ el.classList.remove('hidden'); }
function hide(el){ el.classList.add('hidden'); }
// --- LOOP ---
function loop(){
update();
draw();
requestAnimationFrame(loop);
}
// --- UI wiring ---
startBtn.onclick=()=>{ setModeDifficulty(); if(!state.running){ reset(true); } else { state.paused=false; } hide(menuOverlay); };
pauseBtn.onclick=()=>togglePause();
resetBtn.onclick=()=>reset(true);
menuPlay.onclick=()=>{ setModeDifficulty(); reset(true); };
againBtn.onclick=()=>{ setModeDifficulty(); reset(true); };
modeSel.onchange=()=>setModeDifficulty();
diffSel.onchange=()=>setModeDifficulty();
// start in menu with a gentle serve so you see the ball glow
serve(1);
loop();
})();