* { box-sizing: border-box; font-family: Arial, sans-serif; }
body { margin:0; background:#87ceeb; }
#ui { position: absolute; left:10px; top:10px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.6); }
#hp, #coins, #inventory { margin-bottom:6px; }
#shop { position: absolute; right:20px; top:20px; background: rgba(0,0,0,0.8); color:#fff; padding:12px; border-radius:8px; width:260px; display:none; }
#shop.hidden { display:none; }
canvas { display:block; margin:0 auto; background:linear-gradient(#9be6ff, #87ceeb); box-shadow: 0 6px 20px rgba(0,0,0,0.3); margin-top:40px; }
#multiplayerNote { font-size:12px; margin-top:6px; color:#222; background:#fff; padding:6px; border-radius:6px; display:inline-block; }
button { cursor:pointer; padding:8px 10px; border-radius:6px; border:none; background:#ffaa00; }